Initial commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "loose": true,
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": ["inline-react-svg"]
+}

.eslintrc

@@ -0,0 +1,66 @@
+{
+  "ignorePatterns": [
+    // Unignore Javascript "dotfiles" (ignored by ESLint defaults)
+    "!.*.js",
+    "!.*.cjs",
+    "!.*.mjs"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "overrides": [
+    {
+      "files": ["*.mjs"],
+      "parserOptions": {
+        "sourceType": "module"
+      },
+      "globals": {
+        "__dirname": "off",
+        "__filename": "off",
+        "exports": "off",
+        "module": "off",
+        "require": "off"
+      }
+    }
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest"
+  },
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": [
+      "error",
+      {
+        // ? Reference: https://github.com/lydell/eslint-plugin-simple-import-sort/issues/25#issuecomment-625397779
+        "groups": [
+          [
+            // React related packages
+            "^react",
+            // Packages
+            "^@?\\w",
+            // Side effect imports
+            "^\\u0000",
+            // Parent imports (put `..` last)
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./?$",
+            // Other relative imports (put same-folder imports and `.` last)
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$",
+            // Style imports
+            "^.+\\.s?css$"
+          ]
+        ]
+      }
+    ],
+    "simple-import-sort/exports": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/node.js.yml

@@ -0,0 +1,29 @@
+# This workflow runs install-test across different versions of node
+
+name: Node.js Install Test
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+env:
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18, 20]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install-test

.github/workflows/npm-publish.yml

@@ -0,0 +1,34 @@
+# This workflow will run tests using node and then publish an NPM package when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: NPM Publish
+
+on:
+  release:
+    types: [created]
+
+env:
+  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - run: npm install-test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+      - run: npm publish

.github/workflows/storybook-tests.yml

@@ -0,0 +1,46 @@
+# This workflow runs Storybook CI tests against the Netlify build
+# ? Reference: https://github.com/storybookjs/test-runner#running-in-ci
+# ? Reference: https://github.com/marketplace/actions/wait-for-netlify-deployment
+
+name: Storybook Tests
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+env:
+  NETLIFY_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
+  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+      - name: Install dependencies
+        run: npm install
+
+      - name: Wait for Netlify
+        uses: probablyup/[email protected]
+        id: waitForDeployment
+        with:
+          site_id: ${{ secrets.NETLIFY_SITE_ID }}
+
+      - name: Run Storybook tests
+        run: npm run test:storybook
+        env:
+          TARGET_URL: '${{ steps.waitForDeployment.outputs.url }}'
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: failed image snapshots
+          path: __snapshots__/failed
+          retention-days: 7

.gitignore

