docs(examples): migrate custom data table state manager to vite (carb…

…on-design-system#15275) * docs(examples): migrate custom data table state manager to vite * chore: fix readme * removed warning by changing the size name --------- Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>
guidari · Nov 30, 2023 · 2633b45 · 2633b45
1 parent 1567d46
commit 2633b45
Show file tree

Hide file tree

Showing 29 changed files with 4,311 additions and 80 deletions.
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/.eslintrc.cjs b/packages/react/examples/custom-data-table-state-manager-vite/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/.gitignore b/packages/react/examples/custom-data-table-state-manager-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/.yarn/install-state.gz b/packages/react/examples/custom-data-table-state-manager-vite/.yarn/install-state.gz
diff --git a/...custom-data-table-state-manager/README.md → ...m-data-table-state-manager-vite/README.md b/...custom-data-table-state-manager/README.md → ...m-data-table-state-manager-vite/README.md
@@ -14,10 +14,10 @@ yarn install
 npm install
 
 
-yarn start
+yarn dev
 # or
-npm run start
+npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the
-result.
+Open [http://localhost:5173/](http://localhost:5173/) with your browser to see
+the result.
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/index.html b/packages/react/examples/custom-data-table-state-manager-vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/package.json b/packages/react/examples/custom-data-table-state-manager-vite/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "custom-data-table-state-manager-vite",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "latest",
+    "carbon-icons": "latest",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "use-debounce": "^10.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.54.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "sass": "1.69.5",
+    "vite": "^5.0.2"
+  }
+}
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/src/App.jsx b/packages/react/examples/custom-data-table-state-manager-vite/src/App.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExampleCustomDataTableApp } from './ExampleCustomDataTableApp'
+
+function App() {
+
+  return (
+    <ExampleCustomDataTableApp/>
+  )
+}
+
+export default App
diff --git a/...ges/react/examples/custom-data-table-state-manager-vite/src/ExampleCustomDataTableApp.jsx b/...ges/react/examples/custom-data-table-state-manager-vite/src/ExampleCustomDataTableApp.jsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import CustomDataTable from './components/CustomDataTable';
+
+import {
+  rowsMany as demoRowsMany,
+  columns as demoColumns,
+  sortInfo as demoSortInfo,
+} from './table-data';
+
+
+export const ExampleCustomDataTableApp = () => {
+  return (
+    <CustomDataTable
+      columns={demoColumns}
+      rows={demoRowsMany}
+      sortInfo={demoSortInfo}
+      hasSelection={true}
+      pageSize={5}
+      start={0}
+    />
+  );
+};
diff --git a/...manager/src/components/CustomDataTable.js → ...r-vite/src/components/CustomDataTable.jsx b/...manager/src/components/CustomDataTable.js → ...r-vite/src/components/CustomDataTable.jsx
diff --git a/...tate-manager/src/components/Pagination.js → ...anager-vite/src/components/Pagination.jsx b/...tate-manager/src/components/Pagination.js → ...anager-vite/src/components/Pagination.jsx
diff --git a/...ta-table-state-manager/src/hooks/index.js → ...ble-state-manager-vite/src/hooks/index.js b/...ta-table-state-manager/src/hooks/index.js → ...ble-state-manager-vite/src/hooks/index.js
diff --git a/...le-state-manager/src/hooks/useCollator.js → ...ate-manager-vite/src/hooks/useCollator.js b/...le-state-manager/src/hooks/useCollator.js → ...ate-manager-vite/src/hooks/useCollator.js
diff --git a/...tate-manager/src/hooks/useFilteredRows.js → ...manager-vite/src/hooks/useFilteredRows.js b/...tate-manager/src/hooks/useFilteredRows.js → ...manager-vite/src/hooks/useFilteredRows.js
diff --git a/...le-state-manager/src/hooks/usePageInfo.js → ...ate-manager-vite/src/hooks/usePageInfo.js b/...le-state-manager/src/hooks/usePageInfo.js → ...ate-manager-vite/src/hooks/usePageInfo.js
diff --git a/...tate-manager/src/hooks/useRowSelection.js → ...manager-vite/src/hooks/useRowSelection.js b/...tate-manager/src/hooks/useRowSelection.js → ...manager-vite/src/hooks/useRowSelection.js
diff --git a/...le-state-manager/src/hooks/useSortInfo.js → ...ate-manager-vite/src/hooks/useSortInfo.js b/...le-state-manager/src/hooks/useSortInfo.js → ...ate-manager-vite/src/hooks/useSortInfo.js
diff --git a/...-state-manager/src/hooks/useSortedRows.js → ...e-manager-vite/src/hooks/useSortedRows.js b/...-state-manager/src/hooks/useSortedRows.js → ...e-manager-vite/src/hooks/useSortedRows.js
diff --git a/...le-state-manager/src/hooks/useUniqueId.js → ...ate-manager-vite/src/hooks/useUniqueId.js b/...le-state-manager/src/hooks/useUniqueId.js → ...ate-manager-vite/src/hooks/useUniqueId.js
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/src/index.scss b/packages/react/examples/custom-data-table-state-manager-vite/src/index.scss
@@ -0,0 +1,5 @@
+@use '@carbon/react';
+
+body {
+  margin: 2rem;
+}
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/src/main.jsx b/packages/react/examples/custom-data-table-state-manager-vite/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import "./index.scss"
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/...ager/src/misc/doesRowMatchSearchString.js → ...vite/src/misc/doesRowMatchSearchString.js b/...ager/src/misc/doesRowMatchSearchString.js → ...vite/src/misc/doesRowMatchSearchString.js
diff --git a/...ata-table-state-manager/src/misc/enums.js → ...able-state-manager-vite/src/misc/enums.js b/...ata-table-state-manager/src/misc/enums.js → ...able-state-manager-vite/src/misc/enums.js
@@ -15,7 +15,7 @@ export const TABLE_SIZE = {
   /**
    * Regular size.
    */
-  REGULAR: 'normal',
+  REGULAR: 'lg',
 
   /**
    * Tall size.

diff --git a/...ata-table-state-manager/src/misc/index.js → ...able-state-manager-vite/src/misc/index.js b/...ata-table-state-manager/src/misc/index.js → ...able-state-manager-vite/src/misc/index.js
diff --git a/...ata-table-state-manager/src/table-data.js → ...able-state-manager-vite/src/table-data.js b/...ata-table-state-manager/src/table-data.js → ...able-state-manager-vite/src/table-data.js
diff --git a/packages/react/examples/custom-data-table-state-manager-vite/vite.config.js b/packages/react/examples/custom-data-table-state-manager-vite/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})