Update development environment

.github/actions/setup-node/action.yml

@@ -0,0 +1,12 @@
+name: Setup Node
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.node-version'
+        cache: 'yarn'
+
+    - shell: bash
+      run: yarn --frozen-lockfile --check-files

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Continuous Integration
+name: CI
 
 on:
   push:
@@ -10,57 +10,37 @@ jobs:
   setup:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          cache: 'yarn'
-      - run: yarn --frozen-lockfile --check-files
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
 
   test:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          cache: 'yarn'
-      - run: yarn --frozen-lockfile
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
       - run: yarn test
 
   lint:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          cache: 'yarn'
-      - run: yarn --frozen-lockfile
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
       - run: yarn lint
 
   typecheck:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          cache: 'yarn'
-      - run: yarn --frozen-lockfile
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
       - run: yarn typecheck
 
   build:
     runs-on: ubuntu-latest
     needs: [setup]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '14'
-          cache: 'yarn'
-      - run: yarn --frozen-lockfile
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup-node
       - run: yarn build

.gitignore

@@ -1,4 +1,6 @@
-/dist
+dist
+public/cv-wasm_*
+public/worker-dev.js
 
 # Created by https://www.gitignore.io/api/osx,windows,node
 # Edit at https://www.gitignore.io/?templates=osx,windows,node
@@ -135,3 +137,5 @@ $RECYCLE.BIN/
 *.lnk
 
 # End of https://www.gitignore.io/api/osx,windows,node
+
+*storybook.log

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.node-version

@@ -0,0 +1 @@
+v18.19.0

.prettierignore

@@ -1 +1 @@
-dist/**/*
+dist

.scaffdog/config.js

@@ -1,3 +1,3 @@
-module.exports = {
+export default {
   files: ['./*'],
 };

.scaffdog/ui-component.md

@@ -31,24 +31,26 @@ const Wrapper = styled.div`
   margin: ${Space}px;
 `;
 
-export type Props = {};
+export type Props = React.PropsWithChildren<{}>;
 
-export const {{ name }}: React.FC<Props> = ({ children, ...rest }) => (
+export const {{ name }} = ({ children, ...rest }: Props) => (
   <Wrapper {...rest}>{children}</Wrapper>
 );
 ```
 
 # `{{ name }}/{{ name }}.stories.tsx`
 
 ```typescript
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { withPadding } from '{{ relative "../src/styles/storybook-decorators" }}';
+import type { Meta, StoryObj } from '@storybook/react';
 import { {{ name }} } from './';
 
-storiesOf('{{ name }}', module)
-  .addDecorator(withPadding())
-  .add('overview', () => (
-    <{{ name }}>TODO</{{ name }}>
-  ));
+type Component = typeof {{ name }};
+type Story = StoryObj<Component>;
+
+export default {
+  component: {{ name }},
+  args: {},
+} satisfies Meta<Component>;
+
+export const Overview: Story = {};
 ```

.scaffdog/ui-icon.md

@@ -17,7 +17,7 @@ import React from 'react';
 
 export type Props = React.ComponentProps<'svg'>;
 
-export const {{ name }}: React.FC<Props> = ({ fill, ...rest }) => (
+export const {{ name }} = ({ fill, ...rest }: Props) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...rest}>
     {/* FIXME */}
     <circle cx={0} cy={0} r={0} fill={fill} />

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { GlobalStyle } from '../src/styles/global-styles';
+import { HistoryContextProvider } from '../src/context/HistoryContext';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <HistoryContextProvider>
+        <GlobalStyle />
+        <Story />
+      </HistoryContextProvider>
+    ),
+  ],
+};
+
+export default preview;

README.md

@@ -1,6 +1,6 @@
 # reg-cli-report-ui
 
-[![GitHub Actions Status](https://github.com/reg-viz/reg-cli-report-ui/workflows/Continuous%20Integration/badge.svg)](https://github.com/reg-viz/reg-cli-report-ui/actions)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/reg-viz/reg-cli-report-ui/ci.yml?branch=main&style=flat-square&link=https%3A%2F%2Fgithub.com%2Freg-viz%2Freg-cli-report-ui%2Factions%2Fworkflows%2Fci.yml)
 
 > :gem: New face of reg-cli report UI.
 
@@ -16,10 +16,10 @@ This repository is the Report UI of [reg-viz/reg-cli][reg-cli]
 
 The following list is scripts used during development.
 
-### `yarn start`
+### `yarn dev`
 
 ```bash
-$ yarn start
+$ yarn dev
 ```
 
 Launch the Report UI with the mock data.