docs: drop docz and rewrite docs with storybook

.github/workflows/deploy.yml

@@ -18,13 +18,12 @@ jobs:
 
       - name: Install and Build
         run: |
-          yarn
-          env DOCZ_BASE=/pi-ui/ yarn docz:build
+          yarn build-storybook
 
       - name: Deploy
         uses: JamesIves/[email protected]
         with:
           BRANCH: gh-pages
-          FOLDER: .docz/dist
+          FOLDER: storybook-static
           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           CLEAN: true

.github/workflows/nodejs.yml

@@ -24,5 +24,5 @@ jobs:
           CI: true
       - name: build
         run: yarn build
-      - name: docz build
-        run: yarn docz:build
+      - name: storybook build
+        run: yarn build-storybook

.gitignore

@@ -21,5 +21,8 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+#storybook
+storybook-static
+
 #docz
-.docz
+.docz

.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@react-theming/storybook-addon",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+};

.storybook/preview.js

@@ -0,0 +1,32 @@
+import { addDecorator } from "@storybook/react";
+import themeDecorator from "./themeDecorator";
+import { withThemes } from "@react-theming/storybook-addon";
+import {
+  DEFAULT_DARK_THEME_NAME,
+  DEFAULT_LIGHT_THEME_NAME,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "../src/theme";
+import providerFn from "./providerFn";
+
+const themes = [
+  { [DEFAULT_LIGHT_THEME_NAME]: defaultLightTheme },
+  { [DEFAULT_DARK_THEME_NAME]: defaultDarkTheme },
+];
+
+addDecorator(
+  withThemes(null, themes, {
+    providerFn,
+  })
+);
+
+export const parameters = {
+  backgrounds: { disable: true },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.storybook/providerFn.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from "react";
+import {
+  useTheme,
+  ThemeProvider,
+  DEFAULT_DARK_THEME_NAME,
+  DEFAULT_LIGHT_THEME_NAME,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "../src/theme";
+
+const themes = {
+  [DEFAULT_DARK_THEME_NAME]: defaultDarkTheme,
+  [DEFAULT_LIGHT_THEME_NAME]: defaultLightTheme,
+};
+
+function ThemeConsumer({ theme, children }) {
+  const { setThemeName, themeName } = useTheme();
+  const themeKey = Object.keys(theme)[0];
+  useEffect(() => {
+    if (themeName !== themeKey) {
+      setThemeName(themeKey);
+    }
+  }, [themeKey, setThemeName, themeName]);
+
+  return children;
+}
+
+function providerFn({ theme, children }) {
+  return (
+    <ThemeProvider themes={themes} defaultThemeName={DEFAULT_LIGHT_THEME_NAME}>
+      <ThemeConsumer theme={theme}>{children}</ThemeConsumer>
+    </ThemeProvider>
+  );
+}
+
+export default providerFn;

.storybook/themeDecorator.js

@@ -0,0 +1,21 @@
+import React from "react";
+import {
+  ThemeProvider,
+  DEFAULT_DARK_THEME_NAME,
+  DEFAULT_LIGHT_THEME_NAME,
+  defaultDarkTheme,
+  defaultLightTheme,
+} from "../src/theme";
+
+const themes = {
+  [DEFAULT_DARK_THEME_NAME]: defaultDarkTheme,
+  [DEFAULT_LIGHT_THEME_NAME]: defaultLightTheme,
+};
+
+const ThemeDecorator = (storyFn) => (
+  <ThemeProvider themes={themes} defaultThemeName={DEFAULT_LIGHT_THEME_NAME}>
+    {storyFn()}
+  </ThemeProvider>
+);
+
+export default ThemeDecorator;

README.md

@@ -53,7 +53,7 @@ class Example extends Component {
 - Install all deps by running:
   `yarn`
 - If you're developing only on pi-ui, serving the live documentation should be enough:
-  `yarn docz:dev`
+  `yarn storybook`
 
 - If you want to see your changes reflected in a project consuming pi-ui, you can use yarn link:
   - Go to the pi-ui directory on your machine and run:

package.json

@@ -22,13 +22,12 @@
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
-    "docz:dev": "docz dev",
-    "docz:build": "docz build",
-    "docz:deploy": "gh-pages -d .docz/dist",
     "lint:css": "stylelint 'src/**/*.css'",
     "lint:css:fix": "npm run lint:css -- --fix",
     "lint:js": "eslint --ext .js,.jsx ./src",
-    "lint:js:fix": "npm run lint:js -- --fix"
+    "lint:js:fix": "npm run lint:js -- --fix",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "peerDependencies": {
     "prop-types": "^15.5.4",
@@ -42,17 +41,23 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@mdx-js/react": "^1.6.22",
+    "@react-theming/storybook-addon": "^1.1.5",
     "@rollup/plugin-url": "^6.1.0",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/builder-webpack5": "^6.4.19",
+    "@storybook/manager-webpack5": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
     "@svgr/rollup": "^5.5.0",
     "@testing-library/react": "^12.1.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
     "cross-env": "^7.0.3",
-    "docz": "^1.2.0",
-    "docz-core": "^1.2.0",
-    "docz-plugin-css": "https://github.com/matheusd/docz-plugin-css",
-    "docz-theme-default": "^1.2.0",
     "eslint": "^7.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
@@ -81,7 +86,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^2.4.1",
     "stylelint": "^14.0.1",
-    "stylelint-config-recommended": "^6.0.0"
+    "stylelint-config-recommended": "^6.0.0",
+    "webpack": "^5.70.0"
   },
   "files": [
     "dist"
@@ -94,10 +100,5 @@
     "react-select-event": "^5.3.0",
     "react-spring": "^9.3.0",
     "react-tapper": "^0.1.23"
-  },
-  "resolutions": {
-    "minimist": "^1.2.5",
-    "ws": "7.4.6",
-    "get-pkg-repo": "4.1.1"
   }
 }

src/components/Badge/Badge.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Badge = ({ children, icon, show, onClose, ...props }) => {

src/components/BoxTextInput/BoxTextInput.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 import Icon from "../Icon/Icon.jsx";
 

src/components/Button/Button.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import { classNames } from "../../utils";
 import Spinner from "../Spinner/Spinner.jsx";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 
 const Button = ({
   children,

src/components/ButtonIcon/ButtonIcon.jsx

@@ -3,7 +3,7 @@ import React from "react";
 import Icon from "../Icon/Icon.jsx";
 import { classNames } from "../../utils";
 import Spinner from "../Spinner/Spinner.jsx";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import {
   useTheme,
   getThemeProperty,

src/components/Card/Card.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
 import { classNames } from "../../utils";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 
 const Card = ({
   children,

src/components/Checkbox/Checkbox.jsx

@@ -1,7 +1,7 @@
 import { PropTypes } from "prop-types";
 import React from "react";
 import { classNames } from "../../utils";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import Description from "../Description/Description.jsx";
 
 const Checkbox = ({

src/components/CopyableText/CopyableText.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { copyToClipboard as copy } from "./helpers";
 import { classNames, idPropTypeCheckForTruncatedComponents } from "../../utils";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import Tooltip from "../Tooltip/Tooltip.jsx";
 import Icon from "../Icon/Icon.jsx";
 import TextHighlighted from "../TextHighlighted/TextHighlighted.jsx";

src/components/DarkLightToggle/DarkLightToggle.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useSpring, animated } from "react-spring";
 import { useTheme, getThemeProperty } from "../../theme";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 
 const DarkLightToggle = ({ onToggle, toggled }) => {
   const { theme } = useTheme();

src/components/Datepicker/Datepicker.jsx

@@ -8,7 +8,7 @@ import React, {
 import PropTypes from "prop-types";
 import Tappable from "react-tapper";
 import { classNames } from "../../utils";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import DatePickerPad from "./DatepickerPad.jsx";
 import { useTheme } from "../../theme";
 import {

src/components/Datepicker/DatepickerPad.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 import { mapToArray, convertObjectToUnixTimestamp } from "./helpers";
 

src/components/Description/Description.jsx

@@ -1,6 +1,6 @@
 import { PropTypes } from "prop-types";
 import React from "react";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Description = ({ body, style, className }) =>

src/components/Dropdown/Dropdown.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { animated, useTransition } from "react-spring";
 import useClickOutside from "../../hooks/useClickOutside";
 import { classNames } from "../../utils";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 
 const Arrow = ({ open, onClick, className }) => (
   <div

src/components/Dropdown/DropdownItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const DropdownItem = ({

src/components/Layout/Container.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Container = ({

src/components/Layout/Header.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Header = ({ children, style, className, ...props }) => {

src/components/Layout/Main.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Main = ({ children, style, className, fill, ...props }) => {

src/components/Layout/PageDetails.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const PageDetails = ({ children, style, className, ...props }) => {

src/components/Layout/Sidebar.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styles from "./styles.css";
+import styles from "./styles.module.css";
 import { classNames } from "../../utils";
 
 const Sidebar = ({ children, style, className, ...props }) => {