chore: Enable strict type checking in design system - #3979
Draft
maciaszczykm wants to merge 13 commits into
Draft
Conversation
Soffi AI SummaryThis PR incrementally enables strict TypeScript checking in the The work proceeds flag-by-flag: Beyond compiler flags, the stories for the design system are migrated from the legacy Storybook CSF2 format to the modern CSF3 Commits
Updated: 2026-08-07 13:32 UTC |
Member
Author
Contributor
Greptile SummaryThis PR enables strict TypeScript checking across the design system and resolves the resulting type errors while preserving existing component behavior.
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains.
|
| Filename | Overview |
|---|---|
| assets/design-system/tsconfig.json | Enables strict TypeScript checking for the design-system package. |
| assets/design-system/src/components/CodeEditor.tsx | Correctly normalizes omitted values to an empty string when initializing, comparing, and updating editor state. |
| .github/workflows/design-system-preview.yaml | Adds the Storybook preview deployment workflow with all third-party actions pinned to immutable commit SHAs. |
Reviews (2): Last reviewed commit: "improve tests" | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
Enables strict TypeScript checks for the design system and updates affected components, utilities, and Storybook stories.
Changes:
- Enables inherited strict checks plus
noImplicitAny. - Migrates stories to typed Storybook object syntax.
- Improves nullability handling and adds Firebase Storybook previews.
Reviewed changes
Copilot reviewed 145 out of 145 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
assets/design-system/tsconfig.json |
Enables strict implicit-any checking. |
assets/design-system/src/utils/useBimodalSelectState.ts |
Tightens selection nullability. |
assets/design-system/src/utils/urls.ts |
Handles nullable URLs. |
assets/design-system/src/utils/scrollIntoContainerView.ts |
Requires calculated scroll values. |
assets/design-system/src/types.ts |
Handles absent severity allowlists. |
assets/design-system/src/theme/focus.ts |
Adjusts inset focus styling. |
assets/design-system/src/stories/Wizard.stories.tsx |
Types Wizard stories. |
assets/design-system/src/stories/ValidatedInput.stories.tsx |
Types ValidatedInput stories. |
assets/design-system/src/stories/UserDetails.stories.tsx |
Types UserDetails stories. |
assets/design-system/src/stories/Typography.tsx |
Types typography story data. |
assets/design-system/src/stories/TreeNavigation.stories.tsx |
Types TreeNavigation stories. |
assets/design-system/src/stories/Tooltip.stories.tsx |
Types Tooltip stories. |
assets/design-system/src/stories/Toast.stories.tsx |
Types Toast stories. |
assets/design-system/src/stories/TipCarousel.stories.tsx |
Types TipCarousel stories. |
assets/design-system/src/stories/TextSwitch.stories.tsx |
Types TextSwitch stories. |
assets/design-system/src/stories/TagMultiselectTemplate.tsx |
Initializes controlled story state. |
assets/design-system/src/stories/TabList.stories.tsx |
Types TabList stories and refs. |
assets/design-system/src/stories/Table.stories.tsx |
Types Table stories and slices. |
assets/design-system/src/stories/Tab.stories.tsx |
Types Tab stories. |
assets/design-system/src/stories/Switch.stories.tsx |
Types Switch stories. |
assets/design-system/src/stories/Stepper.stories.tsx |
Types Stepper stories. |
assets/design-system/src/stories/StackCard.stories.tsx |
Types StackCard stories. |
assets/design-system/src/stories/Slider.stories.tsx |
Types Slider stories. |
assets/design-system/src/stories/Sidecar.stories.tsx |
Types Sidecar stories. |
assets/design-system/src/stories/Select.stories.tsx |
Types Select story state. |
assets/design-system/src/stories/SegmentedInput.stories.tsx |
Types SegmentedInput stories. |
assets/design-system/src/stories/RepositoryChip.stories.tsx |
Types RepositoryChip stories. |
assets/design-system/src/stories/RepositoryCard.stories.tsx |
Types RepositoryCard stories. |
assets/design-system/src/stories/Radio.stories.tsx |
Types Radio story state. |
assets/design-system/src/stories/PropWide.stories.tsx |
Types PropWide stories. |
assets/design-system/src/stories/PropsContainer.stories.tsx |
Types PropsContainer stories. |
assets/design-system/src/stories/Prop.stories.tsx |
Types Prop stories. |
assets/design-system/src/stories/ProgressBar.stories.tsx |
Types ProgressBar stories. |
assets/design-system/src/stories/PageTitle.stories.tsx |
Types PageTitle stories. |
assets/design-system/src/stories/PageCard.stories.tsx |
Types PageCard stories. |
assets/design-system/src/stories/NavigationContextStub.tsx |
Types navigation stub behavior. |
assets/design-system/src/stories/Modal.stories.tsx |
Types Modal stories. |
assets/design-system/src/stories/Markdown.stories.tsx |
Types Markdown stories. |
assets/design-system/src/stories/LoopingLogo.stories.tsx |
Types LoopingLogo stories. |
assets/design-system/src/stories/LoadingSpinner.stories.tsx |
Types LoadingSpinner stories. |
assets/design-system/src/stories/ListBox.stories.tsx |
Types ListBox stories. |
assets/design-system/src/stories/Input.stories.tsx |
Types Input stories. |
assets/design-system/src/stories/InlineCode.stories.tsx |
Types InlineCode stories. |
assets/design-system/src/stories/Icons.stories.tsx |
Types icon stories and styles. |
assets/design-system/src/stories/IconFrame.stories.tsx |
Types IconFrame stories. |
assets/design-system/src/stories/Highlight.stories.tsx |
Types Highlight stories. |
assets/design-system/src/stories/FormTitle.stories.tsx |
Types FormTitle stories. |
assets/design-system/src/stories/FormField.stories.tsx |
Types FormField stories. |
assets/design-system/src/stories/Flyover.stories.tsx |
Types Flyover stories. |
assets/design-system/src/stories/EmptyState.stories.tsx |
Types EmptyState stories. |
assets/design-system/src/stories/Divider.stories.tsx |
Types Divider stories. |
assets/design-system/src/stories/DiffViewer.stories.tsx |
Types DiffViewer stories. |
assets/design-system/src/stories/Date.stories.tsx |
Types Date stories. |
assets/design-system/src/stories/ComboBox.stories.tsx |
Types ComboBox stories and search results. |
assets/design-system/src/stories/Colors.tsx |
Migrates the Colors story object. |
assets/design-system/src/stories/Codeline.stories.tsx |
Types Codeline stories. |
assets/design-system/src/stories/CodeEditor.stories.tsx |
Types CodeEditor stories. |
assets/design-system/src/stories/Code.stories.tsx |
Types Code stories. |
assets/design-system/src/stories/ClusterTagsTemplate.tsx |
Types loading and icon behavior. |
assets/design-system/src/stories/ChipList.stories.tsx |
Types ChipList stories. |
assets/design-system/src/stories/Chip.stories.tsx |
Types Chip stories and sizes. |
assets/design-system/src/stories/Checklist.stories.tsx |
Types Checklist stories. |
assets/design-system/src/stories/CheckBox.stories.tsx |
Types Checkbox stories. |
assets/design-system/src/stories/CatalogCard.stories.tsx |
Types CatalogCard stories. |
assets/design-system/src/stories/Card.stories.tsx |
Types Card stories. |
assets/design-system/src/stories/Callout.stories.tsx |
Types Callout stories. |
assets/design-system/src/stories/ButtonGroup.stories.tsx |
Types ButtonGroup stories and refs. |
assets/design-system/src/stories/Button.stories.tsx |
Types Button stories. |
assets/design-system/src/stories/Breadcrumbs.stories.tsx |
Types Breadcrumbs stories. |
assets/design-system/src/stories/Banner.stories.tsx |
Types Banner stories and controls. |
assets/design-system/src/stories/AWSIcons.stories.tsx |
Types AWS icon stories. |
assets/design-system/src/stories/Avatar.stories.tsx |
Types Avatar stories. |
assets/design-system/src/stories/AppIcon.stories.tsx |
Types AppIcon stories. |
assets/design-system/src/stories/Accordion.stories.tsx |
Types Accordion stories. |
assets/design-system/src/stories/A.stories.tsx |
Types link stories. |
assets/design-system/src/stories/_SemanticSystem.stories.tsx |
Types semantic-system stories. |
assets/design-system/src/markdoc/types.ts |
Specifies Markdoc component props. |
assets/design-system/src/markdoc/tags/button.markdoc.ts |
Resolves Markdoc render typing. |
assets/design-system/src/markdoc/runtimeSchema.ts |
Handles optional schema records. |
assets/design-system/src/markdoc/components/Fence.tsx |
Handles optional fence content. |
assets/design-system/src/hooks/useResizeObserver.ts |
Types observer lifecycle state. |
assets/design-system/src/hooks/useRefResizeObserver.tsx |
Accepts nullable element refs. |
assets/design-system/src/GlobalStyle.tsx |
Guards non-object color values. |
assets/design-system/src/components/wizard/Wizard.tsx |
Tightens Wizard context and children handling. |
assets/design-system/src/components/wizard/Stepper.tsx |
Types Wizard context access. |
assets/design-system/src/components/wizard/Picker.tsx |
Handles optional labels and search. |
assets/design-system/src/components/wizard/Navigation.tsx |
Types generic Wizard context. |
assets/design-system/src/components/wizard/hooks.ts |
Adds Wizard state guards. |
assets/design-system/src/components/wizard/context.ts |
Makes absent Wizard context explicit. |
assets/design-system/src/components/ValidatedInput.tsx |
Types validation state. |
assets/design-system/src/components/TreeNavigation.tsx |
Normalizes optional booleans and callbacks. |
assets/design-system/src/components/Tooltip.tsx |
Handles optional trigger elements. |
assets/design-system/src/components/Toast.tsx |
Types timers and GraphQL errors. |
assets/design-system/src/components/TextSwitch.tsx |
Types radio state and refs. |
assets/design-system/src/components/TagMultiSelect.tsx |
Types match selections. |
assets/design-system/src/components/TabPanel.tsx |
Handles optional tab metadata. |
assets/design-system/src/components/TabList.tsx |
Guards tab refs and IDs. |
assets/design-system/src/components/table/Th.tsx |
Normalizes highlight state. |
assets/design-system/src/components/table/tableUtils.ts |
Types virtualizer options. |
assets/design-system/src/components/table/Table.tsx |
Tightens virtual table nullability. |
assets/design-system/src/components/table/hooks.ts |
Makes slice callback optional. |
assets/design-system/src/components/Tab.tsx |
Uses undefined for absent borders. |
assets/design-system/src/components/Switch.tsx |
Defaults the switch variant. |
assets/design-system/src/components/SubTab.tsx |
Normalizes SubTab booleans. |
assets/design-system/src/components/Stepper.tsx |
Types the Stepper ref and width. |
assets/design-system/src/components/Spinner.tsx |
Adds safe spinner color defaults. |
assets/design-system/src/components/Slider.tsx |
Adds a default slider size. |
assets/design-system/src/components/SelectItem.tsx |
Types radio state and refs. |
assets/design-system/src/components/SelectComboShared.tsx |
Tightens shared selection callbacks. |
assets/design-system/src/components/Select.tsx |
Types Select refs and trigger props. |
assets/design-system/src/components/SegmentedInput.tsx |
Exposes a nullable input ref. |
assets/design-system/src/components/ReactAriaPopover.tsx |
Types the popover ref and state. |
assets/design-system/src/components/RadioGroup.tsx |
Types the radio context. |
assets/design-system/src/components/Radio.tsx |
Types radio state and handlers. |
assets/design-system/src/components/ProgressBar.tsx |
Defaults missing determinate progress. |
assets/design-system/src/components/PopoverCornerScale.tsx |
Normalizes open state. |
assets/design-system/src/components/PanZoomWrapper.tsx |
Uses the validated container reference. |
assets/design-system/src/components/Modal.tsx |
Adds safe modal dimensions. |
assets/design-system/src/components/Markdown.tsx |
Makes link metadata optional. |
assets/design-system/src/components/LoopingLogoAlternative.tsx |
Types optional scaling styles. |
assets/design-system/src/components/LoopingLogo.tsx |
Types optional scaling styles. |
assets/design-system/src/components/LoadingSpinner.tsx |
Guards nullable centering refs. |
assets/design-system/src/components/ListBoxItem.tsx |
Safely resolves theme colors. |
assets/design-system/src/components/ListBox.tsx |
Handles optional children and refs. |
assets/design-system/src/components/Input2.tsx |
Tightens padding and event typing. |
assets/design-system/src/components/IconFrame.tsx |
Allows absent mapped colors. |
assets/design-system/src/components/Highlight.tsx |
Guards optional languages. |
assets/design-system/src/components/Flex.tsx |
Handles optional tooltip and spacing. |
assets/design-system/src/components/EmptyState.tsx |
Removes the null icon default. |
assets/design-system/src/components/contexts/BreadcrumbsContext.tsx |
Handles absent breadcrumb context. |
assets/design-system/src/components/ComboBox.tsx |
Tightens ComboBox refs and callbacks. |
assets/design-system/src/components/CodeEditor.tsx |
Normalizes optional editor values. |
assets/design-system/src/components/Code.tsx |
Handles optional tabs and content. |
assets/design-system/src/components/ChipList.tsx |
Guards optional click callbacks. |
assets/design-system/src/components/ChecklistItem.tsx |
Types nullable checklist selection. |
assets/design-system/src/components/Checklist.tsx |
Tightens checklist callback handling. |
assets/design-system/src/components/Checkbox.tsx |
Types checkbox refs and booleans. |
assets/design-system/src/components/Card.tsx |
Defaults the card header size. |
assets/design-system/src/components/Button.tsx |
Normalizes disabled state. |
assets/design-system/src/components/Breadcrumbs.tsx |
Defaults breadcrumb arrays and refs. |
assets/design-system/src/components/ArrowScroll.tsx |
Types the container ref. |
assets/design-system/src/components/AppIcon.tsx |
Handles optional icon styling. |
assets/design-system/firebase.json |
Configures Storybook Firebase hosting. |
assets/design-system/.firebaserc |
Selects the Firebase project. |
.github/workflows/design-system-preview.yaml |
Deploys per-PR Storybook previews. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Member
Author
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 146 out of 146 changed files in this pull request and generated 1 comment.
Suppressed comments (2)
assets/design-system/src/stories/Radio.stories.tsx:65
- Resetting to
undefinedmakes React Stately treat the radio group as uncontrolled, so its internal selected value can remain and the Reset button no longer reliably clears the selection. Use a controlled empty value (for example,'') instead.
.github/workflows/design-system-preview.yaml:19 - This job also runs for pull requests from forks, but GitHub withholds
FIREBASE_SERVICE_ACCOUNT_PLURALSH_DESIGNfor fork-triggeredpull_requestworkflows, so the deploy step will fail every external PR that touches the design system. Skip fork PRs (or conditionally skip only the deploy step) when the credential is unavailable.
if: ${{ github.actor != 'renovate[bot]' }}
| "noImplicitThis": false, | ||
| "alwaysStrict": false | ||
| // Override parent tsconfig.app.json (keeps noImplicitAny off for console) | ||
| "noImplicitAny": true |
Member
Author
There was a problem hiding this comment.
tsc --build already succeeds under the design system strict: true. Current @types/react has an overload for useRef<T>(initialValue: T | undefined), so this is legal under strictNullChecks.
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.
TODO:
Test Plan
Test environment: https://console.your-env.onplural.sh/
Checklist
Plural Flow: console