@spectric/ui 0.0.21 → 0.0.23

package/src/stories/QueryBar.stories.ts

@@ -1,55 +1,64 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from "@storybook/web-components";
 
-import { SupportedLanguages, type IQueryProps } from '../components/query_bar/QueryBar';
-import '../components';
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { useArgs } from '@storybook/client-api';
-import { filterByColumn } from './fixtures/data';
+import {
+  SupportedLanguages,
+  type IQueryProps,
+} from "../components/query_bar/QueryBar";
+import "../components";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { useArgs } from "@storybook/client-api";
+import { filterByColumn } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-var code = ""
+var code = "";
 
 const meta = {
-  title: 'UI/Query',
-  tags: ['autodocs'],
+  title: "UI/Query",
+  tags: ["autodocs"],
   component: "spectric-query",
   render: (args) => {
     const [_, updateArgs] = useArgs();
     const fakevalues = async (field, text) => {
-      if (!args.fields.find(f => f.name === field)) {
-        return []
+      if (!args.fields.find((f) => f.name === field)) {
+        return [];
       }
-      return filterByColumn(field, text)
-    }
+      return filterByColumn(field, text);
+    };
     return html`
-  <spectric-query
-  .fields=${args.fields}
-  .getValuesForField=${fakevalues}
-  value=${ifDefined(args.value)}
-  @change=${(e: CustomEvent<any>) => {
-        code = e.detail
-        updateArgs({ ...args })
-      }}
-  outputLanguage=${args.outputLanguage}
-  >
-
-  </spectric-query>
-  <pre>
+      <spectric-query
+        .fields=${args.fields}
+        .getValuesForField=${fakevalues}
+        value=${ifDefined(args.value)}
+        @change=${(e: CustomEvent<any>) => {
+          code = e.detail;
+          updateArgs({ ...args });
+        }}
+        outputLanguage=${args.outputLanguage}
+      >
+      </spectric-query>
+      <pre>
     ${JSON.stringify(code, null, 2)}
-  </pre>
-`},
+  </pre
+      >
+    `;
+  },
   argTypes: {
-
     outputLanguage: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: Object.values(SupportedLanguages),
     },
   },
   args: {
-    outputLanguage: 'toDSL',
-    fields: [{ name: "test", type: "string" }, { name: "test_num", type: "number" }, { name: "test_bool", type: "boolean" }, { name: "modulations", type: "string" }, { name: "time_seen", type: "string", format: "date-time" }]
+    outputLanguage: "toDSL",
+    fields: [
+      { name: "test", type: "string" },
+      { name: "test_num", type: "number" },
+      { name: "test_bool", type: "boolean" },
+      { name: "modulations", type: "string" },
+      { name: "time_seen", type: "string", format: "date-time" },
+      { name: "geo_center", type: "object", format: "geojson" },
+    ],
   },
-
 } satisfies Meta<IQueryProps>;
 
 export default meta;
@@ -58,13 +67,13 @@ type Story = StoryObj<IQueryProps>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Basic: Story = {
   args: {
-    outputLanguage: "toCql"
+    outputLanguage: "toCql",
   },
 };
 
 export const ShouldHaveValue: Story = {
   args: {
     outputLanguage: "toCql",
-    value:"test: * and test_num  > 10"
+    value: "test: * and test_num  > 10",
   },
-};
+};

package/src/stories/fixtures/data.ts

@@ -1,5 +1,6 @@
+import { html, svg } from "lit";
 import { ColumnSettings } from "../../components/table";
-
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 
 export const modulations = [
   "AM",
@@ -11,54 +12,245 @@ export const modulations = [
   "PSK",
   "OFDM",
   "PCM",
-  "DPSK"
+  "DPSK",
 ];
 //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 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 === "geo_center") {
+    return [
+      {
+        label: "Tucuman Argentina",
+        value:
+          "POLYGON ((-66.20361328125 -26.62781822639305, -66.0498046875 -26.64745870265937, -65.830078125 -26.725986812271756, -65.89599609375 -26.92206991673281, -66.181640625 -27.274161117374668, -65.6103515625 -27.994401411046148, -65.4345703125 -27.89734922968425, -65.0390625 -27.89734922968425, -64.4677734375 -26.29341500426577, -65.36865234375 -26.07652055985696, -65.85205078125 -26.31311263768267, -66.11572265625 -26.2145910237943, -66.20361328125 -26.62781822639305))",
+      },
+      {
+        label: "Santiago Argentina",
+        value:
+          "POLYGON ((-64.42108154296874 -26.28356493253137, -65.0390625 -27.885211577912145, -65.18463134765625 -27.931327412293648, -65.08026123046874 -28.738763971370293, -64.88250732421875 -28.7965462417692, -64.81658935546872 -29.506549442788607, -62.79510498046873 -29.869228848968298, -62.091979980468736 -30.439202087235568, -61.58660888671873 -25.671235828577018, -64.22332763671874 -25.651430347039724, -64.42108154296874 -26.28356493253137))",
+      },
+    ];
+  }
   if (field === "time_seen") {
-    return []
+    return [];
   }
   if (field === "modulations") {
-    return modulations.filter(v => v.match(new RegExp(text, "gi")))
+    return modulations.filter((v) => v.match(new RegExp(text, "gi")));
   }
   if (field === "signal") {
-    return signals.filter(v => v.match(new RegExp(text, "gi")))
+    return signals.filter((v) => v.match(new RegExp(text, "gi")));
   }
-  let ipsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
-  let values = ['test', 'some value', '10000', ...ipsum.split(" ").map(v => `${v}`)]
+  let ipsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+  let values = [
+    "test",
+    "some value",
+    "10000",
+    ...ipsum.split(" ").map((v) => `${v}`),
+  ];
   if (text == "") {
-    return values
+    return values;
   }
-  return values.filter(v => v.includes(text))
-}
+  return values.filter((v) => v.includes(text));
+};
 
 export type TestData = {
-  name: string
-  company: string
-  contact: string
+  name: string;
+  company: string;
+  contact: string;
   location: {
-    country: string,
-    state: string
-  },
-  years: number
-}
+    country: string;
+    state: string;
+  };
+  years: number;
+};
 export const tabledata: TestData[] = [
-  { name: "Sean", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 11 },
-  { name: "Kipp", company: "Spectric Labs", "contact": "123-4567", location: { "country": "UK", state: "N/A" }, years: 5 },
-  { name: "Adam", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 19 },
-  { name: "Chris", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 27 },
-  { name: "Michael", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 3 },
-  { name: "Matt", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 9 },
-  { name: "Matt", company: "Spectric Labs", "contact": "865-6343", location: { "country": "UK", state: "VA" }, years: 5 },
-  { name: "Matt", company: "Spectric Labs", "contact": "253-6795", location: { "country": "UK", state: "VA" }, years: 15 },
-  { name: "Matt", company: "Spectric Labs (Intern)", "contact": "253-6795", location: { "country": "US", state: "CO" }, years: 1 },
-  { name: "Matt", company: "Spectric Labs", "contact": "912-1230", location: { "country": "UK", state: "VA" }, years: 24 },
-  { name: "Grant", company: "Spectric Labs", "contact": "123-4567", location: { "country": "US", state: "VA" }, years: 100 },]
-export const tablecolumns: ColumnSettings<TestData>[] = [
-  { "title": "Company", key: "company", width: 200 },
-  { "title": "Name", key: "name", sortable: true },
-  { "title": "Contact", key: "contact" },
-  { "title": "Country", key: "location.country", filterable: true },
-  { "title": "Years Employed", key: "years", sortable: true }
-]
+  {
+    name: "Sean",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 11,
+  },
+  {
+    name: "Kipp",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "UK", state: "N/A" },
+    years: 5,
+  },
+  {
+    name: "Adam",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 19,
+  },
+  {
+    name: "Chris",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 27,
+  },
+  {
+    name: "Michael",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 3,
+  },
+  {
+    name: "Matt",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 9,
+  },
+  {
+    name: "Matt",
+    company: "Spectric Labs",
+    contact: "865-6343",
+    location: { country: "UK", state: "VA" },
+    years: 5,
+  },
+  {
+    name: "Matt",
+    company: "Spectric Labs",
+    contact: "253-6795",
+    location: { country: "UK", state: "VA" },
+    years: 15,
+  },
+  {
+    name: "Matt",
+    company: "Spectric Labs (Intern)",
+    contact: "253-6795",
+    location: { country: "US", state: "CO" },
+    years: 1,
+  },
+  {
+    name: "Matt",
+    company: "Spectric Labs",
+    contact: "912-1230",
+    location: { country: "UK", state: "VA" },
+    years: 24,
+  },
+  {
+    name: "Grant",
+    company: "Spectric Labs",
+    contact: "123-4567",
+    location: { country: "US", state: "VA" },
+    years: 100,
+  },
+];
+export const getTableColumns = () => {
+  const tablecolumns: ColumnSettings<TestData>[] = [
+    { title: "Company", key: "company", width: 200 },
+    { title: "Name", key: "name", sortable: true },
+    {
+      title: "Contact",
+      key: "contact",
+      cellActions: [
+        {
+          tooltip: "Call",
+          onClick: (row, _column) => {
+            alert(`Calling ${row.name} at ${row.contact}`);
+          },
+          icon: html`<svg
+            width="16px"
+            height="16px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M14.05 6C15.0268 6.19057 15.9244 6.66826 16.6281 7.37194C17.3318 8.07561 17.8095 8.97326 18 9.95M14.05 2C16.0793 2.22544 17.9716 3.13417 19.4163 4.57701C20.8609 6.01984 21.7721 7.91101 22 9.94M18.5 21C9.93959 21 3 14.0604 3 5.5C3 5.11378 3.01413 4.73086 3.04189 4.35173C3.07375 3.91662 3.08968 3.69907 3.2037 3.50103C3.29814 3.33701 3.4655 3.18146 3.63598 3.09925C3.84181 3 4.08188 3 4.56201 3H7.37932C7.78308 3 7.98496 3 8.15802 3.06645C8.31089 3.12515 8.44701 3.22049 8.55442 3.3441C8.67601 3.48403 8.745 3.67376 8.88299 4.05321L10.0491 7.26005C10.2096 7.70153 10.2899 7.92227 10.2763 8.1317C10.2643 8.31637 10.2012 8.49408 10.0942 8.64506C9.97286 8.81628 9.77145 8.93713 9.36863 9.17882L8 10C9.2019 12.6489 11.3501 14.7999 14 16L14.8212 14.6314C15.0629 14.2285 15.1837 14.0271 15.3549 13.9058C15.5059 13.7988 15.6836 13.7357 15.8683 13.7237C16.0777 13.7101 16.2985 13.7904 16.74 13.9509L19.9468 15.117C20.3262 15.255 20.516 15.324 20.6559 15.4456C20.7795 15.553 20.8749 15.6891 20.9335 15.842C21 16.015 21 16.2169 21 16.6207V19.438C21 19.9181 21 20.1582 20.9007 20.364C20.8185 20.5345 20.663 20.7019 20.499 20.7963C20.3009 20.9103 20.0834 20.9262 19.6483 20.9581C19.2691 20.9859 18.8862 21 18.5 21Z"
+                stroke="#000000"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </g>
+          </svg>`,
+        },
+      ],
+    },
+    { title: "Country", key: "location.country", filterable: true },
+    { title: "Years Employed", key: "years", sortable: true },
+  ];
+  return tablecolumns;
+};

package/src/stories/table.stories.ts

@@ -2,15 +2,54 @@ import type { Meta, StoryObj } from "@storybook/web-components";
 
 //import { ColumnSettings, PaginationChangeProps, TableElement, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../components/";
 import { html } from "lit";
-import { ColumnSettings, PaginationChangeProps, SpectricTableElement, TableDataOptions, TableSelectOptions, TableSortDirection, TableSortOption, type TableProps as Props } from "../index"
+import {
+  ColumnSettings,
+  PaginationChangeProps,
+  SpectricTableElement,
+  TableDataOptions,
+  TableSelectOptions,
+  TableSortDirection,
+  TableSortOption,
+  type TableProps as Props,
+} from "../index";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { useArgs } from "@storybook/client-api";
 import { FilterEvent, rowGetValue } from "../components/table/cell";
-import { tablecolumns, tabledata } from "./fixtures/data";
+import { getTableColumns, tabledata } from "./fixtures/data";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const data = JSON.parse(JSON.stringify([...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata, ...tabledata,]))
-const columns = tablecolumns
-const getData = SpectricTableElement.getDefaultDataSorterAndPaginatior<typeof tabledata[0]>(data)
+const data = JSON.parse(
+  JSON.stringify([
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+    ...tabledata,
+  ])
+);
+
+const getData =
+  SpectricTableElement.getDefaultDataSorterAndPaginatior<(typeof tabledata)[0]>(
+    data
+  );
 const meta = {
   title: "UI/Table",
   tags: ["autodocs"],
@@ -27,23 +66,33 @@ const meta = {
         select=${ifDefined(args.select)}
         sort=${ifDefined(args.sort)}
         rowHeight=${ifDefined(args.rowHeight)}
-        @selected=${(e) => { }}
+        @selected=${(e) => {}}
         @filter=${(e: CustomEvent<FilterEvent<any>>) => {
-        alert(`filter ${e.detail.include ? "for" : "out"} event value ${e.detail.value}`)
-      }}
-        @change=${(e: CustomEvent<TableDataOptions<typeof tabledata[0]>>) => {
-        updateArgs({ ...e.detail });
-        if (e.target && e.target instanceof SpectricTableElement) {
-          e.target.data = getData({ ...args, ...e.detail })
-        }
-      }}
+          alert(
+            `filter ${e.detail.include ? "for" : "out"} event value ${
+              e.detail.value
+            }`
+          );
+        }}
+        @change=${(e: CustomEvent<TableDataOptions<(typeof tabledata)[0]>>) => {
+          updateArgs({ ...e.detail });
+          if (e.target && e.target instanceof SpectricTableElement) {
+            e.target.data = getData({ ...args, ...e.detail });
+          }
+        }}
       >
       </spectric-table>
     `;
   },
   argTypes: {
-    select: { control: { type: "select" }, options: Object.values(TableSelectOptions) },
-    sort: { control: { type: "select" }, options: Object.values(TableSortOption) }
+    select: {
+      control: { type: "select" },
+      options: Object.values(TableSelectOptions),
+    },
+    sort: {
+      control: { type: "select" },
+      options: Object.values(TableSortOption),
+    },
   },
   args: {
     pagination: {
@@ -52,13 +101,13 @@ const meta = {
       size: "xsmall",
       totalItems: data.length,
     },
-    columns: JSON.parse(JSON.stringify(columns)),
-    select: TableSelectOptions.none
+    columns: getTableColumns(),
+    select: TableSelectOptions.none,
   },
-} satisfies Meta<Props<typeof tabledata[0]>>;
+} satisfies Meta<Props<(typeof tabledata)[0]>>;
 
 export default meta;
