docs: demos intro, changelog reformat and storybook styling (#1022)

* docs: changelog reformat; demos intro and changelog rework * docs: some storybook customization * Update packages/demos/.storybook/preview-head.html Co-authored-by: Gago <xeroice@gmail.com> --------- Co-authored-by: Gago <xeroice@gmail.com>
britecharts · Apr 25, 2023 · a1085d0 · a1085d0
1 parent 7ce0fd0
commit a1085d0
Show file tree

Hide file tree

Showing 16 changed files with 265 additions and 230 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
@@ -1,11 +1,14 @@
 const path = require('path');
 
 module.exports = {
-    stories: ['../src/**/*.stories.[tj]s'],
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.[tj]s'],
     addons: [
         '@storybook/addon-viewport/register',
         '@storybook/addon-a11y',
         '@storybook/addon-actions',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
     ],
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'

diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -8,4 +8,10 @@ addParameters({
         options: {},
     },
     layout: 'fullscreen',
+    options: {
+        storySort: {
+            method: 'alphabetical',
+            order: ['Welcome', ['CHARTS'], 'Changelog'],
+        },
+    },
 });
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -24,6 +24,7 @@
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-console": "^1.2.3",
+    "@storybook/addon-docs": "^6.5.9",
     "@storybook/addon-viewport": "^6.5.9",
     "@storybook/html": "^6.5.9",
     "@types/d3-selection": "^1.4.1",
@@ -145,7 +146,7 @@
     "lint": "yarn run lint:js && yarn run lint:styles",
     "prebuild": "yarn run clean",
     "start": "yarn run demo",
-    "storybook": "start-storybook -p 1001",
+    "storybook": "start-storybook -p 2001",
     "test:watch": "jest --watch --colors",
     "test": "jest --colors"
   }

diff --git a/packages/core/src/README.stories.mdx b/packages/core/src/README.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta, Description } from '@storybook/addon-docs';
+
+import Readme from '!raw-loader!../README.md';
+
+<Meta title="Welcome" />
+
+<Description markdown={Readme} />
diff --git a/packages/demos/.storybook/main.js b/packages/demos/.storybook/main.js
@@ -1,18 +1,25 @@
 module.exports = {
-    stories: ['../src/*.stories.[tj]s'],
-    addons: [],
+    stories: ['../src/**/*.stories.mdx', '../src/*.stories.[tj]s'],
+    addons: [
+        '@storybook/addon-viewport/register',
+        '@storybook/addon-a11y',
+        '@storybook/addon-actions',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
+    ],
 
     // Reference: Storybook composition: https://storybook.js.org/docs/react/sharing/storybook-composition
     refs: (_, { configType }) => {
         if (configType === 'DEVELOPMENT') {
             return {
                 core: {
                     title: 'Britecharts Core',
-                    url: 'http://localhost:1001',
+                    url: 'http://localhost:2001',
                 },
                 react: {
                     title: 'Britecharts React',
-                    url: 'http://localhost:1002',
+                    url: 'http://localhost:2002',
                 },
             };
         }

diff --git a/packages/demos/.storybook/preview-head.html b/packages/demos/.storybook/preview-head.html
@@ -1,7 +1,7 @@
 <!-- https://storybook.js.org/docs/configurations/add-custom-head-tags/#docs-content -->
 <!-- Favicon -->
-<link rel="shortcut icon" href="img/icons/favicon.ico">
-<link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32">
-<link rel="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16">
+<link rel="shortcut icon" href="../../docs/static/img/icons/favicon.ico">
+<link rel="icon" type="image/png" href="../../docs/static/img/icons/favicon-16x16.png" sizes="16x16">
+<link rel="icon" type="image/png" href="../../docs/static/img/icons/favicon-32x32.png" sizes="32x32">
 
-<link type="text/css" rel="stylesheet" href="/dist/styles/bundle/britecharts.css" />
+<link type="text/css" rel="stylesheet" href="/dist/styles/bundle/britecharts.css" />
diff --git a/packages/demos/.storybook/preview.js b/packages/demos/.storybook/preview.js
@@ -8,4 +8,10 @@ addParameters({
         options: {},
     },
     layout: 'fullscreen',
+    options: {
+        storySort: {
+            method: '',
+            order: ['Introduction', 'Changelog'],
+        },
+    },
 });
diff --git a/packages/demos/package.json b/packages/demos/package.json
@@ -3,7 +3,9 @@
   "packageManager": "yarn@3.2.0",
   "version": "0.0.0",
   "devDependencies": {
+    "@storybook/addons": "^6.5.9",
     "@storybook/html": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "chromatic": "^6.15.0"
   },
   "scripts": {
@@ -13,6 +15,6 @@
     "demo": "yarn storybook",
     "prebuild": "yarn run clean",
     "start": "yarn storybook",
-    "storybook": "start-storybook -p 1000"
+    "storybook": "start-storybook -p 2000"
   }
 }
