carbon-design-system · matthewgallo · Sep 20, 2024 · Sep 20, 2024
diff --git a/web-components/resizing/.gitignore b/web-components/resizing/.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/web-components/resizing/.sassrc b/web-components/resizing/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/web-components/resizing/index.html b/web-components/resizing/index.html
@@ -0,0 +1,15 @@
+<!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 + Lit + TS</title>
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link rel="stylesheet" href="./src/index.scss" />
+    <script type="module" src="/src/resizing.ts"></script>
+  </head>
+  <body>
+    <resizable-columns></resizable-columns>
+  </body>
+</html>
diff --git a/web-components/resizing/package.json b/web-components/resizing/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "resizing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "@tanstack/lit-table": "^8.20.5",
+    "sass": "^1.64.1",
+    "lit": "^3.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/web-components/resizing/public/vite.svg b/web-components/resizing/public/vite.svg
diff --git a/web-components/resizing/src/index.scss b/web-components/resizing/src/index.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/web-components/resizing/src/makeData.ts b/web-components/resizing/src/makeData.ts
@@ -0,0 +1,76 @@
+import { faker } from '@faker-js/faker'
+
+export type Resource = {
+  id: string
+  name: string
+  rule: string
+  status: string
+  other: string
+  example: string
+  subRows?: Resource[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newResource = (id: string, index: number): Resource => {
+  return {
+    id,
+    name: `Load balancer ${index}`,
+    rule: faker.helpers.shuffle<Resource['rule']>([
+      'DNS delegation',
+      'Round Robin'
+    ])[0],
+    status: faker.helpers.shuffle<Resource['status']>([
+      'starting',
+      'active',
+      'disabled',
+    ])[0]!,
+    other: 'Test',
+    example: faker.number.int(1000).toString(),
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Resource[] => {
+    const len = lens[depth]!
+    return range(len).map((index): Resource => {
+      return {
+        ...newResource(`load-balancer-${index}`, index),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}
+
+//simulates a backend api
+const data = makeData(1000)
+export const fetchData = async (
+  start: number,
+  size: number,
+) => {
+
+  //simulate a backend api
+  await new Promise(resolve => setTimeout(resolve, 2000))
+
+  return {
+    data: data.slice(start, start + size),
+    meta: {
+      totalRowCount: data.length,
+    },
+  }
+}
+
+export type ResourceApiResponse = {
+  data: Resource[]
+  meta: {
+    totalRowCount: number
+  }
+}
diff --git a/web-components/resizing/src/resizing.ts b/web-components/resizing/src/resizing.ts
@@ -0,0 +1,181 @@
+import { LitElement, css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import { repeat } from 'lit/directives/repeat.js'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  TableController,
+} from '@tanstack/lit-table'
+import '@carbon/web-components/es/components/data-table/index.js';
+import { makeData } from './makeData';
+
+
+type Resource = {
+  id: string
+  name: string
+  rule: string
+  status: string
+  other: string
+  example: string
+}
+
+const columnHelper = createColumnHelper<Resource>()
+
+const columns = [
+  columnHelper.accessor(row => row.name, {
+    id: 'lastName',
+    cell: info => html`<i>${info.getValue()}</i>`,
+    header: () => html`<span>Name</span>`,
+  }),
+  columnHelper.accessor('rule', {
+    header: () => 'Rule',
+    cell: info => info.renderValue(),
+  }),
+  columnHelper.accessor('status', {
+    header: () => html`<span>Status</span>`,
+  }),
+  columnHelper.accessor('other', {
+    header: 'Other',
+  }),
+  columnHelper.accessor('example', {
+    header: 'Example',
+  }),
+]
+
+const data: Resource[] = makeData(10);
+
+/**
+ * An example table using `@tanstack/lit-table` and `@carbon/web-components` DataTable.
+ *
+ */
+
+@customElement('resizable-columns')
+export class ResizableColumns extends LitElement {
+  private tableController = new TableController<Resource>(this);
+
+  render() {
+    const table = this.tableController.table({
+      columns,
+      data,
+      columnResizeMode: 'onChange',
+      columnResizeDirection: 'ltr',
+      getCoreRowModel: getCoreRowModel(),
+    })
+
+    return html`
+      <cds-table>
+        <cds-table-head>
+          ${repeat(
+            table.getHeaderGroups(),
+            headerGroup => headerGroup.id,
+            headerGroup =>
+              html`<cds-table-header-row>
+              ${repeat(
+                headerGroup.headers,
+                header => header.id,
+                header =>
+                  html`
+                  <cds-table-header-cell
+                    class="resize-col"
+                    colspan="${header.colSpan}"
+                    style="width: ${header.getSize()}px"
+                  >
+                    ${flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    ${header.isPlaceholder
+                      ? null
+                      : html`<div
+                          class="resizer ${table.options
+                            .columnResizeDirection} ${header.column.getIsResizing()
+                            ? 'is-resizing'
+                            : ''}"
+                          @dblclick="${() => header.column.resetSize()}"
+                          @mousedown="${header.getResizeHandler()}"
+                          @touchstart="${header.getResizeHandler()}"
+                        />`}
+                  </cds-table-header-cell>`
+              )}</cds-table-header-row>`
+          )}
+        </cds-table-head>
+        <cds-table-body>
+          ${repeat(
+            table.getRowModel().rows,
+            row => row.id,
+            row => html`
+              <cds-table-row>
+                ${repeat(
+                  row.getVisibleCells(),
+                  cell => cell.id,
+                  cell =>
+                    html` <cds-table-cell>
+                      ${flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </cds-table-cell>`
+                )}
+              </cds-table-row>
+            `
+          )}
+        </cds-table-body>
+      </cds-table>
+    `
+  }
+
+  static styles = css`
+    :host {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 2rem;
+      display: flex;
+      place-items: center;
+    }
+
+    .resize-col {
+      position: relative;
+    }
+
+    .resizer {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 5px;
+      background: rgba(0, 0, 0, 0.5);
+      cursor: col-resize;
+      user-select: none;
+      touch-action: none;
+    }
+
+    .resizer.ltr {
+      right: 0;
+    }
+
+    .resizer.rtl {
+      left: 0;
+    }
+
+    .resizer.is-resizing {
+      background: blue;
+      opacity: 1;
+    }
+
+    @media (hover: hover) {
+      .resizer {
+        opacity: 0;
+      }
+
+      *:hover > .resizer {
+        opacity: 1;
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'resizable-columns': ResizableColumns
+  }
+}
diff --git a/web-components/resizing/src/vite-env.d.ts b/web-components/resizing/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web-components/resizing/tsconfig.json b/web-components/resizing/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}