-type Story = StoryObj<Props<typeof tabledata[0]>>;
+type Story = StoryObj<Props<(typeof tabledata)[0]>>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Basic: Story = {
@@ -69,7 +118,7 @@ export const Basic: Story = {
       size: "xsmall",
       totalItems: data.length,
     },
-    columns: JSON.parse(JSON.stringify(columns)),
+    columns: getTableColumns(),
   },
 };
 
@@ -77,32 +126,31 @@ export const Basic: Story = {
 export const NoPagination: Story = {
   args: {
     pagination: undefined,
-    columns: JSON.parse(JSON.stringify(columns)),
+    columns: getTableColumns(),
   },
 };
 
-export const MiltiSelect: Story = {
+export const MultiSelect: Story = {
   args: {
     select: "multi",
-    columns: JSON.parse(JSON.stringify(columns)),
+    columns: getTableColumns(),
   },
 };
 
 export const SingleSelect: Story = {
   args: {
     select: "single",
-    columns: JSON.parse(JSON.stringify(columns)),
+    columns: getTableColumns(),
   },
 };
 
-
 /**
  * The spectric table by default is set to single column sorting, but you can enable multicolumn sorting with the sort="multi" attribute
  */
 export const MultiColumnSort: Story = {
   args: {
     sort: "multi",
-    columns: JSON.parse(JSON.stringify(columns)),
-    pagination: { pageSize: 20, page: 1 }
+    columns: getTableColumns(),
+    pagination: { pageSize: 20, page: 1 },
   },
-};
+};