feat(components): remove arc-table in favour of gridjs and tanstack-t…

…able integration themes (#349)

* feat(components): expose gridjs api arc table

* feat(components): add tanstack table intergration

* update

* update

* fix

* docs: add docusaurus documentation

* fix

* add migration guide

GETTING_STARTED.md

@@ -116,52 +116,6 @@ import '@arc-web/components/src/components/button/arc-button';
 
 </details>
 
-### React
-
-React can render web components, however, makes assumptions about HTML elements that don't always hold for custom elements, while also treating lower-case tag names differently from upper-cased. This makes working with web components harder than necessary to use. React is working on fixes to these issues, but in the meantime, the `@arc-web/react` provides a wrapper that takes care of setting properties and listening to events for you. Read more about why we need this wrapper [here](https://lit.dev/docs/frameworks/react/#why-are-wrappers-needed)
-
-Install both the `@arc-web/components` and `@arc-web/react` packages from npm:
-
-```sh
-npm install @arc-web/components@latest @arc-web/react@latest
-```
-
-Setup the `@arc-web/components` package as described above, however, import components from the `@arc-web/react` package instead:
-
-```tsx
-import { ArcButton } from '@arc-web/react';
-
-export const App = () => {
-  return <ArcButton>Click Me</ArcButton>;
-};
-```
-
-#### React with (ARC & Material UI Components)
-
-```
-npm install @arc-web/components@latest @arc-web/react@latest @arc-wb/material@latest @mui/material@latest @mui/icons-material@latest
-```
-
-```tsx
-import React from 'react';
-import { ArcContainer, ArcButton } from '@arc-web/react';
-import { ThemeProvider } from '@arc-web/material';
-import { Button } from '@mui/material';
-
-export function App() {
-  return (
-    <ThemeProvider>
-      <ArcContainer>
-        <div style={{ margin: 'var(--arc-spacing-small)' }}>
-          <ArcButton color="primary">Click me</ArcButton>
-          <Button variant="contained">Click me</Button>
-        </div>
-      </ArcContainer>
-    </ThemeProvider>
-  );
-}
-```
-
 ### Customization
 
 **ARC** components can be customized at a high level through design tokens. This gives you control over theme colours and general styling. For more advanced customizations, web-components can expose something called CSS `parts`. To ensure that each application looks and feels the same, these `parts` are not being exposed from the **ARC** components.

MIGRATION_GUIDES.md

@@ -1,5 +1,33 @@
 # Migration Guides
 
+## v3 to v4
+
+v4 introdcues serval breaking chanages to the library. Please take care to read the following migration guide before upgrading.
+
+#### Breaking Changes
+
+- `ArcTable` component has been removed in favour of the **gridjs** theme.
+
+#### Upgrade Steps
+
+- Replace all instances of `ArcTable` with the new **gridjs** theme:
+
+```diff
+- import '@arc-web/components/src/components/table/arc-table';
+- <arc-table></arc-table>
+
++ <link rel="stylesheet" href="@arc-web/components/themes/gridjs.css" />
++ <div id="grid"></div>
++ <script type="module">
++   import { Grid } from 'gridjs';
++
++   new Grid({ ... }).render(document.getElementById('grid'));
++ </script>
+
+```
+
+Please refer to the [official gridjs documentation](https://gridjs.io/) for more information.
+
 ## v2 to v3
 
 In version 3 we have taken the opportunity to make several important breaking changes to the library. Please take care to read the following migration guide before upgrading.

lib.nix

@@ -33,7 +33,8 @@ in
         # this workspace is a monorepo and all dependencies
         # are resolved via the workspace root package.json
         src = cleanSource ./.;
-        npmDepsHash = "sha256-fFtpvA2IpYxDHlPJuvgkgx/sQDBdCWvIv9vGwSM6Q7o=";
+        npmDepsHash = "sha256-vaLGyLd24ethltsLfF+4aXkz5CpbQg8JaWhgEqvD5gE=";
+
 
         # dont run the build scripts when rebuilding
         # npm dependencies as node-keytar will fail

package.json

@@ -62,6 +62,11 @@
     "@storybook/web-components-vite": "8.1.11",
     "@sveltejs/kit": "2.7.1",
     "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@tanstack/angular-table": "8.20.5",
+    "@tanstack/lit-table": "8.20.5",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/table-core": "8.20.5",
+    "@tanstack/vue-table": "8.20.5",
     "@types/koa": "2.13.9",
     "@types/koa-router": "7.4.5",
     "@types/koa-static": "4.0.2",
@@ -83,7 +88,7 @@
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-storybook": "0.6.12",
     "eslint-plugin-vue": "9.17.0",
-    "gridjs": "6.0.6",
+    "gridjs": "6.2.0",
     "jsonc-eslint-parser": "2.3.0",
     "koa": "2.14.2",
     "koa-node-resolve": "1.0.0-pre.9",

packages/components/.storybook/preview.tsx

@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { setCustomElementsManifest } from '@storybook/web-components';
-import { Preview } from '@story/types';
 import DocumentationTemplate from './documentation-template.mdx';
 import '../themes/index.css';
 import '../src/index';
@@ -10,7 +9,7 @@ import CUSTOM_ELEMENTS from '../../../dist/packages/components/custom-elements.j
 
 setCustomElementsManifest(CUSTOM_ELEMENTS);
 
-const PREVIEW: Preview = {
+const PREVIEW = {
   decorators: [
     (story, { parameters }) => {
       const { noContainer } = parameters;

packages/components/package.json

@@ -14,7 +14,6 @@
     "@azure/msal-browser": "2.28.1",
     "@floating-ui/dom": "0.3.1",
     "date-fns": "2.29.1",
-    "gridjs": "6.0.6",
     "lit": "3.1.2",
     "tabbable": "5.3.3",
     "tslib": "2.3.1"