wip: ダミーデータ生成フォーム

Author: su-u

package.json

@@ -17,7 +17,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@monaco-editor/react": "^4.5.2",
     "@rsuite/icons": "yarn ^1.0.3",
     "@uiw/codemirror-theme-vscode": "^4.21.21",

src/app/dummy_generator/DummyGenerator.tsx

@@ -0,0 +1,105 @@
+'use client';
+import PlusIcon from '@rsuite/icons/legacy/Plus';
+import { Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import React, { FC } from 'react';
+import { FormProvider, Controller } from 'react-hook-form';
+import { Grid, Row, Col, Form, PanelGroup, Panel, IconButton } from 'rsuite';
+import { AppLayout } from '@/Layout/App';
+import { useDummy, DataType } from '@/app/dummy_generator/useDummy';
+import { Input } from '@/components/common/Form/Input';
+import { PageTitle } from '@/components/common/PageTitle';
+import { PanelHeader } from '@/components/common/PanelHeader';
+
+const columns: ColumnsType<DataType> = [
+  {
+    title: 'ID',
+    key: 'key',
+    dataIndex: 'key',
+  },
+  {
+    title: 'Content',
+    key: 'content',
+    dataIndex: 'content',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    dataIndex: 'action',
+  },
+];
+
+export const DummyGenerator: FC = () => {
+  const title = 'ダミー情報の生成';
+  const { methods, fields, onClickAdd } = useDummy();
+
+  const source = fields.map((value, index) => {
+    return {
+      key: index,
+      content: <ConfigRow id={value.id} index={index} control={methods.control} />,
+      action: null,
+    };
+  });
+
+  // const source: DataType[] = [
+  //   {
+  //     key: 1,
+  //     content: '1',
+  //     action: 'a',
+  //   },
+  //   {
+  //     key: 2,
+  //     content: '2',
+  //     action: 'a',
+  //   }
+  // ];
+
+  return (
+    <FormProvider {...methods}>
+      <AppLayout>
+        <Grid fluid>
+          <PageTitle title={title} />
+          <Row gutter={5}>
+            <Col md={12} xs={24}>
+              <Form fluid layout="horizontal">
+                <PanelGroup bordered>
+                  <Panel bordered header={<PanelHeader title="管理" />}>
+                    <IconButton
+                      icon={<PlusIcon />}
+                      placement="right"
+                      size="xs"
+                      onClick={onClickAdd}
+                    >
+                      追加
+                    </IconButton>
+                  </Panel>
+                  <Panel bordered header={<PanelHeader title="設定" />}>
+                    <Table columns={columns} dataSource={source} />
+                  </Panel>
+                </PanelGroup>
+              </Form>
+            </Col>
+            <Col md={12} xs={24}>
+              <Panel bordered header={<PanelHeader title="UUID" />}></Panel>
+            </Col>
+          </Row>
+        </Grid>
+      </AppLayout>
+    </FormProvider>
+  );
+};
+
+const ConfigRow: FC<{
+  id: string;
+  index: number;
+  control: any;
+}> = ({ id, index, control }) => {
+  return (
+    <Controller
+      key={id}
+      name={`items.${index}.firstName`}
+      control={control}
+      render={({ field: { ref, ...field } }) => <Input {...field} />}
+    />
+  );
+};

src/app/dummy_generator/facker.ts

@@ -0,0 +1 @@
+import { faker } from '@faker-js/faker/locale/ja';

src/app/dummy_generator/page.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import { DummyGenerator } from '@/app/dummy_generator/DummyGenerator';
+
+export const metadata = {
+  title: 'Dev Toolkit - ダミーデータの生成',
+};
+
+const DummyGeneratorPage: FC = () => {
+  return <DummyGenerator />;
+};
+
+export default DummyGeneratorPage;

src/app/dummy_generator/useDummy.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useFieldArray } from 'react-hook-form';
+import { useCustomForm } from '@/components/common/Form/useCustomForm';
+
+type DummyForm = {
+  count: number;
+  format: 'csv' | 'tsv' | 'json';
+  items: any;
+};
+
+export interface DataType {
+  key: number;
+  content: any;
+  action: string;
+}
+
+export const useDummy = () => {
+  const methods = useCustomForm<DummyForm>();
+  const { control } = methods;
+  const { fields, append } = useFieldArray({
+    control,
+    name: 'items',
+  });
+
+  const onClickAdd = useCallback(() => {
+    append({ firstName: '' });
+  }, [append]);
+
+  console.log(methods.watch());
+
+  return {
+    methods,
+    fields,
+    onClickAdd,
+  };
+};

yarn.lock

@@ -642,10 +642,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.55.0.tgz#b721d52060f369aa259cf97392403cb9ce892ec6"
   integrity sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA==
 
-"@faker-js/faker@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.npmjs.org/@faker-js/faker/-/faker-8.0.2.tgz"
-  integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==
+"@faker-js/faker@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.3.1.tgz#7753df0cb88d7649becf984a96dd1bd0a26f43e3"
+  integrity sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==
 
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.13"