feat(FR-955): move Flex component to backend.ai-ui project #3640

nowgnuesLee · 2025-05-12T09:43:18Z

resolves #3618 (FR-955)

In this PR, move custom Flex component in react project to backend.ai-ui project

changes

add Flex component to backend.ai-ui project
set up storybook
add stories about Flex component

Checklist: (if applicable)

Documentation
Minium required manager version
Specific setting for review (eg., KB link, endpoint or how to setup)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

nowgnuesLee · 2025-05-12T09:43:34Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

ragingwind

I confirmed that it works well. May we could add more examples for Flex but I guess it's enough now.

ragingwind

LGTM

Copilot

Pull Request Overview

This PR extracts the custom Flex component into the backend.ai-ui package, configures Storybook for UI component development, and updates its usage in the React app.

Add and export the Flex component in backend.ai-ui
Configure Storybook (preview, main) and add stories for Flex
Update StartPage.tsx to import Flex from backend.ai-ui instead of the local component

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
react/src/pages/StartPage.tsx	Swap local `Flex` import for the packaged version
packages/backendai-ui/src/index.ts	Export `Flex` from package entry point
packages/backendai-ui/src/components/Flex.tsx	New `Flex` component implementation
packages/backendai-ui/src/components/Flex.stories.tsx	Storybook stories for `Flex`
packages/backendai-ui/src/components/Button.tsx	Removed unused `Button` component
packages/backendai-ui/package.json	Added Storybook scripts & dependencies
packages/backendai-ui/.storybook/preview.ts	Storybook preview configuration
packages/backendai-ui/.storybook/main.ts	Storybook main configuration
packages/backendai-ui/.gitignore	Ignore Storybook log files

Comments suppressed due to low confidence (1)

packages/backendai-ui/src/components/Flex.tsx:1

There are currently no unit tests covering the Flex component’s prop handling (e.g., gap sizing or justify/align mapping). Adding tests for these variations would help ensure future changes don’t introduce regressions.

import { theme } from 'antd';

Copilot · 2025-05-20T01:34:52Z

packages/backendai-ui/src/components/Flex.tsx

