aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/layout/code.stories.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-10-13 19:32:56 +0200
committerArmand Philippot <git@armandphilippot.com>2023-11-11 18:14:41 +0100
commit006b15b467a5cd835a6eab1b49023100bdc8f2e6 (patch)
tree949c7295c2e206f42357f135bab4696ddf6576ec /src/components/molecules/layout/code.stories.tsx
parent00f147a7a687d5772bcc538bc606cfff972178cd (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.tsx121
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'],
-};