@mitodl/smoot-design 0.0.0-0a23f44

package/dist/esm/components/TabButtons/TabButtonList.stories.js

@@ -0,0 +1,136 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from "react";
+import { useState } from "react";
+import { TabButtonList, TabButton, TabButtonLink } from "./TabButtonList";
+import TabContext from "@mui/lab/TabContext";
+import { Button } from "../Button/Button";
+import Stack from "@mui/material/Stack";
+import TabPanel from "@mui/lab/TabPanel";
+import Typography from "@mui/material/Typography";
+import { faker } from "@faker-js/faker/locale/en";
+import Container from "@mui/material/Container";
+const meta = {
+    title: "smoot-design/TabButtons",
+    argTypes: {
+        variant: {
+            options: ["scrollable", "fullWidth", "standard"],
+            control: { type: "radio" },
+        },
+        styleVariant: {
+            options: ["default", "chat"],
+            control: { type: "radio" },
+            defaultValue: "default",
+        },
+        scrollButtons: {
+            options: ["auto", true, false],
+            control: { type: "radio" },
+        },
+    },
+    args: {
+        count: 4,
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        scrollButtons: "auto",
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container, { maxWidth: "sm" },
+            React.createElement(TabContext, { value: value },
+                React.createElement(Stack, { direction: "row" },
+                    React.createElement(TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` })))),
+                    React.createElement(Stack, { direction: "row", justifyContent: "end", sx: { paddingLeft: "16px" } },
+                        React.createElement(Button, null, "Other UI"))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    faker.lorem.paragraphs(2)))))));
+    },
+};
+export default meta;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+export const ButtonTabs = {};
+/**
+ * `TabButtonList` chat style variant:
+ */
+export const ButtonTabsChatVariant = {
+    args: {
+        styleVariant: "chat",
+        variant: "fullWidth",
+        visibleScrollbar: false,
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container, { maxWidth: "sm" },
+            React.createElement(TabContext, { value: value },
+                React.createElement(Stack, { direction: "row" },
+                    React.createElement(TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` }))))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    faker.lorem.paragraphs(2)))))));
+    },
+};
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+export const ManyButtonTabs = {
+    args: {
+        count: 12,
+    },
+};
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+export const LinkTabs = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+            navigation: {
+                pathname: "/#link2",
+            },
+        },
+    },
+    render: () => {
+        const [hash, setHash] = useState(() => window.location.hash);
+        React.useEffect(() => {
+            const handler = () => setHash(window.location.hash);
+            window.addEventListener("hashchange", handler);
+            return () => {
+                window.removeEventListener("hashchange", handler);
+            };
+        }, []);
+        return (React.createElement("div", null,
+            "Current Location:",
+            React.createElement("pre", null, hash),
+            React.createElement(TabContext, { value: hash },
+                React.createElement(TabButtonList, null,
+                    React.createElement(TabButtonLink, { value: "#link1", href: "#link1", label: "Tab 1" }),
+                    React.createElement(TabButtonLink, { value: "#link2", href: "#link2", label: "Tab 2" }),
+                    React.createElement(TabButtonLink, { value: "#link3", href: "#link3", label: "Tab 3" })))));
+    },
+};

package/dist/esm/components/TextField/TextField.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { InputProps } from "../Input/Input";
+import type { FormFieldWrapperProps } from "../internal/FormHelpers/FormHelpers";
+type TextFieldProps = Omit<FormFieldWrapperProps, "children"> & {
+    name: string;
+    disabled?: boolean;
+    value?: string | null;
+    size?: InputProps["size"];
+    placeholder?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    fullWidth?: boolean;
+    /**
+     * Props forwarded to root of `<Input />`
+     */
+    InputProps?: InputProps;
+} & Pick<InputProps, "type" | "startAdornment" | "endAdornment" | "multiline" | "required" | "minRows" | "inputProps">;
+/**
+ * A form field for text input. Supports labels, help text, error text, and
+ * start/end adornments. Add `multiline` for a text area.
+ *
+ * - [TextField Documentation](https://mitodl.github.io/smoot-design/https://mitodl.github.io/smoot-design/)
+ *
+ * **Note:** This component shares a name a purpose with MUI's TextField, but
+ * does not share its entire API.
+ */
+declare const TextField: React.FC<TextFieldProps>;
+export { TextField };
+export type { TextFieldProps };

