Form components

.devcontainer/Dockerfile

@@ -1,6 +1,6 @@
 # [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
-ARG VARIANT=18
-FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
+ARG VARIANT=22-bookworm
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:1-${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.
 # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \

.devcontainer/devcontainer.json

@@ -1,14 +1,11 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.241.1/containers/typescript-node
 {
-  "name": "Node.js & TypeScript",
+  "name": "BladesDb Frontend - NodeJS",
   "build": {
     "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 18, 16, 14.
-    // Append -bullseye or -buster to pin to an OS version.
-    // Use -bullseye variants on local on arm64/Apple Silicon.
     "args": {
-      "VARIANT": "18"
+      "VARIANT": "22-bookworm"
     }
   },
   // Configure tool-specific properties.
@@ -19,7 +16,7 @@
       "extensions": [
         "dbaeumer.vscode-eslint",
         "unifiedjs.vscode-mdx",
-        "ms-azuretools.vscode-docker",
+        "ms-azuretools.vscode-containers",
         "github.vscode-pull-request-github",
         "eamodio.gitlens",
         "davidanson.vscode-markdownlint",
@@ -35,28 +32,32 @@
         "github.vscode-github-actions"
       ],
       "settings": {
-        "jest.autoRun": "watch",
+        "jest.runMode": "watch",
         "stylelint.snippet": ["css", "less", "postcss", "scss"],
         "stylelint.validate": ["css", "less", "postcss", "scss"],
         "editor.codeActionsOnSave": {
-          "source.fixAll.eslint": true,
-          "source.fixAll": true
+          "source.fixAll.eslint": "explicit",
+          "source.fixAll": "explicit"
         },
         "eslint.validate": ["javascript", "typescript", "typescriptreact"],
         "editor.formatOnSave": true,
         "editor.formatOnPaste": true,
         "scss.format.enable": false,
         "css.format.enable": false,
         "snyk.advanced.organization": "bathlarp",
-        "snyk.trustedFolders": ["/workspaces/frontend"]
+        "snyk.trustedFolders": ["/workspaces/frontend"],
+        "snyk.advanced.additionalParameters": "-d"
       }
     }
   },
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [3000, 6006],
-  "runArgs": ["--name", "bladesdb_devcontainer"],
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "npm install",
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+  "remoteUser": "node",
+  "mounts": [
+    "type=bind,source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,readonly"
+  ],
+  "runArgs": ["--name", "bathlarp_frontend_devcontainer"]
 }

.storybook/main.ts

@@ -1,22 +1,39 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import remarkGfm from 'remark-gfm';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
-    '@storybook/test-runner',
     '@storybook/addon-themes',
     '@storybook/addon-designs',
+    '@storybook/test-runner',
+    '@chromatic-com/storybook',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
+
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 export default config;

.storybook/preview.tsx

@@ -8,7 +8,6 @@ import '../src/_themes/root.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -35,6 +34,7 @@ const preview: Preview = {
       ),
     },
   },
+
   decorators: [
     withThemeByClassName<ReactRenderer>({
       themes: {
@@ -45,6 +45,8 @@ const preview: Preview = {
       defaultTheme: 'light',
     }),
   ],
+
+  tags: ['autodocs', 'autodocs']
 };
 
 export default preview;