@mitodl/smoot-design 1.0.0

package/.yarnrc.yml

@@ -0,0 +1,23 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.1.cjs
+
+# https://github.com/vitejs/vite-plugin-react-swc/issues/74#issuecomment-1520484130
+# https://github.com/swc-project/swc/issues/5616#issuecomment-1265639797
+# This setting ensures we always install the Linux binaries when running `yarn install`. This is needed for running
+# swc natively in Docker (addresses swc-loader bindings not found error).
+supportedArchitectures:
+  os:
+    - current
+    - linux
+  cpu:
+    - current
+    - x64
+    - arm64
+  libc:
+    - current
+    - glibc

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, MIT Office of Digital Learning
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,13 @@
+# smoot-design
+
+Design system components for MITODL Projects
+
+## Development and Release
+
+All PR titles and commits to `main` should use the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) format. During release, the types of commits included since the last release inform what sort of version bump should be made. For example, bugfixes yield a new patch version, whereas breaking changes trigger a major version bump.
+
+To trigger a release, run the "Release" github action. Using [semantic-release](https://semantic-release.gitbook.io/semantic-release), this action will:
+
+1. Inspect the commit history since previous release for [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) an
+2. Determine whether the version bump should be major, minor, or patch based on commit types. Breaking changes (e.g., `feat!: remove Button variant 'outlined'`) will result in major version bumps.
+3. Publish the package to NPM and the repository's [Github Releases](https://github.com/mitodl/smoot-design/releases).

package/jest.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from "@jest/types"
+
+const config: Config.InitialOptions = {
+  collectCoverage: true,
+  coverageDirectory: "coverage",
+  watchPlugins: [
+    "jest-watch-typeahead/filename",
+    "jest-watch-typeahead/testname",
+  ],
+  setupFilesAfterEnv: ["./jest-setup.ts"],
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.(t|j)sx?$": "@swc/jest",
+  },
+  moduleNameMapper: {
+    "\\.(svg|jpg|jpeg|png)$": "ol-test-utilities/filemocks/imagemock.js",
+    "\\.(css|scss)$": "ol-test-utilities/filemocks/filemock.js",
+  },
+  rootDir: "./src",
+}
+
+export default config

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@mitodl/smoot-design",
+  "version": "1.0.0",
+  "packageManager": "yarn@4.5.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mitodl/smoot-design"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --docs",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build": "rm -rf dist && rm -f .tsbuildinfo && npm run build:esm && npm run build:cjs",
+    "lint-check": "eslint src/ .storybook/",
+    "lint-fix": "yarn lint-check --fix",
+    "fmt-check": "prettier --ignore-path .gitignore --ignore-path .prettierignore --check .",
+    "fmt-fix": "prettier --ignore-path .gitignore --ignore-path .prettierignore --write ."
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "default": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "5.0.0-beta.61",
+    "@mui/lab": "6.0.0-beta.14",
+    "@mui/material": "^6.1.6",
+    "@mui/material-nextjs": "^6.1.6",
+    "@mui/system": "^6.1.6",
+    "@remixicon/react": "^4.2.0",
+    "@types/jest": "^29.5.14",
+    "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
+    "material-ui-popup-state": "^5.1.0",
+    "tiny-invariant": "^1.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@faker-js/faker": "^9.0.0",
+    "@storybook/addon-actions": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/nextjs": "^8.4.2",
+    "@storybook/preview-api": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@storybook/types": "^8.4.2",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/lodash": "^4.17.13",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/typescript-estree": "^8.13.0",
+    "conventional-changelog-conventionalcommits": "^8.0.0",
+    "eslint": "8.57.1",
+    "eslint-config-mitodl": "^2.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-mdx": "^3.0.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-styled-components-a11y": "^2.1.35",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-extended": "^4.0.2",
+    "jest-fail-on-console": "^3.2.0",
+    "jest-watch-typeahead": "^2.2.2",
+    "next": "^15.0.2",
+    "prettier": "^3.3.3",
+    "react": "18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2",
+    "semantic-release": "^24.2.0",
+    "storybook": "^8.4.2",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "type-fest": "^4.26.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

package/src/components/Button/ActionButton.stories.tsx

