Replace storybook

.eslintignore

@@ -1,3 +1,4 @@
 /.eslintrc.js
 /coverage
+/dist
 /lib

.eslintrc.cjs

@@ -652,7 +652,10 @@ const rules = {
   '@typescript-eslint/no-redeclare': 2,
   '@typescript-eslint/no-shadow': 0,
   '@typescript-eslint/no-throw-literal': 2,
-  '@typescript-eslint/no-unused-expressions': [2, { allowShortCircuit: true }],
+  '@typescript-eslint/no-unused-expressions': [
+    2,
+    { allowShortCircuit: true, allowTaggedTemplates: true }
+  ],
   '@typescript-eslint/no-unused-vars': [1, { ignoreRestSiblings: true }],
   '@typescript-eslint/no-use-before-define': 0,
   '@typescript-eslint/no-useless-constructor': 1,

.github/workflows/ci.yml

@@ -38,7 +38,7 @@ jobs:
         run: npm t -- --coverage --colors
       - uses: codecov/codecov-action@v2
 
-  storybook:
+  website:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -57,7 +57,7 @@ jobs:
       - name: Build
         run: |
           npm i
-          npm run build-storybook
+          npm run build:website
       - name: Set up git user
         if: github.event_name == 'push'
         run: |
@@ -71,7 +71,7 @@ jobs:
           cd gh-pages
           git rm -r .
           git checkout gh-pages -- old
-          mv ../storybook-static/* .
+          mv ../dist/* .
           git add .
           git commit -m "gh-pages deployment" || echo "Nothing to commit"
           git push -f https://adazzle:${{secrets.GITHUB_TOKEN}}@github.com/adazzle/react-data-grid.git

.gitignore

@@ -1,8 +1,8 @@
 /.linaria-cache
 /coverage
+/dist
 /lib
 /node_modules
-/storybook-static
 /tmp
 /.eslintcache
 /package-lock.json

.prettierignore

@@ -1,6 +1,6 @@
 /.linaria-cache
 /coverage
+/dist
 /lib
 /node_modules
 /package-lock.json
-/storybook-static

CHANGELOG.md

@@ -136,7 +136,7 @@
 
 ## v7.0.0-canary.22
 
-- Add Grouping ([PR](https://github.com/adazzle/react-data-grid/pull/2106)). Check the new [example](https://adazzle.github.io/react-data-grid/?path=/story/demos--grouping).
+- Add Grouping ([PR](https://github.com/adazzle/react-data-grid/pull/2106)). Check the new [example](https://adazzle.github.io/react-data-grid/#/grouping).
 - (Breaking) Removed `height` and `width` props and added new `className` and `style` props. We are now using `ResizeObserver` to calculate all the grid dimensions ([PR](https://github.com/adazzle/react-data-grid/pull/2130))
 - (Breaking) Removed formatterOptions. Grid now handles formatter focus internally so this prop is no longer required ([PR](https://github.com/adazzle/react-data-grid/pull/2138))
 - Added support for React 17
@@ -217,7 +217,7 @@
     - ⚠️ `height`
     - ⚠️ `cellContentRenderer`
     - ⚠️ `contextMenu`
-      - Check the [Context Menu](https://adazzle.github.io/react-data-grid/?path=/story/demos--context-menu) example
+      - Check the [Context Menu](https://adazzle.github.io/react-data-grid/#/context-menu) example
     - ⚠️ `enableCellSelect`
     - ⚠️ `enableCellAutoFocus`
     - ⚠️ `getValidFilterValues`

README.md

@@ -23,28 +23,28 @@
 - Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
 - Strictly typed with TypeScript
-- [Keyboard accessibility](<(https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)>)
+- [Keyboard accessibility](<(https://adazzle.github.io/react-data-grid/#/common-features)>)
 - Light and dark mode support out of the box. The light or dark themes can be enforced using the `rdg-light` or `rdg-dark` classes.
-- [Frozen columns](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Column resizing](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Multi-column sorting](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
+- [Frozen columns](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Column resizing](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Multi-column sorting](https://adazzle.github.io/react-data-grid/#/common-features)
   - Click on a sortable column header to toggle between its ascending/descending sort order
   - Ctrl+Click / Meta+Click to sort an additional column
-- [Column spanning](https://adazzle.github.io/react-data-grid/?path=/story/demos--column-spanning)
-- [Row selection](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Row grouping](https://adazzle.github.io/react-data-grid/?path=/story/demos--grouping)
-- [Summary rows](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Dynamic row heights](https://adazzle.github.io/react-data-grid/?path=/story/demos--variable-row-height)
-- [No rows fallback](https://adazzle.github.io/react-data-grid/?path=/story/demos--no-rows)
-- [Cell formatting](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Cell editing](https://adazzle.github.io/react-data-grid/?path=/story/demos--common-features)
-- [Cell copy / pasting](https://adazzle.github.io/react-data-grid/?path=/story/demos--all-features)
-- [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/?path=/story/demos--all-features)
+- [Column spanning](https://adazzle.github.io/react-data-grid/#/column-spanning)
+- [Row selection](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Row grouping](https://adazzle.github.io/react-data-grid/#/grouping)
+- [Summary rows](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Dynamic row heights](https://adazzle.github.io/react-data-grid/#/variable-row-height)
+- [No rows fallback](https://adazzle.github.io/react-data-grid/#/no-rows)
+- [Cell formatting](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Cell editing](https://adazzle.github.io/react-data-grid/#/common-features)
+- [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/all-features)
+- [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/all-features)
 
 ## Links
 
 - [Examples website](https://adazzle.github.io/react-data-grid/)
-  - [Source code](stories)
+  - [Source code](website)
 - [Old website for react-data-grid v6](https://adazzle.github.io/react-data-grid/old/)
 - [Changelog](CHANGELOG.md)
 - [Contributing](CONTRIBUTING.md)

package.json

@@ -26,17 +26,17 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "start": "start-storybook --quiet -p 6006",
+    "start": "webpack serve --mode=development",
+    "build:website": "webpack --mode=production",
     "build": "rollup --config --no-stdin",
     "build:types": "tsc && api-extractor run --local --verbose",
     "test": "jest",
     "test:watch": "jest --watch",
-    "eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src stories test",
+    "eslint": "eslint --ext js,ts,tsx --max-warnings 0 -f codeframe --cache --color src test website",
     "eslint:fix": "npm run eslint -- --fix",
     "prettier:check": "prettier --check .",
     "prettier:format": "prettier --write .",
     "typecheck": "tsc -p tsconfig.all.json",
-    "build-storybook": "build-storybook --quiet",
     "prepublishOnly": "npm install && npm run build && npm run build:types",
     "postpublish": "git push --follow-tags origin HEAD"
   },
@@ -56,11 +56,9 @@
     "@linaria/shaker": "^3.0.0-beta.12",
     "@linaria/webpack5-loader": "^3.0.0-beta.12",
     "@microsoft/api-extractor": "^7.16.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/builder-webpack5": "^6.3.8",
-    "@storybook/manager-webpack5": "^6.3.8",
-    "@storybook/react": "^6.3.8",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.1.9",
@@ -70,11 +68,13 @@
     "@types/lodash": "^4.14.170",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.28.0",
     "@typescript-eslint/parser": "^4.28.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "css-loader": "^6.2.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "eslint": "^7.29.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^24.3.6",
@@ -84,6 +84,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sonarjs": "^0.10.0",
     "faker": "^5.5.3",
+    "html-webpack-plugin": "^5.3.2",
     "jest": "^27.0.5",
     "jspdf": "^2.3.1",
     "jspdf-autotable": "^3.5.14",
@@ -98,9 +99,15 @@
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.2",
+    "react-refresh": "^0.10.0",
+    "react-router-dom": "^5.3.0",
     "rollup": "^2.52.3",
     "rollup-plugin-postcss": "^4.0.0",
+    "style-loader": "^3.2.1",
     "typescript": "~4.4.2",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.0",
     "xlsx": "^0.17.0"
   },
   "peerDependencies": {

tsconfig.all.json

@@ -4,5 +4,5 @@
     "emitDeclarationOnly": false,
     "noEmit": true
   },
-  "include": ["src/**/*", "stories/**/*", "test/**/*"]
+  "include": ["src/**/*", "test/**/*", "website/**/*"]
 }

tsconfig.eslint.json

@@ -1,4 +1,11 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["jest.config.js", "rollup.config.js", "src/**/*", "stories/**/*", "test/**/*"]
+  "include": [
+    "jest.config.js",
+    "rollup.config.js",
+    "webpack.config.js",
+    "src/**/*",
+    "test/**/*",
+    "website/**/*"
+  ]
 }