@mitodl/smoot-design 1.0.0

package/.eslintrc.js

@@ -0,0 +1,142 @@
+module.exports = {
+  extends: [
+    "eslint-config-mitodl",
+    "eslint-config-mitodl/jest",
+    "plugin:styled-components-a11y/recommended",
+    "plugin:import/typescript",
+    "plugin:mdx/recommended",
+    "prettier",
+  ],
+  plugins: ["testing-library", "import", "styled-components-a11y"],
+  ignorePatterns: ["**/build/**"],
+  settings: {
+    "jsx-a11y": {
+      components: {
+        "ListCard.Image": "img",
+        "Card.Image": "img",
+        Button: "button",
+        ButtonLink: "a",
+        ActionButton: "button",
+        ActionButtonLink: "a",
+      },
+    },
+  },
+  rules: {
+    ...restrictedImports(),
+    // This rule is disabled in the default a11y config, but unclear why.
+    // It does catch useful errors, e.g., buttons with no text or label.
+    // If it proves to be flaky, we can find other ways to check for this.
+    // We need both rules below. One for normal elements, one for styled
+    "jsx-a11y/control-has-associated-label": ["error"],
+    "styled-components-a11y/control-has-associated-label": ["error"],
+    "@typescript-eslint/triple-slash-reference": [
+      "error",
+      {
+        path: "never",
+        types: "prefer-import",
+        lib: "never",
+      },
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: [
+          "**/*.test.ts",
+          "**/*.test.tsx",
+          "**/src/setupJest.ts",
+          "**/jest-shared-setup.ts",
+          "**/test-utils/**",
+          "**/test-utils/**",
+          "**/webpack.config.js",
+          "**/webpack.exports.js",
+          "**/postcss.config.js",
+          "**/*.stories.ts",
+          "**/*.stories.tsx",
+          "**/*.mdx",
+          ".storybook/**",
+        ],
+      },
+    ],
+    "import/no-duplicates": "error",
+    quotes: ["error", "double", { avoidEscape: true }],
+    "no-restricted-syntax": [
+      "error",
+      /**
+       * See https://eslint.org/docs/latest/rules/no-restricted-syntax
+       *
+       * The selectors use "ES Query", a css-like syntax for AST querying. A
+       * useful tool is  https://estools.github.io/esquery/
+       */
+      {
+        selector:
+          "Property[key.name=fontWeight][value.raw=/\\d+/], TemplateElement[value.raw=/font-weight: \\d+/]",
+        message:
+          "Do not specify `fontWeight` manually. Prefer spreading `theme.typography.subtitle1` or similar. If you MUST use a fontWeight, refer to `fontWeights` theme object.",
+      },
+      {
+        selector:
+          "Property[key.name=fontFamily][value.raw=/Neue Haas/], TemplateElement[value.raw=/Neue Haas/]",
+        message:
+          "Do not specify `fontFamily` manually. Prefer spreading `theme.typography.subtitle1` or similar. If using neue-haas-grotesk-text, this is ThemeProvider's default fontFamily.",
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ["./**/*.test.{ts,tsx}"],
+      plugins: ["testing-library"],
+      extends: ["plugin:testing-library/react"],
+      rules: {
+        "testing-library/no-node-access": "off",
+      },
+    },
+  ],
+}
+
+function restrictedImports({ paths = [], patterns = [] } = {}) {
+  /**
+   * With the `no-restricted-imports` rule (and its typescript counterpart),
+   * it's difficult to restrict imports but allow a few exceptions.
+   *
+   * For example:
+   *  - forbid importing `@mui/material/*`, EXCEPT within `ol-components`.
+   *
+   * It is possible to do this using overrides.
+   *
+   * This function exists to make it easier to share config between overrides.
+   *
+   * See also:
+   *  - https://github.com/eslint/eslint/discussions/17047 no-restricted-imports: allow some specific imports in some specific directories
+   *  - https://github.com/eslint/eslint/discussions/15011 Can a rule be specified multiple times without overriding itself?
+   *
+   * This may be easier if we swtich to ESLint's new "flat config" system.
+   */
+  return {
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          /**
+           * No direct imports from large "barrel files". They make Jest slow.
+           *
+           * For more, see:
+           *  - https://github.com/jestjs/jest/issues/11234
+           *  - https://github.com/faker-js/faker/issues/1114#issuecomment-1169532948
+           */
+          {
+            name: "@faker-js/faker",
+            message: "Please use @faker-js/faker/locale/en instead.",
+            allowTypeImports: true,
+          },
+          {
+            name: "@mui/material",
+            message: "Please use @mui/material/<COMPONENT_NAME> instead.",
+            allowTypeImports: true,
+          },
+          ...paths,
+        ],
+        patterns: [...patterns],
+      },
+    ],
+  }
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+on: [push]
+jobs:
+  javascript-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        with:
+          node-version: "^22"
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Format
+        run: yarn run fmt-check
+
+      - name: Lints
+        run: yarn run lint-check
+
+      - name: Typecheck
+        run: yarn typecheck
+
+      - name: Tests
+        run: yarn test
+        env:
+          CODECOV: true
+          NODE_ENV: test
+
+  build-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        with:
+          node-version: "^22"
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build Storybook
+        run: yarn build-storybook

