raw-auto-table-zod 0.0.2

package/README.md

@@ -0,0 +1,169 @@
+# Raw Auto Table Zod
+
+A React table component that automatically generates tables from Zod schemas.
+
+## Features
+
+- Automatically generate tables from Zod schemas
+- Customizable components for each cell type
+- Support for nested object properties
+- Custom column rendering
+- Action columns
+- Row click handlers
+- Extra custom columns with positioning control
+
+## Installation
+
+```bash
+npm install raw-auto-table-zod
+```
+
+## Basic Usage
+
+```tsx
+import { RawAutoTable, AutoTableComponentsProvider } from 'raw-auto-table-zod';
+import { z } from 'zod';
+
+// Define your schema
+const schema = z.object({
+  name: z.string(),
+  age: z.number(),
+  status: z.enum(['active', 'inactive', 'pending']),
+});
+
+// Generate or fetch data
+const data = [
+  { name: 'John Doe', age: 30, status: 'active' },
+  { name: 'Jane Smith', age: 25, status: 'inactive' },
+];
+
+function App() {
+  return (
+    <AutoTableComponentsProvider
+      components={{
+        // Provide your UI components here
+        Table: YourTableComponent,
+        TableTBody: YourTableBodyComponent,
+        TableTD: YourTableCellComponent,
+        TableTH: YourTableHeadComponent,
+        TableTR: YourTableRowComponent,
+        TableTHead: YourTableHeaderComponent,
+        // Cell type renderers
+        number: ({ value }) => <div>{value}</div>,
+        boolean: ({ value }) => <div>{value ? 'Yes' : 'No'}</div>,
+        date: ({ value }) => <div>{new Date(value).toLocaleDateString()}</div>,
+        enum: ({ value }) => <div>{value}</div>,
+        text: ({ value }) => <div>{value}</div>,
+        // Multi-value renderers for arrays
+        multi_string: ({ value }) => <div>{value.join(', ')}</div>,
+        // ...other renderers
+      }}
+    >
+      <RawAutoTable
+        data={data}
+        schema={schema}
+        onRowClick={(row) => {
+          console.log(row);
+        }}
+      />
+    </AutoTableComponentsProvider>
+  );
+}
+```
+
+## Advanced Features
+
+### Custom Field Rendering
+
+Use `FieldChanger` to customize how fields are rendered:
+
+```tsx
+import { z } from 'zod';
+import { FieldChanger } from 'raw-auto-table-zod';
+
+const schema = z.object({
+  name: z.string().describe(
+    FieldChanger({
+      isChangeLabel: true,
+      label: "Custom Name",
+      isImage: true,
+      addValueTextAfter: "Name",
+    })
+  ),
+  // other fields...
+});
+```
+
+### Replace Columns
+
+Override automatic column generation:
+
+```tsx
+<RawAutoTable
+  data={data}
+  schema={schema}
+  replaceColumns={[
+    {
+      accessorKey: "address.city",
+      cell(props) {
+        return <div>{props.row.original.someOtherField}</div>;
+      },
+    },
+  ]}
+/>
+```
+
+### Action Column
+
+Add an action column for operations like edit/delete:
+
+```tsx
+<RawAutoTable
+  data={data}
+  schema={schema}
+  isActionColumnComponentEnabled={true}
+  actionColumnComponent={({ row }) => {
+    return <button onClick={() => handleDelete(row)}>Delete</button>;
+  }}
+  actionHeaderComponent={({ defaultName }) => {
+    return <div>{defaultName}</div>;
+  }}
+/>
+```
+
+### Extra Custom Columns
+
+Add columns beyond what's in your schema:
+
+```tsx
+<RawAutoTable
+  data={data}
+  schema={schema}
+  isExtraCustomColumnsEnabled={true}
+  extraCustomColumns={[
+    {
+      header: () => <div>Extra Column</div>,
+      accessorKey: "extraData",
+      cell: (props) => {
+        return <div>{JSON.stringify(props.row.original.someData)}</div>;
+      },
+      insertPosition: "name:before", // Insert before the 'name' column
+      disableOnRowClick: true, // Prevent row click when clicking this cell
+    },
+  ]}
+/>
+```
+
+## TypeScript Support
+
+This package is fully typed with TypeScript, providing excellent intellisense and type safety when working with your Zod schemas.
+
+## Requirements
+
+- React 16.8+
+- zod
+- @tanstack/react-table
+
+## License
+
+MIT