@@ -0,0 +1,186 @@
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { ActionButton, ActionButtonLink, DEFAULT_PROPS } from "./Button"
+import type { ActionButtonProps } from "./Button"
+import Grid from "@mui/material/Grid2"
+import Stack from "@mui/material/Stack"
+import {
+  RiArrowLeftLine,
+  RiDeleteBinLine,
+  RiTestTubeLine,
+} from "@remixicon/react"
+
+import { fn } from "@storybook/test"
+import { enumValues, docsEnum } from "@/story-utils"
+
+const ICONS = {
+  None: undefined,
+  ArrowBackIcon: <RiArrowLeftLine />,
+  DeleteIcon: <RiDeleteBinLine />,
+  TestTubeIcon: <RiTestTubeLine />,
+}
+
+const VARIANTS = enumValues<NonNullable<ActionButtonProps["variant"]>>({
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  text: true,
+  unstable_noBorder: true,
+  unstable_inverted: true,
+  unstable_success: true,
+})
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"))
+const SIZES = enumValues<NonNullable<ActionButtonProps["size"]>>({
+  small: true,
+  medium: true,
+  large: true,
+})
+const EDGES = enumValues<NonNullable<ActionButtonProps["edge"]>>({
+  circular: true,
+  rounded: true,
+  none: true,
+})
+
+const meta: Meta<typeof ActionButton> = {
+  title: "smoot-design/ActionButton",
+  component: ActionButton,
+  argTypes: {
+    variant: {
+      options: VARIANTS,
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(VARIANTS) },
+        defaultValue: { summary: DEFAULT_PROPS.variant },
+      },
+    },
+    size: {
+      options: SIZES,
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(SIZES) },
+        defaultValue: { summary: DEFAULT_PROPS.size },
+      },
+    },
+    edge: {
+      options: EDGES,
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(EDGES) },
+        defaultValue: { summary: DEFAULT_PROPS.edge },
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ActionButton>
+
+export const VariantsAndEdge: Story = {
+  render: (args) => (
+    <>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <ActionButton {...args} edge="none" variant="primary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="none" variant="secondary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="none" variant="tertiary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="none" variant="text">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+      </Stack>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <ActionButton {...args} edge="rounded" variant="primary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="rounded" variant="secondary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="rounded" variant="tertiary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="rounded" variant="text">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+      </Stack>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <ActionButton {...args} edge="circular" variant="primary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="circular" variant="secondary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="circular" variant="tertiary">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+        <ActionButton {...args} edge="circular" variant="text">
+          {ICONS.DeleteIcon}
+        </ActionButton>
+      </Stack>
+    </>
+  ),
+  tags: ["main"],
+}
+
+export const Showcase: Story = {
+  render: (args) => (
+    <Grid container sx={{ maxWidth: "750px" }} rowGap={2}>
+      {STABLE_VARIANTS.flatMap((variant) =>
+        EDGES.flatMap((edge) => (
+          <React.Fragment key={`${variant}-${edge}`}>
+            <Grid size={{ xs: 12, sm: 3 }} alignItems="center">
+              <code>
+                variant={variant}
+                <br />
+                edge={edge}
+              </code>
+            </Grid>
+            {SIZES.flatMap((size) =>
+              Object.entries(ICONS)
+                .filter(([_key, icon]) => icon)
+                .map(([iconKey, icon]) => (
+                  <Grid size={{ xs: 4, sm: 1 }} key={`${size}-${iconKey}`}>
+                    <ActionButton
+                      variant={variant}
+                      edge={edge}
+                      size={size}
+                      {...args}
+                    >
+                      {icon}
+                    </ActionButton>
+                  </Grid>
+                )),
+            )}
+          </React.Fragment>
+        )),
+      )}
+    </Grid>
+  ),
+}
+
+export const Links: Story = {
+  render: () => (
+    <Stack direction="row" gap={2} sx={{ my: 2 }}>
+      <ActionButtonLink href="#fake" variant="primary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="secondary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="tertiary">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+      <ActionButtonLink href="#fake" variant="text">
+        {ICONS.DeleteIcon}
+      </ActionButtonLink>
+    </Stack>
+  ),
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,275 @@
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button, ButtonLink, DEFAULT_PROPS } from "./Button"
+import type { ButtonProps } from "./Button"
+import Grid from "@mui/material/Grid2"
+import Stack from "@mui/material/Stack"
+import {
+  RiArrowLeftLine,
+  RiDeleteBinLine,
+  RiTestTubeLine,
+  RiMailLine,
+} from "@remixicon/react"
+
+import { fn } from "@storybook/test"
+import { docsEnum, enumValues } from "@/story-utils"
+
+const ICONS = {
+  None: undefined,
+  ArrowBackIcon: <RiArrowLeftLine />,
+  DeleteIcon: <RiDeleteBinLine />,
+  TestTubeIcon: <RiTestTubeLine />,
+}
+
+const VARIANTS = enumValues<NonNullable<ButtonProps["variant"]>>({
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  text: true,
+  unstable_noBorder: true,
+  unstable_inverted: true,
+  unstable_success: true,
+})
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"))
+const SIZES = enumValues<NonNullable<ButtonProps["size"]>>({
+  small: true,
+  medium: true,
+  large: true,
+})
+const EDGES = enumValues<NonNullable<ButtonProps["edge"]>>({
+  circular: true,
+  rounded: true,
+  none: true,
+})
+
+const meta: Meta<typeof Button> = {
+  title: "smoot-design/Button",
+  component: Button,
+  argTypes: {
+    variant: {
+      options: VARIANTS,
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(VARIANTS) },
+        defaultValue: { summary: DEFAULT_PROPS.variant },
+      },
+    },
+    size: {
+      options: SIZES,
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(SIZES) },
+        defaultValue: { summary: DEFAULT_PROPS.size },
+      },
+    },
+    edge: {
+      options: ["circular", "rounded"],
+      control: { type: "select" },
+      table: {
+        type: { summary: docsEnum(EDGES) },
+        defaultValue: { summary: DEFAULT_PROPS.edge },
+      },
+    },
+    startIcon: {
+      options: Object.keys(ICONS),
+      mapping: ICONS,
+    },
+    endIcon: {
+      options: Object.keys(ICONS),
+      mapping: ICONS,
+    },
+    responsive: {
+      table: {
+        defaultValue: { summary: DEFAULT_PROPS.responsive.toString() },
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const VariantsAndEdge: Story = {
+  render: (args) => (
+    <>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <Button edge="none" variant="primary" {...args}>
+          Primary
+        </Button>
+        <Button edge="none" variant="secondary" {...args}>
+          Secondary
+        </Button>
+        <Button edge="none" variant="tertiary" {...args}>
+          Tertiary
+        </Button>
+        <Button edge="none" variant="text" {...args}>
+          Text
+        </Button>
+      </Stack>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <Button edge="rounded" variant="primary" {...args}>
+          Primary
+        </Button>
+        <Button edge="rounded" variant="secondary" {...args}>
+          Secondary
+        </Button>
+        <Button edge="rounded" variant="tertiary" {...args}>
+          Tertiary
+        </Button>
+        <Button edge="rounded" variant="text" {...args}>
+          Text
+        </Button>
+      </Stack>
+      <Stack direction="row" gap={2} sx={{ my: 2 }}>
+        <Button edge="circular" variant="primary" {...args}>
+          Primary
+        </Button>
+        <Button edge="circular" variant="secondary" {...args}>
+          Secondary
+        </Button>
+        <Button edge="circular" variant="tertiary" {...args}>
+          Tertiary
+        </Button>
+        <Button edge="circular" variant="text" {...args}>
+          Text
+        </Button>
+      </Stack>
+    </>
+  ),
+  tags: ["main"],
+}
+
+const RESPONSIVE = [true, false]
+
+export const Sizes: Story = {
+  argTypes: {
+    size: { table: { disable: true } },
+  },
+  render: (args) => (
+    <Grid container sx={{ my: 2, maxWidth: "600px" }} alignItems="center">
+      {RESPONSIVE.flatMap((responsive) => {
+        return (
+          <React.Fragment key={String(responsive)}>
+            <Grid size={{ xs: 12 }}>
+              <code>{`responsive={${responsive.toString()}}`}</code>
+            </Grid>
+            {SIZES.map((size) => (
+              <Grid
+                size={{ xs: 4 }}
+                gap={2}
+                display="flex"
+                alignItems="center"
+                key={size}
+              >
+                <Button {...args} size={size} responsive={responsive}>
+                  {size}
+                </Button>
+              </Grid>
+            ))}
+          </React.Fragment>
+        )
+      })}
+    </Grid>
+  ),
+}
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <Stack direction="column" alignItems="start" gap={2} sx={{ my: 2 }}>
+      {Object.entries(ICONS).map(([key, icon]) => (
+        <Button {...args} startIcon={icon} key={key}>
+          {key}
+        </Button>
+      ))}
+    </Stack>
+  ),
+}
+
+const EXTRA_PROPS = [
+  {},
+  /**
+   * Show RiTestTubeLine because it is a fairly thin icon
+   */
+  { startIcon: <RiTestTubeLine /> },
+  /**
+   * Show RiTestTubeLine because it is a fairly thick icon
+   */
+  { startIcon: <RiMailLine /> },
+  { endIcon: <RiTestTubeLine /> },
+  { endIcon: <RiMailLine /> },
+]
+
+/**
+ * `ButtonLink` is a styled `Button` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+export const Links: Story = {
+  render: () => (
+    <Stack direction="row" gap={2} sx={{ my: 2 }}>
+      <ButtonLink href="#fake" variant="primary">
+        Link
+      </ButtonLink>
+      <ButtonLink href="#fake" variant="secondary">
+        Link
+      </ButtonLink>
+      <ButtonLink href="#fake" variant="tertiary">
+        Link
+      </ButtonLink>
+      <ButtonLink href="#fake" variant="text">
+        Link
+      </ButtonLink>
+    </Stack>
+  ),
+}
+export const Showcase: Story = {
+  render: (args) => (
+    <Grid container rowGap={2} sx={{ maxWidth: "600px" }}>
+      {STABLE_VARIANTS.flatMap((variant) =>
+        EDGES.flatMap((edge) =>
+          EXTRA_PROPS.map((extraProps, i) => {
+            return (
+              <React.Fragment key={`${variant}-${edge}-${i}`}>
+                <Grid size={{ xs: 3 }}>
+                  <pre>
+                    variant={variant}
+                    <br />
+                    edge={edge}
+                  </pre>
+                </Grid>
+                {SIZES.map((size) => (
+                  <Grid
+                    size={{ xs: 3 }}
+                    display="flex"
+                    alignItems="center"
+                    key={`${size}`}
+                  >
+                    <Button
+                      {...args}
+                      variant={variant}
+                      edge={edge}
+                      size={size}
+                      {...extraProps}
+                    >
+                      {args.children}
+                    </Button>
+                  </Grid>
+                ))}
+              </React.Fragment>
+            )
+          }),
+        ),
+      )}
+    </Grid>
+  ),
+  args: {
+    children: "Click me",
+  },
+}