package/dist/esm/components/TextField/TextField.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { Input } from "../Input/Input";
+import { FormFieldWrapper } from "../internal/FormHelpers/FormHelpers";
+/**
+ * A form field for text input. Supports labels, help text, error text, and
+ * start/end adornments. Add `multiline` for a text area.
+ *
+ * - [TextField Documentation](https://mitodl.github.io/smoot-design/https://mitodl.github.io/smoot-design/)
+ *
+ * **Note:** This component shares a name a purpose with MUI's TextField, but
+ * does not share its entire API.
+ */
+const TextField = ({ label, size, value, name, placeholder, helpText, errorText, error, required, disabled, onChange, onBlur, multiline, type, startAdornment, endAdornment, minRows, className, id, InputProps, inputProps, fullWidth, }) => {
+    return (React.createElement(FormFieldWrapper, { id: id, label: label, required: required, helpText: helpText, error: error, errorText: errorText, className: className, fullWidth: fullWidth }, (_a) => {
+        var { labelId } = _a, childProps = __rest(_a, ["labelId"]);
+        return (React.createElement(Input, Object.assign({ size: size, value: value, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, multiline: multiline, type: type, startAdornment: startAdornment, endAdornment: endAdornment, minRows: minRows, disabled: disabled, inputProps: inputProps }, InputProps, childProps)));
+    }));
+};
+export { TextField };

package/dist/esm/components/TextField/TextField.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Simple: Story;
+export declare const Sizes: Story;
+export declare const Widths: Story;
+export declare const Adornments: Story;
+export declare const States: Story;

package/dist/esm/components/TextField/TextField.stories.js

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { TextField } from "./TextField";
+import { AdornmentButton } from "../Input/Input";
+import Stack from "@mui/material/Stack";
+import Grid from "@mui/material/Grid";
+import { RiSearchLine, RiCalendarLine, RiCloseLine } from "@remixicon/react";
+import { fn } from "@storybook/test";
+import { enumValues } from "../../story-utils";
+const SIZES = enumValues({
+    small: true,
+    medium: true,
+    large: true,
+    chat: true,
+    hero: true,
+});
+const ADORNMENTS = {
+    None: undefined,
+    SearchIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiSearchLine, null))),
+    CalendarTodayIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiCalendarLine, null))),
+    CloseIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiCloseLine, null))),
+    "Close and Calendar": (React.createElement(React.Fragment, null,
+        React.createElement(AdornmentButton, null,
+            React.createElement(RiCloseLine, null)),
+        React.createElement(AdornmentButton, null,
+            React.createElement(RiCalendarLine, null)))),
+};
+const meta = {
+    title: "smoot-design/TextField",
+    component: TextField,
+    argTypes: {
+        size: {
+            options: SIZES,
+            control: { type: "select" },
+        },
+        startAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+        endAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+    },
+    args: {
+        onChange: fn(),
+        multiline: false,
+        disabled: false,
+        value: "some value",
+        placeholder: "placeholder",
+        label: "Label",
+        helpText: "Help text the quick brown fox jumps over the lazy dog",
+        errorText: "Error text the quick brown fox jumps over the lazy dog",
+    },
+};
+export default meta;
+export const Simple = {
+    render: (args) => {
+        return React.createElement(TextField, Object.assign({}, args));
+    },
+};
+export const Sizes = {
+    render: (args) => {
+        return (React.createElement(Stack, { direction: "row", gap: 1 },
+            React.createElement(TextField, Object.assign({}, args, { size: "small" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "medium" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "large" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "hero" }))));
+    },
+    argTypes: { size: { table: { disable: true } } },
+};
+export const Widths = {
+    render: (args) => {
+        return (React.createElement(Stack, { direction: "column", gap: 1 },
+            React.createElement(TextField, Object.assign({}, args, { label: "default" })),
+            React.createElement(TextField, Object.assign({}, args, { label: "fullWidth", fullWidth: true }))));
+    },
+    argTypes: { fullWidth: { table: { disable: true } } },
+};
+export const Adornments = {
+    render: (args) => {
+        const adornments = [
+            { startAdornment: ADORNMENTS.SearchIcon },
+            { endAdornment: ADORNMENTS.CloseIcon },
+            {
+                startAdornment: ADORNMENTS.SearchIcon,
+                endAdornment: ADORNMENTS["Close and Calendar"],
+            },
+        ];
+        return (React.createElement(Grid, { container: true, maxWidth: "600px", spacing: 2 }, Object.values(adornments).flatMap((props, i) => SIZES.map((size) => {
+            return (React.createElement(Grid, { item: true, xs: 6, key: `${i}-${size}` },
+                React.createElement(TextField, Object.assign({}, args, { size: size }, props))));
+        }))));
+    },
+    argTypes: {
+        startAdornment: { table: { disable: true } },
+        endAdornment: { table: { disable: true } },
+    },
+};
+export const States = {
+    render: (args) => {
+        return (React.createElement(Grid, { container: true, spacing: 2, alignItems: "top", maxWidth: "400px" },
+            React.createElement(Grid, { item: true, xs: 4 }, "Placeholder"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { value: "" }))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Default"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Required"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({ required: true }, args))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Error"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { error: true }))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Disabled"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { disabled: true })))));
+    },
+    args: {
+        placeholder: "This is placeholder text.",
+        value: "Some value",
+    },
+    argTypes: {
+        placeholder: { table: { disable: true } },
+        value: { table: { disable: true } },
+        error: { table: { disable: true } },
+        disabled: { table: { disable: true } },
+    },
+};

