aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/code
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/code')
-rw-r--r--src/components/molecules/code/code.stories.ts (renamed from src/components/molecules/code/code.stories.tsx)124
1 files changed, 36 insertions, 88 deletions
diff --git a/src/components/molecules/code/code.stories.tsx b/src/components/molecules/code/code.stories.ts
index 1127839..38a9ef8 100644
--- a/src/components/molecules/code/code.stories.tsx
+++ b/src/components/molecules/code/code.stories.ts
@@ -1,58 +1,14 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
import { Code } from './code';
-/**
- * Code - Storybook Meta
- */
-export default {
- title: 'Molecules/Code',
+const meta = {
component: Code,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- description: 'The code sample.',
- type: {
- name: 'string',
- required: true,
- },
- },
- filterPattern: {
- control: {
- type: 'text',
- },
- description: 'Define a pattern to filter the command line output.',
- table: {
- category: 'Options',
- },
- type: {
- name: 'string',
- 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: {},
- },
- },
- },
-} as ComponentMeta<typeof Code>;
+ title: 'Molecules/Code',
+} satisfies Meta<typeof Code>;
-const Template: ComponentStory<typeof Code> = (args) => <Code {...args} />;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
const javascriptCodeSample = `
const foo = () => {
@@ -60,25 +16,22 @@ const foo = () => {
}
`;
-/**
- * Code Stories - Code sample
- */
-export const CodeSample = Template.bind({});
-CodeSample.args = {
- children: javascriptCodeSample,
- language: 'javascript',
+export const CodeSample: Story = {
+ args: {
+ children: javascriptCodeSample,
+ language: 'javascript',
+ },
};
/**
- * Code Stories - Highlighting
- *
* @todo Find a way to make it working: line-highlight plugin is not loaded.
*/
-export const Highlighting = Template.bind({});
-Highlighting.args = {
- children: javascriptCodeSample,
- highlight: '3',
- language: 'javascript',
+export const Highlighting: Story = {
+ args: {
+ children: javascriptCodeSample,
+ highlight: '3',
+ language: 'javascript',
+ },
};
// cSpell:ignore xinitrc
@@ -89,15 +42,13 @@ ls -lah
#output#-rw-r--r-- 1 armand armand 2,0K 21 jul. 2021 .xinitrc
`;
-/**
- * Code Stories - Command Line
- */
-export const CommandLine = Template.bind({});
-CommandLine.args = {
- children: commandLineCode,
- cmdOutputFilter: '#output#',
- isCmd: true,
- language: 'bash',
+export const CommandLine: Story = {
+ args: {
+ children: commandLineCode,
+ cmdOutputFilter: '#output#',
+ isCmd: true,
+ language: 'bash',
+ },
};
// cSpell:ignore lcov
@@ -163,14 +114,13 @@ const treeSample = `
└── yarn.lock`;
/**
- * Code Stories - Tree view
- *
* @todo Find a way to make it working: treeview plugin is not loaded.
*/
-export const TreeView = Template.bind({});
-TreeView.args = {
- children: treeSample,
- language: 'treeview',
+export const TreeView: Story = {
+ args: {
+ children: treeSample,
+ language: 'treeview',
+ },
};
const diffSample = `
@@ -181,12 +131,10 @@ const diffSample = `
-foo = foo + 1;
+const foo = bar.baz([1, 2, 3]) + 1;`;
-/**
- * Code Stories - Diff
- */
-export const Diff = Template.bind({});
-Diff.args = {
- children: diffSample,
- isDiff: true,
- language: 'diff',
+export const Diff: Story = {
+ args: {
+ children: diffSample,
+ isDiff: true,
+ language: 'diff',
+ },
};