diff --git a/.eslintignore b/.eslintignore index 71271d5476..0ccecfee15 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ /.eslintrc.js /coverage +/dist /lib diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2fac2aae5c..7079cc357a 100644 --- a/.eslintrc.cjs +++ b/.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, diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index dabbaf8b07..c26422a251 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index 1f607e277b..304f8507cc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,8 @@ /.linaria-cache /coverage +/dist /lib /node_modules -/storybook-static /tmp /.eslintcache /package-lock.json diff --git a/.prettierignore b/.prettierignore index b0bf1288d3..13652d92d1 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,6 @@ /.linaria-cache /coverage +/dist /lib /node_modules /package-lock.json -/storybook-static diff --git a/.storybook/main.ts b/.storybook/main.ts deleted file mode 100644 index 0a65e2352e..0000000000 --- a/.storybook/main.ts +++ /dev/null @@ -1,67 +0,0 @@ -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; - -// TODO: remove `target` https://github.com/storybookjs/storybook/issues/15882 -const target = 'browserslist:browserslist config, not maintained node versions'; - -// TODO: remove `.storybook/package.json` https://github.com/storybookjs/storybook/issues/15335 - -export default { - stories: ['../stories/**/*.story.*'], - reactOptions: { - fastRefresh: true, - strictMode: true - }, - core: { - builder: 'webpack5' - }, - managerWebpack(config) { - config.target = target; - return config; - }, - webpackFinal(config, { configType }) { - config.target = target; - const isProd = configType === 'PRODUCTION'; - - config.module.rules = [ - { - test: /\.tsx?$/, - exclude: /node_modules/, - use: [ - { - loader: 'babel-loader', - options: { cacheDirectory: !isProd } - }, - { - loader: '@linaria/webpack5-loader', - options: { preprocessor: 'none', sourceMap: !isProd } - } - ] - }, - { - test: /\.css$/, - use: [ - isProd ? MiniCssExtractPlugin.loader : 'style-loader', - 'css-loader', - { - loader: 'postcss-loader', - options: { - postcssOptions: { - plugins: ['postcss-nested'] - } - } - } - ] - } - ]; - - config.plugins.push( - new MiniCssExtractPlugin({ - filename: isProd ? '[name].[contenthash].css' : '[name].css', - chunkFilename: isProd ? '[id].[contenthash].css' : '[id].css', - ignoreOrder: true - }) - ); - - return config; - } -}; diff --git a/.storybook/package.json b/.storybook/package.json deleted file mode 100644 index 0967ef424b..0000000000 --- a/.storybook/package.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx deleted file mode 100644 index 026819f865..0000000000 --- a/.storybook/preview.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { css } from '@linaria/core'; - -css` - @at-root { - body, - html { - padding: 0 !important; - margin: 0 !important; - font-family: sans-serif; - } - - #root { - display: flex; - flex-direction: column; - box-sizing: border-box; - height: 100vh; - padding: 8px; - } - - .rdg.fill-grid { - height: 100%; - } - - .rdg.small-grid { - height: 300px; - } - - .rdg.big-grid { - height: 600px; - } - - :root { - color-scheme: light dark; - - @media (prefers-color-scheme: light) { - background-color: #fff; - color: #111; - } - - @media (prefers-color-scheme: dark) { - background-color: #111; - color: #fff; - } - } - - .rdg-cell .Select { - max-height: 30px; - font-size: 12px; - font-weight: normal; - } - } -`; diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c080a858c..06b0eb6bef 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/README.md b/README.md index da9a3b0603..a8753cdbf3 100644 --- a/README.md +++ b/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) diff --git a/package.json b/package.json index d67bfc2b70..4003323374 100644 --- a/package.json +++ b/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": { diff --git a/stories/index.story.ts b/stories/index.story.ts deleted file mode 100644 index 652353a013..0000000000 --- a/stories/index.story.ts +++ /dev/null @@ -1,19 +0,0 @@ -export * from './demos/CommonFeatures'; -export * from './demos/AllFeatures'; -export * from './demos/MillionCells'; -export * from './demos/NoRows'; -export * from './demos/TreeView'; -export * from './demos/ContextMenu'; -export * from './demos/ScrollToRow'; -export * from './demos/CellNavigation'; -export * from './demos/HeaderFilters'; -export * from './demos/ColumnSpanning'; -export * from './demos/ColumnsReordering'; -export * from './demos/RowsReordering'; -export * from './demos/Grouping'; -export * from './demos/Resizable'; -export * from './demos/VariableRowHeight'; -export * from './demos/MasterDetail'; -export * from './demos/InfiniteScrolling'; - -export default { title: 'Demos' }; diff --git a/tsconfig.all.json b/tsconfig.all.json index b46b1a0d8b..92f730545a 100644 --- a/tsconfig.all.json +++ b/tsconfig.all.json @@ -4,5 +4,5 @@ "emitDeclarationOnly": false, "noEmit": true }, - "include": ["src/**/*", "stories/**/*", "test/**/*"] + "include": ["src/**/*", "test/**/*", "website/**/*"] } diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json index 0008267a47..53838272b8 100644 --- a/tsconfig.eslint.json +++ b/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/**/*" + ] } diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000000..f3cdac3447 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,98 @@ +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; + +// TODO: remove `target` https://github.com/storybookjs/storybook/issues/15882 +const target = 'browserslist:browserslist config, not maintained node versions'; + +export default (env, { mode }) => { + const isDev = mode === 'development'; + + return { + target, + entry: './website/root.tsx', + + output: { + clean: true, + filename: isDev ? '[name].js' : '[name].[contenthash].js', + chunkFilename: isDev ? '[name].js' : '[contenthash].js' + }, + + devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map', + + devServer: { + open: true, + client: { + overlay: false + }, + static: false + }, + + stats: { + assets: false, + entrypoints: false, + modules: false + }, + + performance: { + hints: false + }, + + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'] + }, + + optimization: { + minimizer: ['...', new CssMinimizerPlugin()] + }, + + module: { + strictExportPresence: true, + rules: [ + { + test: /\.tsx?$/, + exclude: /node_modules/, + use: [ + { + loader: 'babel-loader', + options: { plugins: [isDev && 'react-refresh/babel'].filter(Boolean) } + }, + { + loader: '@linaria/webpack5-loader', + options: { preprocessor: 'none' } + } + ] + }, + { + test: /\.css$/, + use: [ + isDev ? 'style-loader' : MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: ['postcss-nested'] + } + } + } + ] + } + ] + }, + + plugins: [ + new HtmlWebpackPlugin({ + template: './website/index.html' + }), + isDev && new ReactRefreshWebpackPlugin({ overlay: false }), + !isDev && + new MiniCssExtractPlugin({ + filename: '[contenthash].css', + chunkFilename: '[contenthash].css', + ignoreOrder: true + }) + ].filter(Boolean) + }; +}; diff --git a/website/Nav.tsx b/website/Nav.tsx new file mode 100644 index 0000000000..46fe1a890c --- /dev/null +++ b/website/Nav.tsx @@ -0,0 +1,145 @@ +import { NavLink } from 'react-router-dom'; +import { css } from '@linaria/core'; + +const navClassname = css` + display: flex; + flex-direction: column; + white-space: nowrap; + + @media (prefers-color-scheme: light) { + border-left: 4px solid hsl(210deg 50% 80%); + } + @media (prefers-color-scheme: dark) { + border-left: 4px solid hsl(210deg 50% 40%); + } + + h1, + h2 { + margin: 8px; + } + + a { + color: inherit; + font-size: 14px; + line-height: 22px; + text-decoration: none; + padding: 0 16px; + transition: 0.1s background-color; + + &:hover { + @media (prefers-color-scheme: light) { + background-color: hsl(210deg 50% 90%); + } + @media (prefers-color-scheme: dark) { + background-color: hsl(210deg 50% 30%); + } + } + } +`; + +const activeNavClassname = css` + font-weight: 500; + + @media (prefers-color-scheme: light) { + background-color: hsl(210deg 50% 80%); + } + @media (prefers-color-scheme: dark) { + background-color: hsl(210deg 50% 40%); + } + + a&:hover { + @media (prefers-color-scheme: light) { + background-color: hsl(210deg 50% 70%); + } + @media (prefers-color-scheme: dark) { + background-color: hsl(210deg 50% 50%); + } + } +`; + +export default function Nav() { + return ( + + ); +} diff --git a/stories/demos/AllFeatures.tsx b/website/demos/AllFeatures.tsx similarity index 98% rename from stories/demos/AllFeatures.tsx rename to website/demos/AllFeatures.tsx index 2c8dd76246..c93a9da076 100644 --- a/stories/demos/AllFeatures.tsx +++ b/website/demos/AllFeatures.tsx @@ -169,7 +169,7 @@ function createRows(): Row[] { return rows; } -export function AllFeatures() { +export default function AllFeatures() { const [rows, setRows] = useState(createRows); const [selectedRows, setSelectedRows] = useState>(() => new Set()); @@ -215,5 +215,3 @@ export function AllFeatures() { ); } - -AllFeatures.storyName = 'All Features'; diff --git a/stories/demos/CellNavigation.tsx b/website/demos/CellNavigation.tsx similarity index 96% rename from stories/demos/CellNavigation.tsx rename to website/demos/CellNavigation.tsx index e36f7bdbe7..14600a0ede 100644 --- a/stories/demos/CellNavigation.tsx +++ b/website/demos/CellNavigation.tsx @@ -69,7 +69,7 @@ function createRows(): Row[] { return rows; } -export function CellNavigation() { +export default function CellNavigation() { const [rows] = useState(createRows); const [cellNavigatioMode, setCellNavigationMode] = useState('CHANGE_ROW'); @@ -109,5 +109,3 @@ export function CellNavigation() { ); } - -CellNavigation.storyName = 'Cell Navigation'; diff --git a/stories/demos/ColumnSpanning.tsx b/website/demos/ColumnSpanning.tsx similarity index 95% rename from stories/demos/ColumnSpanning.tsx rename to website/demos/ColumnSpanning.tsx index 260d98183f..79f479774d 100644 --- a/stories/demos/ColumnSpanning.tsx +++ b/website/demos/ColumnSpanning.tsx @@ -21,7 +21,7 @@ function CellFormatter(props: FormatterProps) { ); } -export function ColumnSpanning() { +export default function ColumnSpanning() { const columns = useMemo((): readonly Column[] => { const columns: Column[] = []; @@ -65,5 +65,3 @@ export function ColumnSpanning() { return ; } - -ColumnSpanning.storyName = 'Column Spanning'; diff --git a/stories/demos/ColumnsReordering.tsx b/website/demos/ColumnsReordering.tsx similarity index 97% rename from stories/demos/ColumnsReordering.tsx rename to website/demos/ColumnsReordering.tsx index 77e71569fe..f150347ceb 100644 --- a/stories/demos/ColumnsReordering.tsx +++ b/website/demos/ColumnsReordering.tsx @@ -63,7 +63,7 @@ function createColumns(): Column[] { ]; } -export function ColumnsReordering() { +export default function ColumnsReordering() { const [rows] = useState(createRows); const [columns, setColumns] = useState(createColumns); const [sortColumns, setSortColumns] = useState([]); @@ -127,5 +127,3 @@ export function ColumnsReordering() { ); } - -ColumnsReordering.storyName = 'Columns Reordering'; diff --git a/stories/demos/CommonFeatures.tsx b/website/demos/CommonFeatures.tsx similarity index 99% rename from stories/demos/CommonFeatures.tsx rename to website/demos/CommonFeatures.tsx index 07a7dd4809..c5aeec5e98 100644 --- a/stories/demos/CommonFeatures.tsx +++ b/website/demos/CommonFeatures.tsx @@ -297,7 +297,7 @@ function getComparator(sortColumn: string): Comparator { } } -export function CommonFeatures() { +export default function CommonFeatures() { const [rows, setRows] = useState(createRows); const [sortColumns, setSortColumns] = useState([]); const [selectedRows, setSelectedRows] = useState>(() => new Set()); @@ -392,5 +392,3 @@ function ExportButton({ ); } - -CommonFeatures.storyName = 'Common Features'; diff --git a/stories/demos/ContextMenu.tsx b/website/demos/ContextMenu.tsx similarity index 96% rename from stories/demos/ContextMenu.tsx rename to website/demos/ContextMenu.tsx index 44bcc2a0a6..1c6b4848fc 100644 --- a/stories/demos/ContextMenu.tsx +++ b/website/demos/ContextMenu.tsx @@ -7,7 +7,6 @@ import { css } from '@linaria/core'; import DataGrid, { Row as GridRow } from '../../src'; import type { Column, RowRendererProps } from '../../src'; -// eslint-disable-next-line @typescript-eslint/no-unused-expressions css` @at-root { .react-contextmenu { @@ -125,7 +124,7 @@ function RowRenderer(props: RowRendererProps) { ); } -export function ContextMenuStory() { +export default function ContextMenuDemo() { const [rows, setRows] = useState(createRows); const [nextId, setNextId] = useReducer((id: number) => id + 1, rows[rows.length - 1].id + 1); @@ -174,5 +173,3 @@ export function ContextMenuStory() { ); } - -ContextMenuStory.storyName = 'Context Menu'; diff --git a/stories/demos/Grouping.tsx b/website/demos/Grouping.tsx similarity index 98% rename from stories/demos/Grouping.tsx rename to website/demos/Grouping.tsx index cd637a7601..98609c2c03 100644 --- a/stories/demos/Grouping.tsx +++ b/website/demos/Grouping.tsx @@ -140,7 +140,7 @@ function createRows(): readonly Row[] { const options = ['country', 'year', 'sport', 'athlete'] as const; -export function Grouping() { +export default function Grouping() { const [rows] = useState(createRows); const [selectedRows, setSelectedRows] = useState>(() => new Set()); const [selectedOptions, setSelectedOptions] = useState([ @@ -198,5 +198,3 @@ export function Grouping() { ); } - -Grouping.storyName = 'Grouping'; diff --git a/stories/demos/HeaderFilters.tsx b/website/demos/HeaderFilters.tsx similarity index 99% rename from stories/demos/HeaderFilters.tsx rename to website/demos/HeaderFilters.tsx index f6d4f5e005..c44d253df0 100644 --- a/stories/demos/HeaderFilters.tsx +++ b/website/demos/HeaderFilters.tsx @@ -75,7 +75,7 @@ function selectStopPropagation(event: React.KeyboardEvent) { } } -export function HeaderFilters() { +export default function HeaderFilters() { const [rows] = useState(createRows); const [filters, setFilters] = useState({ task: '', diff --git a/stories/demos/InfiniteScrolling.tsx b/website/demos/InfiniteScrolling.tsx similarity index 96% rename from stories/demos/InfiniteScrolling.tsx rename to website/demos/InfiniteScrolling.tsx index 38efa73bb2..4d761cd994 100644 --- a/stories/demos/InfiniteScrolling.tsx +++ b/website/demos/InfiniteScrolling.tsx @@ -86,7 +86,7 @@ function loadMoreRows(newRowsCount: number, length: number): Promise { }); } -export function InfiniteScrolling() { +export default function InfiniteScrolling() { const [rows, setRows] = useState(() => createRows(50)); const [isLoading, setIsLoading] = useState(false); @@ -116,5 +116,3 @@ export function InfiniteScrolling() { ); } - -InfiniteScrolling.storyName = 'Infinite Scrolling'; diff --git a/stories/demos/MasterDetail.tsx b/website/demos/MasterDetail.tsx similarity index 98% rename from stories/demos/MasterDetail.tsx rename to website/demos/MasterDetail.tsx index 717abcb1a0..4d1bc122aa 100644 --- a/stories/demos/MasterDetail.tsx +++ b/website/demos/MasterDetail.tsx @@ -99,7 +99,7 @@ const departmentColumns: readonly Column[] = [ { key: 'department', name: 'Department' } ]; -export function MasterDetailStory() { +export default function MasterDetail() { const [rows, setRows] = useState(createDepartments); function onRowsChange(rows: DepartmentRow[], { indexes }: RowsChangeData) { @@ -178,5 +178,3 @@ function ProductGrid({ parentId, isCellSelected }: { parentId: number; isCellSel function rowKeyGetter(row: DepartmentRow | ProductRow) { return row.id; } - -MasterDetailStory.storyName = 'Master Detail'; diff --git a/stories/demos/MillionCells.tsx b/website/demos/MillionCells.tsx similarity index 90% rename from stories/demos/MillionCells.tsx rename to website/demos/MillionCells.tsx index 940740724c..cce4e37418 100644 --- a/stories/demos/MillionCells.tsx +++ b/website/demos/MillionCells.tsx @@ -13,7 +13,7 @@ function CellFormatter(props: FormatterProps) { ); } -export function MillionCells() { +export default function MillionCells() { const columns = useMemo((): readonly Column[] => { const columns: Column[] = []; @@ -33,5 +33,3 @@ export function MillionCells() { return ; } - -MillionCells.storyName = 'A Million Cells'; diff --git a/stories/demos/NoRows.tsx b/website/demos/NoRows.tsx similarity index 94% rename from stories/demos/NoRows.tsx rename to website/demos/NoRows.tsx index 530e2d7820..18828cd765 100644 --- a/stories/demos/NoRows.tsx +++ b/website/demos/NoRows.tsx @@ -32,7 +32,7 @@ function rowKeyGetter(row: Row) { return row.id; } -export function NoRows() { +export default function NoRows() { const [selectedRows, onSelectedRowsChange] = useState((): ReadonlySet => new Set()); return ( @@ -47,5 +47,3 @@ export function NoRows() { /> ); } - -NoRows.storyName = 'No Rows'; diff --git a/stories/demos/Resizable.tsx b/website/demos/Resizable.tsx similarity index 88% rename from stories/demos/Resizable.tsx rename to website/demos/Resizable.tsx index 4df8230c0e..e0adf25d4c 100644 --- a/stories/demos/Resizable.tsx +++ b/website/demos/Resizable.tsx @@ -23,10 +23,8 @@ for (let i = 0; i < 50; i++) { }); } -export function ResizableGrid() { +export default function ResizableGrid() { return ( ); } - -ResizableGrid.storyName = 'Resizable Grid'; diff --git a/stories/demos/RowsReordering.tsx b/website/demos/RowsReordering.tsx similarity index 95% rename from stories/demos/RowsReordering.tsx rename to website/demos/RowsReordering.tsx index 7d136bfcee..4a23b52ff8 100644 --- a/stories/demos/RowsReordering.tsx +++ b/website/demos/RowsReordering.tsx @@ -54,7 +54,7 @@ const columns: readonly Column[] = [ } ]; -export function RowsReordering() { +export default function RowsReordering() { const [rows, setRows] = useState(createRows); const RowRenderer = useCallback((props: RowRendererProps) => { @@ -75,5 +75,3 @@ export function RowsReordering() { ); } - -RowsReordering.storyName = 'Rows Reordering'; diff --git a/stories/demos/ScrollToRow.tsx b/website/demos/ScrollToRow.tsx similarity index 94% rename from stories/demos/ScrollToRow.tsx rename to website/demos/ScrollToRow.tsx index 3c2ab2492b..35a69bfbf5 100644 --- a/stories/demos/ScrollToRow.tsx +++ b/website/demos/ScrollToRow.tsx @@ -14,7 +14,7 @@ const columns: readonly Column[] = [ { key: 'count', name: 'Count' } ]; -export function ScrollToRow() { +export default function ScrollToRow() { const [rows] = useState(() => { const rows: Row[] = []; @@ -49,5 +49,3 @@ export function ScrollToRow() { ); } - -ScrollToRow.storyName = 'Scroll To Row'; diff --git a/stories/demos/TreeView.tsx b/website/demos/TreeView.tsx similarity index 98% rename from stories/demos/TreeView.tsx rename to website/demos/TreeView.tsx index 433cc9923c..621f2397e8 100644 --- a/stories/demos/TreeView.tsx +++ b/website/demos/TreeView.tsx @@ -111,7 +111,7 @@ function reducer(rows: Row[], { type, id }: Action): Row[] { const defaultRows = createRows(); -export function TreeView() { +export default function TreeView() { const [rows, dispatch] = useReducer(reducer, defaultRows); const [allowDelete, setAllowDelete] = useState(true); const columns: Column[] = useMemo(() => { @@ -179,5 +179,3 @@ export function TreeView() { ); } - -TreeView.storyName = 'Tree View'; diff --git a/stories/demos/VariableRowHeight.tsx b/website/demos/VariableRowHeight.tsx similarity index 90% rename from stories/demos/VariableRowHeight.tsx rename to website/demos/VariableRowHeight.tsx index a45691a49b..af77ff3d4a 100644 --- a/stories/demos/VariableRowHeight.tsx +++ b/website/demos/VariableRowHeight.tsx @@ -14,7 +14,7 @@ function CellFormatter(props: FormatterProps) { ); } -export function VariableRowHeight() { +export default function VariableRowHeight() { const columns = useMemo((): readonly Column[] => { const columns: Column[] = []; @@ -39,5 +39,3 @@ function rowHeight() { // should be based on the content of the row return 25 + Math.round(Math.random() * 75); } - -VariableRowHeight.storyName = 'Variable Row Height'; diff --git a/stories/demos/components/Editors/DropDownEditor.tsx b/website/demos/components/Editors/DropDownEditor.tsx similarity index 100% rename from stories/demos/components/Editors/DropDownEditor.tsx rename to website/demos/components/Editors/DropDownEditor.tsx diff --git a/stories/demos/components/Formatters/CellExpanderFormatter.tsx b/website/demos/components/Formatters/CellExpanderFormatter.tsx similarity index 100% rename from stories/demos/components/Formatters/CellExpanderFormatter.tsx rename to website/demos/components/Formatters/CellExpanderFormatter.tsx diff --git a/stories/demos/components/Formatters/ChildRowDeleteButton.tsx b/website/demos/components/Formatters/ChildRowDeleteButton.tsx similarity index 100% rename from stories/demos/components/Formatters/ChildRowDeleteButton.tsx rename to website/demos/components/Formatters/ChildRowDeleteButton.tsx diff --git a/stories/demos/components/Formatters/ImageFormatter.tsx b/website/demos/components/Formatters/ImageFormatter.tsx similarity index 100% rename from stories/demos/components/Formatters/ImageFormatter.tsx rename to website/demos/components/Formatters/ImageFormatter.tsx diff --git a/stories/demos/components/Formatters/index.ts b/website/demos/components/Formatters/index.ts similarity index 100% rename from stories/demos/components/Formatters/index.ts rename to website/demos/components/Formatters/index.ts diff --git a/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx b/website/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx similarity index 100% rename from stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx rename to website/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx diff --git a/stories/demos/components/HeaderRenderers/index.ts b/website/demos/components/HeaderRenderers/index.ts similarity index 100% rename from stories/demos/components/HeaderRenderers/index.ts rename to website/demos/components/HeaderRenderers/index.ts diff --git a/stories/demos/components/RowRenderers/DraggableRowRenderer.tsx b/website/demos/components/RowRenderers/DraggableRowRenderer.tsx similarity index 100% rename from stories/demos/components/RowRenderers/DraggableRowRenderer.tsx rename to website/demos/components/RowRenderers/DraggableRowRenderer.tsx diff --git a/stories/demos/components/RowRenderers/index.ts b/website/demos/components/RowRenderers/index.ts similarity index 100% rename from stories/demos/components/RowRenderers/index.ts rename to website/demos/components/RowRenderers/index.ts diff --git a/stories/demos/exportUtils.tsx b/website/demos/exportUtils.tsx similarity index 100% rename from stories/demos/exportUtils.tsx rename to website/demos/exportUtils.tsx diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000000..ca2b8d2d9f --- /dev/null +++ b/website/index.html @@ -0,0 +1,10 @@ + + + + + react-data-grid + + +
+ + diff --git a/website/root.tsx b/website/root.tsx new file mode 100644 index 0000000000..7ce4b3513c --- /dev/null +++ b/website/root.tsx @@ -0,0 +1,157 @@ +import { lazy, StrictMode, Suspense } from 'react'; +import { render } from 'react-dom'; +import { css } from '@linaria/core'; +import { HashRouter as Router, Switch, Redirect, Route } from 'react-router-dom'; + +import Nav from './Nav'; + +const CommonFeatures = lazy(() => import('./demos/CommonFeatures')); +const AllFeatures = lazy(() => import('./demos/AllFeatures')); +const CellNavigation = lazy(() => import('./demos/CellNavigation')); +const ColumnSpanning = lazy(() => import('./demos/ColumnSpanning')); +const ColumnsReordering = lazy(() => import('./demos/ColumnsReordering')); +const ContextMenuDemo = lazy(() => import('./demos/ContextMenu')); +const Grouping = lazy(() => import('./demos/Grouping')); +const HeaderFilters = lazy(() => import('./demos/HeaderFilters')); +const InfiniteScrolling = lazy(() => import('./demos/InfiniteScrolling')); +const MasterDetail = lazy(() => import('./demos/MasterDetail')); +const MillionCells = lazy(() => import('./demos/MillionCells')); +const NoRows = lazy(() => import('./demos/NoRows')); +const ResizableGrid = lazy(() => import('./demos/Resizable')); +const RowsReordering = lazy(() => import('./demos/RowsReordering')); +const ScrollToRow = lazy(() => import('./demos/ScrollToRow')); +const TreeView = lazy(() => import('./demos/TreeView')); +const VariableRowHeight = lazy(() => import('./demos/VariableRowHeight')); + +css` + @at-root { + :root, + body { + padding: 0; + margin: 0; + font-family: sans-serif; + } + + :root { + color-scheme: light dark; + + @media (prefers-color-scheme: light) { + background-color: #fff; + color: #111; + } + + @media (prefers-color-scheme: dark) { + background-color: hsl(0deg 0% 10%); + color: #fff; + } + } + + #root { + display: grid; + grid-template-columns: auto 1fr; + } + + .rdg.fill-grid { + height: 100%; + } + + .rdg.small-grid { + height: 300px; + } + + .rdg.big-grid { + height: 600px; + } + + .rdg-cell .Select { + max-height: 30px; + font-size: 12px; + font-weight: normal; + } + } +`; + +const mainClassname = css` + display: flex; + flex-direction: column; + box-sizing: border-box; + height: 100vh; + padding: 8px; +`; + +function Root() { + return ( + +