sera-components 1.1.2 → 1.1.4

package/dist/components/src/table/makeColumns.d.ts

@@ -0,0 +1,54 @@
+import { DataProperty, DB, DraftEmbeddedRecord, DraftRecord, EmbeddedSchema, GenericEmbeddedRecord, GenericRecord, ObjectProperty, Schema, SchemaType } from '../../../db/src/index.ts';
+import { DisplayInterface, EntityRoutes } from '../data/display';
+type DOP = DataProperty | ObjectProperty;
+/**
+ * Represents a column configuration for a table component.
+ */
+export interface SeraColumn<R> {
+    key: string;
+    title: React.ReactNode;
+    accessorFn: (record: R) => any;
+    render: (record: R) => React.ReactNode;
+}
+/**
+ * Creates a table column configuration for displaying entity properties in a data table.
+ *
+ * @template R - The type of the record/row data
+ * @param db - The database instance used for data operations
+ * @param entityRoutes - Configuration object containing routing information for entities
+ * @param property - The data object property (DOP) that defines the column's data type and behavior
+ * @param nestedKey - Optional string indicating if this is a nested property path
+ * @returns A SeraColumn configuration object with key, title, accessor function, and render component
+ *
+ * @throws {Error} When no display component is found for the specified datatype
+ *
+ * @example
+ * ```tsx
+ * const column = makeTableColumn(db, routes, userNameProperty);
+ * // Returns a column that displays user names with appropriate formatting
+ * ```
+ *
+ * @remarks
+ * The function automatically selects the appropriate display component based on:
+ * - Object properties with cardinality "1:N" or "N:N" use MultiForeignKeyDisplay
+ * - Object properties with other cardinalities use SingleForeignKeyDisplay
+ * - Non-object properties use components from DataType2DisplayComponent mapping
+ */
+export declare function makeTableColumn<R>(db: DB, entityRoutes: EntityRoutes, property: DOP, { title, nestedKey, component, }?: {
+    title?: React.ReactNode;
+    nestedKey?: string;
+    component?: React.ComponentType<DisplayInterface<any>>;
+}): SeraColumn<R>;
+export declare function makeTableColumnFromNestedProperty<R>(db: DB, entityRoutes: EntityRoutes, property: DOP, nestedProperty: DOP, { title, nestedKey, component, }?: {
+    title?: React.ReactNode;
+    nestedKey?: string;
+    component?: React.ComponentType<DisplayInterface<any>>;
+}): SeraColumn<R>;
+export declare function makeTableColumns<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>, OR>(db: DB, schema: Schema<ID, R, DR, PF, F, ST> | EmbeddedSchema<R, DR, PF, F>, entityRoutes: EntityRoutes, selectedColumns: (PF | SeraColumn<OR>)[], options?: {
+    nestedKey?: string;
+}): SeraColumn<OR>[];
+export declare function makeEmbeddedTableColumns<R extends GenericEmbeddedRecord<DR>, DR extends DraftEmbeddedRecord, PF extends keyof R, F extends keyof DR, OR>(db: DB, schema: EmbeddedSchema<R, DR, PF, F>, entityRoutes: EntityRoutes, selectedColumns?: (PF | SeraColumn<OR>)[], options?: {
+    nestedKey?: string;
+}): SeraColumn<OR>[];
+export declare function isSeraColumn<R>(column: SeraColumn<R> | any): column is SeraColumn<R>;
+export {};

package/dist/components/src/view/MultiTabView.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/src/view/View.d.ts

@@ -0,0 +1,20 @@
+import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Schema, SchemaType, Table } from '../../../db/src/index.ts';
+import { DisplayInterface, EntityRoutes } from '../data/display';
+export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+    name?: string;
+    fields: (ST["allProperties"] | {
+        prop: ST["allProperties"];
+        display: React.ComponentType<DisplayInterface<any>>;
+    } | ((store: Table<ID, R, DR>, record: R) => React.ReactNode))[][];
+}
+export interface SeraViewProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+    schema: Schema<ID, R, DR, PF, F, ST>;
+    store: Table<ID, R, DR>;
+    fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
+    record: R;
+    styles?: React.CSSProperties;
+    className?: string;
+    entityRoutes: EntityRoutes;
+}
+export declare const SeraView: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraViewProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export declare function makeFieldDisplay<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>(props: (DataProperty | ObjectProperty)[], entityRoutes: EntityRoutes, display?: React.ComponentType<DisplayInterface<any>>): (store: Table<ID, R, DR>, record: R) => React.ReactNode;

