Merge pull request #63 from kurone-kito/improve-the-appearance

Added the dark mode appearance; Added the page each by genius type and languages

Author: kurone-kito

package-lock.json

@@ -40,24 +40,24 @@
     "@kurone-kito/dantalion-core": "^0.19.1",
     "@kurone-kito/dantalion-i18n": "^0.19.1",
     "commander": "^7.2.0",
-    "marked": "^2.1.1",
+    "marked": "^2.1.2",
     "marked-terminal": "^4.1.1"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",
     "@types/marked": "^2.0.3",
     "@types/marked-terminal": "^3.1.1",
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
     "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
     "prettier": "^2.3.1",
     "ts-jest": "^27.0.3",
     "typescript": "^4.3.4"

packages/dantalion-cli/package.json

@@ -34,17 +34,17 @@
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
     "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
     "prettier": "^2.3.1",
     "ts-jest": "^27.0.3",
     "typescript": "^4.3.4"

packages/dantalion-core/package.json

@@ -41,17 +41,17 @@
   "devDependencies": {
     "@types/jest": "^26.0.23",
     "@types/lodash.merge": "^4.6.6",
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
     "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-prettier": "^3.4.0",
-    "jest": "^27.0.4",
-    "jest-cli": "^27.0.4",
+    "jest": "^27.0.5",
+    "jest-cli": "^27.0.5",
     "prettier": "^2.3.1",
     "ts-jest": "^27.0.3",
     "typescript": "^4.3.4"

packages/dantalion-i18n/package.json

@@ -0,0 +1,31 @@
+import { ReactNode, VFC } from 'react';
+import {
+  DocsContainer as BaseContainer,
+  DocsContainerProps,
+  DocsContextProps,
+} from '@storybook/addon-docs/blocks';
+import merge from 'lodash.merge';
+import { useDarkMode } from 'storybook-dark-mode';
+import { themes } from '@storybook/theming';
+
+/** Type definition of the required attributes. */
+export interface Props extends DocsContainerProps {
+  /** The children items. */
+  readonly children?: ReactNode;
+}
+
+/** The docs container component for Storybook. */
+const DocsContainer: VFC<Props> = ({ children, context }) => (
+  <BaseContainer
+    context={merge<DocsContextProps, DocsContextProps>(context, {
+      parameters: {
+        docs: { theme: useDarkMode() ? themes.dark : themes.light },
+      },
+    })}
+  >
+    {children}
+  </BaseContainer>
+);
+DocsContainer.displayName = 'DocsContainer';
+
+export default DocsContainer;

packages/dantalion-web-playground/.storybook/components/DocContainer.tsx

@@ -5,6 +5,7 @@ module.exports = {
       name: '@storybook/addon-postcss',
       options: { postcssLoaderOptions: { implementation: require('postcss') } },
     },
+    'storybook-dark-mode',
   ],
   core: { builder: 'webpack5' },
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],

packages/dantalion-web-playground/.storybook/main.js

@@ -1,6 +1,10 @@
 import '../src/styles/global.css';
+import DocsContainer from './components/DocContainer';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
+  darkMode: { darkClass: 'dark', stylePreview: true },
+  docs: { container: DocsContainer },
+  viewMode: 'docs',
 };

packages/dantalion-web-playground/.storybook/preview.js

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

packages/dantalion-web-playground/next-env.d.ts

@@ -7,12 +7,20 @@ const isProd = process.env.NODE_ENV === 'production';
 const isCI = !!process.env.CI;
 const path = !isCI && isProd ? '' : productPath;
 const assetPrefix = (isCI && isProd ? productDomain : localDomain) + path;
+const applyDarkMode = `
+const { classList } = window.document.getElementsByTagName('html')[0];
+localStorage.theme === 'dark' ||
+(!('theme' in localStorage) &&
+  window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ? classList.add('dark')
+  : classList.remove('dark');
+`;
 
 /** @type {Partial<import('next/dist/next-server/server/config-shared').NextConfig>} */
 const providedExports = {
   assetPrefix,
   basePath: path,
-  env: { assetPrefix },
+  env: { applyDarkMode, assetPrefix },
   future: { strictPostcssConfiguration: true },
   // i18n: { defaultLocale: 'en', locales: ['en', 'ja'] },
   reactStrictMode: true,

packages/dantalion-web-playground/next.config.js

@@ -44,11 +44,12 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@kurone-kito/dantalion-core": "^0.19.1",
     "@kurone-kito/dantalion-i18n": "^0.19.1",
-    "@sentry/nextjs": "^6.7.1",
+    "@sentry/nextjs": "^6.7.2",
     "classnames": "^2.3.1",
     "js-base64": "^3.6.1",
     "lodash.chunk": "^4.2.0",
-    "next": "^11.0.0",
+    "lodash.merge": "^4.6.2",
+    "next": "^11.0.1",
     "qs": "^6.10.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -59,23 +60,26 @@
     "unstated-next": "^1.1.0"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/builder-webpack5": "^6.2.9",
     "@storybook/react": "^6.2.9",
+    "@storybook/theming": "^6.2.9",
     "@types/lodash.chunk": "^4.2.6",
+    "@types/lodash.merge": "^4.6.6",
     "@types/qs": "^6.9.6",
     "@types/react": "^17.0.11",
     "@types/react-fontawesome": "^1.6.4",
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.0",
+    "@typescript-eslint/parser": "^4.28.0",
     "browserslist": "^4.16.6",
     "eslint": "^7.29.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-next": "^11.0.0",
+    "eslint-config-next": "^11.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-typescript": "^2.4.0",
-    "eslint-plugin-import": "~2.22.1",
+    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-next": "^0.0.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -85,6 +89,7 @@
     "postcss": "^8.3.5",
     "prettier": "^2.3.1",
     "serve": "^12.0.0",
+    "storybook-dark-mode": "^1.0.8",
     "stylelint": "^13.13.1",
     "stylelint-config-recommended": "^5.0.0",
     "typescript": "^4.3.4"