package/.github/workflows/publish-pages.yml

@@ -0,0 +1,50 @@
+name: Publish Storybook
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: [main, cc/initial]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4
+        with:
+          node-version: "^20"
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
+        with:
+          path: ./storybook-static
+
+  deploy:
+    needs: build
+
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4

package/.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+on:
+  workflow_dispatch: # manual trigger
+
+permissions:
+  contents: read # for checkout
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # to be able to publish a GitHub release
+      issues: write # to be able to comment on released issues
+      pull-requests: write # to be able to comment on released pull requests
+      id-token: write # to enable use of OIDC for npm provenance
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npx semantic-release

package/.github/workflows/validate-pr.yml

@@ -0,0 +1,49 @@
+name: "Lint PR"
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Please ensure that your PR title follows [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). It looks like your proposed title needs to be adjusted.
+
+            ```
+            feat: Add variant `outlined` to Button component
+            feat!: Remove variant `filled` from Button component
+            bug: Fix TextField hover efffect.
+            ```
+            *Note: `!` denotes a breaking change*.
+
+            Action failure details:
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true

package/.pre-commit-config.yaml

@@ -0,0 +1,90 @@
+---
+# See https://pre-commit.com for more information
+# See https://pre-commit.com/hooks.html for more hooks
+ci:
+  skip:
+    # Because these are local hooks it seems like they won't easily run in pre-commit CI
+    - eslint
+    - prettier
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+        exclude: ".hbs$"
+      - id: check-yaml
+      - id: check-added-large-files
+        exclude: "yarn.lock|.yarn/releases/.*|frontends/.yarn/releases/.*"
+      - id: check-merge-conflict
+      - id: check-toml
+      - id: debug-statements
+  - repo: local
+    hooks:
+      - id: prettier
+        name: prettier
+        entry: yarn fmt-fix
+        language: node
+        types_or:
+          [
+            javascript,
+            jsx,
+            ts,
+            tsx,
+            json,
+            scss,
+            sass,
+            css,
+            yaml,
+            markdown,
+            html,
+          ]
+  - repo: https://github.com/scop/pre-commit-shfmt
+    rev: v3.10.0-1
+    hooks:
+      - id: shfmt
+  - repo: https://github.com/adrienverge/yamllint.git
+    rev: v1.35.1
+    hooks:
+      - id: yamllint
+        args: [--format, parsable, -d, relaxed]
+  - repo: https://github.com/Yelp/detect-secrets
+    rev: v1.5.0
+    hooks:
+      - id: detect-secrets
+        args:
+          - --baseline
+          - .secrets.baseline
+          - --exclude-files
+          - .yarn/
+          - --exclude-files
+          - cassettes/
+          - --exclude-files
+          - test_json/
+          - --exclude-files
+          - ".*_test.py"
+          - --exclude-files
+          - "test_.*.py"
+          - --exclude-files
+          - poetry.lock
+          - --exclude-files
+          - yarn.lock
+          - --exclude-files
+          - ".*/generated/"
+        additional_dependencies: ["gibberish-detector"]
+  - repo: local
+    hooks:
+      - id: eslint
+        name: eslint
+        description: "Lint JS/TS files and apply automatic fixes"
+        entry: npx eslint --fix
+        language: node
+        types_or: [javascript, jsx, ts, tsx]
+        args: []
+        exclude: "(node_modules/|.yarn/)"
+        require_serial: false
+  - repo: https://github.com/shellcheck-py/shellcheck-py
+    rev: v0.10.0.1
+    hooks:
+      - id: shellcheck
+        args: ["--severity=warning"]

package/.prettierignore

@@ -0,0 +1 @@
+.yarn/

package/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "semi": false
+}

package/.releaserc.json

@@ -0,0 +1,40 @@
+{
+  "branches": ["+([0-9])?(.{+([0-9]),x}).x", "main"],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits",
+        "presetConfig": {
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Bug Fixes"
+            },
+            {
+              "type": "chore",
+              "section": "Miscellaneous"
+            },
+            {
+              "type": "docs",
+              "section": "Miscellaneous"
+            }
+          ]
+        }
+      }
+    ],
+    "@semantic-release/github",
+    "@semantic-release/npm"
+  ],
+  "repositoryUrl": "git@github.com:mitodl/smoot-design.git"
+}

package/.secrets.baseline

@@ -0,0 +1,113 @@
+{
+  "version": "1.4.0",
+  "plugins_used": [
+    {
+      "name": "ArtifactoryDetector"
+    },
+    {
+      "name": "AWSKeyDetector"
+    },
+    {
+      "name": "AzureStorageKeyDetector"
+    },
+    {
+      "name": "Base64HighEntropyString",
+      "limit": 4.5
+    },
+    {
+      "name": "BasicAuthDetector"
+    },
+    {
+      "name": "CloudantDetector"
+    },
+    {
+      "name": "DiscordBotTokenDetector"
+    },
+    {
+      "name": "GitHubTokenDetector"
+    },
+    {
+      "name": "HexHighEntropyString",
+      "limit": 3.0
+    },
+    {
+      "name": "IbmCloudIamDetector"
+    },
+    {
+      "name": "IbmCosHmacDetector"
+    },
+    {
+      "name": "JwtTokenDetector"
+    },
+    {
+      "name": "KeywordDetector",
+      "keyword_exclude": ""
+    },
+    {
+      "name": "MailchimpDetector"
+    },
+    {
+      "name": "NpmDetector"
+    },
+    {
+      "name": "PrivateKeyDetector"
+    },
+    {
+      "name": "SendGridDetector"
+    },
+    {
+      "name": "SlackDetector"
+    },
+    {
+      "name": "SoftlayerDetector"
+    },
+    {
+      "name": "SquareOAuthDetector"
+    },
+    {
+      "name": "StripeDetector"
+    },
+    {
+      "name": "TwilioKeyDetector"
+    }
+  ],
+  "filters_used": [
+    {
+      "path": "detect_secrets.filters.allowlist.is_line_allowlisted"
+    },
+    {
+      "path": "detect_secrets.filters.common.is_ignored_due_to_verification_policies",
+      "min_level": 2
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_indirect_reference"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_likely_id_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_lock_file"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_not_alphanumeric_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_potential_uuid"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_prefixed_with_dollar_sign"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_sequential_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_swagger_file"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_templated_secret"
+    }
+  ],
+  "results": {
+  },
+  "generated_at": "2024-11-12T20:55:24Z"
+}

package/.storybook/main.ts

@@ -0,0 +1,46 @@
+import { join, dirname } from "path"
+import { StorybookConfig } from "@storybook/react-webpack5"
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")))
+}
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
+
+  framework: "@storybook/react-webpack5",
+
+  staticDirs: ["./public"],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+  ],
+
+  webpackFinal: async (config) => {
+    if (!config?.resolve) {
+      throw new Error("Expected config.resolve to be defined")
+    }
+    config.resolve.plugins = [new TsconfigPathsPlugin()]
+    return config
+  },
+
+  typescript: {
+    /**
+     * Note: In theory react-docgen-typescript should work better with TS, but
+     * it seems not to work particularly well:
+     *  - misses many props
+     *  - doesn't get docstrings from the source component
+     */
+    // reactDocgen: "react-docgen-typescript",
+  },
+}
+
+export default config

package/.storybook/manager-head.html

@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />

package/.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<!--
+      Font files for Adobe Neue Haas Grotesk.
+      WARNING: This is linked to chudzick@mit.edu's Adobe account.
+  -->
+<link rel="stylesheet" href="https://use.typekit.net/lbk1xay.css" />

package/.storybook/preview.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+import { Preview } from "@storybook/react"
+import { ThemeProvider } from "../src/components/ThemeProvider/ThemeProvider"
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+}
+
+export default preview