[core] Replace storybook knobs for args

packages/storybook/.storybook/main.js → packages/storybook/.storybook/main.ts

@@ -1,34 +1,26 @@
-const path = require('path');
-const webpack = require('webpack');
+import path from 'path';
+import type { StorybookConfig } from '@storybook/core/types';
 
 const env = process.env.NODE_ENV || 'development';
 /* eslint-disable */
-const __DEV__ = env === 'development';
-const __PROD__ = env === 'production';
+const isDevelopment = env === 'development';
+const isProduction = env === 'production';
 /* eslint-enable */
 
-if (!(__DEV__ || __PROD__)) {
+if (!(isDevelopment || isProduction)) {
   throw new Error(`Unknown env: ${env}.`);
 }
 console.log(`Loading config for ${env}`);
 const maxAssetSize = 1024 * 1024;
 
-module.exports = {
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.*'],
-  addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-viewport/register',
-    '@storybook/addon-knobs/register',
-    '@storybook/addon-actions/register',
-    '@storybook/addon-storysource/register',
-    '@storybook/addon-a11y/register',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-storysource', '@storybook/addon-a11y'],
   typescript: {
-    check: __DEV__, // Netlify is breaking the deploy with this settings on. So deactivate on release
-    reactDocgen: false,
+    check: isDevelopment, // Netlify is breaking the deploy with this settings on. So deactivate on release
   },
   webpackFinal: async (config) => {
-    config.devtool = __DEV__ ? 'inline-source-map' : undefined;
+    config.devtool = isDevelopment ? 'inline-source-map' : undefined;
     config.parallelism = 1;
     config.module.rules.push({
       test: /\.(ts|tsx)$/,
@@ -38,7 +30,7 @@ module.exports = {
         },
       ],
     });
-    if (__DEV__) {
+    if (isDevelopment) {
       config.module.rules.push({
         test: /\.(ts|tsx)$/,
         use: ['source-map-loader'],
@@ -98,3 +90,5 @@ module.exports = {
     return config;
   },
 };
+
+export default config;

packages/storybook/.storybook/preview.js → packages/storybook/.storybook/preview.ts

@@ -1,3 +1,4 @@
+// @ts-ignore
 import { LicenseInfo } from '@material-ui/x-grid';
 import { addParameters } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@@ -13,7 +14,8 @@ configureActions({
   limit: 10,
 });
 
-addParameters({
+export const parameters = {
+  actions: { argTypesRegex: "^on.*" },
   options: {
     /**
      * display the top-level grouping as a "root" in the sidebar
@@ -35,4 +37,4 @@ addParameters({
   docs: {
     page: null,
   },
-});
+};

packages/storybook/package.json

@@ -28,16 +28,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
-    "@storybook/addon-a11y": "^6.0.4",
-    "@storybook/addon-actions": "^6.0.4",
+    "@storybook/addon-a11y": "^6.0.28",
+    "@storybook/addon-actions": "^6.0.28",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-docs": "^6.0.4",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-knobs": "^6.0.4",
-    "@storybook/addon-storysource": "^6.0.4",
-    "@storybook/addon-viewport": "^6.0.4",
-    "@storybook/react": "^6.0.4",
-    "@storybook/theming": "^6.0.4",
+    "@storybook/addon-docs": "^6.0.28",
+    "@storybook/addon-essentials": "^6.0.28",
+    "@storybook/addon-storysource": "^6.0.28",
+    "@storybook/addon-viewport": "^6.0.28",
+    "@storybook/react": "^6.0.28",
+    "@storybook/theming": "^6.0.28",
     "@types/jest": "^26.0.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/puppeteer": "^5.4.0",

packages/storybook/src/stories/grid-columns.stories.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { ColDef, XGrid, ColTypeDef } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import CreateIcon from '@material-ui/icons/Create';
 import { Button } from '@material-ui/core';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Columns',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-data.stories.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
 import { XGrid, GridOptionsProp } from '@material-ui/x-grid';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Dataset',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-error.stories.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { XGrid, ColDef, useApiRef, GridOverlay } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import '../style/grid-stories.css';
 
 export default {
   title: 'X-Grid Tests/Error Handling',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-events.stories.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { XGrid, GridOptionsProp } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Events',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-options.stories.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { ColDef, XGrid } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Options',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
   },

packages/storybook/src/stories/grid-pagination.stories.tsx

@@ -1,20 +1,19 @@
 import * as React from 'react';
+import { Story, Meta } from '@storybook/react';
 import { ApiRef, useApiRef, XGrid, PageChangeParams, RowsProp } from '@material-ui/x-grid';
 import Button from '@material-ui/core/Button';
 import Pagination from '@material-ui/lab/Pagination';
 import { action } from '@storybook/addon-actions';
-import { array, boolean, number, withKnobs } from '@storybook/addon-knobs';
 import { useData } from '../hooks/useData';
 import { getData, GridData } from '../data/data-service';
 
 export default {
   title: 'X-Grid Tests/Pagination',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
   },
-};
+} as Meta;
 
 export function PaginationDefault() {
   const data = useData(2000, 200);
@@ -36,28 +35,23 @@ export function PageSize100() {
   );
 }
 
-export function PaginationKnobs() {
+export const PaginationArgs: Story = (args) => {
   const data = useData(2000, 200);
-  const rowsPerPageOptions = array('Rows per page options', ['10', '20', '50', '100', '200'], ', ');
 
-  return (
-    <XGrid
-      rows={data.rows}
-      columns={data.columns}
-      {...{
-        pagination: true,
-        pageSize: number('PageSize', 100),
-        page: number('Page', 1),
-        rowCount: number('RowCount', 2000),
-        autoPageSize: boolean('Auto page size', false),
-        rowsPerPageOptions: rowsPerPageOptions.map((value) => parseInt(value, 10)),
-        hideFooterRowCount: boolean('Hide row count', false),
-        hideFooterPagination: boolean('Hide footer pagination', false),
-        hideFooter: boolean('Hide footer', false),
-      }}
-    />
-  );
-}
+  return <XGrid rows={data.rows} columns={data.columns} {...args} />;
+};
+PaginationArgs.args = {
+  pagination: true,
+  pageSize: 100,
+  page: 1,
+  rowCount: 2000,
+  autoPageSize: false,
+  rowsPerPageOptions: [10, 20, 50, 100, 200],
+  hideFooterRowCount: false,
+  hideFooterPagination: false,
+  hideFooter: false,
+};
+
 export function HiddenPagination() {
   const data = useData(2000, 200);
 

packages/storybook/src/stories/grid-reorder.stories.tsx

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { ElementSize, XGrid } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
-import { withA11y } from '@storybook/addon-a11y';
 import '../style/grid-stories.css';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Reorder',
   component: XGrid,
-  decorators: [withKnobs, withA11y],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-resize.stories.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { ElementSize, XGrid } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import '../style/grid-stories.css';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Resize',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-selection.stories.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { XGrid, GridOptionsProp, useApiRef } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { getData, GridData } from '../data/data-service';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/Selection',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-sorting.stories.tsx

@@ -7,13 +7,11 @@ import {
   SortModel,
   useApiRef,
 } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'X-Grid Tests/Sorting',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/action/panel' },
     docs: {

packages/storybook/src/stories/grid-state.stories.tsx

@@ -2,14 +2,12 @@ import { Button } from '@material-ui/core';
 import { useState } from 'react';
 import * as React from 'react';
 import { GridState, SortingState, useApiRef, XGrid } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { StateChangeParams } from '../../../grid/_modules_/grid/models/params/stateChangeParams';
 import { useData } from '../hooks/useData';
 
 export default {
   title: 'X-Grid Tests/State',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-streaming.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { GridOptionsProp, XGrid, useApiRef } from '@material-ui/x-grid';
-import { withKnobs } from '@storybook/addon-knobs';
 import { interval } from 'rxjs';
 import { randomInt, randomUserName } from '@material-ui/x-grid-data-generator';
 import { FeedGrid } from '../components/feed-grid';
@@ -10,7 +9,6 @@ import { PricingGrid } from '../components/pricing-grid';
 export default {
   title: 'X-Grid Tests/Streaming',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {

packages/storybook/src/stories/grid-style.stories.tsx

@@ -2,14 +2,12 @@ import * as React from 'react';
 import { XGrid, GridOptionsProp, ColDef } from '@material-ui/x-grid';
 import DoneIcon from '@material-ui/icons/Done';
 import ClearIcon from '@material-ui/icons/Clear';
-import { withKnobs } from '@storybook/addon-knobs';
 import { useData } from '../hooks/useData';
 import '../style/grid-stories.css';
 
 export default {
   title: 'X-Grid Tests/Styling',
   component: XGrid,
-  decorators: [withKnobs],
   parameters: {
     options: { selectedPanel: 'storybook/storysource/panel' },
     docs: {