@mitodl/smoot-design 0.0.0-preview215f7ae3fa

package/dist/type-augmentation/TypescriptDocs.mdx

@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Smoot-Design/Typescript" />
+
+# Type Augmentation
+
+Smoot Design uses Typescript's module augmentation to enhance types provided by `@emotion` and `@mui` packages. For example, we add custom theme properties (`theme.custom`) to the default theme and add new properties / values to some MUI components.
+
+To enable this module augmentation in a consuming application or library, either:
+
+- **Method 1:** `"@mitodl/smoot-design/type-augmentation"` to the `"types"` array in the `tsconfig.json` file, or
+- **Method 2:** add `import "@mitodl/smoot-design/type-augmentation";` to a `global.d.ts` file.
+
+For more information on this subject, see:
+
+- TS Documenation: [Declaration Merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)
+- MUI Documentation: [Theming/Typescript](https://mui.com/material-ui/customization/theming/#typescript)

package/dist/type-augmentation/index.d.ts

@@ -0,0 +1,2 @@
+import "./theme"
+import "./typography"

package/dist/type-augmentation/theme.d.ts

@@ -0,0 +1,103 @@
+import type { Theme as MuiTheme } from "@mui/material/styles"
+import "@emotion/react"
+import "@emotion/styled"
+
+export interface ColorGroup {
+  main: string
+  highlight: string
+  contrastText: string
+}
+
+export interface CustomTheme {
+  colors: {
+    mitRed: string
+    silverGray: string
+    brightRed: string
+    black: string
+    white: string
+    darkGray2: string
+    darkGray1: string
+    silverGrayDark: string
+    silverGrayLight: string
+    lightGray2: string
+    lightGray1: string
+    navGray: string
+    darkPink: string
+    pink: string
+    lightPink: string
+    darkPurple: string
+    purple: string
+    lightPurple: string
+    darkBlue: string
+    blue: string
+    lightBlue: string
+    darkGreen: string
+    green: string
+    lightGreen: string
+    darkRed: string
+    red: string
+    lightRed: string
+    orange: string
+    yellow: string
+  }
+  dimensions: {
+    headerHeight: string
+    headerHeightSm: string
+  }
+  LinkAdapter?: React.ElementType
+}
+
+/* https://mui.com/material-ui/customization/theming/#typescript */
+declare module "@mui/material/styles" {
+  interface Theme {
+    custom: CustomTheme
+  }
+
+  interface ThemeOptions {
+    custom: CustomTheme
+  }
+
+  interface PaletteColor {
+    active?: string
+  }
+
+  interface SimplePaletteColorOptions {
+    active?: string
+  }
+}
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsSizeOverrides {
+    medium: false
+  }
+}
+
+declare module "@mui/material/InputBase" {
+  interface InputBasePropsSizeOverrides {
+    hero: true
+    large: true
+  }
+}
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsSizeOverrides {
+    large: true
+    medium: true
+    small: false
+  }
+
+  interface ChipPropsVariantOverrides {
+    filled: true
+    outlined: true
+    outlinedWhite: true
+    dark: true
+    darker: true
+    gray: true
+  }
+}
+
+declare module "@emotion/react" {
+  export interface Theme extends MuiTheme {
+    custom: CustomTheme
+  }
+}

package/dist/type-augmentation/typography.d.ts

@@ -0,0 +1,54 @@
+import "@mui/material/styles"
+
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    h1: React.CSSProperties
+    h2: React.CSSProperties
+    h3: React.CSSProperties
+    h4: React.CSSProperties
+    h5: React.CSSProperties
+    body1: React.CSSProperties
+    body2: React.CSSProperties
+    body3: React.CSSProperties
+    body4: React.CSSProperties
+    subtitle1: React.CSSProperties
+    subtitle2: React.CSSProperties
+    subtitle3: React.CSSProperties
+    subtitle4: React.CSSProperties
+    buttonLarge: React.CSSProperties
+    button: React.CSSProperties
+    buttonSmall: React.CSSProperties
+  }
+  interface TypographyVariantsOptions {
+    h1: React.CSSProperties
+    h2: React.CSSProperties
+    h3: React.CSSProperties
+    h4: React.CSSProperties
+    h5: React.CSSProperties
+    body1: React.CSSProperties
+    body2: React.CSSProperties
+    body3: React.CSSProperties
+    body4: React.CSSProperties
+    subtitle1: React.CSSProperties
+    subtitle2: React.CSSProperties
+    subtitle3: React.CSSProperties
+    subtitle4: React.CSSProperties
+    buttonLarge: React.CSSProperties
+    button: React.CSSProperties
+    buttonSmall: React.CSSProperties
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body1: true
+    body2: true
+    body3: true
+    body4: true
+    subtitle1: true
+    subtitle2: true
+    subtitle3: true
+    subtitle4: true
+    button: true
+  }
+}

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "@mitodl/smoot-design",
+  "version": "0.0.0-preview215f7ae3fa",
+  "packageManager": "yarn@4.5.3",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mitodl/smoot-design"
+  },
+  "scripts": {
+    "start": "storybook dev -p 6006 --docs",
+    "bundle-preview": "yarn build && cp -r dist/bundles bundle-preview/static/smoot-design && npx serve bundle-preview",
+    "build-storybook": "storybook build --docs",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build:bundles": "vite build --outDir dist/bundles",
+    "build:type-augmentation": "cp -r src/type-augmentation dist/type-augmentation",
+    "build": "rm -rf dist && rm -f .tsbuildinfo && npm run build:esm && npm run build:cjs && npm run build:type-augmentation && yarn build:bundles",
+    "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 .",
+    "prepack": "yarn build"
+  },
+  "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"
+      }
+    },
+    "./ai": {
+      "import": {
+        "types": "./dist/esm/ai.d.ts",
+        "default": "./dist/esm/ai.js"
+      },
+      "require": {
+        "types": "./dist/cjs/ai.d.ts",
+        "default": "./dist/cjs/ai.js"
+      },
+      "default": {
+        "types": "./dist/esm/ai.d.ts",
+        "default": "./dist/esm/ai.js"
+      }
+    },
+    "./type-augmentation": {
+      "import": "./dist/type-augmentation/index.d.ts",
+      "require": "./dist/type-augmentation/index.d.ts",
+      "default": "./dist/type-augmentation/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/base": "5.0.0-beta.67",
+    "@mui/lab": "6.0.0-beta.20",
+    "@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",
+    "ai": "^4.0.13",
+    "classnames": "^2.5.1",
+    "lodash": "^4.17.21",
+    "react-markdown": "^9.0.1",
+    "tiny-invariant": "^1.3.1",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@faker-js/faker": "^9.0.0",
+    "@jest/environment": "^29.7.0",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/nextjs": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/types": "^8.4.7",
+    "@swc/jest": "^0.2.37",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/lodash": "^4.17.13",
+    "@types/react-dom": "^19.0.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": "^5.0.0",
+    "eslint-plugin-styled-components-a11y": "^2.1.35",
+    "eslint-plugin-testing-library": "^7.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-extended": "^4.0.2",
+    "jest-fail-on-console": "^3.3.1",
+    "jest-watch-typeahead": "^2.2.2",
+    "next": "^15.0.2",
+    "prettier": "^3.3.3",
+    "react": "19.0.0",
+    "react-dom": "^19.0.0",
+    "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",
+    "vite": "^6.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}