Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Remove Storybook #6040

Merged
merged 13 commits into from
Sep 9, 2022
Merged
1 change: 0 additions & 1 deletion docs/data/data-grid/overview/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ You can find more details on, the [feature comparison](/x/react-data-grid/gettin

Here are some resources you might be interested in to learn more about the grid:

- The storybook used for [internal development](https://material-ui-x.netlify.app/storybook/)
- The [source on GitHub](https://github.com/mui/mui-x/tree/master/packages/)
- The [Material Design specification](https://material.io/components/data-tables) specification
- The accessibility [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)
Expand Down
2 changes: 1 addition & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
publish = "docs/export/"

# Default build command.
command = "yarn docs:build && yarn docs:export && yarn storybook:build && yarn storybook:export"
command = "yarn docs:build && yarn docs:export"

[build.environment]
NODE_VERSION = "14"
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@
"docs:importDocsStatic": "node scripts/importDocsStatic.js",
"docs:size-why": "cross-env DOCS_STATS_ENABLED=true yarn docs:build",
"docs:deploy": "yarn workspace docs deploy",
"storybook:dev": "yarn workspace storybook start",
"storybook:build": "yarn workspace storybook build",
"storybook:export": "yarn workspace storybook export",
"deduplicate": "node scripts/deduplicate.js",
"dataset:file-tree": "babel-node -x .ts ./scripts/treeDataFromFileTree.ts",
"l10n": "babel-node -x .ts ./scripts/l10n.ts",
Expand Down Expand Up @@ -156,7 +153,9 @@
"serve": "^14.0.1",
"sinon": "^14.0.0",
"stream-browserify": "^3.0.0",
"string-replace-loader": "^3.1.0",
"typescript": "^4.7.4",
"util": "^0.12.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"yargs": "^17.5.1",
Expand Down
1 change: 1 addition & 0 deletions packages/grid/x-data-grid-generator/src/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './useDemoData';
export * from './useBasicDemoData';
export * from './useMovieData';
export * from './useQuery';
13 changes: 13 additions & 0 deletions packages/grid/x-data-grid-generator/src/hooks/useBasicDemoData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';
import { getBasicGridData, GridBasicData } from '../services';

export const useBasicDemoData = (nbRows: number, nbCols: number): GridBasicData => {
const [data, setData] = React.useState<GridBasicData>({ rows: [], columns: [] });

React.useEffect(() => {
const newData = getBasicGridData(nbRows, nbCols);
setData(newData);
}, [nbRows, nbCols]);

return data;
};
106 changes: 106 additions & 0 deletions packages/grid/x-data-grid-generator/src/services/basic-data-service.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import { GridColDef, GridRowId } from '@mui/x-data-grid';

export const currencyPairs = [
'USDGBP',
'USDEUR',
'GBPEUR',
'JPYUSD',
'MXNUSD',
'BTCUSD',
'USDCAD',
'EURJPY',
'EURUSD',
'EURCHF',
'USDCHF',
'EURGBP',
'GBPUSD',
'AUDCAD',
'NZDUSD',
'GBPCHF',
'AUDUSD',
'GBPJPY',
'USDJPY',
'CHFJPY',
'EURCAD',
'AUDJPY',
'EURAUD',
'AUDNZD',
'CADEUR',
'CHFMXN',
'ETHUSD',
'BCHUSD',
'ETHBTC',
'XRPUSD',
'XRPBTC',
'USDLTC',
'USDXRP',
'USDDSH',
'USDBCH',
'JPYEUR',
'JPYUSD',
'JPYGBP',
'JPYCAD',
'JPYCHF',
'JPYAUD',
'JPYNZD',
'JPYSGD',
'JPYNOK',
'JPYRUB',
'JPYSEK',
'JPYTRY',
'JPYZAR',
'JPYHKD',
'JPYCNH',
'JPYDKK',
'JPYMXN',
'JPYPLN',
'JPYXAG',
'JPYXAU',
'JPYBTC',
'JPYETH',
'JPYLTC',
'JPYXRP',
'JPYDSH',
'JPYBCH',
'GBPEUR',
'GBPRUB',
'GBPTRY',
];

interface GridBasicRowModel {
id: GridRowId;
currencyPair: string;
[price: string]: number | string;
}

export interface GridBasicData {
columns: GridColDef[];
rows: GridBasicRowModel[];
}

export const getBasicGridData = (rowLength: number, colLength: number): GridBasicData => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I guess this was part of the storybook package. I wanter if we can remove it altogether and just use either the Commodity or Employee data sets. If there are no assertions in the tests related to the value of the cells then replacing the data set should be more or less easy, what do you think?

Copy link
Member Author

@flaviendelangle flaviendelangle Sep 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, it's the old useData and getData.

For the tests, it can be useful to have those dummy data tests without any intelligence behind them.
For instance in the pagination, it makes very clear what you are testing.

I would personally be in favor of an even dumber data set.
Something like:

{ id: 0, name: `name-0` },
{ id: 1, name: `name-1' },
...

And to use it everywhere we have some "Nike" / "Puma" dataset.
To reduce as much as possible the complexity of understanding the dataset and focusing on the actual behavior we are testing.

const data: GridBasicRowModel[] = [];
const pricesColLength = colLength - 2;
for (let i = 0; i < rowLength; i += 1) {
const idx = i >= currencyPairs.length ? i % currencyPairs.length : i;
const model: GridBasicRowModel = {
id: i,
currencyPair: currencyPairs[idx],
};
for (let j = 1; j <= pricesColLength; j += 1) {
model[`price${j}M`] = Number(`${i.toString()}${j}`); // randomPrice(0.7, 2);
}
data.push(model);
}

const columns: GridColDef[] = [
{ field: 'id', headerName: 'id', type: 'number' },
{ field: 'currencyPair', headerName: 'Currency Pair' },
];
for (let j = 1; j <= pricesColLength; j += 1) {
// const y = Math.floor(j / 12);
columns.push({ field: `price${j}M`, headerName: `${j}M`, type: 'number' }); // (y > 0 ? `${y}Y` : '') + `${j - y * 12}M`
}
columns.length = colLength; // we cut the array in case < 2;
return { columns, rows: data };
};
1 change: 1 addition & 0 deletions packages/grid/x-data-grid-generator/src/services/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export * from './gridColDefGenerator';
export * from './random-generator';
export * from './real-data-service';
export * from './basic-data-service';
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { expect } from 'chai';
import axe from 'axe-core';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useBasicDemoData } from '@mui/x-data-grid-generator';
// @ts-ignore Remove once the test utils are typed
import { createRenderer } from '@mui/monorepo/test/utils';
import { useData } from 'storybook/src/hooks/useData';
import axe from 'axe-core';

function logViolations(violations: any) {
if (violations.length !== 0) {
Expand All @@ -27,7 +27,7 @@ describe('<DataGridPro /> - Accessibility', () => {

it('pinned columns should pass `aria-required-parent` rule', async () => {
const TestCase = () => {
const data = useData(1, 3);
const data = useBasicDemoData(1, 3);
return (
<div style={{ width: 302, height: 300 }}>
<DataGridPro
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import {
GridApi,
DataGridProProps,
Expand All @@ -8,21 +10,19 @@ import {
GridValueSetterParams,
GridPreProcessEditCellProps,
GridCellProps,
GridCellModes,
} from '@mui/x-data-grid-pro';
import { getBasicGridData } from '@mui/x-data-grid-generator';
// @ts-ignore Remove once the test utils are typed
import { createRenderer, fireEvent, act, userEvent } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getCell } from 'test/utils/helperFn';
import { spy } from 'sinon';
import { getData } from 'storybook/src/data/data-service';
import { GridCellModes } from '@mui/x-data-grid';

describe('<DataGridPro /> - Cell Editing', () => {
const { render, clock } = createRenderer({ clock: 'fake' });

let apiRef: React.MutableRefObject<GridApi>;

const defaultData = getData(4, 2);
const defaultData = getBasicGridData(4, 2);

const renderEditCell = spy((() => <input />) as (
props: GridRenderEditCellParams,
Expand Down Expand Up @@ -550,7 +550,7 @@ describe('<DataGridPro /> - Cell Editing', () => {
columnProps.renderEditCell = (props: GridCellProps) => <CustomEditComponent {...props} />;
render(
<TestCase
{...getData(1, 3)}
{...getBasicGridData(1, 3)}
columns={[
{ field: 'id' },
{ field: 'currencyPair', editable: true },
Expand All @@ -575,7 +575,7 @@ describe('<DataGridPro /> - Cell Editing', () => {
columnProps.renderEditCell = (props: GridCellProps) => <CustomEditComponent {...props} />;
render(
<TestCase
{...getData(1, 3)}
{...getBasicGridData(1, 3)}
columns={[
{ field: 'id' },
{ field: 'currencyPair', editable: true },
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import * as React from 'react';
import { spy } from 'sinon';
import { expect } from 'chai';
import {
DataGridPro,
GridApi,
Expand All @@ -7,8 +9,7 @@ import {
gridClasses,
GridPinnedPosition,
} from '@mui/x-data-grid-pro';
import { spy } from 'sinon';
import { expect } from 'chai';
import { useBasicDemoData, getBasicGridData } from '@mui/x-data-grid-generator';
import {
createRenderer,
fireEvent,
Expand All @@ -19,8 +20,6 @@ import {
// @ts-ignore Remove once the test utils are typed
} from '@mui/monorepo/test/utils';
import { getCell, getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn';
import { useData } from 'storybook/src/hooks/useData';
import { getData } from 'storybook/src/data/data-service';

// TODO Move to utils
// Fix https://github.com/mui/mui-x/pull/2085/files/058f56ac3c729b2142a9a28b79b5b13535cdb819#diff-db85480a519a5286d7341e9b8957844762cf04cdacd946331ebaaaff287482ec
Expand All @@ -43,7 +42,7 @@ describe('<DataGridPro /> - Column pinning', () => {

const TestCase = ({ nbCols = 20, ...other }: Partial<DataGridProProps> & { nbCols?: number }) => {
apiRef = useGridApiRef();
const data = useData(1, nbCols);
const data = useBasicDemoData(1, nbCols);
return (
<div style={{ width: 302, height: 300 }}>
<DataGridPro {...data} apiRef={apiRef} {...other} />
Expand Down Expand Up @@ -271,7 +270,7 @@ describe('<DataGridPro /> - Column pinning', () => {
}

const Test = ({ bioHeight }: { bioHeight: number }) => {
const data = React.useMemo(() => getData(1, 2), []);
const data = React.useMemo(() => getBasicGridData(1, 2), []);

const columns = [
...data.columns,
Expand Down Expand Up @@ -310,7 +309,7 @@ describe('<DataGridPro /> - Column pinning', () => {
}

const Test = ({ bioHeight }: { bioHeight: number }) => {
const data = React.useMemo(() => getData(1, 2), []);
const data = React.useMemo(() => getBasicGridData(1, 2), []);

const columns = [
...data.columns,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
raf,
} from 'test/utils/helperFn';
import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro';
import { useData } from 'storybook/src/hooks/useData';
import { useBasicDemoData } from '@mui/x-data-grid-generator';
import { spy } from 'sinon';

const isJSDOM = /jsdom/.test(window.navigator.userAgent);
Expand Down Expand Up @@ -211,7 +211,7 @@ describe('<DataGridPro /> - Columns reorder', () => {
let apiRef: React.MutableRefObject<GridApi>;
const Test = () => {
apiRef = useGridApiRef();
const data = useData(1, 3);
const data = useBasicDemoData(1, 3);

return (
<div style={{ width: 300, height: 300 }}>
Expand Down Expand Up @@ -391,7 +391,7 @@ describe('<DataGridPro /> - Columns reorder', () => {
let apiRef: React.MutableRefObject<GridApi>;
const Test = () => {
apiRef = useGridApiRef();
const data = useData(3, 3);
const data = useBasicDemoData(3, 3);

return (
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
DataGridProProps,
GridApi,
} from '@mui/x-data-grid-pro';
import { useData } from 'packages/storybook/src/hooks/useData';
import { useBasicDemoData } from '@mui/x-data-grid-generator';
import { getCell, getRow } from 'test/utils/helperFn';

describe('<DataGridPro/> - Components', () => {
Expand All @@ -20,7 +20,7 @@ describe('<DataGridPro/> - Components', () => {

const TestCase = (props: Partial<DataGridProProps>) => {
apiRef = useGridApiRef();
const data = useData(100, 1);
const data = useBasicDemoData(100, 1);
return (
<div style={{ width: 500, height: 300 }}>
<DataGridPro apiRef={apiRef} {...data} disableVirtualization {...props} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import * as React from 'react';
import { expect } from 'chai';
import { spy } from 'sinon';
import {
DataGridPro,
GridApi,
useGridApiRef,
DataGridProProps,
GridRowParams,
gridClasses,
GRID_DETAIL_PANEL_TOGGLE_FIELD,
} from '@mui/x-data-grid-pro';
import { expect } from 'chai';
import { spy } from 'sinon';
import { useBasicDemoData } from '@mui/x-data-grid-generator';
import {
createRenderer,
fireEvent,
Expand All @@ -19,8 +21,6 @@ import {
// @ts-ignore Remove once the test utils are typed
} from '@mui/monorepo/test/utils';
import { getRow, getCell, getColumnValues } from 'test/utils/helperFn';
import { useData } from 'storybook/src/hooks/useData';
import { gridClasses } from '../../../x-data-grid/src/constants/gridClasses';

const isJSDOM = /jsdom/.test(window.navigator.userAgent);

Expand All @@ -31,7 +31,7 @@ describe('<DataGridPro /> - Detail panel', () => {

const TestCase = ({ nbRows = 20, ...other }: Partial<DataGridProProps> & { nbRows?: number }) => {
apiRef = useGridApiRef();
const data = useData(nbRows, 1);
const data = useBasicDemoData(nbRows, 1);
return (
<div style={{ width: 300, height: 302 }}>
<DataGridPro {...data} apiRef={apiRef} {...other} />
Expand Down Expand Up @@ -258,7 +258,7 @@ describe('<DataGridPro /> - Detail panel', () => {
this.skip(); // Needs layout
}
function Component() {
const data = useData(10, 4);
const data = useBasicDemoData(10, 4);
return (
<TestCase
{...data}
Expand Down
Loading