@tsed/react-formio 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/molecules/__fixtures__/useValue.hook.ts

@@ -0,0 +1,14 @@
+import { useState } from "react";
+
+export const useValue = (args: any) => {
+  const [value, setValue] = useState(args.value);
+
+  return {
+    ...args,
+    value,
+    onChange(name: string, value: any) {
+      setValue(value);
+      args.onChange(name, value);
+    }
+  };
+};

package/src/{components/alert/alert.component.spec.tsx → molecules/alert/Alert.spec.tsx}

@@ -1,18 +1,16 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./alert.stories";
+import { Alert } from "./Alert";
 
-describe("Alert component", () => {
-  it("should NOT display the alert component when no error is received.", () => {
-    const { container } = render(<Sandbox {...Sandbox.args} error={null} />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
+const args = {
+  error: "error placeholder"
+};
 
+describe("Alert component", () => {
   it("should display an error when the error is in string format", () => {
     const error = "error in string format";
 
-    render(<Sandbox {...Sandbox.args} error={error} />);
+    render(<Alert {...args} message={error} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -24,7 +22,7 @@ describe("Alert component", () => {
   it("should display error(s) when the error is an array", () => {
     const arrayOfErrors = ["first error", "second error", "third error"];
     const joinedErrors = arrayOfErrors.map((error) => error).join("");
-    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Alert {...args} message={arrayOfErrors} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -41,7 +39,7 @@ describe("Alert component", () => {
         { name: "third error", path: "/path", message: "message" }
       ]
     };
-    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Alert {...args} message={arrayOfErrors} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -52,7 +50,7 @@ describe("Alert component", () => {
 
   it("should display an error message when the error is a standard error", () => {
     const standardError = { message: "first error" };
-    render(<Sandbox {...Sandbox.args} error={standardError} />);
+    render(<Alert {...args} message={standardError} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -63,7 +61,7 @@ describe("Alert component", () => {
 
   it("should display error(s) message(s) when the error is a joi validation error", () => {
     const joiValidationError = { name: "ValidationError", details: [{ message: "message 1" }, { message: "message 2" }] };
-    render(<Sandbox {...Sandbox.args} error={joiValidationError} />);
+    render(<Alert {...args} message={joiValidationError} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -76,7 +74,7 @@ describe("Alert component", () => {
   it("should display a custom error message that asks to reload the form when a conflict error occurs in a form", () => {
     const error = { _id: "some id", display: "some value" };
     const messageReturned = "Another user has saved this form already. Please reload and re-apply your changes.";
-    render(<Sandbox {...Sandbox.args} error={error} />);
+    render(<Alert {...args} message={error} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 
@@ -87,7 +85,7 @@ describe("Alert component", () => {
 
   it("should display an error message by default when the error format does not match any of the conditions of the formatError() handler", () => {
     const messageError: string = "An error occurred. See console logs for details.";
-    render(<Sandbox {...Sandbox.args} error={true} />);
+    render(<Alert {...args} message={true} />);
 
     const alert = screen.getByRole("alert") as HTMLDivElement;
 

package/src/molecules/alert/Alert.stories.tsx

@@ -0,0 +1,39 @@
+import { Alert } from "./Alert";
+
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app.
+ *
+ * ```tsx
+ * import {Alert} from "@tsed/react-formio/molecules/alert/Alert";
+ *
+ * <Alert type="danger">
+ *   Message
+ * </Alert>
+ * ```
+ */
+export default {
+  title: "Alert",
+  component: Alert,
+  argTypes: {
+    message: {
+      control: "text"
+    },
+    type: {
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    }
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx" }
+    }
+  },
+  tags: ["autodocs"]
+};
+
+export const Sandbox = {
+  args: {
+    type: "danger",
+    message: "error placeholder"
+  }
+};

package/src/{components/alert/alert.component.tsx → molecules/alert/Alert.tsx}

@@ -1,4 +1,10 @@
+import { PropsWithChildren } from "react";
+
 function formatError(error: any): any {
+  if (!error || (Array.isArray(error) && !error.length)) {
+    return "";
+  }
+
   if (typeof error === "string") {
     return error;
   }
@@ -42,18 +48,15 @@ function formatError(error: any): any {
 }
 
 export interface AlertProps {
-  error?: any | any[];
+  message?: string | any | string[];
   type?: string;
 }
 
-export function Alert({ error, type = "danger" }: AlertProps) {
-  if (!error || (Array.isArray(error) && !error.length)) {
-    return null;
-  }
-
+export function Alert({ children, message, type = "danger" }: PropsWithChildren<AlertProps>) {
   return (
     <div className={`alert alert-${type}`} role='alert'>
-      {formatError(error)}
+      {formatError(message)}
+      {children}
     </div>
   );
 }

package/src/molecules/button/Button.stories.tsx

@@ -0,0 +1,106 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Icon } from "../../atoms/icon/Icon";
+import { Button, BUTTON_VARIANTS } from "./Button";
+
+/**
+ * Button component with a label and an onClick handler.
+ *
+ * ```ts
+ * import {Button} from "@tsed/react-formio/molecules/button/Button";
+ * ```
+ *
+ * ## Override Button
+ *
+ * This component is registered with the name `Button` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Button", MyCustomButtonComponent);
+ * ```
+ */
+export default {
+  title: "Button",
+  component: Button,
+  argTypes: {
+    onClick: { action: "clicked" },
+    variant: {
+      control: "select",
+      options: BUTTON_VARIANTS
+    },
+    disabled: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const Usage: Story = {
+  args: {
+    children: "Text",
+    variant: "primary"
+  }
+};
+
+export const Variant: Story = {
+  args: {
+    children: "Text"
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Text",
+    disabled: true
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: "Text"
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              <Icon name='save' />
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

package/src/molecules/button/Button.tsx

@@ -0,0 +1,73 @@
+import cx from "classnames";
+import { type ButtonHTMLAttributes, forwardRef, type PropsWithChildren } from "react";
+
+import { registerComponent } from "../../registries/components";
+
+export const BUTTON_VARIANTS = [
+  "primary",
+  "secondary",
+  "success",
+  "danger",
+  "warning",
+  "info",
+  "light",
+  "dark",
+  "link",
+  "outline-primary",
+  "outline-secondary",
+  "outline-success",
+  "outline-danger",
+  "outline-warning",
+  "outline-info",
+  "outline-light",
+  "outline-dark",
+  "outline-link"
+];
+
+interface BaseButtonProps<T extends HTMLElement> extends ButtonHTMLAttributes<T> {
+  tag?: "button" | "a" | "input" | "div";
+  variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;
+}
+
+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/{components/card/card.component.spec.tsx → molecules/card/Card.spec.tsx}

@@ -1,10 +1,11 @@
 import { render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./card.stories";
+import { Card } from "./Card";
+import { Sandbox } from "./Card.stories";
 
 describe("Card", () => {
   it("should render the card component", () => {
-    render(<Sandbox {...Sandbox.args} />);
+    render(<Card {...Sandbox.args} />);
 
     const title = screen.getByRole("heading");
     const body = screen.getByRole("article");

package/src/{components/card/card.stories.tsx → molecules/card/Card.stories.tsx}

@@ -1,7 +1,14 @@
-import { Card } from "./card.component";
+import { Card } from "./Card";
 
+/**
+ * Cards contain content and actions about a single subject.
+ *
+ * ```ts
+ * import {Card} from "@tsed/react-formio/molecules/card/Card";
+ * ```
+ */
 export default {
-  title: "ReactFormio/Card",
+  title: "Card",
   component: Card,
   argTypes: {},
   parameters: {}

package/src/{components/card/card.component.tsx → 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/{components/form-control/formControl.component.spec.tsx → molecules/forms/form-control/FormControl.spec.tsx}

@@ -1,11 +1,12 @@
 import { render, screen } from "@testing-library/react";
 
-import { iconClass } from "../../utils/iconClass";
-import { Sandbox, WithDescription, WithPrefix, WithSuffix } from "./formControl.stories";
+import { iconClass } from "../../../utils/iconClass";
+import { FormControl } from "./FormControl";
+import { Sandbox } from "./FormControl.stories";
 
 describe("form-control", () => {
   it("should display form control component", () => {
-    render(<Sandbox {...Sandbox.args} name='test' />);
+    render(<FormControl {...Sandbox.args} name='test' />);
 
     const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
 
@@ -14,7 +15,7 @@ describe("form-control", () => {
 
   it("should NOT display form-control component without a name attribute defined", () => {
     const name = "";
-    render(<Sandbox {...Sandbox.args} name={name} />);
+    render(<FormControl {...Sandbox.args} name={name} />);
 
     const formGroup = screen.queryByTestId(`form-group-${name}`) as HTMLFormElement;
 
@@ -22,7 +23,7 @@ describe("form-control", () => {
   });
 
   it("should display form-control component with className 'field-required' when the props 'required' is set to true", () => {
-    render(<Sandbox {...Sandbox.args} required={true} name='test' />);
+    render(<FormControl {...Sandbox.args} required={true} name='test' />);
 
     const formGroup = screen.getByTestId("form-group-test") as HTMLFormElement;
     const formControlLabel = screen.getByTestId(`form-control-label`) as HTMLLabelElement;
@@ -35,7 +36,7 @@ describe("form-control", () => {
   it("should display prefix", () => {
     const fontAwsomeCalendarIcon = "fa fa-calendar";
     const prefix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<WithPrefix {...Sandbox.args} name='testPrefix' prefix={prefix} />);
+    render(<FormControl {...Sandbox.args} name='testPrefix' before={prefix} />);
 
     const formGroup = screen.getByTestId("form-group-testPrefix") as HTMLFormElement;
     const formControlPrefix = screen.getByTestId("form-control-prefix") as HTMLSpanElement;
@@ -49,7 +50,7 @@ describe("form-control", () => {
   it("should display suffix", () => {
     const fontAwsomeCalendarIcon = "fa fa-calendar";
     const suffix = (<i className={iconClass(undefined, "calendar")} />) as JSX.Element;
-    render(<WithSuffix {...Sandbox.args} name='testSuffix' suffix={suffix} />);
+    render(<FormControl {...Sandbox.args} name='testSuffix' after={suffix} />);
 
     const formGroup = screen.getByTestId("form-group-testSuffix") as HTMLFormElement;
     const formControlSuffix = screen.getByTestId("form-control-suffix") as HTMLSpanElement;
@@ -62,7 +63,7 @@ describe("form-control", () => {
 
   it("should display description", () => {
     const description = "test description";
-    render(<WithDescription {...Sandbox.args} name='testDescription' description={description} />);
+    render(<FormControl {...Sandbox.args} name='testDescription' description={description} />);
 
     const formGroup = screen.getByTestId("form-group-testDescription") as HTMLFormElement;
     const formControlDescription = screen.getByTestId("form-control-description") as HTMLDivElement;

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

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { iconClass } from "../../../utils/iconClass";
+import { FormControl } from "./FormControl";
+/**
+ * ```tsx
+ * import {FormControl} from "@tsed/react-formio/molecules/forms/form-control/FormControl";
+ * ```
+ */
+export default {
+  title: "forms/FormControl",
+  component: FormControl,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    children: {
+      control: "object"
+    }
+  },
+  parameters: {},
+  tags: ["autodocs"]
+} satisfies Meta<typeof FormControl>;
+
+type Story = StoryObj<typeof FormControl>;
+
+export const Sandbox: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]"
+  }
+};
+
+export const Usage: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]",
+    before: <i className={iconClass(undefined, "calendar")} />
+  }
+};
+
+export const AppendAfter: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]",
+    after: <i className={iconClass(undefined, "calendar")} />
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    children: "[TEXTFIELD]"
+  }
+};

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

@@ -0,0 +1,86 @@
+import classnames from "classnames";
+import omit from "lodash/omit";
+import { HTMLAttributes, InputHTMLAttributes, PropsWithChildren, ReactNode } from "react";
+
+import { registerComponent } from "../../../registries/components";
+
+export type BaseFormControlProps<Value = unknown> = {
+  label?: string;
+  description?: string | ReactNode;
+  before?: ReactNode | string;
+  after?: ReactNode | string;
+  shadow?: boolean;
+  value?: Value;
+  onChange?: (name: string | undefined, value: Value) => void;
+  /**
+   * The input size
+   */
+  size?: "small" | string;
+};
+export type FormControlProps<
+  Value = unknown,
+  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>
+> = BaseFormControlProps<Value> & Omit<Attributes, "onChange" | "value" | "size">;
+
+export function cleanFormControlProps(props: FormControlProps, omitted: string[] = []): any {
+  return omit(props, ["label", "description", "prefix", "suffix", "size", "shadow", ...omitted]);
+}
+
+export function FormControl<Value = unknown>({
+  children,
+  name = "",
+  id = name,
+  required,
+  before,
+  after,
+  description,
+  label,
+  size,
+  className
+}: PropsWithChildren<FormControlProps<Value>>) {
+  return (
+    <div
+      data-testid={name && `form-group-${name}`}
+      id={`form-group-${name || ""}`}
+      className={classnames(
+        "form-group",
+        {
+          "-with-before": !!before,
+          "-with-after": !!after
+        },
+        size && `-size-${size}`,
+        className
+      )}
+    >
+      {label && (
+        <label htmlFor={id} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
+          {label}
+        </label>
+      )}
+      <div className={"input-group"}>
+        {before && (
+          <div className='input-group-prepend'>
+            <span className='input-group-text' data-testid='form-control-prefix'>
+              {before}
+            </span>
+          </div>
+        )}
+        {children}
+        {after && (
+          <div className='input-group-append'>
+            <span className='input-group-text' data-testid='form-control-suffix'>
+              {after}
+            </span>
+          </div>
+        )}
+      </div>
+      {description && (
+        <div data-testid='form-control-description' className='form-text text-muted'>
+          {description}
+        </div>
+      )}
+    </div>
+  );
+}
+
+registerComponent("FormControl", FormControl);

package/src/molecules/forms/input-tags/InputTags.interface.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes } from "react";
+
+import type { FormControlProps } from "../form-control/FormControl";
+
+export interface InputTagsProps<Data = string> extends FormControlProps<Data[], InputHTMLAttributes<HTMLInputElement>> {
+  layout?: "html5" | "react" | "choicesjs";
+  delimiter?: string;
+  customProperties?: Record<string, any>;
+}

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

@@ -0,0 +1,30 @@
+import { ComponentType } from "react";
+
+import { getComponent, registerComponent } from "../../../registries/components";
+import { type FormControl as DefaultFormControl } from "../form-control/FormControl";
+import type { InputTagsProps } from "./InputTags.interface";
+
+export function InputTags<Data = string>(props: InputTagsProps) {
+  const { name, id = name, label, required, description, before, after, size, className, layout = "choicesjs", ...otherProps } = props;
+
+  const FormControl = getComponent<typeof DefaultFormControl>("FormControl");
+  const Component = getComponent<ComponentType<InputTagsProps<Data>>>([`InputTags.${layout}`, "Input"]);
+
+  return (
+    <FormControl
+      id={id}
+      name={name}
+      label={label}
+      required={required}
+      description={description}
+      before={before}
+      after={after}
+      size={size}
+      className={className}
+    >
+      <Component {...(otherProps as any)} id={id} name={name} required={required} />
+    </FormControl>
+  );
+}
+
+registerComponent("InputTags", InputTags);

package/src/molecules/forms/input-tags/all.ts

@@ -0,0 +1,6 @@
+import "../form-control/FormControl";
+import "./components/ChoicesTags";
+import "./components/ReactTags";
+import "../input-text/InputText";
+export * from "./InputTags";
+export * from "./InputTags.interface";