@spectric/ui 0.0.21 → 0.0.22

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,6 +1,5 @@
 import { ColumnSettings } from "../../components/table";
 
-
 export const modulations = [
   "AM",
   "FM",
@@ -11,54 +10,214 @@ 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 },]
+  {
+    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 }
-]
+  { 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 },
+];

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";
 // 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 columns = tablecolumns;
+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: {
@@ -53,12 +102,12 @@ const meta = {
       totalItems: data.length,
     },
     columns: JSON.parse(JSON.stringify(columns)),
-    select: TableSelectOptions.none
+    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 = {
@@ -81,7 +130,7 @@ export const NoPagination: Story = {
   },
 };
 
-export const MiltiSelect: Story = {
+export const MultiSelect: Story = {
   args: {
     select: "multi",
     columns: JSON.parse(JSON.stringify(columns)),
@@ -95,7 +144,6 @@ export const SingleSelect: Story = {
   },
 };
 
-
 /**
  * The spectric table by default is set to single column sorting, but you can enable multicolumn sorting with the sort="multi" attribute
  */
@@ -103,6 +151,6 @@ export const MultiColumnSort: Story = {
   args: {
     sort: "multi",
     columns: JSON.parse(JSON.stringify(columns)),
-    pagination: { pageSize: 20, page: 1 }
+    pagination: { pageSize: 20, page: 1 },
   },
-};
+};