chore: setup formatting

carbon-design-system · Sep 25, 2024 · b5253c7 · b5253c7
1 parent 264ab5e
commit b5253c7
Show file tree

Hide file tree

Showing 187 changed files with 4,038 additions and 3,328 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,20 @@
 # Data table extensions with `@tanstack/table`
 
-This monorepo contains various examples of how to build complex data tables with the `@tanstack/table` library. There will be support for both React and web components for each example included here.
+This monorepo contains various examples of how to build complex data tables with
+the `@tanstack/table` library. There will be support for both React and web
+components for each example included here.
 
 ### Why?
 
-The work and approach here is an iteration of the `Datagrid` component from `@carbon/ibm-products`. Some of the challenges faced with building and maintaining this component is that it is _not_ composable and thus creates a barrier for the flexibility of experiences that can be created with it.
+The work and approach here is an iteration of the `Datagrid` component from
+`@carbon/ibm-products`. Some of the challenges faced with building and
+maintaining this component is that it is _not_ composable and thus creates a
+barrier for the flexibility of experiences that can be created with it.
 
-The example based approach outlined within this repo provides teams with a launch point for creating complex data table interactions within the Carbon Design System. The key difference is that this functionality is not wrapped around one component (as is the case with the `Datagrid` from `@carbon/ibm-products`).
+The example based approach outlined within this repo provides teams with a
+launch point for creating complex data table interactions within the Carbon
+Design System. The key difference is that this functionality is not wrapped
+around one component (as is the case with the `Datagrid` from
+`@carbon/ibm-products`).
 
-See readmes for code sandbox and stackblitz example environments.
+See readmes for code sandbox and stackblitz example environments.
diff --git a/package.json b/package.json
@@ -3,13 +3,16 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "build": "nx run-many -t build"
+    "build": "nx run-many -t build",
+    "format": "prettier --cache --write '**/*.{js,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd,dist}/**'"
   },
   "private": true,
   "dependencies": {},
   "devDependencies": {
     "@nx/js": "^19.6.4",
-    "nx": "^19.6.4"
+    "nx": "^19.6.4",
+    "prettier": "^2.8.8",
+    "prettier-config-carbon": "^0.11.0"
   },
   "workspaces": [
     "react/*"

diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const prettierConfig = require('prettier-config-carbon');
+
+module.exports = prettierConfig;
diff --git a/react/README.md b/react/README.md
@@ -1,18 +1,18 @@
 ## Data table extensions, `@tanstack/react-table`
 
-| Example  | Code sandbox | Stackblitz
-| --- | --- | --- |
-| Batch actions  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/batch-actions) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/batch-actions)
-| Customize column order  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/customizeColumns) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/customizeColumns)
-| Editable cells  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/editableCells) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/editableCells)
-| Filter flyout  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/filterFlyout) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/filterFlyout)
-| Filter panel  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/filterPanel) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/filterPanel)
-| Global filter  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/globalFilter) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/globalFilter)
-| Infinite scroll  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/infiniteScroll) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/infiniteScroll)
-| Nested rows  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/nestedRows) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/nestedRows)
-| Pagination  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/pagination) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/pagination)
-| Column resizing  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/resizing) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/resizing)
-| Row click  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/row-click) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/row-click)
-| Row expansion  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/rowExpansion) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/rowExpansion)
-| Sortable columns  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/sortable) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/sortable)
-| Sticky columns  | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/sticky-columns) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/sticky-columns)
+| Example                | Code sandbox                                                                                                  | Stackblitz                                                                                                  |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Batch actions          | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/batch-actions)    | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/batch-actions)    |
+| Customize column order | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/customizeColumns) | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/customizeColumns) |
+| Editable cells         | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/editableCells)    | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/editableCells)    |
+| Filter flyout          | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/filterFlyout)     | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/filterFlyout)     |
+| Filter panel           | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/filterPanel)      | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/filterPanel)      |
+| Global filter          | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/globalFilter)     | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/globalFilter)     |
+| Infinite scroll        | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/infiniteScroll)   | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/infiniteScroll)   |
+| Nested rows            | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/nestedRows)       | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/nestedRows)       |
+| Pagination             | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/pagination)       | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/pagination)       |
+| Column resizing        | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/resizing)         | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/resizing)         |
+| Row click              | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/row-click)        | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/row-click)        |
+| Row expansion          | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/rowExpansion)     | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/rowExpansion)     |
+| Sortable columns       | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/sortable)         | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/sortable)         |
+| Sticky columns         | [View example](https://codesandbox.io/s/github/matthewgallo/tanstack-carbon/tree/main/react/sticky-columns)   | [View example](https://stackblitz.com/github/matthewgallo/tanstack-carbon/tree/main/react/sticky-columns)   |
diff --git a/react/batch-actions/README.md b/react/batch-actions/README.md
@@ -1,15 +1,19 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR and
+some ESLint rules.
 
 Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
+  uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc)
+  uses [SWC](https://swc.rs/) for Fast Refresh
 
 ## Expanding the ESLint configuration
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+If you are developing a production application, we recommend updating the
+configuration to enable type aware lint rules:
 
 - Configure the top-level `parserOptions` property like this:
 
@@ -22,16 +26,20 @@ export default tseslint.config({
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Replace `tseslint.configs.recommended` to
+  `tseslint.configs.recommendedTypeChecked` or
+  `tseslint.configs.strictTypeChecked`
 - Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+- Install
+  [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and
+  update the config:
 
 ```js
 // eslint.config.js
-import react from 'eslint-plugin-react'
+import react from 'eslint-plugin-react';
 
 export default tseslint.config({
   // Set the react version
@@ -46,5 +54,5 @@ export default tseslint.config({
     ...react.configs.recommended.rules,
     ...react.configs['jsx-runtime'].rules,
   },
-})
+});
 ```
diff --git a/react/batch-actions/eslint.config.ts b/react/batch-actions/eslint.config.ts
@@ -1,8 +1,8 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -23,7 +23,7 @@ export default tseslint.config(
         'warn',
         { allowConstantExport: true },
       ],
-      "@typescript-eslint/no-explicit-any": "off",
+      '@typescript-eslint/no-explicit-any': 'off',
     },
-  },
-)
+  }
+);