@shifl-inc/ui 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# Shifl Grid (Vue 3)
+
+JSON-driven data grid for Shifl UI, built with Vue 3 + TypeScript. Library-first output via Vite (library mode) with Tailwind + CSS variables for theming.
+
+## Status
+
+- ✅ Minimal grid (column visibility toggle, client-side sorting, global filter)
+- 🚧 Everything else scaffolded/stubbed for incremental delivery (editing, virtual scroll, tours, views)
+
+## Requirements
+
+- Node `>=20.11.0` (matches Shifl UI constraint)
+- Peer deps: `vue@^3.4.0`, `pinia@^2.2.0`
+
+## Install
+
+```bash
+npm install @shifl-inc/ui
+# peer deps
+npm install vue pinia
+```
+
+## Usage
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import { ShiflGridPlugin } from '@shifl-inc/ui';
+import '@shifl-inc/ui/style.css';
+
+const app = createApp(App);
+app.use(ShiflGridPlugin);
+app.mount('#app');
+```
+
+```vue
+<script setup lang="ts">
+import { ShiflGrid } from '@shifl-inc/ui';
+import type { GridConfig } from '@shifl-inc/ui';
+
+const config: GridConfig = {
+  name: 'My Preferred Shipments',
+  columns: [
+    { key: 'shifl_ref', label: 'Shifl Ref #', sortable: true, frozen: true },
+    { key: 'company_name', label: 'Customer', sortable: true }
+  ],
+  search: ['shifl_ref', 'company_name'],
+  sort: { key: 'shifl_ref', order: 'asc' },
+  rows: [
+    { shifl_ref: 'SF-1001', company_name: 'GMA Inc' },
+    { shifl_ref: 'SF-1002', company_name: 'Walads Autowash' }
+  ]
+};
+</script>
+
+<template>
+  <ShiflGrid :config="config" />
+</template>
+```
+
+## Scripts
+
+- `npm run dev` — Vite dev server
+- `npm run build` — Library build + d.ts via `vite-plugin-dts`
+- `npm run lint` — ESLint (Vue + TS) flat config
+- `npm run test` — Vitest (jsdom)
+- `npm run storybook` — Storybook dev
+- `npm run storybook:build` — Storybook static build
+
+## Project structure (high level)
+
+- `src/components/grid` — `ShiflGrid.vue` (minimal implementation)
+- `src/composables` — Core behaviors (sort/filter/columns implemented, others stubbed/TODO)
+- `src/types` — Grid + theme contracts
+- `src/theme` — CSS tokens
+- `src/styles` — Tailwind entry + component styles
+- `src/utils` — Helpers (config normalization)
+- `src/plugins` — Vue install plugin
+- `stories/` — Storybook stories
+- `.storybook/` — Storybook configuration
+
+## Notes
+
+- Config normalization supports both `frozen` and legacy `fixed` flags.
+- Virtual scroll, editing, tours, saved/recommended views, telemetry are intentionally stubbed for later milestones.

package/dist/components/grid/GridColumnManager.vue.d.ts

@@ -0,0 +1,45 @@
+import { NormalizedGridColumn } from '../../types/grid';
+type __VLS_Props = {
+  titlePrefix?: string;
+  columns: NormalizedGridColumn[];
+};
+declare const _default: import('vue').DefineComponent<
+  __VLS_Props,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {
+    close: () => any;
+    toggle: (key: string) => any;
+    move: (fromIndex: number, toIndex: number) => any;
+    toggleFrozen: (key: string) => any;
+    selectAll: () => any;
+    deselectAll: () => any;
+    restoreDefault: () => any;
+  },
+  string,
+  import('vue').PublicProps,
+  Readonly<__VLS_Props> &
+    Readonly<{
+      onClose?: (() => any) | undefined;
+      onToggle?: ((key: string) => any) | undefined;
+      onMove?: ((fromIndex: number, toIndex: number) => any) | undefined;
+      onToggleFrozen?: ((key: string) => any) | undefined;
+      onSelectAll?: (() => any) | undefined;
+      onDeselectAll?: (() => any) | undefined;
+      onRestoreDefault?: (() => any) | undefined;
+    }>,
+  {},
+  {},
+  {},
+  {},
+  string,
+  import('vue').ComponentProvideOptions,
+  false,
+  {},
+  HTMLDivElement
+>;
+export default _default;

package/dist/components/grid/ShiflGrid.vue.d.ts

@@ -0,0 +1,27 @@
+import { GridConfig } from '../../types/grid';
+type __VLS_Props = {
+  config: GridConfig<Record<string, unknown>>;
+};
+declare const _default: import('vue').DefineComponent<
+  __VLS_Props,
+  {},
+  {},
+  {},
+  {},
+  import('vue').ComponentOptionsMixin,
+  import('vue').ComponentOptionsMixin,
+  {},
+  string,
+  import('vue').PublicProps,
+  Readonly<__VLS_Props> & Readonly<{}>,
+  {},
+  {},
+  {},
+  {},
+  string,
+  import('vue').ComponentProvideOptions,
+  false,
+  {},
+  HTMLDivElement
+>;
+export default _default;

package/dist/composables/useBreakpoints.d.ts

@@ -0,0 +1,5 @@
+export declare function useBreakpoints(): {
+  width: import('vue').Ref<number, number>;
+  isMobile: import('vue').ComputedRef<boolean>;
+  isTablet: import('vue').ComputedRef<boolean>;
+};

package/dist/composables/useGridColumns.d.ts

@@ -0,0 +1,67 @@
+import { NormalizedGridColumn } from '../types/grid';
+export declare function useGridColumns(initialColumns: NormalizedGridColumn[]): {
+  columns: import('vue').Ref<
+    {
+      frozen: boolean;
+      visible: boolean;
+      key: string;
+      label: string;
+      order?: number | undefined;
+      sortable?: boolean | undefined;
+      width?: string | undefined;
+      height?: string | undefined;
+      isDefault?: boolean | undefined;
+      fixed?: boolean | undefined;
+      cellMetadata?:
+        | {
+            format?: string | undefined;
+            emptyState?: string | undefined;
+          }
+        | undefined;
+    }[],
+    | NormalizedGridColumn[]
+    | {
+        frozen: boolean;
+        visible: boolean;
+        key: string;
+        label: string;
+        order?: number | undefined;
+        sortable?: boolean | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        isDefault?: boolean | undefined;
+        fixed?: boolean | undefined;
+        cellMetadata?:
+          | {
+              format?: string | undefined;
+              emptyState?: string | undefined;
+            }
+          | undefined;
+      }[]
+  >;
+  visibleColumns: import('vue').ComputedRef<
+    {
+      frozen: boolean;
+      visible: boolean;
+      key: string;
+      label: string;
+      order?: number | undefined;
+      sortable?: boolean | undefined;
+      width?: string | undefined;
+      height?: string | undefined;
+      isDefault?: boolean | undefined;
+      fixed?: boolean | undefined;
+      cellMetadata?:
+        | {
+            format?: string | undefined;
+            emptyState?: string | undefined;
+          }
+        | undefined;
+    }[]
+  >;
+  toggleColumnVisibility: (key: string) => void;
+  setAllVisible: (visible: boolean) => void;
+  toggleFrozen: (key: string) => void;
+  moveColumn: (fromIndex: number, toIndex: number) => void;
+  resetColumns: () => void;
+};

package/dist/composables/useGridData.d.ts

@@ -0,0 +1,4 @@
+import { NormalizedGridConfig } from '../types/grid';
+export declare function useGridData<T>(config: NormalizedGridConfig<T>): {
+  rows: T[];
+};

package/dist/composables/useGridEditing.d.ts

@@ -0,0 +1 @@
+export declare function useGridEditing(): {};

package/dist/composables/useGridFilter.d.ts

@@ -0,0 +1,5 @@
+export declare function useGridFilter(): {
+  globalFilter: import('vue').Ref<string, string>;
+  setGlobalFilter: (value: string) => void;
+  applyGlobalFilter: <T extends Record<string, unknown>>(rows: T[], keys?: string[]) => T[];
+};

package/dist/composables/useGridInfiniteScroll.d.ts

@@ -0,0 +1 @@
+export declare function useGridInfiniteScroll(): {};

package/dist/composables/useGridSelection.d.ts

@@ -0,0 +1,11 @@
+export declare function useGridSelection<
+  T extends {
+    id?: string | number;
+  }
+>(): {
+  selectedKeys: import('vue').Ref<
+    Set<string | number> & Omit<Set<string | number>, keyof Set<any>>,
+    Set<string | number> | (Set<string | number> & Omit<Set<string | number>, keyof Set<any>>)
+  >;
+  toggleRow: (row: T) => void;
+};

package/dist/composables/useGridSort.d.ts

@@ -0,0 +1,18 @@
+import { GridSort } from '../types/grid';
+export declare function useGridSort(initialSort?: GridSort): {
+  sort: import('vue').Ref<
+    | {
+        key: string;
+        order: 'asc' | 'desc';
+      }
+    | undefined,
+    | GridSort
+    | {
+        key: string;
+        order: 'asc' | 'desc';
+      }
+    | undefined
+  >;
+  setSort: (key: string) => void;
+  applySort: <T extends Record<string, unknown>>(rows: T[]) => T[];
+};

package/dist/composables/useGridTheme.d.ts

@@ -0,0 +1,25 @@
+import { ThemeTokens } from '../types/theme';
+export declare function provideGridTheme(tokens?: Partial<ThemeTokens>): import('vue').Ref<
+  {
+    surface: string;
+    surfaceAlt: string;
+    border: string;
+    text: string;
+    textMuted: string;
+    accent: string;
+    accentStrong: string;
+    focus: string;
+  },
+  | ThemeTokens
+  | {
+      surface: string;
+      surfaceAlt: string;
+      border: string;
+      text: string;
+      textMuted: string;
+      accent: string;
+      accentStrong: string;
+      focus: string;
+    }
+>;
+export declare function useGridTheme(): import('vue').ComputedRef<ThemeTokens>;

package/dist/composables/useGridTour.d.ts

@@ -0,0 +1 @@
+export declare function useGridTour(): {};

package/dist/composables/useVirtualScroll.d.ts

@@ -0,0 +1 @@
+export declare function useVirtualScroll(): {};

package/dist/config/defaults.d.ts

@@ -0,0 +1,2 @@
+import { NormalizedGridConfig } from '../types/grid';
+export declare const DEFAULT_GRID_CONFIG: NormalizedGridConfig;

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { default as ShiflGrid } from './components/grid/ShiflGrid.vue';
+export { default as ShiflGridPlugin } from './plugins/install';
+export * from './composables/useGridColumns';
+export * from './composables/useGridSort';
+export * from './composables/useGridFilter';
+export * from './composables/useGridData';
+export * from './composables/useGridSelection';
+export * from './composables/useGridEditing';
+export * from './composables/useGridTheme';
+export * from './composables/useBreakpoints';
+export * from './composables/useGridInfiniteScroll';
+export * from './composables/useVirtualScroll';
+export * from './composables/useGridTour';
+export * from './types/grid';
+export * from './types/theme';

package/dist/plugins/install.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+  install(app: App): void;
+};
+export default _default;