@dmsi/wedgekit-react 0.0.26 → 0.0.27

package/src/components/DataTable.tsx

@@ -49,6 +49,7 @@ import { CSS } from "@dnd-kit/utilities";
 import { Switch } from "@headlessui/react";
 
 export interface DataTableProps {
+  id?: string;
   data: OrderRow[];
 }
 
@@ -239,20 +240,26 @@ export const EditingProvider = ({ data, children }: EditingProviderProps) => {
       });
     },
   };
-  return <EditingContext value={context}>{children}</EditingContext>;
+  return (
+    <EditingContext.Provider value={context}>
+      {children}
+    </EditingContext.Provider>
+  );
 };
-export const DataTable = ({ data }: DataTableProps) => {
+export const DataTable = ({ id, data }: DataTableProps) => {
   return (
     <EditingProvider data={data}>
-      <DataTableInternals />
+      <DataTableInternals id={id} />
     </EditingProvider>
   );
 };
 
 const DraggableTableHeader = ({
   header,
+  id,
 }: {
   header: Header<OrderRow, unknown>;
+  id?: string;
 }) => {
   const { attributes, isDragging, listeners, setNodeRef, transform } =
     useSortable({
@@ -271,6 +278,7 @@ const DraggableTableHeader = ({
 
   return (
     <th
+      id={id}
       colSpan={header.colSpan}
       ref={setNodeRef}
       style={style}
@@ -285,6 +293,7 @@ const DraggableTableHeader = ({
       {header.isPlaceholder ? null : (
         <div className="flex space-x-1 justify-start items-center">
           <button
+            id={id ? `${id}-drag-handle` : undefined}
             className="cursor-grab shrink-0"
             {...attributes}
             {...listeners}
@@ -313,15 +322,22 @@ const DraggableTableHeader = ({
             </div>
             <div>
               {header.column.getCanFilter() ? (
-                <Filter column={header.column} />
+                <Filter
+                  id={id ? `${id}-filter` : undefined}
+                  column={header.column}
+                />
               ) : (
                 <div className="invisible">
-                  <Filter column={header.column} />
+                  <Filter
+                    id={id ? `${id}-filter` : undefined}
+                    column={header.column}
+                  />
                 </div>
               )}
             </div>
           </div>
           <div
+            id={id ? `${id}-sort-button` : undefined}
             className="shrink-0 cursor-pointer"
             onClick={header.column.getToggleSortingHandler()}
           >
@@ -341,9 +357,11 @@ const DraggableTableHeader = ({
 const DragAlongCell = ({
   cell,
   setValue,
+  id,
 }: {
   cell: Cell<OrderRow, unknown>;
   setValue: (row: number, key: string, value: string) => void;
+  id?: string;
 }) => {
   const { isDragging, setNodeRef, transform } = useSortable({
     id: cell.column.id,
@@ -360,6 +378,7 @@ const DragAlongCell = ({
 
   return (
     <EditCell
+      id={id}
       ref={setNodeRef}
       style={style}
       cell={cell}
@@ -375,7 +394,7 @@ const DragAlongCell = ({
   );
 };
 
-const DataTableInternals = () => {
+const DataTableInternals = ({ id }: { id?: string }) => {
   // use state client bullshit
 
   const { data, setValue } = useContext(EditingContext);
@@ -445,8 +464,11 @@ const DataTableInternals = () => {
       onDragEnd={handleDragEnd}
       sensors={sensors}
     >
-      <div>
-        <div className="border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0">
+      <div id={id}>
+        <div
+          id={id ? `${id}-column-visibility` : undefined}
+          className="border border-gray-300 rounded p-3 m-4 max-w-xl min-w-0"
+        >
           <p className="mb-3 font-semibold">Show/Hide Columns</p>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
             {table.getAllColumns().map((column) => (
@@ -455,6 +477,7 @@ const DataTableInternals = () => {
                 key={column.id}
               >
                 <Toggle
+                  id={id ? `${id}-toggle-${column.id}` : undefined}
                   enabled={column.getIsVisible()}
                   onToggle={(checked) =>
                     column.getToggleVisibilityHandler()({
@@ -481,7 +504,11 @@ const DataTableInternals = () => {
                     strategy={horizontalListSortingStrategy}
                   >
                     {headerGroup.headers.map((header) => (
-                      <DraggableTableHeader key={header.id} header={header} />
+                      <DraggableTableHeader
+                        key={header.id}
+                        id={id ? `${id}-header-${header.id}` : undefined}
+                        header={header}
+                      />
                     ))}
                   </SortableContext>
                 </tr>
@@ -501,6 +528,7 @@ const DataTableInternals = () => {
                     >
                       <DragAlongCell
                         key={cell.id}
+                        id={id ? `${id}-cell-${cell.id}` : undefined}
                         cell={cell}
                         setValue={setValue}
                       />
@@ -511,9 +539,13 @@ const DataTableInternals = () => {
             </tbody>
           </table>
         </div>
-        <div className="flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2">
+        <div
+          id={id ? `${id}-pagination` : undefined}
+          className="flex flex-col gap-6 md:flex-row items-center md:gap-2 w-full justify-between p-2"
+        >
           <div className="flex flex-row items-center">
             <button
+              id={id ? `${id}-first-page` : undefined}
               className={clsx(
                 "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 rounded-r-none",
                 {
@@ -526,6 +558,7 @@ const DataTableInternals = () => {
               <i className="w-4 h-4 group-disabled:stroke-gray-400" />
             </button>
             <button
+              id={id ? `${id}-prev-page` : undefined}
               className={clsx(
                 "-mr-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
                 {
@@ -542,11 +575,12 @@ const DataTableInternals = () => {
                 const current = table.getState().pagination.pageIndex;
                 const index = current - 2 + i;
                 const active = index === current;
-                if (index < 0) return;
-                if (index > table.getPageCount() - 1) return;
+                if (index < 0) return null;
+                if (index > table.getPageCount() - 1) return null;
                 return (
                   <button
                     key={i}
+                    id={id ? `${id}-page-${index + 1}` : undefined}
                     className={clsx(
                       "group h-8 w-8 border-y border-gray-500/50 text-gray-700 p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer  flex items-center justify-center",
                       {
@@ -562,6 +596,7 @@ const DataTableInternals = () => {
               },
             )}
             <button
+              id={id ? `${id}-next-page` : undefined}
               className={clsx(
                 "-ml-px group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700  p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer border-r-0 group",
                 {
@@ -574,6 +609,7 @@ const DataTableInternals = () => {
               <i className="w-4 h-4 group-disabled:stroke-gray-400 " />
             </button>
             <button
+              id={id ? `${id}-last-page` : undefined}
               className={clsx(
                 "group flex items-center justify-center h-8 w-8 border border-gray-500/50 text-gray-700 rounded rounded-l-none p-1 hover:bg-dmsi-blue hover:text-white transition-colors cursor-pointer",
                 {
@@ -597,6 +633,7 @@ const DataTableInternals = () => {
             <span className="flex items-center gap-2">
               Page:
               <input
+                id={id ? `${id}-page-input` : undefined}
                 type="number"
                 min="1"
                 max={table.getPageCount()}
@@ -610,6 +647,7 @@ const DataTableInternals = () => {
             </span>
           </div>
           <select
+            id={id ? `${id}-pagesize-select` : undefined}
             className="border border-gray-500 px-2 py-1 rounded"
             value={table.getState().pagination.pageSize}
             onChange={(e) => {
@@ -634,12 +672,14 @@ function EditCell({
   setValue,
   style,
   ref,
+  id,
 }: {
   className?: string;
   cell: Cell<OrderRow, unknown>;
   setValue: (row: number, key: string, value: string) => void;
   style: CSSProperties;
   ref: (node: HTMLElement | null) => void;
+  id?: string;
 }) {
   const [editing, setEditing] = useState(false);
   const value = cell.getValue();
@@ -665,6 +705,7 @@ function EditCell({
 
   return (
     <td
+      id={id}
       key={cell.id}
       className={clsx(
         className,
@@ -677,6 +718,7 @@ function EditCell({
       {isString && editing && (
         <div className="flex flex-row gap-1">
           <input
+            id={id ? `${id}-input` : undefined}
             type="text"
             value={editedValue}
             onChange={onEditValue}
@@ -685,6 +727,7 @@ function EditCell({
             className="border px-2 py-0.5 rounded inline min-w-0 shrink border-neutral-400 focus:outline-neutral-300 bg-white"
           />
           <button
+            id={id ? `${id}-save-button` : undefined}
             onClick={onStopEdit}
             className="border cursor-pointer px-2 py-0.5 rounded flex items-center justify-center w-12 border-dmsi-blue text-dmsi-blue bg-white"
           >
@@ -705,16 +748,17 @@ function EditCell({
   );
 }
 
-function Filter({ column }: { column: Column<OrderRow> }) {
+function Filter({ column, id }: { column: Column<OrderRow>; id?: string }) {
   const columnFilterValue = column.getFilterValue();
 
   const { filterVariant } = column.columnDef.meta ?? {};
 
   return filterVariant === "range" ? (
-    <div>
+    <div id={id}>
       <div className="flex space-x-2">
         {/* See faceted column filters example for min max values functionality */}
         <input
+          id={id ? `${id}-min` : undefined}
           className="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
           type="number"
           value={(columnFilterValue as [number, number])?.[0] ?? ""}
@@ -728,6 +772,7 @@ function Filter({ column }: { column: Column<OrderRow> }) {
           placeholder={`Min`}
         />
         <input
+          id={id ? `${id}-max` : undefined}
           className="block  w-full rounded-md bg-white px-3 py-0.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
           type="number"
           value={(columnFilterValue as [number, number])?.[1] ?? ""}
@@ -745,6 +790,7 @@ function Filter({ column }: { column: Column<OrderRow> }) {
     </div>
   ) : filterVariant === "select" ? (
     <select
+      id={id}
       className="block min-w-36 w-full rounded-md bg-white px-2 py-2 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
       onChange={(e) => column.setFilterValue(e.target.value)}
       value={columnFilterValue?.toString()}
@@ -757,6 +803,7 @@ function Filter({ column }: { column: Column<OrderRow> }) {
     </select>
   ) : (
     <input
+      id={id}
       className="block min-w-36 w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900   outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-neutral-400 sm:text-sm/6"
       onChange={(e) => column.setFilterValue(e.target.value)}
       placeholder={column.columnDef.header?.toString() ?? "..."}
@@ -814,12 +861,15 @@ Switch.displayName = "Switch";
 export default function Toggle({
   enabled,
   onToggle,
+  id,
 }: {
   enabled: boolean;
   onToggle: (enabled: boolean) => void;
+  id?: string;
 }) {
   return (
     <Switch
+      id={id}
       checked={enabled}
       onChange={onToggle}
       className="group relative flex h-4 w-7 cursor-pointer rounded-full   p-0.5 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white bg-neutral-900/10 data-[checked]:bg-dmsi-blue"

package/src/components/DateInput.tsx

@@ -5,7 +5,8 @@ import { CalendarRange } from "./CalendarRange";
 import { Icon } from "./Icon";
 import { findDocumentRoot } from "../utils";
 
-type DateInputProps = InputBaseProps & {
+type DateInputProps = Omit<InputBaseProps, "id"> & {
+  id?: string;
   /**
    * Value in the format "YYYY-MM-DD" or empty string.
    * When enableRangeInSingleMode is true, this should be in format "YYYY-MM-DD|YYYY-MM-DD"
@@ -32,6 +33,7 @@ type DateInputProps = InputBaseProps & {
   label?: string; // Optional label for the input
 };
 export const DateInput = ({
+  id,
   value,
   onChange,
   placeholder = "MM/DD/YYYY",
@@ -141,6 +143,7 @@ export const DateInput = ({
   return (
     <div className="relative">
       <InputBase
+        id={id}
         ref={(el) => {
           triggerRef.current = el;
         }}
@@ -171,6 +174,7 @@ export const DateInput = ({
             }}
           >
             <CalendarRange
+              id={id ? `${id}-calendar` : undefined}
               from={from}
               to={to || from}
               onChange={handleDateChange}

package/src/components/DateRangeInput.tsx

@@ -5,7 +5,8 @@ import { CalendarRange } from "./CalendarRange";
 import { Icon } from "./Icon";
 import { findDocumentRoot } from "../utils";
 
-type DateRangeInputProps = InputBaseProps & {
+type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
+  id?: string;
   /**
    * Value in the format "YYYY-MM-DD|YYYY-MM-DD" or empty string
    */
@@ -28,6 +29,7 @@ type DateRangeInputProps = InputBaseProps & {
 };
 
 export const DateRangeInput = ({
+  id,
   value,
   onChange,
   placeholder = "MM/DD/YYYY - MM/DD/YYYY",
@@ -133,6 +135,7 @@ export const DateRangeInput = ({
   return (
     <div className="relative">
       <InputBase
+        id={id}
         ref={(el) => {
           triggerRef.current = el;
         }}
@@ -163,6 +166,7 @@ export const DateRangeInput = ({
             }}
           >
             <CalendarRange
+              id={id ? `${id}-calendar` : undefined}
               from={from}
               to={to}
               onChange={handleRangeChange}

package/src/components/DebugJson.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
 
-export function DebugJson({ data }: { data: unknown }) {
+export function DebugJson({ data, id }: { data: unknown; id: string }) {
   const [open, setOpen] = useState(false);
 
   if (process.env.NODE_ENV !== "development") {
@@ -9,8 +9,12 @@ export function DebugJson({ data }: { data: unknown }) {
   }
 
   return (
-    <div className="p-2 rounded bg-neutral-100  border border-red-500 my-4">
+    <div
+      id={id}
+      className="p-2 rounded bg-neutral-100  border border-red-500 my-4"
+    >
       <button
+        id={id ? `${id}-toggle-button` : undefined}
         onClick={() => setOpen((prev) => !prev)}
         className="px-4 py-2 border rounded bg-white"
       >
@@ -21,4 +25,4 @@ export function DebugJson({ data }: { data: unknown }) {
   );
 }
 
-DebugJson.displayName = "dasda";
+DebugJson.displayName = "DebugJson";

package/src/components/Display.tsx

@@ -9,6 +9,7 @@ type DisplayVariant = "display1" | "display2";
 type DisplayProps = {
   as?: Tags;
   variant?: DisplayVariant;
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -20,6 +21,7 @@ export const Display = ({
   color,
   align,
   variant = "display1",
+  id,
   ...props
 }: DisplayProps) => {
   const defaultElement = variant === "display1" ? "h1" : "h2";
@@ -27,6 +29,7 @@ export const Display = ({
 
   return (
     <Element
+      id={id}
       className={clsx(
         typography[variant],
         className,

package/src/components/EditingContext.tsx

@@ -7,6 +7,7 @@ type EditingContextType<T> = {
   setData: (row: number, key: string, value: string) => void;
 };
 
+// TODO: Update "any" we shouldn't have this for typesafe devx
 export const EditingContext = createContext<EditingContextType<any>>({
   data: [],
   setData: (row: number, key: string, value: string) => {
@@ -16,14 +17,15 @@ export const EditingContext = createContext<EditingContextType<any>>({
 
 type EditingProviderProps<T> = PropsWithChildren<{ data: T[] }>;
 
-export const EditingProvider = <T,>({ data, children }: EditingProviderProps<T>) => 
-{
+export const EditingProvider = <T,>({
+  data,
+  children,
+}: EditingProviderProps<T>) => {
   const [actual, setData] = useState<T[]>(data);
-  
+
   const context: EditingContextType<T> = {
     data: actual,
-    setData: (row: number, key: string, value: string) => 
-    {
+    setData: (row: number, key: string, value: string) => {
       setData((prev) => {
         const newData = [...prev];
         newData[row] = {
@@ -37,4 +39,4 @@ export const EditingProvider = <T,>({ data, children }: EditingProviderProps<T>)
   };
 
   return <EditingContext value={context}>{children}</EditingContext>;
-};
+};

package/src/components/FilterGroup.tsx

@@ -19,6 +19,7 @@ import {
 import { Icon } from "./Icon";
 
 type FilterGroupProps = {
+  id?: string;
   label: string;
   open?: boolean;
   showMore?: boolean;
@@ -39,6 +40,7 @@ type FilterGroupProps = {
 );
 
 export const FilterGroup = ({
+  id,
   label,
   type = "link",
   open = false,
@@ -70,6 +72,7 @@ export const FilterGroup = ({
 
   return (
     <div
+      id={id}
       {...props}
       className={clsx(
         "border-b border-border-primary-normal",
@@ -99,6 +102,7 @@ export const FilterGroup = ({
           />
         ) : (
           <Link
+            id={id ? `${id}-clear-all` : undefined}
             className={clsx("block", componentPaddingY)}
             onClick={handleClearAll}
           >
@@ -127,7 +131,8 @@ export const FilterGroup = ({
         >
           {!isSummary && showSearchField && (
             <Search
-              style={{ marginBottom: '2px' }}
+              id={id ? `${id}-search` : undefined}
+              style={{ marginBottom: "2px" }}
               onChange={onSearchChange}
               value={searchValue}
             />
@@ -138,6 +143,7 @@ export const FilterGroup = ({
           </div>
           {showShowMoreLink && (
             <Link
+              id={id ? `${id}-show-more` : undefined}
               className={clsx("block", "!items-start", componentPaddingY)}
               onClick={handleOnShowMore}
             >
@@ -168,11 +174,13 @@ export const FilterGroup = ({
 };
 
 type FilterGroupItemProps = {
+  id?: string;
   count?: number;
   type?: FilterGroupProps["type"];
 };
 
 export const FilterGroupItem = ({
+  id,
   type = "link",
   children,
   onClick,
@@ -180,6 +188,7 @@ export const FilterGroupItem = ({
 }: ComponentProps<React.ElementType> & FilterGroupItemProps) => {
   return (
     <div
+      id={id}
       onClick={handleClick}
       {...props}
       className={clsx(
@@ -189,7 +198,12 @@ export const FilterGroupItem = ({
           : "",
       )}
     >
-      <FilterGroupItemChildComponent {...props} type={type} count={props.count}>
+      <FilterGroupItemChildComponent
+        {...props}
+        id={id ? `${id}-child` : undefined}
+        type={type}
+        count={props.count}
+      >
         <span className="flex items-center justify-between w-full">
           {children}
 
@@ -213,7 +227,13 @@ const FilterGroupItemChildComponent = ({
   type: FilterGroupItemProps["type"];
 }) => {
   if (type === "checkbox") {
-    return <Checkbox paragraphClassName="w-full" label={children} {...props} />;
+    return (
+      <Checkbox
+        paragraphClassName="w-full"
+        label={children as string}
+        {...props}
+      />
+    );
   }
 
   if (type === "summary") {

package/src/components/FullViewportBox.tsx

@@ -1,10 +1,15 @@
 export function FullViewportLayout({
   children,
+  id,
 }: {
   children: React.ReactNode;
+  id?: string;
 }) {
   return (
-    <div className="flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal">
+    <div
+      id={id}
+      className="flex flex-col min-h-screen min-w-screen p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding items-center justify-center bg-background-grouped-secondary-normal"
+    >
       {children}
     </div>
   );

package/src/components/Grid.tsx

@@ -8,6 +8,7 @@ type GridProps = {
   padding?: boolean;
   hasSideMenu?: boolean;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  id?: string;
 } & Omit<ComponentProps<"div">, "className">;
 
 // Grid class configuration maps for better maintainability
@@ -87,10 +88,12 @@ export const Grid = ({
   padding,
   hasSideMenu = false,
   columns,
+  id,
 }: GridProps) => {
   const childCount = Children.count(children);
   return (
     <div
+      id={id}
       className={clsx(
         padding &&
           sizing === "container" &&

package/src/components/Heading.tsx

@@ -9,6 +9,7 @@ type HeadingVariant = "heading1" | "heading2" | "heading3";
 type HeadingProps = {
   as?: Tags;
   variant?: HeadingVariant;
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -20,6 +21,7 @@ export const Heading = ({
   color,
   align,
   variant = "heading1",
+  id,
   ...props
 }: HeadingProps) => {
   const defaultElement =
@@ -28,6 +30,7 @@ export const Heading = ({
 
   return (
     <Element
+      id={id}
       className={clsx(
         typography[variant],
         className,

package/src/components/HorizontalDivider.tsx

@@ -1,3 +1,5 @@
-export function HorizontalDivider() {
-  return <hr className="w-full border-t border-border-primary-normal" />;
+export function HorizontalDivider({ id }: { id?: string }) {
+  return (
+    <hr id={id} className="w-full border-t border-border-primary-normal" />
+  );
 }