Feat select multiple layout

.storybook/main.ts

@@ -10,6 +10,10 @@ const config: StorybookConfig = {
       titlePrefix: "Styling",
       directory: "../packages/tailwind-formio"
     },
+    {
+      titlePrefix: "Atoms",
+      directory: "../packages/react-formio/src/atoms"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"

.storybook/preview.ts

@@ -11,17 +11,14 @@ Templates.framework = "tailwind";
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    // actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
+    docs: {
+      source: { language: "tsx" }
     }
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS
-  }
+  },
+  tags: ["autodocs"]
 };
 
 export default preview;

package.json

@@ -7,12 +7,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TypedProject/tsed-formio.git"
+    "url": "https://github.com/tsedio/tsed-formio.git"
   },
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio",
   "scripts": {
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",
@@ -56,6 +56,7 @@
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.2.1",
+    "react-select": "^5.9.0",
     "react-table": "^7.8.0",
     "redux-thunk": "^2.4.1",
     "tooltip.js": "^1.3.3"

packages/react-formio-container/package.json

@@ -97,5 +97,6 @@
     "tooltip.js": {
       "optional": false
     }
-  }
+  },
+  "dependencies": {}
 }

packages/react-formio-container/src/views/forms.stories.tsx

@@ -5,9 +5,7 @@ export default {
   component: FormsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }

packages/react-formio-container/src/views/submissions.stories.tsx

@@ -7,9 +7,7 @@ export default {
   component: SubmissionsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }

packages/react-formio-stores/src/stores/auth/auth.reducers.ts

@@ -1,4 +1,4 @@
-import type { FormType, RoleType, SubmissionType } from "@tsed/react-formio";
+import { FormType, JSON, RoleType, SubmissionType } from "@tsed/react-formio";
 import { createReducer } from "@tsed/redux-utils";
 
 import {
@@ -14,7 +14,7 @@ import {
 } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 
-export interface AuthState<User = any> {
+export interface AuthState<User extends { [key: string]: JSON } = any> {
   init: boolean;
   isActive: boolean;
   user: null | SubmissionType<User>;

packages/react-formio/package.json

@@ -38,6 +38,7 @@
     "react-dnd": ">=16.0.1",
     "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
+    "react-select": ">=5.9.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },

packages/react-formio/src/atoms/icon/Icon.stories.tsx

@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Template from "@tsed/tailwind-formio";
+
+import { Icon } from "./Icon";
+
+/**
+ * Icon component to display icons based on [BxIcons](https://boxicons.com/).
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import {Icon} from "@tsed/react-formio/atoms/icon/Icon";
+ * ```
+ *
+ * ## Override Icon
+ *
+ * This component is registered with the name `Icon` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Icon", MyIconComponent);
+ * ```
+ */
+export default {
+  title: "Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: "text"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Icon>;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Usage: Story = {
+  args: {
+    name: "save"
+  }
+};
+
+export const Size: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm", "text-large", "text-xl", "text-3xl", "text-8xl"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Colors: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm text-red-600", "text-large text-primary", "text-xl text-secondary", "text-3xl text-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Rounded: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm bg-red-600", "text-large bg-primary", "text-xl bg-secondary", "text-3xl bg-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className + " rounded-full text-white p-3"} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+/**
+ * Formio needs theses icons to be displayed in the form builder and other places.
+ */
+export const PresetsForFormio: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {Object.entries(Template.templates.tailwind.ICONS).map(([icon]) => (
+          <div key={icon} className={"flex gap-3 flex-wrap"}>
+            <div
+              className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+              style={{
+                width: "100px",
+                height: "100px"
+              }}
+            >
+              <div>
+                <Icon name={icon} />
+              </div>
+              <span className='text-sm'>{icon}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

packages/react-formio/src/atoms/icon/Icon.tsx

@@ -0,0 +1,16 @@
+import cx from "classnames";
+import type { HTMLAttributes } from "react";
+
+import { registerComponent } from "../../registries/components";
+import { iconClass } from "../../utils/iconClass";
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+  iconset?: string;
+  name: string;
+}
+
+export function Icon({ iconset, name, className, ...props }: IconProps) {
+  return <i {...props} className={cx(iconClass(iconset, name), className)} />;
+}
+
+registerComponent("Icon", Icon);

packages/react-formio/src/molecules/alert/Alert.stories.tsx

@@ -16,18 +16,18 @@ export default {
   component: Alert,
   argTypes: {
     message: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     type: {
-      control: {
-        type: "select",
-        options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
-      }
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    }
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx" }
     }
   },
-  parameters: {},
   tags: ["autodocs"]
 };
 

packages/react-formio/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>
+    );
+  }
+};