feat: added the stories of the components of the atoms

packages/dantalion-web-playground/src/components/atoms/Anchor.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/react';
+import Anchor, { Props } from './Anchor';
+
+export default Object.freeze<Meta>({
+  component: Anchor,
+  title: `atoms/${Anchor.displayName}`,
+});
+
+const Template: Story<Props> = ({
+  children,
+  className,
+  href,
+  noblank,
+  nofollow,
+  tooltip,
+}) => (
+  <Anchor
+    className={className}
+    href={href}
+    noblank={noblank}
+    nofollow={nofollow}
+    tooltip={tooltip}
+  >
+    {children}
+  </Anchor>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  className: 'text-4xl',
+  href: 'https://kurone-kito.github.io/dantalion',
+  children: 'Dantalion',
+  noblank: false,
+  nofollow: false,
+  tooltip: 'Tooltip',
+};

packages/dantalion-web-playground/src/components/atoms/Button.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/react';
+import Button, { Props } from './Button';
+
+export default Object.freeze<Meta>({
+  argTypes: { onClick: { action: 'clicked' } },
+  component: Button,
+  title: `atoms/${Button.displayName}`,
+});
+
+const Template: Story<Props> = ({ children, className, onClick }) => (
+  <Button className={className} onClick={onClick}>
+    {children}
+  </Button>
+);
+
+export const Default = Template.bind({});
+Default.args = { className: 'text-4xl', children: 'Children' };

packages/dantalion-web-playground/src/components/atoms/Header.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+import Header, { Props } from './Header';
+
+export default Object.freeze<Meta>({
+  component: Header,
+  title: `atoms/${Header.displayName}`,
+});
+
+const Template: Story<Props> = ({ children }) => <Header>{children}</Header>;
+
+export const Default = Template.bind({});
+Default.args = { children: 'Children' };

packages/dantalion-web-playground/src/components/atoms/InlineMarkdown.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react';
+import { ReactMarkdownOptions } from 'react-markdown';
+import InlineMarkdown from './InlineMarkdown';
+
+export default Object.freeze<Meta>({
+  component: InlineMarkdown,
+  title: `atoms/${InlineMarkdown.displayName}`,
+});
+
+const Template: Story<ReactMarkdownOptions> = ({ children }) => (
+  <InlineMarkdown>{children}</InlineMarkdown>
+);
+
+export const Default = Template.bind({});
+Default.args = { children: '_Markdown_ **contents**' };

packages/dantalion-web-playground/src/components/atoms/Input.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/react';
+import Input, { Props } from './Input';
+
+export default Object.freeze<Meta>({
+  argTypes: { onBlur: { action: 'blured' }, onChange: { action: 'changed' } },
+  component: Input,
+  title: `atoms/${Input.displayName}`,
+});
+
+const Template: Story<Props> = ({ label }) => <Input label={label} />;
+
+export const Default = Template.bind({});
+Default.args = { label: 'Label', placeholder: 'Placeholder' };

packages/dantalion-web-playground/src/components/atoms/List.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import List, { Props } from './List';
+
+export default Object.freeze<Meta>({
+  component: List,
+  title: `atoms/${List.displayName}`,
+});
+
+const Template: Story<Props> = ({ children, className, itemType, order }) => (
+  <List className={className} itemType={itemType} order={order}>
+    {children}
+  </List>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: ['A', 'B', 'C'],
+  className: 'list-disc text-red-900',
+  order: false,
+};

packages/dantalion-web-playground/src/components/atoms/ResultFrame.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/react';
+import ResultFrame, { Props } from './ResultFrame';
+
+export default Object.freeze<Meta>({
+  component: ResultFrame,
+  title: `atoms/${ResultFrame.displayName}`,
+});
+
+const Template: Story<Props> = ({ children }) => (
+  <ResultFrame>{children}</ResultFrame>
+);
+
+export const Default = Template.bind({});
+Default.args = { children: 'Children' };

packages/dantalion-web-playground/src/components/atoms/ResultHeading.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react';
+import ResultHeading, { Props } from './ResultHeading';
+
+export default Object.freeze<Meta>({
+  component: ResultHeading,
+  title: `atoms/${ResultHeading.displayName}`,
+});
+
+const Template: Story<Props> = ({ additional, children, detail, heading }) => (
+  <ResultHeading additional={additional} detail={detail} heading={heading}>
+    {children}
+  </ResultHeading>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  additional: 'Additional',
+  children: 'Children',
+  detail: 'Detail',
+  heading: 'Heading',
+};