to tailwind (mostly)

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/[email protected]/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>

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
+export default Badge;

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}
     >

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>

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>
 );

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>
       )}

src/components/form/date-range.tsx

@@ -3,31 +3,35 @@ 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 })}
       />
 
       <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>

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>
 );

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>
   ),

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))}

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>

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>
 );

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>
       ))}