package/dist/auto-table/context/useComponentContext.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { AutoTableComponentContextType } from "../types/base-components";
+export declare const useComponentContext: () => AutoTableComponentContextType;
+type ComponentProviderProps = {
+    children: ReactNode;
+    components?: Partial<AutoTableComponentContextType>;
+};
+export declare const AutoTableComponentsProvider: ({ children, components, }: ComponentProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/auto-table/core/useGenerate-columns.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { FlattenSchemaWithKeyAndTypes } from "zod-helper";
+import type { ExtraColumnConfig } from "../types/AutoTable-types";
+export declare const useGenerateColumns: (fields: FlattenSchemaWithKeyAndTypes[], replaceColumns: ColumnDef<any>[], extraCustomColumns: ExtraColumnConfig<any>["extraCustomColumns"]) => ColumnDef<any>[];

package/dist/auto-table/enums/enums.d.ts

@@ -0,0 +1,11 @@
+export declare enum AutoTableCellTypeEnum {
+    TEXT = "text",
+    NUMBER = "number",
+    NUMBER_WITH_DECIMALS = "numberWithDecimals",
+    BOOLEAN = "boolean",
+    DATE = "date",
+    DATE_TIME = "dateTime",
+    TIME = "time",
+    CURRENCY = "currency",
+    PERCENTAGE = "percentage"
+}

package/dist/auto-table/hooks/useAutoTableData.d.ts

@@ -0,0 +1,6 @@
+import type { z } from "zod";
+import type { RawAutoTableProps } from "../types/AutoTable-types";
+export default function useAutoTableData<T extends z.ZodTypeAny>({ schema, replaceColumns, data, changePositionOfFields, extraCustomColumns, }: RawAutoTableProps<T>): {
+    table: import("@tanstack/react-table").Table<any>;
+    Component: import("../..").AutoTableComponentContextType;
+};

package/dist/auto-table/index.d.ts

@@ -0,0 +1,3 @@
+import type { z } from "zod";
+import type { RawAutoTableProps } from "./types/AutoTable-types";
+export default function RawAutoTable<T extends z.ZodTypeAny>(props: RawAutoTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/auto-table/types/AutoTable-types.d.ts

@@ -0,0 +1,44 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { z } from "zod";
+import type { FormProps } from "zod-helper";
+import type { FlattenedType } from "./zod-type-helper";
+type BaseAutoTableProps<T extends z.ZodTypeAny> = Omit<FormProps<T>, "groupByZodKeys"> & {
+    replaceColumns?: ColumnDef<FlattenedType<T>, z.infer<T>>[];
+    data: z.infer<T>[];
+    onRowClick?: (row: z.infer<T>) => void;
+};
+type ActionColumnConfig<T extends z.ZodTypeAny> = {
+    isActionColumnComponentEnabled: true;
+    actionHeaderComponent: React.ComponentType<{
+        defaultName: string;
+    }>;
+    actionColumnComponent: React.ComponentType<{
+        row: z.infer<T>;
+    }>;
+} | {
+    isActionColumnComponentEnabled?: false | undefined;
+    actionHeaderComponent?: never;
+    actionColumnComponent?: never;
+};
+type Direction = "after" | "before";
+export type InsertAfterColumn<T extends z.ZodTypeAny> = `${Extract<keyof FlattenedType<T>, string>}:${Direction}`;
+export type ExtraColumnConfig<T extends z.ZodTypeAny> = {
+    isExtraCustomColumnsEnabled: true;
+    extraCustomColumns: {
+        header: string | React.ReactNode | (() => React.ReactNode);
+        accessorKey: string;
+        cell: ({ row, }: {
+            row: {
+                original: z.infer<T>;
+            };
+        }) => React.ReactNode;
+        insertPosition?: InsertAfterColumn<T>;
+        disableOnRowClick?: boolean;
+    }[];
+} | {
+    isExtraCustomColumnsEnabled?: false | undefined;
+    extraCustomColumns?: never;
+};
+export type RawAutoTableProps<T extends z.ZodTypeAny> = BaseAutoTableProps<T> & ActionColumnConfig<T> & ExtraColumnConfig<T>;
+export type GenerateColumns<T extends z.ZodTypeAny> = ColumnDef<FlattenedType<z.infer<T>>, z.infer<T>>[];
+export {};

package/dist/auto-table/types/base-components.d.ts

@@ -0,0 +1,50 @@
+type WithDefault<T> = {
+    value: T;
+    rawData: Record<string, any>;
+    defaultValue: T;
+    title: string;
+    description: string;
+    isChangeLabel?: boolean;
+    label?: string;
+    isImage?: boolean;
+    addValueTextAfter?: string;
+    addValueTextBefore?: string;
+    randomData?: Record<string, any>;
+};
+export type TableType = React.ComponentProps<"table">;
+export type Table_TBody_Type = React.ComponentProps<"tbody">;
+export type Table_TD_Type = React.ComponentProps<"td">;
+export type Table_TH_Type = React.ComponentProps<"th">;
+export type Table_TR_Type = React.ComponentProps<"tr">;
+export type Table_THead_Type = React.ComponentProps<"thead">;
+export type TableTextComponentType = WithDefault<string>;
+export type TableNumberComponentType = WithDefault<number>;
+export type TableEnumComponentType = WithDefault<string>;
+export type TableImageComponentType = WithDefault<string>;
+export type TableDateComponentType = WithDefault<string>;
+export type TableBooleanComponentType = WithDefault<boolean>;
+export type TableMultiEnumComponentType = WithDefault<string[]>;
+export type TableMultiStringComponentType = WithDefault<string[]>;
+export type TableMultiNumberComponentType = WithDefault<number[]>;
+export type TableMultiDateComponentType = WithDefault<Date[] | string[]>;
+export type TableMultiBooleanComponentType = WithDefault<boolean[]>;
+export type AutoTableComponentContextType = {
+    text: React.ComponentType<TableTextComponentType>;
+    number: React.ComponentType<TableNumberComponentType>;
+    enum: React.ComponentType<TableEnumComponentType>;
+    image: React.ComponentType<TableImageComponentType>;
+    date: React.ComponentType<TableDateComponentType>;
+    boolean: React.ComponentType<TableBooleanComponentType>;
+    multi_enum: React.ComponentType<TableMultiEnumComponentType>;
+    multi_string: React.ComponentType<TableMultiStringComponentType>;
+    multi_number: React.ComponentType<TableMultiNumberComponentType>;
+    multi_date: React.ComponentType<TableMultiDateComponentType>;
+    multi_boolean: React.ComponentType<TableMultiBooleanComponentType>;
+    Table: React.ComponentType<TableType>;
+    TableTBody: React.ComponentType<Table_TBody_Type>;
+    TableTD: React.ComponentType<Table_TD_Type>;
+    TableTH: React.ComponentType<Table_TH_Type>;
+    TableTR: React.ComponentType<Table_TR_Type>;
+    TableTHead: React.ComponentType<Table_THead_Type>;
+};
+export {};

package/dist/auto-table/types/zod-type-helper.d.ts

@@ -0,0 +1,52 @@
+import type { z } from "zod";
+/**
+ * convert zod object to flat keys
+ *
+ * @example
+ * z.object({
+ *  name: z.string(),
+ *  age: z.number(),
+ * })
+ *
+ * type FlattenObjectKeys = "name" | "age"
+ *
+ */
+export type FlattenObjectKeys<T extends z.ZodTypeAny, Prefix extends string = ""> = T extends z.ZodObject<infer U> ? {
+    [K in keyof U]: U[K] extends z.ZodObject<z.ZodRawShape> ? FlattenObjectKeys<U[K], `${Prefix}${string & K}.`> : `${Prefix}${string & K}`;
+}[keyof U] : never;
+/**
+ * convert zod object to flat keys
+ *
+ * @example
+ * z.object({
+ *  name: z.string(),
+ *  age: z.number(),
+ * })
+ *
+ * type SchemaFieldMap = {
+ *  name: {
+ *    abc: string;
+ *  };
+ *  age: {
+ *    abc: string;
+ *  };
+ * }
+ *
+ */
+export type SchemaFieldMap<T extends z.ZodTypeAny> = T extends z.ZodObject<infer U> ? {
+    [K in keyof U | FlattenObjectKeys<T>]: {
+        abc: string;
+    };
+} : T extends z.ZodArray<infer Item extends z.ZodTypeAny> ? SchemaFieldMap<Item> : never;
+type Any = any;
+type InferZod<T extends z.ZodTypeAny> = z.infer<T>;
+type Flatten<T, Prefix extends string = ""> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends Array<Any> ? {
+        [P in `${Prefix}${string & K}`]: T[K];
+    } : Flatten<T[K], `${Prefix}${string & K}.`> : {
+        [P in `${Prefix}${string & K}`]: T[K];
+    };
+}[keyof T];
+type UnionToIntersection<U> = (U extends Any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export type FlattenedType<T extends z.ZodTypeAny> = UnionToIntersection<Flatten<InferZod<T>>>;
+export {};

package/dist/auto-table/utils/ComponentRegistryHelper.d.ts

@@ -0,0 +1,3 @@
+import type { AutoTableComponentContextType } from "../types/base-components";
+declare const ComponentRegistryHelper: (props: AutoTableComponentContextType) => AutoTableComponentContextType;
+export default ComponentRegistryHelper;

package/dist/auto-table/utils/FieldChanger.d.ts

@@ -0,0 +1,15 @@
+interface FieldChangerProps {
+    isChangeLabel?: boolean;
+    label?: string;
+    isImage?: boolean;
+    addValueTextAfter?: string;
+    addValueTextBefore?: string;
+    randomData?: Record<string, any>;
+}
+export default function FieldCustomizer(props: FieldChangerProps): string;
+export declare const decodeFieldCustomizer: (fieldCustomizer: string) => {
+    decodeData: FieldChangerProps | null;
+    description: string | null;
+    success: boolean;
+};
+export {};

package/dist/index.d.ts

@@ -0,0 +1,132 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { z } from 'zod';
+import { ColumnDef } from '@tanstack/react-table';
+import { FormProps } from 'zod-helper';
+
+type WithDefault<T> = {
+    value: T;
+    rawData: Record<string, any>;
+    defaultValue: T;
+    title: string;
+    description: string;
+    isChangeLabel?: boolean;
+    label?: string;
+    isImage?: boolean;
+    addValueTextAfter?: string;
+    addValueTextBefore?: string;
+    randomData?: Record<string, any>;
+};
+type TableType = React.ComponentProps<"table">;
+type Table_TBody_Type = React.ComponentProps<"tbody">;
+type Table_TD_Type = React.ComponentProps<"td">;
+type Table_TH_Type = React.ComponentProps<"th">;
+type Table_TR_Type = React.ComponentProps<"tr">;
+type Table_THead_Type = React.ComponentProps<"thead">;
+type TableTextComponentType = WithDefault<string>;
+type TableNumberComponentType = WithDefault<number>;
+type TableEnumComponentType = WithDefault<string>;
+type TableImageComponentType = WithDefault<string>;
+type TableDateComponentType = WithDefault<string>;
+type TableBooleanComponentType = WithDefault<boolean>;
+type TableMultiEnumComponentType = WithDefault<string[]>;
+type TableMultiStringComponentType = WithDefault<string[]>;
+type TableMultiNumberComponentType = WithDefault<number[]>;
+type TableMultiDateComponentType = WithDefault<Date[] | string[]>;
+type TableMultiBooleanComponentType = WithDefault<boolean[]>;
+type AutoTableComponentContextType = {
+    text: React.ComponentType<TableTextComponentType>;
+    number: React.ComponentType<TableNumberComponentType>;
+    enum: React.ComponentType<TableEnumComponentType>;
+    image: React.ComponentType<TableImageComponentType>;
+    date: React.ComponentType<TableDateComponentType>;
+    boolean: React.ComponentType<TableBooleanComponentType>;
+    multi_enum: React.ComponentType<TableMultiEnumComponentType>;
+    multi_string: React.ComponentType<TableMultiStringComponentType>;
+    multi_number: React.ComponentType<TableMultiNumberComponentType>;
+    multi_date: React.ComponentType<TableMultiDateComponentType>;
+    multi_boolean: React.ComponentType<TableMultiBooleanComponentType>;
+    Table: React.ComponentType<TableType>;
+    TableTBody: React.ComponentType<Table_TBody_Type>;
+    TableTD: React.ComponentType<Table_TD_Type>;
+    TableTH: React.ComponentType<Table_TH_Type>;
+    TableTR: React.ComponentType<Table_TR_Type>;
+    TableTHead: React.ComponentType<Table_THead_Type>;
+};
+
+type ComponentProviderProps = {
+    children: ReactNode;
+    components?: Partial<AutoTableComponentContextType>;
+};
+declare const AutoTableComponentsProvider: ({ children, components, }: ComponentProviderProps) => react_jsx_runtime.JSX.Element;
+
+type Any = any;
+type InferZod<T extends z.ZodTypeAny> = z.infer<T>;
+type Flatten<T, Prefix extends string = ""> = {
+    [K in keyof T]: T[K] extends object ? T[K] extends Array<Any> ? {
+        [P in `${Prefix}${string & K}`]: T[K];
+    } : Flatten<T[K], `${Prefix}${string & K}.`> : {
+        [P in `${Prefix}${string & K}`]: T[K];
+    };
+}[keyof T];
+type UnionToIntersection<U> = (U extends Any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type FlattenedType<T extends z.ZodTypeAny> = UnionToIntersection<Flatten<InferZod<T>>>;
+
+type BaseAutoTableProps<T extends z.ZodTypeAny> = Omit<FormProps<T>, "groupByZodKeys"> & {
+    replaceColumns?: ColumnDef<FlattenedType<T>, z.infer<T>>[];
+    data: z.infer<T>[];
+    onRowClick?: (row: z.infer<T>) => void;
+};
+type ActionColumnConfig<T extends z.ZodTypeAny> = {
+    isActionColumnComponentEnabled: true;
+    actionHeaderComponent: React.ComponentType<{
+        defaultName: string;
+    }>;
+    actionColumnComponent: React.ComponentType<{
+        row: z.infer<T>;
+    }>;
+} | {
+    isActionColumnComponentEnabled?: false | undefined;
+    actionHeaderComponent?: never;
+    actionColumnComponent?: never;
+};
+type Direction = "after" | "before";
+type InsertAfterColumn<T extends z.ZodTypeAny> = `${Extract<keyof FlattenedType<T>, string>}:${Direction}`;
+type ExtraColumnConfig<T extends z.ZodTypeAny> = {
+    isExtraCustomColumnsEnabled: true;
+    extraCustomColumns: {
+        header: string | React.ReactNode | (() => React.ReactNode);
+        accessorKey: string;
+        cell: ({ row, }: {
+            row: {
+                original: z.infer<T>;
+            };
+        }) => React.ReactNode;
+        insertPosition?: InsertAfterColumn<T>;
+        disableOnRowClick?: boolean;
+    }[];
+} | {
+    isExtraCustomColumnsEnabled?: false | undefined;
+    extraCustomColumns?: never;
+};
+type RawAutoTableProps<T extends z.ZodTypeAny> = BaseAutoTableProps<T> & ActionColumnConfig<T> & ExtraColumnConfig<T>;
+type GenerateColumns<T extends z.ZodTypeAny> = ColumnDef<FlattenedType<z.infer<T>>, z.infer<T>>[];
+
+declare function RawAutoTable<T extends z.ZodTypeAny>(props: RawAutoTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface FieldChangerProps {
+    isChangeLabel?: boolean;
+    label?: string;
+    isImage?: boolean;
+    addValueTextAfter?: string;
+    addValueTextBefore?: string;
+    randomData?: Record<string, any>;
+}
+declare const decodeFieldCustomizer: (fieldCustomizer: string) => {
+    decodeData: FieldChangerProps | null;
+    description: string | null;
+    success: boolean;
+};
+
+export { AutoTableComponentsProvider, RawAutoTable, decodeFieldCustomizer };
+export type { AutoTableComponentContextType, ExtraColumnConfig, GenerateColumns, InsertAfterColumn, RawAutoTableProps, TableBooleanComponentType, TableDateComponentType, TableEnumComponentType, TableImageComponentType, TableMultiBooleanComponentType, TableMultiDateComponentType, TableMultiEnumComponentType, TableMultiNumberComponentType, TableMultiStringComponentType, TableNumberComponentType, TableTextComponentType, TableType, Table_TBody_Type, Table_TD_Type, Table_TH_Type, Table_THead_Type, Table_TR_Type };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),n=require("react"),t=require("@tanstack/react-table"),r=require("zod-helper");const a={text:({value:n})=>e.jsx(e.Fragment,{children:n}),number:({value:n})=>e.jsx(e.Fragment,{children:n}),enum:({value:n})=>e.jsx(e.Fragment,{children:n}),image:({value:n})=>e.jsx(e.Fragment,{children:n}),date:({value:n})=>e.jsx(e.Fragment,{children:n}),boolean:({value:n})=>e.jsx(e.Fragment,{children:n}),Table:n=>e.jsx("table",{...n,children:n.children}),TableTBody:({children:n,...t})=>e.jsx("tbody",{...t,children:n}),TableTD:({children:n,...t})=>e.jsx("td",{...t,children:n}),TableTH:({children:n,...t})=>e.jsx("th",{...t,children:n}),TableTHead:({children:n,...t})=>e.jsx("thead",{...t,children:n}),TableTR:({children:n,...t})=>e.jsx("tr",{...t,children:n}),multi_enum:({value:n})=>e.jsx(e.Fragment,{children:n}),multi_string:({value:n})=>e.jsx(e.Fragment,{children:n}),multi_number:({value:n})=>e.jsx(e.Fragment,{children:n}),multi_date:({value:n})=>e.jsx(e.Fragment,{children:n}),multi_boolean:({value:n})=>e.jsx(e.Fragment,{children:n})},l=n.createContext(a),useComponentContext=()=>n.useContext(l),decodeFieldCustomizer=e=>{try{return{decodeData:JSON.parse(e),description:null,success:!0}}catch{return{decodeData:null,description:e,success:!1}}};function useAutoTableData({schema:a,replaceColumns:l=[],data:s,changePositionOfFields:o,extraCustomColumns:i=[]}){const c=((n,t,r)=>{const a=useComponentContext(),l=new Map;for(const e of t)"accessorKey"in e&&"string"==typeof e.accessorKey&&l.set(e.accessorKey,e);const s=n.map((n=>{const t=n.key;if(l.has(t))return l.get(t);const r=(e=>{switch(e){case"date":return"date";case"enum":return"enum";case"image":return"image";case"number":return"number";case"string":return"text";case"boolean":return"boolean";case"multi-string":return"multi_string";case"multi-number":return"multi_number";case"multi-date":return"multi_date";case"multi-boolean":return"multi_boolean";case"multi-enum":return"multi_enum"}})(n.type),s=a[r],{decodeData:o}=decodeFieldCustomizer(n.description??"");return{header:(i=o?.isChangeLabel?o.label??t:t,i.split(".").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join(" ")),accessorKey:t,cell:({getValue:r,row:a})=>{const l=r(),i=a.original;let c=l;return l instanceof Date&&(c=l.toISOString()),s?e.jsx(s,{value:c,rawData:i,defaultValue:n.enums,title:t,description:n.description,...o}):l instanceof Date?e.jsx(e.Fragment,{children:l.toISOString()}):e.jsx(e.Fragment,{children:JSON.stringify(l)})}};var i}));for(const e of t){const t="accessorKey"in e&&"string"==typeof e.accessorKey?e.accessorKey:void 0;t&&!n.some((e=>e.key===t))&&s.push(e)}if(r&&r.length>0)for(const e of r){const[n,t=null]=e.insertPosition?.split(":")??[];n&&t?"before"===t?s.splice(s.findIndex((e=>e.accessorKey===n)),0,e):"after"===t?s.splice(s.findIndex((e=>e.accessorKey===n))+1,0,e):s.push(e):s.push(e)}return s})(n.useMemo((()=>{const e=new r.ZodTableClassed(a);return o&&e.changeJsonFieldPositions(o),{columns:e.convertToTableUseableFormat()}}),[o,a]).columns,l,i);return{table:t.useReactTable({data:s,columns:c,getCoreRowModel:t.getCoreRowModel()}),Component:useComponentContext()}}exports.AutoTableComponentsProvider=({children:n,components:t})=>{const r={...a,...t};return e.jsx(l.Provider,{value:r,children:n})},exports.RawAutoTable=function RawAutoTable(n){const{table:r,Component:a}=useAutoTableData(n),{onRowClick:l,isActionColumnComponentEnabled:s,actionColumnComponent:o,actionHeaderComponent:i,extraCustomColumns:c,isExtraCustomColumnsEnabled:u}=n;return e.jsxs(a.Table,{children:[e.jsx(a.TableTHead,{children:r.getHeaderGroups().map((n=>e.jsxs(a.TableTR,{children:[n.headers.map((n=>e.jsx(a.TableTH,{children:n.isPlaceholder?null:t.flexRender(n.column.columnDef.header,n.getContext())},n.id))),s&&e.jsx(a.TableTH,{children:i?e.jsx(i,{defaultName:"Action"}):"Action"})]},n.id)))}),e.jsx(a.TableTBody,{children:r.getRowModel().rows.map((n=>e.jsxs(a.TableTR,{children:[n.getVisibleCells().map((r=>e.jsx(a.TableTD,{onClick:()=>{if(u){const e=c?.some((e=>e.disableOnRowClick));if(e)return}l&&l?.(n.original)},children:t.flexRender(r.column.columnDef.cell,r.getContext())},r.id))),s&&e.jsx(a.TableTD,{children:o?e.jsx(o,{row:n.original}):"Please provide a component for the action column"})]},n.id)))})]})},exports.decodeFieldCustomizer=decodeFieldCustomizer;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../package/auto-table/context/useComponentContext.tsx","../package/auto-table/utils/FieldChanger.tsx","../package/auto-table/hooks/useAutoTableData.tsx","../package/auto-table/core/useGenerate-columns.tsx","../package/auto-table/index.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\r\nimport { type ReactNode, createContext, useContext } from \"react\";\r\n\r\nimport type {\r\n\tAutoTableComponentContextType,\r\n\tTableType,\r\n\tTable_TBody_Type,\r\n\tTable_TD_Type,\r\n\tTable_TH_Type,\r\n\tTable_THead_Type,\r\n\tTable_TR_Type,\r\n} from \"../types/base-components\";\r\n\r\nconst defaultComponents: AutoTableComponentContextType = {\r\n\ttext: ({ value }) => <>{value}</>,\r\n\tnumber: ({ value }) => <>{value}</>,\r\n\tenum: ({ value }) => <>{value}</>,\r\n\timage: ({ value }) => <>{value}</>,\r\n\tdate: ({ value }) => <>{value}</>,\r\n\tboolean: ({ value }) => <>{value}</>,\r\n\tTable: (props: TableType) => <table {...props}>{props.children}</table>,\r\n\tTableTBody: ({ children, ...props }: Table_TBody_Type) => (\r\n\t\t<tbody {...props}>{children}</tbody>\r\n\t),\r\n\tTableTD: ({ children, ...props }: Table_TD_Type) => (\r\n\t\t<td {...props}>{children}</td>\r\n\t),\r\n\tTableTH: ({ children, ...props }: Table_TH_Type) => (\r\n\t\t<th {...props}>{children}</th>\r\n\t),\r\n\tTableTHead: ({ children, ...props }: Table_THead_Type) => (\r\n\t\t<thead {...props}>{children}</thead>\r\n\t),\r\n\tTableTR: ({ children, ...props }: Table_TR_Type) => (\r\n\t\t<tr {...props}>{children}</tr>\r\n\t),\r\n\tmulti_enum: ({ value }) => <>{value}</>,\r\n\tmulti_string: ({ value }) => <>{value}</>,\r\n\tmulti_number: ({ value }) => <>{value}</>,\r\n\tmulti_date: ({ value }) => <>{value}</>,\r\n\tmulti_boolean: ({ value }) => <>{value}</>,\r\n};\r\n\r\nconst ComponentContext =\r\n\tcreateContext<AutoTableComponentContextType>(defaultComponents);\r\n\r\nexport const useComponentContext = () => useContext(ComponentContext);\r\n\r\ntype ComponentProviderProps = {\r\n\tchildren: ReactNode;\r\n\tcomponents?: Partial<AutoTableComponentContextType>;\r\n};\r\n\r\nexport const AutoTableComponentsProvider = ({\r\n\tchildren,\r\n\tcomponents,\r\n}: ComponentProviderProps) => {\r\n\tconst value = {\r\n\t\t...defaultComponents,\r\n\t\t...components,\r\n\t};\r\n\r\n\treturn (\r\n\t\t<ComponentContext.Provider value={value}>\r\n\t\t\t{children}\r\n\t\t</ComponentContext.Provider>\r\n\t);\r\n};\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\ninterface FieldChangerProps {\r\n\tisChangeLabel?: boolean;\r\n\tlabel?: string;\r\n\tisImage?: boolean;\r\n\taddValueTextAfter?: string;\r\n\taddValueTextBefore?: string;\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\trandomData?: Record<string, any>;\r\n}\r\n\r\nexport default function FieldCustomizer(props: FieldChangerProps) {\r\n\treturn JSON.stringify({\r\n\t\tcustom: true,\r\n\t\t...props,\r\n\t});\r\n}\r\n\r\nexport const decodeFieldCustomizer = (\r\n\tfieldCustomizer: string,\r\n): {\r\n\tdecodeData: FieldChangerProps | null;\r\n\tdescription: string | null;\r\n\tsuccess: boolean;\r\n} => {\r\n\ttry {\r\n\t\treturn {\r\n\t\t\tdecodeData: JSON.parse(fieldCustomizer) as FieldChangerProps,\r\n\t\t\tdescription: null,\r\n\t\t\tsuccess: true,\r\n\t\t};\r\n\t} catch {\r\n\t\treturn {\r\n\t\t\tdecodeData: null,\r\n\t\t\tdescription: fieldCustomizer,\r\n\t\t\tsuccess: false,\r\n\t\t};\r\n\t}\r\n};\r\n","import { getCoreRowModel, useReactTable } from \"@tanstack/react-table\";\r\nimport { useMemo } from \"react\";\r\nimport type { z } from \"zod\";\r\nimport { ZodTableClassed } from \"zod-helper\";\r\nimport { useComponentContext } from \"../context/useComponentContext\";\r\nimport { useGenerateColumns } from \"../core/useGenerate-columns\";\r\nimport type { RawAutoTableProps } from \"../types/AutoTable-types\";\r\n\r\nexport default function useAutoTableData<T extends z.ZodTypeAny>({\r\n\tschema,\r\n\treplaceColumns = [],\r\n\tdata,\r\n\tchangePositionOfFields,\r\n\textraCustomColumns = [],\r\n}: RawAutoTableProps<T>) {\r\n\tconst zodAutoTable = useMemo(() => {\r\n\t\tconst zodAutoTable = new ZodTableClassed(schema);\r\n\t\tif (changePositionOfFields) {\r\n\t\t\tzodAutoTable.changeJsonFieldPositions(changePositionOfFields);\r\n\t\t}\r\n\t\treturn {\r\n\t\t\tcolumns: zodAutoTable.convertToTableUseableFormat(),\r\n\t\t};\r\n\t}, [changePositionOfFields, schema]);\r\n\tconst columns = useGenerateColumns(\r\n\t\tzodAutoTable.columns,\r\n\t\treplaceColumns,\r\n\t\textraCustomColumns,\r\n\t);\r\n\tconst table = useReactTable({\r\n\t\tdata,\r\n\t\tcolumns,\r\n\t\tgetCoreRowModel: getCoreRowModel(),\r\n\t});\r\n\tconst Component = useComponentContext();\r\n\treturn { table, Component };\r\n}\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport type { FlattenSchemaWithKeyAndTypes } from \"zod-helper\";\r\nimport { useComponentContext } from \"../context/useComponentContext\";\r\nimport type { ExtraColumnConfig } from \"../types/AutoTable-types\";\r\nimport { decodeFieldCustomizer } from \"../utils/FieldChanger\";\r\ntype fieldDataType =\r\n\t| \"string\"\r\n\t| \"number\"\r\n\t| \"boolean\"\r\n\t| \"date\"\r\n\t| \"enum\"\r\n\t| \"image\"\r\n\t| \"multi-string\"\r\n\t| \"multi-number\"\r\n\t| \"multi-date\"\r\n\t| \"multi-boolean\"\r\n\t| \"multi-enum\";\r\n\r\nconst getComponentKey = (type: fieldDataType) => {\r\n\tswitch (type) {\r\n\t\tcase \"date\":\r\n\t\t\treturn \"date\";\r\n\t\tcase \"enum\":\r\n\t\t\treturn \"enum\";\r\n\t\tcase \"image\":\r\n\t\t\treturn \"image\";\r\n\t\tcase \"number\":\r\n\t\t\treturn \"number\";\r\n\t\tcase \"string\":\r\n\t\t\treturn \"text\";\r\n\t\tcase \"boolean\":\r\n\t\t\treturn \"boolean\";\r\n\t\tcase \"multi-string\":\r\n\t\t\treturn \"multi_string\";\r\n\t\tcase \"multi-number\":\r\n\t\t\treturn \"multi_number\";\r\n\t\tcase \"multi-date\":\r\n\t\t\treturn \"multi_date\";\r\n\t\tcase \"multi-boolean\":\r\n\t\t\treturn \"multi_boolean\";\r\n\t\tcase \"multi-enum\":\r\n\t\t\treturn \"multi_enum\";\r\n\t}\r\n};\r\nconst getColumnName = (name: string) => {\r\n\t// name to Name , address.street to Address Street , address.owner.name to Address Owner Name\r\n\tconst words = name.split(\".\");\r\n\treturn words\r\n\t\t.map((word) => word.charAt(0).toUpperCase() + word.slice(1))\r\n\t\t.join(\" \");\r\n};\r\nexport const useGenerateColumns = (\r\n\tfields: FlattenSchemaWithKeyAndTypes[],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\treplaceColumns: ColumnDef<any>[],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\textraCustomColumns: ExtraColumnConfig<any>[\"extraCustomColumns\"],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n): ColumnDef<any>[] => {\r\n\tconst Components = useComponentContext();\r\n\t// Step 1: Create a map of replace columns where accessorKey exists\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\tconst replaceMap = new Map<string, ColumnDef<any>>();\r\n\tfor (const col of replaceColumns) {\r\n\t\tif (\"accessorKey\" in col && typeof col.accessorKey === \"string\") {\r\n\t\t\treplaceMap.set(col.accessorKey, col);\r\n\t\t}\r\n\t}\r\n\r\n\t// Step 2: Generate columns from fields\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\tconst columns: ColumnDef<any>[] = fields.map((field) => {\r\n\t\tconst key = field.key;\r\n\t\tif (replaceMap.has(key)) {\r\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: <explanation>\r\n\t\t\treturn replaceMap.get(key)!;\r\n\t\t}\r\n\r\n\t\tconst componentKey = getComponentKey(field.type as fieldDataType);\r\n\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\t\tconst Component = Components[componentKey] as React.FC<any>;\r\n\t\tconst { decodeData } = decodeFieldCustomizer(field.description ?? \"\");\r\n\r\n\t\treturn {\r\n\t\t\theader: getColumnName(\r\n\t\t\t\tdecodeData?.isChangeLabel ? (decodeData.label ?? key) : key,\r\n\t\t\t),\r\n\t\t\taccessorKey: key,\r\n\t\t\tcell: ({ getValue, row }) => {\r\n\t\t\t\tconst value = getValue();\r\n\t\t\t\tconst rawData = row.original;\r\n\r\n\t\t\t\t// Convert Date objects to strings before passing to components\r\n\t\t\t\tlet processedValue = value;\r\n\t\t\t\tif (value instanceof Date) {\r\n\t\t\t\t\tprocessedValue = value.toISOString();\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (!Component) {\r\n\t\t\t\t\t// Handle Date objects or other non-renderable values\r\n\t\t\t\t\tif (value instanceof Date) {\r\n\t\t\t\t\t\treturn <>{value.toISOString()}</>;\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn <>{JSON.stringify(value)}</>;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<Component\r\n\t\t\t\t\t\tvalue={processedValue}\r\n\t\t\t\t\t\trawData={rawData}\r\n\t\t\t\t\t\tdefaultValue={field.enums}\r\n\t\t\t\t\t\ttitle={key}\r\n\t\t\t\t\t\tdescription={field.description}\r\n\t\t\t\t\t\t{...decodeData}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\t\t\t},\r\n\t\t};\r\n\t});\r\n\r\n\t// Step 3: Add additional replaceColumns that don't conflict with fields\r\n\tfor (const col of replaceColumns) {\r\n\t\tconst key =\r\n\t\t\t\"accessorKey\" in col && typeof col.accessorKey === \"string\"\r\n\t\t\t\t? col.accessorKey\r\n\t\t\t\t: undefined;\r\n\t\tif (key && !fields.some((f) => f.key === key)) {\r\n\t\t\tcolumns.push(col);\r\n\t\t}\r\n\t}\r\n\tif (extraCustomColumns && extraCustomColumns.length > 0) {\r\n\t\tfor (const col of extraCustomColumns) {\r\n\t\t\t// insertPosition split by : and get the first part as the accessorKey and the second part as the insertPosition after,before\r\n\t\t\tconst [accessorKey, insertPosition = null] =\r\n\t\t\t\t// @ts-expect-error - insertPosition is not always defined and\r\n\t\t\t\tcol.insertPosition?.split(\":\") ?? [];\r\n\t\t\t// if accessorKey and insertPosition both exist then insert the column after the accessorKey\r\n\t\t\tif (accessorKey && insertPosition) {\r\n\t\t\t\t// columns.splice(\r\n\t\t\t\t// \tcolumns.findIndex((c) => c.accessorKey === accessorKey) + 1,\r\n\t\t\t\t// \t0,\r\n\t\t\t\t// \tcol,\r\n\t\t\t\t// );\r\n\t\t\t\tif (insertPosition === \"before\") {\r\n\t\t\t\t\tcolumns.splice(\r\n\t\t\t\t\t\t// @ts-expect-error - accessorKey is not always defined and\r\n\t\t\t\t\t\tcolumns.findIndex((c) => c.accessorKey === accessorKey),\r\n\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\t\tcol,\r\n\t\t\t\t\t);\r\n\t\t\t\t} else if (insertPosition === \"after\") {\r\n\t\t\t\t\tcolumns.splice(\r\n\t\t\t\t\t\t// @ts-expect-error - accessorKey is not always defined and\r\n\t\t\t\t\t\tcolumns.findIndex((c) => c.accessorKey === accessorKey) + 1,\r\n\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\t\tcol,\r\n\t\t\t\t\t);\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\tcolumns.push(col);\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\tcolumns.push(col);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn columns;\r\n};\r\n","import { flexRender } from \"@tanstack/react-table\";\r\nimport type { z } from \"zod\";\r\nimport useAutoTableData from \"./hooks/useAutoTableData\";\r\nimport type { RawAutoTableProps } from \"./types/AutoTable-types\";\r\n\r\nexport default function RawAutoTable<T extends z.ZodTypeAny>(\r\n\tprops: RawAutoTableProps<T>,\r\n) {\r\n\tconst { table, Component } = useAutoTableData(props);\r\n\tconst {\r\n\t\tonRowClick,\r\n\t\tisActionColumnComponentEnabled,\r\n\t\tactionColumnComponent: ActionColumnComponent,\r\n\t\tactionHeaderComponent: ActionHeaderComponent,\r\n\t\textraCustomColumns,\r\n\t\tisExtraCustomColumnsEnabled,\r\n\t} = props;\r\n\treturn (\r\n\t\t<Component.Table>\r\n\t\t\t<Component.TableTHead>\r\n\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\r\n\t\t\t\t\t<Component.TableTR key={headerGroup.id}>\r\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\r\n\t\t\t\t\t\t\t<Component.TableTH key={header.id}>\r\n\t\t\t\t\t\t\t\t{header.isPlaceholder\r\n\t\t\t\t\t\t\t\t\t? null\r\n\t\t\t\t\t\t\t\t\t: flexRender(\r\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\r\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</Component.TableTH>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t{isActionColumnComponentEnabled && (\r\n\t\t\t\t\t\t\t<Component.TableTH>\r\n\t\t\t\t\t\t\t\t{ActionHeaderComponent ? (\r\n\t\t\t\t\t\t\t\t\t<ActionHeaderComponent defaultName=\"Action\" />\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\"Action\"\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</Component.TableTH>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</Component.TableTR>\r\n\t\t\t\t))}\r\n\t\t\t</Component.TableTHead>\r\n\t\t\t<Component.TableTBody>\r\n\t\t\t\t{table.getRowModel().rows.map((row) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<Component.TableTR key={row.id}>\r\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<Component.TableTD\r\n\t\t\t\t\t\t\t\t\t\tkey={cell.id}\r\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\t\t\tif (isExtraCustomColumnsEnabled) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t// check if rowClick is Allowed for the extra custom columns\r\n\t\t\t\t\t\t\t\t\t\t\t\tconst disableOnRowClick = extraCustomColumns?.some(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t(column) => column.disableOnRowClick,\r\n\t\t\t\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableOnRowClick) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\tif (onRowClick) {\r\n\t\t\t\t\t\t\t\t\t\t\t\tonRowClick?.(row.original);\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n\t\t\t\t\t\t\t\t\t</Component.TableTD>\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t{isActionColumnComponentEnabled && (\r\n\t\t\t\t\t\t\t\t<Component.TableTD>\r\n\t\t\t\t\t\t\t\t\t{ActionColumnComponent ? (\r\n\t\t\t\t\t\t\t\t\t\t<ActionColumnComponent row={row.original} />\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\"Please provide a component for the action column\"\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</Component.TableTD>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</Component.TableTR>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</Component.TableTBody>\r\n\t\t</Component.Table>\r\n\t);\r\n}\r\n"],"names":["defaultComponents","text","value","_jsx","_Fragment","children","number","enum","image","date","boolean","Table","props","TableTBody","TableTD","TableTH","TableTHead","TableTR","multi_enum","multi_string","multi_number","multi_date","multi_boolean","ComponentContext","createContext","useComponentContext","useContext","decodeFieldCustomizer","fieldCustomizer","decodeData","JSON","parse","description","success","useAutoTableData","schema","replaceColumns","data","changePositionOfFields","extraCustomColumns","columns","fields","Components","replaceMap","Map","col","accessorKey","set","map","field","key","has","get","componentKey","type","getComponentKey","Component","header","name","isChangeLabel","label","split","word","charAt","toUpperCase","slice","join","cell","getValue","row","rawData","original","processedValue","Date","toISOString","defaultValue","enums","title","stringify","undefined","some","f","push","length","insertPosition","splice","findIndex","c","useGenerateColumns","useMemo","zodAutoTable","ZodTableClassed","changeJsonFieldPositions","convertToTableUseableFormat","table","useReactTable","getCoreRowModel","components","jsx","Provider","RawAutoTable","onRowClick","isActionColumnComponentEnabled","actionColumnComponent","ActionColumnComponent","actionHeaderComponent","ActionHeaderComponent","isExtraCustomColumnsEnabled","_jsxs","getHeaderGroups","headerGroup","headers","isPlaceholder","flexRender","column","columnDef","getContext","id","defaultName","getRowModel","rows","getVisibleCells","onClick","disableOnRowClick"],"mappings":"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"}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import{createContext as r,useContext as l,useMemo as a}from"react";import{useReactTable as o,getCoreRowModel as i,flexRender as c}from"@tanstack/react-table";import{ZodTableClassed as s}from"zod-helper";const u={text:({value:t})=>e(n,{children:t}),number:({value:t})=>e(n,{children:t}),enum:({value:t})=>e(n,{children:t}),image:({value:t})=>e(n,{children:t}),date:({value:t})=>e(n,{children:t}),boolean:({value:t})=>e(n,{children:t}),Table:n=>e("table",{...n,children:n.children}),TableTBody:({children:n,...t})=>e("tbody",{...t,children:n}),TableTD:({children:n,...t})=>e("td",{...t,children:n}),TableTH:({children:n,...t})=>e("th",{...t,children:n}),TableTHead:({children:n,...t})=>e("thead",{...t,children:n}),TableTR:({children:n,...t})=>e("tr",{...t,children:n}),multi_enum:({value:t})=>e(n,{children:t}),multi_string:({value:t})=>e(n,{children:t}),multi_number:({value:t})=>e(n,{children:t}),multi_date:({value:t})=>e(n,{children:t}),multi_boolean:({value:t})=>e(n,{children:t})},d=r(u),useComponentContext=()=>l(d),AutoTableComponentsProvider=({children:n,components:t})=>{const r={...u,...t};return e(d.Provider,{value:r,children:n})},decodeFieldCustomizer=e=>{try{return{decodeData:JSON.parse(e),description:null,success:!0}}catch{return{decodeData:null,description:e,success:!1}}};function useAutoTableData({schema:t,replaceColumns:r=[],data:l,changePositionOfFields:c,extraCustomColumns:u=[]}){const d=((t,r,l)=>{const a=useComponentContext(),o=new Map;for(const e of r)"accessorKey"in e&&"string"==typeof e.accessorKey&&o.set(e.accessorKey,e);const i=t.map((t=>{const r=t.key;if(o.has(r))return o.get(r);const l=(e=>{switch(e){case"date":return"date";case"enum":return"enum";case"image":return"image";case"number":return"number";case"string":return"text";case"boolean":return"boolean";case"multi-string":return"multi_string";case"multi-number":return"multi_number";case"multi-date":return"multi_date";case"multi-boolean":return"multi_boolean";case"multi-enum":return"multi_enum"}})(t.type),i=a[l],{decodeData:c}=decodeFieldCustomizer(t.description??"");return{header:(s=c?.isChangeLabel?c.label??r:r,s.split(".").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join(" ")),accessorKey:r,cell:({getValue:l,row:a})=>{const o=l(),s=a.original;let u=o;return o instanceof Date&&(u=o.toISOString()),i?e(i,{value:u,rawData:s,defaultValue:t.enums,title:r,description:t.description,...c}):o instanceof Date?e(n,{children:o.toISOString()}):e(n,{children:JSON.stringify(o)})}};var s}));for(const e of r){const n="accessorKey"in e&&"string"==typeof e.accessorKey?e.accessorKey:void 0;n&&!t.some((e=>e.key===n))&&i.push(e)}if(l&&l.length>0)for(const e of l){const[n,t=null]=e.insertPosition?.split(":")??[];n&&t?"before"===t?i.splice(i.findIndex((e=>e.accessorKey===n)),0,e):"after"===t?i.splice(i.findIndex((e=>e.accessorKey===n))+1,0,e):i.push(e):i.push(e)}return i})(a((()=>{const e=new s(t);return c&&e.changeJsonFieldPositions(c),{columns:e.convertToTableUseableFormat()}}),[c,t]).columns,r,u);return{table:o({data:l,columns:d,getCoreRowModel:i()}),Component:useComponentContext()}}function RawAutoTable(n){const{table:r,Component:l}=useAutoTableData(n),{onRowClick:a,isActionColumnComponentEnabled:o,actionColumnComponent:i,actionHeaderComponent:s,extraCustomColumns:u,isExtraCustomColumnsEnabled:d}=n;return t(l.Table,{children:[e(l.TableTHead,{children:r.getHeaderGroups().map((n=>t(l.TableTR,{children:[n.headers.map((n=>e(l.TableTH,{children:n.isPlaceholder?null:c(n.column.columnDef.header,n.getContext())},n.id))),o&&e(l.TableTH,{children:s?e(s,{defaultName:"Action"}):"Action"})]},n.id)))}),e(l.TableTBody,{children:r.getRowModel().rows.map((n=>t(l.TableTR,{children:[n.getVisibleCells().map((t=>e(l.TableTD,{onClick:()=>{if(d){const e=u?.some((e=>e.disableOnRowClick));if(e)return}a&&a?.(n.original)},children:c(t.column.columnDef.cell,t.getContext())},t.id))),o&&e(l.TableTD,{children:i?e(i,{row:n.original}):"Please provide a component for the action column"})]},n.id)))})]})}export{AutoTableComponentsProvider,RawAutoTable,decodeFieldCustomizer};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../package/auto-table/context/useComponentContext.tsx","../package/auto-table/utils/FieldChanger.tsx","../package/auto-table/hooks/useAutoTableData.tsx","../package/auto-table/core/useGenerate-columns.tsx","../package/auto-table/index.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\r\nimport { type ReactNode, createContext, useContext } from \"react\";\r\n\r\nimport type {\r\n\tAutoTableComponentContextType,\r\n\tTableType,\r\n\tTable_TBody_Type,\r\n\tTable_TD_Type,\r\n\tTable_TH_Type,\r\n\tTable_THead_Type,\r\n\tTable_TR_Type,\r\n} from \"../types/base-components\";\r\n\r\nconst defaultComponents: AutoTableComponentContextType = {\r\n\ttext: ({ value }) => <>{value}</>,\r\n\tnumber: ({ value }) => <>{value}</>,\r\n\tenum: ({ value }) => <>{value}</>,\r\n\timage: ({ value }) => <>{value}</>,\r\n\tdate: ({ value }) => <>{value}</>,\r\n\tboolean: ({ value }) => <>{value}</>,\r\n\tTable: (props: TableType) => <table {...props}>{props.children}</table>,\r\n\tTableTBody: ({ children, ...props }: Table_TBody_Type) => (\r\n\t\t<tbody {...props}>{children}</tbody>\r\n\t),\r\n\tTableTD: ({ children, ...props }: Table_TD_Type) => (\r\n\t\t<td {...props}>{children}</td>\r\n\t),\r\n\tTableTH: ({ children, ...props }: Table_TH_Type) => (\r\n\t\t<th {...props}>{children}</th>\r\n\t),\r\n\tTableTHead: ({ children, ...props }: Table_THead_Type) => (\r\n\t\t<thead {...props}>{children}</thead>\r\n\t),\r\n\tTableTR: ({ children, ...props }: Table_TR_Type) => (\r\n\t\t<tr {...props}>{children}</tr>\r\n\t),\r\n\tmulti_enum: ({ value }) => <>{value}</>,\r\n\tmulti_string: ({ value }) => <>{value}</>,\r\n\tmulti_number: ({ value }) => <>{value}</>,\r\n\tmulti_date: ({ value }) => <>{value}</>,\r\n\tmulti_boolean: ({ value }) => <>{value}</>,\r\n};\r\n\r\nconst ComponentContext =\r\n\tcreateContext<AutoTableComponentContextType>(defaultComponents);\r\n\r\nexport const useComponentContext = () => useContext(ComponentContext);\r\n\r\ntype ComponentProviderProps = {\r\n\tchildren: ReactNode;\r\n\tcomponents?: Partial<AutoTableComponentContextType>;\r\n};\r\n\r\nexport const AutoTableComponentsProvider = ({\r\n\tchildren,\r\n\tcomponents,\r\n}: ComponentProviderProps) => {\r\n\tconst value = {\r\n\t\t...defaultComponents,\r\n\t\t...components,\r\n\t};\r\n\r\n\treturn (\r\n\t\t<ComponentContext.Provider value={value}>\r\n\t\t\t{children}\r\n\t\t</ComponentContext.Provider>\r\n\t);\r\n};\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\ninterface FieldChangerProps {\r\n\tisChangeLabel?: boolean;\r\n\tlabel?: string;\r\n\tisImage?: boolean;\r\n\taddValueTextAfter?: string;\r\n\taddValueTextBefore?: string;\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\trandomData?: Record<string, any>;\r\n}\r\n\r\nexport default function FieldCustomizer(props: FieldChangerProps) {\r\n\treturn JSON.stringify({\r\n\t\tcustom: true,\r\n\t\t...props,\r\n\t});\r\n}\r\n\r\nexport const decodeFieldCustomizer = (\r\n\tfieldCustomizer: string,\r\n): {\r\n\tdecodeData: FieldChangerProps | null;\r\n\tdescription: string | null;\r\n\tsuccess: boolean;\r\n} => {\r\n\ttry {\r\n\t\treturn {\r\n\t\t\tdecodeData: JSON.parse(fieldCustomizer) as FieldChangerProps,\r\n\t\t\tdescription: null,\r\n\t\t\tsuccess: true,\r\n\t\t};\r\n\t} catch {\r\n\t\treturn {\r\n\t\t\tdecodeData: null,\r\n\t\t\tdescription: fieldCustomizer,\r\n\t\t\tsuccess: false,\r\n\t\t};\r\n\t}\r\n};\r\n","import { getCoreRowModel, useReactTable } from \"@tanstack/react-table\";\r\nimport { useMemo } from \"react\";\r\nimport type { z } from \"zod\";\r\nimport { ZodTableClassed } from \"zod-helper\";\r\nimport { useComponentContext } from \"../context/useComponentContext\";\r\nimport { useGenerateColumns } from \"../core/useGenerate-columns\";\r\nimport type { RawAutoTableProps } from \"../types/AutoTable-types\";\r\n\r\nexport default function useAutoTableData<T extends z.ZodTypeAny>({\r\n\tschema,\r\n\treplaceColumns = [],\r\n\tdata,\r\n\tchangePositionOfFields,\r\n\textraCustomColumns = [],\r\n}: RawAutoTableProps<T>) {\r\n\tconst zodAutoTable = useMemo(() => {\r\n\t\tconst zodAutoTable = new ZodTableClassed(schema);\r\n\t\tif (changePositionOfFields) {\r\n\t\t\tzodAutoTable.changeJsonFieldPositions(changePositionOfFields);\r\n\t\t}\r\n\t\treturn {\r\n\t\t\tcolumns: zodAutoTable.convertToTableUseableFormat(),\r\n\t\t};\r\n\t}, [changePositionOfFields, schema]);\r\n\tconst columns = useGenerateColumns(\r\n\t\tzodAutoTable.columns,\r\n\t\treplaceColumns,\r\n\t\textraCustomColumns,\r\n\t);\r\n\tconst table = useReactTable({\r\n\t\tdata,\r\n\t\tcolumns,\r\n\t\tgetCoreRowModel: getCoreRowModel(),\r\n\t});\r\n\tconst Component = useComponentContext();\r\n\treturn { table, Component };\r\n}\r\n","/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport type { FlattenSchemaWithKeyAndTypes } from \"zod-helper\";\r\nimport { useComponentContext } from \"../context/useComponentContext\";\r\nimport type { ExtraColumnConfig } from \"../types/AutoTable-types\";\r\nimport { decodeFieldCustomizer } from \"../utils/FieldChanger\";\r\ntype fieldDataType =\r\n\t| \"string\"\r\n\t| \"number\"\r\n\t| \"boolean\"\r\n\t| \"date\"\r\n\t| \"enum\"\r\n\t| \"image\"\r\n\t| \"multi-string\"\r\n\t| \"multi-number\"\r\n\t| \"multi-date\"\r\n\t| \"multi-boolean\"\r\n\t| \"multi-enum\";\r\n\r\nconst getComponentKey = (type: fieldDataType) => {\r\n\tswitch (type) {\r\n\t\tcase \"date\":\r\n\t\t\treturn \"date\";\r\n\t\tcase \"enum\":\r\n\t\t\treturn \"enum\";\r\n\t\tcase \"image\":\r\n\t\t\treturn \"image\";\r\n\t\tcase \"number\":\r\n\t\t\treturn \"number\";\r\n\t\tcase \"string\":\r\n\t\t\treturn \"text\";\r\n\t\tcase \"boolean\":\r\n\t\t\treturn \"boolean\";\r\n\t\tcase \"multi-string\":\r\n\t\t\treturn \"multi_string\";\r\n\t\tcase \"multi-number\":\r\n\t\t\treturn \"multi_number\";\r\n\t\tcase \"multi-date\":\r\n\t\t\treturn \"multi_date\";\r\n\t\tcase \"multi-boolean\":\r\n\t\t\treturn \"multi_boolean\";\r\n\t\tcase \"multi-enum\":\r\n\t\t\treturn \"multi_enum\";\r\n\t}\r\n};\r\nconst getColumnName = (name: string) => {\r\n\t// name to Name , address.street to Address Street , address.owner.name to Address Owner Name\r\n\tconst words = name.split(\".\");\r\n\treturn words\r\n\t\t.map((word) => word.charAt(0).toUpperCase() + word.slice(1))\r\n\t\t.join(\" \");\r\n};\r\nexport const useGenerateColumns = (\r\n\tfields: FlattenSchemaWithKeyAndTypes[],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\treplaceColumns: ColumnDef<any>[],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\textraCustomColumns: ExtraColumnConfig<any>[\"extraCustomColumns\"],\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n): ColumnDef<any>[] => {\r\n\tconst Components = useComponentContext();\r\n\t// Step 1: Create a map of replace columns where accessorKey exists\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\tconst replaceMap = new Map<string, ColumnDef<any>>();\r\n\tfor (const col of replaceColumns) {\r\n\t\tif (\"accessorKey\" in col && typeof col.accessorKey === \"string\") {\r\n\t\t\treplaceMap.set(col.accessorKey, col);\r\n\t\t}\r\n\t}\r\n\r\n\t// Step 2: Generate columns from fields\r\n\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\tconst columns: ColumnDef<any>[] = fields.map((field) => {\r\n\t\tconst key = field.key;\r\n\t\tif (replaceMap.has(key)) {\r\n\t\t\t// biome-ignore lint/style/noNonNullAssertion: <explanation>\r\n\t\t\treturn replaceMap.get(key)!;\r\n\t\t}\r\n\r\n\t\tconst componentKey = getComponentKey(field.type as fieldDataType);\r\n\t\t// biome-ignore lint/suspicious/noExplicitAny: <explanation>\r\n\t\tconst Component = Components[componentKey] as React.FC<any>;\r\n\t\tconst { decodeData } = decodeFieldCustomizer(field.description ?? \"\");\r\n\r\n\t\treturn {\r\n\t\t\theader: getColumnName(\r\n\t\t\t\tdecodeData?.isChangeLabel ? (decodeData.label ?? key) : key,\r\n\t\t\t),\r\n\t\t\taccessorKey: key,\r\n\t\t\tcell: ({ getValue, row }) => {\r\n\t\t\t\tconst value = getValue();\r\n\t\t\t\tconst rawData = row.original;\r\n\r\n\t\t\t\t// Convert Date objects to strings before passing to components\r\n\t\t\t\tlet processedValue = value;\r\n\t\t\t\tif (value instanceof Date) {\r\n\t\t\t\t\tprocessedValue = value.toISOString();\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (!Component) {\r\n\t\t\t\t\t// Handle Date objects or other non-renderable values\r\n\t\t\t\t\tif (value instanceof Date) {\r\n\t\t\t\t\t\treturn <>{value.toISOString()}</>;\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn <>{JSON.stringify(value)}</>;\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<Component\r\n\t\t\t\t\t\tvalue={processedValue}\r\n\t\t\t\t\t\trawData={rawData}\r\n\t\t\t\t\t\tdefaultValue={field.enums}\r\n\t\t\t\t\t\ttitle={key}\r\n\t\t\t\t\t\tdescription={field.description}\r\n\t\t\t\t\t\t{...decodeData}\r\n\t\t\t\t\t/>\r\n\t\t\t\t);\r\n\t\t\t},\r\n\t\t};\r\n\t});\r\n\r\n\t// Step 3: Add additional replaceColumns that don't conflict with fields\r\n\tfor (const col of replaceColumns) {\r\n\t\tconst key =\r\n\t\t\t\"accessorKey\" in col && typeof col.accessorKey === \"string\"\r\n\t\t\t\t? col.accessorKey\r\n\t\t\t\t: undefined;\r\n\t\tif (key && !fields.some((f) => f.key === key)) {\r\n\t\t\tcolumns.push(col);\r\n\t\t}\r\n\t}\r\n\tif (extraCustomColumns && extraCustomColumns.length > 0) {\r\n\t\tfor (const col of extraCustomColumns) {\r\n\t\t\t// insertPosition split by : and get the first part as the accessorKey and the second part as the insertPosition after,before\r\n\t\t\tconst [accessorKey, insertPosition = null] =\r\n\t\t\t\t// @ts-expect-error - insertPosition is not always defined and\r\n\t\t\t\tcol.insertPosition?.split(\":\") ?? [];\r\n\t\t\t// if accessorKey and insertPosition both exist then insert the column after the accessorKey\r\n\t\t\tif (accessorKey && insertPosition) {\r\n\t\t\t\t// columns.splice(\r\n\t\t\t\t// \tcolumns.findIndex((c) => c.accessorKey === accessorKey) + 1,\r\n\t\t\t\t// \t0,\r\n\t\t\t\t// \tcol,\r\n\t\t\t\t// );\r\n\t\t\t\tif (insertPosition === \"before\") {\r\n\t\t\t\t\tcolumns.splice(\r\n\t\t\t\t\t\t// @ts-expect-error - accessorKey is not always defined and\r\n\t\t\t\t\t\tcolumns.findIndex((c) => c.accessorKey === accessorKey),\r\n\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\t\tcol,\r\n\t\t\t\t\t);\r\n\t\t\t\t} else if (insertPosition === \"after\") {\r\n\t\t\t\t\tcolumns.splice(\r\n\t\t\t\t\t\t// @ts-expect-error - accessorKey is not always defined and\r\n\t\t\t\t\t\tcolumns.findIndex((c) => c.accessorKey === accessorKey) + 1,\r\n\t\t\t\t\t\t0,\r\n\t\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\t\tcol,\r\n\t\t\t\t\t);\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\t\tcolumns.push(col);\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t// @ts-expect-error - col is not always defined and\r\n\t\t\t\tcolumns.push(col);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\treturn columns;\r\n};\r\n","import { flexRender } from \"@tanstack/react-table\";\r\nimport type { z } from \"zod\";\r\nimport useAutoTableData from \"./hooks/useAutoTableData\";\r\nimport type { RawAutoTableProps } from \"./types/AutoTable-types\";\r\n\r\nexport default function RawAutoTable<T extends z.ZodTypeAny>(\r\n\tprops: RawAutoTableProps<T>,\r\n) {\r\n\tconst { table, Component } = useAutoTableData(props);\r\n\tconst {\r\n\t\tonRowClick,\r\n\t\tisActionColumnComponentEnabled,\r\n\t\tactionColumnComponent: ActionColumnComponent,\r\n\t\tactionHeaderComponent: ActionHeaderComponent,\r\n\t\textraCustomColumns,\r\n\t\tisExtraCustomColumnsEnabled,\r\n\t} = props;\r\n\treturn (\r\n\t\t<Component.Table>\r\n\t\t\t<Component.TableTHead>\r\n\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\r\n\t\t\t\t\t<Component.TableTR key={headerGroup.id}>\r\n\t\t\t\t\t\t{headerGroup.headers.map((header) => (\r\n\t\t\t\t\t\t\t<Component.TableTH key={header.id}>\r\n\t\t\t\t\t\t\t\t{header.isPlaceholder\r\n\t\t\t\t\t\t\t\t\t? null\r\n\t\t\t\t\t\t\t\t\t: flexRender(\r\n\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\r\n\t\t\t\t\t\t\t\t\t\t\theader.getContext(),\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</Component.TableTH>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t{isActionColumnComponentEnabled && (\r\n\t\t\t\t\t\t\t<Component.TableTH>\r\n\t\t\t\t\t\t\t\t{ActionHeaderComponent ? (\r\n\t\t\t\t\t\t\t\t\t<ActionHeaderComponent defaultName=\"Action\" />\r\n\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\"Action\"\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</Component.TableTH>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</Component.TableTR>\r\n\t\t\t\t))}\r\n\t\t\t</Component.TableTHead>\r\n\t\t\t<Component.TableTBody>\r\n\t\t\t\t{table.getRowModel().rows.map((row) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<Component.TableTR key={row.id}>\r\n\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => {\r\n\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t<Component.TableTD\r\n\t\t\t\t\t\t\t\t\t\tkey={cell.id}\r\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\t\t\tif (isExtraCustomColumnsEnabled) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t// check if rowClick is Allowed for the extra custom columns\r\n\t\t\t\t\t\t\t\t\t\t\t\tconst disableOnRowClick = extraCustomColumns?.some(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t(column) => column.disableOnRowClick,\r\n\t\t\t\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableOnRowClick) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\tif (onRowClick) {\r\n\t\t\t\t\t\t\t\t\t\t\t\tonRowClick?.(row.original);\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n\t\t\t\t\t\t\t\t\t</Component.TableTD>\r\n\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t{isActionColumnComponentEnabled && (\r\n\t\t\t\t\t\t\t\t<Component.TableTD>\r\n\t\t\t\t\t\t\t\t\t{ActionColumnComponent ? (\r\n\t\t\t\t\t\t\t\t\t\t<ActionColumnComponent row={row.original} />\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\"Please provide a component for the action column\"\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</Component.TableTD>\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</Component.TableTR>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</Component.TableTBody>\r\n\t\t</Component.Table>\r\n\t);\r\n}\r\n"],"names":["defaultComponents","text","value","_jsx","_Fragment","children","number","enum","image","date","boolean","Table","props","TableTBody","TableTD","TableTH","TableTHead","TableTR","multi_enum","multi_string","multi_number","multi_date","multi_boolean","ComponentContext","createContext","useComponentContext","useContext","AutoTableComponentsProvider","components","Provider","decodeFieldCustomizer","fieldCustomizer","decodeData","JSON","parse","description","success","useAutoTableData","schema","replaceColumns","data","changePositionOfFields","extraCustomColumns","columns","fields","Components","replaceMap","Map","col","accessorKey","set","map","field","key","has","get","componentKey","type","getComponentKey","Component","header","name","isChangeLabel","label","split","word","charAt","toUpperCase","slice","join","cell","getValue","row","rawData","original","processedValue","Date","toISOString","defaultValue","enums","title","stringify","undefined","some","f","push","length","insertPosition","splice","findIndex","c","useGenerateColumns","useMemo","zodAutoTable","ZodTableClassed","changeJsonFieldPositions","convertToTableUseableFormat","table","useReactTable","getCoreRowModel","RawAutoTable","onRowClick","isActionColumnComponentEnabled","actionColumnComponent","ActionColumnComponent","actionHeaderComponent","ActionHeaderComponent","isExtraCustomColumnsEnabled","_jsxs","getHeaderGroups","headerGroup","headers","isPlaceholder","flexRender","column","columnDef","getContext","id","defaultName","getRowModel","rows","getVisibleCells","onClick","disableOnRowClick"],"mappings":"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"}

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "raw-auto-table-zod",
+	"description": "Auto-generate typed React tables from Zod schemas",
+	"version": "0.0.2",
+	"main": "dist/index.js",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"rollup": "rollup -c --bundleConfigAsCjs",
+		"build": "rollup -c --bundleConfigAsCjs",
+		"prepare": "npm run build"
+	},
+	"dependencies": {
+		"zod-helper": "^0.0.14"
+	},
+	"peerDependencies": {
+		"@tanstack/react-table": ">=1.0.0",
+		"react": ">=17.0.0",
+		"zod": ">=3.0.0"
+	},
+	"peerDependenciesMeta": {
+		"@tanstack/react-form": {
+			"optional": false
+		}
+	},
+	"devDependencies": {
+		"@rollup/plugin-commonjs": "^28.0.3",
+		"@rollup/plugin-node-resolve": "^16.0.1",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@rollup/plugin-typescript": "^12.1.2",
+		"@tanstack/react-form": "^1.3.3",
+		"@types/react": "^19.1.2",
+		"react": "^19.1.0",
+		"rollup": "^4.40.0",
+		"rollup-plugin-dts": "^6.2.1",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"tslib": "^2.8.1",
+		"typescript": "^5.8.3",
+		"zod": "^3.24.2"
+	},
+	"keywords": [
+		"zod",
+		"react",
+		"table",
+		"auto",
+		"typescript",
+		"table-generator"
+	],
+	"author": "Atul Kumar",
+	"license": "ISC",
+	"files": ["dist"]
+}