@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.12

package/src/molecules/button/Button.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { type ButtonHTMLAttributes, forwardRef, type LegacyRef, type PropsWithChildren } from "react";
+import { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from "react";
 
 import { registerComponent } from "../../registries/components";
 
@@ -24,31 +24,50 @@ export const BUTTON_VARIANTS = [
   "outline-link"
 ];
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface BaseButtonProps<T extends HTMLElement> extends ButtonHTMLAttributes<T> {
+  tag?: "button" | "a" | "input" | "div";
   variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;
 }
 
-export const Button = forwardRef(
-  ({ variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref: LegacyRef<HTMLButtonElement>) => {
-    return (
-      <button
-        {...props}
-        ref={ref}
-        className={cx(
-          "btn flex gap-1",
-          {
-            disabled: props.disabled
-          },
-          `btn-${variant}`,
-          className
-        )}
-        disabled={props.disabled}
-        onClick={(evt) => !props.disabled && props.onClick?.(evt)}
-      >
-        {children}
-      </button>
-    );
-  }
-);
+interface HTMLAnchorProps extends BaseButtonProps<HTMLAnchorElement> {
+  tag: "a";
+}
+
+interface HTMLButtonProps extends BaseButtonProps<HTMLButtonElement> {
+  tag?: "button";
+}
+
+interface HTMLInputProps extends BaseButtonProps<HTMLInputElement> {
+  tag: "input";
+}
+
+interface HTMLDivProps extends BaseButtonProps<HTMLDivElement> {
+  tag: "div";
+}
+
+export type ButtonProps = HTMLAnchorProps | HTMLButtonProps | HTMLInputProps | HTMLDivProps;
+
+export const Button = forwardRef(({ tag: Tag = "button", variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref) => {
+  return (
+    <Tag
+      {...(props as any)}
+      ref={ref as any}
+      className={cx(
+        "btn flex gap-1",
+        {
+          disabled: props.disabled
+        },
+        `btn-${variant}`,
+        className
+      )}
+      disabled={props.disabled}
+      onClick={(evt) => !props.disabled && props.onClick?.(evt as any)}
+    >
+      {children}
+    </Tag>
+  );
+});
+
+Button.displayName = "Button";
 
 registerComponent("Button", Button);

package/src/molecules/card/Card.tsx

@@ -1,6 +1,8 @@
 import classnames from "classnames";
 import { PropsWithChildren } from "react";
 
+import { registerComponent } from "../../registries/components.js";
+
 export interface CardProps {
   label: string;
   className?: string;
@@ -18,3 +20,5 @@ export function Card({ children, label, className }: PropsWithChildren<CardProps
     </div>
   );
 }
+
+registerComponent("Card", Card);

package/src/molecules/forms/form-control/FormControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../utils/iconClass";
 import { FormControl } from "./FormControl";

package/src/molecules/forms/input-tags/InputTags.tsx

@@ -9,7 +9,7 @@ export function InputTags<Data = string>(props: InputTagsProps) {
 
   const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
   const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
-  console.log("VALUE", props.value);
+
   return (
     <FormControl
       id={id}

package/src/molecules/forms/input-tags/components/ChoicesTags.stories.tsx

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/forms/input-tags/components/ReactTags.stories.tsx

@@ -1,6 +1,6 @@
 import "../all";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { type CreatableProps } from "react-select/creatable";
 
 import { iconClass } from "../../../../utils/iconClass";

package/src/molecules/forms/input-text/InputText.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../utils/iconClass";
 import { useValue } from "../../__fixtures__/useValue.hook";

package/src/molecules/forms/select/components/ChoicesSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/forms/select/components/HtmlSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "./HtmlSelect";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/forms/select/components/ReactSelect.stories.tsx

@@ -1,7 +1,7 @@
 import "../all";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";

package/src/molecules/loader/Loader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import tailwind from "@tsed/tailwind-formio";
 
 import { Loader } from "./Loader";

package/src/molecules/modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Modal, ModalProps, useModal } from "./Modal";
 

package/src/molecules/pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import "../forms/select/all";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useEffect, useState } from "react";
 
 import { Pagination } from "./all";
@@ -12,18 +12,11 @@ import { Pagination } from "./all";
  *
  * ```tsx
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
- * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
  *
  * or
  *
  * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
  * import "@tsed/react-formio/molecules/pagination/PaginationButton";
- *
- * or
- *
- * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
- *
- * registerComponent("PaginationButton", MyPaginationButton);
  * ```
  *
  * Pagination component support DI container and can be used with custom PaginationButton component.

package/src/molecules/pagination/Pagination.tsx

@@ -95,7 +95,6 @@ export function Pagination(props: PaginationProps) {
           multiple={false}
           layout={props.layout}
           onChange={(_, value) => {
-            console.log("On page change", value);
             onPageSizeChange(+value);
           }}
         />

package/src/molecules/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import "./all";
 
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import FormType from "../__fixtures__/form-schema.json";
@@ -19,7 +19,40 @@ type ProductSubmission = SubmissionType<{
   price?: number;
   currency?: string;
 }>;
-
+/**
+ * Table component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Table} from "@tsed/react-formio/molecules/table/all"
+ *
+ * or
+ *
+ * import {Table} from "@tsed/react-formio/molecules/table/Table";
+ * ```
+ *
+ * Table component support DI container and can be used with custom component. Here is the list of components that you can override:
+ *
+ * - DefaultFilter
+ * - DefaultArrowSort
+ * - DefaultCell
+ * - DefaultCellOperations
+ * - DefaultOperationButton
+ * - DefaultCellHeader
+ * - DefaultCellFooter
+ * - TextFieldFilter
+ * - SelectFilter
+ * - RangeFilter
+ *
+ * ```tsx
+ * function CustomDefaultFilter() {
+ *
+ * }
+ *
+ * registerComponent("DefaultFilter", DefaultFilter);
+ * ```
+ */
 export default {
   title: "Table",
   component: Table,

package/src/molecules/table/Table.tsx

@@ -1,14 +1,15 @@
-import { flexRender, RowData } from "@tanstack/react-table";
+import { flexRender } from "@tanstack/react-table";
 import cx from "classnames";
 import { PropsWithChildren } from "react";
 
+import type { JSON } from "../../interfaces/index.js";
 import { getComponent } from "../../registries/components";
 import type { Pagination as DefaultPagination } from "../pagination/Pagination";
 import type { DefaultCellFooter } from "./components/DefaultCellFooter";
 import type { DefaultCellHeader } from "./components/DefaultCellHeader";
 import { useTable, UseTableProps } from "./hooks/useTable";
 
-export interface TableProps<Data extends RowData = any> extends UseTableProps<Data> {
+export interface TableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseTableProps<Data> {
   className?: string;
 
   enableFooter?: boolean;
@@ -16,8 +17,13 @@ export interface TableProps<Data extends RowData = any> extends UseTableProps<Da
   pageSizes?: number[];
 }
 
-export function Table<Data extends RowData = any>({ className, enableFooter, children, ...props }: PropsWithChildren<TableProps<Data>>) {
-  const { tableInstance, i18n } = useTable(props);
+export function Table<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  className,
+  enableFooter,
+  children,
+  ...props
+}: PropsWithChildren<TableProps<Data>>) {
+  const { tableInstance, i18n } = useTable<Data>(props);
   const CellHeader = getComponent<typeof DefaultCellHeader>("CellHeader");
   const CellFooter = getComponent<typeof DefaultCellFooter>("CellFooter");
   const Pagination = getComponent<typeof DefaultPagination>("Pagination");
@@ -76,7 +82,7 @@ export function Table<Data extends RowData = any>({ className, enableFooter, chi
         )}
       </table>
       <div className={"overflow-hidden flex flex-wrap"}>
-        {props.data.length && pagination && (
+        {props.data.length && pagination ? (
           <Pagination
             className={"flex-1"}
             canNextPage={tableInstance.getCanNextPage()}
@@ -92,7 +98,7 @@ export function Table<Data extends RowData = any>({ className, enableFooter, chi
             onClickNextPage={() => tableInstance.nextPage()}
             onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}
           />
-        )}
+        ) : null}
         <div>{children}</div>
       </div>
     </div>

package/src/molecules/table/components/DefaultCellOperations.tsx

@@ -1,24 +1,30 @@
 import type { CellContext } from "@tanstack/react-table";
 
-import type { Operation } from "../../../interfaces";
+import type { CellMetadata, JSON, Operation } from "../../../interfaces";
 import { getComponent, registerComponent } from "../../../registries/components";
 import type { DefaultOperationButton } from "./DefaultOperationButton";
 
-export interface DefaultCellOperationsProps<Data = any> {
+export interface DefaultCellOperationsProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> {
   info: CellContext<Data, unknown>;
   operations: Operation<Data>[];
-  metadata?: Record<string, unknown>;
+  metadata?: CellMetadata;
   i18n: (i18n: string) => string;
   onClick?: (data: any, operation: Operation<Data>) => void;
 }
 
-export function DefaultCellOperations({ info, metadata, operations, i18n, onClick }: DefaultCellOperationsProps) {
-  const Button = getComponent<typeof DefaultOperationButton>("OperationButton");
+export function DefaultCellOperations<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  info,
+  metadata,
+  operations,
+  i18n,
+  onClick
+}: DefaultCellOperationsProps<Data>) {
+  const Button = getComponent<typeof DefaultOperationButton<Data>>("OperationButton");
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }) => {
-          return !permissionsResolver || permissionsResolver(info.row.original, metadata);
+        .filter(({ permissionsResolver, ...operation }) => {
+          return !permissionsResolver || permissionsResolver(info.row.original, metadata || {}, operation);
         })
         .map((operation) => {
           return (

package/src/molecules/table/components/DefaultOperationButton.tsx

@@ -2,20 +2,21 @@ import { CellContext } from "@tanstack/react-table";
 import cx from "classnames";
 import { HTMLAttributes } from "react";
 
-import { Operation } from "../../../interfaces";
+import { type CellMetadata, type JSON, Operation } from "../../../interfaces";
 import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps<Data = any> extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
+export interface OperationButtonProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   operation: Operation<Data>;
   info: CellContext<Data, unknown>;
-  metadata?: Record<string, unknown>;
+  metadata?: CellMetadata;
   onClick: () => void;
   i18n?: (i18n: string) => string;
 }
 
-export function DefaultOperationButton(props: OperationButtonProps) {
+export function DefaultOperationButton<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: OperationButtonProps<Data>) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { i18n = (f: string) => f, onClick, operation, info, ...extraProps } = props;
   const { className = "btn", buttonSize = "xs", buttonType = "primary", buttonOutline, action, title = "", icon = "" } = operation;

package/src/molecules/table/filters/SelectFilter.tsx

@@ -9,7 +9,7 @@ export function SelectFilter<Data = any>({ header, options }: FilterProps<Data,
   const Select = getComponent<typeof DefaultSelect>("Select");
   const columnFilterValue = header.column.getFilterValue();
   const uniqValues = useUniqValues<Data>({ header, filterVariant: "text" });
-  console.log(uniqValues);
+
   const opts =
     options.layout === "choicesjs"
       ? {

package/src/molecules/table/hooks/useTable.tsx

@@ -6,18 +6,18 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  type RowData,
   type TableOptions,
   type TableState,
   useReactTable
 } from "@tanstack/react-table";
 import { useEffect } from "react";
 
-import { Operation } from "../../../interfaces";
+import { type JSON, Operation } from "../../../interfaces";
 import { getComponent } from "../../../registries/components";
 import type { DefaultCellOperations } from "../components/DefaultCellOperations";
 
-export interface UseTableProps<Data extends RowData> extends TableOptions<Data> {
+export interface UseTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }>
+  extends Omit<TableOptions<Data>, "getCoreRowModel" | "onClick"> {
   operations: Operation<Data>[];
   metadata?: Record<string, unknown>;
   i18n?: (i18n: string) => string;
@@ -27,8 +27,8 @@ export interface UseTableProps<Data extends RowData> extends TableOptions<Data>
   pageSizes?: number[];
 }
 
-export function useTable<Data extends RowData>(props: UseTableProps<Data>) {
-  const Operations = getComponent<typeof DefaultCellOperations>("CellOperations");
+export function useTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>(props: UseTableProps<Data>) {
+  const Operations = getComponent<typeof DefaultCellOperations<Data>>("CellOperations");
   const i18n = props.i18n || ((f: string) => f);
 
   // const [pagination, setPagination] = useState({

package/src/molecules/tabs/Tab.tsx

@@ -0,0 +1,106 @@
+import classnames from "classnames";
+import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
+
+import { useKeyboardControls } from "../../hooks/useKeyboardControls.js";
+import { registerComponent } from "../../registries/components.js";
+import { iconClass } from "../../utils/iconClass.js";
+import { useActiveTab, useRegisterTabControl, useTabsUid } from "./hooks/tabControl.js";
+
+export interface TabProps {
+  icon?: string;
+  isActive?: boolean;
+  className?: string;
+  after?: React.ReactNode;
+  value: number;
+  /**
+   * on tab select handler
+   */
+  onClick?: (value: number) => void;
+}
+
+export function Tab({ onClick, icon, value, children, className, after }: PropsWithChildren<TabProps>) {
+  const uid = useTabsUid();
+  const ref = useRef<HTMLButtonElement>(null);
+  const activeTab = useActiveTab();
+  const dispatch = useRegisterTabControl({ value, ref });
+  const previousActiveTab = useRef(activeTab);
+
+  const isActive = useRef(activeTab === value);
+  isActive.current = activeTab === value;
+
+  useEffect(() => {
+    if (previousActiveTab.current !== activeTab && value === activeTab) {
+      ref.current?.focus();
+      onClick?.(value);
+    }
+    if (previousActiveTab.current !== activeTab) {
+      previousActiveTab.current = activeTab;
+    }
+  }, [value, onClick, activeTab]);
+
+  const start = useCallback(() => {
+    dispatch({ type: "start" });
+  }, [dispatch]);
+
+  const end = useCallback(() => {
+    dispatch({ type: "end" });
+  }, [dispatch]);
+
+  const up = useCallback(() => {
+    dispatch({ type: "previous" });
+  }, [dispatch]);
+
+  const down = useCallback(() => {
+    dispatch({ type: "next" });
+  }, [dispatch]);
+
+  const left = useCallback(() => {
+    const isRTL = document.documentElement.dir === "rtl";
+
+    dispatch({ type: isRTL ? "next" : "previous" });
+  }, [dispatch]);
+
+  const right = useCallback(() => {
+    const isRTL = document.documentElement.dir === "rtl";
+
+    dispatch({ type: isRTL ? "previous" : "next" });
+  }, [dispatch]);
+
+  const handleKeyDown = useKeyboardControls({
+    start,
+    end,
+    up,
+    down,
+    left,
+    right
+  });
+
+  const handleClick = useCallback(() => {
+    dispatch({ type: "update", payload: value });
+  }, [dispatch, value]);
+
+  return (
+    <div title={"button-wrapper"} className={classnames("tw-tabs__button-wrapper", className, { "-active": isActive.current }, className)}>
+      <button
+        ref={ref}
+        id={`Tab_${value}_${uid}`}
+        data-name='Tab'
+        title='button-tab'
+        role='tab'
+        aria-selected={isActive.current}
+        aria-controls={`TabPanel_${value}_${uid}`}
+        tabIndex={isActive.current ? 0 : -1}
+        className={"tw-tabs__button"}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      >
+        {icon && <i className={classnames(iconClass(undefined, icon), "tw-tabs__button-icon")} />}
+        <span className={"tw-tabs__button-label"}>{children}</span>
+        {after}
+      </button>
+      <div className='tw-tabs__button-border' />
+    </div>
+  );
+}
+
+registerComponent("Tab", Tab);

package/src/molecules/tabs/TabList.tsx

@@ -0,0 +1,37 @@
+import { Children, isValidElement, PropsWithChildren, ReactNode } from "react";
+
+import { registerComponent } from "../../registries/components.js";
+
+export function TabList(props: PropsWithChildren<{}>) {
+  const before: ReactNode[] = [];
+  const after: ReactNode[] = [];
+  const items: ReactNode[] = [];
+
+  Children.forEach(props.children, (child) => {
+    if (isValidElement(child)) {
+      if ((child.type as any)?.name === "Tab") {
+        items.push(child);
+        return;
+      }
+    }
+
+    if (items.length > 0) {
+      after.push(child);
+    } else {
+      before.push(child);
+    }
+  });
+
+  return (
+    <nav className='tw-tabs__header'>
+      <div className='tw-tabs__header-wrapper'>
+        <div className='tw-tabs__header-border' />
+        {before}
+        <div role='tablist'>{items}</div>
+        {after}
+      </div>
+    </nav>
+  );
+}
+
+registerComponent("TabList", TabList);

package/src/molecules/tabs/TabPanel.tsx

@@ -0,0 +1,37 @@
+import classnames from "classnames";
+
+import { registerComponent } from "../../registries/components.js";
+import { useActiveTab, useTabsUid } from "./hooks/tabControl.js";
+
+export interface TabPanelProps {
+  className?: string;
+  /**
+   * Tab panel index<br/>
+   * _Can be **0** or **1** indexed_
+   */
+  value: number;
+}
+
+export function TabPanel({ value, className, children }: React.PropsWithChildren<TabPanelProps>) {
+  const tabSelected = useActiveTab();
+  const uid = useTabsUid();
+  const isActive = tabSelected === value;
+
+  return (
+    <div
+      id={`TabPanel_${value}_${uid}`}
+      data-name={`TabPanel_${value}`}
+      role='tabpanel'
+      aria-hidden={!isActive}
+      aria-labelledby={`Tab_${value}_${uid}`}
+      tabIndex={isActive ? 0 : -1}
+      className={classnames("tw-tabs__panel", className, {
+        "-active": isActive
+      })}
+    >
+      {children}
+    </div>
+  );
+}
+
+registerComponent("TabPanel", TabPanel);