diff --git a/package.json b/package.json index e1fe547..e9e5ea2 100644 --- a/package.json +++ b/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", diff --git a/src/components/Pre/Pre.module.css b/src/components/Pre/Pre.module.css new file mode 100644 index 0000000..fd6f675 --- /dev/null +++ b/src/components/Pre/Pre.module.css @@ -0,0 +1,8 @@ +.pre { + display: block; + white-space: var(--white-space); +} + +.pre.inline { + display: inline-block; +} diff --git a/src/components/Pre/Pre.spec.tsx b/src/components/Pre/Pre.spec.tsx new file mode 100644 index 0000000..2e8531f --- /dev/null +++ b/src/components/Pre/Pre.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react'; +import { Pre } from './Pre'; + +describe('
', () => { + it('receives data attributes', () => { + render(); + const pre = screen.getByTestId('pre'); + + expect(pre).toBeInTheDocument(); + }); +}); diff --git a/src/components/Pre/Pre.stories.tsx b/src/components/Pre/Pre.stories.tsx new file mode 100644 index 0000000..b32a43d --- /dev/null +++ b/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; + +type Story = StoryObj ; + +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) => ( + ++ ), + args: defaultArgs, +}; + +export const WhiteSpacePre: Story = { + render: (args) => ( ++ + +++ ), + args: { + ...defaultArgs, + whiteSpace: 'pre', + }, +}; + +export const PreWrap: Story = { + render: (args) => ( ++ + +++ ), + args: { + ...defaultArgs, + whiteSpace: 'pre-wrap', + }, +}; + +export const Inline: Story = { + render: (args) => ( ++ + ++ Text +
+ Text + + ), + args: { + ...defaultArgs, + children: `Lorem Ipsum +is simply +dummy text +of the +printing and +typesetting industry.`, + inline: true, + }, +}; diff --git a/src/components/Pre/Pre.tsx b/src/components/Pre/Pre.tsx new file mode 100644 index 0000000..bfdb2ed --- /dev/null +++ b/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, '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 >( + ({ children, whiteSpace = 'pre-line', inline = false, ...rest }, ref) => { + return ( + + {children} + + ); + }, +); + +Pre.displayName = 'Pre'; diff --git a/src/index.ts b/src/index.ts index 5f645e1..6efe890 100644 --- a/src/index.ts +++ b/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';