SETUP

This project used the tutorial below to get up and running: https://dev.to/abhijitdotsharma/build-and-publish-a-component-library-react-typescript-storybook-34ba

INITIALIZE PROJECT

• Create a folder for the project: mkdir grease
• Create a remote repository on Github
• CD into folder and initialize a package.json: yarn init
• Initialize git: git init
• Add dependencies
• Create .gitignore and add /node_modules and /dist directories

DEPENDENCIES

• React/React-Dom as peer dependencies so consuming project sets the correct version: yarn add react react-dom --peer
• TypeScript: yarn add typescript --dev
• Types: yarn add @types/react @types/react-dom --dev
• TSLib (provides runtime support for TS compiler): yarn add tslib --dev
• Rollup: yarn add rollup --dev
• Rollup plugins: yarn add @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript rollup-plugin-dts --dev
• Storybook: npx storybook init
• Storybook Sass dependencies: yarn add @storybook/addon-styling-webpack, css-loader, style-loader, sass-loader, resolve-url-loader --dev

FOLDER STRUCTURE

src -> components -> Component -> Component.component.tsx

• Create index.ts at each level (src, components, component).
• Component Level: export { default } from "./Component.component";
• Components Level: export { default as Component } from "./Component";
• Src Level: export * from "./components";

TYPESCRIPT CONFIG

• Generate tsconfig.json: yarn tsc --init
• Configure tsconfig as follows:

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "declaration": true, 
    "emitDeclarationOnly": true,
    "outDir": "dist", 
    "declarationDir": "types",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true, 
    "skipLibCheck": true
  }
}

ROllUP CONFIG

• Create rollup.config.ts and configure as follows:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json assert { type: 'json }";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs"
      },
      {
        file: packageJson.module,
        format: "esm"
      }
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" })
    ]
  },
  {
    input: "src/index.ts",
    output: [
      { 
        file: "dist/index.d.ts", 
        format: "esm" 
      }
    ],
    plugins: [ dts() ]
  }
];

• Needed to allow .json importing so updated tsconfig.json with "resolveJsonModule": true

• Add main (commonjs output path), module (esm output path), files (entire library output path) and types (type declarations output path) to package.json:

"main": "dist/cjs/index.ts", 
"module": "dist/esm/index.ts",
"files": [
  "dist"
],
"types": "dist/index.d.ts",

• Add build script to package.json:

"scripts": {
  "build": "rollup -c"
}

• Help from this SO with Sass setup: https://stackoverflow.com/questions/41128621/proper-way-to-chain-postcss-and-sass-in-rollup/41905078#41905078

import sass from 'rollup-plugin-sass'
import autoprefixer from 'autoprefixer'
import postcss from 'postcss'

sass({
  processor: css => postcss([autoprefixer])
    .process(css)
    .then(result => result.css)
})

STORYBOOK CONFIG

• Delete src/stories

• Configure @storybook/addon-styling-webpack for sass in .storybook/main.ts:

// .storybook/main.js
import type { StorybookConfig } from "@storybook/react-webpack5";
import path from 'path';

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
    "@storybook/addon-themes",
    ({
        name: "@storybook/addon-styling-webpack",
        options: {
          rules: [
            {
              test: /\.scss$/,
              use: [
                  "style-loader",
                  "css-loader",
                  {
                    loader: "sass-loader",
                    options: { 
                      implementation: require.resolve("sass"),
                      // prepend global styles
                      additionalData: `@import "${ path.resolve(__dirname, "../src/global.styles.scss") }";`
                    }
                  },
              ],
            }
          ],
        }
    })
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {
      builder: {
        useSWC: true,
      },
    },
  },
  // address "React is not defined" error
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: "automatic"
        }
      }
    }
  }),
  docs: {
    autodocs: "tag",
  }
};
export default config;

• import stylesheets in .storybook/preview.ts:

// component stylesheets
import "../src/components/Button/button.styles.scss";

• I was gettting "React is not defined error" after above config. I was able to fix it by adding SWC configuration to the main.ts:

swc: () => ({
  jsc: {
    transform: {
      react: {
        runtime: "automatic"
      }
    }
  }
}),

• "React is not defined" error fix: https://stackoverflow.com/questions/74995855/storybook-canvas-referenceerror-react-is-not-defined

• Sass setup help: https://storybook.js.org/blog/styling-addon-configure-styles-and-themes-in-storybook/?ref=storybookblog.ghost.io

• Migrating from @storybook/addon-styling to @storybook/addon-styling-webpack: https://github.com/storybookjs/addon-styling/blob/main/MIGRATION.md

• TypeScript support: https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

USAGE

Adding the NPM Package

To add the Bacon Grease library to a project:

• via Yarn: yarn add bacon-grease
• via NPM: npm install bacon-grease

Including Styles

Import the bundle.min.css from the following in the app root file:

node_modules/bacon-grease/dist/esm/bundle.min.css'

TO DO

Create Style Guidelines for Library

Color

• Gradient best practices: When to use radial vs. linear, etc.
• Color best practices; When to use HSL vs RGB, etc.
• Explanation of primary/secondary color etc.

Yarn Install Commands

• Install 'light' version with just CSS
• Install Sass version so Sass variables can be customized
• Install so Style folder is accessible in src folder for easy changes to styles
• Perhaps a theme config file for user to easily update with their own theme.
• Optimized version for Next/CRA frameworks
• Rails version?

Button todos

• Configure Icon
• Tertiary/Black & White variants
• Tests for all style options and accessibility considerations
• Fix hover over gradient text
• Consider dark/light theming 'prefers-color-scheme' media query
• Loading/process running variant: Takes spinner plus informative text ('submitting...')