package/dist/esm/components/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/TextField/TextField.test.js

@@ -0,0 +1,75 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import user from "@testing-library/user-event";
+import { TextField } from "./TextField";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
+import { faker } from "@faker-js/faker/locale/en";
+describe("TextField", () => {
+    const setup = (props) => {
+        const defaults = {
+            name: "test-name",
+            value: "test-value",
+            label: "test-label",
+        };
+        const { rerender: _rerender } = render(React.createElement(TextField, Object.assign({}, defaults, props)), {
+            wrapper: ThemeProvider,
+        });
+        const rerender = (newProps) => {
+            _rerender(React.createElement(TextField, Object.assign({}, defaults, newProps)));
+        };
+        return { rerender };
+    };
+    it("Has a label", () => {
+        const label = faker.lorem.words();
+        setup({ label });
+        const input = screen.getByRole("textbox", { name: label });
+        expect(input).toBeInstanceOf(HTMLInputElement);
+    });
+    it("Marks the input as required if required", () => {
+        const label = faker.lorem.words();
+        setup({ label, required: true });
+        const input = screen.getByRole("textbox", { name: label });
+        expect(input).toBeRequired();
+    });
+    it("Emits the correct value on change", () => __awaiter(void 0, void 0, void 0, function* () {
+        const name = faker.lorem.word();
+        const value = faker.lorem.words();
+        const onChange = jest.fn();
+        setup({ name, onChange, value });
+        const input = screen.getByRole("textbox");
+        yield user.type(input, "x");
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+            target: expect.objectContaining({ name }),
+        }));
+    }));
+    it("Forwards inputProps and InputProps", () => {
+        /**
+         * NOTE: This behavior is important for integrating easily with MUI's
+         * Autocomplete component
+         */
+        const inputRef = jest.fn();
+        const InputRef = jest.fn();
+        setup({
+            inputProps: {
+                ref: inputRef,
+            },
+            InputProps: {
+                ref: InputRef,
+            },
+        });
+        expect(inputRef).toHaveBeenCalledTimes(1);
+        expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+        expect(InputRef).toHaveBeenCalledTimes(1);
+        expect(InputRef).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+    });
+});

package/dist/esm/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ThemeOptions, Theme } from "@mui/material/styles";
+/**
+ * Create a customized Smoot Design theme for use with `ThemeProvider`.
+ *
+ * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
+ * for more.
+ */
+declare const createTheme: (options?: ThemeOptions) => Theme;
+type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+};
+/**
+ *
+ * @param param0
+ * @returns
+ */
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export { ThemeProvider, createTheme };
+export type { ThemeProviderProps, Theme };

