@new-black/lyra 1.1.4 → 1.1.5

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

@@ -1,785 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Table } from "./table";
-import { IPokemon, Person } from "./table.stories.helpers";
-type Item = {
-    name: string;
-    id: string;
-    organization?: string;
-    status?: "Active" | "Inactive" | "Pending";
-    description?: string;
-    date?: string;
-    extraColumn1?: string;
-    extraColumn2?: string;
-};
-declare const meta: Meta<typeof Table<Item>>;
-export default meta;
-type Story = StoryObj<typeof Table<Item>>;
-/**
- * Default
- *
- * ```tsx
- * const items: Item[] = Array.from({ length: 50 }).map((_value, index) => ({
- *   name: `Item ${index}`,
- *   id: index.toString(),
- *   organization: `Org ${index}`,
- *   status: ["Active", "Inactive", "Pending"][
- *       Math.floor(Math.random() * 3)
- *     ] as Item["status"],
- *   description: `Description ${index}`,
- *   date: generateDateMinusXDays(index),
- *  }));
- *
- * const columns: TableColumnDef<Item>[] = [
- *  {
- *    header: "Name",
- *    accessorKey: "name",
- *    align: "start",
- *  },
- *  {
- *    header: "Organization",
- *    accessorKey: "organization",
- *  },
- *  {
- *    header: "Status",
- *    accessorKey: "status",
- *    cellType: "badge",
- *    cell: ({ cell }) => {
- *      switch (cell.getValue()) {
- *        case "Active":
- *          return <Badge variant="blue">Active</Badge>;
- *        case "Inactive":
- *          return <Badge variant="gray">Inactive</Badge>;
- *        case "Pending":
- *          return <Badge variant="orange">Pending</Badge>;
- *        default:
- *          return null;
- *      }
- *    },
- *  },
- *  {
- *    header: "Description",
- *    accessorKey: "description",
- *  },
- *  {
- *    header: "Date",
- *    accessorKey: "date",
- *  },
- *  {
- *    id: "actions",
- *    align: "end",
- *    cellType: "button",
- *    cell: () => (
- *      <ButtonGroup>
- *        <Button variant="icon" aria-label="Edit">
- *          <SvgIcon name="edit" />
- *        </Button>
- *        <Button variant="icon" aria-label="Delete">
- *          <SvgIcon name="delete" />
- *        </Button>
- *      </ButtonGroup>
- *  }
- * ];
- *
- * return (
- *  <Table
- *    data={items}
- *    columns={columns}
- *    selectionMode="multiple"
- *    aria-label="Table"
- *    onRowPress={(rowValue) => {
- *      console.log(rowValue);
- *    }}
- *  />
- * )
- * }
- * ```
- */
-export declare const Default: Story;
-/**
- *
- * ```tsx
- * const ControlledPagination = <T extends object>(args: TableProps<T>) => {
- *  const [start, setStart] = useState(0);
- *  const [limit, setLimit] = useState(10);
- *
- *  return (
- *    <Table
- *      {...args}
- *      start={start}
- *      setStart={setStart}
- *      limit={limit}
- *      setLimit={setLimit}
- *      total={args.total}
- *    />
- *  );
- * }
- * ```
- */
-export declare const ControlledPagination: Story;
-type AsyncStory = StoryObj<typeof Table<IPokemon>>;
-/**
- * ```tsx
- * <Table
- *  {...args}
- *  isLoading={isLoading}
- *  start={start}
- *  setStart={setStart}
- *  limit={limit}
- *  setLimit={setLimit}
- *  total={total}
- * />
- * ```
- */
-export declare const Async: AsyncStory;
-type AsyncWithDelayedLoadingStory = StoryObj<typeof Table<IPokemon>>;
-/**
- * ```tsx
- * <Table
- *  {...args}
- *  isLoading={isLoading}
- *  start={start}
- *  setStart={setStart}
- *  limit={limit}
- *  setLimit={setLimit}
- *  total={total}
- * />
- * ```
- */
-export declare const AsyncWithDelayedLoading: AsyncWithDelayedLoadingStory;
-/**
- * ```tsx
- * <Table
- *  {...args}
- *  isLoading={isLoading}
- *  showNext={!!next}
- *  showPrevious={!!previous}
- *  limit={limit}
- *  setLimit={setLimit}
- *  onNext={() => {}}
- *  onPrevious={() => {}}
- * />
- * ```
- */
-export declare const AsyncUncounted: AsyncStory;
-/**
- *
- * ```tsx
- * const ReorganizeColumnExample = (args: TableProps<Item>) => {
- *  const [active, setActive] = useState(false);
- *  // If your table has a select column, prefix the selected columns with "select"
- *  const [selectedColumns, setSelectedColumns] = useState([
- *    "select",
- *    ...args.columns.map((column) => column.id),
- *  ]);
- *
- *  return (
- *    <div className="bg-surface-secondary p-4">
- *      <div className="mb-4 flex items-center justify-between">
- *        <Text variant="heading-2">Reorganize example</Text>
- *        <Button variant="icon" onPress={() => setActive(true)} isDisabled={active}>
- *          <SvgIcon name="workspaces" />
- *        </Button>
- *      </div>
- *      <Card>
- *        <Table
- *          {...args}
- *          reorganizeColumns={{
- *            active,
- *            setActive,
- *            columnOrder: selectedColumns,
- *            onChangeOrderOfColumns: (newOrder) => {
- *              setSelectedColumns(newOrder);
- *            },
- *          }}
- *        />
- *      </Card>
- *    </div>
- *  );
- * };
- * ```
- */
-export declare const ReorganizeColumns: Story;
-/**
- * This example demonstrates how to use the reorganize columns feature with a load more function.
- *
- * ```tsx
- * const ReorganizeColumnWithLoadMoreExample = (args: TableProps<Item>) => {
- *   const [active, setActive] = useState(false);
- *   const [selectedColumns, setSelectedColumns] = useState([
- *     "select",
- *     ...args.columns.map((column) => column.id),
- *   ]);
- *   const [allColumns, setAllColumns] = useState(args.columns);
- *
- *   const loadMoreColumns = () => {
- *     // Simulating loading more columns
- *     const newColumns: TableColumnDef<Item>[] = [
- *       {
- *         header: "Extra Column 1",
- *         accessorKey: "extraColumn1",
- *         id: "extraColumn1",
- *       },
- *       {
- *         header: "Extra Column 2",
- *         accessorKey: "extraColumn2",
- *         id: "extraColumn2",
- *       },
- *     ];
- *     setAllColumns((prevColumns) => [...prevColumns, ...newColumns]);
- *   };
- *
- *   return (
- *     <div className="bg-surface-tertiary p-4">
- *       <div className="mb-4 flex items-center justify-between">
- *         <Text variant="heading-2">Reorganize with Load More example</Text>
- *         <Button variant="icon" onPress={() => setActive(true)} isDisabled={active}>
- *           <SvgIcon name="workspaces" />
- *         </Button>
- *       </div>
- *       <Card>
- *         <Table
- *           {...args}
- *           columns={allColumns}
- *           reorganizeColumns={{
- *             active,
- *             setActive,
- *             columnOrder: selectedColumns,
- *             onChangeOrderOfColumns: (newOrder) => {
- *               setSelectedColumns(newOrder);
- *             },
- *             onChangeOrderOfColumnsError: () => alert("Please select at least one column."),
- *             onLoadMore: loadMoreColumns,
- *           }}
- *         />
- *       </Card>
- *       <CodeBox data={{ selectedColumns }} />
- *     </div>
- *   );
- * };
- * ```
- */
-export declare const ReorganizeColumnsWithLoadMore: Story;
-/**
- * This example demonstrates how to use the reorganize columns feature with search functionality.
- *
- * ```tsx
- * const ReorganizeColumnWithSearchExample = (args: TableProps<Item>) => {
- *   const [active, setActive] = useState(false);
- *   const [selectedColumns, setSelectedColumns] = useState([
- *     "select",
- *     ...args.columns.map((column) => column.id),
- *   ]);
- *
- *   const [searchItems, setSearchItems] = useState(
- *     args.columns.map((item) => ({ value: item.id, label: item.header as string }))
- *   );
- *
- *   return (
- *     <div className="bg-surface-tertiary p-4">
- *       <div className="mb-4 flex items-center justify-between">
- *         <Text variant="heading-2">Reorganize with Search example</Text>
- *         <Button variant="icon" onPress={() => setActive(true)} isDisabled={active}>
- *           <SvgIcon name="workspaces" />
- *         </Button>
- *       </div>
- *       <Card>
- *         <Table
- *           {...args}
- *           columns={args.columns}
- *           reorganizeColumns={{
- *             active,
- *             setActive,
- *             columnOrder: selectedColumns,
- *             onChangeOrderOfColumns: (newOrder) => {
- *               setSelectedColumns(newOrder);
- *             },
- *             onChangeOrderOfColumnsError: () => alert("Please select at least one column."),
- *             searchItems,
- *             onQueryChange: (query) => {
- *               const filtered = args.columns
- *                 .map((item) => ({
- *                   value: item.id,
- *                   label: item.header as string,
- *                 }))
- *                 .filter((item) => {
- *                   return item.label.toLowerCase().includes(query?.toLowerCase() ?? "");
- *                 });
- *               setSearchItems(filtered);
- *             },
- *           }}
- *         />
- *       </Card>
- *       <CodeBox data={{ selectedColumns }} />
- *     </div>
- *   );
- * };
- * ```
- */
-export declare const ReorganizeColumnsWithSearch: Story;
-export declare const Empty: Story;
-type NestedStory = StoryObj<typeof Table<Person>>;
-/**
- * ```tsx
- * // Parses the nested data from the JSON file
- * // only needed for the Storybook example
- * function getNestedData(): Person[] {
- *   const data = parsePeople(NestedTableData);
- *   return data ?? [];
- * }
- *
- *
- * // The nested example dataset
- * const people = getNestedData();
- *
- * const NameDisplay = ({
- *   name,
- *   person,
- *   style,
- * }: {
- *   style: "compact" | "complex";
- *   name: string;
- *   person: Person;
- * }) =>
- *   style === "compact" ? (
- *     <div className="flex flex-row items-center gap-2 pt-1">
- *       <SvgIcon name={person.friends?.length ? "employees" : "profile"} />
- *       <Text>{name}</Text>
- *     </div>
- *   ) : (
- *     <div className="flex flex-row items-stretch gap-2">
- *       <img
- *         src={`https://picsum.photos/seed/${name}-${person.id}/200?random=100`}
- *         alt={name}
- *         className="h-12 w-12 rounded-xs"
- *       />
- *       <div className="flex flex-col gap-1">
- *         <Text>{name}</Text>
- *         <Text color="secondary">{person.country}</Text>
- *         <ul className="ms-4 list-disc">
- *           {person.traits.map((trait, index) => (
- *             <li key={`${person.id}-${trait}-${index}`}>
- *               <Text variant="body-small">{trait}</Text>
- *             </li>
- *           ))}
- *         </ul>
- *       </div>
- *     </div>
- *   );
- *
- * function NestedExample(args: TableProps<Person>) {
- *   const [start, setStart] = useState(0);
- *   const [limit, setLimit] = useState(5);
- *   const items = useMemo(() => paginate(people, start, limit), [limit, start]);
- *
- *   const [nameColumnStyle, setNameColumnStyle] = useState<"complex" | "compact">("complex");
- *
- *   // Expanded initial path
- *   // Example path: [0, 0, 1, 0, 1]
- *   const initialExpansion = useMemo<ExpandedState>(
- *     () => ({
- *       "0": true,
- *       "0.0": true,
- *       "0.0.1": true,
- *       "0.0.1.0": true,
- *       "0.0.1.0.1": true,
- *     }),
- *     [],
- *   );
- *
- *   const [expansion, setExpansion] = useState<ExpandedState>(initialExpansion);
- *
- *   return (
- *     <div className="flex flex-col gap-2">
- *       {
- *        // Some UI controls for the Storybook example
- *       }
- *       <Table
- *         {...args}
- *         data={items}
- *         columns={[
- *           {
- *             accessorKey: "name",
- *             id: "name",
- *             header: "Name",
- *             footer: (props) => props.column.id,
- *             cell: ({ getValue, row }) => (
- *               <NameDisplay style={nameColumnStyle} name={getValue()} person={row.original} />
- *             ),
- *           },
- *           {
- *             accessorKey: "age",
- *             id: "age",
- *             header: "Age",
- *             footer: (props) => props.column.id,
- *           },
- *           {
- *             accessorKey: "occupation",
- *             id: "occupation",
- *             header: "Occupation",
- *             footer: (props) => props.column.id,
- *           },
- *           {
- *             accessorKey: "friends",
- *             id: "friends",
- *             header: "Friends",
- *             cell: ({ getValue }) => (getValue()?.length ?? 0).toString(),
- *             footer: (props) => props.column.id,
- *           },
- *         ]}
- *         limit={limit}
- *         setLimit={setLimit}
- *         start={start}
- *         setStart={setStart}
- *         total={people.length}
- *         getNestedDataForRow={(row) => row.friends} // Required for nested rows
- *         // Optional props
- *         onExpand={setExpansion} // Optional - to hook in when a row is expanded or collapsed
- *         expandedRowsState={expansion} // Optional - only if you want to control the expanded state of the rows
- *         isRowNested={(row) => (row.original.friends ?? []).length > 0} // Optional
- *                                                                        // If the function is not provided,
- *                                                                        // the default function uses the provided
- *                                                                        // `getNestedDataForRow` prop to determine
- *                                                                        // if a row has nested rows or not,
- *                                                                        // with a cutoff depth of 5 applied.
- *       />
- *     </div>
- *   );
- * }
- * ```
- */
-export declare const Nested: NestedStory;
-export declare const DisclosureButtonStory: Story;
-/**
- * ```tsx
- * function logPerson(person: Person, isAlert?: boolean) {
- *  const minimalPerson = {
- *    ...person,
- *    friends: person.friends?.length ? `Array(${person.friends.length})` : "None",
- *  };
- *  if (isAlert) {
- *    alert(JSON.stringify(minimalPerson, null, 2));
- *    return;
- *  }
- *  console.log(JSON.stringify(minimalPerson, null, 2));
- *}
- *
- * function TableSingleSelectionExample() {
- *   const data = useMemo(() => peopleWithUUID, []);
- *   const [selectionState, setSelectionState] = useState<string[]>([]);
- *
- *   const [start, setStart] = useState(0);
- *   const [limit, setLimit] = useState(5);
- *
- *   const [isLoading, setIsLoading] = useState(false);
- *   const [page, setPage] = useState<Person[] | undefined>(undefined);
- *
- *   useEffect(() => {
- *     async function fetchData() {
- *       setIsLoading(true);
- *       const page = await paginateAsync(data, start, limit, 1000);
- *       setIsLoading(false);
- *       setPage(page);
- *     }
- *
- *     fetchData();
- *   }, [data, limit, start]);
- *
- *   return (
- *     <div className="flex flex-col gap-3">
- *       <Table
- *         data={page ?? []}
- *         isLoading={isLoading}
- *         start={start}
- *         setStart={setStart}
- *         limit={limit}
- *         setLimit={setLimit}
- *         total={data.length}
- *         key="single"
- *         aria-label="Table single selection example"
- *         onRowPress={(rowValue) => logPerson(rowValue)}
- *         columns={[
- *           {
- *             accessorKey: "id",
- *             id: "id",
- *             header: "ID",
- *             width: "30%",
- *           },
- *           {
- *             accessorKey: "name",
- *             id: "name",
- *             header: "Name",
- *             width: "30%",
- *           },
- *           {
- *             accessorKey: "occupation",
- *             id: "occupation",
- *             header: "Occupation",
- *           },
- *           {
- *             accessorKey: "age",
- *             id: "age",
- *             header: "Age",
- *             width: "10%",
- *           },
- *           {
- *             accessorKey: "friends",
- *             id: "friends",
- *             header: "Friends",
- *             width: "10%",
- *             cell: ({ getValue }) => (getValue()?.length ?? 0).toString(),
- *           },
- *           {
- *             id: "actions",
- *             header: "Actions",
- *             width: "10%",
- *             cellType: "button",
- *             cell: ({ row }) => (
- *               <Button variant="icon" onPress={() => logPerson(row.original, true)}>
- *                 <SvgIcon name="alert-information" />
- *               </Button>
- *             ),
- *           },
- *         ]}
- *         // Required props for selection
- *         selectionMode="single" // Required, can be "single" or "multiple"
- *         getRowId={(row) => row.id} // Required, try to find a stable and unique identifier for each row, like a UserID
- *         // Optional (for controlled selection)
- *         selectedRowIds={selectionState}
- *         onRowSelectionChange={setSelectionState}
- *         // disallowEmptySelection // Optional - if you want to prevent empty selections
- *       <CodeBox
- *         data={{ selectionState: selectionState.find((_, idx) => idx === 0) ?? "undefined" }}
- *       />
- *     </div>
- *   );
- * }
- * ```
- */
-export declare const TableSingleSelectionStory: Story;
-/**
- * ```tsx
- *  * function logPerson(person: Person, isAlert?: boolean) {
- *  const minimalPerson = {
- *    ...person,
- *    friends: person.friends?.length ? `Array(${person.friends.length})` : "None",
- *  };
- *  if (isAlert) {
- *    alert(JSON.stringify(minimalPerson, null, 2));
- *    return;
- *  }
- *  console.log(JSON.stringify(minimalPerson, null, 2));
- *}
- *
- * function TableMultiSelectionExample() {
- *   const data = useMemo(() => peopleWithUUID, []);
- *   const [selectionState, setSelectionState] = useState<string[]>([]);
- *
- *   const [start, setStart] = useState(0);
- *   const [limit, setLimit] = useState(5);
- *
- *   const [isLoading, setIsLoading] = useState(false);
- *   const [page, setPage] = useState<Person[] | undefined>(undefined);
- *
- *   useEffect(() => {
- *     async function fetchData() {
- *       setIsLoading(true);
- *       const page = await paginateAsync(data, start, limit, 1000);
- *       setIsLoading(false);
- *       setPage(page);
- *     }
- *
- *     fetchData();
- *   }, [data, limit, start]);
- *
- *   return (
- *     <div className="flex flex-col gap-3">
- *       <Table
- *         data={page ?? []}
- *         isLoading={isLoading}
- *         start={start}
- *         setStart={setStart}
- *         limit={limit}
- *         setLimit={setLimit}
- *         total={data.length}
- *         key="multi"
- *         aria-label="Table multi selection example"
- *         onRowPress={(rowValue) => logPerson(rowValue)}
- *         columns={[
- *           {
- *             accessorKey: "id",
- *             id: "id",
- *             header: "ID",
- *             width: "30%",
- *           },
- *           {
- *             accessorKey: "name",
- *             id: "name",
- *             header: "Name",
- *             width: "30%",
- *           },
- *           {
- *             accessorKey: "occupation",
- *             id: "occupation",
- *             header: "Occupation",
- *           },
- *           {
- *             accessorKey: "age",
- *             id: "age",
- *             header: "Age",
- *             width: "10%",
- *           },
- *           {
- *             accessorKey: "friends",
- *             id: "friends",
- *             header: "Friends",
- *             width: "10%",
- *             cell: ({ getValue }) => (getValue()?.length ?? 0).toString(),
- *           },
- *           {
- *             id: "actions",
- *             header: "Actions",
- *             width: "10%",
- *             cellType: "button",
- *             cell: ({ row }) => (
- *               <Button variant="icon" onPress={() => logPerson(row.original, true)}>
- *                 <SvgIcon name="alert-information" />
- *               </Button>
- *             ),
- *           },
- *         ]}
- *         // Required props for selection
- *         selectionMode="multiple" // Required, can be "single" or "multiple"
- *         getRowId={(row) => row.id} // Required, try to find a stable and unique identifier for each row, like a UserID
- *         // Optional (for controlled selection)
- *         selectedRowIds={selectionState}
- *         onRowSelectionChange={setSelectionState}
- *         // disallowEmptySelection // Optional - if you want to prevent empty selections
- *       />
- *       <CodeBox data={{ selectionState }} />
- *     </div>
- *   );
- * }
- *  ```
- */
-export declare const TableMultiSelectionStory: Story;
-/**
- * ```tsx
- * <Table
- *  {...args}
- *  onRowPress={(rowValue) => alert(JSON.stringify(rowValue, null, 2))}
- *  // a row footer is placed after the row, inside of a <tr> and then in a <td>, that spans all columns
- *  rowFooterColSpan={2} // Optional, if not provided, the row footer will span all columns
- *  rowFooterClassName={{
- *    cell: "!p-0", // className for the table cell component (td)
- *    row: "bg-surface-tertiary !p-0 cursor-default", // className for the table row component (tr)
- *  }}
- *  rowFooter={(row) =>
- *     (row.index + 1) >= 3 && (row.index + 1) % 3 === 0 ? ( // Every 3rd row will have a footer
- *      <div className="flex flex-row items-center gap-3 p-3">
- *        <img
- *          className="w-full rounded-md border border-default"
- *          alt={row.original.name}
- *          src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${row.original.url
- *            .split("/")
- *            .at(-2)}.png`}
- *        />
- *        <div className="flex flex-col items-start gap-3">
- *          <Text variant="heading-2" className="uppercase">
- *            {row.original.name}
- *          </Text>
- *          <ButtonLink href={row.original.url} target="_blank">
- *            {row.original.url}
- *          </ButtonLink>
- *        </div>
- *      </div>
- *    ) : null // If the function returns undefined or null, the row will not have a footer
- *  }
- * />
- * ```
- */
-export declare const RowFooter: AsyncStory;
-/**
- * Default
- *
- * ```tsx
- * const items: Item[] = Array.from({ length: 50 }).map((_value, index) => ({
- *   name: `Item ${index}`,
- *   id: index.toString(),
- *   organization: `Org ${index}`,
- *   status: ["Active", "Inactive", "Pending"][
- *       Math.floor(Math.random() * 3)
- *     ] as Item["status"],
- *   description: `Description ${index}`,
- *   date: generateDateMinusXDays(index),
- *  }));
- *
- * const columns: TableColumnDef<Item>[] = [
- *  {
- *    header: "Name",
- *    accessorKey: "name",
- *    align: "start",
- *  },
- *  {
- *    header: "Organization",
- *    accessorKey: "organization",
- *  },
- *  {
- *    header: "Status",
- *    accessorKey: "status",
- *    cellType: "badge",
- *    cell: ({ cell }) => {
- *      switch (cell.getValue()) {
- *        case "Active":
- *          return <Badge variant="blue">Active</Badge>;
- *        case "Inactive":
- *          return <Badge variant="gray">Inactive</Badge>;
- *        case "Pending":
- *          return <Badge variant="orange">Pending</Badge>;
- *        default:
- *          return null;
- *      }
- *    },
- *  },
- *  {
- *    header: "Description",
- *    accessorKey: "description",
- *  },
- *  {
- *    header: "Date",
- *    accessorKey: "date",
- *  },
- *  {
- *    id: "actions",
- *    align: "end",
- *    cellType: "button",
- *    cell: () => (
- *      <ButtonGroup>
- *        <Button variant="icon" aria-label="Edit">
- *          <SvgIcon name="edit" />
- *        </Button>
- *        <Button variant="icon" aria-label="Delete">
- *          <SvgIcon name="delete" />
- *        </Button>
- *      </ButtonGroup>
- *  }
- * ];
- *
- * return (
- *  <Table
- *    data={items}
- *    columns={columns}
- *    selectionMode="multiple"
- *    aria-label="Table"
- *    options={
- *     stickyHeader: {
- *      enabled: true,
- *      tableContentMaxHeight: "20rem",
- *     },
- *    }
- *  />
- * )
- * }
- * ```
- */
-export declare const StickyHeader: Story;
-//# sourceMappingURL=table.stories.d.ts.map