diff --git a/packages/demos/src/welcome.html b/packages/demos/src/welcome.html
diff --git a/packages/demos/src/welcome.stories.js b/packages/demos/src/welcome.stories.js
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -4,6 +4,9 @@ module.exports = {
         '../src/**/*.stories.@(js|jsx|ts|tsx)',
     ],
     addons: [
+        '@storybook/addon-viewport/register',
+        '@storybook/addon-a11y',
+        '@storybook/addon-actions',
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',

diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -1,5 +1,6 @@
 import { addParameters } from '@storybook/react';
 import '@storybook/addon-console';
+import '../../core/dist/styles/bundle/britecharts.css';
 
 addParameters({
     a11y: {

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -53,7 +53,7 @@
     "demo": "yarn run storybook",
     "prebuild": "yarn run clean",
     "start": "webpack-dev-server --env=test --open --hot",
-    "storybook": "start-storybook -p 1002",
+    "storybook": "start-storybook -p 2002",
     "test:watch": "jest --watch --colors",
     "test": "jest --colors"
   }

diff --git a/packages/react/src/CHANGELOG.stories.mdx b/packages/react/src/CHANGELOG.stories.mdx
diff --git a/yarn.lock b/yarn.lock
@@ -3433,6 +3433,7 @@ __metadata:
     "@storybook/addon-a11y": ^6.5.9
     "@storybook/addon-actions": ^6.5.9
     "@storybook/addon-console": ^1.2.3
+    "@storybook/addon-docs": ^6.5.9
     "@storybook/addon-viewport": ^6.5.9
     "@storybook/html": ^6.5.9
     "@types/d3-selection": ^1.4.1
@@ -3483,7 +3484,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@britecharts/demos@workspace:packages/demos"
   dependencies:
+    "@storybook/addons": ^6.5.9
     "@storybook/html": ^6.5.9
+    "@storybook/theming": ^6.5.9
     chromatic: ^6.15.0
   languageName: unknown
   linkType: soft
@@ -5600,6 +5603,56 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addons@npm:^6.5.9":
+  version: 6.5.16
+  resolution: "@storybook/addons@npm:6.5.16"
+  dependencies:
+    "@storybook/api": 6.5.16
+    "@storybook/channels": 6.5.16
+    "@storybook/client-logger": 6.5.16
+    "@storybook/core-events": 6.5.16
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.16
+    "@storybook/theming": 6.5.16
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 0463150e4cf7bd2b2aaafdbaadfb4420e4e0a31eb651cfc1a2d7f4b4974caf67878712602474585dfa18f583000608598045594909959d2e9e2ec32ba004392d
+  languageName: node
+  linkType: hard
+
+"@storybook/api@npm:6.5.16":
+  version: 6.5.16
+  resolution: "@storybook/api@npm:6.5.16"
+  dependencies:
+    "@storybook/channels": 6.5.16
+    "@storybook/client-logger": 6.5.16
+    "@storybook/core-events": 6.5.16
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.16
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.5.16
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    telejson: ^6.0.8
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: c873189ac1e501825d647903baa125899c492cee962cb86ebb7455110bd09194eeb6943f5c58a1f808ce4ee2e20e305f5604a4e60b07003c82a6fc6ceaee5ea9
+  languageName: node
+  linkType: hard
+
 "@storybook/api@npm:6.5.9":
   version: 6.5.9
   resolution: "@storybook/api@npm:6.5.9"
@@ -5717,6 +5770,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:6.5.16":
+  version: 6.5.16
+  resolution: "@storybook/channels@npm:6.5.16"
+  dependencies:
+    core-js: ^3.8.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: 3d7f7bc19ed7b250976e00e02ab544408806b439106bed18a5db9815612f6c5df9bdf7c1a97b5a40ba3194184ebe7e4c75e2bca5496025d6b26afefa95cfccbd
+  languageName: node
+  linkType: hard
+
 "@storybook/channels@npm:6.5.9":
   version: 6.5.9
   resolution: "@storybook/channels@npm:6.5.9"
@@ -5759,6 +5823,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.5.16":
+  version: 6.5.16
+  resolution: "@storybook/client-logger@npm:6.5.16"
+  dependencies:
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: 0a86959b1bacb1b893e282173b48afe9c857b8cdc67a47ad87a7f11ba7dbc15ebc4f0d05c07dffb988e0cd3e1de0f09f300ee06c66afe4c50e9be83aaed75971
+  languageName: node
+  linkType: hard
+
 "@storybook/client-logger@npm:6.5.9, @storybook/client-logger@npm:^6.4.0":
   version: 6.5.9
   resolution: "@storybook/client-logger@npm:6.5.9"
@@ -5889,6 +5963,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:6.5.16":
+  version: 6.5.16
+  resolution: "@storybook/core-events@npm:6.5.16"
+  dependencies:
+    core-js: ^3.8.2
+  checksum: 1844bdabfb7828af7ddd54129fbb321bf65d8b65459eaac99c8f3f94c7c2f0ee000468362758076444083f863a3bc835ecd1e4f2128524eb5c00c8a576473bc9
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:6.5.9":
   version: 6.5.9
   resolution: "@storybook/core-events@npm:6.5.9"
@@ -6278,6 +6361,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:6.5.16":
+  version: 6.5.16
+  resolution: "@storybook/router@npm:6.5.16"
+  dependencies:
+    "@storybook/client-logger": 6.5.16
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 2812b93997026b1d85f02072d04f18e98e24de288efb73402f8d15ececd390e13dc620ef011268e09986c629f497ffa03230c2431e89b4e37c01b70761be2c6d
+  languageName: node
+  linkType: hard
+
 "@storybook/router@npm:6.5.9":
   version: 6.5.9
   resolution: "@storybook/router@npm:6.5.9"
@@ -6386,6 +6485,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:6.5.16, @storybook/theming@npm:^6.5.9":
+  version: 6.5.16
+  resolution: "@storybook/theming@npm:6.5.16"
+  dependencies:
+    "@storybook/client-logger": 6.5.16
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 349affa5c5208240291a5d24c73d852e220bfaf36b8fda70564aec1cac6070248ce7566ccb755c55a6ce0844ab2bbfd55881f6f788240b38cb407714e393c6f3
+  languageName: node
+  linkType: hard
+
 "@storybook/theming@npm:6.5.9":
   version: 6.5.9
   resolution: "@storybook/theming@npm:6.5.9"