@spectric/ui 0.0.7 → 0.0.9

package/src/stories/Button.stories.ts

@@ -4,6 +4,7 @@ import { ButtonSizes, ButtonVariants, type ButtonProps } from '../components/But
 import '../components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { TooltipPostions } from '../components';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
   title: 'UI/Button',
@@ -13,6 +14,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 +33,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' },
@@ -135,4 +137,25 @@ export const Dangerous: Story = {
   args: {
     danger: true
   },
+};
+
+export const ButtonsWithTooltips: Story = {
+  render: (args) => html`
+  ${Object.values(TooltipPostions).map(p => {
+    return html`
+<spectric-button
+    ?danger=${args.danger}
+    tooltip=${p}
+    tooltipPosition=${p}
+    size=${ifDefined(args.size)}
+    backgroundColor=${ifDefined(args.backgroundColor)}
+    @click=${() => { alert("clicked") }}
+  >
+    ${p}
+</spectric-button>`
+  })}
+`,
+  args: {
+
+  },
 };

package/src/stories/fixtures/ExampleContent.ts

@@ -1,12 +1,14 @@
 
-import { filterByColumn } from "./data";
+import { filterByColumn, tablecolumns, tabledata } from "./data";
 import { ExampleBits } from "./Bits";
-import { FieldTypes } from "../../components/query_bar/QueryBar";
+import { FieldTypes, SpectricQuery } from "../../components/query_bar/QueryBar";
 
 import { html, LitElement } from 'lit';
 
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import "./lorumipsum"
+import { PaginationChangeProps } from "../../components/pagination";
+import { FilterEvent } from "../../components/table/cell";
 type Props = {
   frameWidth: number
 }
@@ -17,8 +19,35 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
   }
   @property({ type: Number, reflect: true })
   frameWidth: number = 10;
+
+  @query("spectric-query")
+  query!: SpectricQuery
+
   @state()
   dialogOpen: boolean = false;