@@ -0,0 +1,38 @@
+##########################################################################################
+# NOTE: this file is also used as the --ignore-path for Prettier & ESLint scripts
+# ? Reference: https://eslint.org/docs/latest/use/configure/ignore#using-an-alternate-file
+##########################################################################################
+
+# Common
+.DS_Store
+node_modules/
+npm-debug.log
+
+# IDE
+.idea/
+*.iml
+
+# Test generated files
+.nyc_output/
+coverage/
+__snapshots__/failed/
+
+# Build files
+storybook-static/
+/*.css
+/helpers
+/hooks
+/icons
+/ArrowButton.mjs
+/Calendar.mjs
+/CalendarArrow.mjs
+/CalendarContext.mjs
+/CalendarTabs.mjs
+/DateInput.mjs
+/DateInputContext.mjs
+/Field.mjs
+/View.mjs
+/ViewBody.mjs
+/ViewContext.mjs
+/ViewHead.mjs
+/ViewWeekDays.mjs

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "!(*.js|*.cjs|*.mjs)": "prettier --check",
+  "*.{js,cjs,mjs}": ["prettier --check", "eslint"]
+}

.npm-prepare-clean.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const fsPromises = require('node:fs/promises');
+const { files } = require('./package.json');
+
+async function removeBuildFiles(filepath) {
+  try {
+    // Check file exists (or error with "ENOENT")
+    await fsPromises.access(filepath);
+    // Remove file recursively
+    await fsPromises.rm(filepath, { recursive: true, force: true });
+    // Log if file removed
+    return console.log(`${filepath} removed`);
+  } catch (error) {
+    // Only throw errors if file exists
+    if (error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+}
+
+(async function () {
+  try {
+    await Promise.all([...files, 'storybook-static'].map(removeBuildFiles));
+  } catch (error) {
+    console.error(error);
+  }
+})();

.npmrc

@@ -0,0 +1,2 @@
+package-lock=false
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

.nvmrc

@@ -0,0 +1 @@
+20

.postcssrc.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+module.exports = {
+  plugins: [
+    autoprefixer({
+      cascade: false,
+    }),
+    cssnano({
+      preset: 'default',
+    }),
+  ],
+};

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "proseWrap": "never",
+  "singleQuote": true
+}

.storybook/main.mjs

@@ -0,0 +1,48 @@
+import packageJson from '../package.json';
+import { webpackFinal } from '@idesigncode/storybook-tools/storybookConfig.mjs';
+
+export default {
+  addons: [
+    {
+      name: '@storybook/addon-coverage',
+      options: {
+        istanbul: {
+          include: ['**/src/**'], // Prevent coverage code injection in PropsTable values
+        },
+      },
+    },
+    '@storybook/addon-docs',
+    '@storybook/addon-interactions',
+    'storybook-dark-mode',
+  ],
+  docs: {
+    autodocs: 'tag',
+  },
+  env: (config) => ({
+    ...config,
+    IMPORT_PATH_REPLACEMENTS: JSON.stringify({
+      '^': `${packageJson.name}/`, // Prepend package name to relative paths
+      '../': '', // Remove "parent directory" relative path segments
+      './': '', // Remove "current directory" relative path segments
+      'src/': '', // Remove "src directory" path segments
+    }),
+  }),
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  stories: ['../**/RequiredProps.mdx', '../**/*.mdx', '../**/*.stories.*'],
+  storyIndexers: (indexers) => {
+    // Extend js story indexer for mjs
+    return indexers.map((indexer) => {
+      if (`${indexer.test}`.includes(`[tj]sx?$`)) {
+        return {
+          ...indexer,
+          test: /(stories|story)\.m?[tj]sx?$/,
+        };
+      }
+      return indexer;
+    });
+  },
+  webpackFinal,
+};

.storybook/preview.mjs

@@ -0,0 +1,14 @@
+import '@idesigncode/storybook-tools/styles.css';
+import DocsContainer from '@idesigncode/storybook-tools/DocsContainer.mjs';
+import { decoratorSetCurrentDate } from '../test/test-utils.mjs';
+
+export const parameters = {
+  docs: {
+    container: DocsContainer, // TODO - Remove once resolved: https://github.com/hipstersmoothie/storybook-dark-mode/issues/205#issuecomment-1419862816
+  },
+  viewMode: 'docs',
+};
+
+export default {
+  decorators: [decoratorSetCurrentDate],
+};

.storybook/test-runner.cjs

@@ -0,0 +1,30 @@
+const { toMatchImageSnapshot } = require('jest-image-snapshot');
+
+const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
+
+module.exports = {
+  setup() {
+    expect.extend({ toMatchImageSnapshot });
+  },
+  async postRender(page, context) {
+    // Exclude "example" stories from snapshots as they use the "un-mocked" current date
+    if (!context.id.includes('example')) {
+      // ? Reference: https://github.com/storybookjs/test-runner#dom-snapshot-recipe
+      const elementHandler = await page.$('#storybook-root');
+      const innerHTML = await elementHandler.innerHTML();
+      expect(innerHTML).toMatchSnapshot();
+
+      // ? Reference: https://github.com/storybookjs/test-runner#image-snapshot-recipe
+      const image = await page.screenshot();
+      expect(image).toMatchImageSnapshot({
+        customDiffDir: `${customSnapshotsDir}/failed/diff`,
+        customReceivedDir: `${customSnapshotsDir}/failed`,
+        customSnapshotsDir,
+        customSnapshotIdentifier: context.id,
+        failureThreshold: 0.015,
+        failureThresholdType: 'percent',
+        storeReceivedOnFailure: true,
+      });
+    }
+  },
+};