From 0017a47ddff4f1d106a03548da9c7142f8423a95 Mon Sep 17 00:00:00 2001
From: Johan <johan@macair2020>
Date: Sun, 14 Jan 2024 01:20:22 +0100
Subject: [PATCH] to tailwind (mostly)

---
 index.html                                    |  13 +-
 src/components/badge/index.tsx                |   8 +-
 src/components/buttons/with-action.tsx        |   8 +-
 src/components/card/index.tsx                 |   8 +-
 src/components/card/no-frame.tsx              |   8 +-
 src/components/code/index.tsx                 |  17 +--
 src/components/form/date-range.tsx            |  20 +--
 src/components/form/file-upload.tsx           |  12 +-
 src/components/form/generator.tsx             |   5 +-
 src/components/form/inputs.tsx                |  19 ++-
 src/components/layout/utils-ui.tsx            |  18 +--
 src/components/list-assign.tsx                |  19 +--
 src/components/notifications/banner.tsx       |  20 ++-
 src/components/notifications/toast/index.tsx  |  28 ++--
 src/components/notifications/toast/unit.tsx   |  19 ++-
 src/components/spinner.tsx                    |   5 +-
 src/components/status-change/index.tsx        |  15 +-
 src/components/table/ui/index.tsx             |  43 ++++--
 src/components/table/ui/pagination.tsx        |  73 ++++------
 src/components/tabs/utils-ui.tsx              |  26 ++--
 src/components/tabs/utils.ts                  |  11 +-
 src/components/toggle.tsx                     |  13 +-
 src/components/view.tsx                       |  15 +-
 src/examples/detail/index.tsx                 |   1 +
 src/examples/simple-list/index.tsx            |  18 +--
 src/examples/simple-list/list-item.tsx        |  10 +-
 src/layout/footer.tsx                         |  14 +-
 src/layout/header.tsx                         |  48 +++----
 src/layout/index.tsx                          |  12 +-
 src/lib/components/index.tsx                  |  34 +++--
 src/lib/detail/index.tsx                      |   2 +-
 src/lib/form/file-upload.tsx                  |   9 +-
 .../form/generator2/components/buttons.tsx    |  57 ++++++++
 src/lib/form/generator2/components/index.tsx  | 112 +++++++++++++++
 src/lib/form/generator2/components/inputs.tsx | 130 ++++++++++++++++++
 .../form/generator2/components/spinner.tsx    |  13 ++
 src/lib/form/generator2/components/type.ts    |  59 ++++++++
 src/lib/form/generator2/components/utils.ts   |   6 +
 src/lib/form/generator2/index.tsx             | 112 +++++++++++++++
 src/lib/form/generator2/type.ts               |  59 ++++++++
 src/lib/form/generator2/utils.ts              |   6 +
 src/links.ts                                  |  10 +-
 42 files changed, 849 insertions(+), 286 deletions(-)
 create mode 100644 src/lib/form/generator2/components/buttons.tsx
 create mode 100644 src/lib/form/generator2/components/index.tsx
 create mode 100644 src/lib/form/generator2/components/inputs.tsx
 create mode 100644 src/lib/form/generator2/components/spinner.tsx
 create mode 100644 src/lib/form/generator2/components/type.ts
 create mode 100644 src/lib/form/generator2/components/utils.ts
 create mode 100644 src/lib/form/generator2/index.tsx
 create mode 100644 src/lib/form/generator2/type.ts
 create mode 100644 src/lib/form/generator2/utils.ts

diff --git a/index.html b/index.html
index 8fe8e7c..e3521be 100644
--- a/index.html
+++ b/index.html
@@ -5,20 +5,15 @@
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="List of headless components for React" />
+    <script src="https://cdn.tailwindcss.com"></script>
     <link
       rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
-      integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
       crossorigin="anonymous"
+      referrerpolicy="no-referrer"
     />
 
-    <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-    <!-- taken from https://www.flaticon.com/free-icon/headless_1089401?related_id=1089503&origin=search -->
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>React-headless</title>
   </head>
diff --git a/src/components/badge/index.tsx b/src/components/badge/index.tsx
index 01dbbd4..1898556 100644
--- a/src/components/badge/index.tsx
+++ b/src/components/badge/index.tsx
@@ -1,3 +1,7 @@
-const Badge = ({children}:{children:JSX.Element}) => <span className="badge bg-secondary">{children}</span>
+const Badge = ({ children }: { children: JSX.Element }) => (
+  <span className="bg-gray-600 text-white px-2 py-1 text-xs rounded">
+    {children}
+  </span>
+);
 
-export default Badge
\ No newline at end of file
+export default Badge;
diff --git a/src/components/buttons/with-action.tsx b/src/components/buttons/with-action.tsx
index 4988470..f6b6904 100644
--- a/src/components/buttons/with-action.tsx
+++ b/src/components/buttons/with-action.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React from "react";
 
