Storybook gallery for Core UI, published on FN infrastructure - #315
Open
caseylocker wants to merge 3 commits into
Open
Storybook gallery for Core UI, published on FN infrastructure#315caseylocker wants to merge 3 commits into
caseylocker wants to merge 3 commits into
Conversation
…nfig Splits the config and non-MUI stories out of the original combined branch so each PR clears CodeRabbit's 100-file review limit. Co-Authored-By: Claude <noreply@anthropic.com>
The bare `storybook build` script wrote to storybook-static/, while wrangler.jsonc serves ./dist. Aligning the script means the deploy config and the build command share one source of truth, so a bare `yarn build-storybook` in CI can no longer publish an empty assets directory. Co-Authored-By: Claude <noreply@anthropic.com>
Completes the Storybook coverage for the component library, pairing the MUI components with the Core UI stories already on this branch. Co-Authored-By: Claude <noreply@anthropic.com>
|
Important Review skippedToo many files! This PR contains 119 files, which is 19 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (119)
You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds a Storybook-based component gallery for the Core UI library (without modifying src/), along with Cloudflare Workers static-assets configuration so the gallery can be published/rebuilt on FN infrastructure.
Changes:
- Introduces Storybook 10 configuration under
.storybook/(autodocs + Redux/Theme decorators + style pipeline for less/scss). - Adds a large set of Storybook stories covering both Core and MUI component sets plus shared story helpers/fixtures.
- Adds a Cloudflare Wrangler config for an assets-only Worker and updates packaging ignores to keep stories/config/build output out of the published npm tarball.
Reviewed changes
Copilot reviewed 118 out of 120 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| wrangler.jsonc | Assets-only Cloudflare Worker config to serve the built Storybook bundle from ./dist. |
| package.json | Adds Storybook scripts and Storybook-related devDependencies. |
| .storybook/main.js | Storybook framework/addons plus webpack rules for less/scss (modules + globals). |
| .storybook/preview.jsx | Global Storybook decorators (Redux store + MUI theme) and autodocs tag. |
| .storybook/preview-head.html | Injects bootstrap CSS into the preview iframe for legacy component styling. |
| .npmignore | Excludes stories, Storybook config, Wrangler config, and dist/ from npm package output. |
| .gitignore | Ignores Storybook build outputs (storybook-static, dist). |
| stories/_helpers.jsx | Shared decorators/fixtures for stories (Formik host, table host, sample rows/cols, NEEDS_API note). |
| stories/_form-item-fixture.js | Shared fixture data for FormItemTable stories (lifted from tests). |
| stories/UploadDialog.stories.jsx | Story coverage for MUI UploadDialog. |
| stories/UploadBtn.stories.jsx | Story coverage for MUI UploadBtn. |
| stories/ToggleButtons.stories.jsx | Story coverage for MUI ToggleButtons. |
| stories/TableCard.stories.jsx | Story coverage for MUI TableCard. |
| stories/Table.stories.jsx | Story coverage for MUI Table (default/paginated/sorted/empty). |
| stories/SummitsDropdown.stories.jsx | Story coverage for MUI SummitsDropdown (fetch-path vs provided-data). |
| stories/StripePayment.stories.jsx | Story coverage for MUI StripePayment with credential guidance. |
| stories/StatusChip.stories.jsx | Story coverage for MUI StatusChip variants. |
| stories/SponsorOrderGrid.stories.jsx | Story coverage for MUI SponsorOrderGrid. |
| stories/SponsorAddonSelect.stories.jsx | Story coverage for MUI SponsorAddonSelect (API-backed). |
| stories/SortableTable.stories.jsx | Story coverage for MUI SortableTable (drag-to-reorder). |
| stories/SnackbarNotification.stories.jsx | Story coverage for MUI SnackbarNotification via hook and redux-state trigger paths. |
| stories/ShowConfirmDialog.stories.jsx | Story coverage for MUI showConfirmDialog + GlobalConfirmDialog. |
| stories/SearchInput.stories.jsx | Story coverage for MUI SearchInput (default/with-term/debounced). |
| stories/RoundButton.stories.jsx | Story coverage for MUI RoundButton variants. |
| stories/OrderSummary.stories.jsx | Story coverage for MUI OrderSummary. |
| stories/NotesModal.stories.jsx | Story coverage for MUI NotesModal (Formik decorator). |
| stories/NavBar.stories.jsx | Story coverage for MUI NavBar (logged out/in). |
| stories/MenuButton.stories.jsx | Story coverage for MUI MenuButton (default + badge). |
| stories/LoadingOverlay.stories.jsx | Story coverage for MUI LoadingOverlay (loading vs idle). |
| stories/ListCard.stories.jsx | Story coverage for MUI ListCard. |
| stories/ItemSettingsModal.stories.jsx | Story coverage for MUI ItemSettingsModal. |
| stories/InlineCard.stories.jsx | Story coverage for MUI InlineCard. |
| stories/InfoNote.stories.jsx | Story coverage for MUI InfoNote. |
| stories/InfiniteTable.stories.jsx | Story coverage for MUI InfiniteTable (default/empty). |
| stories/GridFilter.stories.jsx | Story coverage for MUI GridFilter with sample criteria and story isolation notes. |
| stories/FormItemTable.stories.jsx | Story coverage for MUI FormItemTable with a real useFormik host + test-derived fixture. |
| stories/FormikUpload.stories.jsx | Story coverage for MUI Formik Upload input. |
| stories/FormikTimepicker.stories.jsx | Story coverage for MUI Formik Timepicker. |
| stories/FormikTextField.stories.jsx | Story coverage for MUI Formik TextField. |
| stories/FormikTextEditor.stories.jsx | Story coverage for MUI Formik TextEditor. |
| stories/FormikSwitch.stories.jsx | Story coverage for MUI Formik Switch. |
| stories/FormikSponsorshipSummitSelect.stories.jsx | Story coverage for MUI Formik SponsorshipSummitSelect (API-backed). |
| stories/FormikSponsorshipInput.stories.jsx | Story coverage for MUI Formik SponsorshipInput (API-backed). |
| stories/FormikSponsorInput.stories.jsx | Story coverage for MUI Formik SponsorInput (API-backed). |
| stories/FormikSelectV2.stories.jsx | Story coverage for MUI Formik Select v2. |
| stories/FormikSelectGroup.stories.jsx | Story coverage for MUI Formik SelectGroup with stubbed queryFunction. |
| stories/FormikSelect.stories.jsx | Story coverage for MUI Formik Select with MenuItem children. |
| stories/FormikRadioGroup.stories.jsx | Story coverage for MUI Formik RadioGroup. |
| stories/FormikQuantityField.stories.jsx | Story coverage for MUI Formik QuantityField. |
| stories/FormikPriceField.stories.jsx | Story coverage for MUI Formik PriceField. |
| stories/FormikItemPriceTiers.stories.jsx | Story coverage for MUI Formik ItemPriceTiers. |
| stories/FormikFileSizeField.stories.jsx | Story coverage for MUI Formik FileSizeField. |
| stories/FormikDropdownRadio.stories.jsx | Story coverage for MUI Formik DropdownRadio. |
| stories/FormikDropdownCheckbox.stories.jsx | Story coverage for MUI Formik DropdownCheckbox. |
| stories/FormikDiscountField.stories.jsx | Story coverage for MUI Formik DiscountField. |
| stories/FormikDatepicker.stories.jsx | Story coverage for MUI Formik Datepicker. |
| stories/FormikCompanyInput.stories.jsx | Story coverage for MUI Formik CompanyInput (API-backed). |
| stories/FormikCheckboxGroup.stories.jsx | Story coverage for MUI Formik CheckboxGroup. |
| stories/FormikCheckbox.stories.jsx | Story coverage for MUI Formik Checkbox. |
| stories/FormikAsyncSelect.stories.jsx | Story coverage for MUI Formik AsyncSelect with local stubbed queryFunction. |
| stories/FormikAddonTypeSelect.stories.jsx | Story coverage for MUI Formik AddonTypeSelect (API-backed). |
| stories/FormikAdditionalInputList.stories.jsx | Story coverage for MUI Formik AdditionalInputList. |
| stories/FormikAdditionalInput.stories.jsx | Story coverage for MUI Formik AdditionalInput. |
| stories/ExtraRows.stories.jsx | Story coverage for MUI table extra-rows rendered in a table context. |
| stories/EditableTable.stories.jsx | Story coverage for MUI EditableTable. |
| stories/DropdownCheckbox.stories.jsx | Story coverage for MUI DropdownCheckbox. |
| stories/Dropdown.stories.jsx | Story coverage for MUI Dropdown. |
| stories/DragNDropList.stories.jsx | Story coverage for MUI DragNDropList (dnd-kit). |
| stories/DownloadBtn.stories.jsx | Story coverage for MUI DownloadBtn. |
| stories/DndList.stories.jsx | Story coverage for legacy MUI DndList (react-beautiful-dnd). |
| stories/CustomTablePagination.stories.jsx | Story coverage for MUI CustomTablePagination. |
| stories/CustomAlert.stories.jsx | Story coverage for MUI CustomAlert variants. |
| stories/ConfirmDialog.stories.jsx | Story coverage for MUI ConfirmDialog (default/warning). |
| stories/ConfirmDeleteDialog.stories.jsx | Story coverage for MUI ConfirmDeleteDialog. |
| stories/ChipSelectInput.stories.jsx | Story coverage for MUI ChipSelectInput. |
| stories/ChipNotify.stories.jsx | Story coverage for MUI ChipNotify variants. |
| stories/ChipList.stories.jsx | Story coverage for MUI ChipList. |
| stories/CheckboxList.stories.jsx | Story coverage for MUI CheckboxList (default/empty). |
| stories/CartButton.stories.jsx | Story coverage for MUI CartButton variants. |
| stories/BulkEditTable.stories.jsx | Story coverage for MUI BulkEditTable. |
| stories/AuthButton.stories.jsx | Story coverage for MUI AuthButton (logged out/in). |
| stories/AlertModal.stories.jsx | Story coverage for MUI AlertModal. |
| stories/AlertButton.stories.jsx | Story coverage for MUI AlertButton. |
| stories/AddonTypeSelect.stories.jsx | Story coverage for MUI AddonTypeSelect (API-backed). |
| stories/core/VideoStream.stories.jsx | Story coverage for Core VideoStream. |
| stories/core/UploadInputV3.stories.jsx | Story coverage for Core UploadInputV3 (API-backed posting). |
| stories/core/UploadInputV2.stories.jsx | Story coverage for Core UploadInputV2 (API-backed posting). |
| stories/core/UploadInput.stories.jsx | Story coverage for Core UploadInput. |
| stories/core/TextInput.stories.jsx | Story coverage for Core text Input. |
| stories/core/TextEditor.stories.jsx | Story coverage for Core TextEditor. |
| stories/core/TextArea.stories.jsx | Story coverage for Core TextArea. |
| stories/core/Table.stories.jsx | Story coverage for Core Table (default + actions). |
| stories/core/SummitVenuesSelect.stories.jsx | Story coverage for Core SummitVenuesSelect. |
| stories/core/SummitDropdown.stories.jsx | Story coverage for Core SummitDropdown. |
| stories/core/SummitDaysSelect.stories.jsx | Story coverage for Core SummitDaysSelect. |
| stories/core/SteppedSelect.stories.jsx | Story coverage for Core SteppedSelect. |
| stories/core/SortableTable.stories.jsx | Story coverage for Core SortableTable. |
| stories/core/SimpleLinkList.stories.jsx | Story coverage for Core SimpleLinkList with injected search action. |
| stories/core/SimpleForm.stories.jsx | Story coverage for Core SimpleForm (default + error state). |
| stories/core/SelectableTable.stories.jsx | Story coverage for Core SelectableTable (selection/actions). |
| stories/core/ScheduleBuilderView.stories.jsx | Story coverage for Core ScheduleBuilderView with DnD provider decorator and fixture data. |
| stories/core/RsvpForm.stories.jsx | Story coverage for Core RsvpForm. |
| stories/core/RawHTML.stories.jsx | Story coverage for Core RawHTML (default + newline replacement). |
| stories/core/RadioList.stories.jsx | Story coverage for Core RadioList (default + inline). |
| stories/core/Panel.stories.jsx | Story coverage for Core Panel (open/collapsed). |
| stories/core/GroupedDropdown.stories.jsx | Story coverage for Core GroupedDropdown. |
| stories/core/FreeTextSearch.stories.jsx | Story coverage for Core FreeTextSearch. |
| stories/core/FreeMultiTextInput.stories.jsx | Story coverage for Core FreeMultiTextInput. |
| stories/core/Exclusive.stories.jsx | Story coverage for Core Exclusive wrapper (window.EXCLUSIVE_SECTIONS gated). |
| stories/core/EditableTable.stories.jsx | Story coverage for Core EditableTable. |
| stories/core/Dropdown.stories.jsx | Story coverage for Core Dropdown (single + multi). |
| stories/core/DateTimePicker.stories.jsx | Story coverage for Core DateTimePicker (date+time vs date-only). |
| stories/core/Clock.stories.jsx | Story coverage for Core Clock (API-backed note). |
| stories/core/CircleButton.stories.jsx | Story coverage for Core CircleButton (live/future states). |
| stories/core/CheckboxList.stories.jsx | Story coverage for Core CheckboxList (default + allowOther). |
| stories/core/BulkActionsSelector.stories.jsx | Story coverage for Core BulkActionsSelector. |
| stories/core/AsyncEntityInputs.stories.jsx | Story coverage for multiple Core async entity inputs consolidated into one file. |
| stories/core/AjaxLoader.stories.jsx | Story coverage for Core AjaxLoader with constrained positioning decorator. |
| stories/core/ActionDropdown.stories.jsx | Story coverage for Core ActionDropdown. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1
to
+13
| import Exclusive from "../../src/components/exclusive-wrapper"; | ||
|
|
||
| export default { | ||
| title: "Core/Display/Exclusive", | ||
| component: Exclusive, | ||
| // gated by window.EXCLUSIVE_SECTIONS — simulate the host app setting it | ||
| decorators: [ | ||
| (Story) => { | ||
| window.EXCLUSIVE_SECTIONS = ["beta-feature"]; | ||
| return <Story />; | ||
| } | ||
| ] | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ref: https://app.clickup.com/t/86bbdtyjc
Why these changes
The Core UI library has no browsable documentation. Anyone building an FN application has to read the source to find out which components exist, what they look like, and how they behave. This adds a Storybook gallery so there is one URL where every component is rendered with its variants.
It has to live somewhere permanent and rebuild itself. The preview to date has run on a personal Cloudflare account with its config in a temp directory, which cannot be the arrangement for a team asset, and a gallery that does not rebuild becomes a stale snapshot of whatever
mainlooked like on the day it was built.No
src/files are touched. Nothing here changes the library itself or what consuming apps install.What this adds
.storybook/) with autodocs and the redux decoratorsstories/core/, 75 for the MUI set, plus the sharedstories/_helpers.jsxandstories/_form-item-fixture.jswrangler.jsonc, an assets only Cloudflare Worker namedftn-core-ui-storybookThe
propTypeshalf of #314 is a separate PR, #316. That one is what fills in the props tables the autodocs pages render.Why a separate Worker
The docs site pipeline is
mkdocs buildrunning in Cloudflare Workers Builds. It has no Node and no Core UI checkout, so it cannot build a Storybook bundle. The alternative considered was committing built output intoguides/, which would make the gallery a snapshot that goes stale rather than a live view ofmain.A second Worker keeps the rebuild automatic and leaves the docs site pipeline untouched.
Packaging
package.jsonhas nofilesfield and.npmignoreis a short denylist, so left alone this change would publish 112 story files,.storybook/,wrangler.jsoncand anydist/output into the tarball that every consuming app installs..npmignorenow excludes all four, and.gitignoregainsdist.Verified with
npm pack --dry-run --json: no story file, config file or build output appears in the tarball.Deployment shape
The bundle builds into
dist/core-ui/so the directory structure mirrors the URL path. Cloudflare Workers static assets match on pathname, so a flatstorybook-static/would 404 under/core-ui/. Thebuild-storybookscript is pointed at the same path, so the script and the Worker config cannot drift apart.Once merged, the gallery is served at https://docs.foxtrotnov.app/core-ui/ and rebuilt by Cloudflare Workers Builds on every merge to
main.Verification
yarn build-storybookexits 0, and the built story index contains 304 entriesyarn testpasses 113/113 suites and 916/916 tests, unchanged frommainindex.htmlare all relative, with zero root absolute referencesexample.comKnown limitation
Storybook's preview navigator mode (
?navigator=true) callsfetch("/index.json")with a root absolute path, which does not resolve under a subpath. Normal gallery browsing is unaffected, since the manager loads its index relatively. If that mode is wanted later, the options are to serve a copy ofindex.jsonat the docs site root or to move the gallery to a subdomain.