diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-13 19:32:56 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | 006b15b467a5cd835a6eab1b49023100bdc8f2e6 (patch) | |
| tree | 949c7295c2e206f42357f135bab4696ddf6576ec /src/components/molecules/layout/code.stories.tsx | |
| parent | 00f147a7a687d5772bcc538bc606cfff972178cd (diff) | |
refactor(components): rewrite Code component and usePrism hook
* move Prism styles to Sass placeholders to avoid repeats
* let usePrism consumer define its plugins (remove default ones)
* remove `plugins` prop from Code component
* add new props to Code component to let consumer configure plugins
(and handle plugin list from the given options)
However there are some problems with Prism plugins: line-highlight and
treeview does not seems to be loaded. I don't want to use Babel instead
of SWC so I have no solution for now.
Diffstat (limited to 'src/components/molecules/layout/code.stories.tsx')
| -rw-r--r-- | src/components/molecules/layout/code.stories.tsx | 121 |
1 files changed, 0 insertions, 121 deletions
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx deleted file mode 100644 index d20cdbe..0000000 --- a/src/components/molecules/layout/code.stories.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Code } from './code'; - -/** - * Code - Storybook Meta - */ -export default { - title: 'Molecules/Layout/Code', - component: Code, - args: { - filterOutput: false, - outputPattern: '#output#', - }, - argTypes: { - 'aria-label': { - control: { - type: 'text', - }, - description: 'An accessible name for the code sample.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - children: { - control: { - type: 'text', - }, - description: 'The code sample.', - type: { - name: 'string', - required: true, - }, - }, - filterOutput: { - control: { - type: 'boolean', - }, - description: 'Filter the command line output.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - language: { - control: { - type: 'text', - }, - description: 'The code sample language.', - type: { - name: 'string', - required: true, - }, - }, - plugins: { - description: 'An array of Prism plugins to activate.', - type: { - name: 'object', - required: false, - value: {}, - }, - }, - outputPattern: { - control: { - type: 'text', - }, - description: 'The command line output pattern.', - table: { - category: 'Options', - defaultValue: { summary: '#output#' }, - }, - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta<typeof Code>; - -const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />; - -const javascriptCodeSample = ` -const foo = () => { - return 'bar'; -} -`; - -/** - * Code Stories - Code sample - */ -export const CodeSample = Template.bind({}); -CodeSample.args = { - children: javascriptCodeSample, - language: 'javascript', - plugins: ['line-numbers'], -}; - -const commandLineCode = ` -ls -lah -#output#drwxr-x---+ 42 armand armand 4,0K 17 avril 11:15 . -#output#drwxr-xr-x 4 root root 4,0K 30 mai 2021 .. -#output#-rw-r--r-- 1 armand armand 2,0K 21 juil. 2021 .xinitrc -`; - -/** - * Code Stories - Command Line - */ -export const CommandLine = Template.bind({}); -CommandLine.args = { - children: commandLineCode, - filterOutput: true, - language: 'bash', - plugins: ['command-line'], -}; |