+  tableData = tabledata.slice(0, 3)
+  pagination = {
+    page: 1,
+    pageSize: 3,
+    size: "xsmall",
+    totalItems: tabledata.length,
+  }
+  _handleFilter = (e: CustomEvent<FilterEvent<any>>) => {
+    let include = e.detail.include ? "" : "not "
+    if (e.detail.column.key && e.detail.value) {
+      if (this.query.value !== "") {
+        this.query.value = `${this.query.value} and ${include}${e.detail.column.key}: '${e.detail.value}'`
+      } else {
+        this.query.value = `${include}${e.detail.column.key}: '${e.detail.value}'`
+      }
+    }
+  }
+  _handlePaginationChange = (e: CustomEvent<{ pagination: PaginationChangeProps }>) => {
+    let { pagination } = e.detail
+    this.pagination = { ...this.pagination, ...pagination }
+    this.tableData = tabledata.slice((pagination.page - 1) * pagination.pageSize, (pagination.page) * pagination.pageSize)
+    this.requestUpdate()
+  }
   render() {
     return html`
         <spectric-dialog
@@ -59,6 +88,12 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
           >
         
           </spectric-query>
+          <spectric-table 
+          .data=${this.tableData} 
+          .columns=${tablecolumns} 
+          @filter=${this._handleFilter}
+          @change=${this._handlePaginationChange}
+          .pagination=${this.pagination}></spectric-table>
         <spectric-panel style="display:flex">
         <spectric-bit-display
             frameWidth=${this.frameWidth}
@@ -92,7 +127,7 @@ export class SpectricStorybookExampleContent extends LitElement implements Props
           <spectric-button size="small" danger @click=${() => {
         this.dialogOpen = true
         this.requestUpdate()
-      }}>Delete</spectric-button>
+      }}>Delete (show modal)</spectric-button>
           <spectric-button size="small" danger variant="secondary">Override</spectric-button>
           <spectric-button size="small" danger variant="text">Disable</spectric-button>
           <spectric-button size="small" variant="text">test</spectric-button>

package/src/stories/fixtures/data.ts

@@ -1,3 +1,4 @@
+import { ColumnSettings } from "../../components/table";
 
 
 export const modulations = [
@@ -15,7 +16,7 @@ export const modulations = [
 //pulled from https://www.sigidwiki.com/wiki/Category:Digital signals that don't have a space or -
 export const signals = ["802.11n", "8PSK", "ASCII", "AUTOSPEC", "Aprizesat", "Autocab", "Bluetooth", "CCITT", "CDMA420", "CHIP", "CHU", "COFDMTV", "CompuLert", "Contestia", "Coquelet", "DCF77", "DominoEX", "DominoF", "EIA", "FLEX", "FSK441", "FSQ", "FST4W", "FT4", "FT8", "Hellschreiber", "ISCAT", "JS8", "JT4", "JT65", "JT6M", "JT9", "JTMS", "Kiwi", "Lentus", "LoRa", "MDC1200", "MOBITEX", "MSK144", "MT63", "Milstar", "NML", "NOV", "NPM", "NWC", "Olivia", "OpenSky", "Orbcomm", "PACKET", "PAX", "PI4", "POCSAG", "PSK2K", "Piccolo", "ProVoice", "Q15X25", "ROS", "RTTYM", "ReFLEX", "SIGFOX", "SPREAD", "Serdolik", "SkyOFDM", "THOR", "THROB", "TT2300", "TWINPLEX", "Tetrapol", "VISEL", "VOICE", "WSPR", "WiMAX", "WinDRM"]
 export const filterByColumn = async (field, text) => {
-  if(field === "time_seen"){
+  if (field === "time_seen") {
     return []
   }
   if (field === "modulations") {
@@ -30,4 +31,21 @@ export const filterByColumn = async (field, text) => {
     return values
   }
   return values.filter(v => v.includes(text))
-}
+}
+
+type TestData = {
+  name: string
+  company: string
+  contact: string
+  country: string
+}
+
+export const tabledata: 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" },]
+export const tablecolumns: ColumnSettings<TestData>[] = [{ "title": "Company", key: "company" }, { "title": "Name", key: "name" }, { "title": "Contact", key: "contact" }, { "title": "Country", key: "country", filterable: true }]

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,88 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { ColumnSettings, 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";
+import { tablecolumns, tabledata } from "./fixtures/data";
+// 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 = tabledata
+const columns = tablecolumns
+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)}
+        select=${ifDefined(args.select)}
+        @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: "xsmall",
+      totalItems: data.length,
+    },
+    columns: columns
+  },
+} 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: "xsmall",
+      totalItems: data.length,
+    }
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const NoPagination: Story = {
+  args: {
+    pagination: undefined
+  },
+};
+
+export const MiltiSelect: Story = {
+  args: {
+    select: "multi"
+  },
+};
+
+export const SingleSelect: Story = {
+  args: {
+    select: "single"
+  },
+};

package/src/stories/tooltip.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { TooltipPostions, type TooltipProps as Props } from "../components/";
+import { html } from "lit";
+import "../components";
+import { useArgs } from "@storybook/client-api";
+import { ifDefined } from "lit/directives/if-defined.js";
+let positions = Object.values(TooltipPostions);
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "UI/Tooltip",
+    tags: ["autodocs"],
+    component: "spectric-tooltip",
+    render: (args) => {
+        const [_, updateArgs] = useArgs();
+
+        return html`
+      ${positions.map((p) => {
+            return html` <span>
+          <spectric-tooltip
+            position=${p}
+            text=${args.text || p}
+            delay=${args.delay}
+            animationDuration=${ifDefined(args.animationDuration)}
+          >
+          </spectric-tooltip>
+          ${p}
+      </span>
+      
+      `;
+        })}
+    `;
+    },
+    argTypes: {},
+    args: {
+        animationDuration: 500,
+        delay: 100
+    },
+} 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 PositionTop: Story = {
+    args: {
+        position: "top",
+    },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const PositionLeft: Story = {
+    args: {
+        position: "left",
+    },
+};
+
+export const PositionRight: Story = {
+    args: {
+        position: "right",
+    },
+};
+
+export const PositionBottom: Story = {
+    args: {
+        position: "bottom",
+    },
+};