@spectric/ui 0.0.7 → 0.0.8

package/src/components/table/table.ts

@@ -0,0 +1,131 @@
+import { html, LitElement, TemplateResult } from 'lit';
+import "../pagination";
+import "./header"
+import "./body"
+import { customElement, property, } from 'lit/decorators.js';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./table.css"
+export const TableElementTag = "spectric-table"
+import { spreadProps } from '../../utils/spread';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
+import { FilterEvent } from './cell';
+export type { TableProps, TableEvents }
+
+export type DomRenderable = HTMLElement | TemplateResult | string | number | null
+
+export type ColumnSettings<T> = {
+    hidden?: boolean
+    sortable?: boolean
+    filterable?: boolean
+    title?: string
+    key?: string
+    render?: (row: T, table: TableElement<T>) => DomRenderable
+}
+interface TableProps<T> {
+    pagination?: PaginationProps
+    columns: ColumnSettings<T>[]
+    data: T[]
+}
+
+/**
+ * Table Element
+ * 
+ * The table element is a bit more complex and the column settings and data can only be set through the properties
+ * 
+ * 
+ * React
+ * 
+ * ``` tsx
+ * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
+ * ```
+ * 
+ * Javascript
+ * 
+ * ``` js
+ * table = document.createElement("spectric-table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * ```
+ * 
+ * HTML 
+ * 
+ * ``` html
+ * <spectric-table id="table"></spectric-table>
+ * <script>
+ * document.querySelector("#table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * </script>
+ * ```
+ */
+@customElement(TableElementTag)
+export class TableElement<T> extends LitElement implements TableProps<T> {
+    @property({ type: Array, attribute: false })
+    data: T[] = [];
+    @property({ type: Object, attribute: false })
+    pagination?: PaginationProps | undefined;
+    @property({ attribute: false })
+    columns: ColumnSettings<T>[] = [];
+    private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (this.pagination) {
+            this.pagination.size
+            this.pagination = { ...this.pagination, ...e.detail }
+        }
+        this._emitChange()
+    };
+    private _emitChange = () => {
+        let { pagination } = this
+        this.dispatchEvent(new CustomEvent<{ pagination?: PaginationChangeProps }>("change", { detail: { pagination } }))
+    }
+    //@ts-ignore
+    private __DO_NOT_USE_filter = () => {
+        //This is only here to document events that bubble up from lower components
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
+    }
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
+    }
+
+    protected render(): unknown {
+        let columns = this.columns.filter(column => !column.hidden)
+        return html`
+        <div role="table">
+            <spectric-table-header .columns=${columns}></spectric-table-header>
+            <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+        </div>
+        ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
+        `;
+    }
+}
+
+interface TableEvents {
+    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>
+
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>
+            }
+        }
+    }
+}

package/src/stories/Button.stories.ts

@@ -13,6 +13,7 @@ const meta = {
   <spectric-button
     ?disabled=${args.disabled}
     ?danger=${args.danger}
+    ?icon=${args.icon}
     variant=${ifDefined(args.variant)}
     size=${ifDefined(args.size)}
     backgroundColor=${ifDefined(args.backgroundColor)}
@@ -31,11 +32,11 @@ const meta = {
     backgroundColor: { control: 'color', description: "sets the background color for the element" },
     size: {
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.values(ButtonSizes),
     },
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'text'],
+      options: Object.values(ButtonVariants),
     },
     disabled: {
       control: { type: 'boolean' },

package/src/stories/pagination.stories.ts

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { PaginationChangeProps, type PaginationProps as Props } from "../components/pagination/pagination";
+import { html } from "lit";
+import '../components';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { useArgs } from "@storybook/client-api";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: "UI/Pagination",
+  tags: ["autodocs"],
+  component: "spectric-pagination",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+      <spectric-pagination
+        page=${ifDefined(args.page)}
+        pageSize=${ifDefined(args.pageSize)}
+        totalItems=${ifDefined(args.totalItems)}
+        size=${args.size}
+        @change=${(e: CustomEvent<PaginationChangeProps>) => {
+        updateArgs({ ...e.detail });
+      }}
+      >
+      </spectric-pagination>
+    `;
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: {
+    page: 1,
+    pageSize: 3,
+    size: "small",
+    totalItems: 103,
+  },
+} satisfies Meta<Props>;
+
+export default meta;
+type Story = StoryObj<Props>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    page: 1,
+    pageSize: 3,
+    totalItems: 103,
+  },
+};
+/**
+ * When the total items is unknown pagination will only shows page size
+ */
+export const NoTotalItems: Story = {
+  args: {
+    page: 1,
+    pageSize: 3,
+    totalItems: undefined,
+  },
+};

package/src/stories/table.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { PaginationChangeProps, type TableProps as Props } from "../components/";
+import { html } from "lit";
+import '../components';
+import { ifDefined } from "lit/directives/if-defined.js";
+import { useArgs } from "@storybook/client-api";
+import { FilterEvent } from "../components/table/cell";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+type TestData = {
+  name: string
+  company: string
+  contact: string
+  country: string
+}
+
+const data: TestData[] = [
+  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },
+  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", "country": "US" },
+  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", "country": "UK" },]
+const meta = {
+  title: "UI/Table",
+  tags: ["autodocs"],
+  component: "spectric-table",
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return html`
+      <spectric-table
+        .pagination=${args.pagination}
+        .columns=${args.columns}
+        .data=${!args.pagination ? data : data.slice((args.pagination.page - 1) * args.pagination.pageSize, (args.pagination.page) * args.pagination.pageSize)}
+        @filter=${(e: CustomEvent<FilterEvent<any>>) => {
+        alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
+      }}
+        @change=${(e: CustomEvent<PaginationChangeProps>) => {
+        console.log(e)
+        updateArgs({ ...e.detail });
+      }}
+      >
+      </spectric-table>
+    `;
+  },
+  argTypes: {
+  },
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 3,
+      size: "small",
+      totalItems: data.length,
+    },
+    columns: [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]
+  },
+} satisfies Meta<Props<TestData>>;
+
+export default meta;
+type Story = StoryObj<Props<TestData>>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    pagination: {
+      page: 1,
+      pageSize: 3,
+      size: "small",
+      totalItems: data.length,
+    }
+  },
+};