simplify storybook build (#32)

Author: llaenowyd

README.md

@@ -1,5 +1,28 @@
 # <img align="center" src="doc/img/syrup.svg" width="52" height="52">cushman toolkit
 
-| unit of release | repository |
-| --------------- | ---------- |
+| unit of release                              | repository                                                                                            |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
 | [`@a110/rito` React Lib](packages/lib/rito/) | [![npm version](https://badge.fury.io/js/@a110%2Frito.svg)](https://www.npmjs.com/package/@a110/rito) |
+
+## What is this?
+
+This project is a [_monorepo_](https://en.wikipedia.org/wiki/Monorepo) that hosts
+an [_npm library_](https://www.npmjs.com/package/@a110/rito) that's intended for
+use in [_React frontend applications_](https://reactjs.org/).
+
+The simplest way to explore the primary content here would be to visit [the Storybook
+page, that's hosted here on GitHub Pages](https://llaenowyd.github.io/cushman/).
+
+## How to use it?
+
+The library, `@a110/rito`, can be added to a React appliction with either
+`yarn add @a110/rito` or `npm i --save @a110/rito`. More instructions should
+be available in the [package-level documentation](packages/lib/rito/README.md).
+
+## How to hack on it?
+
+1. Fork and clone, checkout a branch
+2. `yarn`
+3. `yarn build`
+4. `yarn dev-rito-sb`
+5. Pull requests welcome!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a110/cushman",
-  "version": "0.0.1",
+  "version": "0.0.13",
   "description": "toolkit",
   "private": true,
   "workspaces": {
@@ -31,6 +31,10 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "yarn": "^1.22.19"
+  },
+  "engines": {
+    "node": ">=16"
   }
 }

packages/apps/rito-sb/.storybook/DocsContainer.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DocsContainer as BaseContainer } from '@storybook/addon-docs/blocks'
+import { DocsContainer as BaseContainer } from '@storybook/addon-docs'
 import { useDarkMode } from 'storybook-dark-mode'
 import { themes } from '@storybook/theming'
 import {

packages/apps/rito-sb/.storybook/main.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const { mergeConfig } = require('vite')
 
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -8,25 +7,9 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     'storybook-dark-mode',
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: { parser: 'typescript' },
-        transcludeMarkdown: true,
-      },
-    },
     '@a110/storybook-expand-all',
+    'storybook-css-modules',
   ],
   framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-vite',
-  },
   staticDirs: [path.join('..', 'public')],
-  async viteFinal(config, { configType }) {
-    return mergeConfig(config, {
-      base: '',
-    })
-  },
 }

packages/apps/rito-sb/.storybook/preview.js

@@ -1,20 +1,16 @@
-import { useDarkMode } from 'storybook-dark-mode'
+import { DocsPage } from '@storybook/addon-docs'
+// import { useDarkMode } from 'storybook-dark-mode'
 import { themes } from '@storybook/theming'
 
 import DocsContainer from './DocsContainer'
 import darkTheme from './darkTheme'
 import lightTheme from './lightTheme'
 
-import '@a110/rito/default-palettes.css'
+import '@a110/rito/dist/styles/default-palettes.css'
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' }, // tbd maybe don't need
   controls: {
     expanded: true,
-    matchers: {
-      color: /(background|color)$/i, // tbd maybe don't need
-      date: /Date$/, // tbd maybe don't need
-    },
   },
   darkMode: {
     dark: darkTheme, // caution don't add variables here
@@ -29,10 +25,11 @@ export const parameters = {
     stylePreview: true,
   },
   viewMode: 'docs',
-  previewTabs: { 'storybook/docs/panel': { index: -1 } },
+  // previewTabs: { 'storybook/docs/panel': { index: -1 } },
   docs: {
     source: { format: false },
     container: DocsContainer,
+    // page: DocsPage,
   },
   options: {
     storySort: {

packages/apps/rito-sb/package.json

@@ -1,44 +1,45 @@
 {
   "name": "@a110/rito-sb",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.13",
   "scripts": {
     "clean": "rimraf storybook-static",
     "dev": "start-storybook -p 6006",
     "dev:libwatch": "nodemon --watch ../../packages/rito/dist -e ts,tsx --exec \"start-storybook -p 6006\"",
-    "dev:app": "vite",
-    "build:app": "tsc && vite build",
-    "preview:app": "vite preview",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "serve": "serve storybook-static"
   },
   "dependencies": {
     "@a110/rito": "*",
-    "@a110/storybook-expand-all": "^1.0.9",
+    "@a110/storybook-expand-all": "^1.1.1",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-syntax-highlighter": "^15.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.10",
-    "@storybook/addon-actions": "^6.5.0",
-    "@storybook/addon-docs": "^6.5.0",
-    "@storybook/addon-essentials": "^6.5.0",
-    "@storybook/addon-interactions": "^6.5.0",
-    "@storybook/addon-links": "^6.5.0",
-    "@storybook/builder-vite": "^0.1.33",
-    "@storybook/react": "^6.5.0",
-    "@storybook/testing-library": "^0.0.11",
-    "@storybook/theming": "^6.5.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/api": "^6.5.10",
+    "@storybook/builder-webpack4": "^6.5.10",
+    "@storybook/components": "^6.5.10",
+    "@storybook/core-events": "^6.5.10",
+    "@storybook/manager-webpack4": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/theming": "^6.5.10",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^1.3.0",
     "babel-loader": "^8.2.5",
     "nodemon": "^2.0.16",
     "rimraf": "^3.0.2",
     "serve": "^13.0.2",
+    "storybook-css-modules": "^1.0.8",
     "storybook-dark-mode": "^1.1.0",
-    "typescript": "^4.6.3",
-    "vite": "^2.9.7"
+    "typescript": "^4.6.3"
   }
 }

packages/apps/rito-sb/src/main.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>