Refactor storybook app #1551
Refactor storybook app #1551
Conversation
WalkthroughThis PR replaces the legacy apps/cyberstorm-storybook with a new apps/storybook app using Vite and Storybook 9, including new config, stories, CSS, TypeScript configs, and a Dockerfile. The GitHub workflow updates the Chromatic project directory. Numerous legacy Storybook files and Dockerfile are removed. Dependencies are updated in the root and apps/cyberstorm-remix. In cyberstorm packages: Icon/Frame class handling is adjusted, SelectSearch gains a defaultOpen prop, Modal exports ModalProps and updates index exports, and a DropDown CSS selector changes. Footer CSS is tweaked in remix. Static analysis updates CodeQL actions to v3. Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
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 |
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
2 times, most recently
from
d8ad965 to
715623a
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 20
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx (1)
261-277: Bug: possible runtime crash when option.label is undefinedThe filter uses optional chaining before toLowerCase but still calls .includes on a potentially undefined result. Use a safe fallback.
Apply this diff:
- {options.filter( - (option) => - option.label?.toLowerCase().includes(search.toLowerCase()) && + {options.filter( + (option) => + ((option.label ?? "").toLowerCase().includes(search.toLowerCase())) && (!Array.isArray(selectedValue) || !(selectedValue as SelectOption[]).some( (v) => v.value === option.value )) ).length > 0 ? ( options .filter( (option) => - option.label?.toLowerCase().includes(search.toLowerCase()) && + ((option.label ?? "").toLowerCase().includes(search.toLowerCase())) && (!Array.isArray(selectedValue) || !(selectedValue as SelectOption[]).some( (v) => v.value === option.value )) )Also applies to: 269-289
🧹 Nitpick comments (60)
apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (2)
2-2: Prefer global theme import in preview.ts over per‑story side‑effects.Centralize
@thunderstore/cyberstorm-themein.storybook/preview.tsto avoid duplication and inconsistent ordering.If the theme is already imported globally, remove this line:
-import "@thunderstore/cyberstorm-theme";
19-21: Remove redundant nested spans.The double-nested spans add unnecessary DOM depth; a single span is sufficient.
- <span> - <span>Just Text</span> - </span> + <span>Just Text</span>Also applies to: 38-39
apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (1)
18-19: Avoid controlledvaluewithoutonChange; preferdefaultValuehereUsing
valuewithoutonChangemakes the field read-only in the story. UsedefaultValueor add anonChangearg.Apply this diff:
-export const WithValue: Story = { args: { value: "Some text..." } }; +export const WithValue: Story = { args: { defaultValue: "Some text..." } };Alternative (if you want a controlled example):
-import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { fn } from "@storybook/test"; ... - args: { placeholder: "Write something..." }, + args: { placeholder: "Write something...", onChange: fn() }, ... -export const WithValue: Story = { args: { value: "Some text..." } }; +export const WithValue: Story = { args: { value: "Some text..." } };packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
227-233: Don’t leak wrapperClasses onto the SVG child when a wrapper existsApplying wrapperClasses to the cloned child as well as the wrapper can cause unintended CSS side effects. Limit child class injection to the noWrapper case.
Apply this diff:
- className: classnames( - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (child.props as any).className, - "icon", - noWrapper && csMode === "inline" ? "icon--inline" : null, - wrapperClasses - ), + className: classnames( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (child.props as any).className, + "icon", + noWrapper && csMode === "inline" ? "icon--inline" : null, + noWrapper ? wrapperClasses : null + ),packages/cyberstorm-theme/src/components/DropDown/DropDown.css (1)
42-45: Divider styling may not apply unless divider carries its own variant classSelector now requires
.dropdown__divider--variant--primaryon the child inside a primary dropdown. In the new story,<NewDropDownDivider />is rendered without a variant prop/class, so the divider may lose styling unless the component auto-adds this class.If the intent is “primary parent implies primary divider,” target the divider directly within the primary dropdown scope.
Proposed tweak:
- & > .dropdown__divider:where(.dropdown__divider--variant--primary) { + & > .dropdown__divider { --dropdown-divider-height: var(--divider-height); --dropdown-divider-background-color: var(--divider-bg-color); }Please confirm whether
NewDropDownDivideradds.dropdown__divider--variant--primaryby default. If not, the change above is likely needed..github/workflows/test.yml (1)
132-139: Chromatic project/token sanity check + skip on forks
- Confirm that
CHROMATIC_CYBERSTORM_TOKENnow maps to the newapps/storybookChromatic project; consider renaming toCHROMATIC_STORYBOOK_TOKENfor clarity.- Prevent job failures on forked PRs (secrets not available) by gating the job.
Apply this diff to gate the job:
chromatic-deployment: runs-on: ubuntu-latest + if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.fork == false needs: ["test", "pre-commit", "get-node-version"] strategy: matrix: projects: [ - { dir: "apps/storybook", token: "CHROMATIC_CYBERSTORM_TOKEN" }, + { dir: "apps/storybook", token: "CHROMATIC_CYBERSTORM_TOKEN" }, ]apps/storybook/tsconfig.app.json (1)
3-3: Optional: Drop tsBuildInfo when noEmit is true
noEmit: truemeans the tsbuildinfo won’t be used. Either remove it or enableincremental: trueif you intend to cache typecheck.Apply this diff to remove the unused setting:
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",apps/storybook/eslint.config.js (1)
9-9: Ignore Storybook build output tooAdd storybook-static to global ignores to avoid linting built artifacts.
- globalIgnores(["dist"]), + globalIgnores(["dist", "storybook-static"]),apps/storybook/src/stories/cyberstormComponents/ValidationBar.css (1)
3-4: Use a stronger override to eliminate flakePrefer animation: none !important for deterministic visuals.
- /* Disable animation to prevent flaky snapshots */ - animation: unset; + /* Disable animation to prevent flaky snapshots */ + animation: none !important;apps/storybook/src/stories/cyberstormComponents/CodeInput.css (2)
3-4: Match ValidationBar override strengthAlign with none !important to ensure no spin slips through.
- /* Disable animation to prevent flaky snapshots */ - animation: unset; + /* Disable animation to prevent flaky snapshots */ + animation: none !important;
1-6: Deduplicate shared story overridesThis rule is duplicated here and in ValidationBar.css. Consider a single story-level CSS (e.g., storybookOverrides.css) imported in preview.tsx.
apps/storybook/.storybook/main.ts (2)
12-14: Tighten typing of getAbsolutePathReturn string for clarity.
-function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string { return dirname(require.resolve(join(value, "package.json"))); }
17-20: Include essentials (and consider dropping onboarding)Most stories benefit from @storybook/addon-essentials. Onboarding is optional once the project is set.
addons: [ + getAbsolutePath("@storybook/addon-essentials"), getAbsolutePath("@storybook/addon-docs"), - getAbsolutePath("@storybook/addon-onboarding"), + // getAbsolutePath("@storybook/addon-onboarding"), // optional ],packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx (2)
309-316: Keyboard accessibility: use e.key and handle SpacePrefer e.key over e.code and support Space to activate “button”-like items.
- onKeyDown={(e) => (e.code === "Enter" ? props.onClick(e) : null)} + onKeyDown={(e) => + (e.key === "Enter" || e.key === " ") + ? props.onClick(e) + : null + }
80-92: Naming/semantics check: defaultOpen is initial-onlydefaultOpen only affects initial state (as expected for a “default*” prop). If you need it to react to prop changes, add an effect to sync when it toggles.
apps/storybook/tsconfig.node.json (1)
7-8: Add Node types for vite.config.tsWithout Node types, references like process/env or path may error in strict projects.
- "types": [], + "types": ["node"],If vite.config.ts already compiles cleanly, feel free to skip.
apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css (1)
10-12: Prefer animation: none for clarityanimation: none is explicit and widely understood vs unset.
- animation: unset; + animation: none;apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx (2)
16-24: Args are unused in custom renderConsider dropping Default.args or wiring the render to args for cleaner controls UX.
41-48: Same for All storyargs aren’t consumed by render; consider removing them.
apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx (2)
1-1: Prefer importing Storybook types from "@storybook/react"The canonical typings live in "@storybook/react" even when using the Vite framework. Please switch unless you’ve explicitly configured re‑exports.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-4: Avoid deep “src/” imports from published packagesImporting from "@thunderstore/cyberstorm-theme/src/components" couples the app to source layout and can break with build changes. Prefer a public export (e.g., "@thunderstore/cyberstorm-theme") and re-export the lists there if needed.
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (2)
1-4: Import Storybook types from "@storybook/react" and add a local props type helperSwitch the Storybook type import and strongly type the community fixture to the component’s prop to catch shape drift.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react"; import "@thunderstore/cyberstorm-theme"; import { CardCommunity } from "@thunderstore/cyberstorm"; import catHeim from "../assets/catheim.png"; +import type { ComponentProps } from "react";
6-6: Type the community fixture to the component’s propKeeps stories in lockstep with the component’s expected data contract.
Apply:
-const community = { +const community: ComponentProps<typeof CardCommunity>["community"] = {apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (2)
1-1: Use "@storybook/react" for Storybook typingsAligns with Storybook’s documented import path.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
5-8: Avoid deep imports from theme “src/”Consider re-exporting AvatarVariantsList/AvatarSizesList from the theme’s public entry to decouple from source structure.
apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx (1)
1-1: Storybook typings pathUse "@storybook/react" for Meta/StoryObj.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (1)
1-1: Storybook typings import pathSwitch to "@storybook/react" for types.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (3)
1-1: Storybook typings import pathUse the canonical "@storybook/react" types import.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
37-41: GuardshowPopoverfor TS/DOM compatibilityOlder DOM lib targets may not include
showPopoveronHTMLElement, causing TS errors. Narrow and optional-chain.Apply:
- useEffect(() => { - const modalElement = document.getElementById("modal-1"); - if (!modalElement) return; - modalElement.showPopover(); - }, []); + useEffect(() => { + const el = document.getElementById("modal-1") as (HTMLElement & { + showPopover?: () => void; + }) | null; + el?.showPopover?.(); + }, []);
61-65: Repeat theshowPopovertyping guard for the second storySame rationale as above.
Apply:
- useEffect(() => { - const modalElement = document.getElementById("modal-2"); - if (!modalElement) return; - modalElement.showPopover(); - }, []); + useEffect(() => { + const el = document.getElementById("modal-2") as (HTMLElement & { + showPopover?: () => void; + }) | null; + el?.showPopover?.(); + }, []);apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx (4)
1-1: Storybook typings import pathUse "@storybook/react" for Meta/StoryObj.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
3-3: Use the public API andToast.Providerinstead of deep importing from srcDeep-importing from "@thunderstore/cyberstorm/src/..." is brittle. The default export exposes Provider; use it directly.
Apply:
-import * as ToastProvider from "@thunderstore/cyberstorm/src/newComponents/Toast"; +// Provider is exposed on the default export @@ - render: (args) => ( - <ToastProvider.default.Provider toastDuration={30000}> - <Toast {...args} /> - </ToastProvider.default.Provider> - ), + render: (args) => ( + <Toast.Provider toastDuration={30000}> + <Toast {...args} /> + </Toast.Provider> + ),Also applies to: 21-25
33-49: Ensure unique ids per rendered Toast in VariantsDuplicate ids can cause DOM/ARIA issues. Generate per-variant ids.
Apply:
-export const Variants: Story = { - args: { id: "toast-variant" }, +export const Variants: Story = { + args: {}, render: (args) => { const toastVariants = ToastVariantsList.map((variant) => ( - <Toast key={variant} {...args} csVariant={variant}> + <Toast key={variant} id={`toast-variant-${variant}`} {...args} csVariant={variant}> Toast {variant} </Toast> )); return ( - <ToastProvider.default.Provider toastDuration={30000}> + <Toast.Provider toastDuration={30000}> <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}> {toastVariants} </div> - </ToastProvider.default.Provider> + </Toast.Provider> ); }, };
51-67: Ensure unique ids per rendered Toast in SizesSame as Variants; avoid duplicate ids.
Apply:
-export const Sizes: Story = { - args: { id: "toast-size" }, +export const Sizes: Story = { + args: {}, render: (args) => { const toastSizes = ToastSizesList.map((size) => ( - <Toast key={size} {...args} csSize={size}> + <Toast key={size} id={`toast-size-${size}`} {...args} csSize={size}> Toast {size} </Toast> )); return ( - <ToastProvider.default.Provider toastDuration={30000}> + <Toast.Provider toastDuration={30000}> <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}> {toastSizes} </div> - </ToastProvider.default.Provider> + </Toast.Provider> ); }, };apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx (1)
1-1: Storybook typings import pathStandardize on "@storybook/react".
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/package.json (1)
6-13: Minor: consider moving tooling to devDependencieseslint, typescript, storybook CLI, chromatic, etc., can live under devDependencies for cleaner prod graph. Not blocking.
apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx (1)
4-8: Avoid deep imports into theme “src”; prefer public entrypointsImporting from @thunderstore/cyberstorm-theme/src/components bypasses package exports and can break with refactors/builds. Re-export lists from the theme package index and import from the public path.
Example:
-import { - HeadingVariantsList, - HeadingSizesList, - HeadingModifiersList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + HeadingVariantsList, + HeadingSizesList, + HeadingModifiersList, +} from "@thunderstore/cyberstorm-theme";apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
6-11: Avoid deep imports into theme “src”Import option lists from the theme’s public API (re-export them), not src/.
-import { - ButtonModifiersList, - ButtonSizesList, - ButtonVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + ButtonModifiersList, + ButtonSizesList, + ButtonVariantsList, +} from "@thunderstore/cyberstorm-theme";apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (1)
4-7: Avoid deep imports into theme “src”Prefer importing from the theme’s public exports to reduce breakage risk.
-import { - MetaItemSizesList, - MetaItemVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + MetaItemSizesList, + MetaItemVariantsList, +} from "@thunderstore/cyberstorm-theme";apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (2)
4-8: Avoid deep imports into theme “src”Import from the theme’s public API instead of src/.
-import { - TagModifiersList, - TagSizesList, - TagVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + TagModifiersList, + TagSizesList, + TagVariantsList, +} from "@thunderstore/cyberstorm-theme";
23-24: Neutralize example copyReplace “SkibidiToilet” with a neutral label to keep Storybook professional.
- args: { children: "SkibidiToilet", csMode: "tag" }, + args: { children: "Tag", csMode: "tag" },apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx (3)
1-1: Use Storybook types from @storybook/reactAlign with Storybook guidance to import Meta/StoryObj from @storybook/react.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-8: Avoid deep import of theme listsPrefer importing from the theme package root if exported.
Apply this diff if available:
-import { - TextInputModifiersList, - TextInputSizesList, - TextInputVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + TextInputModifiersList, + TextInputSizesList, + TextInputVariantsList, +} from "@thunderstore/cyberstorm-theme";
39-46: Remove unnecessary key on child elementThe array key is set on the parent div already. key on NewTextInput here is redundant.
Apply this diff:
- <NewTextInput {...args} key={variant} csVariant={variant} /> + <NewTextInput {...args} csVariant={variant} />apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (2)
1-1: Use Storybook types from @storybook/reactKeep type imports consistent across stories.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
27-31: Optional: Keep ‘processing’ story and disable Chromatic snapshotInstead of commenting it out, you can add a dedicated story with animations but disable Chromatic snapshots for it.
Example:
export const Processing: Story = { args: { status: "processing", message: "Processing..." }, parameters: { chromatic: { disableSnapshot: true } }, };apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
1-1: Use Storybook types from @storybook/reactUpdate type import for compatibility.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (4)
1-1: Use Storybook types from @storybook/reactUnify type imports to the standard package.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-8: Avoid deep import of theme listsPrefer importing from the theme root if exported.
Apply this diff if available:
-import { - SwitchModifiersList, - SwitchSizesList, - SwitchVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + SwitchModifiersList, + SwitchSizesList, + SwitchVariantsList, +} from "@thunderstore/cyberstorm-theme";
56-57: Remove unnecessary keys in Sizes storySame as above; remove duplicate/unnecessary keys on siblings.
Apply this diff:
- <NewSwitch key={size} csSize={size} {...args} /> - <NewSwitch key={size} csSize={size} {...args} value={true} /> + <NewSwitch csSize={size} {...args} /> + <NewSwitch csSize={size} {...args} value={true} />
73-79: Remove unnecessary keys in Modifiers storySame rationale; keys aren’t needed on these children.
Apply this diff:
- <NewSwitch key={modifier} csModifiers={[modifier]} {...args} /> + <NewSwitch csModifiers={[modifier]} {...args} /> <NewSwitch - key={modifier} csModifiers={[modifier]} {...args} value={true} />apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx (1)
1-1: Use Storybook types from @storybook/reactStandardize the type import.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx (5)
1-1: Use Storybook types from @storybook/reactUpdate the type import for consistency.
Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-8: Avoid deep import of theme listsPrefer importing from package root to reduce coupling.
Apply this diff if exported at root:
-import { - TableModifiersList, - TableSizesList, - TableVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + TableModifiersList, + TableSizesList, + TableVariantsList, +} from "@thunderstore/cyberstorm-theme";
55-57: Unnecessary key on NewTableOnly the mapped wrapper div needs a key. Remove the key on NewTable.
Apply this diff:
- <NewTable key={variant} csVariant={variant} {...args} /> + <NewTable csVariant={variant} {...args} />
71-73: Unnecessary key on NewTable (Sizes story)Same rationale as above.
Apply this diff:
- <NewTable key={size} csSize={size} {...args} /> + <NewTable csSize={size} {...args} />
87-89: Unnecessary key on NewTable (Modifiers story)Same rationale as above.
Apply this diff:
- <NewTable key={modifier} csModifiers={[modifier]} {...args} /> + <NewTable csModifiers={[modifier]} {...args} />apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (1)
1-1: Change Storybook type imports from @storybook/react-vite to @storybook/reactUse canonical Storybook types from @storybook/react (SB7+) — importing from @storybook/react-vite can cause TypeScript type-resolution issues.
Apply:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";Affected: apps/storybook/.storybook/* and apps/storybook/src/stories/cyberstormComponents/*.stories.tsx — run
git grep -n "@storybook/react-vite"to list and update all occurrences.apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (2)
21-24: Avoid brittle index-based default variant.Indexing into IconVariantsList risks out-of-range/breakage if ordering changes. Use a named variant or first item.
- csVariant: IconVariantsList[3], + csVariant: IconVariantsList[0],
5-5: Avoid deep import from theme '/src' — export IconVariantsList from package rootChange the story import to the package root and add a root export if missing.
-import { IconVariantsList } from "@thunderstore/cyberstorm-theme/src/components"; +import { IconVariantsList } from "@thunderstore/cyberstorm-theme";If not exported yet, add packages/cyberstorm-theme/src/index.ts:
export { IconVariantsList } from "./components";IconVariantsList is already re-exported at packages/cyberstorm-theme/src/components.tsx:69 (defined in packages/cyberstorm-theme/src/components/Icon/Icon.ts).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/cyberstorm-storybook/public/images/communitygrid.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/login_hexagon.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/tsmm_screenshot.pngis excluded by!**/*.pngapps/cyberstorm-storybook/stories/assets/code-brackets.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/colors.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/comments.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/direction.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/flow.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/plugin.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/repo.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/stackalt.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (78)
.github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/cyberstorm-storybook/.gitignore(0 hunks)apps/cyberstorm-storybook/.storybook/main.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview-head.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview.js(0 hunks)apps/cyberstorm-storybook/.storybook/storybook.css(0 hunks)apps/cyberstorm-storybook/Dockerfile(0 hunks)apps/cyberstorm-storybook/constants.ts(0 hunks)apps/cyberstorm-storybook/package.json(0 hunks)apps/cyberstorm-storybook/storage.ts(0 hunks)apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx(0 hunks)apps/cyberstorm-storybook/tsconfig.json(0 hunks)apps/cyberstorm-storybook/types.d.ts(0 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/eslint.config.js(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)eslint.config.mjs(2 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/index.ts(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(3 hunks)
💤 Files with no reviewable changes (21)
- apps/cyberstorm-storybook/constants.ts
- apps/cyberstorm-storybook/.storybook/preview.js
- apps/cyberstorm-storybook/storage.ts
- apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx
- apps/cyberstorm-storybook/Dockerfile
- apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
- apps/cyberstorm-storybook/package.json
- apps/cyberstorm-storybook/.storybook/preview-head.js
- apps/cyberstorm-storybook/types.d.ts
- apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
- apps/cyberstorm-storybook/.storybook/storybook.css
- apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
- apps/cyberstorm-storybook/tsconfig.json
- apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
- apps/cyberstorm-storybook/.storybook/main.js
- apps/cyberstorm-storybook/.gitignore
- apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (35)
apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (2)
packages/cyberstorm-theme/src/components.tsx (2)
MetaItemVariantsList(100-100)MetaItemSizesList(102-102)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (2)
Sizes(72-89)Variants(53-70)
apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
Tabs(93-93)
apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
SkeletonBox(102-102)
apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (2)
apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
Default(23-37)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (1)
Default(14-28)
apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (2)
packages/cyberstorm/src/index.ts (1)
TextAreaInput(10-10)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
Default(27-34)
apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
Toast(59-59)
apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
CardPackage(47-47)
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (2)
apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx (2)
Variants(44-56)Sizes(30-42)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (2)
Variants(30-47)Sizes(49-66)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
CodeBox(4-4)
apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
Pagination(85-85)
apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
IconVariantsList(69-69)
apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (3)
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (2)
Variants(53-70)Sizes(72-89)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (3)
Variants(59-77)Sizes(39-57)Modifiers(79-97)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (3)
Variants(30-47)Sizes(49-66)Modifiers(68-85)
apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx (2)
apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (1)
Default(15-31)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)
apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
Heading(45-45)
apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (3)
packages/cyberstorm/src/index.ts (1)
Modal(44-44)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
Default(23-37)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)
apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (2)
packages/cyberstorm-theme/src/components.tsx (3)
SelectVariantsList(39-39)SelectSizesList(41-41)SelectModifiersList(43-43)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (3)
Sizes(119-144)Variants(85-117)Modifiers(146-175)
apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (1)
apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx (1)
Default(17-27)
apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx (3)
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (2)
Variants(53-70)Sizes(72-89)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (3)
Variants(59-77)Sizes(39-57)Modifiers(79-97)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (3)
Variants(30-45)Sizes(47-62)Modifiers(64-84)
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (3)
packages/cyberstorm/src/index.ts (1)
CardCommunity(46-46)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (1)
Default(15-31)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
Default(27-34)
apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (3)
TagVariantsList(80-80)TagSizesList(82-82)TagModifiersList(84-84)
apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (3)
packages/cyberstorm/src/index.ts (1)
Drawer(43-43)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (1)
Default(14-28)
apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
LinkVariantsList(110-110)
apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (5)
packages/cyberstorm/src/index.ts (1)
Image(91-91)packages/cyberstorm-theme/src/components.tsx (1)
ImageVariantsList(113-113)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (1)
Default(15-31)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
Default(23-37)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)
packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
packages/cyberstorm/src/utils/utils.ts (1)
classnames(34-38)
apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (3)
packages/cyberstorm/src/index.ts (1)
Menu(42-42)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
Default(23-37)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)
apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx (2)
packages/cyberstorm/src/index.ts (1)
Tooltip(13-13)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
Default(36-52)
apps/storybook/.storybook/preview.tsx (1)
packages/cyberstorm/src/index.ts (2)
LinkingProvider(108-108)LinkLibrary(109-109)
apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx (3)
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (2)
Variants(53-70)Sizes(72-89)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (2)
Variants(59-77)Sizes(39-57)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (2)
Variants(30-45)Sizes(47-62)
apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
AdContainer(92-92)
apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
ValidationBar(8-8)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (1)
packages/cyberstorm/src/index.ts (1)
CodeInput(65-65)
apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx (4)
apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx (1)
Default(15-15)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
Default(30-30)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (1)
Default(15-31)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx (1)
All(41-128)
packages/cyberstorm/src/newComponents/Icon/Icon.tsx (1)
packages/cyberstorm/src/utils/utils.ts (1)
classnames(34-38)
apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (3)
packages/cyberstorm/src/index.ts (1)
SelectOption(75-75)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx (1)
SelectOption(17-21)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (3)
Variants(59-77)Sizes(39-57)Modifiers(79-97)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Generate visual diffs
- GitHub Check: Test
- GitHub Check: CodeQL
🔇 Additional comments (36)
packages/cyberstorm/src/index.ts (1)
114-114: Define and export RelativeTimeProps before re-exporting itNo RelativeTimeProps was found under packages/cyberstorm/src/components/RelativeTime — add/export the props type in that component file, then add this re-export to packages/cyberstorm/src/index.ts (close to other component exports):
export { type RelativeTimeProps } from "./components/RelativeTime/RelativeTime";
apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (3)
4-14: Meta shape andsatisfies Meta<>usage looks goodTyped meta with a constrained-width render wrapper is consistent and safe.
1-1: Keep imports from @storybook/react-vite (correct for Storybook 9 + React+Vite)Storybook 9 with React+Vite exposes Meta and StoryObj from the framework package '@storybook/react-vite'; switching to '@storybook/react' is incorrect — the repo’s stories already import from '@storybook/react-vite'.
Likely an incorrect or invalid review comment.
8-8: Ignore — story args are correct; component usesplaceHolderTextAreaInputProps defines
placeHolderand the component passesplaceholder={placeHolder}; the story’s args match this, so changing toplaceholderwould be incorrect. Optional: rename the prop toplaceholderin packages/cyberstorm/src/components/TextAreaInput/TextAreaInput.tsx and update stories for consistency.Likely an incorrect or invalid review comment.
packages/cyberstorm/src/newComponents/Icon/Icon.tsx (1)
17-20: Switch to wrapperClasses looks good; confirm class propagation doesn’t duplicate undesirablyIcon now funnels rootClasses into Frame.wrapperClasses. Frame currently applies wrapperClasses to both wrapper and cloned children (see Frame.tsx lines 227-233, 251, 262), which may duplicate user classes. If intentional for back-compat, fine; otherwise consider gating on noWrapper (see suggested diff in Frame.tsx comment).
apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (4)
20-24: Control type for multi-select may be incompatible across Storybook versions
control: "multi-select"isn’t universally supported. If it fails, usecontrol: { type: "select" }withoptionsand settable: { category: "controls" }and an SB8+labelsmap, or usecontrol: "check"for array-of-strings modifiers.Try this if needed:
- csModifiers: { control: "multi-select", options: DropDownModifiersList }, + csModifiers: { + control: { type: "select" }, + options: DropDownModifiersList, + },
46-46: Ensure divider variant aligns with CSS changeIf the theme expects
.dropdown__divider--variant--primary(per the CSS change), ensure<NewDropDownDivider />applies the correct variant class by default or acceptscsVariantand defaults to primary. Otherwise the divider may not inherit expected styles.If a prop exists, consider:
<NewDropDownDivider /* csVariant="primary" if supported */ />
1-1: Storybook types import is correct — matches configured frameworkapps/storybook/.storybook/main.ts sets framework to getAbsolutePath("@storybook/react-vite"), so importing Meta/StoryObj from "@storybook/react-vite" is consistent.
10-13: Avoid deep imports from theme internals — use the package public APIpackages/cyberstorm-theme/src/components.tsx already re-exports DropDownVariantsList / DropDownSizesList / DropDownModifiersList, but the repo has no dist/ (package.json main/module point to dist) so the built package’s public exports can’t be verified here. Change the import in apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx to use the package public API (e.g. '@thunderstore/cyberstorm-theme' or a stable subpath) if the published build exposes these symbols; otherwise add a top-level re-export in the theme package before switching.
Suggested change:
-import { - DropDownModifiersList, - DropDownSizesList, - DropDownVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + DropDownModifiersList, + DropDownSizesList, + DropDownVariantsList, +} from "@thunderstore/cyberstorm-theme"; // or a stable public subpathapps/storybook/.storybook/styles.css (1)
1-1: LGTM: Cascade layers ordering definedNice explicit layer ordering for predictable overrides.
apps/storybook/.gitignore (1)
1-28: LGTM: Solid Storybook app .gitignoreCovers logs, build outputs, editors, and Storybook artifacts.
eslint.config.mjs (2)
1-3: LGTM: Add Storybook flat configIncluding
eslint-plugin-storybookflat recommended rules is appropriate for the new stories.Also applies to: 93-94
1-3: eslint-plugin-storybook present and compatible — apps/storybook/package.json declares eslint-plugin-storybook@9.1.8 and that package uses eslint ^9.36.0; eslint.config.mjs imports the plugin and spreads ...storybook.configs['flat/recommended'] (plugin peerDependency: eslint >=8), so ESLint 9 flat-config compatibility is satisfied.package.json (1)
23-23: LGTM: Linting/Chromatic bumpsVersions look consistent with ESLint 9 flat config and Chromatic usage.
Also applies to: 30-30, 35-35
apps/cyberstorm-remix/package.json (1)
41-41: Verify Vite 7 compatibility across the stackVite ^7.1.7 is declared in apps/cyberstorm-remix and apps/storybook. apps/cyberstorm-remix/vite.config.ts uses reactRouter() (@react-router/dev/vite), sentryVitePlugin (@sentry/vite-plugin) and vite-tsconfig-paths; yarn.lock contains @sentry/vite-plugin and @react-router/dev. Confirm those plugin versions and tsconfig settings are compatible with Vite 7 and that no root/workspace resolutions or other packages pin an older Vite.
Check: apps/cyberstorm-remix/package.json, apps/storybook/package.json, apps/cyberstorm-remix/vite.config.ts, yarn.lock, root package.json (resolutions/overrides/workspaces).
apps/storybook/tsconfig.json (1)
1-10: LGTMProject references setup looks correct for Storybook. No issues spotted.
apps/storybook/vite.config.ts (1)
1-7: LGTMMinimal Vite config with React plugin is fine alongside Storybook’s Vite builder.
apps/storybook/src/stories/cyberstormComponents/Icon.css (1)
1-10: LGTMSimple, scoped icon sizing and variant via CSS var looks good.
apps/storybook/index.html (1)
1-13: Likely unused Vite index.html — verify and remove if unusedapps/storybook/index.html references /src/main.tsx (line 11); no /src/main.tsx was found in the repo. Storybook typically doesn't use a Vite index.html — remove or document this file to avoid confusion.
apps/storybook/eslint.config.js (2)
16-16: No change needed — reactRefresh.configs.vite is availableapps/storybook/package.json declares eslint-plugin-react-refresh ^0.4.20 and that release exposes reactRefresh.configs.vite, so keep the existing reactRefresh.configs.vite entry in apps/storybook/eslint.config.js.
11-11: TS-only ESLint glob is fine — no .js/.jsx stories foundSearch found only .tsx story files under apps/storybook; the only .js file there is apps/storybook/eslint.config.js and no .storybook JS/JSX files elsewhere. Keep the glob as-is unless you want to lint that config file (then include .js/.jsx).
apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx (1)
5-11: Story configuration LGTMTitle, autodocs, centered layout, and minimal args are appropriate for a simple surface.
apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
23-37: Drawer story looks solidGood use of trigger wiring via popoverTarget and typed controls via theme lists.
apps/storybook/.storybook/preview.tsx (1)
8-28: Global decorators look good — LinkLibrary conforms to LinkingProviderapps/storybook/LinkLibrary.tsx (and apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx) export
librarytyped asLinkLibraryfrom @thunderstore/cyberstorm and provide the link keys declared in packages/cyberstorm/src/components/Links/LinkingProvider.tsx; no shape mismatch found.apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx (1)
4-5: Font Awesome packages must be declaredThis story imports Font Awesome; ensure the app declares:
- @fortawesome/react-fontawesome
- @fortawesome/free-solid-svg-icons
- @fortawesome/fontawesome-svg-core
See package.json comment.
apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx (1)
1-1: Keep Storybook types imported from '@storybook/react-vite' — do not change to '@storybook/react'Storybook 9 recommends importing Meta/StoryObj from the framework package (e.g. @storybook/react-vite); apps/storybook has @storybook/react-vite installed and ~33 stories already import from it, so no change required.
Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (1)
5-11: Don't switch to package-root imports — these symbols aren't re-exported from the package rootsThe lists/types are only exported from internal files:
- packages/cyberstorm-theme/src/components/SelectSearch/SelectSearch.ts — SelectSearchVariantsList, SelectSearchSizesList, SelectSearchModifiersList
- packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx — SelectOption
- packages/cyberstorm/src/newComponents/Select/Select.tsx — SelectOption
Either add barrel re-exports at the package roots (e.g., packages/cyberstorm-theme/src/index.ts and packages/cyberstorm/src/index.ts) and then switch to root imports, or keep the current deep imports.
Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (2)
40-47: Nice override example.Good demonstration of theme override via wrapper class.
1-1: Do not switch — keep importing types from '@storybook/react-vite'.Repo uses Storybook 9 with the React+Vite builder (apps/storybook/package.json includes "@storybook/react-vite" and apps/storybook/.storybook/main.ts references it); Storybook docs and this setup require importing Meta/StoryObj from the framework package ('@storybook/react-vite'), so the suggested change to '@storybook/react' is incorrect.
Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (4)
1-1: Use '@storybook/react' for types (same as prior comment).-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-8: Avoid deep imports from theme '/src' (same as prior comment).-} from "@thunderstore/cyberstorm-theme/src/components"; +} from "@thunderstore/cyberstorm-theme";
39-97: Good showcase across sizes/variants/modifiers.Clear, consistent render mapping; easy to scan.
21-31: Verify NewSelect supportsdefaultOpen; avoid opening all examples by default.If unsupported, this will break. Even if supported, multi-examples will all render open. Prefer setting it only on Default.
Change meta args:
args: { options: [ { value: "one", label: "One" }, { value: "two", label: "Two" }, { value: "three", label: "Three" }, ], value: "one", placeholder: "Choose one", "aria-label": "Demo select", - defaultOpen: true, },And set it on Default:
-export const Default: Story = { args: {} }; +export const Default: Story = { args: { defaultOpen: true } };Verify the prop exists:
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (3)
1-1: Use '@storybook/react' for types (same as prior comment).-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
5-8: Avoid deep imports from theme '/src' (same as prior comment).-} from "@thunderstore/cyberstorm-theme/src/components"; +} from "@thunderstore/cyberstorm-theme";
11-29: Overall meta config looks solid.Args/controls align with the component surface; good defaults.
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
from
715623a to
3b55593
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (9)
apps/storybook/.storybook/main.ts (1)
12-14: Return a typed value fromgetAbsolutePath.The helper always returns a string path, so keeping the return type as
anyjust hides potential mistakes elsewhere. Switching this tostringretains type-safety without changing behavior.Apply this diff:
-function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string {apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (1)
1-19: Import story types from@storybook/react.The Storybook docs and type definitions expose
Meta/StoryObjthrough@storybook/react. Importing from the framework wrapper can break when its re-exports change, so it’s safer to pull the types from the canonical package.Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx (1)
61-68: Prefer a typed levels constant to drop per-item casting.Hoisting the levels into a
const ... as constarray gives you the desired literal union type and avoids repeating theas "1" | ...assertion for every render pass.- const allHeadings = ["1", "2", "3", "4", "5", "6"].map((level) => ( - <div key={level} style={{ marginBottom: "1rem" }}> - <Heading {...args} csLevel={level as "1" | "2" | "3" | "4" | "5" | "6"}> + const headingLevels = ["1", "2", "3", "4", "5", "6"] as const; + const allHeadings = headingLevels.map((level) => ( + <div key={level} style={{ marginBottom: "1rem" }}> + <Heading {...args} csLevel={level}>apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (4)
2-2: Centralize theme CSS import in preview.Import the theme once in .storybook/preview.(ts|tsx) instead of per‑story to avoid side effects and duplication.
Proposed change here (after moving it to preview):
-import "@thunderstore/cyberstorm-theme";Please confirm the theme is loaded globally in the new Storybook app’s preview file.
6-22: Type the sample data against the component props.Gives compile‑time validation of the community shape passed to CardCommunity.
Apply this diff within this block:
-const community = { +const community: React.ComponentProps<typeof CardCommunity>["community"] = {And add this import (outside the selected range):
+import type React from "react";
24-33: Disable “community” control to keep Controls panel usable.Editing a large object in Controls is noisy; keep toggles only for booleans.
Apply this diff:
argTypes: { isPopular: { control: "boolean" }, isNew: { control: "boolean" }, - community: { control: "object" }, + community: { control: false, table: { disable: true } }, },
35-39: Use a decorator for the fixed width wrapper instead of a per‑story render.Cleaner and applies consistently to all stories in this file.
Apply this diff:
- render: (args) => ( - <div style={{ width: "192px" }}> - <CardCommunity {...args} /> - </div> - ), + decorators: [ + (Story) => ( + <div style={{ width: "192px" }}> + <Story /> + </div> + ), + ],apps/storybook/src/stories/cyberstormComponents/ValidationBar.css (1)
1-6: Make the override effective despite CSS Modules and cascade layersAs written, this selector likely won’t win against unlayered library CSS, and it won’t match hashed CSS‑Module classnames. Match by substring and force-disable the animation.
Apply:
@layer storybook-stories { - .validation-bar--spin { - /* Disable animation to prevent flaky snapshots */ - animation: unset; - } + /* Match CSS Modules' hashed class and override library CSS */ + :where([class*="validation-bar--spin"]) { + /* Disable animation to prevent flaky snapshots */ + animation: none !important; + } }If you prefer avoiding
!important, ensure the library styles are layered with lower precedence, which isn’t usually feasible for third‑party packages. Based on learningsapps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (1)
23-33: Re‑enable the “processing” variant after the CSS fixOnce the CSS override is effective, you can safely show the spinner variant without flaky snapshots.
Apply:
<ValidationBar status="waiting" message="Waiting for input" /> - {/* We can't disable the spinning icon because of css modules, so disable this for now */} - {/* <ValidationBar status="processing" message="Processing..." /> */} + <ValidationBar status="processing" message="Processing..." /> <ValidationBar status="success" message="Success!" /> <ValidationBar status="failure" message="Failure!" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/cyberstorm-storybook/public/images/communitygrid.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/login_hexagon.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/tsmm_screenshot.pngis excluded by!**/*.pngapps/cyberstorm-storybook/stories/assets/code-brackets.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/colors.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/comments.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/direction.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/flow.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/plugin.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/repo.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/stackalt.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (77)
.github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/cyberstorm-storybook/.gitignore(0 hunks)apps/cyberstorm-storybook/.storybook/main.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview-head.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview.js(0 hunks)apps/cyberstorm-storybook/.storybook/storybook.css(0 hunks)apps/cyberstorm-storybook/Dockerfile(0 hunks)apps/cyberstorm-storybook/constants.ts(0 hunks)apps/cyberstorm-storybook/package.json(0 hunks)apps/cyberstorm-storybook/storage.ts(0 hunks)apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx(0 hunks)apps/cyberstorm-storybook/tsconfig.json(0 hunks)apps/cyberstorm-storybook/types.d.ts(0 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/eslint.config.js(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)eslint.config.mjs(2 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(3 hunks)
💤 Files with no reviewable changes (21)
- apps/cyberstorm-storybook/constants.ts
- apps/cyberstorm-storybook/package.json
- apps/cyberstorm-storybook/.gitignore
- apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
- apps/cyberstorm-storybook/storage.ts
- apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
- apps/cyberstorm-storybook/types.d.ts
- apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx
- apps/cyberstorm-storybook/.storybook/main.js
- apps/cyberstorm-storybook/.storybook/preview-head.js
- apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx
- apps/cyberstorm-storybook/tsconfig.json
- apps/cyberstorm-storybook/Dockerfile
- apps/cyberstorm-storybook/.storybook/storybook.css
- apps/cyberstorm-storybook/.storybook/preview.js
- apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/storybook/.gitignore
🚧 Files skipped from review as they are similar to previous changes (29)
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css
- apps/storybook/tsconfig.node.json
- apps/storybook/index.html
- apps/storybook/src/stories/cyberstormComponents/Icon.css
- apps/storybook/tsconfig.json
- apps/storybook/package.json
- packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx
- packages/cyberstorm-theme/src/components/DropDown/DropDown.css
- apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx
- apps/storybook/Dockerfile
- apps/storybook/tsconfig.app.json
- apps/storybook/.storybook/styles.css
- packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
- apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx
- apps/storybook/vite.config.ts
- apps/storybook/eslint.config.js
- apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx
- packages/cyberstorm/src/newComponents/Icon/Icon.tsx
- apps/storybook/.storybook/preview.tsx
- apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/CodeInput.css
- apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (3)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (3)
TagVariantsList(80-80)TagSizesList(82-82)TagModifiersList(84-84)
apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (1)
packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx (1)
SelectOption(17-21)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Generate visual diffs
- GitHub Check: Test
- GitHub Check: CodeQL
🔇 Additional comments (18)
apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx (1)
4-15: Story configuration looks solidNice use of
satisfies Meta<typeof CodeBox>plus a sharedStoryalias; both stories inherit the default args cleanly.apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (1)
36-40: Rename story export to satisfy Biome lint (no-shadow).
export const Errorstill shadows the globalError, so Biome continues to fail. Rename the identifier (and optionally setnameto keep Storybook’s label).-export const Error: Story = { - args: { - validationBarProps: { status: "failure", message: "failure message" }, - }, -}; +export const ErrorState: Story = { + name: "Error", + args: { + validationBarProps: { status: "failure", message: "failure message" }, + }, +};apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
1-1: Switch to@storybook/reactstory typesStorybook 9 expects
Meta/StoryObjfrom@storybook/react; keeping the-viteimport breaks type resolution. Please update the import accordingly.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx (2)
133-139: Sizes story still missingcsSizeThe story iterates the size list but never passes
csSizeintoNewSelectSearch, so every example renders with the default size and the story fails to demonstrate the variations. Please wire the mappedsizevalue through to the component.
160-166: Modifiers story still missingcsModifiersLikewise, each modifier label is rendered but the actual
csModifiersprop is never applied toNewSelectSearch, so the modifier variants are indistinguishable. Pass the mappedmodifier(typically as an array) tocsModifiers..github/workflows/test.yml (1)
169-170: Chromatic project path update looks goodPointing the matrix to
apps/storybooklines up with the new Storybook app introduced in this PR while keeping the existing Chromatic token. 👍apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (1)
1-1: Switch Storybook type import to@storybook/react.Storybook’s recommended typing surface comes from
@storybook/react; pullingMeta/StoryObjfrom@storybook/react-viterisks drifting from the canonical type definitions as the framework evolves. Please align with the upstream guidance.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx (1)
8-9: Confirm FontAwesome deps are wired into StorybookThis story now imports
@fortawesome/react-fontawesomeand@fortawesome/free-solid-svg-icons, but I didn’t see matching dependency additions in the Storybook package. If they’re still missing, the build will fail—please double-check.#!/bin/bash set -euo pipefail pkg="apps/storybook/package.json" if [ ! -f "$pkg" ]; then echo "❌ $pkg not found. Please ensure the Storybook workspace has its own package.json." exit 1 fi echo "Inspecting $pkg for FontAwesome dependencies..." jq '.dependencies // {} + .devDependencies // {}' "$pkg" jq -e '((.dependencies // {}) + (.devDependencies // {})) | has("@fortawesome/react-fontawesome")' "$pkg" >/dev/null \ && echo "✅ @fortawesome/react-fontawesome declared." \ || { echo "❌ @fortawesome/react-fontawesome missing."; exit 1; } jq -e '((.dependencies // {}) + (.devDependencies // {})) | has("@fortawesome/free-solid-svg-icons")' "$pkg" >/dev/null \ && echo "✅ @fortawesome/free-solid-svg-icons declared." \ || { echo "❌ @fortawesome/free-solid-svg-icons missing."; exit 1; }apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx (1)
1-1: Switch to the canonical Storybook type importStorybook 9 expects stories to pull
Meta/StoryObjfrom@storybook/react; keeping the@storybook/react-viteimport leads to type resolution drift (and it was already called out earlier). Please adjust the import to the canonical package.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
1-43: Fix Storybook type import and remove theanyescape hatchWe still pull types from
@storybook/react-vite, and the story silences typing withas any. Importing from@storybook/reactand deriving the package data type from the component keeps Storybook 9 happy and preserves type safety.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react"; +import type { ComponentProps } from "react"; import "@thunderstore/cyberstorm-theme"; import { CardPackage } from "@thunderstore/cyberstorm"; import goblin from "../assets/goblin.png"; +type Props = ComponentProps<typeof CardPackage>; + const now = new Date("2023-01-01T00:00:00Z"); const modPackage = { community_identifier: "valheim", namespace: "Team", name: "cool-mod", description: "A cool mod", icon_url: goblin, download_count: 12345, rating_count: 678, categories: [ { id: "ui", name: "UI" }, { id: "qol", name: "QoL" }, ], is_pinned: true, is_nsfw: true, is_deprecated: true, last_updated: now, -} as any; +} satisfies Props["packageData"];apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
1-1: Restore the default Storybook 9 type importSame issue as the other stories: we should grab
Meta/StoryObjfrom@storybook/react, not the builder-specific package.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx (1)
1-1: Use@storybook/reactfor the story typesPlease align this file with SB9 guidance by switching the import source.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx (1)
1-1: Point the Storybook types at@storybook/reactThis story still targets the deprecated
@storybook/react-viteentry—swap it to the canonical package.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
1-1: Correct the Storybook type importWe should standardize on
@storybook/reactforMeta/StoryObjto avoid builder-specific drift.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (2)
1-1: Swap Storybook types to the canonical packageSame adjustment as the other stories: import the types from
@storybook/react.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
39-79: Remove duplicatekeyprops on theNewSwitchsiblingsBoth switches inside each group share the same
key, which still triggers React warnings and isn’t needed here. Drop the redundant keys (the wrapper<div>already carries a stable key).- <NewSwitch key={variant} csVariant={variant} {...args} /> - <NewSwitch key={variant} csVariant={variant} {...args} value={true} /> + <NewSwitch csVariant={variant} {...args} /> + <NewSwitch csVariant={variant} {...args} value={true} />Repeat the same change for the size and modifier sections.
apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx (1)
1-15: Solid Storybook meta setupCleanly typed meta with sensible defaults and the theme import ensures visual parity with the app. Looks good.
apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (1)
1-3: No change needed:@storybook/react-vitere-exportsMeta/StoryObj
@storybook/react-vite@9.1.8’s types file begins withexport * from '@storybook/react', so your current imports already includeMetaandStoryObj.Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx
Show resolved
Hide resolved
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx
Show resolved
Hide resolved
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
from
3b55593 to
7b8f531
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/cyberstorm-remix/package.json (1)
47-53: Raise Node engines to match Vite 7 requirement.
Vite 7.1.7 mandates Node 20.19+ (or 22.12+). Leaving ourengines.nodeat>=20.17.0means installs on a compliant setup per our package.json will fail with anEBADENGINEerror as soon as Vite’s postinstall runs. Please bump the engine constraint (and ensure CI/containers follow suit) so consumers aren’t blocked. (vite.dev)"engines": { - "node": ">=20.17.0" + "node": ">=20.19.0" },
♻️ Duplicate comments (14)
apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
21-21: Replace the nullsrcdefault
srcis optional onImage, but the prop expectsstring | undefined. Passingnullviolates the type contract and will either fail TS checks (because the filesatisfies Meta<typeof Image>) or stringify to"null"at runtime. Drop the key or set it toundefinedinstead.Here’s the minimal fix:
- args: { src: null, cardType: "community" }, + args: { cardType: "community" },apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
27-48: Hard-coded modal ID breaks dynamic popoverId control.The trigger button, useEffect, and Modal id all reference
"modal-1"directly, ignoring thepopoverIdarg. When a user changespopoverIdvia controls, the button will target the wrong element and the modal won't open.Derive all IDs from
args.popoverIdin the render function.
50-72: Same hard-coded ID issue in SmallSize story.Identical problem:
"modal-2"is hard-coded in the trigger, useEffect, and Modal id, breaking thepopoverIdcontrol.Apply the same fix pattern as recommended for the Default story.
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (2)
4-18: Ensure*.pngmodule declarations are present.This story imports
catheim.png. Confirm there's a declaration (declare module "*.png") picked up by the Storybook tsconfig; otherwise TS will error on the import. A tinyapps/storybook/src/types/assets.d.tsworks well.declare module "*.png" { const src: string; export default src; }
1-1: Use@storybook/reactfor Storybook 9 types.
@storybook/react-viteno longer ships the type exports in SB9; the build will fail to resolve this import. Point the type import at@storybook/reactinstead.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (2)
4-23: DerivepackageData’s type instead of castingany.We already know CardPackage’s props—lean on them to keep the story type-safe.
-import { CardPackage } from "@thunderstore/cyberstorm"; +import { CardPackage } from "@thunderstore/cyberstorm"; +import type { ComponentProps } from "react"; @@ -const modPackage = { +type Props = ComponentProps<typeof CardPackage>; + +const modPackage: Props["packageData"] = { community_identifier: "valheim", namespace: "Team", name: "cool-mod", @@ - last_updated: now, -} as any; + last_updated: now, +};
1-1: Switch Storybook type import to@storybook/react.
@storybook/react-viteno longer provides these exports, so this import path breaks Storybook 9 builds. Use the core package instead.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (1)
1-1: Import Storybook types from '@storybook/react'This issue was already flagged in a previous review. For Storybook 9 compatibility, import from
"@storybook/react"instead of"@storybook/react-vite".apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx (1)
8-9: Confirm FontAwesome deps before mergeDouble-check that
@fortawesome/react-fontawesomeand@fortawesome/free-solid-svg-iconsare listed in the Storybook workspace package.json; otherwise this story will fail at build time. Please confirm or add them.#!/bin/bash set -euo pipefail for file in apps/storybook/package.json package.json; do if [ -f "$file" ]; then echo "Checking $file" if ! jq '{dependencies,devDependencies,peerDependencies}' "$file" | rg '@fortawesome' -n; then echo "No FontAwesome deps declared in $file" fi fi doneapps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx (1)
1-1: Use Storybook types from '@storybook/react'Import
MetaandStoryObjfrom the canonical types package per Storybook 9 docs.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (1)
36-40: Rename story to avoid shadowing global ErrorKeeps linters happy and avoids confusion.
-export const Error: Story = { +export const ErrorState: Story = { + name: "Error", args: { validationBarProps: { status: "failure", message: "failure message" }, }, };Scan for similar cases:
#!/bin/bash rg -nP 'export\s+const\s+Error\b' -g '!**/node_modules/**'apps/storybook/Dockerfile (1)
4-12: Enable Corepack before Yarn to avoid build flakinessActivate Yarn in Node 24 images.
FROM node:24.1.0-alpine3.21 AS builder WORKDIR /app COPY package.json yarn.lock babel.config.js ./ COPY apps/storybook ./apps/storybook COPY packages ./packages -RUN yarn install --frozen-lockfile +RUN corepack enable +RUN yarn install --frozen-lockfile RUN yarn build RUN yarn workspace @thunderstore/storybook run build-storybookOptional: pin Yarn via "packageManager": "yarn@" in root package.json for reproducibility.
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
1-1: Fix Storybook type importImporting
Meta/StoryObjfrom@storybook/react-vitebreaks SB9 type resolution; use@storybook/reactinstead.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (1)
1-1: Fix Storybook type importStorybook 9 expects these types from
@storybook/react; keep the imports aligned to avoid resolution failures.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
🧹 Nitpick comments (8)
apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css (1)
42-49: Consider addingalign-items: centerfor consistent centering.The flexbox layout centers horizontally via
justify-content: center, but withoutalign-itemsspecified, the SVG will stretch vertically (defaultstretchbehavior). If the intent is to center the logo both horizontally and vertically, addalign-items: center..footer__logo { display: flex; justify-content: center; + align-items: center; > svg { height: var(--footer-info-leftside-company-icon-height); } }apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (1)
4-7: Import from public API
In Modal.stories.tsx (lines 4–7), avoid importing from@thunderstore/cyberstorm-theme/src/components. Re-exportModalSizesListandModalVariantsListfrom the theme’s main entry (@thunderstore/cyberstorm-theme) and import them via the public API to prevent breakage if internals change.apps/storybook/.storybook/main.ts (1)
12-14: Consider tightening the return type.The
anyreturn type works but could bestringfor better type safety, sincedirname()returns a string.-function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string { return dirname(require.resolve(join(value, "package.json"))); }apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (1)
1-1: Prefer importing types from '@storybook/react'Type-only imports should come from '@storybook/react' to avoid type resolution issues across builders.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx (2)
1-1: Import Storybook types from '@storybook/react'Prevents future breakage and follows SB guidance.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
5-7: Avoid deep imports into theme 'src'Deep imports are brittle across builds/publishes. Prefer package surface exports; re-export if needed.
-import { - AlertSizesList, - AlertVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { AlertSizesList, AlertVariantsList } from "@thunderstore/cyberstorm-theme";apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (2)
1-1: Use '@storybook/react' for Meta/StoryObj typesAlign with Storybook guidance and avoid builder-specific coupling.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
5-8: Avoid deep import into theme sourcesPrefer stable package exports; re-export lists from theme root if needed.
-import { - CodeInputModifiersList, - CodeInputSizesList, - CodeInputVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +import { + CodeInputModifiersList, + CodeInputSizesList, + CodeInputVariantsList, +} from "@thunderstore/cyberstorm-theme";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/cyberstorm-storybook/public/images/communitygrid.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/login_hexagon.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/tsmm_screenshot.pngis excluded by!**/*.pngapps/cyberstorm-storybook/stories/assets/code-brackets.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/colors.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/comments.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/direction.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/flow.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/plugin.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/repo.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/stackalt.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (78)
.github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/cyberstorm-storybook/.gitignore(0 hunks)apps/cyberstorm-storybook/.storybook/main.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview-head.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview.js(0 hunks)apps/cyberstorm-storybook/.storybook/storybook.css(0 hunks)apps/cyberstorm-storybook/Dockerfile(0 hunks)apps/cyberstorm-storybook/constants.ts(0 hunks)apps/cyberstorm-storybook/package.json(0 hunks)apps/cyberstorm-storybook/storage.ts(0 hunks)apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx(0 hunks)apps/cyberstorm-storybook/tsconfig.json(0 hunks)apps/cyberstorm-storybook/types.d.ts(0 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/eslint.config.js(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)eslint.config.mjs(2 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(1 hunks)
💤 Files with no reviewable changes (21)
- apps/cyberstorm-storybook/.storybook/preview.js
- apps/cyberstorm-storybook/.storybook/main.js
- apps/cyberstorm-storybook/types.d.ts
- apps/cyberstorm-storybook/.storybook/preview-head.js
- apps/cyberstorm-storybook/constants.ts
- apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
- apps/cyberstorm-storybook/storage.ts
- apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx
- apps/cyberstorm-storybook/.gitignore
- apps/cyberstorm-storybook/package.json
- apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
- apps/cyberstorm-storybook/.storybook/storybook.css
- apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
- apps/cyberstorm-storybook/tsconfig.json
- apps/cyberstorm-storybook/Dockerfile
🚧 Files skipped from review as they are similar to previous changes (31)
- apps/storybook/tsconfig.json
- apps/storybook/.gitignore
- apps/storybook/tsconfig.node.json
- apps/storybook/src/stories/cyberstormComponents/Icon.css
- apps/storybook/index.html
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx
- .github/workflows/test.yml
- packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
- package.json
- apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx
- apps/storybook/.storybook/preview.tsx
- apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx
- apps/storybook/package.json
- apps/storybook/tsconfig.app.json
- apps/storybook/.storybook/styles.css
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css
- apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx
- packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx
- apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/ValidationBar.css
- apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (5)
packages/cyberstorm/src/newComponents/Icon/Icon.tsx (1)
packages/cyberstorm/src/utils/utils.ts (2)
classnames(34-38)componentClasses(40-59)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
MetaItemVariantsList(100-100)MetaItemSizesList(102-102)
apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
IconVariantsList(69-69)
apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
ImageVariantsList(113-113)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Test
- GitHub Check: Generate visual diffs
- GitHub Check: CodeQL
🔇 Additional comments (15)
apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (1)
10-22: LGTM!Meta configuration correctly sets up controls and defaults for the Modal component.
apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
23-37: LGTM!The story correctly demonstrates the Drawer component with proper popover API wiring between the trigger button and drawer target.
apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx (1)
16-22: LGTM!The story correctly renders a Tooltip in an open state with appropriate default args and centered layout.
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (2)
30-34: LGTM!Both stories are well-structured:
Defaultuses the default args, andWithImagedemonstrates the Avatar with an image source.
1-1: Use Storybook types from '@storybook/react'Import
MetaandStoryObjfrom the canonical types package per Storybook 9 docs.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";Likely an incorrect or invalid review comment.
packages/cyberstorm-theme/src/components/DropDown/DropDown.css (1)
42-45: Safe to merge – all.dropdown__dividerelements receive a--variant--primaryclass by default viacomponentClasses, so the narrowed selector still matches every divider.apps/storybook/src/stories/cyberstormComponents/CodeInput.css (1)
1-6: LGTM!Clean use of CSS layers to isolate Storybook-specific overrides. Disabling animations for snapshot stability is a solid practice.
packages/cyberstorm/src/newComponents/Icon/Icon.tsx (1)
17-23: Conditional class forwarding looks correct.The logic properly handles the
noWrappermode:
- When
noWrapper=true: appliesrootClassesdirectly to the icon element and ignoreswrapperClasses- When
noWrapper=false: applieswrapperClassesto the wrapper and lets Frame handle root classesThe
classnames()utility safely filters undefined values, so this is clean.apps/storybook/vite.config.ts (1)
1-7: LGTM! Minimal Vite config is appropriate.This is a clean, minimal Vite setup for the Storybook app. Storybook's own configuration (main.ts) handles most build specifics, so keeping this lean is the right call.
eslint.config.mjs (2)
1-2: Good addition of the Storybook plugin.The import and comment reference align with the official Storybook ESLint plugin documentation for flat config.
93-93: Correct placement of Storybook config.Spreading
storybook.configs["flat/recommended"]at the end ensures Storybook-specific rules are applied without being overridden by earlier configs. Good practice.apps/storybook/.storybook/main.ts (2)
17-20: Verify addon-onboarding retention.The
addon-onboardingis typically used for first-time Storybook setup and can be removed after initial onboarding. Is this intentionally kept for new contributors, or should it be removed?
15-26: Config structure looks solid.Clean Storybook config with proper monorepo path resolution, appropriate story patterns, and framework setup for React + Vite.
apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx (2)
19-19: Controlled value without change handlerIf TextAreaInput is controlled, prefer defaultValue or provide onChange.
-export const WithValue: Story = { args: { value: "Some text..." } }; +export const WithValue: Story = { args: { defaultValue: "Some text..." } };Or add onChange: () => {} if it’s truly controlled.
8-8: Ignore change—story prop is correct
TheTextAreaInputcomponent defines its prop asplaceHolder(TextAreaInput.tsx line 5), so the story’sargs: { placeHolder: … }is accurate. Rename the component prop toplaceholderif you want to standardize naming across inputs.Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx
Outdated
Show resolved
Hide resolved
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
from
7b8f531 to
b8e1250
Compare
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/cyberstorm-remix/app/root.tsx (1)
385-392: MissingTeamSettingsin LinkLibraryThe new
linkId="TeamSettings"isn’t defined in apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx (and there’s no existing"Team"key), so the breadcrumb will break at runtime. Either add a"TeamSettings"entry to thelibrarymapping or revert to an existinglinkId.
♻️ Duplicate comments (11)
apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (3)
1-13: Import Storybook types from@storybook/react.Pulling
Meta/StoryObjfrom@storybook/react-vitebreaks type resolution in SB 9; use@storybook/reactinstead.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
18-28: Mark the current breadcrumb as non-navigable.The trailing crumb represents the active page but is still rendered as a link without
aria-current, which is an a11y regression. Render it as a non-link element (or setaria-current="page").- <NewBreadCrumbsLink primitiveType="link" href="#"> - Item - </NewBreadCrumbsLink> + <NewBreadCrumbsLink primitiveType="span" aria-current="page"> + Item + </NewBreadCrumbsLink>
36-45: Apply the same current-crumb treatment in the Short story.Mirror the accessibility fix here so both stories keep the current breadcrumb non-interactive.
- <NewBreadCrumbsLink primitiveType="link" href="#"> - Item - </NewBreadCrumbsLink> + <NewBreadCrumbsLink primitiveType="span" aria-current="page"> + Item + </NewBreadCrumbsLink>apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
27-37: Trigger still hardcoded despite marked as addressed.The past review flagged that the trigger's
popoverTarget="modal-1"should derive fromargs.popoverIdto stay in sync when the control changes. The current code still hardcodes"modal-1"in the trigger (line 31), so changingpopoverIdvia controls will break the button.Move the trigger inside the render function to derive it from
args.popoverId:export const Default: Story = { args: { popoverId: "modal-1", - trigger: ( - <NewButton popoverTarget="modal-1" popoverTargetAction="show"> - Open modal - </NewButton> - ), }, - render: (args) => <DefaultComponent args={args} />, + render: (args) => ( + <DefaultComponent + args={{ + ...args, + trigger: ( + <NewButton popoverTarget={args.popoverId} popoverTargetAction="show"> + Open modal + </NewButton> + ), + }} + /> + ), };
53-64: Apply the same trigger fix toSmallSize.The
SmallSizestory has the identical issue: the trigger is hardcoded to"modal-2"instead of deriving fromargs.popoverId.export const SmallSize: Story = { args: { popoverId: "modal-2", - trigger: ( - <NewButton popoverTarget="modal-2" popoverTargetAction="show"> - Open modal - </NewButton> - ), csSize: ModalSizesList[1], }, - render: (args) => <SmallSizeComponent args={args} />, + render: (args) => ( + <SmallSizeComponent + args={{ + ...args, + trigger: ( + <NewButton popoverTarget={args.popoverId} popoverTargetAction="show"> + Open modal + </NewButton> + ), + }} + /> + ), };apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx (1)
22-22: Drop the lockedvaluedefaultHard-wiring
value: ""turns the story into a controlled input stuck on an empty string, so you can’t type into it and React logs warnings. Let Storybook controlvalue(or add local state) instead.- args: { value: "", placeholder: "Type here..." }, + args: { placeholder: "Type here..." },apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
1-1: Switch Storybook types to@storybook/reactStorybook 9 resolves React stories from
@storybook/react; the@storybook/react-vitetypes are legacy and will trip up the new builder.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
1-1: Import Meta/StoryObj from@storybook/react, not the framework adapter.The types should come from
@storybook/reactregardless of the builder/framework. The@storybook/react-vitepackage is the framework integration, not the type source.Apply this diff:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
1-1: Switch Storybook types import to@storybook/react.Use the primary Storybook React package so the typings stay aligned with the framework.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/eslint.config.js (1)
13-17: Fix TypeScript config spreading in ESLint extends.
tseslint.configs.recommendedis an array; keeping it nested means the TypeScript parser and rules never register. Spread it so ESLint actually loads those configs.extends: [ js.configs.recommended, - tseslint.configs.recommended, + ...tseslint.configs.recommended, reactHooks.configs["recommended-latest"], reactRefresh.configs.vite, ],apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (1)
34-40: Rename story export to avoid globalErrorshadow.Line 36 still exports
const Error, so Biome keeps failing with the restricted-name rule. Rename the export (e.g.ErrorState) and setname: "Error"if you want the story label to stay the same.-export const Error: Story = { +export const ErrorState: Story = { + name: "Error", args: { validationBarProps: { status: "failure", message: "failure message" }, },
🧹 Nitpick comments (8)
apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (2)
5-5: Prefer package import over deep relative path.The relative traversal
../../../../../packages/dapper/src/typesis fragile. If@thunderstore/dapperexportsPackageListingpublicly, import it directly from the package.If the type is exported, apply this diff:
-import type { PackageListing } from "../../../../../packages/dapper/src/types"; +import type { PackageListing } from "@thunderstore/dapper";Otherwise, configure a path alias in tsconfig or verify the export.
7-26: Usesatisfiesinstead of type assertion for better type checking.Replace
as PackageListingwithsatisfies PackageListingto preserve type inference while ensuring the object matches the type contract.Apply this diff:
-} as PackageListing; +} satisfies PackageListing;apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (2)
30-85: Extract repeated render wrapper to reduce duplication.The
Variants,Sizes, andModifiersstories share identical wrapper styling. Consider extracting the common wrapper styles to a constant or helper component.+const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => ( + <div + style={{ + display: "flex", + gap: "1rem", + alignItems: "center", + flexWrap: "wrap", + }} + > + {children} + </div> +); + export const Variants: Story = { render: (args) => ( - <div - style={{ - display: "flex", - gap: "1rem", - alignItems: "center", - flexWrap: "wrap", - }} - > + <StoryWrapper> {TagVariantsList.map((variant) => ( <NewTag {...args} key={variant} csVariant={variant}> {variant} </NewTag> ))} - </div> + </StoryWrapper> ), };Apply similar changes to
Sizes,Modifiers, andModesstories.
87-104: Consider using args parameter in Modes story.The
renderfunction doesn't use theargsparameter, which prevents control customization via Storybook's UI. If intentional to show fixed examples, this is acceptable; otherwise, consider spreading{...args}into each tag for consistency with other stories.apps/storybook/src/stories/cyberstormComponents/CodeInput.css (1)
1-6: Consolidate duplicate animation override
Extract the.validation-bar--spin { animation: unset; }rule into a shared stylesheet (e.g.stories/common.css) and import it in bothapps/storybook/src/stories/cyberstormComponents/ValidationBar.cssandapps/storybook/src/stories/cyberstormComponents/CodeInput.css.apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (1)
1-1: Switch Storybook types import to@storybook/react.Storybook 9 expects the framework types from
@storybook/react; the-viteentry is legacy and may lag behind.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
1-1: Switch Storybook types import to@storybook/react.Stay on the canonical Storybook React entry so the builder choice comes from config, not the type package.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/Dockerfile (1)
4-4: Standardize Node version pinning across all Dockerfiles
All current Dockerfiles pin Node to24.1.0-alpine3.21. To ensure timely security and patch updates, choose either to adopt a minor-only tag (e.g.,node:24-alpine3.21) or to maintain explicit patch pins, and apply that policy consistently across the repo.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/cyberstorm-storybook/public/images/communitygrid.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/login_hexagon.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/tsmm_screenshot.pngis excluded by!**/*.pngapps/cyberstorm-storybook/stories/assets/code-brackets.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/colors.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/comments.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/direction.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/flow.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/plugin.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/repo.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/stackalt.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (81)
.github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css(1 hunks)apps/cyberstorm-remix/app/root.tsx(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/cyberstorm-storybook/.gitignore(0 hunks)apps/cyberstorm-storybook/.storybook/main.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview-head.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview.js(0 hunks)apps/cyberstorm-storybook/.storybook/storybook.css(0 hunks)apps/cyberstorm-storybook/Dockerfile(0 hunks)apps/cyberstorm-storybook/constants.ts(0 hunks)apps/cyberstorm-storybook/package.json(0 hunks)apps/cyberstorm-storybook/storage.ts(0 hunks)apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx(0 hunks)apps/cyberstorm-storybook/tsconfig.json(0 hunks)apps/cyberstorm-storybook/types.d.ts(0 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/eslint.config.js(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)eslint.config.mjs(2 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/index.ts(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/Modal/Modal.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(1 hunks)
💤 Files with no reviewable changes (21)
- apps/cyberstorm-storybook/constants.ts
- apps/cyberstorm-storybook/types.d.ts
- apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
- apps/cyberstorm-storybook/.storybook/preview-head.js
- apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
- apps/cyberstorm-storybook/storage.ts
- apps/cyberstorm-storybook/Dockerfile
- apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx
- apps/cyberstorm-storybook/tsconfig.json
- apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
- apps/cyberstorm-storybook/.storybook/main.js
- apps/cyberstorm-storybook/package.json
- apps/cyberstorm-storybook/.storybook/storybook.css
- apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx
- apps/cyberstorm-storybook/.storybook/preview.js
- apps/cyberstorm-storybook/.gitignore
🚧 Files skipped from review as they are similar to previous changes (32)
- apps/storybook/tsconfig.json
- apps/storybook/.gitignore
- packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
- packages/cyberstorm-theme/src/components/DropDown/DropDown.css
- apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css
- apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx
- apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
- apps/storybook/package.json
- packages/cyberstorm/src/newComponents/Icon/Icon.tsx
- apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx
- apps/storybook/vite.config.ts
- apps/storybook/.storybook/preview.tsx
- apps/storybook/.storybook/styles.css
- packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx
- apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx
- apps/storybook/index.html
- apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx
- eslint.config.mjs
- .github/workflows/test.yml
- apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (6)
apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (3)
TagVariantsList(80-80)TagSizesList(82-82)TagModifiersList(84-84)
packages/cyberstorm/src/newComponents/Modal/Modal.tsx (3)
packages/cyberstorm/src/index.ts (3)
ModalProps(44-44)FrameModalProps(28-28)Modal(44-44)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
FrameModalProps(53-59)packages/cyberstorm-theme/src/components/Modal/Modal.ts (2)
ModalVariants(3-3)ModalSizes(7-7)
apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
ImageVariantsList(113-113)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx (1)
packages/cyberstorm/src/newComponents/Pagination/Pagination.tsx (1)
PaginationProps(9-15)
apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
packages/cyberstorm/src/index.ts (2)
Modal(44-44)ModalProps(44-44)packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)
Modal(19-50)ModalProps(11-15)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Test
- GitHub Check: Generate visual diffs
- GitHub Check: CodeQL
🔇 Additional comments (12)
apps/storybook/src/stories/cyberstormComponents/Icon.css (1)
1-10: Looks tidy to me.Layer-scoped styles keep Storybook-specific sizing and color token tidy without leaking elsewhere. Nicely done.
packages/cyberstorm/src/index.ts (1)
44-44: LGTM! Clean type export.Exposing
ModalPropsalongside the component follows best practices and enables type-safe usage in consuming code.packages/cyberstorm/src/newComponents/Modal/Modal.tsx (1)
11-19: LGTM! Proper interface design.The
ModalPropsinterface correctly extendsFrameModalPropsand omitsprimitiveType(which is fixed internally). Exporting the interface and updating the component signature enables clean type-safe consumption.apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
28-56: LGTM! Clean story structure.The meta configuration and stories follow Storybook best practices. The render wrapper ensures consistent visual presentation, and the type annotations are correct.
apps/storybook/src/stories/cyberstormComponents/ValidationBar.css (1)
1-6: LGTM! Clean approach to stabilizing snapshots.The CSS layer isolates Storybook-specific overrides and the animation disable prevents flaky visual tests.
apps/cyberstorm-remix/package.json (1)
43-43: Verify the exact version pin for @types/react-dom.Pinning type definitions to exact versions (removing
^) prevents automatic patch updates. Ensure this is intentional, as type packages typically benefit from caret ranges to receive minor/patch fixes.package.json (3)
23-23: ESLint upgrade looks good.Minor version bump within v9 should be safe.
35-35: Globals 16 upgrade appears safe.Based on learnings, globals 16.4.0 is typically additive. Verify if any environment global definitions changed that affect your ESLint configuration.
30-30: Do you mean the Chromatic CLI v13 release or Storybook v13 integration changes for Chromatic? Let me know which one, and I’ll pull the relevant breaking changes and migration steps.apps/storybook/tsconfig.node.json (1)
1-26: Solid bundler-mode TypeScript configuration.The config is appropriate for Vite. Note that
erasableSyntaxOnly(line 21) andnoUncheckedSideEffectImports(line 23) are strict flags that may require explicit type-only imports. Ensurevite.config.tsbuilds without errors.apps/storybook/.storybook/main.ts (1)
15-25: LGTM!Config structure is correct for Storybook 9 monorepo setup. Using
getAbsolutePathfor addons and framework ensures compatibility with Yarn PnP and workspace resolution.apps/storybook/Dockerfile (1)
14-17: Verified nginx.conf and Storybook output directory—no changes needed.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.github/workflows/static-analysis.yml (1)
61-61: Consider updating upload-sarif action for consistency.While not flagged by actionlint, consider updating this action to v3 for consistency with the other CodeQL actions.
- uses: github/codeql-action/upload-sarif@v2 + uses: github/codeql-action/upload-sarif@v3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.github/workflows/static-analysis.yml(2 hunks)
🧰 Additional context used
🪛 actionlint (1.7.7)
.github/workflows/static-analysis.yml
83-83: the runner of "github/codeql-action/init@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
87-87: the runner of "github/codeql-action/analyze@v2" action is too old to run on GitHub Actions. update the action's version to fix this issue
(action)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Generate visual diffs
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
2 times, most recently
from
a3bf737 to
ed0c7a2
Compare
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
The AI suggestions for fixing the any type stuff is valid, but outside of this PRs scope |
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (16)
apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx (1)
1-1: Use Storybook types from '@storybook/react'.This was already flagged in a previous review. Import
MetaandStoryObjfrom"@storybook/react"instead of"@storybook/react-vite"to align with Storybook 9 conventions.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
25-51: Wire the trigger to a stable popover idLet’s mirror the other popover-driven stories: add a
popoverIdarg and connect the trigger button withpopoverTarget/popoverTargetAction. That keeps the story interactive even whendefaultOpenis toggled.args: { csModifiers: [], csSize: DropDownSizesList[0], csVariant: DropDownVariantsList[0], - defaultOpen: true, + popoverId: "dropdown-default", }, } satisfies Meta<typeof NewDropDown>; export const Default: Story = { - args: { trigger: <NewButton csVariant="secondary">Open menu</NewButton> }, render: (args) => ( - <NewDropDown {...args}> + <NewDropDown + {...args} + trigger={ + <NewButton + csVariant="secondary" + popoverTarget={args.popoverId} + popoverTargetAction="toggle" + > + Open menu + </NewButton> + } + >apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
27-51: Trigger still hard-coded despite past review—breaks whenpopoverIdchanges.The trigger at lines 30-34 is hard-coded to
"modal-1". WhenpopoverIdis changed via Storybook controls, the button will still target"modal-1", breaking the modal. The past review flagged this, but the trigger should be derived fromargs.popoverIdinside the component, not pre-set inargs.Move the trigger construction into
DefaultComponentso it uses the activepopoverId:export const Default: Story = { args: { popoverId: "modal-1", - trigger: ( - <NewButton popoverTarget="modal-1" popoverTargetAction="show"> - Open modal - </NewButton> - ), }, render: (args) => <DefaultComponent args={args} />, }; function DefaultComponent(props: { args: ModalProps }) { const { args } = props; useEffect(() => { const modalElement = document.getElementById(args.popoverId); if (!modalElement) return; modalElement.showPopover(); }, [args.popoverId]); return ( - <Modal id={args.popoverId} {...args}> + <Modal + id={args.popoverId} + {...args} + trigger={ + <NewButton popoverTarget={args.popoverId} popoverTargetAction="show"> + Open modal + </NewButton> + } + > <div style={{ padding: 16 }}>Modal content</div> </Modal> ); }
53-78: Apply the same trigger fix toSmallSize.Same issue as
Default: the trigger is hard-coded to"modal-2"at lines 56-60, so changingpopoverIdvia controls breaks the connection. Derive the trigger insideSmallSizeComponentfromargs.popoverId.export const SmallSize: Story = { args: { popoverId: "modal-2", - trigger: ( - <NewButton popoverTarget="modal-2" popoverTargetAction="show"> - Open modal - </NewButton> - ), csSize: ModalSizesList[1], }, render: (args) => <SmallSizeComponent args={args} />, }; function SmallSizeComponent(props: { args: ModalProps }) { const { args } = props; useEffect(() => { const modalElement = document.getElementById(args.popoverId); if (!modalElement) return; modalElement.showPopover(); }, [args.popoverId]); return ( - <Modal id={args.popoverId} {...args}> + <Modal + id={args.popoverId} + {...args} + trigger={ + <NewButton popoverTarget={args.popoverId} popoverTargetAction="show"> + Open modal + </NewButton> + } + > <div style={{ padding: 16 }}>Modal content</div> </Modal> ); }apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx (1)
1-20: Import Storybook generics from@storybook/reactPlease switch the Meta/StoryObj import to
@storybook/react. The@storybook/react-viteentrypoint isn’t part of the long-term public type surface and will break once that shim disappears.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (1)
1-1: Import Storybook types from '@storybook/react' for SB9 compatibility.Based on previous reviews, change the import source:
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (2)
1-1: Import Storybook types from '@storybook/react' for SB9 compatibility.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-7: Export lists from the public API to avoid internal path coupling.MetaItemSizesList and MetaItemVariantsList should be re-exported from the package entry point or configured as subpath exports.
apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
1-1: Import Storybook types from '@storybook/react' for SB9 compatibility.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (3)
1-1: Import Storybook types from '@storybook/react' for SB9 compatibility.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
4-8: Export lists from the public API to avoid internal path coupling.CodeInputModifiersList, CodeInputSizesList, and CodeInputVariantsList should be exported from the package entry point rather than imported from
/src/components.
36-40: RenameErrorexport to avoid shadowing global.The exported const
Errorshadows the built-in global, causing linter failures:-export const Error: Story = { +export const ErrorState: Story = { + name: "Error", args: { validationBarProps: { status: "failure", message: "failure message" }, }, };apps/storybook/.storybook/main.ts (1)
12-24: Return type should bestring.Line 12 still returns
any, tripping ESLint and weakening the Storybook config types. The helper always yields an absolute path string, so declare that explicitly.-function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string {apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (1)
1-40: Use Storybook types from@storybook/react.Storybook 9 exposes
Meta/StoryObjvia@storybook/react; pulling them from@storybook/react-vitebreaks type resolution. Swap the import to the supported package.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
1-34: Swap to@storybook/reactrenderer types.Importing
Meta/StoryObjfrom@storybook/react-viteprevents the SB9 React renderer from resolving the correct definitions. Point the import at@storybook/reactinstead.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
1-45: Align Storybook types with SB9.The Button story still imports
Meta/StoryObjfrom@storybook/react-vite, which is no longer the supported entry point. Switch to the React renderer types to keep TS happy.-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
🧹 Nitpick comments (2)
.github/workflows/static-analysis.yml (1)
61-87: Pin CodeQL actions to a fixed v3 releaseUsing the floating
@v3tag makes the workflow pick up new CodeQL drops without notice. Please pinupload-sarif,init, andanalyzeto a concrete v3.x.y release (e.g.v3.29.11) so we get reproducible CI and controlled rollouts.- uses: github/codeql-action/upload-sarif@v3 + uses: github/codeql-action/upload-sarif@v3.29.11 … - uses: github/codeql-action/init@v3 + uses: github/codeql-action/init@v3.29.11 … - uses: github/codeql-action/analyze@v3 + uses: github/codeql-action/analyze@v3.29.11apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx (1)
8-26: Prefersatisfiesover type assertion for better type safety.Using
satisfiesvalidates the object shape at compile time instead of bypassing type checking:-} as PackageListing; +} satisfies PackageListing;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (58)
.github/workflows/static-analysis.yml(2 hunks).github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/index.ts(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/Modal/Modal.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (32)
- apps/storybook/tsconfig.app.json
- apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx
- apps/storybook/.storybook/styles.css
- apps/storybook/vite.config.ts
- apps/storybook/Dockerfile
- apps/storybook/package.json
- apps/storybook/src/stories/cyberstormComponents/CodeInput.css
- apps/storybook/.gitignore
- apps/storybook/src/stories/cyberstormComponents/Icon.css
- apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx
- apps/storybook/index.html
- apps/storybook/src/stories/cyberstormComponents/ValidationBar.css
- apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx
- package.json
- apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css
- apps/storybook/.storybook/preview.tsx
- apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx
- apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
- apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx
- apps/cyberstorm-remix/package.json
- apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (6)
packages/cyberstorm/src/newComponents/Icon/Icon.tsx (1)
packages/cyberstorm/src/utils/utils.ts (2)
classnames(34-38)componentClasses(40-59)
apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
MetaItemVariantsList(100-100)MetaItemSizesList(102-102)
apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (1)
packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)
Modal(19-50)ModalProps(11-15)
packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)
packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
FrameModalProps(53-59)packages/cyberstorm-theme/src/components/Modal/Modal.ts (2)
ModalVariants(3-3)ModalSizes(7-7)
packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
packages/cyberstorm/src/utils/utils.ts (1)
classnames(34-38)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🪛 ESLint
apps/storybook/.storybook/main.ts
[error] 12-12: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
🪛 GitHub Check: ESLint
packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
[failure] 231-231: Disallow the any type
Unexpected any. Specify a different type.
[failure] 234-234: Disallow the any type
Unexpected any. Specify a different type.
[failure] 259-259: Disallow the any type
Unexpected any. Specify a different type.
[failure] 262-262: Disallow the any type
Unexpected any. Specify a different type.
[failure] 286-286: Disallow the any type
Unexpected any. Specify a different type.
[failure] 289-289: Disallow the any type
Unexpected any. Specify a different type.
apps/storybook/.storybook/main.ts
[failure] 12-12: Disallow the any type
Unexpected any. Specify a different type.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Generate visual diffs
- GitHub Check: Test
🔇 Additional comments (7)
apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx (2)
5-11: LGTM!The meta configuration follows standard Storybook 9 patterns with appropriate defaults.
13-22: LGTM!The story structure is correct. Using
openprop ensures the tooltip is visible in the static Storybook view, which is the right approach for demonstration purposes.packages/cyberstorm/src/index.ts (1)
44-44: LGTM! Good addition to the public API.Exporting
ModalPropsalongside the component is a standard practice that allows consumers to type-check props when composing or wrapping the Modal component.packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)
11-15: LGTM! Clean interface definition.The
ModalPropsinterface correctly omitsprimitiveType(which is hard-coded internally) and extends the base props with Modal-specific options.
19-19: LGTM! Consistent with the interface change.The function signature correctly uses the newly exported
ModalPropstype.apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (1)
23-33: LGTM.The workaround for the CSS module limitation is reasonable. The Variants story appropriately demonstrates the available states.
apps/storybook/tsconfig.json (1)
1-10: LGTM.Standard TypeScript project references setup for the Storybook app. The configuration appropriately delegates to app and node-specific tsconfig files.
Most of these files are auto-generated by the storybook wizard. Non-generated / edited files are - .gitignore - Dockerfile (from previous app, in case someone uses it) - LinkLibrary (for cyberstorm link support) - nginx.conf (from previous app, in case someone uses it) - preview.tsx (has providers added) - styles.css (define layers, so that components work properly)
And fix a property name mismatch in Icon - Frame components
And fix a classname mistake in DropDown theme css
And add a optional defaultOpen param for SelectSearch as we need it for the story
It want's the "most common versions" which have changed because of addition of new SB app
I don't know what the hell the previous implementer had thought, but Icons rootClasses and wrapperClasses were thrown all over the place. It's somekind of savant miracle that it worked before. The guy must've had some extra terrestial knowledge about something. So fix the class prop passing and fix the Thunderstorelogo in the Footer as non-fontawesome icons are not behaving nicely with accepting classes.
static analysis likes to fail sometimes, and complain about the retired version ref: https://github.blog/changelog/2023-01-18-code-scanning-codeql-action-v1-is-now-deprecated/ ref: https://github.blog/changelog/2025-01-10-code-scanning-codeql-action-v2-is-now-deprecated/
Oksamies
force-pushed
the
09-24-refactor_storybook_app
branch
from
ed0c7a2 to
6996bc8
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/cyberstorm-remix/package.json (1)
47-53: Align Node engine range with Vite 7’s minimum.Vite 7 requires Node ≥20.19 (or ≥22.12). Keeping
engines.nodeat>=20.17.0means anyone on 20.17/20.18 (which the file currently permits) will hit install/runtime errors once this version lands. Please bump the engines field to>=20.19.0(or the dual range Vite documents) so our tooling and CI stay in sync. (vite.dev)
♻️ Duplicate comments (20)
apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx (1)
1-1: Switch to the canonical Storybook typingsWe should import
MetaandStoryObjfrom@storybook/react;@storybook/react-vitedoesn’t provide the full typing surface and will break once the package is removed. Please swap the import as shown:-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx (1)
25-31: Make the story interactive without relying on defaultOpenFor consistency with other interactive component stories, bind a
popoverIdand configure the trigger button withpopoverTarget/popoverTargetAction. This ensures the example remains functional regardless of thedefaultOpenstate.apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (3)
4-8: Avoid deep-importing theme internals.Re-export these lists from the theme package entry point and import them from
@thunderstore/cyberstorm-themeto prevent coupling to/src.
1-1: Swap to the official Storybook type import.Use
@storybook/reactfor Meta/StoryObj to match Storybook 9’s published types.
23-23: Replace the placeholder label with neutral copy.Use something professional like
"Tag Label"so the story reads cleanly.apps/storybook/.storybook/main.ts (1)
12-12: Return type already flagged.This was previously identified and acknowledged as out of scope for this PR.
apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx (2)
1-1: Import source already flagged.This was previously identified as needing to use
@storybook/reactinstead of@storybook/react-vite.
4-4: PNG module declaration already flagged.This was previously identified as requiring a TypeScript module declaration for
*.pngfiles.apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx (2)
1-1: Import source already flagged.This was previously identified as needing to use
@storybook/reactinstead of@storybook/react-vite.
4-7: Internal imports already flagged.This was previously identified as bypassing the package's public API.
apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx (1)
1-1: Import source already flagged.This was previously identified as needing to use
@storybook/reactinstead of@storybook/react-vite.apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx (1)
34-40: Rename theErrorstory to satisfy lint.Biome still fails because the exported const name shadows the global
Error. Please rename the export (for example,ErrorState) and setname: "Error"if you need the display label unchanged. This was raised earlier and remains unresolved, so lint will keep blocking the PR until it’s fixed.Apply this diff:
-export const Error: Story = { - args: { - validationBarProps: { status: "failure", message: "failure message" }, - }, -}; +export const ErrorState: Story = { + name: "Error", + args: { + validationBarProps: { status: "failure", message: "failure message" }, + }, +};apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
27-47: Rebuild trigger from the currentpopoverId. The trigger stored inargsis permanently wired to"modal-1", so tweakingpopoverId(or rendering multiple instances) leaves the button targeting the wrong element. Create the trigger insideDefaultComponent, keyed off the activepopoverId, and drop the static node fromargs.export const Default: Story = { args: { popoverId: "modal-1", - trigger: ( - <NewButton popoverTarget="modal-1" popoverTargetAction="show"> - Open modal - </NewButton> - ), }, render: (args) => <DefaultComponent args={args} />, }; function DefaultComponent(props: { args: ModalProps }) { const { args } = props; + const { popoverId, ...restArgs } = args; + const targetId = popoverId ?? "modal-1"; useEffect(() => { - const modalElement = document.getElementById(args.popoverId); + const modalElement = document.getElementById(targetId); if (!modalElement) return; modalElement.showPopover(); - }, [args.popoverId]); + }, [targetId]); return ( - <Modal id={args.popoverId} {...args}> + <Modal + id={targetId} + popoverId={targetId} + {...restArgs} + trigger={ + <NewButton popoverTarget={targetId} popoverTargetAction="show"> + Open modal + </NewButton> + } + > <div style={{ padding: 16 }}>Modal content</div> </Modal> ); }
53-77: Mirror the dynamic trigger logic inSmallSize. This story has the same static"modal-2"trigger, so it drifts out of sync oncepopoverIdchanges. Build the trigger insideSmallSizeComponentfrom the livepopoverIdinstead of freezing it inargs.export const SmallSize: Story = { args: { popoverId: "modal-2", - trigger: ( - <NewButton popoverTarget="modal-2" popoverTargetAction="show"> - Open modal - </NewButton> - ), csSize: ModalSizesList[1], }, render: (args) => <SmallSizeComponent args={args} />, }; function SmallSizeComponent(props: { args: ModalProps }) { const { args } = props; + const { popoverId, ...restArgs } = args; + const targetId = popoverId ?? "modal-2"; useEffect(() => { - const modalElement = document.getElementById(args.popoverId); + const modalElement = document.getElementById(targetId); if (!modalElement) return; modalElement.showPopover(); - }, [args.popoverId]); + }, [targetId]); return ( - <Modal id={args.popoverId} {...args}> + <Modal + id={targetId} + popoverId={targetId} + {...restArgs} + trigger={ + <NewButton popoverTarget={targetId} popoverTargetAction="show"> + Open modal + </NewButton> + } + > <div style={{ padding: 16 }}>Modal content</div> </Modal> ); }apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
1-1: Import types from @storybook/react instead.This import issue was already flagged in previous reviews.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
1-1: Import types from @storybook/react instead.This import issue was already flagged in previous reviews.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx (3)
1-1: Import types from @storybook/react instead.This import issue was already flagged in previous reviews.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";
25-27: Accessibility: current page crumb should not be a link.This accessibility issue was already flagged in previous reviews.
- <NewBreadCrumbsLink primitiveType="link" href="#"> - Item - </NewBreadCrumbsLink> + <NewBreadCrumbsLink primitiveType="span" aria-current="page"> + Item + </NewBreadCrumbsLink>
43-45: Accessibility: apply same current-crumb treatment in Short story.This accessibility issue was already flagged in previous reviews.
- <NewBreadCrumbsLink primitiveType="link" href="#"> - Item - </NewBreadCrumbsLink> + <NewBreadCrumbsLink primitiveType="span" aria-current="page"> + Item + </NewBreadCrumbsLink>apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx (1)
22-22: Remove the hard-codedvaluedefault to keep the input interactive.This issue was flagged in a previous review. Setting
value: ""without a corresponding change handler locks the input to an empty string, preventing interaction in Storybook and triggering React controlled-component warnings.Apply this diff:
- args: { value: "", placeholder: "Type here..." }, + args: { placeholder: "Type here..." },
🧹 Nitpick comments (5)
apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (2)
4-8: Prefer importing from the package's public API.Importing from
@thunderstore/cyberstorm-theme/src/componentsbypasses the package's public exports. If the internal structure changes, this import will break.Update the import to use the public API:
import { SelectModifiersList, SelectSizesList, SelectVariantsList, -} from "@thunderstore/cyberstorm-theme/src/components"; +} from "@thunderstore/cyberstorm-theme";
39-97: Consider extracting the common render pattern.The three stories (Sizes, Variants, Modifiers) share nearly identical render logic. You could reduce duplication with a helper function.
Example refactor:
const renderVariations = <T extends string>( items: readonly T[], renderItem: (item: T, args: any) => JSX.Element ) => (args: any) => { const elements = items.map((item) => ( <div key={item} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "0.5rem", }} > <span>{item}</span> {renderItem(item, args)} </div> )); return <div style={{ display: "flex", gap: "1rem" }}>{elements}</div>; }; export const Sizes: Story = { render: renderVariations(SelectSizesList, (size, args) => ( <NewSelect csSize={size} {...args} /> )), }; export const Variants: Story = { render: renderVariations(SelectVariantsList, (variant, args) => ( <NewSelect csVariant={variant} {...args} /> )), }; export const Modifiers: Story = { render: renderVariations(SelectModifiersList, (modifier, args) => ( <NewSelect csModifiers={[modifier]} {...args} /> )), };apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx (1)
27-42: Consider consistent tab item structure.The story mixes plain
divelements for the first three tabs with aNewIconwrapper for the fourth. If the intent is to demonstrate icon usage within tabs, consider documenting this in the story or adding a separate story variant. Also, the inlinestyle={{ padding: 16 }}is repeated—extract to a constant or use CSS classes for maintainability.apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (2)
25-29: Clarify the purpose of the wrapper div.The custom render function wraps
NewIconin adiv.iconfor all stories. If this is purely for story presentation (centering/styling), consider whether it's necessary for all stories or if it should be applied selectively.
40-47: Consider clarifying the ColorOverride story's intent.This story sets
csVariant: "primary"but applies a customicon--red-colorCSS class. If the goal is to demonstrate CSS-based color overrides independent of the variant system, the story name and setup are clear. However, ifcsVariant: "primary"is expected to produce red color, this might be confusing.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (15)
apps/cyberstorm-storybook/public/images/communitygrid.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/login_hexagon.pngis excluded by!**/*.pngapps/cyberstorm-storybook/public/images/tsmm_screenshot.pngis excluded by!**/*.pngapps/cyberstorm-storybook/stories/assets/code-brackets.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/colors.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/comments.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/direction.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/flow.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/plugin.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/repo.svgis excluded by!**/*.svgapps/cyberstorm-storybook/stories/assets/stackalt.svgis excluded by!**/*.svgapps/storybook/src/stories/assets/catboy.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/catheim.pngis excluded by!**/*.pngapps/storybook/src/stories/assets/goblin.pngis excluded by!**/*.pngyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (79)
.github/workflows/static-analysis.yml(2 hunks).github/workflows/test.yml(1 hunks)apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css(1 hunks)apps/cyberstorm-remix/package.json(1 hunks)apps/cyberstorm-storybook/.gitignore(0 hunks)apps/cyberstorm-storybook/.storybook/main.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview-head.js(0 hunks)apps/cyberstorm-storybook/.storybook/preview.js(0 hunks)apps/cyberstorm-storybook/.storybook/storybook.css(0 hunks)apps/cyberstorm-storybook/Dockerfile(0 hunks)apps/cyberstorm-storybook/constants.ts(0 hunks)apps/cyberstorm-storybook/package.json(0 hunks)apps/cyberstorm-storybook/storage.ts(0 hunks)apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx(0 hunks)apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx(0 hunks)apps/cyberstorm-storybook/tsconfig.json(0 hunks)apps/cyberstorm-storybook/types.d.ts(0 hunks)apps/storybook/.gitignore(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/.storybook/styles.css(1 hunks)apps/storybook/Dockerfile(1 hunks)apps/storybook/index.html(1 hunks)apps/storybook/package.json(1 hunks)apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/BreadCrumbs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardCommunity.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Drawer.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/DropDown.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/MetaItem.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/SkeletonBox.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tabs.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.css(1 hunks)apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx(1 hunks)apps/storybook/tsconfig.app.json(1 hunks)apps/storybook/tsconfig.json(1 hunks)apps/storybook/tsconfig.node.json(1 hunks)apps/storybook/vite.config.ts(1 hunks)package.json(1 hunks)packages/cyberstorm-theme/src/components/DropDown/DropDown.css(1 hunks)packages/cyberstorm/src/index.ts(1 hunks)packages/cyberstorm/src/newComponents/Icon/Icon.tsx(1 hunks)packages/cyberstorm/src/newComponents/Modal/Modal.tsx(1 hunks)packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx(3 hunks)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx(1 hunks)
💤 Files with no reviewable changes (21)
- apps/cyberstorm-storybook/constants.ts
- apps/cyberstorm-storybook/stories/newComponents/Select.stories.tsx
- apps/cyberstorm-storybook/types.d.ts
- apps/cyberstorm-storybook/.storybook/preview-head.js
- apps/cyberstorm-storybook/.storybook/preview.js
- apps/cyberstorm-storybook/stories/newComponents/Tag.stories.tsx
- apps/cyberstorm-storybook/.storybook/storybook.css
- apps/cyberstorm-storybook/stories/newComponents/DropDown.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Heading.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/BreadCrumb.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/CardCommunity.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/Link.stories.tsx
- apps/cyberstorm-storybook/tsconfig.json
- apps/cyberstorm-storybook/.gitignore
- apps/cyberstorm-storybook/storage.ts
- apps/cyberstorm-storybook/package.json
- apps/cyberstorm-storybook/Dockerfile
- apps/cyberstorm-storybook/stories/newComponents/AdContainer.stories.tsx
- apps/cyberstorm-storybook/.storybook/main.js
- apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx
- apps/cyberstorm-storybook/stories/newComponents/TextInput.stories.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/storybook/.gitignore
🚧 Files skipped from review as they are similar to previous changes (30)
- .github/workflows/static-analysis.yml
- apps/storybook/vite.config.ts
- apps/storybook/index.html
- apps/storybook/src/stories/cyberstormComponents/TextAreaInput.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/EmptyState.stories.tsx
- package.json
- apps/storybook/tsconfig.app.json
- apps/storybook/.storybook/preview.tsx
- apps/storybook/.storybook/styles.css
- apps/storybook/src/stories/cyberstormComponents/Link.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/AdContainer.stories.tsx
- apps/storybook/tsconfig.json
- apps/cyberstorm-remix/app/commonComponents/Footer/Footer.css
- apps/storybook/src/stories/cyberstormComponents/CodeInput.css
- apps/storybook/src/stories/cyberstormComponents/Image.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/CardPackage.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/SkeletonBox.css
- apps/storybook/src/stories/cyberstormComponents/Table.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Alert.stories.tsx
- packages/cyberstorm/src/newComponents/Icon/Icon.tsx
- apps/storybook/src/stories/cyberstormComponents/Pagination.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Icon.css
- apps/storybook/src/stories/cyberstormComponents/Heading.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Tooltip.stories.tsx
- packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx
- apps/storybook/src/stories/cyberstormComponents/SelectSearch.stories.tsx
- apps/storybook/Dockerfile
- apps/storybook/tsconfig.node.json
- apps/storybook/src/stories/cyberstormComponents/CodeBox.stories.tsx
- apps/storybook/src/stories/cyberstormComponents/Toast.stories.tsx
🧰 Additional context used
🧬 Code graph analysis (6)
apps/storybook/src/stories/cyberstormComponents/Modal.stories.tsx (2)
packages/cyberstorm/src/index.ts (2)
Modal(44-44)ModalProps(44-44)packages/cyberstorm/src/newComponents/Modal/Modal.tsx (2)
Modal(19-50)ModalProps(11-15)
apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (3)
SelectVariantsList(39-39)SelectSizesList(41-41)SelectModifiersList(43-43)
apps/storybook/src/stories/cyberstormComponents/Tag.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (3)
TagVariantsList(80-80)TagSizesList(82-82)TagModifiersList(84-84)
apps/storybook/src/stories/cyberstormComponents/Avatar.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (2)
AvatarVariantsList(154-154)AvatarSizesList(156-156)
apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (1)
packages/cyberstorm-theme/src/components.tsx (1)
IconVariantsList(69-69)
packages/cyberstorm/src/newComponents/Modal/Modal.tsx (3)
packages/cyberstorm/src/index.ts (3)
ModalProps(44-44)FrameModalProps(28-28)Modal(44-44)packages/cyberstorm/src/primitiveComponents/Frame/Frame.tsx (1)
FrameModalProps(53-59)packages/cyberstorm-theme/src/components/Modal/Modal.ts (2)
ModalVariants(3-3)ModalSizes(7-7)
🪛 Biome (2.1.2)
apps/storybook/src/stories/cyberstormComponents/CodeInput.stories.tsx
[error] 36-36: Do not shadow the global "Error" property.
Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.
(lint/suspicious/noShadowRestrictedNames)
🪛 ESLint
apps/storybook/.storybook/main.ts
[error] 12-12: Unexpected any. Specify a different type.
(@typescript-eslint/no-explicit-any)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Generate visual diffs
🔇 Additional comments (23)
packages/cyberstorm/src/newComponents/SelectSearch/SelectSearch.tsx (3)
34-34: LGTM: Consistent prop type addition across both union branches.The
defaultOpenprop is correctly added to both single and multiple selection variants, maintaining type consistency.Also applies to: 46-46
90-90: LGTM: Sensible default ensures backward compatibility.Setting
defaultOpen = falsemaintains existing behavior for consumers who don't specify the prop.
95-95: LGTM: State initialization correctly uses the prop.The dropdown will open on mount when
defaultOpen={true}is passed. Note that this only affects initial state—subsequent changes to the prop won't reopen the dropdown (standard "default" prop pattern).apps/storybook/src/stories/cyberstormComponents/Select.stories.tsx (2)
21-31: VerifydefaultOpen: trueis intentional for all stories.Setting
defaultOpen: truein the base args means every story will render with the dropdown expanded by default. This might not be desired for the Default story.Consider moving
defaultOpen: trueto specific stories (like Sizes, Variants, Modifiers) if you want the Default story to render closed.
34-35: LGTM!Standard Storybook type definitions.
.github/workflows/test.yml (1)
169-169: LGTM!The directory update correctly points to the new Storybook app location.
apps/storybook/src/stories/cyberstormComponents/Menu.stories.tsx (1)
14-28: Story setup looks solid.Trigger wiring and render function cleanly demonstrate the menu behavior. No changes requested.
apps/storybook/src/stories/cyberstormComponents/Switch.stories.tsx (1)
30-88: Thanks for tightening up the switch demos.Variant/size/modifier loops cover the component well, and the key handling no longer triggers duplicate warnings. Looking good.
apps/storybook/package.json (1)
14-35: No changes needed for @fortawesome/react-fontawesome. Version ^0.2.2 is consistent across the monorepo and resolves to 0.2.2; keeping build tools in dependencies is intentional for this private Storybook app.packages/cyberstorm-theme/src/components/DropDown/DropDown.css (1)
42-42: Review comment incorrect: no DropDown implementation here. This package only contains CSS and type definitions—there is no component markup to update. Please verify in the actual UI component package (where DropDown is rendered) that divider elements use.dropdown__divider--variant--primaryand that all instances of.dropdown--variant--primaryhave been removed.Likely an incorrect or invalid review comment.
packages/cyberstorm/src/index.ts (1)
44-44: Public type export looks good. Re-exportingModalPropsalongsideModalkeeps the barrel API aligned with the component update.packages/cyberstorm/src/newComponents/Modal/Modal.tsx (1)
11-20: ExportingModalPropsaligns the public API. Making the props interface explicit and exported matches the barrel change without altering runtime behaviour.apps/storybook/src/stories/cyberstormComponents/ValidationBar.css (1)
1-6: LGTM!Clean approach to ensure deterministic snapshots by disabling the spin animation in the storybook layer.
apps/storybook/src/stories/cyberstormComponents/Button.stories.tsx (1)
13-126: Well-structured story suite.Good coverage across variants, sizes, and primitive types. The separate stories make it easy to test each dimension independently.
apps/storybook/src/stories/cyberstormComponents/ValidationBar.stories.tsx (2)
1-1: Import types from @storybook/react instead.Use the correct Storybook types package for SB9.
-import type { Meta, StoryObj } from "@storybook/react-vite"; +import type { Meta, StoryObj } from "@storybook/react";Likely an incorrect or invalid review comment.
27-28: Remove outdated global CSS override in the story
The component’s “processing” spinner uses the CSS-module classstyles.spinningIcon, so the global.validation-bar--spinrule inapps/storybook/src/stories/cyberstormComponents/ValidationBar.cssnever applies. You’ll need to override or patch the module CSS (e.g. add ananimation: nonerule toValidationBar.module.cssor userootClasses) before re-enabling the processing story.Likely an incorrect or invalid review comment.
apps/storybook/src/stories/cyberstormComponents/TextInput.stories.tsx (5)
1-8: LGTM!Imports are clean and well-structured. The
typekeyword for Meta/StoryObj is good practice, and the side-effect import for theme registration is appropriate.
25-27: LGTM!Standard Storybook export pattern. The Default story correctly inherits from meta configuration.
29-50: LGTM!The Variants story correctly demonstrates all variant options with proper key placement and clean layout structure.
52-73: LGTM!The Sizes story follows the same clean pattern as Variants, properly demonstrating all size options.
75-96: LGTM!The Modifiers story correctly wraps each modifier in an array (as expected by
csModifiers) and maintains consistency with the other story implementations.apps/storybook/src/stories/cyberstormComponents/Icon.stories.tsx (2)
21-21: No bounds issue: IconVariantsList contains 10 items (indexes 0–9), so using index 3 is safe.
5-5: Ignore the public-API import suggestion.IconVariantsListisn’t exposed by the theme’s entry point, so importing from its internal path is currently required—consider adding a public re-export in the package if you intend to use it externally.Likely an incorrect or invalid review comment.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores