diff --git a/package.json b/package.json index 6b23839..5bc05f0 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "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", + "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", "lint-check": "eslint src/ .storybook/", "lint-fix": "yarn lint-check --fix", "fmt-check": "prettier --ignore-path .gitignore --ignore-path .prettierignore --check .", @@ -37,6 +38,11 @@ "types": "./dist/esm/index.d.ts", "default": "./dist/esm/index.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": { diff --git a/src/components/ThemeProvider/ThemeProvider.tsx b/src/components/ThemeProvider/ThemeProvider.tsx index 509c054..485829c 100644 --- a/src/components/ThemeProvider/ThemeProvider.tsx +++ b/src/components/ThemeProvider/ThemeProvider.tsx @@ -9,7 +9,6 @@ import * as typography from "./typography" import * as buttons from "./buttons" import * as chips from "./chips" import { colors } from "./colors" -import type { CustomTheme } from "../../types/theme" const shadow = { shadowOffsetX: 3, @@ -94,10 +93,6 @@ const defaultThemeOptions: ThemeOptions = { }, } -type ExtendedTheme = Theme & { - custom: CustomTheme -} - /** * Create a customized Smoot Design theme for use with `ThemeProvider`. * @@ -106,7 +101,7 @@ type ExtendedTheme = Theme & { */ const createTheme = (options?: { custom: Partial -}): ExtendedTheme => +}): Theme => muiCreateTheme({ ...defaultThemeOptions, custom: { diff --git a/src/index.ts b/src/index.ts index d466939..48205da 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,4 @@ "use client" -/// -/// export { default as styled } from "@emotion/styled" export { css, Global } from "@emotion/react" diff --git a/src/type-augmentation/TypescriptDocs.mdx b/src/type-augmentation/TypescriptDocs.mdx new file mode 100644 index 0000000..109fa97 --- /dev/null +++ b/src/type-augmentation/TypescriptDocs.mdx @@ -0,0 +1,17 @@ +import { Meta } from "@storybook/blocks" + + + +# 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) diff --git a/src/type-augmentation/index.d.ts b/src/type-augmentation/index.d.ts new file mode 100644 index 0000000..c0a2e88 --- /dev/null +++ b/src/type-augmentation/index.d.ts @@ -0,0 +1,2 @@ +import "./theme" +import "./typography" diff --git a/src/types/theme.d.ts b/src/type-augmentation/theme.d.ts similarity index 97% rename from src/types/theme.d.ts rename to src/type-augmentation/theme.d.ts index 88cf900..d744e69 100644 --- a/src/types/theme.d.ts +++ b/src/type-augmentation/theme.d.ts @@ -1,7 +1,6 @@ import type { Theme as MuiTheme } from "@mui/material/styles" import "@emotion/react" import "@emotion/styled" -import "./typography" export interface ColorGroup { main: string @@ -9,7 +8,7 @@ export interface ColorGroup { contrastText: string } -interface CustomTheme { +export interface CustomTheme { transitionDuration: string shadow: string colors: { diff --git a/src/types/typography.d.ts b/src/type-augmentation/typography.d.ts similarity index 100% rename from src/types/typography.d.ts rename to src/type-augmentation/typography.d.ts