Merge pull request #19 from 8845musign/feat/DSGNPB-200-migration-of-e…

…xamples

Porting examples from Storybook

.scaffdog/example.md

@@ -4,8 +4,8 @@ root: '.'
 output: '**/*'
 ignore: []
 questions:
-  exampleKey: What is the exampleKey (e.g., stack)?
-  exampleName: What is the exampleName (e.g., nested)?
+  exampleKey: What is the exampleKey (e.g., link-button)?
+  exampleName: What is the exampleName (e.g., with-icon)?
 ---
 
 # `src/components/react/examples/{{ inputs.exampleKey }}/{{ inputs.exampleName | pascal }}.tsx`

src/components/react/Example.tsx

@@ -6,21 +6,21 @@ import type { Example } from '@utils/server';
 import type { FC } from 'react';
 
 interface Props {
-  exampleUrlAndFilePath: Example;
+  example: Example;
 }
 
-const Example: FC<Props> = ({ exampleUrlAndFilePath }) => {
+const Example: FC<Props> = ({ example }) => {
   return (
     <div className={styles.example}>
-      <a className={styles.externalLink} href={exampleUrlAndFilePath.url} target="_blank" rel="noreferrer">
+      <a className={styles.externalLink} href={example.url} target="_blank" rel="noreferrer">
         Open Window
       </a>
 
       <div className={styles.demo}>
         <iframe
           className={styles.demoFrame}
-          src={exampleUrlAndFilePath.url}
-          title={`${exampleUrlAndFilePath.name} example`}
+          src={example.url}
+          title={`${example.name} example`}
           loading="lazy"
         ></iframe>
       </div>
@@ -34,9 +34,9 @@ const Example: FC<Props> = ({ exampleUrlAndFilePath }) => {
             margin: '0',
           }}
         >
-          {exampleUrlAndFilePath.code}
+          {example.code}
         </SyntaxHighlighter>
-        <CopyButton className={styles.copy} text={exampleUrlAndFilePath.code} />
+        <CopyButton className={styles.copy} text={example.code} />
       </div>
     </div>
   );

src/components/react/ExampleSwitcher.tsx

@@ -37,7 +37,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
           ))}
         </Stack>
 
-        {currentExample && <Example exampleUrlAndFilePath={currentExample} />}
+        {currentExample && <Example example={currentExample} />}
       </Stack>
     </>
   );

src/components/react/examples/accordion/Small.tsx

@@ -0,0 +1,12 @@
+import { Accordion } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Small: FC = () => {
+  return (
+    <Accordion header="夏目漱石「私の個人主義」" size="small">
+      何は時分どうもどんな観念顔というののところを云ったいまし。とうてい今日に説明院は現にこういう反対たますくらいから思わて来るないにも撲殺なるたたて、始終にも願うただですん。
+    </Accordion>
+  );
+};
+
+export default Small;

src/components/react/examples/action-half-modal/Customized.tsx

@@ -0,0 +1,33 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Customized: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        header="削除します"
+        primaryActionColor="alert"
+        primaryActionLabel="削除"
+        onPrimaryAction={onClose}
+        overlayOpacity="darker"
+        closeLabel="キャンセル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Customized;

src/components/react/examples/action-half-modal/Fullscreen.tsx

@@ -0,0 +1,24 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Fullscreen: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal header="モーダル" open={open} onClose={onClose} fullscreen>
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Fullscreen;

src/components/react/examples/action-half-modal/NoCloseButton.tsx

@@ -0,0 +1,31 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const NoCloseButton: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        onPrimaryAction={onClose}
+        primaryActionLabel="確認"
+        showClose={false}
+        header="モーダル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default NoCloseButton;

src/components/react/examples/action-half-modal/Secondary.tsx

@@ -0,0 +1,32 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { useCallback, useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        primaryActionLabel="アクション1"
+        onPrimaryAction={onClose}
+        secondaryActionLabel="アクション2"
+        onSecondaryAction={onClose}
+        header="モーダル"
+        open={open}
+        onClose={onClose}
+      >
+        body
+      </ActionHalfModal>
+    </>
+  );
+};
+
+export default Secondary;

src/components/react/examples/action-modal/Customized.tsx

@@ -0,0 +1,29 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        header="削除します"
+        closeLabel="キャンセル"
+        overlayOpacity="darker"
+        primaryActionLabel="削除"
+        primaryActionColor="alert"
+        open={open}
+        onPrimaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        Default
+      </ActionModal>
+    </>
+  );
+};
+
+export default Secondary;

src/components/react/examples/action-modal/FixedHeight.tsx

@@ -0,0 +1,26 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const FixedHeight: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        primaryActionLabel="回答を見る"
+        open={open}
+        fixedHeight
+        onPrimaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        <p>Default</p>
+      </ActionModal>
+    </>
+  );
+};
+
+export default FixedHeight;

src/components/react/examples/action-modal/Secondary.tsx

@@ -0,0 +1,28 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { useState } from 'react';
+import type { FC } from 'react';
+
+const Secondary: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        header="モーダル"
+        primaryActionLabel="回答を見る"
+        open={open}
+        onPrimaryAction={() => setOpen(false)}
+        secondaryActionLabel={'このまま回答を続ける'}
+        onSecondaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+      >
+        Default
+      </ActionModal>
+    </>
+  );
+};
+
+export default Secondary;

src/components/react/examples/button/Block.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Block: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+      <div>
+        <Button block size="small" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+      <div>
+        <Button block size="medium" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+      <div>
+        <Button block size="large" variant="secondary">
+          ボタン
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Block;

src/components/react/examples/button/Default.tsx

@@ -2,7 +2,16 @@ import { Button } from '@ubie/ubie-ui';
 import type { FC } from 'react';
 
 const Default: FC = () => {
-  return <Button>ボタン</Button>;
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <Button>ボタン</Button>
+      <Button variant="secondary">ボタン</Button>
+      <Button variant="accent">ボタン</Button>
+      <Button variant="alert">ボタン</Button>
+      <Button variant="text">ボタン</Button>
+      <Button variant="textAlert">ボタン</Button>
+    </div>
+  );
 };
 
 export default Default;

src/components/react/examples/button/Disabled.tsx

@@ -0,0 +1,27 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Disabled: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px', flexWrap: 'wrap' }}>
+      <Button disabled>ボタン</Button>
+      <Button variant="secondary" disabled>
+        ボタン
+      </Button>
+      <Button variant="accent" disabled>
+        ボタン
+      </Button>
+      <Button variant="alert" disabled>
+        ボタン
+      </Button>
+      <Button variant="text" disabled>
+        ボタン
+      </Button>
+      <Button variant="textAlert" disabled>
+        ボタン
+      </Button>
+    </div>
+  );
+};
+
+export default Disabled;

src/components/react/examples/button/Size.tsx

@@ -0,0 +1,16 @@
+import { Button } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const Default: FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '32px' }}>
+      <Button size="small">Small</Button>
+
+      <Button size="medium">Medium</Button>
+
+      <Button>Large</Button>
+    </div>
+  );
+};
+
+export default Default;