feat(build): uplift Storybook to v8 (#29408)
Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
Đỗ Trọng Hải
GitHub
parent
813775e719
commit
3bf89893dc
|
|
@ -29,7 +29,7 @@ module.exports = {
|
|||
addons: [
|
||||
getAbsolutePath('@storybook/addon-essentials'),
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
getAbsolutePath('storybook-addon-jsx'),
|
||||
'@mihkeleidast/storybook-addon-source',
|
||||
getAbsolutePath('@storybook/addon-controls'),
|
||||
getAbsolutePath('@storybook/addon-mdx-gfm'),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { jsxDecorator } from 'storybook-addon-jsx';
|
||||
import { withJsx } from '@mihkeleidast/storybook-addon-source';
|
||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||
import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
|
|
@ -48,7 +48,7 @@ const providerDecorator = Story => (
|
|||
</Provider>
|
||||
);
|
||||
|
||||
export const decorators = [jsxDecorator, themeDecorator, providerDecorator];
|
||||
export const decorators = [withJsx, themeDecorator, providerDecorator];
|
||||
|
||||
export const parameters = {
|
||||
paddings: {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -228,17 +228,15 @@
|
|||
"@emotion/jest": "^11.11.0",
|
||||
"@hot-loader/react-dom": "^16.14.0",
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.1",
|
||||
"@storybook/addon-actions": "^7.6.13",
|
||||
"@storybook/addon-controls": "^7.6.13",
|
||||
"@storybook/addon-docs": "^7.6.13",
|
||||
"@storybook/addon-essentials": "^7.6.13",
|
||||
"@storybook/addon-links": "^7.6.13",
|
||||
"@storybook/addon-mdx-gfm": "^7.6.15",
|
||||
"@storybook/addons": "^7.6.13",
|
||||
"@storybook/client-api": "^7.6.13",
|
||||
"@storybook/components": "^7.6.13",
|
||||
"@storybook/react": "^7.6.13",
|
||||
"@storybook/react-webpack5": "^7.6.13",
|
||||
"@storybook/addon-actions": "^8.1.11",
|
||||
"@storybook/addon-controls": "^8.1.11",
|
||||
"@storybook/addon-essentials": "^8.1.11",
|
||||
"@storybook/addon-links": "^8.1.11",
|
||||
"@storybook/addon-mdx-gfm": "^8.1.11",
|
||||
"@storybook/preview-api": "^8.1.11",
|
||||
"@storybook/components": "^8.1.11",
|
||||
"@storybook/react": "^8.1.11",
|
||||
"@storybook/react-webpack5": "^8.1.11",
|
||||
"@svgr/webpack": "^8.0.1",
|
||||
"@testing-library/dom": "^7.29.4",
|
||||
"@testing-library/jest-dom": "^5.11.6",
|
||||
|
|
@ -341,8 +339,8 @@
|
|||
"source-map": "^0.7.4",
|
||||
"source-map-support": "^0.5.21",
|
||||
"speed-measure-webpack-plugin": "^1.5.0",
|
||||
"storybook": "^7.6.13",
|
||||
"storybook-addon-jsx": "^7.3.14",
|
||||
"storybook": "^8.1.11",
|
||||
"@mihkeleidast/storybook-addon-source": "^1.0.1",
|
||||
"style-loader": "^3.3.4",
|
||||
"thread-loader": "^3.0.4",
|
||||
"transform-loader": "^0.2.4",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const customConfig = require('../../../webpack.config.js');
|
|||
module.exports = {
|
||||
addons: [
|
||||
getAbsolutePath('@storybook/addon-controls'),
|
||||
getAbsolutePath('storybook-addon-jsx'),
|
||||
'@mihkeleidast/storybook-addon-source',
|
||||
getAbsolutePath('@storybook/addon-actions'),
|
||||
getAbsolutePath('@storybook/addon-links'),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { jsxDecorator } from 'storybook-addon-jsx';
|
||||
import { withJsx } from '@mihkeleidast/storybook-addon-source';
|
||||
import {
|
||||
configure,
|
||||
getTimeFormatterRegistry,
|
||||
|
|
@ -15,7 +15,7 @@ import themeDecorator from './themeDecorator';
|
|||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './storybook.css';
|
||||
|
||||
export const decorators = [jsxDecorator, themeDecorator];
|
||||
export const decorators = [withJsx, themeDecorator];
|
||||
|
||||
export const parameters = {
|
||||
passArgsFirst: false,
|
||||
|
|
|
|||
|
|
@ -36,12 +36,11 @@
|
|||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@react-icons/all-files": "^4.1.0",
|
||||
"@storybook/addon-actions": "^7.6.13",
|
||||
"@storybook/addon-controls": "^7.6.13",
|
||||
"@storybook/addon-links": "^7.6.13",
|
||||
"@storybook/addons": "^7.6.13",
|
||||
"@storybook/react": "^7.6.13",
|
||||
"@storybook/types": "^7.6.19",
|
||||
"@storybook/addon-actions": "^8.1.11",
|
||||
"@storybook/addon-controls": "^8.1.11",
|
||||
"@storybook/addon-links": "^8.1.11",
|
||||
"@storybook/react": "^8.1.11",
|
||||
"@storybook/types": "^8.1.11",
|
||||
"@types/react-loadable": "^5.5.3",
|
||||
"antd": "4.10.3",
|
||||
"bootstrap": "^3.4.1",
|
||||
|
|
@ -53,14 +52,14 @@
|
|||
"react-dom": "^16.13.1",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-resizable": "^3.0.5",
|
||||
"storybook-addon-jsx": "^7.3.14"
|
||||
"@mihkeleidast/storybook-addon-source": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.23.9",
|
||||
"@babel/preset-env": "^7.23.9",
|
||||
"@babel/preset-react": "^7.23.3",
|
||||
"@babel/preset-typescript": "^7.23.3",
|
||||
"@storybook/react-webpack5": "^7.6.13",
|
||||
"@storybook/react-webpack5": "^8.1.11",
|
||||
"babel-loader": "^9.1.3",
|
||||
"fork-ts-checker-webpack-plugin": "^9.0.2",
|
||||
"ts-loader": "^7.0.4",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react",
|
||||
"jsx": "preserve",
|
||||
"outDir": "../../build/lib",
|
||||
"rootDir": "../../",
|
||||
"emitDeclarationOnly": false,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import Checkbox, { CheckboxProps } from '.';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
// import { Meta, Source } from '@storybook/addon-docs';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { Source, Story } from '@storybook/addon-docs';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
|
||||
export default {
|
||||
|
|
@ -41,10 +40,9 @@ Some of the common applications in Superset are:
|
|||
- Display the database's metadata in a drill to detail modal to help the user understand what data they are looking
|
||||
at while accessing the feature in the dashboard
|
||||
|
||||
## Basic example
|
||||
## [Basic example]((./?path=/docs/design-system-components-metadatabar-examples--basic)
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-metadatabar-examples--basic" />
|
||||
<Markdown>
|
||||
{`
|
||||
## Variations
|
||||
|
|
@ -65,112 +63,122 @@ To check each content type in detail and its interactions, check the [MetadataBa
|
|||
Below you can find the configurations for each content type:
|
||||
`}
|
||||
</Markdown>
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export enum MetadataType {
|
||||
Dashboards = 'dashboards',
|
||||
Description = 'description',
|
||||
LastModified = 'lastModified',
|
||||
Owner = 'owner',
|
||||
Rows = 'rows',
|
||||
Sql = 'sql',
|
||||
Table = 'table',
|
||||
Tags = 'tags',
|
||||
}`}
|
||||
/>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Dashboards = {
|
||||
type: MetadataType.Dashboards;
|
||||
title: string;
|
||||
description?: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export enum MetadataType {
|
||||
Dashboards = 'dashboards',
|
||||
Description = 'description',
|
||||
LastModified = 'lastModified',
|
||||
Owner = 'owner',
|
||||
Rows = 'rows',
|
||||
Sql = 'sql',
|
||||
Table = 'table',
|
||||
Tags = 'tags',
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Description = {
|
||||
type: MetadataType.Description;
|
||||
value: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Dashboards = {
|
||||
type: MetadataType.Dashboards;
|
||||
title: string;
|
||||
description?: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type LastModified = {
|
||||
type: MetadataType.LastModified;
|
||||
value: Date;
|
||||
modifiedBy: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Description = {
|
||||
type: MetadataType.Description;
|
||||
value: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Owner = {
|
||||
type: MetadataType.Owner;
|
||||
createdBy: string;
|
||||
owners: string[];
|
||||
createdOn: Date;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type LastModified = {
|
||||
type: MetadataType.LastModified;
|
||||
value: Date;
|
||||
modifiedBy: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Rows = {
|
||||
type: MetadataType.Rows;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Owner = {
|
||||
type: MetadataType.Owner;
|
||||
createdBy: string;
|
||||
owners: string[];
|
||||
createdOn: Date;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Sql = {
|
||||
type: MetadataType.Sql;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Rows = {
|
||||
type: MetadataType.Rows;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Table = {
|
||||
type: MetadataType.Table;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Sql = {
|
||||
type: MetadataType.Sql;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Source
|
||||
language="jsx"
|
||||
format
|
||||
code={`
|
||||
export type Tags = {
|
||||
type: MetadataType.Tags;
|
||||
values: string[];
|
||||
onClick?: (type: string) => void;
|
||||
};`}
|
||||
/>
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Table = {
|
||||
type: MetadataType.Table;
|
||||
title: string;
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Markdown>
|
||||
{`
|
||||
\`\`\`
|
||||
export type Tags = {
|
||||
type: MetadataType.Tags;
|
||||
values: string[];
|
||||
onClick?: (type: string) => void;
|
||||
};
|
||||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,12 +19,7 @@
|
|||
import { useState } from 'react';
|
||||
import PopoverDropdown, { PopoverDropdownProps, OptionProps } from '.';
|
||||
|
||||
export default {
|
||||
title: 'PopoverDropdown',
|
||||
includeStories: ['InteractivePopoverDropdown'],
|
||||
};
|
||||
|
||||
export const OPTIONS: OptionProps[] = [
|
||||
const OPTIONS: OptionProps[] = [
|
||||
{ label: 'Option A', value: 'A' },
|
||||
{ label: 'Option B', value: 'B' },
|
||||
{ label: 'Option C', value: 'C' },
|
||||
|
|
@ -77,11 +72,18 @@ InteractivePopoverDropdown.argTypes = {
|
|||
options: ['default', 'button'],
|
||||
},
|
||||
value: {
|
||||
defaultValue: OPTIONS[0].value,
|
||||
table: { disable: true },
|
||||
},
|
||||
options: {
|
||||
defaultValue: OPTIONS,
|
||||
table: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'PopoverDropdown',
|
||||
includeStories: ['InteractivePopoverDropdown'],
|
||||
args: {
|
||||
value: OPTIONS[0].value,
|
||||
options: OPTIONS,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Radio } from './index';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Switch, SwitchProps } from '.';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
*/
|
||||
import { useState, DragEvent } from 'react';
|
||||
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import type { Meta, StoryFn } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import {
|
||||
ColumnsType,
|
||||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
title: 'Design System/Components/Table/Examples',
|
||||
component: Table,
|
||||
argTypes: { onClick: { action: 'clicked' } },
|
||||
} as ComponentMeta<typeof Table>;
|
||||
} as Meta<typeof Table>;
|
||||
|
||||
export interface BasicData {
|
||||
name: string;
|
||||
|
|
@ -306,7 +306,7 @@ for (let i = 0; i < recordCount; i += 1) {
|
|||
});
|
||||
}
|
||||
|
||||
export const Basic: ComponentStory<typeof Table> = args => <Table {...args} />;
|
||||
export const Basic: StoryFn<typeof Table> = args => <Table {...args} />;
|
||||
|
||||
function handlers(record: object, rowIndex: number) {
|
||||
return {
|
||||
|
|
@ -332,9 +332,7 @@ Basic.args = {
|
|||
usePagination: false,
|
||||
};
|
||||
|
||||
export const Pagination: ComponentStory<typeof Table> = args => (
|
||||
<Table {...args} />
|
||||
);
|
||||
export const Pagination: StoryFn<typeof Table> = args => <Table {...args} />;
|
||||
|
||||
Pagination.args = {
|
||||
data: basicData,
|
||||
|
|
@ -401,7 +399,7 @@ const paginationColumns: ColumnsType<BasicData> = [
|
|||
},
|
||||
];
|
||||
|
||||
export const ServerPagination: ComponentStory<typeof Table> = args => {
|
||||
export const ServerPagination: StoryFn<typeof Table> = args => {
|
||||
const [data, setData] = useState(generateData(0, 5));
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
|
@ -456,7 +454,7 @@ ServerPagination.args = {
|
|||
defaultPageSize: 5,
|
||||
};
|
||||
|
||||
export const VirtualizedPerformance: ComponentStory<typeof Table> = args => (
|
||||
export const VirtualizedPerformance: StoryFn<typeof Table> = args => (
|
||||
<Table {...args} />
|
||||
);
|
||||
|
||||
|
|
@ -471,9 +469,7 @@ VirtualizedPerformance.args = {
|
|||
usePagination: false,
|
||||
};
|
||||
|
||||
export const Loading: ComponentStory<typeof Table> = args => (
|
||||
<Table {...args} />
|
||||
);
|
||||
export const Loading: StoryFn<typeof Table> = args => <Table {...args} />;
|
||||
|
||||
Loading.args = {
|
||||
data: basicData,
|
||||
|
|
@ -482,7 +478,7 @@ Loading.args = {
|
|||
loading: true,
|
||||
};
|
||||
|
||||
export const ResizableColumns: ComponentStory<typeof Table> = args => (
|
||||
export const ResizableColumns: StoryFn<typeof Table> = args => (
|
||||
<Table {...args} />
|
||||
);
|
||||
|
||||
|
|
@ -493,7 +489,7 @@ ResizableColumns.args = {
|
|||
resizable: true,
|
||||
};
|
||||
|
||||
export const ReorderableColumns: ComponentStory<typeof Table> = args => {
|
||||
export const ReorderableColumns: StoryFn<typeof Table> = args => {
|
||||
const [droppedItem, setDroppedItem] = useState<string | undefined>();
|
||||
const dragOver = (ev: DragEvent<HTMLDivElement>) => {
|
||||
ev.preventDefault();
|
||||
|
|
@ -572,9 +568,7 @@ const rendererData: RendererData[] = [
|
|||
},
|
||||
];
|
||||
|
||||
export const CellRenderers: ComponentStory<typeof Table> = args => (
|
||||
<Table {...args} />
|
||||
);
|
||||
export const CellRenderers: StoryFn<typeof Table> = args => <Table {...args} />;
|
||||
|
||||
CellRenderers.args = {
|
||||
data: rendererData,
|
||||
|
|
@ -611,7 +605,7 @@ const shoppingData: ShoppingData[] = [
|
|||
},
|
||||
];
|
||||
|
||||
export const HeaderRenderers: ComponentStory<typeof Table> = () => {
|
||||
export const HeaderRenderers: StoryFn<typeof Table> = () => {
|
||||
const [orderDateFormatting, setOrderDateFormatting] = useState('formatted');
|
||||
const [priceLocale, setPriceLocale] = useState(LocaleCode.en_US);
|
||||
const shoppingColumns: ColumnsType<ShoppingData> = [
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
|
||||
export default {
|
||||
|
|
@ -47,8 +46,6 @@ This component provides a general use Table.
|
|||
`}
|
||||
</Markdown>
|
||||
|
||||
<Story id="design-system-components-table-examples--basic" />
|
||||
|
||||
<Markdown>
|
||||
{`
|
||||
### Data and Columns
|
||||
|
|
@ -166,14 +163,13 @@ If a different sort option is needed, consider adding it as a reusable sort func
|
|||
|
||||
---
|
||||
|
||||
### Cell Content Renderers
|
||||
### [Cell Content Renderers](./?path=/docs/design-system-components-table-examples--cell-renderers)
|
||||
|
||||
By default, each column will render the value as simple text. Often you will want to show formatted values, such as a numeric column showing as currency, or a more complex component such as a button or action menu as a cell value.
|
||||
Cell Renderers are React components provided to the optional \`render\` attribute on a column definition that enables injecting a specific React component to enable this.
|
||||
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--cell-renderers" />
|
||||
<Markdown>
|
||||
{`
|
||||
|
||||
|
|
@ -192,26 +188,23 @@ The following data types can be displayed in table cells.
|
|||
|
||||
---
|
||||
|
||||
### Loading
|
||||
### [Loading](./?path=/docs/design-system-components-table-examples--loading)
|
||||
|
||||
The table can be set to a loading state simply by setting the loading prop to true | false
|
||||
|
||||
`}
|
||||
</Markdown>
|
||||
|
||||
<Story id="design-system-components-table-examples--loading" />
|
||||
<Markdown>
|
||||
{`
|
||||
---
|
||||
|
||||
### Pagination
|
||||
### [Pagination](./?path=/docs/design-system-components-table-examples--pagination)
|
||||
|
||||
The table displays a set number of rows at a time, the user navigates the table via pagination. Use in scenarios where the user is searching for a specific piece of content.
|
||||
The default page size and page size options for the menu are configurable via the \`pageSizeOptions\` and \`defaultPageSize\` props.
|
||||
NOTE: Pagination controls will only display when the data for the table has more records than the default page size.
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--pagination" />
|
||||
<Markdown>
|
||||
{`
|
||||
|
||||
|
|
@ -221,7 +214,7 @@ NOTE: Pagination controls will only display when the data for the table has more
|
|||
|
||||
---
|
||||
|
||||
### Server Pagination
|
||||
### [Server Pagination](./?path=/docs/design-system-components-table-examples--server-pagination)
|
||||
|
||||
The table can be configured for async data fetching to get partial data sets while showing pagination controls that let the user navigate through data.
|
||||
To override the default paging, which uses \`data.length\` to determine the record count, populate the \`recordCount\` prop with the total number of records
|
||||
|
|
@ -230,7 +223,6 @@ function enabling data fetching to occur when the user changes the page.
|
|||
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--server-pagination" />
|
||||
<Markdown>
|
||||
{`
|
||||
|
||||
|
|
@ -292,7 +284,7 @@ const ServerPaginationTable = () => {
|
|||
|
||||
---
|
||||
|
||||
### Virtualization for Performance
|
||||
### [Virtualization for Performance](./?path=/docs/design-system-components-table-examples--virtualized-performance)
|
||||
|
||||
Table virtualization can enable viewing data with many columns and/or rows.
|
||||
Virtualization can be enabled via the \`virtualize\` prop.
|
||||
|
|
@ -302,7 +294,6 @@ Support for row event handlers may be added in future versions of the Table.
|
|||
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--virtualized-performance" />
|
||||
<Markdown>
|
||||
{`
|
||||
|
||||
|
|
@ -351,18 +342,17 @@ The following specifications are required every time a table is used. These choi
|
|||
The Table component has features that are still experimental and can be used at your own risk.
|
||||
These features are intended to be made fully stable in future releases.
|
||||
|
||||
### Resizable Columns
|
||||
### [Resizable Columns](./?path=/docs/design-system-components-table-examples--resizable-columns)
|
||||
|
||||
The prop \`resizable\` enables table columns to be resized by the user dragging from the right edge of each
|
||||
column to increase or decrease the columns' width
|
||||
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--resizable-columns" />
|
||||
<Markdown>
|
||||
{`
|
||||
|
||||
### Drag & Drop Columns
|
||||
### [Drag & Drop Columns](./?path=/docs/design-system-components-table-examples--reorderable-columns)
|
||||
|
||||
The prop \`reorderable\` can enable column drag and drop reordering as well as dragging a column to another component. If you want to accept the drop event of a Table Column
|
||||
you can register \`onDragOver\` and \`onDragDrop\` event handlers on the destination component. In the \`onDragDrop\` handler you can check for \`SUPERSET_TABLE_COLUMN\`
|
||||
|
|
@ -379,6 +369,5 @@ const handleDrop = (ev:Event) => {
|
|||
\`\`\`
|
||||
`}
|
||||
</Markdown>
|
||||
<Story id="design-system-components-table-examples--reorderable-columns" />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
// import { Meta, Source, Story, ArgsTable } from '@storybook/addon-docs';
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -16,16 +16,16 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import ActionCell from './index';
|
||||
import { exampleMenuOptions, exampleRow } from './fixtures';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/ActionCell',
|
||||
component: ActionCell,
|
||||
} as ComponentMeta<typeof ActionCell>;
|
||||
} as Meta<typeof ActionCell>;
|
||||
|
||||
export const Basic: ComponentStory<typeof ActionCell> = args => (
|
||||
export const Basic: StoryFn<typeof ActionCell> = args => (
|
||||
<ActionCell {...args} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import BooleanCell from '.';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/BooleanCell',
|
||||
component: BooleanCell,
|
||||
} as ComponentMeta<typeof BooleanCell>;
|
||||
} as Meta<typeof BooleanCell>;
|
||||
|
||||
export const Basic: ComponentStory<typeof BooleanCell> = args => (
|
||||
export const Basic: StoryFn<typeof BooleanCell> = args => (
|
||||
<BooleanCell {...args} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,18 +16,18 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { ButtonCell } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/ButtonCell',
|
||||
component: ButtonCell,
|
||||
} as ComponentMeta<typeof ButtonCell>;
|
||||
} as Meta<typeof ButtonCell>;
|
||||
|
||||
const clickHandler = action('button cell onClick');
|
||||
|
||||
export const Basic: ComponentStory<typeof ButtonCell> = args => (
|
||||
export const Basic: StoryFn<typeof ButtonCell> = args => (
|
||||
<ButtonCell {...args} />
|
||||
);
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ Basic.args = {
|
|||
},
|
||||
};
|
||||
|
||||
export const Secondary: ComponentStory<typeof ButtonCell> = args => (
|
||||
export const Secondary: StoryFn<typeof ButtonCell> = args => (
|
||||
<ButtonCell {...args} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,12 +16,12 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import NullCell from '.';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/NullCell',
|
||||
component: NullCell,
|
||||
} as ComponentMeta<typeof NullCell>;
|
||||
} as Meta<typeof NullCell>;
|
||||
|
||||
export const Basic: ComponentStory<typeof NullCell> = () => <NullCell />;
|
||||
export const Basic: StoryFn<typeof NullCell> = () => <NullCell />;
|
||||
|
|
|
|||
|
|
@ -16,15 +16,15 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { CurrencyCode, NumericCell, LocaleCode, Style } from './index';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/NumericCell',
|
||||
component: NumericCell,
|
||||
} as ComponentMeta<typeof NumericCell>;
|
||||
} as Meta<typeof NumericCell>;
|
||||
|
||||
export const Basic: ComponentStory<typeof NumericCell> = args => (
|
||||
export const Basic: StoryFn<typeof NumericCell> = args => (
|
||||
<NumericCell {...args} />
|
||||
);
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ Basic.args = {
|
|||
value: 5678943,
|
||||
};
|
||||
|
||||
export const FrenchLocale: ComponentStory<typeof NumericCell> = args => (
|
||||
export const FrenchLocale: StoryFn<typeof NumericCell> = args => (
|
||||
<NumericCell {...args} />
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -16,18 +16,16 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { TimeFormats } from '@superset-ui/core';
|
||||
import TimeCell from '.';
|
||||
|
||||
export default {
|
||||
title: 'Design System/Components/Table/Cell Renderers/TimeCell',
|
||||
component: TimeCell,
|
||||
} as ComponentMeta<typeof TimeCell>;
|
||||
} as Meta<typeof TimeCell>;
|
||||
|
||||
export const Basic: ComponentStory<typeof TimeCell> = args => (
|
||||
<TimeCell {...args} />
|
||||
);
|
||||
export const Basic: StoryFn<typeof TimeCell> = args => <TimeCell {...args} />;
|
||||
|
||||
Basic.args = {
|
||||
value: new Date('2015-07-02T16:16:00Z').getTime(),
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import TimezoneSelector, { TimezoneSelectorProps } from './index';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { supersetTheme, ThemeProvider } from '@superset-ui/core';
|
||||
import DatasetPanel from './DatasetPanel';
|
||||
import { exampleColumns } from './fixtures';
|
||||
|
|
@ -25,9 +25,9 @@ import { exampleColumns } from './fixtures';
|
|||
export default {
|
||||
title: 'Superset App/views/CRUD/data/dataset/DatasetPanel',
|
||||
component: DatasetPanel,
|
||||
} as ComponentMeta<typeof DatasetPanel>;
|
||||
} as Meta<typeof DatasetPanel>;
|
||||
|
||||
export const Basic: ComponentStory<typeof DatasetPanel> = args => (
|
||||
export const Basic: StoryFn<typeof DatasetPanel> = args => (
|
||||
<ThemeProvider theme={supersetTheme}>
|
||||
<div style={{ height: '350px' }}>
|
||||
<DatasetPanel {...args} />
|
||||
|
|
|
|||
|
|
@ -309,7 +309,7 @@ const config = {
|
|||
// resolve modules from `/superset_frontend/node_modules` and `/superset_frontend`
|
||||
modules: ['node_modules', APP_DIR],
|
||||
alias: {
|
||||
// TODO: remove aliases once React has been upgraded to v. 17 and
|
||||
// TODO: remove aliases once React has been upgraded to v17 and
|
||||
// AntD version conflict has been resolved
|
||||
antd: path.resolve(path.join(APP_DIR, './node_modules/antd')),
|
||||
react: path.resolve(path.join(APP_DIR, './node_modules/react')),
|
||||
|
|
@ -322,6 +322,14 @@ const config = {
|
|||
This prevents "Module not found" errors for moment locale files.
|
||||
*/
|
||||
'moment/min/moment-with-locales': false,
|
||||
// Temporary workaround to allow Storybook 8 to work with existing React v16-compatible stories.
|
||||
// Remove below alias once React has been upgreade to v18.
|
||||
'@storybook/react-dom-shim': path.resolve(
|
||||
path.join(
|
||||
APP_DIR,
|
||||
'./node_modules/@storybook/react-dom-shim/dist/react-16',
|
||||
),
|
||||
),
|
||||
},
|
||||
extensions: ['.ts', '.tsx', '.js', '.jsx', '.yml'],
|
||||
fallback: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue