PLASMA-7864: revert Flow - #3023
Conversation
📝 WalkthroughWalkthroughThe PR exports the ChangesFlow component
Estimated code review effort: 3 (Moderate) | ~20 minutes Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. 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 |
|
Theme Builder app deployed! https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-3023/ |
|
Documentation preview deployed! website: https://plasma.sberdevices.ru/pr/pr-3023/ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/sdds-scan/src/components/Flow/Flow.stories.tsx`:
- Around line 35-39: Constrain the itemsCount control configuration to
non-negative integer values, and update the story’s rendering path to normalize
itemsCount before passing it to new Array. Apply the same validation and
normalization to both itemsCount control definitions, preserving valid
array-length behavior.
- Line 30: Update the Flow story’s meta type from Meta<typeof Flow> to a
Storybook-specific type extending ComponentProps<typeof Flow> with itemsCount,
containerWidth, and containerHeight, then derive the story type with
StoryObj<typeof meta>.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 16ad388c-7cc5-48c5-9986-d25a8094435e
📒 Files selected for processing (4)
packages/sdds-scan/src/components/Flow/Flow.stories.tsxpackages/sdds-scan/src/index.tswebsite/sdds-scan-docs/docs/components/Flow.mdxwebsite/sdds-serv-docs/docs/components/Flow.mdx
| box-sizing: content-box; | ||
| `; | ||
|
|
||
| const meta: Meta<typeof Flow> = { |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
ast-grep outline packages/sdds-scan/src/components/Flow/Flow.ts --items all
rg -n -C 3 '\b(itemsCount|containerWidth|containerHeight)\b' \
packages/sdds-scan/src/components/FlowRepository: salute-developers/plasma
Length of output: 3904
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '--- package metadata / storybook version ---\n'
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json; do
if [ -f "$f" ]; then
echo "### $f"
if [ "$f" = "package.json" ]; then
jq -r '.dependencies["`@storybook/react`"], .devDependencies["`@storybook/react`"], .devDependencies.storybook, .dependencies.storybook' "$f" 2>/dev/null || rg -n '"(`@storybook/react`|storybook)"' "$f" || true
else
rg -n '`@storybook/react`|storybook' "$f" | head -80 || true
fi
fi
done
printf '\n--- Flow stories imports and meta/story/render ---\n'
sed -n '1,140p' packages/sdds-scan/src/components/Flow/Flow.stories.tsx | cat -n
printf '\n--- Flow config/props references ---\n'
sed -n '1,260p' packages/sdds-Repository: salute-developers/plasma
Length of output: 253
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- package metadata / Storybook version ---'
for f in package.json pnpm-lock.yaml yarn.lock package-lock.json; do
if [ -f "$f" ]; then
printf '%s\n' "### $f"
if [ "$f" = "package.json" ]; then
jq -r '.dependencies["`@storybook/react`"], .devDependencies["`@storybook/react`"], .devDependencies.storybook, .dependencies.storybook' "$f" 2>/dev/null || rg -n '"(`@storybook/react`|storybook)"' "$f" || true
else
rg -n '`@storybook/react`|storybook' "$f" | head -80 || true
fi
fi
done
printf '%s\n' ''
printf '%s\n' '--- Flow stories imports and meta/story/render ---'
sed -n '1,145p' packages/sdds-scan/src/components/Flow/Flow.stories.tsx | cat -n
printf '%s\n' ''
printf '%s\n' '--- Flow config/props references ---'
sed -n '1,260p' packages/sdds-scan/src/components/Flow/Flow.config.ts 2>/dev/null | cat -n || true
sed -n '1,40p' packages/sdds-scan/src/components/Flow/Flow.ts | cat -n || true
printf '%s\n' ''
printf '%s\n' '--- package.json package-specific ts/storybook deps ---'
if [ -f package.json ]; then jq '.scripts, .dependencies, .devDependencies' package.json | rg -n '"(storybook|`@storybook/react`|typescript|eslint|`@typescript-eslint`|prettier|typescript-eslint|eslint)\b|build-storybook|storybook"' -C 2 || true; fiRepository: salute-developers/plasma
Length of output: 11904
🌐 Web query:
@storybook/react Metas generic component satisfies Meta<T> story args generic
💡 Result:
In Storybook for React, using the satisfies Meta pattern correctly connects your component's type or props interface to Storybook's metadata, enabling robust TypeScript inference [1][2]. When you define your default export with satisfies Meta, TypeScript validates that the component prop and any args provided in the meta object match the component's actual interface [1][3]. Key aspects of this pattern include: 1. Type Inference: By using satisfies Meta (or passing a specific Props interface instead of typeof Component), you gain full type-checking for args at both the meta level and the individual story level [1][4]. 2. StoryObj Connection: The standard practice is to then define your story type as type Story = StoryObj [1][5]. By passing the meta type (rather than the component type) to StoryObj, TypeScript understands the relationship between your meta-level args and story-level args, preventing errors when required properties are already provided in the meta configuration [1][2]. 3. Custom Args: If your component has custom props or you are using extended args, you can pass the specific type to Meta, such as satisfies Meta<ComponentProps & { customArg: string }> [6][7]. This ensures that any custom arguments are type-safe and available in your story render functions [6][4]. This approach is the recommended pattern in modern Storybook (CSF3+) to ensure that TypeScript provides helpful warnings for missing required arguments or invalid property assignments [8][2].
Citations:
- 1: https://storybook.js.org/docs/writing-stories/typescript
- 2: https://storybook.js.org/blog/improved-type-safety-in-storybook-7/
- 3: https://storybook.js.org/docs/writing-stories/typescript.md
- 4: React: Sound arg types for CSF3 storybookjs/storybook#19238
- 5: https://storybook.js.org/docs/api/csf.md
- 6: Custom args with CSF3 and Typescript storybookjs/storybook#21587
- 7: [Bug]: CSF-factories: Type error when specifying args in render function storybookjs/storybook#32830
- 8: https://storybook.js.org/docs/get-started/setup.md
Add Storybook-only args to the story type.
Meta<typeof Flow> validates args against Flow props, so itemsCount, containerWidth, and containerHeight do not pass as story args. Use a Story-specific type, e.g. Meta<ComponentProps<typeof Flow> & { itemsCount: number; containerWidth: string; containerHeight: string }>, and derive StoryObj<typeof meta>.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/sdds-scan/src/components/Flow/Flow.stories.tsx` at line 30, Update
the Flow story’s meta type from Meta<typeof Flow> to a Storybook-specific type
extending ComponentProps<typeof Flow> with itemsCount, containerWidth, and
containerHeight, then derive the story type with StoryObj<typeof meta>.
| itemsCount: { | ||
| control: { | ||
| type: 'number', | ||
| }, | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Constrain itemsCount to valid array lengths.
A negative or fractional value from the number control makes new Array(itemsCount) throw. Limit the control to non-negative integers and normalize the value before rendering.
Proposed fix
itemsCount: {
control: {
type: 'number',
+ min: 0,
+ max: 24,
+ step: 1,
},
},
@@
render: ({ itemsCount, containerWidth, containerHeight, ...args }: ComponentProps<typeof Flow>) => {
const hasLines = Boolean(args.itemsPerLine);
+ const safeItemsCount = Math.min(24, Math.max(0, Math.trunc(itemsCount || 0)));
return (
<FlowCustom {...args} style={{ width: containerWidth, height: containerHeight }}>
- {new Array(itemsCount).fill(null).map((width, index) => (
+ {new Array(safeItemsCount).fill(null).map((width, index) => (Also applies to: 109-113
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/sdds-scan/src/components/Flow/Flow.stories.tsx` around lines 35 -
39, Constrain the itemsCount control configuration to non-negative integer
values, and update the story’s rendering path to normalize itemsCount before
passing it to new Array. Apply the same validation and normalization to both
itemsCount control definitions, preserving valid array-length behavior.
There was a problem hiding this comment.
@oki1oki А для sdds-serv не вижу, что добавлен import и re-export
There was a problem hiding this comment.
У sdds-serv не было только доки, импорты и сторибук корректны
2 participants
SDDS-SCAN
Flow
SDDS-SERV
Flow
What/why changed
Flowдобавлен в поставкуSummary by CodeRabbit
New Features
Documentation