Storybook gallery for Core UI, published on FN infrastructure

.gitignore

@@ -8,3 +8,6 @@ package.json.lock
 docs
 package-lock.json
 .claude
+
+storybook-static
+dist

.npmignore

@@ -8,3 +8,7 @@ webpack.prod.js
 .nvmrc
 babel.config.json
 .editorconfig
+stories
+.storybook
+wrangler.jsonc
+dist

.storybook/main.js

@@ -0,0 +1,26 @@
+const styleRule = (test, extraLoader, { modules = false, exclude } = {}) => ({
+  test,
+  ...(exclude ? { exclude } : {}),
+  use: [
+    "style-loader",
+    { loader: "css-loader", options: { modules, sourceMap: false } },
+    ...(extraLoader ? [{ loader: extraLoader, options: { sourceMap: false } }] : [])
+  ]
+});
+
+module.exports = {
+  framework: "@storybook/react-webpack5",
+  // the webpack5 builder ships no JS compiler; without this addon nothing transpiles JSX
+  addons: ["@storybook/addon-docs", "@storybook/addon-webpack5-compiler-babel"],
+  stories: ["../stories/**/*.stories.@(js|jsx)"],
+  webpackFinal: (config) => {
+    // the builder ships plain css only; src imports less/scss in both module and global form
+    config.module.rules.push(
+      styleRule(/\.module\.less$/, "less-loader", { modules: true }),
+      styleRule(/\.module\.scss$/, "sass-loader", { modules: true }),
+      styleRule(/\.less$/, "less-loader", { exclude: /\.module\.less$/ }),
+      styleRule(/\.scss$/, "sass-loader", { exclude: /\.module\.scss$/ })
+    );
+    return config;
+  }
+};

.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<!--
+  Injected into the preview iframe head (not the Storybook UI).
+
+  The legacy Core UI components emit bootstrap 3 classes (form-control,
+  btn btn-default, panel panel-default, col-md-*) but the library declares no
+  bootstrap dependency — consuming apps supply it. summit-admin, the current
+  reference consumer, links this exact file from src/index.ejs, so the preview
+  loads the same one rather than guessing a version.
+-->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

.storybook/preview.jsx

@@ -0,0 +1,44 @@
+import { Provider } from "react-redux";
+import {
+  legacy_createStore as createStore,
+  combineReducers,
+  applyMiddleware
+} from "redux";
+import thunk from "redux-thunk";
+import { ThemeProvider, createTheme } from "@mui/material";
+// Legacy (non-MUI) components render `fa fa-*` icons and bootstrap classes. The
+// consuming apps supply both: summit-admin imports this same font-awesome css in
+// src/index.js, and links bootstrap 3.3.7 from its index.ejs — mirrored for the
+// preview iframe in .storybook/preview-head.html.
+import "font-awesome/css/font-awesome.css";
+import "../src/i18n/i18n"; // side-effect: T.setTexts, else components render raw keys
+import { genericReducers } from "../src/utils/reducers";
+import allFiltersReducer from "../src/components/mui/GridFilter/reducers/all-filters-reducer";
+import { MuiBaseCustomTheme } from "../src/components/mui/MuiBaseCustomTheme";
+
+const theme = createTheme(MuiBaseCustomTheme);
+
+// GridFilter reads allGridFiltersState; SnackbarNotification reads baseState and
+// dispatches clearSnackbarMessage, which is a thunk — hence the middleware.
+export const store = createStore(
+  combineReducers({
+    baseState: genericReducers,
+    allGridFiltersState: allFiltersReducer
+  }),
+  applyMiddleware(thunk)
+);
+
+export const decorators = [
+  (Story) => (
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <Story />
+      </ThemeProvider>
+    </Provider>
+  )
+];
+
+export const parameters = { controls: { expanded: true } };
+
+// gives every component a generated Docs page (props table + live controls)
+export const tags = ["autodocs"];

package.json

@@ -7,7 +7,9 @@
         "clean": "rm -Rf node_modules & rm -Rf lib & yarn install",
         "build-dev": "./node_modules/.bin/webpack --config webpack.dev.js",
         "build": "./node_modules/.bin/webpack --config webpack.prod.js",
-        "test": "jest"
+        "test": "jest",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build -o dist/core-ui"
     },
     "license": "APACHE 2.0",
     "dependencies": {
@@ -34,6 +36,9 @@
         "@react-pdf/renderer": "^4.4.1",
         "@sentry/react": "^8.54.0",
         "@sentry/webpack-plugin": "^3.1.2",
+        "@storybook/addon-docs": "^10",
+        "@storybook/addon-webpack5-compiler-babel": "^4",
+        "@storybook/react-webpack5": "^10",
         "@stripe/react-stripe-js": "^5.4.1",
         "@stripe/stripe-js": "^8.5.3",
         "@testing-library/jest-dom": "5.17.0",
@@ -99,6 +104,7 @@
         "sass": "^1.77.0",
         "sass-loader": "^14.2.1",
         "spark-md5": "^3.0.2",
+        "storybook": "^10",
         "style-loader": "^3.3.1",
         "superagent": "8.0.9",
         "sweetalert2": "^8.15.2",

stories/AddonTypeSelect.stories.jsx

@@ -0,0 +1,13 @@
+import AddonTypeSelect from "../src/components/mui/addon-type-select";
+import { NEEDS_API } from "./_helpers";
+
+export default {
+  title: "MUI/API-backed/AddonTypeSelect",
+  component: AddonTypeSelect,
+  argTypes: { onChange: { action: "changed" } },
+  parameters: { docs: { description: { component: NEEDS_API } } }
+};
+
+// Options come from querySummitAddons and are keyed by add-on name, so `value`
+// is a name rather than an id. No summit scoping — the query is global.
+export const Default = { args: { value: "", placeholder: "Select an add-on" } };

stories/AlertButton.stories.jsx

@@ -0,0 +1,10 @@
+import AlertButton from "../src/components/mui/AlertButton";
+
+export default {
+  title: "MUI/Buttons/AlertButton",
+  component: AlertButton,
+  argTypes: { onClick: { action: "clicked" } }
+};
+
+export const Default = { args: { label: "Resolve conflict" } };
+

stories/AlertModal.stories.jsx

@@ -0,0 +1,16 @@
+import AlertModal from "../src/components/mui/AlertModal";
+
+export default {
+  title: "MUI/Dialogs/AlertModal",
+  component: AlertModal,
+  argTypes: { onClose: { action: "closed" } }
+};
+
+export const Default = {
+  args: {
+    open: true,
+    title: "Payment declined",
+    message: "The card ending 4242 was declined. Try another payment method."
+  }
+};
+

stories/AuthButton.stories.jsx

@@ -0,0 +1,17 @@
+import AuthButton from "../src/components/mui/AuthButton";
+
+export default {
+  title: "MUI/Buttons/AuthButton",
+  component: AuthButton,
+  argTypes: { doLogin: { action: "login" }, initLogOut: { action: "logout" } }
+};
+
+export const LoggedOut = { args: { isLoggedUser: false } };
+export const LoggedIn = {
+  args: {
+    isLoggedUser: true,
+    profileName: "Casey Locker",
+    profileEmail: "casey@example.com"
+  }
+};
+

stories/BulkEditTable.stories.jsx

@@ -0,0 +1,21 @@
+import BulkEditTable from "../src/components/mui/BulkEditTable";
+import { sampleRows } from "./_helpers";
+
+export default {
+  title: "MUI/Tables/BulkEditTable",
+  component: BulkEditTable,
+  argTypes: { onSort: { action: "sort" }, onUpdate: { action: "update" } }
+};
+
+export const Default = {
+  args: {
+    options: { sortCol: "name", sortDir: 1 },
+    columns: [
+      { columnKey: "name", header: "Item", sortable: true },
+      { columnKey: "quantity", header: "Qty", align: "right", editable: true },
+      { columnKey: "price", header: "Price", align: "right", editable: true }
+    ],
+    data: sampleRows
+  }
+};
+

stories/CartButton.stories.jsx

@@ -0,0 +1,12 @@
+import CartButton from "../src/components/mui/CartButton";
+
+export default {
+  title: "MUI/Buttons/CartButton",
+  component: CartButton,
+  argTypes: { onClick: { action: "clicked" } }
+};
+
+export const Empty = { args: { itemCount: 0 } };
+export const WithItems = { args: { itemCount: 3 } };
+export const Disabled = { args: { itemCount: 3, disabled: true } };
+

stories/CheckboxList.stories.jsx

@@ -0,0 +1,22 @@
+import CheckboxList from "../src/components/mui/checkbox-list";
+
+export default {
+  title: "MUI/Inputs/CheckboxList",
+  component: CheckboxList,
+  argTypes: { onChange: { action: "changed" } }
+};
+
+export const Default = {
+  args: {
+    items: [
+      { id: 1, name: "Keynote Hall", checked: true },
+      { id: 2, name: "Breakout A", checked: false },
+      { id: 3, name: "Breakout B", checked: false },
+      { id: 4, name: "Expo Floor", checked: true }
+    ],
+    boxHeight: "220px"
+  }
+};
+
+export const Empty = { args: { items: [], boxHeight: "220px" } };
+

stories/ChipList.stories.jsx

@@ -0,0 +1,9 @@
+import ChipList from "../src/components/mui/chip-list";
+
+export default { title: "MUI/Data display/ChipList", component: ChipList };
+
+const chips = ["Diamond", "Gold", "Silver", "Bronze", "In-kind", "Media"];
+
+export const Default = { args: { chips } };
+export const Truncated = { args: { chips, maxLength: 3 } };
+

stories/ChipNotify.stories.jsx

@@ -0,0 +1,8 @@
+import ChipNotify from "../src/components/mui/chip-notify";
+
+export default { title: "MUI/Data display/ChipNotify", component: ChipNotify };
+
+export const Warning = { args: { label: "3 items need review" } };
+export const Success = { args: { label: "All synced", color: "success" } };
+export const Error = { args: { label: "Payment failed", color: "error" } };
+

stories/ChipSelectInput.stories.jsx

@@ -0,0 +1,17 @@
+import ChipSelectInput from "../src/components/mui/chip-select-input";
+
+export default { title: "MUI/Inputs/ChipSelectInput", component: ChipSelectInput };
+
+export const Default = {
+  args: {
+    inputLabel: "Badge features",
+    availableOptions: [
+      { id: 1, name: "Expo Access" },
+      { id: 2, name: "Keynote Access" },
+      { id: 3, name: "Workshop Access" }
+    ],
+    canAdd: true,
+    canEdit: true
+  }
+};
+

stories/ConfirmDeleteDialog.stories.jsx

@@ -0,0 +1,12 @@
+import ConfirmDeleteDialog from "../src/components/mui/ConfirmDeleteDialog";
+
+export default {
+  title: "MUI/Dialogs/ConfirmDeleteDialog",
+  component: ConfirmDeleteDialog,
+  argTypes: { onClose: { action: "closed" }, onConfirm: { action: "confirmed" } }
+};
+
+export const Default = {
+  args: { open: true, message: "Delete the Diamond sponsorship package?" }
+};
+

stories/ConfirmDialog.stories.jsx

@@ -0,0 +1,25 @@
+import ConfirmDialog from "../src/components/mui/confirm-dialog";
+
+export default {
+  title: "MUI/Dialogs/ConfirmDialog",
+  component: ConfirmDialog,
+  argTypes: { onConfirm: { action: "confirmed" }, onCancel: { action: "cancelled" } }
+};
+
+export const Default = {
+  args: {
+    open: true,
+    title: "Publish this order?",
+    text: "The sponsor will be emailed a copy of the invoice."
+  }
+};
+
+export const Warning = {
+  args: {
+    ...Default.args,
+    iconType: "warning",
+    confirmButtonText: "Publish anyway",
+    confirmButtonColor: "warning"
+  }
+};
+

stories/CustomAlert.stories.jsx

@@ -0,0 +1,9 @@
+import CustomAlert from "../src/components/mui/CustomAlert";
+
+export default { title: "MUI/Feedback/CustomAlert", component: CustomAlert };
+
+export const Info = { args: { severity: "info", message: "Rates refresh nightly." } };
+export const Warning = { args: { severity: "warning", message: "This show closes in 2 days." } };
+export const Error = { args: { severity: "error", message: "Could not reach the payment provider." } };
+export const NoIcon = { args: { severity: "info", message: "Compact variant.", hideIcon: true } };
+

stories/CustomTablePagination.stories.jsx

@@ -0,0 +1,11 @@
+import CustomTablePagination from "../src/components/mui/table/CustomTablePagination";
+
+export default {
+  title: "MUI/Tables/CustomTablePagination",
+  component: CustomTablePagination,
+  argTypes: { onPageChange: { action: "page-change" }, onPerPageChange: { action: "per-page-change" } }
+};
+
+export const Default = { args: { totalRows: 137, perPage: 10, currentPage: 3 } };
+export const SinglePage = { args: { totalRows: 4, perPage: 10, currentPage: 1 } };
+

stories/DndList.stories.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import DndList from "../src/components/mui/dnd-list";
+
+export default {
+  title: "MUI/Drag and drop/DndList",
+  component: DndList,
+  argTypes: { onReorder: { action: "reorder" } },
+  parameters: {
+    docs: { description: { component: "react-beautiful-dnd based (the older list). Prefer DragNDropList for new work." } }
+  }
+};
+
+export const Default = {
+  args: {
+    droppableId: "story-dnd-list",
+    items: [
+      { id: 1, order: 1, name: "Keynote mention" },
+      { id: 2, order: 2, name: "Booth 10x10" },
+      { id: 3, order: 3, name: "Lanyard branding" }
+    ],
+    renderItem: (item) => <span>{item.name}</span>
+  }
+};
+

stories/DownloadBtn.stories.jsx

@@ -0,0 +1,6 @@
+import DownloadBtn from "../src/components/mui/DownloadBtn";
+
+export default { title: "MUI/Buttons/DownloadBtn", component: DownloadBtn };
+
+export const Default = { args: { url: "https://example.com/invoice.pdf" } };
+

stories/DragNDropList.stories.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import DragNDropList from "../src/components/mui/DragNDropList";
+
+export default {
+  title: "MUI/Drag and drop/DragNDropList",
+  component: DragNDropList,
+  argTypes: { onReorder: { action: "reorder" } },
+  parameters: {
+    docs: { description: { component: "dnd-kit based. Optional peer deps: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities." } }
+  }
+};
+
+export const Default = {
+  args: {
+    items: [
+      { id: 1, order: 1, name: "Keynote mention" },
+      { id: 2, order: 2, name: "Booth 10x10" },
+      { id: 3, order: 3, name: "Lanyard branding" }
+    ],
+    renderItem: (item) => <span>{item.name}</span>
+  }
+};
+