App Routerへの移行 (#22)

su-u · Oct 21, 2023 · b12502d · b12502d · vercel · Oct 21, 2023
2 parents a21d1ba + 10f2ab4
commit b12502d
Show file tree

Hide file tree

Showing 37 changed files with 316 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -17,13 +17,16 @@
     "@faker-js/faker": "^8.0.2",
     "@monaco-editor/react": "^4.5.2",
     "@rsuite/icons": "^1.0.3",
+    "@uiw/codemirror-theme-vscode": "^4.21.19",
+    "@uiw/react-codemirror": "^4.21.19",
     "dayjs": "^1.11.9",
     "iconv-lite": "^0.6.3",
     "iconv-urlencode": "^1.0.0",
     "next": "^13.4.19",
     "obtain-unicode": "^0.0.5",
     "punycode": "^2.1.1",
     "react": "^18.2.0",
+    "react-codemirror-merge": "^4.21.19",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.1",
     "rsuite": "^5.40.0",

diff --git a/src/app/Provider.tsx b/src/app/Provider.tsx
@@ -0,0 +1,11 @@
+'use client';
+import React, { FC } from 'react';
+import { CustomProvider } from 'rsuite';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const Provider: FC<Props> = ({ children }) => {
+  return <CustomProvider theme="dark">{children}</CustomProvider>;
+};
diff --git a/src/pages/base64.tsx → src/app/base64/page.tsx b/src/pages/base64.tsx → src/app/base64/page.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Base64 } from '@/components/pages/base64/Base64';
 