-import BtnWithActionGeneric, { BtnProps } from '../../lib/buttons/with-action';
+import BtnWithActionGeneric, { BtnProps } from "../../lib/buttons/with-action";
 
 const Btn = ({ children, disabled, onClick }: BtnProps) => {
   return (
     <button
-      className="btn btn-outline-primary"
+      className={`border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded transition ease-in-out duration-150 ${
+        disabled ? "opacity-50 cursor-not-allowed" : ""
+      }`}
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
index 919ec79..3188943 100644
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@@ -3,11 +3,11 @@ import React from "react";
 import { CardProps } from "../../lib/card";
 
 const Card = ({ title, subtitle, children }: CardProps) => (
-  <div className="card">
-    <div className="card-body">
-      {title && <h5 className="card-title">{title}</h5>}
+  <div className="bg-white shadow-lg rounded-lg overflow-hidden">
+    <div className="p-4">
+      {title && <h5 className="text-lg font-bold">{title}</h5>}
       {subtitle && (
-        <h6 className="card-subtitle mb-2 text-muted">Card subtitle</h6>
+        <h6 className="text-sm text-gray-500 mb-2">Card subtitle</h6>
       )}
       {children}
     </div>
diff --git a/src/components/card/no-frame.tsx b/src/components/card/no-frame.tsx
index de976da..94d3903 100644
--- a/src/components/card/no-frame.tsx
+++ b/src/components/card/no-frame.tsx
@@ -3,11 +3,9 @@ import React from "react";
 import { CardProps } from "../../lib/card";
 
 const Card = ({ title, subtitle, children }: CardProps) => (
-  <div>
-    {title && <h5 className="card-title">{title}</h5>}
-    {subtitle && (
-      <h6 className="card-subtitle mb-2 text-muted">Card subtitle</h6>
-    )}
+  <div className="bg-white shadow-lg rounded-lg p-4">
+    {title && <h5 className="text-xl font-semibold mb-2">{title}</h5>}
+    {subtitle && <h6 className="text-md text-gray-500 mb-4">{subtitle}</h6>}
     {children}
   </div>
 );
diff --git a/src/components/code/index.tsx b/src/components/code/index.tsx
index 4e31677..f604b24 100644
--- a/src/components/code/index.tsx
+++ b/src/components/code/index.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
+import React from "react";
 import {
   Statement as StatementGeneric,
   CopyState,
-  CodeBlockProps
-} from '../../lib/code';
+  CodeBlockProps,
+} from "../../lib/code";
 
 const Block = ({
   code,
   copyState,
   copyToClipboard,
-  handleClick
+  handleClick,
 }: CodeBlockProps) => {
   const className: string =
-    'cursor-pointer rounded p-1 pb-1 px-3 text-sm text-gray-300 hover:text-white ' +
-    (copyState === CopyState.progress ? 'bg-yellow-500' : 'bg-black');
+    "cursor-pointer rounded p-1 pb-1 px-3 text-sm text-gray-300 hover:text-white " +
+    (copyState === CopyState.progress ? "bg-yellow-500" : "bg-gray-600");
 
   return (
     <span
@@ -28,10 +28,11 @@ const Block = ({
       {copyToClipboard && (
         <button
           disabled={copyState === CopyState.progress}
-          className={'btn btn-sm'}
+          className={`text-xs px-2 py-1 rounded ${
+            copyState === CopyState.copied ? "bg-green-500" : "bg-blue-500"
+          } hover:bg-blue-600 disabled:opacity-50`}
         >
           {copyState !== CopyState.copied && <span>Copy</span>}
-
           {copyState === CopyState.copied && <span>Copied</span>}
         </button>
       )}
diff --git a/src/components/form/date-range.tsx b/src/components/form/date-range.tsx
index 310d5dc..7ff8ef8 100644
--- a/src/components/form/date-range.tsx
+++ b/src/components/form/date-range.tsx
@@ -3,18 +3,22 @@ import Headless from "../../lib/form/date-range";
 
 const UI = ({ dateRange, setDateRange, handleSubmit, errors }: UIProps) => (
   <form onSubmit={handleSubmit}>
-    <div className="input-group mb-3 has-validation">
+    <div className="flex items-center mb-3">
       <input
-        type={"date"}
-        className={`form-control ${errors.start ? "is-invalid" : ""}`}
+        type="date"
+        className={`form-input border-2 px-3 py-1 rounded-l ${
+          errors.start ? "border-red-500" : "border-gray-300"
+        }`}
         placeholder="Start Date"
         value={dateRange.start || ""}
         onChange={(v) => setDateRange({ ...dateRange, start: v.target.value })}
       />
-      <span className="input-group-text"> - </span>
+      <span className="px-2 bg-gray-200">-</span>
       <input
-        type={"date"}
-        className={`form-control ${errors.end ? "is-invalid" : ""}`}
+        type="date"
+        className={`form-input border-2 px-3 py-1 rounded-r ${
+          errors.end ? "border-red-500" : "border-gray-300"
+        }`}
         placeholder="End Date"
         value={dateRange.end || ""}
         onChange={(v) => setDateRange({ ...dateRange, end: v.target.value })}
@@ -22,12 +26,12 @@ const UI = ({ dateRange, setDateRange, handleSubmit, errors }: UIProps) => (
 
       <button
         disabled={!dateRange.end || !dateRange.start}
-        className="btn btn-outline-secondary"
+        className="ml-2 bg-gray-500 hover:bg-gray-600 text-white px-4 py-1 rounded"
         type="submit"
       >
         Apply
       </button>
-      <div id="validationServerUsernameFeedback" className="invalid-feedback">
+      <div id="validationServerUsernameFeedback" className="text-red-500 pt-1">
         {errors.start?.join(" ")}
         {errors.end?.join(" ")}
       </div>
diff --git a/src/components/form/file-upload.tsx b/src/components/form/file-upload.tsx
index 728c6df..57c1535 100644
--- a/src/components/form/file-upload.tsx
+++ b/src/components/form/file-upload.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
+import React from "react";
 
-import Spinner from '../spinner';
+import Spinner from "../spinner";
 
 import FileUploadHeadless, {
-  FileComponentProps
-} from '../../lib/form/file-upload';
+  FileComponentProps,
+} from "../../lib/form/file-upload";
 
 const FileComponent = ({ onChange }: FileComponentProps) => (
-  <label>
-    <span>Select a file</span>
+  <label className="block cursor-pointer bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
+    <span className="mr-2">Select a file</span>
     <input type="file" className="hidden" onChange={onChange} />
   </label>
 );
diff --git a/src/components/form/generator.tsx b/src/components/form/generator.tsx
index ca0c657..a646805 100644
--- a/src/components/form/generator.tsx
+++ b/src/components/form/generator.tsx
@@ -9,7 +9,10 @@ const p: FormUIGeneratorProps = {
   InputWrapper: UI.InputWrapper,
   InputGeneric: UI.InputGeneric,
   Button: () => (
-    <button className="btn btn-primary" type="submit">
+    <button
+      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+      type="submit"
+    >
       Send
     </button>
   ),
diff --git a/src/components/form/inputs.tsx b/src/components/form/inputs.tsx
index 092e70a..ae2b636 100644
--- a/src/components/form/inputs.tsx
+++ b/src/components/form/inputs.tsx
@@ -4,14 +4,16 @@ import * as T from "../../lib/form/type";
 
 export const getClassName = (
   errors?: string[],
-  mainClass = "form-control"
+  mainClass = "border p-2 rounded"
 ): string => {
   const isInvalid: boolean = !!errors;
 
   const classes = [mainClass]; //
 
   if (isInvalid) {
-    classes.push("is-invalid");
+    classes.push("border-red-500");
+  } else {
+    classes.push("border-gray-300");
   }
 
   return classes.join(" ");
@@ -23,10 +25,13 @@ export const InputWrapper = ({
   errors,
 }: T.InputWrapperProps) => (
   <div className="mb-3">
-    <label className="form-label">{label}</label>
+    <label className="block text-sm font-medium text-gray-700">{label}</label>
     {children}
     {errors && (
-      <div id="validationServer03Feedback" className="invalid-feedback">
+      <div
+        id="validationServer03Feedback"
+        className="text-red-500 text-xs italic mt-1"
+      >
         {errors[0]}
       </div>
     )}
@@ -65,7 +70,7 @@ export const Textarea = ({
   value,
 }: T.InputProps<string>) => (
   <textarea
-    className={getClassName(errors)}
+    className={getClassName(errors, "border p-2 rounded resize-y")}
     value={value}
     onChange={(v) => onChange(v.target.value)}
     disabled={disabled}
@@ -80,8 +85,7 @@ export const Select = <A extends number | string>({
   disabled,
 }: T.InputProps<A>) => (
   <select
-    className={getClassName(errors, "form-select")}
-    // handle select null again
+    className={getClassName(errors, "border p-2 rounded bg-white")}
     onChange={(v) => {
       const { value } = v.target;
 
@@ -133,6 +137,7 @@ export const SelectObject = <A extends number | string>(
 
 export const Checkbox = ({ value, onChange }: T.InputProps<boolean>) => (
   <input
+    className="form-checkbox h-4 w-4 text-blue-600"
     checked={value}
     type="checkbox"
     onChange={(v) => onChange(Boolean(v.target.value))}
diff --git a/src/components/layout/utils-ui.tsx b/src/components/layout/utils-ui.tsx
index 1250a80..d829099 100644
--- a/src/components/layout/utils-ui.tsx
+++ b/src/components/layout/utils-ui.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { ColProps, HeaderProps, RowProps } from '../../lib/card';
-
-import { ButtonProps } from '../../lib/layout/type';
+import React from "react";
+import { ColProps, HeaderProps, RowProps } from "../../lib/card";
+import { ButtonProps } from "../../lib/layout/type";
 
 export const Header = ({ title, description }: HeaderProps) => (
   <>
@@ -11,19 +10,20 @@ export const Header = ({ title, description }: HeaderProps) => (
 );
 
 export const Row = ({ children }: RowProps) => (
-  <div className="row">{children}</div>
+  <div className={`grid grid-cols-12 gap-4`}>{children}</div>
 );
 
-export const Col = ({ children, width }: ColProps) => (
-  <div className={'col-md-' + width}>{children}</div>
-);
+export const Col = ({ children, width }: ColProps) => {
+  const widthClass = `col-span-${width}`;
+  return <div className={widthClass}>{children}</div>;
+};
 
 export const BackBtn = ({ onClick }: ButtonProps) => (
   <div className="float-right">
     <button
       onClick={onClick}
       type="button"
-      className=" btn-sm btn btn-secondary"
+      className="text-xs px-2 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded"
     >
       Back
     </button>
diff --git a/src/components/list-assign.tsx b/src/components/list-assign.tsx
index 014e560..c4cc9ce 100644
--- a/src/components/list-assign.tsx
+++ b/src/components/list-assign.tsx
@@ -1,8 +1,8 @@
 // taken from https://material-ui.com/components/lists/#list-controls
-import React from 'react';
-import { Checkbox } from '../components/form/inputs';
-import { ListWrapperProps } from '../lib/table/ui-type';
-import ListAssign, { UnitUIProps } from '../lib/list-assign';
+import React from "react";
+import { Checkbox } from "../components/form/inputs";
+import { ListWrapperProps } from "../lib/table/ui-type";
+import ListAssign, { UnitUIProps } from "../lib/list-assign";
 
 const Loader = ({ isLoading }: { isLoading: boolean }): JSX.Element => {
   if (isLoading !== true) {
@@ -12,19 +12,20 @@ const Loader = ({ isLoading }: { isLoading: boolean }): JSX.Element => {
   return (
     <p>
       <small>
-        <i>is being updated</i>
+        &nbsp;<i>is being updated</i>
       </small>
     </p>
   );
 };
 
-const ListWrapper = ({ children }: ListWrapperProps) => <ul>{children}</ul>;
+const ListWrapper = ({ children }: ListWrapperProps) => (
+  <ul className="list-disc pl-5">{children}</ul>
+);
 
 const ListUnitUI = ({ isChecked, label, isLoading, onChange }: UnitUIProps) => (
-  <li>
+  <li className="flex items-center">
     <Checkbox value={isChecked} onChange={onChange} />
-    &nbsp;
-    {label}
+    <span className="ml-2">{label}</span>
     <Loader isLoading={isLoading} />
   </li>
 );
diff --git a/src/components/notifications/banner.tsx b/src/components/notifications/banner.tsx
index ef6d28b..f6020f2 100644
--- a/src/components/notifications/banner.tsx
+++ b/src/components/notifications/banner.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import * as Ctx from '../../lib/context-provider/notification/context';
-
-import { NotificationType } from '../../lib/context-provider/notification/type';
+import React from "react";
+import * as Ctx from "../../lib/context-provider/notification/context";
+import { NotificationType } from "../../lib/context-provider/notification/type";
 
 interface Banner {
   text: string;
@@ -11,24 +10,23 @@ const Banner = () => {
   const { notifications, rmNotification } = Ctx.useToastContext();
 
   const banners: Banner[] = notifications
-    .filter(x => x.type === NotificationType.banner)
-    .map(x => {
+    .filter((x) => x.type === NotificationType.banner)
+    .map((x) => {
       return { text: x.text };
     });
 
   return (
-    <div className="container">
+    <div className="container mx-auto px-4">
       {banners.map((banner, i) => (
-        <div className="alert alert-primary  alert-dismissible">
+        <div className="bg-blue-500 text-white p-4 rounded flex justify-between items-center mb-4">
           {banner.text}
           <button
             type="button"
-            className="close"
-            data-dismiss="alert"
+            className="text-2xl"
             aria-label="Close"
             onClick={() => rmNotification(i)}
           >
-            <span aria-hidden="true">&times;</span>
+            &times;
           </button>
         </div>
       ))}
diff --git a/src/components/notifications/toast/index.tsx b/src/components/notifications/toast/index.tsx
index 04d9514..e0c884e 100644
--- a/src/components/notifications/toast/index.tsx
+++ b/src/components/notifications/toast/index.tsx
@@ -1,35 +1,31 @@
-import React from 'react';
+import React from "react";
 
-import ToastUnit from './unit';
+import ToastUnit from "./unit";
 
-import * as Ctx from '../../../lib/context-provider/notification/context';
+import * as Ctx from "../../../lib/context-provider/notification/context";
 import {
   MessageType,
   NotificationType,
-  ToastProp
-} from '../../../lib/context-provider/notification/type';
+  ToastProp,
+} from "../../../lib/context-provider/notification/type";
 
 const Toast = () => {
   const { notifications, rmNotification } = Ctx.useToastContext();
 
   const toasts: ToastProp[] = notifications
-    .filter(x => x.type === NotificationType.toast)
-    .map(x => {
+    .filter((x) => x.type === NotificationType.toast)
+    .map((x) => {
       return {
-        title: 'nexys',
+        title: "nexys",
         content: x.text,
-        timestring: 'sdf',
-        messageType: MessageType.info
+        timestring: "sdf",
+        messageType: MessageType.info,
       };
     });
 
   return (
-    <div
-      aria-live="polite"
-      aria-atomic="true"
-      style={{ position: 'relative', minHeight: '200px' }}
-    >
-      <div style={{ position: 'absolute', top: 0, left: 10 }}>
+    <div className="relative min-h-[200px]">
+      <div className="absolute top-0 left-2.5">
         {toasts.map((t, i) => (
           <ToastUnit key={i} idx={i} onDismiss={rmNotification} {...t} />
         ))}
diff --git a/src/components/notifications/toast/unit.tsx b/src/components/notifications/toast/unit.tsx
index 436faea..e21a991 100644
--- a/src/components/notifications/toast/unit.tsx
+++ b/src/components/notifications/toast/unit.tsx
@@ -1,36 +1,35 @@
-import React from 'react';
+import React from "react";
 
-import { ToastProp } from '../../../lib/context-provider/notification/type';
+import { ToastProp } from "../../../lib/context-provider/notification/type";
 
 const ToastUnit = ({
   idx,
   title,
   timestring,
   content,
-  onDismiss
+  onDismiss,
 }: ToastProp & { idx: number; onDismiss: (idx: number) => void }) => {
   return (
     <div
-      className="toast"
+      className="bg-white rounded-lg shadow-lg overflow-hidden"
       role="alert"
       aria-live="assertive"
       aria-atomic="true"
       style={{ opacity: 1 }}
     >
-      <div className="toast-header">
-        <strong className="mr-auto">{title}</strong>
-        <small className="text-muted">{timestring}</small>
+      <div className="flex items-center justify-between p-3 border-b border-gray-200">
+        <strong className="flex-grow">{title}</strong>
+        <small className="text-gray-500">{timestring}</small>
         <button
           type="button"
-          className="ml-2 mb-1 close"
-          data-dismiss="toast"
+          className="ml-2 text-gray-500 hover:text-gray-700"
           aria-label="Close"
           onClick={() => onDismiss(idx)}
         >
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div className="toast-body">{content}</div>
+      <div className="p-3">{content}</div>
     </div>
   );
 };
diff --git a/src/components/spinner.tsx b/src/components/spinner.tsx
index a5adae2..3c33b8b 100644
--- a/src/components/spinner.tsx
+++ b/src/components/spinner.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React from "react";
 
 export default () => (
-  <div className="spinner-border text-primary" role="status">
+  <div className="flex justify-center items-center">
+    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
     <span className="sr-only">Loading...</span>
   </div>
 );
diff --git a/src/components/status-change/index.tsx b/src/components/status-change/index.tsx
index f0d0da0..b46e8c6 100644
--- a/src/components/status-change/index.tsx
+++ b/src/components/status-change/index.tsx
@@ -4,7 +4,7 @@ import StatusChange, {
 } from "../../lib/status-change";
 
 const Layout = ({ children }: LayoutProps) => (
-  <div className="btn-group">{children}</div>
+  <div className="flex space-x-2">{children}</div>
 );
 
 const Button = ({
@@ -14,15 +14,12 @@ const Button = ({
   handleChange,
   disabled,
 }: ButtonProps) => {
-  const classes = ["btn"];
+  const baseClasses =
+    "px-4 py-2 text-sm font-medium rounded focus:outline-none";
+  const activeClasses =
+    selected === id ? "bg-blue-500 text-white" : "bg-gray-300 text-gray-700";
 
-  if (selected === id) {
-    classes.push("btn-primary");
-  } else {
-    classes.push("btn-secondary");
-  }
-
-  const className = classes.join(" ");
+  const className = `${baseClasses} ${activeClasses}`;
 
   return (
     <button
diff --git a/src/components/table/ui/index.tsx b/src/components/table/ui/index.tsx
index 64804f6..e03f628 100644
--- a/src/components/table/ui/index.tsx
+++ b/src/components/table/ui/index.tsx
@@ -22,12 +22,26 @@ import Icon from "../../icon";
 const Loader = () => <p>Loading...</p>;
 
 const Alert = ({
-  // type = 'success',
   children,
+  type = "info",
 }: {
   children: React.ReactNode | JSX.Element;
   type?: "error" | "success" | "info" | "warning";
-}): JSX.Element => <div className={"alert"}>{children}</div>;
+}): JSX.Element => {
+  let bgColor = "bg-blue-100";
+  switch (type) {
+    case "error":
+      bgColor = "bg-red-100";
+      break;
+    case "success":
+      bgColor = "bg-green-100";
+      break;
+    case "warning":
+      bgColor = "bg-yellow-100";
+      break;
+  }
+  return <div className={`p-4 ${bgColor}`}>{children}</div>;
+};
 
 const GlobalSearch = (props: UIType.GlobalSearchProps) => {
   if (!props.search) {
@@ -35,10 +49,10 @@ const GlobalSearch = (props: UIType.GlobalSearchProps) => {
   }
 
   return (
-    <div className="mb-3 col-sm-3">
+    <div className="mb-3 w-3/4 max-w-sm">
       <input
         type="text"
-        className="form-control"
+        className="form-control p-2 border border-gray-300 rounded"
         onChange={(v) =>
           props.onChange({ name: "globalSearch", value: v.target.value })
         }
@@ -47,6 +61,7 @@ const GlobalSearch = (props: UIType.GlobalSearchProps) => {
     </div>
   );
 };
+
 const PopoverFilter = () => <></>;
 const FilterUnit = () => <></>;
 
@@ -117,14 +132,17 @@ export const OrderController = (props: OrderControllerProps): JSX.Element => {
 
 export const ListWrapper = (props: ListWrapperProps): JSX.Element => {
   const { children } = props;
-  return <div className="table-responsive-sm">{children}</div>;
+  return <div className="overflow-x-auto">{children}</div>;
 };
 
 export const ListContainer = (props: ListContainerProps): JSX.Element => {
   const { children, maxHeight, stickyHeader = false } = props;
   return (
-    <div className={"container"} style={maxHeight ? { maxHeight } : undefined}>
-      <table className={"table table-striped"}>{children}</table>
+    <div
+      className="container mx-auto"
+      style={maxHeight ? { maxHeight } : undefined}
+    >
+      <table className="table-auto w-full">{children}</table>
     </div>
   );
 };
@@ -165,7 +183,7 @@ export const PaginationWrapper = (
 ): JSX.Element => {
   return (
     <nav>
-      <ul className="pagination">{props.children}</ul>
+      <ul className="flex list-none">{props.children}</ul>
     </nav>
   );
 };
@@ -175,17 +193,18 @@ export const PaginationUnit = (
 ): JSX.Element | null => {
   const { isActive, isDisabled, children, onClick } = props;
 
-  // here we disable the button in case it is not valid
   if (isDisabled) {
     return null;
   }
 
   const className =
-    "page-item" + (isActive ? " active" : "") + (isDisabled ? " disabled" : "");
+    "px-4 py-2 mx-1 border border-gray-300 rounded" +
+    (isActive ? " bg-blue-500 text-white" : " bg-white") +
+    (isDisabled ? " opacity-50 cursor-not-allowed" : "");
 
   return (
-    <li className={className}>
-      <button className="page-link" onClick={onClick}>
+    <li className="flex">
+      <button className={className} onClick={onClick}>
         {children}
       </button>
     </li>
diff --git a/src/components/table/ui/pagination.tsx b/src/components/table/ui/pagination.tsx
index 5c7115e..cf09dd9 100644
--- a/src/components/table/ui/pagination.tsx
+++ b/src/components/table/ui/pagination.tsx
@@ -1,66 +1,41 @@
-import React from 'react';
+import React from "react";
 
 import {
   getPagination,
-  getPageTiles
-} from '../../../lib/table/utils/pagination-utils';
-import { PaginationProps } from '../../../lib/table/ui-type';
-// import { ChevronLeftIcon, ChevronRightIcon } from "../../../icons";
-
-const classesCommon = [
-  'h-8',
-  'w-8',
-  'mr-1',
-  'flex',
-  'justify-center',
-  'items-center',
-  'rounded-full',
-  'cursor-pointer'
-].join(' ');
-const classesInactive = ['bg-gray-50', 'hover:bg-gray-100'].join(' ');
-const classesActive = ['bg-primary', 'text-white'].join(' ');
+  getPageTiles,
+} from "../../../lib/table/utils/pagination-utils";
+import { PaginationProps } from "../../../lib/table/ui-type";
 
 const Pagination = ({
   n, // number of records returned
   nPerPage, // number of records per page
-  idx, // page idx
-  onClick // onClick event
+  idx, // page index
+  onClick, // onClick event
 }: PaginationProps): JSX.Element | null => {
   if (n === 0) {
     return null;
   }
 
-  // get number of pages
   const { nPage } = getPagination(n, nPerPage);
-
-  // const pages: (number | null)[] = new Array(nPage)
-  //   .fill(1)
-  //   .map((_x, i) => i + 1);
   const pages = getPageTiles(idx, nPage);
 
   return (
-    <nav aria-label="Page navigation example">
-      <ul className="pagination">
+    <nav aria-label="Page navigation example" className="flex justify-center">
+      <ul className="flex list-none">
         <li className="page-item">
-          <a
-            style={{ cursor: 'pointer' }}
-            className="page-link"
+          <button
+            className="h-8 w-8 mr-1 flex justify-center items-center rounded-full cursor-pointer bg-gray-50 hover:bg-gray-100"
             onClick={idx > 1 ? () => onClick(idx - 1) : undefined}
           >
             Previous
-          </a>
+          </button>
         </li>
 
         {pages.map((page, i) => {
           if (page < 0) {
             return (
-              <li key={i}>
-                <span
-                  aria-current="page"
-                  className={`${classesCommon} ${classesInactive}`}
-                >
-                  ...
-                </span>
+              <li key={i} className="flex items-center justify-center mx-1">
+                <span>...</span>
               </li>
             );
           }
@@ -68,28 +43,28 @@ const Pagination = ({
           const isActive = idx === page;
 
           return (
-            <li className={`page-item` + (isActive ? ' active' : '')} key={i}>
-              <a
-                style={{ cursor: 'pointer' }}
-                className="page-link"
+            <li key={i} className="flex items-center justify-center mx-1">
+              <button
+                className={`h-8 w-8 flex justify-center items-center rounded-full cursor-pointer ${
+                  isActive
+                    ? "bg-primary text-white"
+                    : "bg-gray-50 hover:bg-gray-100"
+                }`}
                 onClick={() => onClick(page)}
-                aria-current="page"
               >
                 {page}
-              </a>
+              </button>
             </li>
           );
         })}
 
         <li className="page-item">
-          <a
-            style={{ cursor: 'pointer' }}
-            className="page-link"
+          <button
+            className="h-8 w-8 mr-1 flex justify-center items-center rounded-full cursor-pointer bg-gray-50 hover:bg-gray-100"
             onClick={idx < nPage ? () => onClick(idx + 1) : undefined}
           >
-            {/* <ChevronRightIcon className="h-5 w-5" aria-hidden="true" /> */}
             Right
-          </a>
+          </button>
         </li>
       </ul>
     </nav>
diff --git a/src/components/tabs/utils-ui.tsx b/src/components/tabs/utils-ui.tsx
index a0e54bf..5a7db4c 100644
--- a/src/components/tabs/utils-ui.tsx
+++ b/src/components/tabs/utils-ui.tsx
@@ -1,14 +1,17 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { getClassName } from './utils';
-import * as T from '../../lib/tabs/type';
+import React from "react";
+import { Link } from "react-router-dom";
+import { getClassName } from "./utils";
+import * as T from "../../lib/tabs/type";
 
 export const Li = ({ label, onClick, isSelected }: T.LiProps) => (
   <li className="nav-item">
     <a
-      className={getClassName(isSelected)}
+      className={`${getClassName(isSelected)} ${
+        isSelected
+          ? "text-blue-500 border-b-2 border-blue-500"
+          : "text-gray-600 hover:text-blue-500"
+      } cursor-pointer`}
       onClick={onClick}
-      style={{ cursor: 'pointer' }}
     >
       {label}
     </a>
@@ -17,12 +20,19 @@ export const Li = ({ label, onClick, isSelected }: T.LiProps) => (
 
 export const LiNav = ({ label, path, isSelected }: T.LiNavigation) => (
   <li className="nav-item">
-    <Link to={path} className={getClassName(isSelected)}>
+    <Link
+      to={path}
+      className={`${getClassName(isSelected)} ${
+        isSelected
+          ? "text-blue-500 border-b-2 border-blue-500"
+          : "text-gray-600 hover:text-blue-500"
+      }`}
+    >
       {label}
     </Link>
   </li>
 );
 
 export const Ul = ({ children }: T.UlProps) => (
-  <ul className="nav nav-pills">{children}</ul>
+  <ul className="flex space-x-4">{children}</ul>
 );
diff --git a/src/components/tabs/utils.ts b/src/components/tabs/utils.ts
index c2690fb..30bc4c7 100644
--- a/src/components/tabs/utils.ts
+++ b/src/components/tabs/utils.ts
@@ -1,9 +1,8 @@
 export const getClassName = (isSelected: boolean) => {
-  const classNames = ['nav-link'];
+  const baseClasses = "px-3 py-2 rounded-md text-sm font-medium"; // base styles
+  const activeClasses = isSelected
+    ? "bg-blue-500 text-white"
+    : "text-gray-600 hover:bg-blue-500 hover:text-white";
 
-  if (isSelected) {
-    classNames.push('active');
-  }
-
-  return classNames.join(' ');
+  return `${baseClasses} ${activeClasses}`;
 };
diff --git a/src/components/toggle.tsx b/src/components/toggle.tsx
index 3b62b5e..2a86ad0 100644
--- a/src/components/toggle.tsx
+++ b/src/components/toggle.tsx
@@ -1,15 +1,10 @@
 import { FormWrapperProps } from "../lib/form/form-wrapper";
 import { ViewStructureUnit } from "../lib/view";
-import ViewGeneric, { RowProps, toViewStructure } from "../lib/view";
+import ViewGeneric, { toViewStructure } from "../lib/view";
 import ToggleHeadless, { LayoutProps } from "../lib/toggle";
 import { FormViewDef } from "../lib/form/type";
 import PreForm from "./form/generator";
-
-const Row = (p: RowProps) => (
-  <li>
-    {p.label}: {p.value}
-  </li>
-);
+import { Row } from "./view";
 
 const View = ViewGeneric(Row);
 
@@ -17,7 +12,7 @@ const LayoutView = ({ setIsForm, children }: LayoutProps) => (
   <>
     {children}
     <button
-      className="btn btn-sm btn-secondary"
+      className="text-xs bg-gray-600 hover:bg-gray-700 text-white py-1 px-3 rounded"
       onClick={() => setIsForm(true)}
     >
       Edit
@@ -29,7 +24,7 @@ const LayoutForm = ({ setIsForm, children }: LayoutProps) => (
   <>
     {children}
     <button
-      className="btn btn-sm btn-secondary"
+      className="text-xs bg-gray-600 hover:bg-gray-700 text-white py-1 px-3 rounded"
       onClick={() => setIsForm(false)}
     >
       Back
diff --git a/src/components/view.tsx b/src/components/view.tsx
index 634a9f5..4004f10 100644
--- a/src/components/view.tsx
+++ b/src/components/view.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 
-import ViewGeneric, { LayoutProps, RowProps } from '../lib/view';
-import Card from '../components/card';
+import ViewGeneric, { LayoutProps, RowProps } from "../lib/view";
+import Card from "../components/card";
 
 const Layout = ({ children }: LayoutProps) => (
   <Card>
@@ -9,10 +9,11 @@ const Layout = ({ children }: LayoutProps) => (
   </Card>
 );
 
-const Row = (p: RowProps) => (
-  <li>
-    {p.label}: {p.value}
-  </li>
+export const Row = (p: RowProps) => (
+  <dl className="flex flex-wrap">
+    <dt className="font-semibold w-1/3">{p.label}:</dt>
+    <dd className="w-2/3">{p.value}</dd>
+  </dl>
 );
 
 const View = ViewGeneric(Row, Layout);
diff --git a/src/examples/detail/index.tsx b/src/examples/detail/index.tsx
index 8d41040..185018e 100644
--- a/src/examples/detail/index.tsx
+++ b/src/examples/detail/index.tsx
@@ -51,6 +51,7 @@ const cards: T.Card<Profile>[] = [
   { title: "second", Component: ({ data }) => <p>{data.firstName}</p> },
   {
     title: "third",
+    width: 6,
     Component: ({ data }) => {
       return <p>{data.firstName} hered </p>;
     },
diff --git a/src/examples/simple-list/index.tsx b/src/examples/simple-list/index.tsx
index 1e8a34d..9a2dacf 100644
--- a/src/examples/simple-list/index.tsx
+++ b/src/examples/simple-list/index.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
+import React from "react";
 
-import ListAdd from './list-add';
-import ListForm from './list-form';
-import ListPosition from './list-position';
+import ListAdd from "./list-add";
+import ListForm from "./list-form";
+import ListPosition from "./list-position";
 
 export default () => (
   <>
-    <h1>Simple list</h1>
+    <h1 className="text-2xl font-bold mb-4">Simple list</h1>
 
-    <div className="row">
-      <div className="col-md-6">
+    <div className="flex flex-wrap -mx-2">
+      <div className="w-full md:w-1/2 px-2 mb-4">
         <ListAdd />
       </div>
 
-      <div className="col-md-6">
+      <div className="w-full md:w-1/2 px-2 mb-4">
         <ListForm />
       </div>
 
-      <div className="col-md-6">
+      <div className="w-full md:w-1/2 px-2 mb-4">
         <ListPosition />
       </div>
     </div>
diff --git a/src/examples/simple-list/list-item.tsx b/src/examples/simple-list/list-item.tsx
index 479bda9..4158907 100644
--- a/src/examples/simple-list/list-item.tsx
+++ b/src/examples/simple-list/list-item.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
+import React from "react";
 
 const ListItem = ({
   title,
   children,
-  right
+  right,
 }: {
   title: string;
   children?: JSX.Element;
   right?: JSX.Element;
 }) => {
   return (
-    <li className="list-group-item d-flex justify-content-between align-items-start">
-      <div className="ms-2 me-auto">
-        <div className="fw-bold">{title}</div>
+    <li className="flex justify-between items-center py-2">
+      <div className="ml-2 mr-auto">
+        <div className="font-semibold">{title}</div>
         {children}
       </div>
       {right}
diff --git a/src/layout/footer.tsx b/src/layout/footer.tsx
index fdeeb28..324a1f6 100644
--- a/src/layout/footer.tsx
+++ b/src/layout/footer.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { github, version } from '../config';
+import React from "react";
+import { github, version } from "../config";
 
 export default () => (
   <footer>
-    <div className="container">
-      <p>
-        <small>
-          <a href={github.version}>{version}</a>
-        </small>
+    <div className="container mx-auto px-4">
+      <p className="text-sm">
+        <a href={github.version} className="text-blue-600 hover:text-blue-800">
+          {version}
+        </a>
       </p>
     </div>
   </footer>
diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index 42fad0f..d0068b6 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -1,33 +1,29 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { menus } from '../links';
-import { title } from '../config';
-const style = {
-  borderTop: '1px solid #e5e5e5',
-  borderBottom: '1px solid #e5e5e5',
-  boxShadow: '0 .25rem .75rem rgba(0, 0, 0, .05)'
-};
+import React from "react";
+import { Link } from "react-router-dom";
+import { menus } from "../links";
+import { title } from "../config";
 
 export default () => (
-  <header>
-    <div
-      style={style}
-      className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white"
-    >
-      <h5 className="my-0 mr-md-auto font-weight-normal">
-        <Link className="nav-link" to={'/'}>
-          {title}
-        </Link>
-      </h5>
-      <ul className="nav justify-content-end">
-        {menus.map((menu, i) => (
-          <li className="nav-item" key={i}>
-            <Link className="nav-link" key={i} to={menu.link}>
+  <header className="bg-white border-b shadow-sm">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="flex justify-between items-center py-3 md:justify-start md:space-x-10">
+        <div className="flex justify-start lg:w-0 lg:flex-1">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            {title}
+          </Link>
+        </div>
+        <nav className="hidden md:flex space-x-10">
+          {menus.map((menu, i) => (
+            <Link
+              key={i}
+              to={menu.link}
+              className="text-base font-medium text-gray-500 hover:text-gray-900"
+            >
               {menu.name}
             </Link>
-          </li>
-        ))}
-      </ul>
+          ))}
+        </nav>
+      </div>
     </div>
   </header>
 );
diff --git a/src/layout/index.tsx b/src/layout/index.tsx
index 6ccc6f0..cc7f254 100644
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import Footer from './footer';
-import Header from './header';
+import Footer from "./footer";
+import Header from "./header";
 
 //import { BrowserRouter as Router } from 'react-router-dom';
 //import { basename } from '../config';
 
 const Layout = ({ children }: { children: any }) => (
-  <div className="d-flex flex-column min-vh-100">
+  <div className="flex flex-col min-h-screen">
     <Header />
 
-    <main className="flex-fill">
-      <div className="container">{children}</div>
+    <main className="flex-grow">
+      <div className="container mx-auto px-4">{children}</div>
     </main>
 
     <Footer />
diff --git a/src/lib/components/index.tsx b/src/lib/components/index.tsx
index 24e2ea3..025aa01 100644
--- a/src/lib/components/index.tsx
+++ b/src/lib/components/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 
 export interface LoadDataAsyncProps<A> {
   Component: ({ data }: { data: A }) => JSX.Element;
@@ -9,8 +9,26 @@ export interface LoadDataAsyncProps<A> {
 export const LoadDataAsync =
   (Spinner: () => JSX.Element) =>
   <A,>({ Component, getData, ComponentOnFail }: LoadDataAsyncProps<A>) => {
-    const [data, setData] = React.useState<A | undefined>(undefined);
-    const [error, setError] = React.useState<any | undefined>();
+    const [data, setData] = useState<A | undefined>(undefined);
+    const [error, setError] = useState<any | undefined>(undefined);
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      getData()
+        .then((fetchedData) => {
+          setData(fetchedData);
+          setIsLoading(false);
+        })
+        .catch((err) => {
+          setError(err);
+          setIsLoading(false);
+        });
+      // Empty dependency array ensures this effect runs only once after the initial render
+    }, []);
+
+    if (isLoading || data === undefined) {
+      return <Spinner />;
+    }
 
     if (error) {
       console.error("Data load failed", error);
@@ -19,15 +37,7 @@ export const LoadDataAsync =
         return <ComponentOnFail error={error} />;
       }
 
-      throw Error(error);
-    }
-
-    if (data === undefined) {
-      getData()
-        .then((data) => setData(data))
-        .catch((err) => setError(err));
-
-      return <Spinner />;
+      throw new Error(error);
     }
 
     return <Component data={data} />;
diff --git a/src/lib/detail/index.tsx b/src/lib/detail/index.tsx
index be0554a..5123121 100644
--- a/src/lib/detail/index.tsx
+++ b/src/lib/detail/index.tsx
@@ -11,7 +11,7 @@ const DetailHeadless =
     ToggleFromDef: <A, Out>(
       def: FormViewDef<A>[],
       apiCall: (data: A) => Promise<Out>
-    ) => ({ data: dataIn }: { data: A }) => JSX.Element
+    ) => ({ data }: { data: A }) => JSX.Element
   ) =>
   <A, Out = any>({
     cards: preCards = [],
diff --git a/src/lib/form/file-upload.tsx b/src/lib/form/file-upload.tsx
index 05d2f55..a45371f 100644
--- a/src/lib/form/file-upload.tsx
+++ b/src/lib/form/file-upload.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 export interface FileComponentProps {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
@@ -16,21 +16,20 @@ const FileUpload =
   ({ onSuccess }: FileUploadProps) => {
     const [loading, setLoading] = useState<boolean>(false);
     const handleChange = async ({
-      target
+      target,
     }: React.ChangeEvent<HTMLInputElement>) => {
-      console.log('here');
       setLoading(true);
 
       const { files }: { files: FileList | null } = target;
 
       if (!files) {
-        throw Error('file is undefined');
+        throw Error("file is undefined");
       }
 
       const fileArray: File[] = Array.from(files);
 
       if (fileArray.length === 0) {
-        throw Error('file array is empty');
+        throw Error("file array is empty");
       }
 
       const [file] = fileArray;
diff --git a/src/lib/form/generator2/components/buttons.tsx b/src/lib/form/generator2/components/buttons.tsx
new file mode 100644
index 0000000..0989edc
--- /dev/null
+++ b/src/lib/form/generator2/components/buttons.tsx
@@ -0,0 +1,57 @@
+import { SubmitButtonProps } from "../type";
+import Spinner from "./spinner";
+
+const getButtonClassName = (context?: "primary") => {
+  const classBase = "m-2 px-4 py-2 border rounded-md text-sm font-medium ";
+
+  if (context === "primary") {
+    return (
+      classBase +
+      "border-transparent rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-blue-300"
+    );
+  }
+  return classBase + "hover:bg-gray-100 px-4 py-2";
+};
+
+export const Button = ({
+  onClick,
+  context,
+  disabled,
+  type,
+  children,
+}: {
+  type?: "submit";
+  disabled?: boolean;
+  context?: "primary";
+  onClick?: () => void;
+  children: string | JSX.Element;
+}) => {
+  const className = getButtonClassName(context);
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={className}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const SubmitButton = ({ disabled, loading }: SubmitButtonProps) => {
+  if (loading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Button type="submit" disabled={disabled} context="primary">
+      Submit
+    </Button>
+  );
+};
+
+export const BackButton = ({ onClick }: { onClick: () => void }) => (
+  <Button onClick={onClick}>Back</Button>
+);
diff --git a/src/lib/form/generator2/components/index.tsx b/src/lib/form/generator2/components/index.tsx
new file mode 100644
index 0000000..74529f2
--- /dev/null
+++ b/src/lib/form/generator2/components/index.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+
+import * as T from "./type";
+import { isNotPartial } from "./utils";
+
+interface FormWrapperProps<A, B> {
+  onSuccess: (formData: A, asyncCallResponse?: B) => void;
+  clientValidationFunction?: <A>(_a: Partial<A>) => T.FormErrors<A>;
+  asyncCall?: (formData: A) => Promise<B>;
+  FormUI: (props: T.FormUIProps<A>) => JSX.Element;
+  errors?: T.FormErrors<A>;
+  children?: JSX.Element;
+}
+
+export const FormWrapper = <A, B>({
+  onSuccess,
+  clientValidationFunction,
+  FormUI,
+  errors: externalErrors,
+  asyncCall,
+  children,
+}: FormWrapperProps<A, B>) => {
+  const [formData, setFormData] = React.useState<Partial<A>>({});
+  const [errors, setErrors] = React.useState<T.FormErrors<A>>(
+    externalErrors || {}
+  );
+  const [loading, setLoading] = React.useState<boolean>(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // client validation
+    const validation = clientValidationFunction
+      ? clientValidationFunction(formData)
+      : {};
+
+    if (!isNotPartial(formData, validation)) {
+      // errors found
+      setErrors(validation);
+      return;
+    }
+
+    // reset errors
+    setErrors({});
+    // and pass value up
+
+    if (asyncCall) {
+      setLoading(true);
+      asyncCall(formData)
+        .then((response) => {
+          onSuccess(formData, response);
+        })
+        .catch((x) => setErrors(x))
+        .finally(() => setLoading(false));
+
+      return;
+    }
+
+    onSuccess(formData);
+  };
+
+  return (
+    <FormUI
+      loading={loading}
+      formData={formData}
+      setFormData={setFormData}
+      errors={errors}
+      onSubmit={handleSubmit}
+    >
+      {children}
+    </FormUI>
+  );
+};
+
+//
+
+export const generateFormUI =
+  (
+    InputGeneric: (uxType: T.UXType) => (a: T.InputProps<any>) => JSX.Element,
+    Wrapper: (a: T.WrapperProps) => JSX.Element,
+    SubmitButton: (a: T.SubmitButtonProps) => JSX.Element
+  ) =>
+  <A,>(formDef: T.FormDefUnit<A>[]) =>
+  (props: T.FormUIProps<A>): JSX.Element =>
+    (
+      <form onSubmit={props.onSubmit}>
+        {formDef.map(({ name, uxType, label, placeholder, info }, key) => {
+          const Input = InputGeneric(uxType);
+
+          return (
+            <Wrapper
+              key={key}
+              label={label}
+              error={props.errors[name]}
+              info={info}
+            >
+              <Input
+                disabled={props.loading}
+                placeholder={placeholder}
+                value={props.formData[name]}
+                onChange={(value) =>
+                  props.setFormData({ ...props.formData, [name]: value })
+                }
+              />
+            </Wrapper>
+          );
+        })}
+
+        <SubmitButton disabled={props.loading} />
+        {props.children}
+      </form>
+    );
diff --git a/src/lib/form/generator2/components/inputs.tsx b/src/lib/form/generator2/components/inputs.tsx
new file mode 100644
index 0000000..57479be
--- /dev/null
+++ b/src/lib/form/generator2/components/inputs.tsx
@@ -0,0 +1,130 @@
+import {
+  InputOptionProps,
+  InputProps,
+  OptionUnit,
+  UXType,
+  WrapperProps,
+} from "../type";
+
+export const Wrapper = ({ label, info, error, children }: WrapperProps) => (
+  <div className="p-2 ">
+    <h3 className="text-sm font-medium text-gray-800 mb-1">{label}</h3>
+    <span className="text-xs text-gray-500 mb-2 block">{info}</span>
+    {children}
+    <span className="text-xs text-red-600 mt-2 block">{error}</span>
+  </div>
+);
+
+export const Input = ({
+  value,
+  onChange,
+  disabled,
+  placeholder,
+}: InputProps<string>) => (
+  <input
+    type={"text"}
+    placeholder={placeholder}
+    disabled={disabled}
+    value={value || ""}
+    onChange={(e) => onChange(e.target.value)}
+    className="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:bg-gray-100 disabled:cursor-not-allowed"
+  />
+);
+
+export const InputNumber = ({
+  value,
+  onChange,
+  disabled,
+}: InputProps<number>) => (
+  <input
+    type={"number"}
+    disabled={disabled}
+    value={value || ""}
+    onChange={(e) => {
+      const v = e.target.value;
+
+      const n = Number(v);
+
+      if (isNaN(n)) {
+        return;
+      }
+
+      onChange(n);
+    }}
+  />
+);
+
+export const InputCheckbox = ({
+  value,
+  onChange,
+  disabled,
+}: InputProps<boolean>) => (
+  <input
+    type={"checkbox"}
+    checked={value || false}
+    disabled={disabled}
+    onChange={(e) => onChange(e.target.checked)}
+  />
+);
+
+export const InputOptions = <Id,>({
+  value,
+  onChange,
+  options,
+}: InputOptionProps<OptionUnit<Id>, Id>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const v = e.target.value;
+
+    const optionSelected = options.find(
+      ({ id }) => (id as number).toString() === v
+    );
+    if (optionSelected) {
+      onChange(optionSelected);
+    }
+
+    console.log(optionSelected);
+  };
+
+  return (
+    <select
+      value={value?.id as string | number}
+      onChange={handleChange}
+      className="block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"
+    >
+      <option />
+      {options.map(({ id, name }, key) => (
+        <option key={key} value={id as string | number}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export const InputOptionsScalar = <Id,>({
+  value,
+  onChange,
+  options,
+}: InputOptionProps<Id, Id>) => {
+  const f = options.find((x) => x.id === value);
+  return (
+    <InputOptions
+      options={options}
+      value={f}
+      onChange={(v) => onChange(v.id)}
+    />
+  );
+};
+
+export const InputGeneric = (
+  uxType: UXType
+): ((props: InputProps<any>) => JSX.Element) => {
+  switch (uxType) {
+    case UXType.checkbox:
+      return InputCheckbox;
+    case UXType.number:
+      return InputNumber;
+    default:
+      return Input;
+  }
+};
diff --git a/src/lib/form/generator2/components/spinner.tsx b/src/lib/form/generator2/components/spinner.tsx
new file mode 100644
index 0000000..dbcb99e
--- /dev/null
+++ b/src/lib/form/generator2/components/spinner.tsx
@@ -0,0 +1,13 @@
+// src/components/Spinner.tsx
+
+import React from "react";
+
+const Spinner: React.FC = () => {
+  return (
+    <div className="flex justify-center items-center">
+      <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500"></div>
+    </div>
+  );
+};
+
+export default Spinner;
diff --git a/src/lib/form/generator2/components/type.ts b/src/lib/form/generator2/components/type.ts
new file mode 100644
index 0000000..a5962fe
--- /dev/null
+++ b/src/lib/form/generator2/components/type.ts
@@ -0,0 +1,59 @@
+export type FormErrors<A> = {
+  [k in keyof A]?: string;
+};
+
+export interface FormUIProps<A> {
+  loading: boolean;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  errors: FormErrors<A>;
+  formData: Partial<A>;
+  setFormData: (x: Partial<A>) => void;
+  children?: JSX.Element;
+}
+
+export interface WrapperProps {
+  label?: string;
+  info?: string;
+  error?: string;
+  children: JSX.Element;
+}
+
+export interface OptionUnit<Id = string> {
+  id: Id;
+  name: string;
+}
+
+export interface InputProps<T> {
+  onChange: (s: T) => void;
+  value?: T;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export interface InputOptionProps<A, Id> extends InputProps<A> {
+  options: OptionUnit<Id>[];
+}
+
+export interface SubmitButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface BackButtonProps {
+  onClick: () => void;
+}
+
+export enum UXType {
+  text = 1,
+  number = 2,
+  checkbox = 3,
+}
+
+export interface FormDefUnit<A> {
+  uxType: UXType;
+  label: string;
+  description?: string;
+  name: keyof A;
+  placeholder?: string;
+  info?: string;
+}
diff --git a/src/lib/form/generator2/components/utils.ts b/src/lib/form/generator2/components/utils.ts
new file mode 100644
index 0000000..e3521ef
--- /dev/null
+++ b/src/lib/form/generator2/components/utils.ts
@@ -0,0 +1,6 @@
+import { FormErrors } from "./type";
+
+export const isNotPartial = <A>(
+  formData: Partial<A>,
+  formErrors: FormErrors<A>
+): formData is A => Object.keys(formErrors).length === 0;
diff --git a/src/lib/form/generator2/index.tsx b/src/lib/form/generator2/index.tsx
new file mode 100644
index 0000000..74529f2
--- /dev/null
+++ b/src/lib/form/generator2/index.tsx
@@ -0,0 +1,112 @@
+import React from "react";
+
+import * as T from "./type";
+import { isNotPartial } from "./utils";
+
+interface FormWrapperProps<A, B> {
+  onSuccess: (formData: A, asyncCallResponse?: B) => void;
+  clientValidationFunction?: <A>(_a: Partial<A>) => T.FormErrors<A>;
+  asyncCall?: (formData: A) => Promise<B>;
+  FormUI: (props: T.FormUIProps<A>) => JSX.Element;
+  errors?: T.FormErrors<A>;
+  children?: JSX.Element;
+}
+
+export const FormWrapper = <A, B>({
+  onSuccess,
+  clientValidationFunction,
+  FormUI,
+  errors: externalErrors,
+  asyncCall,
+  children,
+}: FormWrapperProps<A, B>) => {
+  const [formData, setFormData] = React.useState<Partial<A>>({});
+  const [errors, setErrors] = React.useState<T.FormErrors<A>>(
+    externalErrors || {}
+  );
+  const [loading, setLoading] = React.useState<boolean>(false);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    // client validation
+    const validation = clientValidationFunction
+      ? clientValidationFunction(formData)
+      : {};
+
+    if (!isNotPartial(formData, validation)) {
+      // errors found
+      setErrors(validation);
+      return;
+    }
+
+    // reset errors
+    setErrors({});
+    // and pass value up
+
+    if (asyncCall) {
+      setLoading(true);
+      asyncCall(formData)
+        .then((response) => {
+          onSuccess(formData, response);
+        })
+        .catch((x) => setErrors(x))
+        .finally(() => setLoading(false));
+
+      return;
+    }
+
+    onSuccess(formData);
+  };
+
+  return (
+    <FormUI
+      loading={loading}
+      formData={formData}
+      setFormData={setFormData}
+      errors={errors}
+      onSubmit={handleSubmit}
+    >
+      {children}
+    </FormUI>
+  );
+};
+
+//
+
+export const generateFormUI =
+  (
+    InputGeneric: (uxType: T.UXType) => (a: T.InputProps<any>) => JSX.Element,
+    Wrapper: (a: T.WrapperProps) => JSX.Element,
+    SubmitButton: (a: T.SubmitButtonProps) => JSX.Element
+  ) =>
+  <A,>(formDef: T.FormDefUnit<A>[]) =>
+  (props: T.FormUIProps<A>): JSX.Element =>
+    (
+      <form onSubmit={props.onSubmit}>
+        {formDef.map(({ name, uxType, label, placeholder, info }, key) => {
+          const Input = InputGeneric(uxType);
+
+          return (
+            <Wrapper
+              key={key}
+              label={label}
+              error={props.errors[name]}
+              info={info}
+            >
+              <Input
+                disabled={props.loading}
+                placeholder={placeholder}
+                value={props.formData[name]}
+                onChange={(value) =>
+                  props.setFormData({ ...props.formData, [name]: value })
+                }
+              />
+            </Wrapper>
+          );
+        })}
+
+        <SubmitButton disabled={props.loading} />
+        {props.children}
+      </form>
+    );
diff --git a/src/lib/form/generator2/type.ts b/src/lib/form/generator2/type.ts
new file mode 100644
index 0000000..a5962fe
--- /dev/null
+++ b/src/lib/form/generator2/type.ts
@@ -0,0 +1,59 @@
+export type FormErrors<A> = {
+  [k in keyof A]?: string;
+};
+
+export interface FormUIProps<A> {
+  loading: boolean;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  errors: FormErrors<A>;
+  formData: Partial<A>;
+  setFormData: (x: Partial<A>) => void;
+  children?: JSX.Element;
+}
+
+export interface WrapperProps {
+  label?: string;
+  info?: string;
+  error?: string;
+  children: JSX.Element;
+}
+
+export interface OptionUnit<Id = string> {
+  id: Id;
+  name: string;
+}
+
+export interface InputProps<T> {
+  onChange: (s: T) => void;
+  value?: T;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export interface InputOptionProps<A, Id> extends InputProps<A> {
+  options: OptionUnit<Id>[];
+}
+
+export interface SubmitButtonProps {
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface BackButtonProps {
+  onClick: () => void;
+}
+
+export enum UXType {
+  text = 1,
+  number = 2,
+  checkbox = 3,
+}
+
+export interface FormDefUnit<A> {
+  uxType: UXType;
+  label: string;
+  description?: string;
+  name: keyof A;
+  placeholder?: string;
+  info?: string;
+}
diff --git a/src/lib/form/generator2/utils.ts b/src/lib/form/generator2/utils.ts
new file mode 100644
index 0000000..e3521ef
--- /dev/null
+++ b/src/lib/form/generator2/utils.ts
@@ -0,0 +1,6 @@
+import { FormErrors } from "./type";
+
+export const isNotPartial = <A>(
+  formData: Partial<A>,
+  formErrors: FormErrors<A>
+): formData is A => Object.keys(formErrors).length === 0;
diff --git a/src/links.ts b/src/links.ts
index e45f430..1813a17 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -11,16 +11,16 @@ export const links: { [menu: string]: { name: string; link: string } } = {
   buttons: { name: "Buttons", link: "/buttons" },
   badge: { name: "Badge", link: "/badge" },
   statusChange: { name: "Status Change", link: "/status-change" },
-  download: { name: "Download", link: "/download" },
+  //download: { name: "Download", link: "/download" },
   simpleList: { name: "Simple list", link: "/simple-list" },
   toggle: { name: "Toggle", link: "/toggle" },
   tabs: { name: "Tabs", link: "/tabs" },
   fileUpload: { name: "File Upload", link: "/file-upload" },
   detail: { name: "Detail", link: "/detail" },
-  auth: { name: "Auth", link: "/auth" },
-  superadmin: { name: "Superadmin", link: "/superadmin" },
-  crudBrowser: { name: "Crud Browser", link: "/crud-browser" },
-  dateRange: { name: "Date Range", link: "/date-range" },
+  //auth: { name: "Auth", link: "/auth" },
+  // superadmin: { name: "Superadmin", link: "/superadmin" },
+  // crudBrowser: { name: "Crud Browser", link: "/crud-browser" },
+  //dateRange: { name: "Date Range", link: "/date-range" },
 };
 
 export const menus: { name: string; link: string }[] = Object.values(links);