package/dist/esm/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { createTheme as muiCreateTheme, ThemeProvider as MuiThemeProvider, } from "@mui/material/styles";
+import * as typography from "./typography";
+import * as buttons from "./buttons";
+import * as chips from "./chips";
+import { colors } from "./colors";
+import deepmerge from "@mui/utils/deepmerge";
+const custom = {
+    colors,
+    dimensions: {
+        headerHeight: "72px",
+        headerHeightSm: "60px",
+    },
+};
+const BREAKPOINTS = {
+    values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1272 + 48,
+        xl: 1536,
+    },
+};
+const defaultThemeOptions = {
+    custom: custom,
+    palette: {
+        primary: {
+            main: colors.mitRed,
+            light: colors.lightRed,
+            active: colors.red,
+            contrastText: colors.white,
+        },
+        secondary: {
+            light: colors.darkGray2,
+            active: colors.silverGrayDark,
+            main: colors.black,
+            contrastText: colors.white,
+        },
+    },
+    shape: {
+        borderRadius: 8,
+    },
+    spacing: 8,
+    typography: typography.globalSettings,
+    breakpoints: BREAKPOINTS,
+    components: {
+        MuiButtonBase: buttons.buttonBaseComponent,
+        MuiTypography: typography.component,
+        MuiMenu: {
+            styleOverrides: { paper: { borderRadius: "4px" } },
+        },
+        MuiAutocomplete: {
+            styleOverrides: {
+                paper: { borderRadius: "4px" },
+                // Mui puts paddingRight: 2px, marginRight: -2px on the popupIndicator,
+                // which causes the browser to show a horizontal scrollbar on overflow
+                // containers when a scrollbar isn't really necessary.
+                popupIndicator: { paddingRight: 0, marginRight: 0 },
+            },
+        },
+        MuiChip: chips.chipComponent,
+    },
+};
+/**
+ * Create a customized Smoot Design theme for use with `ThemeProvider`.
+ *
+ * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
+ * for more.
+ */
+const createTheme = (options) => {
+    return muiCreateTheme(deepmerge(defaultThemeOptions, options));
+};
+const defaultTheme = createTheme();
+/**
+ *
+ * @param param0
+ * @returns
+ */
+const ThemeProvider = ({ children, theme = defaultTheme, }) => {
+    return React.createElement(MuiThemeProvider, { theme: theme }, children);
+};
+export { ThemeProvider, createTheme };

package/dist/esm/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "./ThemeProvider";
+declare const meta: Meta<typeof ThemeProvider>;
+type Story = StoryObj<typeof ThemeProvider>;
+/**
+ * `ThemeProvider` must wrap all components from `smoot`-design, and allows
+ *  styling any component via [`styled`](https://emotion.sh/docs/styled).
+ *
+ * In general, most useful theme properties are exposed on `theme.custom`. (Root
+ * `theme` properties are used internally by MUI.) See typescript definitions
+ * for more information about `theme.custom`.
+ *
+ * ## Further Customized Theme with `createTheme`
+ * Consuming applications can customize `smoot-design`'s default theme by creating
+ * a theme instance with `createTheme` and passing it to `ThemeProvider`:
+ *
+ * ```tsx
+ * const customTheme = createTheme({...})
+ *
+ * <ThemeProvider theme={customTheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * ### Custom Link Adapter
+ * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
+ * components render links. These links are native anchor tags by default. In
+ * order to use these components with custom routing libraries (e.g. `react-router`
+ * or `next/link`), you can provide a custom link adapter.
+ *
+ * Components such as `ButtonLink` will:
+ *   - use `Component` on `ButtonLink` if specified (`<ButtonLink Component={Link} />`)
+ *   - else, use `theme.custom.LinkAdapter` if specified,
+ *   - else, use `a` tag.
+ *
+ * For example, to use `next/link` as the default link implementation:
+ *
+ * ```tsx
+ * import Link from "next/link"
+ * const theme = createTheme({ LinkAdapter: Link })
+ * ```
+ *
+ * You can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)
+ * to add the custom props to relevant components. For example, to expose
+ * `next/link`'s `scroll` prop on `ButtonLink`:
+ *
+ * ```ts
+ * // Add scroll prop to all components using LinkAdapter
+ * declare module "@mitodl/smoot-design" {
+ *   interface LinkAdapterPropsOverrides {
+ *     scroll?: boolean
+ *   }
+ * }
+ * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
+ */
+export declare const LinkAdapterOverride: Story;
+export default meta;