@usesidekick/react 0.1.0

package/src/primitives/data.ts

@@ -0,0 +1,91 @@
+import {
+  DataPrimitives,
+  SidekickState,
+  ComputedField,
+  DataFilter,
+  DataTransform,
+  ApiInterceptor,
+  SortOption,
+  GroupByOption,
+} from '../types';
+
+function generateId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+export function createDataPrimitives(
+  state: SidekickState,
+  currentOverrideId: string
+): DataPrimitives {
+  return {
+    computed(fieldName, compute) {
+      const field: ComputedField = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        fieldName,
+        compute,
+      };
+      state.computedFields.set(fieldName, field);
+    },
+
+    addFilter(name, filter) {
+      const dataFilter: DataFilter = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        name,
+        filter,
+      };
+      state.filters.set(name, dataFilter);
+    },
+
+    transform(dataKey, transformFn) {
+      const transform: DataTransform = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        dataKey,
+        transform: transformFn,
+      };
+      state.transforms.set(dataKey, transform);
+    },
+
+    intercept(pathPattern, handler) {
+      const interceptor: ApiInterceptor = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        pathPattern,
+        handler,
+      };
+      state.interceptors.push(interceptor);
+    },
+
+    addSortOption(tableId, config) {
+      const sortOption: SortOption = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config,
+      };
+
+      const existing = state.sortOptions.get(tableId) ?? [];
+      existing.push(sortOption);
+      state.sortOptions.set(tableId, existing);
+    },
+
+    addGroupBy(tableId, config) {
+      const groupByOption: GroupByOption = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config,
+      };
+
+      const existing = state.groupByOptions.get(tableId) ?? [];
+      existing.push(groupByOption);
+      state.groupByOptions.set(tableId, existing);
+    },
+  };
+}

package/src/primitives/index.ts

@@ -0,0 +1,3 @@
+export { createUIPrimitives } from './ui';
+export { createDataPrimitives } from './data';
+export { createBehaviorPrimitives } from './behavior';

package/src/primitives/ui.ts

@@ -0,0 +1,268 @@
+import { ComponentType } from 'react';
+import {
+  UIPrimitives,
+  SidekickState,
+  WrappedComponent,
+  AddedColumn,
+  ColumnRename,
+  HiddenColumn,
+  ColumnOrder,
+  RowFilter,
+  MenuItem,
+  TabItem,
+  PropsModifier,
+  ActionItem,
+  ValidationRule,
+  InjectedStyles,
+  DOMModification,
+  InjectionPoint,
+} from '../types';
+
+// Simple uuid generator for client-side use
+function generateId(): string {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+export function createUIPrimitives(
+  state: SidekickState,
+  currentOverrideId: string
+): UIPrimitives {
+  return {
+    wrap(componentName, wrapper, options = {}) {
+      const wrapped: WrappedComponent = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        wrapper,
+        priority: options.priority ?? 0,
+        where: options.where,
+      };
+
+      const existing = state.wrappers.get(componentName) ?? [];
+      existing.push(wrapped);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.wrappers.set(componentName, existing);
+    },
+
+    replace(componentName, replacement) {
+      state.replacements.set(componentName, replacement);
+    },
+
+    addStyles(css) {
+      const styles: InjectedStyles = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        css,
+      };
+      state.styles.push(styles);
+    },
+
+    addColumn(tableId, config) {
+      const column: AddedColumn = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        ...config,
+      };
+
+      const existing = state.columns.get(tableId) ?? [];
+      existing.push(column);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.columns.set(tableId, existing);
+    },
+
+    renameColumn(tableId, originalHeader, newHeader) {
+      const rename: ColumnRename = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        originalHeader,
+        newHeader,
+      };
+
+      const existing = state.columnRenames.get(tableId) ?? [];
+      existing.push(rename);
+      state.columnRenames.set(tableId, existing);
+    },
+
+    hideColumn(tableId, header) {
+      const hidden: HiddenColumn = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        header,
+      };
+
+      const existing = state.hiddenColumns.get(tableId) ?? [];
+      existing.push(hidden);
+      state.hiddenColumns.set(tableId, existing);
+    },
+
+    reorderColumns(tableId, order) {
+      const columnOrder: ColumnOrder = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        order,
+      };
+
+      // Only one order per table (last one wins)
+      state.columnOrders.set(tableId, columnOrder);
+    },
+
+    filterRows(tableId, filter) {
+      const rowFilter: RowFilter = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tableId,
+        filter,
+      };
+
+      const existing = state.rowFilters.get(tableId) ?? [];
+      existing.push(rowFilter);
+      state.rowFilters.set(tableId, existing);
+    },
+
+    addMenuItem(menuId, config) {
+      const item: MenuItem = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        menuId,
+        ...config,
+      };
+
+      const existing = state.menuItems.get(menuId) ?? [];
+      existing.push(item);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.menuItems.set(menuId, existing);
+    },
+
+    addTab(tabGroupId, config) {
+      const tab: TabItem = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        tabGroupId,
+        ...config,
+      };
+
+      const existing = state.tabs.get(tabGroupId) ?? [];
+      existing.push(tab);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.tabs.set(tabGroupId, existing);
+    },
+
+    modifyProps(componentId, modifier) {
+      const propsModifier: PropsModifier = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        componentId,
+        modifier,
+      };
+
+      const existing = state.propsModifiers.get(componentId) ?? [];
+      existing.push(propsModifier);
+      state.propsModifiers.set(componentId, existing);
+    },
+
+    addAction(actionBarId, config) {
+      const action: ActionItem = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        actionBarId,
+        ...config,
+      };
+
+      const existing = state.actions.get(actionBarId) ?? [];
+      existing.push(action);
+      existing.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+      state.actions.set(actionBarId, existing);
+    },
+
+    addValidation(formId, fieldName, validate) {
+      const rule: ValidationRule = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        formId,
+        fieldName,
+        validate,
+      };
+
+      const existing = state.validations.get(formId) ?? [];
+      existing.push(rule);
+      state.validations.set(formId, existing);
+    },
+
+    setText(selector, text) {
+      if (typeof text !== 'string') {
+        console.warn(`[Sidekick] setText expects a string value, got ${typeof text}. Ignoring.`);
+        return;
+      }
+      const mod: DOMModification = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: 'setText',
+        value: text,
+      };
+      state.domModifications.push(mod);
+    },
+
+    setAttribute(selector, attr, value) {
+      const mod: DOMModification = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: 'setAttribute',
+        value: { attr, value },
+      };
+      state.domModifications.push(mod);
+    },
+
+    setStyle(selector, styles) {
+      const mod: DOMModification = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: 'setStyle',
+        value: styles,
+      };
+      state.domModifications.push(mod);
+    },
+
+    addClass(selector, className) {
+      const mod: DOMModification = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: 'addClass',
+        value: className,
+      };
+      state.domModifications.push(mod);
+    },
+
+    removeClass(selector, className) {
+      const mod: DOMModification = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        type: 'removeClass',
+        value: className,
+      };
+      state.domModifications.push(mod);
+    },
+
+    inject(selector, component, position = 'after') {
+      const injection: InjectionPoint = {
+        id: generateId(),
+        overrideId: currentOverrideId,
+        selector,
+        position,
+        component,
+      };
+      state.injections.push(injection);
+    },
+  };
+}