.babelrc

@@ -1,9 +1,3 @@
 {
-  "presets": ["@babel/preset-react", "@babel/preset-env"],
-  "plugins": [
-    "emotion",
-    "@babel/plugin-transform-react-jsx",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-typescript"
-  ]
+  "presets": ["@babel/preset-react", "@babel/preset-env"]
 }

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "unicorn", "jest-dom", "testing-library"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier",
+    "plugin:storybook/recommended",
+  ],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,27 +1,29 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
+**Package Version**
+
+<!-- A clear and concise description of what the bug is. -->
+
 **Describe the bug**
-A clear and concise description of what the bug is.
+<!-- A clear and concise description of what the bug is. -->
 
 **To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
+<!-- Steps to reproduce the behavior: -->
 
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+
+<!-- A clear and concise description of what you expected to happen. -->
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+
+<!-- If applicable, add screenshots to help explain your problem. -->
 
 **Additional context**
-Add any other context about the problem here.
+
+<!-- Add any other context about the problem here. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +1,23 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 **Describe the solution you'd like**
-A clear and concise description of what you want to happen.
+
+<!-- A clear and concise description of what you want to happen. -->
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+
+<!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+
+<!-- Add any other context or screenshots about the feature request here. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,3 @@
+# What changes are introduced?
 
-**Before submitting a pull request,** please do the following:
-
-1. Make sure you are not working on the master branch.
-2. run `npm run test` and ensure that all tests pass.
-3. Push up the branch code and create a pull request.
-4. Add details regarding what code you wrote.
-5. If the pull request is related to a particular issue, make sure to reference the issue number.
+# Any screenshots?

.github/actions/setup-node/action.yaml

@@ -0,0 +1,16 @@
+name: setup-node-env
+
+runs:
+  using: "composite"
+  steps:
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+    - run: npm install --global yarn
+      shell: bash
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16.x
+        cache: "yarn"
+    - run: yarn install
+      shell: bash

.github/workflows/deploy.yml

@@ -0,0 +1,67 @@
+name: deploy
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-node
+      - run: yarn run clean
+      - run: yarn run test
+      - name: Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/setup-node
+      - run: yarn run clean
+      - run: yarn run lint --max-warnings=0
+
+  build-site:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "3.0"
+      - uses: ./.github/actions/setup-node
+      - name: Build demo site
+        run: yarn run build:demo
+      - name: Create stories
+        run: ruby scripts/stories.rb
+      - name: Build storybook
+        run: yarn run build-storybook
+
+      - name: Upload Pages Artifact
+        if: ${{ github.event_name != 'pull_request' }}
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "./docs"
+
+  deploy-site:
+    if: ${{ github.event_name != 'pull_request' }}
+    needs: [build-site, lint, tests]
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -7,4 +7,15 @@
 npm-debug.log
 node_modules
 dist
-docs/js
+docs/javascripts
+docs/js
+docs/index.html
+docs/storybook
+
+cjs
+esm
+umd
+.yarn/cache
+.yarn/install-state.gz
+stories/*.tsx
+storybook-static

.npmignore

@@ -9,18 +9,24 @@
 npm-debug.log
 lib
 
+.yarn/*
+.yarnrc
 examples
 docs
 webpack.config.*
-prettier.config.js
+prettier.config.*
 template.html
-__tests__
 .github
 .circleci
+.eslintrc.*
 coverage
 src
 tslint.json
-jest.config.js
+jest.config.*
 CODEOWNERS
 CODE_OF_CONDUCT.md
-CONTRIBUTING.md
+CONTRIBUTING.md
+stories
+yarn-error.log
+.storybook
+.prettierignore

.prettierignore

@@ -0,0 +1,8 @@
+.yarn
+node_modules
+yarn.lock
+coverage
+docs/storybook
+docs/javascripts
+docs/js
+template.html

.storybook/canonical-link/register.js

@@ -0,0 +1,8 @@
+import { addons } from "@storybook/addons";
+
+addons.register("storybook/canonical-link", (api) => {
+  var link = document.createElement("link");
+  link.setAttribute("rel", "canonical");
+  link.setAttribute("href", "https://www.davidhu.io/react-spinners/storybook");
+  document.head.appendChild(link);
+});

.storybook/google-adsense/register.js

@@ -0,0 +1,12 @@
+import { addons } from "@storybook/addons";
+
+addons.register("storybook/google-adsense", (api) => {
+  var script = document.createElement("script");
+  script.async = true;
+  script.setAttribute(
+    "src",
+    "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5203413376871291"
+  );
+  script.setAttribute("crossorigin", "anonymous");
+  document.head.appendChild(script);
+});

.storybook/google-analytics-v4/register.js

@@ -0,0 +1,26 @@
+import { window } from "global";
+import { addons } from "@storybook/addons";
+import { STORY_CHANGED, STORY_ERRORED, STORY_MISSING } from "@storybook/core-events";
+
+import ReactGa from "react-ga4";
+
+addons.register("storybook/google-analytics-v4", (api) => {
+  ReactGa.initialize(window.STORYBOOK_GA_V4_ID, window.STORYBOOK_REACT_GA_OPTIONS);
+
+  api.on(STORY_CHANGED, () => {
+    const { path } = api.getUrlState();
+    ReactGa.send({ hitType: "pageview", page: path });
+  });
+  api.on(STORY_ERRORED, ({ description }) => {
+    ReactGa.exception({
+      description,
+      fatal: true,
+    });
+  });
+  api.on(STORY_MISSING, (id) => {
+    ReactGa.exception({
+      description: `attempted to render ${id}, but it is missing`,
+      fatal: false,
+    });
+  });
+});

.storybook/main.js

@@ -0,0 +1,18 @@
+module.exports = {
+  stories: ["../stories/*.stories.@(ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    // "@storybook/addon-google-analytics",
+    "storybook-dark-mode",
+    "./google-analytics-v4/register.js",
+    "./google-adsense/register.js",
+    "./canonical-link/register.js",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "@storybook/builder-webpack5",
+    disableTelemetry: true,
+  },
+};

.storybook/manager.js

@@ -0,0 +1,3 @@
+window.STORYBOOK_GA_ID = "UA-92266369-2";
+window.STORYBOOK_GA_V4_ID = "G-ZLGVJTEW5V";
+window.STORYBOOK_REACT_GA_OPTIONS = {};