add: components in frontend_1

Author: kurosame

Diff for: README.md

@@ -46,4 +46,3 @@
   - React
   - Next.js
     - App Router
-  - Radix UI

Diff for: frontend_5/.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
         groups: ['builtin', 'external', 'internal', 'unknown'],
         pathGroups: [
           {
-            pattern: '{@chakra-ui,@storybook}/**',
+            pattern: '{a}/**',
             group: 'external',
             position: 'after'
           }

Diff for: frontend_5/package.json

@@ -4,7 +4,9 @@
   "dependencies": {
     "next": "13.4.6",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "4.9.0",
+    "recoil": "0.7.7"
   },
   "devDependencies": {
     "@tsconfig/strictest": "2.0.1",

Diff for: frontend_5/pnpm-lock.yaml

@@ -0,0 +1,10 @@
+type Props = {
+  onClick: () => void
+  children: React.ReactNode
+}
+
+export const Button: React.FC<Props> = ({ onClick, children }) => (
+  <button type="button" onClick={() => onClick()}>
+    {children}
+  </button>
+)

Diff for: frontend_5/src/components/atoms/Button.tsx

@@ -0,0 +1,15 @@
+import { createElement } from 'react'
+import { FaSyncAlt } from 'react-icons/fa'
+
+const icons = {
+  sync: FaSyncAlt
+}
+
+type Props = {
+  name: keyof typeof icons
+  onClick?: (() => void) | undefined
+}
+
+const getIcon = ({ name, onClick }: Props) => createElement(icons[name], { onClick })
+
+export const Icon: React.FC<Props> = ({ name, onClick }) => getIcon({ name, onClick })

Diff for: frontend_5/src/components/atoms/Icon.tsx

@@ -0,0 +1,5 @@
+type Props = {
+  children: React.ReactNode
+}
+
+export const Label: React.FC<Props> = ({ children }) => <span>{children}</span>

Diff for: frontend_5/src/components/atoms/Label.tsx

@@ -0,0 +1 @@
+export const Loading: React.FC = () => <span>Loading...</span>

Diff for: frontend_5/src/components/atoms/Loading.tsx

@@ -0,0 +1,41 @@
+type AnonymousUnion = keyof { [key: string]: unknown }
+
+export type Columns<T> = {
+  id: T
+  label: string
+}[]
+
+type Row<T extends AnonymousUnion> = {
+  [P in T]: { content: string; el?: JSX.Element } | { content?: string; el: JSX.Element }
+}
+export type RowEl<T, C extends AnonymousUnion> = (r: T) => Row<C>
+
+export type Rows<T extends unknown[]> = T
+
+type Props<T extends AnonymousUnion> = {
+  columns: Columns<T>
+  rowEl: RowEl<any, T>
+  rows: Rows<unknown[]>
+}
+
+export const Table: React.FC<Props<AnonymousUnion>> = ({ columns, rowEl, rows }) => (
+  <table>
+    <thead>
+      <tr>
+        {columns.map(c => (
+          <th key={c.id}>{c.label}</th>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map(r => (
+        <tr key={rowEl(r)['id']?.content}>
+          {columns.map(c => {
+            const re = rowEl(r)[c.id]
+            return re ? <td key={c.id}>{re.content ? re.content : re.el}</td> : <td key={c.id} />
+          })}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)

Diff for: frontend_5/src/components/atoms/Table.tsx

@@ -0,0 +1,8 @@
+type Props = {
+  value: string
+  onChange: (v: string) => void
+}
+
+export const TextInput: React.FC<Props> = ({ value, onChange }) => (
+  <input type="text" value={value} onChange={e => onChange(e.target.value)} />
+)

Diff for: frontend_5/src/components/atoms/TextInput.tsx

@@ -0,0 +1,15 @@
+import { Label } from '@/components/atoms/Label'
+import { TextInput } from '@/components/atoms/TextInput'
+
+type Props = {
+  label: string
+  value: string
+  onChange: (v: string) => void
+}
+
+export const LabeledTextInput: React.FC<Props> = ({ label, value, onChange }) => (
+  <>
+    <Label>{label}</Label>
+    <TextInput value={value} onChange={onChange} />
+  </>
+)

Diff for: frontend_5/src/components/molecules/LabeledTextInput.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { useRecoilState } from 'recoil'
+
+import { Button } from '@/components/atoms/Button'
+import { LabeledTextInput } from '@/components/molecules/LabeledTextInput'
+import { EmployeeTable } from '@/features/employee/components/EmployeeTable'
+import type { Employee as EmployeeType } from '@/features/employee/types'
+import { employeeState } from '@/store/employee'
+
+export const Employee: React.FC = () => {
+  const [employee, setEmployee] = useRecoilState(employeeState)
+  const [employees] = useState<EmployeeType[]>([])
+  // const [employees, setEmployees] = useState<EmployeeType[]>([])
+
+  // const fetchEmployeesAction = useAction(fetchEmployees)
+  // const updateEmployeeAction = useAction(updateEmployee)
+
+  // const fetchToSetEmployees = useCallback(
+  //   () =>
+  //     fetchEmployeesAction().then(r => {
+  //       setEmployees(r)
+  //     }),
+  //   [fetchEmployeesAction]
+  // )
+
+  // useEffect(() => {
+  //   fetchToSetEmployees().catch(e => {
+  //     throw e
+  //   })
+  // }, [fetchToSetEmployees])
+
+  // const handleClick = () => {
+  //   updateEmployeeAction(new EmployeeUpdateCommand(employee, company)).catch((e: Error) => {
+  //     console.error({ 'event-handler-error': e })
+  //   })
+  // }
+
+  return (
+    <>
+      <LabeledTextInput
+        label="社員ID"
+        value={employee.employeeId}
+        onChange={v => setEmployee({ ...employee, employeeId: v })}
+      />
+      <LabeledTextInput
+        label="社員名"
+        value={employee.employeeName}
+        onChange={v => setEmployee({ ...employee, employeeName: v })}
+      />
+      <Button onClick={() => undefined}>登録</Button>
+      {/* <Button onClick={handleClick}>登録</Button> */}
+      <EmployeeTable {...{ employees, onSync: () => undefined }} />
+      {/* <EmployeeTable {...{ employees, onSync: fetchToSetEmployees }} /> */}
+    </>
+  )
+}

Diff for: frontend_5/src/features/employee/components/Employee.tsx

@@ -0,0 +1,31 @@
+import { Icon } from '@/components/atoms/Icon'
+import type { Columns, RowEl, Rows } from '@/components/atoms/Table'
+import { Table } from '@/components/atoms/Table'
+import type { Employee } from '@/features/employee/types'
+
+type Column = 'id' | 'employeeId' | 'employeeName'
+
+type Props = {
+  employees: Rows<Employee[]>
+  onSync: () => void
+}
+
+export const EmployeeTable: React.FC<Props> = ({ employees, onSync }) => {
+  const columns: Columns<Column> = [
+    { id: 'employeeId', label: '社員ID' },
+    { id: 'employeeName', label: '社員名' }
+  ]
+
+  const rowEl: RowEl<Employee, Column> = e => ({
+    id: { content: e.employeeId },
+    employeeId: { content: e.employeeId },
+    employeeName: { content: e.employeeName }
+  })
+
+  return (
+    <>
+      <Table {...{ columns, rowEl, rows: employees }} />
+      <Icon name="sync" onClick={onSync} />
+    </>
+  )
+}

Diff for: frontend_5/src/features/employee/components/EmployeeTable.tsx

@@ -0,0 +1,4 @@
+export type Employee = {
+  employeeId: string
+  employeeName: string
+}

Diff for: frontend_5/src/features/employee/types/index.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const employeeState = atom({
+  key: 'employeeState',
+  default: { employeeId: 'default', employeeName: 'デフォルト' }
+})

Diff for: frontend_5/src/store/employee.ts

@@ -4,7 +4,7 @@
     "incremental": false,
     "target": "esnext",
     "module": "esnext",
-    "lib": [],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "jsx": "preserve",
     "sourceMap": true,