Storybook for Core UI, plus propTypes across the component library - #314
Closed
caseylocker wants to merge 2 commits into
Closed
Storybook for Core UI, plus propTypes across the component library#314caseylocker wants to merge 2 commits into
caseylocker wants to merge 2 commits into
Conversation
…verage Adds Storybook 10 (react-webpack5) covering the component library: 304 index entries across 194 stories and 110 generated docs pages. * 35 story files for the non-MUI Core UI components: inputs, the four tables, forms, uploads, schedule builder, plus one grouped file for the async entity selects * Autodocs enabled globally, so each component gets a props table with live controls * webpack rules for .less/.scss in module and global form, which the webpack5 builder does not ship * font-awesome imported and bootstrap 3.3.7 linked via preview-head.html, matching what summit-admin and the other consumers load, so legacy components render with their icons and bootstrap classes * replaces SummitAddonSelect stories with AddonTypeSelect following the rename in #303 storybook-static is gitignored.
Adds propTypes with types, required flags, defaults and per-prop descriptions to 43 components, so all 53 components covered by stories document their interface. Previously only ten declared them and most generated props tables were empty. Documents behaviour that was only discoverable by reading the source: * a family of props gated on hasOwnProperty rather than value, where passing false still enables the behaviour: multi, clearable, small, big, noAlert, textArea, allowCreate, shouldUseId. This splits on class vs function components; SponsorInput, AttendeeInput and OperatorInput read the value normally * Input is uncontrolled, SteppedSelect throws on a value matching no option, ScheduleBuilderView requires summit.time_zone.name, RsvpForm requires errors, RegistrationCompanyInput requires onError propTypes are dev-time only and change no rendering behaviour. The one exception is stepped-select, which exported an anonymous arrow and so had no displayName and nowhere to attach propTypes; it is now a named const with the same default export.
|
Important Review skippedToo many files! This PR contains 160 files, which is 60 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 (160)
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 |
This was referenced Aug 14, 2026
Author
|
Superseded by two PRs. Closing this one.
Split along that line because they have different blast radii. #316 changes the library that every FN app installs; #315 changes nothing that ships in the package. Different reviewers care about each, and if the Worth noting for anyone comparing: #316's version of the propTypes is not the same as this PR's. Reviewing them against the actual component behaviour turned up a set of declarations that contradicted it, which is worse than having none, since Leaving the |
There was a problem hiding this comment.
Pull request overview
This PR introduces a Storybook instance to showcase the Core UI component library and adds/expands propTypes across many components so Storybook Docs can generate meaningful props tables (types, defaults, required flags, and descriptions).
Changes:
- Added Storybook configuration and a large set of stories covering both MUI and legacy Core UI components.
- Added/updated
propTypes(and onedisplayName-enabling refactor forSteppedSelect) across the component library undersrc/. - Updated project scripts/deps to support running and building Storybook; ignored
storybook-staticoutput.
Reviewed changes
Copilot reviewed 159 out of 161 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| .gitignore | Ignores Storybook static build output (storybook-static). |
| .storybook/main.js | Storybook framework/addons plus LESS/SCSS handling in webpack. |
| .storybook/preview-head.html | Loads Bootstrap CSS into the Storybook preview iframe for legacy components. |
| .storybook/preview.jsx | Adds Redux + MUI theme providers and store setup for stories that rely on them. |
| package.json | Adds Storybook scripts and dev dependencies. |
| src/components/ajaxloader/index.js | Adds propTypes for AjaxLoader. |
| src/components/bulk-actions-selector/index.js | Adds propTypes for bulk actions selector. |
| src/components/clock.js | Adds propTypes for Clock. |
| src/components/exclusive-wrapper.js | Adds propTypes for Exclusive wrapper. |
| src/components/forms/rsvp-form.js | Adds propTypes for RSVP form contract. |
| src/components/forms/simple-form.js | Adds propTypes for SimpleForm field/entity contract. |
| src/components/inputs/access-levels-input.js | Adds propTypes for async access-level select. |
| src/components/inputs/action-dropdown/index.js | Adds propTypes for ActionDropdown. |
| src/components/inputs/attendee-input.js | Adds propTypes for async attendee select. |
| src/components/inputs/company-input.js | Adds propTypes for async/creatable company select. |
| src/components/inputs/country-dropdown.js | Adds propTypes for country dropdown wrapper. |
| src/components/inputs/country-input.js | Adds propTypes for country select. |
| src/components/inputs/datetimepicker/index.js | Adds propTypes for DateTimePicker. |
| src/components/inputs/dropdown.js | Adds propTypes for react-select Dropdown wrapper. |
| src/components/inputs/editor-input/index.js | Adds propTypes for rich text editor input. |
| src/components/inputs/event-input.js | Adds propTypes for async event select. |
| src/components/inputs/free-multi-text-input.js | Adds propTypes for creatable multi-tag input. |
| src/components/inputs/group-input.js | Adds propTypes for async group select. |
| src/components/inputs/grouped-dropdown/index.js | Adds propTypes for native grouped dropdown. |
| src/components/inputs/language-input.js | Adds propTypes for language select. |
| src/components/inputs/member-input.js | Adds propTypes for async member select. |
| src/components/inputs/operator-input.js | Adds propTypes for operator select input. |
| src/components/inputs/organization-input.js | Adds propTypes for async/creatable organization select. |
| src/components/inputs/speaker-input.js | Adds propTypes for async speaker select. |
| src/components/inputs/sponsor-input.js | Adds propTypes for async sponsor select. |
| src/components/inputs/sponsored-project-input.js | Adds propTypes for async sponsored-project select. |
| src/components/inputs/stepped-select/index.jsx | Names the component and adds propTypes (enables docs table). |
| src/components/inputs/summit-days-select.js | Adds propTypes for summit days select. |
| src/components/inputs/summit-input.js | Adds propTypes for async summit select. |
| src/components/inputs/summit-venues-select.js | Adds propTypes for summit venues/rooms select. |
| src/components/inputs/text-input.js | Adds propTypes clarifying uncontrolled behavior and required handlers. |
| src/components/inputs/textarea-input.js | Adds propTypes for textarea input behavior/limits. |
| src/components/inputs/upload-input-v2/index.js | Adds propTypes for legacy dropzone upload v2. |
| src/components/inputs/upload-input-v3/index.js | Adds propTypes for chunked upload v3. |
| src/components/inputs/upload-input/index.js | Adds propTypes for legacy upload input. |
| src/components/raw-html/index.js | Adds propTypes documenting dangerouslySetInnerHTML usage. |
| src/components/schedule-builder-view/index.js | Adds propTypes for schedule builder view contract. |
| src/components/sections/panel.js | Adds propTypes for Panel component. |
| src/components/summit-dropdown/index.js | Adds propTypes for SummitDropdown. |
| src/components/table-editable/EditableTable.js | Adds propTypes for editable table rows/options. |
| src/components/table-selectable/SelectableTable.js | Adds propTypes for selectable table contract. |
| src/components/table/Table.js | Adds propTypes for base table columns/data/options/actions. |
| src/components/video-stream.js | Adds propTypes for VideoStream. |
| stories/_form-item-fixture.js | Adds a shared fixture for FormItemTable stories. |
| stories/_helpers.jsx | Adds shared Storybook helpers/decorators and sample table data. |
| stories/AddonTypeSelect.stories.jsx | Adds Storybook story for AddonTypeSelect. |
| stories/AlertButton.stories.jsx | Adds Storybook story for AlertButton. |
| stories/AlertModal.stories.jsx | Adds Storybook story for AlertModal. |
| stories/AuthButton.stories.jsx | Adds Storybook story for AuthButton. |
| stories/BulkEditTable.stories.jsx | Adds Storybook story for BulkEditTable. |
| stories/CartButton.stories.jsx | Adds Storybook story for CartButton. |
| stories/CheckboxList.stories.jsx | Adds Storybook story for MUI CheckboxList. |
| stories/ChipList.stories.jsx | Adds Storybook story for ChipList. |
| stories/ChipNotify.stories.jsx | Adds Storybook story for ChipNotify. |
| stories/ChipSelectInput.stories.jsx | Adds Storybook story for ChipSelectInput. |
| stories/ConfirmDeleteDialog.stories.jsx | Adds Storybook story for ConfirmDeleteDialog. |
| stories/ConfirmDialog.stories.jsx | Adds Storybook story for ConfirmDialog. |
| stories/CustomAlert.stories.jsx | Adds Storybook story for CustomAlert. |
| stories/CustomTablePagination.stories.jsx | Adds Storybook story for CustomTablePagination. |
| stories/DndList.stories.jsx | Adds Storybook story for legacy react-beautiful-dnd list. |
| stories/DownloadBtn.stories.jsx | Adds Storybook story for DownloadBtn. |
| stories/DragNDropList.stories.jsx | Adds Storybook story for dnd-kit list. |
| stories/Dropdown.stories.jsx | Adds Storybook story for Dropdown. |
| stories/DropdownCheckbox.stories.jsx | Adds Storybook story for DropdownCheckbox. |
| stories/EditableTable.stories.jsx | Adds Storybook story for editable MUI table. |
| stories/ExtraRows.stories.jsx | Adds Storybook stories for extra table summary rows. |
| stories/FormikAdditionalInput.stories.jsx | Adds Storybook story for Formik AdditionalInput. |
| stories/FormikAdditionalInputList.stories.jsx | Adds Storybook story for Formik AdditionalInputList. |
| stories/FormikAddonTypeSelect.stories.jsx | Adds Storybook story for Formik AddonTypeSelect. |
| stories/FormikAsyncSelect.stories.jsx | Adds Storybook story for Formik async select (stubbed query). |
| stories/FormikCheckbox.stories.jsx | Adds Storybook story for Formik checkbox. |
| stories/FormikCheckboxGroup.stories.jsx | Adds Storybook story for Formik checkbox group. |
| stories/FormikCompanyInput.stories.jsx | Adds Storybook story for Formik company input. |
| stories/FormikDatepicker.stories.jsx | Adds Storybook story for Formik datepicker. |
| stories/FormikDiscountField.stories.jsx | Adds Storybook story for Formik discount field. |
| stories/FormikDropdownCheckbox.stories.jsx | Adds Storybook story for Formik dropdown checkbox. |
| stories/FormikDropdownRadio.stories.jsx | Adds Storybook story for Formik dropdown radio. |
| stories/FormikFileSizeField.stories.jsx | Adds Storybook story for Formik file size field. |
| stories/FormikItemPriceTiers.stories.jsx | Adds Storybook story for Formik item price tiers. |
| stories/FormikPriceField.stories.jsx | Adds Storybook story for Formik price field. |
| stories/FormikQuantityField.stories.jsx | Adds Storybook story for Formik quantity field. |
| stories/FormikRadioGroup.stories.jsx | Adds Storybook story for Formik radio group. |
| stories/FormikSelect.stories.jsx | Adds Storybook story for Formik select. |
| stories/FormikSelectGroup.stories.jsx | Adds Storybook story for Formik select group. |
| stories/FormikSelectV2.stories.jsx | Adds Storybook story for Formik Select v2. |
| stories/FormikSponsorInput.stories.jsx | Adds Storybook story for Formik sponsor input. |
| stories/FormikSponsorshipInput.stories.jsx | Adds Storybook story for Formik sponsorship input. |
| stories/FormikSponsorshipSummitSelect.stories.jsx | Adds Storybook story for Formik sponsorship summit select. |
| stories/FormikSwitch.stories.jsx | Adds Storybook story for Formik switch. |
| stories/FormikTextEditor.stories.jsx | Adds Storybook story for Formik text editor. |
| stories/FormikTextField.stories.jsx | Adds Storybook story for Formik text field. |
| stories/FormikTimepicker.stories.jsx | Adds Storybook story for Formik timepicker. |
| stories/FormikUpload.stories.jsx | Adds Storybook story for Formik upload. |
| stories/FormItemTable.stories.jsx | Adds Storybook stories for FormItemTable with live Formik host. |
| stories/GridFilter.stories.jsx | Adds Storybook stories for GridFilter criteria contract. |
| stories/InfiniteTable.stories.jsx | Adds Storybook story for InfiniteTable. |
| stories/InfoNote.stories.jsx | Adds Storybook story for InfoNote. |
| stories/InlineCard.stories.jsx | Adds Storybook story for InlineCard. |
| stories/ItemSettingsModal.stories.jsx | Adds Storybook story for ItemSettingsModal. |
| stories/ListCard.stories.jsx | Adds Storybook story for ListCard. |
| stories/LoadingOverlay.stories.jsx | Adds Storybook story for LoadingOverlay. |
| stories/MenuButton.stories.jsx | Adds Storybook story for MenuButton. |
| stories/NavBar.stories.jsx | Adds Storybook story for NavBar. |
| stories/NotesModal.stories.jsx | Adds Storybook story for NotesModal (Formik-decorated). |
| stories/OrderSummary.stories.jsx | Adds Storybook story for OrderSummary. |
| stories/RoundButton.stories.jsx | Adds Storybook story for RoundButton. |
| stories/SearchInput.stories.jsx | Adds Storybook story for SearchInput. |
| stories/ShowConfirmDialog.stories.jsx | Adds Storybook story for imperative confirm dialog API. |
| stories/SnackbarNotification.stories.jsx | Adds Storybook stories for SnackbarNotification hook/store paths. |
| stories/SortableTable.stories.jsx | Adds Storybook story for sortable MUI table (react-beautiful-dnd). |
| stories/SponsorAddonSelect.stories.jsx | Adds Storybook story for SponsorAddonSelect (API-backed). |
| stories/SponsorOrderGrid.stories.jsx | Adds Storybook story for SponsorOrderGrid. |
| stories/StatusChip.stories.jsx | Adds Storybook story for StatusChip. |
| stories/StripePayment.stories.jsx | Adds Storybook story with guidance for required Stripe credentials. |
| stories/SummitsDropdown.stories.jsx | Adds Storybook stories documenting SummitsDropdown fetch behavior. |
| stories/Table.stories.jsx | Adds Storybook stories for MUI Table variants (sorted/paginated/empty). |
| stories/TableCard.stories.jsx | Adds Storybook story for TableCard. |
| stories/ToggleButtons.stories.jsx | Adds Storybook stories for ToggleButtons. |
| stories/UploadBtn.stories.jsx | Adds Storybook story for UploadBtn. |
| stories/UploadDialog.stories.jsx | Adds Storybook story for UploadDialog. |
| stories/core/ActionDropdown.stories.jsx | Adds Storybook story for Core ActionDropdown. |
| stories/core/AjaxLoader.stories.jsx | Adds Storybook story for Core AjaxLoader. |
| stories/core/AsyncEntityInputs.stories.jsx | Adds grouped Storybook stories for many async Core entity inputs. |
| stories/core/BulkActionsSelector.stories.jsx | Adds Storybook story for Core BulkActionsSelector. |
| stories/core/CheckboxList.stories.jsx | Adds Storybook story for Core CheckboxList. |
| stories/core/CircleButton.stories.jsx | Adds Storybook stories for Core CircleButton states. |
| stories/core/Clock.stories.jsx | Adds Storybook story for Core Clock. |
| stories/core/DateTimePicker.stories.jsx | Adds Storybook stories for Core DateTimePicker variants. |
| stories/core/Dropdown.stories.jsx | Adds Storybook stories for Core Dropdown variants (single/multi). |
| stories/core/EditableTable.stories.jsx | Adds Storybook story for Core EditableTable. |
| stories/core/Exclusive.stories.jsx | Adds Storybook stories for Core Exclusive wrapper behavior. |
| stories/core/FreeMultiTextInput.stories.jsx | Adds Storybook story for Core FreeMultiTextInput. |
| stories/core/FreeTextSearch.stories.jsx | Adds Storybook story for Core FreeTextSearch. |
| stories/core/GroupedDropdown.stories.jsx | Adds Storybook story for Core GroupedDropdown. |
| stories/core/Panel.stories.jsx | Adds Storybook story for Core Panel. |
| stories/core/RadioList.stories.jsx | Adds Storybook stories for Core RadioList variants. |
| stories/core/RawHTML.stories.jsx | Adds Storybook stories for Core RawHTML behavior. |
| stories/core/RsvpForm.stories.jsx | Adds Storybook story for Core RsvpForm. |
| stories/core/ScheduleBuilderView.stories.jsx | Adds Storybook story for Core ScheduleBuilderView with DnD provider. |
| stories/core/SelectableTable.stories.jsx | Adds Storybook story for Core SelectableTable. |
| stories/core/SimpleForm.stories.jsx | Adds Storybook stories for Core SimpleForm with/without errors. |
| stories/core/SimpleLinkList.stories.jsx | Adds Storybook story for Core SimpleLinkList with injected search. |
| stories/core/SortableTable.stories.jsx | Adds Storybook story for Core SortableTable. |
| stories/core/SteppedSelect.stories.jsx | Adds Storybook story for Core SteppedSelect. |
| stories/core/SummitDaysSelect.stories.jsx | Adds Storybook story for Core SummitDaysSelect. |
| stories/core/SummitDropdown.stories.jsx | Adds Storybook story for Core SummitDropdown. |
| stories/core/SummitVenuesSelect.stories.jsx | Adds Storybook story for Core SummitVenuesSelect. |
| stories/core/Table.stories.jsx | Adds Storybook stories for Core Table (default + actions). |
| stories/core/TextArea.stories.jsx | Adds Storybook stories for Core TextArea variants. |
| stories/core/TextEditor.stories.jsx | Adds Storybook stories for Core TextEditor variants. |
| stories/core/TextInput.stories.jsx | Adds Storybook stories for Core text Input variants. |
| stories/core/UploadInput.stories.jsx | Adds Storybook stories for Core UploadInput variants. |
| stories/core/UploadInputV2.stories.jsx | Adds Storybook story for Core UploadInputV2 (API note). |
| stories/core/UploadInputV3.stories.jsx | Adds Storybook story for Core UploadInputV3 (API note). |
| stories/core/VideoStream.stories.jsx | Adds Storybook story for Core VideoStream. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+2
to
+6
| import { | ||
| legacy_createStore as createStore, | ||
| combineReducers, | ||
| applyMiddleware | ||
| } from "redux"; |
| end_date: PropTypes.number.isRequired, | ||
| time_zone_id: PropTypes.string, | ||
| /** Required: schedule-event-list reads time_zone.name. */ | ||
| time_zone: PropTypes.shape({ name: PropTypes.string }), |
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 />; | ||
| } | ||
| ] | ||
| }; |
Comment on lines
+156
to
+159
| options: PropTypes.arrayOf(PropTypes.shape({ | ||
| value: PropTypes.string, | ||
| label: PropTypes.string | ||
| })).isRequired, |
Comment on lines
14
to
16
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import videojs from 'video.js' |
Comment on lines
+8
to
+10
| export const Youtube = { | ||
| args: { url: "https://www.youtube.com/embed/dQw4w9WgXcQ", title: "Keynote replay" } | ||
| }; |
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/86bbcy9rt
Adds a Storybook covering the component library, and the
propTypesneeded to make its props tables useful. Answers the "show every Core UI component and the options you can adjust" ask from the design system work.A hosted preview is available for review, credentials in the ClickUp ticket.
Two commits, reviewable separately
1.
feat(storybook)— stories and Storybook config only. Nothing undersrc/, so it cannot affect the published library.304 index entries: 194 stories and 110 generated docs pages. 35 new story files cover the non-MUI components (inputs, the four tables, forms, uploads, schedule builder, plus one grouped file for the async entity selects), alongside the existing MUI stories.
Two config details worth knowing. The webpack5 builder ships neither a JS compiler nor
.less/.scsshandling, somain.jsadds rules for both in module and global form. And the legacy components emit bootstrap classes andfaicons that the library does not declare as dependencies, sopreview-head.htmllinks bootstrap 3.3.7 from the same CDNsummit-adminuses insrc/index.ejs, andpreview.jsximports font-awesome the same waysummit-admindoes insrc/index.js. Thirteen of the fifteen consumers load that same bootstrap build.2.
docs(components)—propTypeson 43 components undersrc/. This is the commit worth real review.All 53 components covered by stories now declare types, required flags, defaults and per-prop descriptions. Previously ten did, and most props tables rendered empty.
What the audit turned up
Writing these surfaced behaviour that was only visible by reading the source:
hasOwnPropertyrather than value, so passingfalsestill enables them:multi,clearable,small,big,noAlert,textArea,allowCreate,shouldUseId. This splits on class vs function components.SponsorInput,AttendeeInputandOperatorInputread the value normally.Inputis uncontrolled.SteppedSelectthrows on a value matching no option.ScheduleBuilderViewrequiressummit.time_zone.name.RsvpFormrequireserrors.RegistrationCompanyInputrequiresonError.Each is now stated in the relevant props table.
Risk
propTypesare dev-time only and change no rendering behaviour. One exception:stepped-selectexported an anonymous arrow, so it had nodisplayNameand nowhere to attachpropTypes. It is now a named const with the same default export.Also replaces the
SummitAddonSelectstories withAddonTypeSelectto follow the rename in #303, and gitignoresstorybook-static.Verification
Rebased onto
mainat v5.0.47.npm run buildpasses,jestis 916/916 across 113 suites, andnpm run build-storybookcompletes with all 304 entries.Not included
The preview is hosted from a personal Cloudflare account as a throwaway review link. Where a permanent component site gets published is still open, since the mkdocs pipeline behind the docs site has no Node and no Core UI checkout and so cannot build a Storybook bundle. Tracked in the ClickUp ticket.