This is an automated email from the ASF dual-hosted git repository. enzomartellucci pushed a commit to branch enxdev/refactor/antd5/create-wrappers in repository https://gitbox.apache.org/repos/asf/superset.git
commit 1ce653b49587a4eff41aaf1057a44a76aae14fb2 Author: Enzo Martellucci <[email protected]> AuthorDate: Sat Mar 15 16:55:22 2025 +0100 refactor(Grid): add wrapper, tests, and story for Antd5 Col and Row components --- .../AutoComplete/AutoComplete.stories.tsx | 4 +- .../src/components/AutoComplete/index.tsx | 2 +- .../src/components/Grid/Grid.stories.tsx | 149 +++++++++++++++++++++ .../src/components/Grid/Grid.test.tsx | 18 +++ superset-frontend/src/components/Grid/index.tsx | 8 ++ 5 files changed, 178 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/components/AutoComplete/AutoComplete.stories.tsx b/superset-frontend/src/components/AutoComplete/AutoComplete.stories.tsx index 2bf9727fff..053e189b03 100644 --- a/superset-frontend/src/components/AutoComplete/AutoComplete.stories.tsx +++ b/superset-frontend/src/components/AutoComplete/AutoComplete.stories.tsx @@ -1,12 +1,12 @@ import { useState } from 'react'; -import { Meta, StoryFn } from '@storybook/react'; +import { StoryFn } from '@storybook/react'; import AutoComplete, { AntAutoCompleteProps } from './index'; import { Input } from '../Input'; export default { title: 'Components/AutoComplete', component: AutoComplete, -} as Meta; +}; const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min; diff --git a/superset-frontend/src/components/AutoComplete/index.tsx b/superset-frontend/src/components/AutoComplete/index.tsx index 8db93ca105..708c0acccb 100644 --- a/superset-frontend/src/components/AutoComplete/index.tsx +++ b/superset-frontend/src/components/AutoComplete/index.tsx @@ -18,7 +18,7 @@ */ import AutoComplete, { AutoCompleteProps as AntAutoCompleteProps, -} from 'antd-v5/lib/auto-complete'; +} from 'antd-v5'; export type { AntAutoCompleteProps }; diff --git a/superset-frontend/src/components/Grid/Grid.stories.tsx b/superset-frontend/src/components/Grid/Grid.stories.tsx new file mode 100644 index 0000000000..606a60bbeb --- /dev/null +++ b/superset-frontend/src/components/Grid/Grid.stories.tsx @@ -0,0 +1,149 @@ +import { Meta } from '@storybook/react'; +import Slider from 'src/components/Slider/index'; +import { useState } from 'react'; +import { Row, Col } from './index'; + +export default { + title: 'Components/Grid', + component: Row, + subcomponents: { Col }, + argTypes: { + // Row properties + align: { + control: 'select', + options: ['top', 'middle', 'bottom', 'stretch'], + description: 'Vertical alignment', + defaultValue: 'top', + }, + justify: { + control: 'select', + options: [ + 'start', + 'end', + 'center', + 'space-around', + 'space-between', + 'space-evenly', + ], + description: 'Horizontal arrangement', + defaultValue: 'start', + }, + gutter: { + control: 'object', + description: 'Spacing between grids', + defaultValue: 0, + }, + wrap: { + control: 'boolean', + description: 'Auto wrap line', + defaultValue: true, + }, + // Col properties + flex: { + control: 'text', + description: 'Flex layout style', + }, + offset: { + control: 'number', + description: 'The number of cells to offset Col from the left', + defaultValue: 0, + }, + order: { + control: 'number', + description: 'Raster order', + defaultValue: 0, + }, + pull: { + control: 'number', + description: 'The number of cells that raster is moved to the left', + defaultValue: 0, + }, + push: { + control: 'number', + description: 'The number of cells that raster is moved to the right', + defaultValue: 0, + }, + span: { + control: 'number', + description: 'Raster number of cells to occupy', + }, + xs: { + control: 'object', + description: 'Settings for screen < 576px', + }, + sm: { + control: 'object', + description: 'Settings for screen ≥ 576px', + }, + md: { + control: 'object', + description: 'Settings for screen ≥ 768px', + }, + lg: { + control: 'object', + description: 'Settings for screen ≥ 992px', + }, + xl: { + control: 'object', + description: 'Settings for screen ≥ 1200px', + }, + xxl: { + control: 'object', + description: 'Settings for screen ≥ 1600px', + }, + }, + parameters: { + docs: { + description: { + component: + 'Grid is a hook, but here we are testing the Row and Col components that use it.', + }, + }, + }, +} as Meta; + +export const GridStory = () => { + const [gutter, setGutter] = useState(24); + const [vgutter, setVgutter] = useState(24); + const [colCount, setColCount] = useState(4); + + const cols = Array.from({ length: colCount }, (_, i) => ( + <Col + key={i} + span={24 / colCount} + style={{ background: '#ddd', padding: '8px', textAlign: 'center' }} + > + Column {i + 1} + </Col> + )); + + return ( + <div style={{ padding: '20px' }}> + <div style={{ marginBottom: '16px' }}> + <span>Horizontal Gutter: </span> + <Slider min={8} max={48} step={8} value={gutter} onChange={setGutter} /> + </div> + <div style={{ marginBottom: '16px' }}> + <span>Vertical Gutter: </span> + <Slider + min={8} + max={48} + step={8} + value={vgutter} + onChange={setVgutter} + /> + </div> + <div style={{ marginBottom: '16px' }}> + <span>Column Count: </span> + <Slider + min={2} + max={12} + step={1} + value={colCount} + onChange={setColCount} + /> + </div> + <Row gutter={[gutter, vgutter]}>{cols}</Row> + </div> + ); +}; diff --git a/superset-frontend/src/components/Grid/Grid.test.tsx b/superset-frontend/src/components/Grid/Grid.test.tsx new file mode 100644 index 0000000000..2687b8f56d --- /dev/null +++ b/superset-frontend/src/components/Grid/Grid.test.tsx @@ -0,0 +1,18 @@ +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { Col, Row } from './index'; + +describe('Grid Component', () => { + it('should render the grid with rows and columns', async () => { + render( + <Row> + <Col span={8}>Column 1</Col> + <Col span={8}>Column 2</Col> + <Col span={8}>Column 3</Col> + </Row>, + ); + expect(screen.getByText('Column 1')).toBeInTheDocument(); + expect(screen.getByText('Column 2')).toBeInTheDocument(); + expect(screen.getByText('Column 3')).toBeInTheDocument(); + }); +}); diff --git a/superset-frontend/src/components/Grid/index.tsx b/superset-frontend/src/components/Grid/index.tsx new file mode 100644 index 0000000000..21eb5b8f07 --- /dev/null +++ b/superset-frontend/src/components/Grid/index.tsx @@ -0,0 +1,8 @@ +import Grid, { Row, Col } from 'antd-v5'; +import type { ColProps, ColSize } from 'antd-v5/es/col'; +import type { RowProps } from 'antd-v5/es/row'; + +export type { ColProps, ColSize, RowProps }; + +export default Grid; +export { Row, Col };
