Upgrade all dependencies

.eslintrc.json

@@ -7,13 +7,15 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "prettier",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module"
   },
   "plugins": ["@typescript-eslint"],
-  "rules": {}
+  "rules": {},
+  "ignorePatterns": ["node_modules/", "dist/", "**/_*"]
 }

.github/workflows/check.yml

@@ -0,0 +1,19 @@
+name: Check
+
+on:
+  push:
+    paths-ignore:
+      - 'README.md'
+      - 'LICENSE'
+
+jobs:
+  job:
+    runs-on: ubuntu-latest
+    timeout-minutes: 3
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+      - name: Install packages
+        run: yarn install --frozen-lockfile
+      - name: Check
+        run: yarn test

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-ssr
 *.local
-.eslintcache
+.eslintcache
+yarn-error.log

.prettierrc.json

@@ -1,3 +1,11 @@
 {
-  "singleQuote": true
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
 }

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite', // 👈 The builder enabled here.
+  },
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      // Set relative base path to support deployment on path like /storybook
+      base: './',
+      optimizeDeps: { include: ['react-is', '@base2/pretty-print-object'] },
+    });
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;

.storybook/middleware.js

@@ -11,6 +11,6 @@ module.exports = function (app) {
     createProxyMiddleware({
       target: `http://localhost:${PORT}`,
       changeOrigin: true,
-    })
+    }),
   );
 };

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900" />

.storybook/preview.tsx

@@ -1,5 +1,5 @@
+import { Preview } from '@storybook/react';
 import React from 'react';
-import { addDecorator } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import '../src/app/globals.css';
@@ -14,4 +14,8 @@ export const parameters = {
   },
 };
 
-addDecorator((story) => <MemoryRouter>{story()}</MemoryRouter>);
+const preview: Preview = {
+  decorators: [(story) => <MemoryRouter>{story()}</MemoryRouter>],
+};
+
+export default preview;

.stylelintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "extends": ["stylelint-config-standard"],
   "rules": {
     "selector-class-pattern": null,
     "keyframes-name-pattern": null

.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "node_modules": true,
+    "dist": true
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.format": true,
+    "source.organizeImports": true,
+    // Sort package.json keys with https://marketplace.visualstudio.com/items?itemName=unional.vscode-sort-package-json
+    "source.sortPackageJson": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

README.md

@@ -14,13 +14,13 @@ First, [create a repository from this template](https://docs.github.com/en/githu
 Now you are ready to go:
 
 ```shell
-npm install
+yarn
 ```
 
 This will install the dependencies required to run the boilerplate.
 
 ```shell
-npm run dev
+yarn dev
 ```
 
 Boom! These scripts run your server, client and storybook in development mode.
@@ -34,9 +34,9 @@ The default PORTS are:
 If you don't like to call all scripts at once, you can also run:
 
 ```shell
-npm run server:dev
-npm run client:dev
-npm run storybook
+yarn run server:dev
+yarn run client:dev
+yarn run storybook
 ```
 
 You can configure the server port by setting the `PORT` environment variable. Creating a `.env` file is supported. You can copy `.env.example` to `.env`.
@@ -50,13 +50,13 @@ You can configure the server port by setting the `PORT` environment variable. Cr
 To build the project, run:
 
 ```shell
-npm run build
+yarn build
 ```
 
 This will build the client, server and storybook.
 
 ```shell
-npm start
+yarn start
 ```
 
 In production, you have a single server serving everything.

index.html

@@ -2,8 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+    default-src 'self' ;
+    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com/css ;
+    font-src 'self' 'unsafe-inline' https://fonts.gstatic.com/ ;
+    "
+    />
     <link rel="icon" type="image/svg+xml" href="/src/app/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900" />
     <title>Vite App</title>
   </head>
   <body>