Merge pull request #122 from 8845musign/imple-pre

Imple Pre Copmonent

package.json

@@ -44,9 +44,7 @@
     "fix:eslint": "npm run lint:eslint -- --fix",
     "fix:prettier": "prettier -w src",
     "fix:stylelint": "npm run lint:stylelint -- --fix",
-    "generate": "npm run generate:scaffold && npm run generate:barrel",
-    "generate:scaffold": "scaffdog generate component",
-    "generate:barrel": "node ./scripts/barrel.mjs",
+    "generate": "scaffdog generate component",
     "prestorybook": "npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

src/components/Pre/Pre.module.css

@@ -0,0 +1,8 @@
+.pre {
+  display: block;
+  white-space: var(--white-space);
+}
+
+.pre.inline {
+  display: inline-block;
+}

src/components/Pre/Pre.spec.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import { Pre } from './Pre';
+
+describe('<Pre>', () => {
+  it('receives data attributes', () => {
+    render(<Pre data-testid="pre" />);
+    const pre = screen.getByTestId('pre');
+
+    expect(pre).toBeInTheDocument();
+  });
+});

src/components/Pre/Pre.stories.tsx

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pre } from './Pre';
+import { Box } from '../Box/Box';
+
+export default {
+  title: 'typography/Pre',
+  component: Pre,
+} satisfies Meta<typeof Pre>;
+
+type Story = StoryObj<typeof Pre>;
+
+const defaultArgs = {
+  children: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+};
+
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="gray" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: defaultArgs,
+};
+
+export const WhiteSpacePre: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="gray" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+    whiteSpace: 'pre',
+  },
+};
+
+export const PreWrap: Story = {
+  render: (args) => (
+    <div style={{ width: 500 }}>
+      <Box border="gray" p="md">
+        <Pre {...args} />
+      </Box>
+    </div>
+  ),
+  args: {
+    ...defaultArgs,
+    whiteSpace: 'pre-wrap',
+  },
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <p>
+      Text
+      <Pre {...args} />
+      Text
+    </p>
+  ),
+  args: {
+    ...defaultArgs,
+    children: `Lorem Ipsum
+is simply
+dummy text
+of the
+printing and
+typesetting industry.`,
+    inline: true,
+  },
+};

src/components/Pre/Pre.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { clsx } from 'clsx';
+import { CSSProperties, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';
+import styles from './Pre.module.css';
+
+type AllowedSpanAttributes = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;
+
+type Props = {
+  /**
+   * 折り返しや空白、改行の扱い
+   * @default 'pre-line'
+   */
+  whiteSpace?: 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces';
+  /**
+   * inline-blockとして扱う
+   * @default false
+   */
+  inline?: boolean;
+} & AllowedSpanAttributes;
+
+export const Pre = forwardRef<HTMLSpanElement, PropsWithChildren<Props>>(
+  ({ children, whiteSpace = 'pre-line', inline = false, ...rest }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={clsx(styles.pre, inline && styles.inline)}
+        style={
+          {
+            '--white-space': whiteSpace,
+          } as CSSProperties
+        }
+        {...rest}
+      >
+        {children}
+      </span>
+    );
+  },
+);
+
+Pre.displayName = 'Pre';

src/index.ts

@@ -21,6 +21,7 @@ export { Label } from './components/Label/Label';
 export { LinkCard } from './components/LinkCard/LinkCard';
 export { MessageHalfModal } from './components/MessageHalfModal/MessageHalfModal';
 export { MessageModal } from './components/MessageModal/MessageModal';
+export { Pre } from './components/Pre/Pre';
 export { RadioButton } from './components/RadioButton/RadioButton';
 export { RadioCard } from './components/RadioCard/RadioCard';
 export { RadioGroup } from './components/RadioGroup/RadioGroup';