From 1512e08a7714ebdc7c307b32d8a1c68ead382d91 Mon Sep 17 00:00:00 2001 From: Mehmet Salih Yavuz Date: Fri, 3 Jan 2025 10:39:50 +0300 Subject: [PATCH] refactor(space): Migrate Space to Ant Design 5 --- .../src/components/Space/Space.stories.tsx | 60 +++++++++++++++++++ .../src/components/Space/Space.test.tsx | 26 ++++++++ .../src/components/Space/index.tsx | 33 ++++++++++ .../header-renderers/HeaderWithRadioGroup.tsx | 2 +- superset-frontend/src/components/index.ts | 1 - .../components/DataTableControl/index.tsx | 2 +- 6 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 superset-frontend/src/components/Space/Space.stories.tsx create mode 100644 superset-frontend/src/components/Space/Space.test.tsx create mode 100644 superset-frontend/src/components/Space/index.tsx diff --git a/superset-frontend/src/components/Space/Space.stories.tsx b/superset-frontend/src/components/Space/Space.stories.tsx new file mode 100644 index 0000000000000..9d3a6e5c3d692 --- /dev/null +++ b/superset-frontend/src/components/Space/Space.stories.tsx @@ -0,0 +1,60 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/* + * Re-exporting of components in src/components to facilitate + * their imports by other components. + * E.g. import { Select } from 'src/components' + */ + +import { Space, SpaceProps } from 'src/components/Space'; + +export default { + title: 'Space', + component: Space, +}; + +export const InteractiveSpace = (args: SpaceProps) => ( + + {new Array(20).fill(null).map((_, i) => ( +

Item

+ ))} + +); + +InteractiveSpace.args = { + direction: 'horizontal', + size: 'small', + wrap: 'false', +}; + +InteractiveSpace.argTypes = { + align: { + control: { type: 'select' }, + options: ['start', 'end', 'center', 'baseline', ''], + }, + direction: { + control: { type: 'select' }, + options: ['vertical', 'horizontal'], + }, + size: { + control: { type: 'select' }, + options: ['small', 'middle', 'large'], + }, +}; diff --git a/superset-frontend/src/components/Space/Space.test.tsx b/superset-frontend/src/components/Space/Space.test.tsx new file mode 100644 index 0000000000000..8d73af2198823 --- /dev/null +++ b/superset-frontend/src/components/Space/Space.test.tsx @@ -0,0 +1,26 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { render } from 'spec/helpers/testing-library'; +import { Space } from '.'; + +test('should render', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); +}); diff --git a/superset-frontend/src/components/Space/index.tsx b/superset-frontend/src/components/Space/index.tsx new file mode 100644 index 0000000000000..0c155ff74a581 --- /dev/null +++ b/superset-frontend/src/components/Space/index.tsx @@ -0,0 +1,33 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/* + * Re-exporting of components in src/components to facilitate + * their imports by other components. + * E.g. import { Select } from 'src/components' + */ + +import { Space as AntdSpace } from 'antd-v5'; +import type { SpaceProps } from 'antd-v5/es/space'; + +export function Space(props: SpaceProps) { + return ; +} + +export { SpaceProps }; diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx index 87c40d0087fb0..b80d5445f58b0 100644 --- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx +++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx @@ -19,7 +19,7 @@ import { useState } from 'react'; import { css, useTheme } from '@superset-ui/core'; import { Radio } from 'src/components/Radio'; -import { Space } from 'src/components'; +import { Space } from 'src/components/Space'; import Icons from 'src/components/Icons'; import Popover from 'src/components/Popover'; diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 95095a4a721a5..45db6f084ed2f 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -37,7 +37,6 @@ export { Grid, Row, Skeleton, - Space, Steps, Tag, Tree, diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx index fad4fd666cd28..f351ab717c78a 100644 --- a/superset-frontend/src/explore/components/DataTableControl/index.tsx +++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx @@ -30,7 +30,7 @@ import { import { Global } from '@emotion/react'; import { Column } from 'react-table'; import { debounce } from 'lodash'; -import { Space } from 'src/components'; +import { Space } from 'src/components/Space'; import { Input } from 'src/components/Input'; import { BOOL_FALSE_DISPLAY,