package/dist/components/src/view/ViewItem.d.ts

@@ -0,0 +1,12 @@
+import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table } from '../../../db/src/index.ts';
+import { DisplayInterface, EntityRoutes } from '../data';
+export interface ViewItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
+    store: Table<ID, R, DR>;
+    record: R;
+    property: DataProperty | ObjectProperty;
+    DisplayComponent: React.ComponentType<DisplayInterface<any>>;
+    entityRoutes: EntityRoutes;
+}
+export declare const ViewItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, DisplayComponent, entityRoutes, }: ViewItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/dist/components/src/view/ViewNestedPropertyItem.d.ts

@@ -0,0 +1,43 @@
+import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table } from '../../../db/src/index.ts';
+import { DisplayInterface, EntityRoutes } from '../data';
+export interface ViewNestedPropertyItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
+    store: Table<ID, R, DR>;
+    record: R;
+    properties: (DataProperty | ObjectProperty)[];
+    DisplayComponent: React.ComponentType<DisplayInterface<any>>;
+    entityRoutes: EntityRoutes;
+}
+/**
+ * A component that renders a nested property item.
+ *
+ * This component traverses through a chain of properties to display a deeply nested
+ * property value from a record. It shows the last property label and renders the value
+ * using the provided DisplayComponent.
+ *
+ * @template ID - The type of the record identifier (string or number)
+ * @template R - The type of the generic record extending GenericRecord
+ * @template DR - The type of the draft record extending DraftRecord
+ * @template PF - The property field type constrained to keys of R
+ * @template F - The field type constrained to keys of DR
+ *
+ * @param props - The component properties
+ * @param props.store - The table store containing the record data
+ * @param props.record - The record being viewed
+ * @param props.properties - Array of properties defining the path to the nested value
+ * @param props.DisplayComponent - React component used to render the field value
+ *
+ * @returns A JSX element displaying the nested property with its label and value
+ *
+ * @example
+ * ```tsx
+ * <ViewNestedPropertyItem
+ *   store={userStore}
+ *   record={user}
+ *   properties={[addressProperty, streetProperty]}
+ *   DisplayComponent={TextDisplay}
+ * />
+ * ```
+ */
+export declare const ViewNestedPropertyItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, properties, DisplayComponent, entityRoutes, }: ViewNestedPropertyItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/dist/components/src/view/ViewTab.d.ts

@@ -0,0 +1,16 @@
+import { DraftRecord, GenericRecord, Schema, SchemaType, Table } from '../../../db/src/index.ts';
+import { FieldGroup } from './View';
+import { EntityRoutes } from '../data';
+export interface SeraViewTabProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+    schema: Schema<ID, R, DR, PF, F, ST>;
+    store: Table<ID, R, DR>;
+    fieldTabs: {
+        tabName: string;
+        fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
+    }[];
+    record: R;
+    tabStyles?: React.CSSProperties;
+    tabClassName?: string;
+    entityRoutes: EntityRoutes;
+}
+export declare const SeraViewTab: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraViewTabProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/src/view/index.d.ts

@@ -0,0 +1,2 @@
+export { SeraView, makeFieldDisplay } from './View';
+export { SeraViewTab } from './ViewTab';

package/dist/index.css

@@ -0,0 +1 @@
+._requiredLabelLeft_l5p83_1:before{color:#ff4d4f;content:"*";font-family:SimSun,sans-serif;display:inline-block;margin-inline-end:4px;line-height:1px;font-size:14px}._requiredLabelRight_l5p83_11:after{color:#ff4d4f;content:"*";font-family:SimSun,sans-serif;display:inline-block;margin-inline-start:4px;line-height:1px;font-size:14px}._pageSizeSelectorActive_1wv6j_1{color:var(--mantine-color-text);opacity:1}._pageSizeSelectorActive_1wv6j_1 .mantine-Menu-itemLabel .mantine-Text-root{font-weight:700!important}