+    {
+      direction = 'row',
+      wrap = 'nowrap',
+      justify = 'flex-start',


The default prop for justify is set to 'flex-start', but the FlexProps type expects one of 'start' | 'end' | 'center' | 'between' | 'around'. Change it to 'start' so the mapping logic applies correctly.

Suggested change

justify = 'flex-start',

justify = 'start',

Copilot · 2025-05-20T01:34:52Z

packages/backendai-ui/src/components/Flex.tsx

+      <div
+        ref={ref}
+        style={{
+          alignItems: 'stretch',


[nitpick] There are duplicate style properties between the hard-coded base object (e.g., alignItems, flexDirection, display) and the merged flexStyle. Consider consolidating these into a single style object to reduce redundancy and simplify maintenance.

Copilot · 2025-05-20T01:34:53Z

packages/backendai-ui/src/components/Flex.tsx

+      return typeof size === 'string'
+        ? // @ts-ignore
+          token['padding' + size.toUpperCase()]
+        : size;


Using @ts-ignore can hide real typing issues. Consider refining the theme token type or using a type-safe lookup method instead of suppressing the error.

Suggested change

return typeof size === 'string'

? // @ts-ignore

token['padding' + size.toUpperCase()]

: size;

if (typeof size === 'string') {

const key = `padding${size.toUpperCase()}` as keyof typeof token;

return token[key] || 0; // Fallback to 0 if the key does not exist

}

return size;

github-actions bot assigned nowgnuesLee May 12, 2025

github-actions bot added the size:L 100~500 LoC label May 12, 2025

nowgnuesLee mentioned this pull request May 12, 2025

feat(FR-954) setup BAI UI package environment #3622

Open

5 tasks

nowgnuesLee changed the title ~~feat: move Flex component to backend.ai-ui project~~ feat(FR-954): move Flex component to backend.ai-ui project May 12, 2025

github-actions bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels May 13, 2025

ragingwind reviewed May 13, 2025

View reviewed changes

nowgnuesLee marked this pull request as ready for review May 13, 2025 05:12

nowgnuesLee requested review from agatha197, ironAiken2, lizable, ragingwind and yomybaby May 13, 2025 05:13

ragingwind approved these changes May 13, 2025

View reviewed changes

nowgnuesLee changed the title ~~feat(FR-954): move Flex component to backend.ai-ui project~~ feat(FR-955): move Flex component to backend.ai-ui project May 13, 2025

nowgnuesLee force-pushed the feat/move-common-comopnent branch from 601e226 to d28910b Compare May 15, 2025 02:14

nowgnuesLee force-pushed the feat/setup-bai-ui-pacakge branch from 5bfefd3 to 7d84ef1 Compare May 15, 2025 02:14

github-actions bot added size:L 100~500 LoC and removed size:XL 500~ LoC labels May 15, 2025

nowgnuesLee mentioned this pull request May 15, 2025

feat(FR-982): Add i18n to the backend.ai-ui project #3665

Draft

5 tasks

nowgnuesLee force-pushed the feat/move-common-comopnent branch from d28910b to 1128404 Compare May 19, 2025 05:56

nowgnuesLee force-pushed the feat/setup-bai-ui-pacakge branch from 7d84ef1 to 6480f30 Compare May 19, 2025 05:56

nowgnuesLee force-pushed the feat/move-common-comopnent branch from 1128404 to f0d6681 Compare May 19, 2025 06:38

nowgnuesLee force-pushed the feat/setup-bai-ui-pacakge branch from 6480f30 to 9a877f7 Compare May 19, 2025 06:38

nowgnuesLee force-pushed the feat/move-common-comopnent branch from f0d6681 to d0dfb40 Compare May 19, 2025 06:39

github-actions bot added size:XL 500~ LoC and removed size:L 100~500 LoC labels May 19, 2025

nowgnuesLee added 2 commits May 19, 2025 17:33

feat: move Flex component to backend.ai-ui project

259fec1

feat: add storybook to backend.ai-ui project

99f76c3

nowgnuesLee added 3 commits May 19, 2025 17:33

feat: add story of Flex component to backend.ai-ui project

0dd33a8

feat: apply Flex component with backend.ai-ui to the StartPage

3e860af

feat: remove Button compomnent

4526319

nowgnuesLee requested a review from Copilot May 20, 2025 01:33

Copilot AI reviewed May 20, 2025

View reviewed changes

nowgnuesLee force-pushed the feat/setup-bai-ui-pacakge branch from 9a877f7 to aae684f Compare May 20, 2025 01:40

nowgnuesLee force-pushed the feat/move-common-comopnent branch from d0dfb40 to 4526319 Compare May 20, 2025 01:40

nowgnuesLee mentioned this pull request May 20, 2025

feat(FR-983): setup relay for backendai-ui project and move fragment component #3675

Draft

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(FR-955): move Flex component to backend.ai-ui project #3640

feat(FR-955): move Flex component to backend.ai-ui project #3640

nowgnuesLee commented May 12, 2025 •

edited

Loading

Uh oh!

nowgnuesLee commented May 12, 2025 •

edited

Loading

Uh oh!

ragingwind left a comment

Uh oh!

ragingwind left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 20, 2025

Uh oh!

Copilot AI May 20, 2025

Uh oh!

Copilot AI May 20, 2025

Uh oh!

Uh oh!

-      return typeof size === 'string'
-        ? // @ts-ignore
-          token['padding' + size.toUpperCase()]
-        : size;
+      if (typeof size === 'string') {
+        const key = `padding${size.toUpperCase()}` as keyof typeof token;
+        return token[key] || 0; // Fallback to 0 if the key does not exist
+      }
+      return size;

feat(FR-955): move Flex component to backend.ai-ui project #3640

Are you sure you want to change the base?

feat(FR-955): move Flex component to backend.ai-ui project #3640

Conversation

nowgnuesLee commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nowgnuesLee commented May 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

ragingwind left a comment

Choose a reason for hiding this comment

Uh oh!

ragingwind left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 20, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 20, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nowgnuesLee commented May 12, 2025 •

edited

Loading

nowgnuesLee commented May 12, 2025 •

edited

Loading