diff --git a/src/pages/character_count.tsx → src/app/character_count/page.tsx b/src/pages/character_count.tsx → src/app/character_count/page.tsx
diff --git a/src/pages/character_replace.tsx → src/app/character_replace/page.tsx b/src/pages/character_replace.tsx → src/app/character_replace/page.tsx
diff --git a/src/pages/date.tsx → src/app/date/page.tsx b/src/pages/date.tsx → src/app/date/page.tsx
diff --git a/src/pages/diff.tsx → src/app/diff/page.tsx b/src/pages/diff.tsx → src/app/diff/page.tsx
diff --git a/src/pages/dummy.tsx → src/app/dummy/page.tsx b/src/pages/dummy.tsx → src/app/dummy/page.tsx
diff --git a/src/pages/hash.tsx → src/app/hash/page.tsx b/src/pages/hash.tsx → src/app/hash/page.tsx
diff --git a/src/pages/index.tsx → src/app/index.tsx b/src/pages/index.tsx → src/app/index.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import 'rsuite/dist/rsuite.min.css';
+import '@/styles/rs-custom.globals.scss';
+import '@/styles/globals.scss';
+import { Provider } from '@/app/Provider';
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  // テーマのチラつきを抑えるために指定
+  const className = 'rs-theme-dark';
+
+  return (
+    <html lang="en">
+      <body className={className}>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/pages/number_comma.tsx → src/app/number_comma/page.tsx b/src/pages/number_comma.tsx → src/app/number_comma/page.tsx
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,10 @@
+'use client';
+import React from 'react';
+import { AppLayout } from '@/Layout/App';
+const indexPage: React.FC = () => {
+  const title = '開発補助ツール';
+
+  return <AppLayout title={title}></AppLayout>;
+};
+
+export default indexPage;
diff --git a/src/pages/punycode.tsx → src/app/punycode/page.tsx b/src/pages/punycode.tsx → src/app/punycode/page.tsx
diff --git a/src/pages/rss.tsx → src/app/rss/page.tsx b/src/pages/rss.tsx → src/app/rss/page.tsx
diff --git a/src/pages/urlencode.tsx → src/app/urlencode/page.tsx b/src/pages/urlencode.tsx → src/app/urlencode/page.tsx
diff --git a/src/pages/uuid.tsx → src/app/uuid/page.tsx b/src/pages/uuid.tsx → src/app/uuid/page.tsx
diff --git a/src/components/common/CopyButton.tsx b/src/components/common/CopyButton.tsx
@@ -10,12 +10,5 @@ type Props = {
 export const CopyButton: FC<Props> = ({ copyText }) => {
   const { copy } = useCopy();
 
-  return (
-    <IconButton
-      icon={<CopyIcon />}
-      placement="right"
-      size="xs"
-      onClick={copy(copyText)}
-    ></IconButton>
-  );
+  return <IconButton icon={<CopyIcon />} placement="right" size="xs" onClick={copy(copyText)} />;
 };
diff --git a/src/components/common/Form/ClearButton.tsx b/src/components/common/Form/ClearButton.tsx
@@ -10,11 +10,11 @@ type Props = {
 };
 
 export const ClearButton: React.FC<Props> = ({ name, title = 'クリア', onClick = null }) => {
-  const { resetField } = useFormContext();
+  const { resetField, watch, setValue } = useFormContext();
 
   const onClickInputClear = useCallback(() => {
     resetField(name);
-  }, [resetField]);
+  }, [resetField, name]);
 
   return (
     <IconButton

diff --git a/src/components/pages/base64/Base64.tsx b/src/components/pages/base64/Base64.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import { Col, Grid, Panel, Row, ButtonToolbar } from 'rsuite';

diff --git a/src/components/pages/character_count/CharacterCount.tsx b/src/components/pages/character_count/CharacterCount.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import styled from '@emotion/styled';
 import { Controller, FormProvider } from 'react-hook-form';

diff --git a/src/components/pages/character_replace/characterReplace.tsx b/src/components/pages/character_replace/characterReplace.tsx
@@ -1,16 +1,13 @@
+'use client';
 import React from 'react';
 import styled from '@emotion/styled';
 import { Controller, FormProvider } from 'react-hook-form';
 import { ButtonToolbar, Col, Form, Grid, IconButton, Panel, PanelGroup, Row } from 'rsuite';
-import CopyIcon from '@rsuite/icons/Copy';
-import MinusIcon from '@rsuite/icons/legacy/Minus';
-import PlusIcon from '@rsuite/icons/legacy/Plus';
 import { AppLayout } from '@/Layout/App';
 import { PageTitle } from '@/components/common/PageTitle';
 import { useCharacterReplace } from '@/components/pages/character_replace/useCharacterReplace';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { Input } from '@/components/common/Form/Input';
-import { useCopy } from '@/hooks/useCopy';
 import { ClearButton } from '@/components/common/Form/ClearButton';
 import { CopyButton } from '@/components/common/CopyButton';
 import { AddButton } from '@/components/pages/character_replace/AddButton';
@@ -20,7 +17,6 @@ export const CharacterReplace: React.FC = () => {
   const title = '文字列置換';
   const { methods, output, countUp, countDown, countDownDisabled, countUpDisabled, numberArray } =
     useCharacterReplace();
-  const { copy } = useCopy();
 
   return (
     <FormProvider {...methods}>

diff --git a/src/components/pages/convert_date/ConvertDate.tsx b/src/components/pages/convert_date/ConvertDate.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller } from 'react-hook-form';
 import { Col, Grid, Panel, PanelGroup, Row, Form } from 'rsuite';

diff --git a/src/components/pages/diff/Diff.tsx b/src/components/pages/diff/Diff.tsx
@@ -1,85 +1,47 @@
+'use client';
 import React from 'react';
-import { Controller, FormProvider } from 'react-hook-form';
-import { ButtonToolbar, Col, Grid, Panel, PanelGroup, Row } from 'rsuite';
+import { FormProvider } from 'react-hook-form';
+import { Col, Grid, Panel, PanelGroup, Row, FlexboxGrid } from 'rsuite';
 import { AppLayout } from '@/Layout/App';
 import { PageTitle } from '@/components/common/PageTitle';
 import { PanelHeader } from '@/components/common/PanelHeader';
 import { DiffEditor } from '@/components/pages/diff/DiffEditor';
 import { useDiff } from '@/components/pages/diff/useDiff';
-import { Input } from '@/components/common/Form/Input';
+import { ButtonToolbar } from 'rsuite';
 import { ClearButton } from '@/components/common/Form/ClearButton';
 
 export const Diff: React.FC = () => {
   const title = 'テキスト差分';
-  const { methods, original, modified } = useDiff();
-  const INPUT_ROWS = 10;
+  const { methods, original, modified, onClickOriginalReset } = useDiff();
 
   return (
     <FormProvider {...methods}>
       <AppLayout title={title}>
         <Grid fluid>
           <PageTitle title={title} />
-          <Row gutter={5}>
-            <Col xs={24} md={12}>
-              <PanelGroup bordered>
-                <Panel
-                  bordered
-                  header={
-                    <PanelHeader
-                      title="比較対象1"
-                      right={
-                        <ButtonToolbar>
-                          <ClearButton name="original" />
-                        </ButtonToolbar>
-                      }
-                    />
-                  }
-                >
-                  <Controller
-                    render={({ field }) => <Input as="textarea" rows={INPUT_ROWS} {...field} />}
-                    name="original"
-                    control={methods.control}
-                  />
-                </Panel>
-              </PanelGroup>
-            </Col>
-            <Col xs={24} md={12}>
-              <Panel
-                bordered
-                header={
-                  <PanelHeader
-                    title="比較対象2"
-                    right={
-                      <ButtonToolbar>
-                        <ClearButton name="modified" />
-                      </ButtonToolbar>
-                    }
-                  />
-                }
-              >
-                <Controller
-                  render={({ field }) => (
-                    <Input as="textarea" rows={INPUT_ROWS} {...field} ref={null} />
-                  )}
-                  name="modified"
-                  control={methods.control}
-                />
-              </Panel>
-            </Col>
-          </Row>
           <Row style={{ marginTop: '5px' }}>
             <Col xs={24}>
               <PanelGroup bordered>
-                <Panel bordered header={<PanelHeader title="差分" />}>
-                  <DiffEditor
-                    original={original}
-                    modified={modified}
-                    width="100%"
-                    options={{
-                      fontSize: '14px',
-                      tabSize: 2,
-                    }}
-                  />
+                <Panel collapsible={false} bordered header={<PanelHeader title="差分" />}>
+                  <Row>
+                    <Col xs={12}>
+                      <FlexboxGrid justify="end">
+                        <ButtonToolbar>
+                          {/*<ClearButton name="original" onClick={onClickOriginalReset} />*/}
+                        </ButtonToolbar>
+                      </FlexboxGrid>
+                    </Col>
+                    <Col xs={12}>
+                      <FlexboxGrid justify="end">
+                        <ButtonToolbar>
+                          {/*<ClearButton name="modified" />*/}
+                        </ButtonToolbar>
+                      </FlexboxGrid>
+                    </Col>
+                  </Row>
+                  <Row style={{ marginTop: '10px' }}>
+                    <DiffEditor original={original} modified={modified} />
+                  </Row>
                 </Panel>
               </PanelGroup>
             </Col>

diff --git a/src/components/pages/diff/DiffEditor.tsx b/src/components/pages/diff/DiffEditor.tsx
@@ -1,12 +1,31 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useFormContext } from 'react-hook-form';
+import CodeMirrorMerge from 'react-codemirror-merge';
+import { EditorView } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import { DiffEditor as MonacoDiffEditor, DiffEditorProps } from '@monaco-editor/react';
 
 export const DiffEditor: React.FC<DiffEditorProps> = (props) => {
+  const { setValue } = useFormContext();
+  const Original = CodeMirrorMerge.Original;
+  const Modified = CodeMirrorMerge.Modified;
+
+  const onChangeOriginal = React.useCallback((value) => {
+    setValue('original', value);
+  }, [setValue]);
+
+  const onChangeModified = React.useCallback((value) => {
+    setValue('modified', value);
+  }, [setValue]);
+
+
+
   return (
-    <StyledWrapper>
-      <MonacoDiffEditor className="diff-editor" height="80vh" theme="vs-dark" {...props} />
-    </StyledWrapper>);
+    <CodeMirrorMerge theme={vscodeDark} orientation="a-b">
+      <Original onChange={onChangeOriginal} value={props.original} />
+      <Modified onChange={onChangeModified} value={props.modified} extensions={[]} />
+    </CodeMirrorMerge>
+  );
 };
-
-const StyledWrapper = styled.div``;
diff --git a/src/components/pages/diff/useDiff.ts b/src/components/pages/diff/useDiff.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useCustomForm } from '@/components/common/Form/useCustomForm';
 
 type DiffForm = {
@@ -12,14 +13,21 @@ export const useDiff = () => {
       modified: '',
     },
   });
-  const { watch } = methods;
+  const { watch, resetField, setValue } = methods;
 
   const original = watch('original', '');
   const modified = watch('modified', '');
 
+  const onClickOriginalReset = React.useCallback(() => {
+    resetField('original');
+    // console.log('original', watch('original'));
+    // setValue('original', '');
+  }, [resetField]);
+
   return {
     methods,
     original,
     modified,
+    onClickOriginalReset,
   };
 };
diff --git a/src/components/pages/dummy/Dummy.tsx b/src/components/pages/dummy/Dummy.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import styled from '@emotion/styled';
 import { Controller } from 'react-hook-form';

diff --git a/src/components/pages/hash/Hash.tsx b/src/components/pages/hash/Hash.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import { Col, Grid, Panel, Row, PanelGroup, Form, Toggle, ButtonToolbar, InputGroup } from 'rsuite';

diff --git a/src/components/pages/number_comma/NumberComma.tsx b/src/components/pages/number_comma/NumberComma.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller } from 'react-hook-form';
 import { Col, Grid, InputGroup, InputPicker, Panel, PanelGroup, Row, Form } from 'rsuite';

diff --git a/src/components/pages/punycode/Punycode.tsx b/src/components/pages/punycode/Punycode.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import { Col, Grid, InputGroup, Panel, PanelGroup, Row, ButtonToolbar } from 'rsuite';

diff --git a/src/components/pages/rss/rss.tsx b/src/components/pages/rss/rss.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { FlexboxGrid, Input } from 'rsuite';
 import { AppLayout } from '@/Layout/App';

diff --git a/src/components/pages/urlencode/UrlEncode.tsx b/src/components/pages/urlencode/UrlEncode.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import {

diff --git a/src/components/pages/uuid/Uuid.tsx b/src/components/pages/uuid/Uuid.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { Controller, FormProvider } from 'react-hook-form';
 import { Col, Grid, Panel, Row, PanelGroup, Form, Toggle, InputPicker } from 'rsuite';
@@ -9,8 +10,6 @@ import { InputNumber } from 'rsuite';
 import { FormRow } from '@/components/common/Form/FormRow';
 import { Button } from 'rsuite';
 import { Input } from '@/components/common/Form/Input';
-import { InputGroup } from 'rsuite';
-import CopyIcon from '@rsuite/icons/Copy';
 import { useCopy } from '@/hooks/useCopy';
 import { ButtonToolbar } from 'rsuite';
 import { ClearButton } from '@/components/common/Form/ClearButton';

diff --git a/src/hooks/useCopy.tsx b/src/hooks/useCopy.tsx
@@ -3,6 +3,7 @@ import { useToaster, Message } from 'rsuite';
 export const useCopy = () => {
   const toaster = useToaster();
   const PLACEMENT = 'bottomStart';
+  const DURATION = 2000;
 
   const copy = (text?: string) => async () => {
     if (text.trim() === '') {
@@ -12,6 +13,7 @@ export const useCopy = () => {
         </Message>,
         {
           placement: PLACEMENT,
+          duration: DURATION,
         },
       );
       return;
@@ -25,7 +27,7 @@ export const useCopy = () => {
         </Message>,
         {
           placement: PLACEMENT,
-          duration: 1000,
+          duration: DURATION,
         },
       );
     } catch (e) {
@@ -35,6 +37,7 @@ export const useCopy = () => {
         </Message>,
         {
           placement: PLACEMENT,
+          duration: DURATION,
         },
       );
     }