@tsed/tailwind-formio 3.0.0-alpha.9 → 3.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/tailwind-formio",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-rc.1",
   "description": "Tailwind templates for form.io forms.",
   "type": "module",
   "main": "dist/index.js",
@@ -32,12 +32,21 @@
   },
   "devDependencies": {
     "cross-env": "7.0.3",
+    "lucide-static": "^0.544.0",
     "rimraf": "3.0.2",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",
-    "vite": "5.4.11",
+    "vite": "7.1.5",
     "vite-plugin-ejs": "1.7.0"
   },
+  "peerDependencies": {
+    "lucide-static": ">=0.544.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-static": {
+      "optional": true
+    }
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -51,7 +60,6 @@
     ]
   },
   "dependencies": {},
-  "peerDependencies": {},
   "repository": "https://github.com/tsedio/tsed-formio",
   "bugs": {
     "url": "https://github.com/tsedio/tsed-formio/issues"
@@ -59,6 +67,6 @@
   "homepage": "https://github.com/tsedio/tsed-formio/tree/master/packages/tailwind-formio",
   "author": "Romain Lenzotti",
   "publishConfig": {
-    "tag": "alpha"
+    "tag": "rc"
   }
 }

package/readme.md

@@ -1,5 +1,5 @@
 <p style="text-align: center" align="center">
- <a href="https://tsed.io" target="_blank"><img src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
+ <a href="https://tsed.dev" target="_blank"><img src="https://tsed.dev/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
 </p>
 
 <div align="center">
@@ -14,11 +14,11 @@
 </div>
 
 <div align="center">
-  <a href="https://tsed.io/">Website</a>
+  <a href="https://tsed.dev/">Website</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
+  <a href="https://tsed.dev/tutorials/prisma.html">Tutorial</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
+  <a href="https://slack.tsed.dev">Slack</a>
   <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
   <a href="https://twitter.com/TsED_io">Twitter</a>
 </div>
@@ -31,52 +31,29 @@ This repository will change the rendering of forms in formio.js so that it uses
 
 ```bash
 npm install @tsed/tailwind-formio --save
-npm install --save-dev postcss-nested@4
+npm install tailwindcss postcss autoprefixer postcss-normalize --save-dev
 ```
 
-### Tailwind and create-react-app
-
-If you use `create-react-app`, you'll need to follow the official tailwind guide installation here: https://tailwindcss.com/docs/guides/create-react-app
+## Tailwind configuration
 
 ### Configure postcss
 
-Edit the `craco.config.js` (or `postcss.config.js`) and add the `postcss-nested` to the postcss plugins list:
-
-```diff
-module.exports = {
-  style: {
-    postcss: {
-      plugins: [
-        require('tailwindcss'),
-+       require('postcss-nested')
-        require('autoprefixer')
-      ]
-    }
-  }
-}
-```
-
-Or:
+Edit `postcss.config.js` and add the postcss plugins list:
 
 ```diff
 export default {
   plugins: {
-    'tailwindcss/nesting': {},
+    "postcss-normalize": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    autoprefixer: {}
+  }
+};
 ```
 
 ### Configure tailwind
 
-Generate the initial `tailwind.config.js` with the following command:
-
-```bash
-npx tailwindcss-cli@latest init
-```
-
-Edit the `tailwind.config.js` and copy the following content:
+Edit your `tailwind.config.js` and copy the following content:
 
 ```js
 import { tailwindPreset } from "@tsed/tailwind-formio/tailwind.preset";
@@ -89,7 +66,7 @@ module.exports = {
     "./node_modules/**/*.{js,jsx,ts,tsx,ejs}"
     // add your paths
   ],
-  presets: [],
+  presets: [tailwindPreset],
   darkMode: "class",
   theme: {
     extend: {
@@ -138,20 +115,21 @@ Then create a `tailwind.css` in `styles` directory and add the following lines:
 Import the `tailwind.css` in the `index.css` created by create-react-app:
 
 ```css
-@import "~formiojs/dist/formio.full.css";
+@import "@formio/js/dist/formio.full.css";
 @import "./tailwind.css";
-@import "~@tsed/tailwind-formio/styles/index.css";
+@import "@tsed/tailwind-formio/styles/index.css";
 ```
 
 Optionally, you can import fonts and icons:
 
 ```diff
-@import "~formiojs/dist/formio.full.css";
+@import "@formio/js/dist/formio.full.css";
 @import "./tailwind.css";
 +@import "./fonts/source-sans-pro/index.css";
 +@import "./fonts/inconsolata/index.css";
-+@import "./fonts/bxicons/index.css";
-@import "~@tsed/tailwind-formio/styles/index.css";
++@import "lucide-static/font/lucide.css"; // if you want to use lucide icons (you have to install it)
++@import "./fonts/bxicons/index.css"; // if you want to use bxicons (you have to install it)
+@import "@tsed/tailwind-formio/styles/index.css";
 ```
 
 Now, we can configure formio to use the tailwind template in our React application.

package/src/templates/tailwind/button/button.stories.jsx

@@ -14,57 +14,57 @@ export default {
 
 export const Sandbox = () => {
   return (
-    <div>
-      <div className={"mb-5"}>
-        <button type='button' className='mr-2 btn btn-primary'>
+    <div className='flex flex-col gap-5'>
+      <div className='flex flex-wrap gap-2'>
+        <button type='button' className='btn btn-primary'>
           Primary
         </button>
-        <button type='button' className='mr-2 btn btn-secondary'>
+        <button type='button' className='btn btn-secondary'>
           Secondary
         </button>
-        <button type='button' className='mr-2 btn btn-success'>
+        <button type='button' className='btn btn-success'>
           Success
         </button>
-        <button type='button' className='mr-2 btn btn-danger'>
+        <button type='button' className='btn btn-danger'>
           Danger
         </button>
-        <button type='button' className='mr-2 btn btn-warning'>
+        <button type='button' className='btn btn-warning'>
           Warning
         </button>
-        <button type='button' className='mr-2 btn btn-info'>
+        <button type='button' className='btn btn-info'>
           Info
         </button>
-        <button type='button' className='mr-2 btn btn-light'>
+        <button type='button' className='btn btn-light'>
           Light
         </button>
-        <button type='button' className='mr-2 btn btn-dark'>
+        <button type='button' className='btn btn-dark'>
           Dark
         </button>
       </div>
 
-      <div>
-        <button type='button' className='mr-2 btn btn-outline-primary'>
+      <div className='flex flex-wrap gap-2'>
+        <button type='button' className='btn btn-outline-primary'>
           Primary
         </button>
-        <button type='button' className='mr-2 btn btn-outline-secondary'>
+        <button type='button' className='btn btn-outline-secondary'>
           Secondary
         </button>
-        <button type='button' className='mr-2 btn btn-outline-success'>
+        <button type='button' className='btn btn-outline-success'>
           Success
         </button>
-        <button type='button' className='mr-2 btn btn-outline-danger'>
+        <button type='button' className='btn btn-outline-danger'>
           Danger
         </button>
-        <button type='button' className='mr-2 btn btn-outline-warning'>
+        <button type='button' className='btn btn-outline-warning'>
           Warning
         </button>
-        <button type='button' className='mr-2 btn btn-outline-info'>
+        <button type='button' className='btn btn-outline-info'>
           Info
         </button>
-        <button type='button' className='mr-2 btn btn-outline-light'>
+        <button type='button' className='btn btn-outline-light'>
           Light
         </button>
-        <button type='button' className='mr-2 btn btn-outline-dark'>
+        <button type='button' className='btn btn-outline-dark'>
           Dark
         </button>
       </div>

package/src/templates/tailwind/bxIconsMapping.ts

@@ -0,0 +1,70 @@
+export const BxIconsMapping: Record<string, any> = {
+  remove: "bxs-trash",
+  "question-sign": "bx-question-mark",
+  "new-window": "bx-windows",
+  "minus-square-o": "bxs-minus-square",
+  cog: "bx-cog",
+  move: "bx-move",
+  wrench: "bx-wrench",
+  save: "bx-save",
+  copy: "bx-copy",
+  calendar: "bx-calendar",
+  file: "bx-file",
+  wpforms: "bxs-spreadsheet",
+  "files-o": "bx-copy-alt",
+  refresh: "bx-refresh",
+  indent: "bx-right-indent",
+  tasks: "bx-list-ul",
+  th: "bx-table",
+  "th-list": "bxs-spreadsheet",
+  "folder-open": "bx-folder-open",
+  "folder-o": "bx-folder-open",
+  "user-secret": "bxs-user-badge",
+  table: "bx-table",
+  pencil: "bx-pencil",
+  code: "bx-code",
+  terminal: "bx-terminal",
+  home: "bx-home",
+  html5: "bxl-html5",
+  list: "bx-list-ul",
+  usd: "bx-dollar",
+  hashtag: "bx-hash",
+  tags: "bx-purchase-tag",
+  at: "bx-at",
+  font: "bx-font",
+  asterisk: "bx-show",
+  plus: "bx-plus",
+  "plus-square": "bx-plus-circle",
+  "plus-square-o": "bxs-plus-square",
+  "dot-circle-o": "bx-radio-circle-marked",
+  "phone-square": "bx-phone",
+  "clock-o": "bx-time-five",
+  link: "bx-link",
+  columns: "bx-columns",
+  "th-large": "bx-category",
+  "list-alt": "bx-credit-card-front",
+  "square-o": "bx-caret-down-square",
+  cubes: "bxs-cube",
+  stop: "bx-stop",
+  "check-square": "bx-checkbox-checked",
+  "remove-circle": "bx-x",
+  "circle-xmark": "bx-x",
+  bars: "bx-menu",
+  edit: "bx-edit",
+  time: "bx-time",
+  microphone: "bx-microphone",
+  video: "bx-video",
+  "times-circle": "bx-x",
+  minus: "bx-minus",
+  circle: "bx-circle",
+  "search-plus": "bx-zoom-in",
+  "search-minus": "bx-zoom-out",
+  "hand-paper-o": "bx-hand-up",
+  undo: "bx-undo",
+  redo: "bx-redo",
+  repeat: "bx-repeat",
+  data: "bx-data",
+  "paper-plane": "bx-paper-plane",
+  reset: "bx-reset",
+  loader: "bx-loader-alt"
+};

package/src/templates/tailwind/iconClass.ts

@@ -1,72 +1,21 @@
-export const ICONS: Record<string, any> = {
-  remove: "bxs-trash",
-  "question-sign":
-    "bx-question-mark inline-block border-1 bg-gray-400 border-solid border-gray-400 text-white text-xxs rounded-full mx-2 mt-px",
-  "new-window": "bx-windows",
-  "minus-square-o": "bxs-minus-square",
-  cog: "bx-cog",
-  move: "bx-move",
-  wrench: "bx-wrench",
-  save: "bx-save",
-  copy: "bx-copy",
-  calendar: "bx-calendar",
-  file: "bx-file",
-  wpforms: "bxs-spreadsheet",
-  "files-o": "bx-copy-alt",
-  refresh: "bx-refresh",
-  indent: "bx-right-indent",
-  tasks: "bx-list-ul",
-  th: "bx-table",
-  "th-list": "bxs-spreadsheet",
-  "folder-open": "bx-folder-open",
-  "folder-o": "bx-folder-open",
-  "user-secret": "bxs-user-badge",
-  table: "bx-table",
-  pencil: "bx-pencil",
-  code: "bx-code",
-  terminal: "bx-terminal",
-  home: "bx-home",
-  html5: "bxl-html5",
-  list: "bx-list-ul",
-  usd: "bx-dollar",
-  hashtag: "bx-hash",
-  tags: "bx-purchase-tag",
-  at: "bx-at",
-  font: "bx-font",
-  asterisk: "bx-show",
-  plus: "bx-plus",
-  "plus-square": "bx-plus-circle",
-  "plus-square-o": "bxs-plus-square",
-  "dot-circle-o": "bx-radio-circle-marked",
-  "phone-square": "bx-phone",
-  "clock-o": "bx-time-five",
-  link: "bx-link",
-  columns: "bx-columns",
-  "th-large": "bx-category",
-  "list-alt": "bx-credit-card-front",
-  "square-o": "bx-caret-down-square",
-  cubes: "bxs-cube",
-  stop: "bx-stop",
-  "check-square": "bx-checkbox-checked",
-  "remove-circle": "bx-x",
-  bars: "bx-menu"
-};
+import { BxIconsMapping } from "./bxIconsMapping.js";
+import { LucideIconsMapping } from "./lucideIconsMapping.js";
 
 export default (iconset: string | undefined, name: string, spinning?: boolean) => {
+  if (iconset === "lu") {
+    name = LucideIconsMapping[name] || name;
+
+    return [`icon-${name}`, spinning && (name === "bx-radio-circle" ? "animate-burst" : "animate-spin")].filter(Boolean).join(" ");
+  }
   if (iconset === "bx") {
-    if (ICONS[name]) {
-      name = ICONS[name];
+    if (BxIconsMapping[name]) {
+      name = BxIconsMapping[name];
     } else {
       name = `${iconset}-${name}`;
     }
-  }
 
-  if (spinning) {
-    if (name === "bx-radio-circle") {
-      return `${iconset} ${name} bx-burst`;
-    }
-    return `${iconset} ${name} bx-spin`;
+    return [iconset, name, spinning && (name === "bx-radio-circle" ? "animate-burst" : "animate-spin")].filter(Boolean).join(" ");
   }
 
-  return `${iconset} ${name}`;
+  return `${iconset} ${iconset}-${name}`;
 };

package/src/templates/tailwind/index.ts

@@ -9,6 +9,7 @@ import builderSidebar from "./builderSidebar";
 import builderSidebarGroup from "./builderSidebarGroup";
 import builderWizard from "./builderWizard";
 import button from "./button";
+import { BxIconsMapping } from "./bxIconsMapping.js";
 import checkbox from "./checkbox";
 import columns from "./columns";
 import component from "./component";
@@ -27,11 +28,12 @@ import fieldset from "./fieldset";
 import file from "./file";
 import html from "./html";
 import icon from "./icon";
-import iconClass, { ICONS } from "./iconClass";
+import iconClass from "./iconClass";
 import input from "./input";
 import label from "./label";
 import loader from "./loader";
 import loading from "./loading";
+import { LucideIconsMapping } from "./lucideIconsMapping.js";
 import map from "./map";
 import message from "./message";
 import modaldialog from "./modaldialog";
@@ -64,7 +66,10 @@ import wizardHeaderVertical from "./wizardHeaderVertical";
 import wizardNav from "./wizardNav";
 
 export default {
-  ICONS,
+  ICONS: {
+    bx: BxIconsMapping,
+    lu: LucideIconsMapping
+  },
   transform(type: string, text: string) {
     if (!text) {
       return text;
@@ -75,7 +80,7 @@ export default {
     }
     return text;
   },
-  defaultIconset: "bx",
+  defaultIconset: "lu",
   iconClass,
   cssClasses,
   address,

package/src/templates/tailwind/lucideIconsMapping.ts

@@ -0,0 +1,72 @@
+export const LucideIconsMapping: Record<string, any> = {
+  remove: "trash",
+  "question-sign": "circle-question-mark",
+  "new-window": "app-window",
+  "minus-square-o": "square-minus",
+  cog: "cog",
+  move: "move",
+  wrench: "wrench",
+  save: "save",
+  copy: "copy",
+  calendar: "calendar",
+  file: "file",
+  wpforms: "picture-in-picture-2",
+  "files-o": "files",
+  refresh: "refresh-cw",
+  indent: "list-indent-increase",
+  tasks: "rows-2",
+  th: "grid-3x3",
+  "th-list": "panel-top-open",
+  "folder-open": "folder-open",
+  "folder-o": "folder",
+  "user-secret": "user-round-x",
+  table: "table",
+  pencil: "pencil",
+  code: "code",
+  terminal: "terminal",
+  home: "house",
+  html5: "file-text",
+  list: "list",
+  usd: "dollar-sign",
+  hashtag: "hash",
+  tags: "tags",
+  at: "at-sign",
+  font: "type",
+  asterisk: "asterisk",
+  plus: "plus",
+  "plus-square": "list-check",
+  "plus-square-o": "square-plus",
+  "dot-circle-o": "circle-check",
+  "phone-square": "phone",
+  "clock-o": "clock",
+  link: "link",
+  columns: "columns-3",
+  "th-large": "layout-grid",
+  "list-alt": "app-window",
+  "square-o": "square",
+  cubes: "boxes",
+  stop: "square",
+  "check-square": "square-check",
+  "remove-circle": "x",
+  "circle-xmark": "circle-x",
+  bars: "list",
+  edit: "square-pen",
+  time: "clock",
+  microphone: "mic",
+  video: "video",
+  "times-circle": "circle-x",
+  minus: "minus",
+  circle: "circle",
+  "search-plus": "zoom-in",
+  "search-minus": "zoom-out",
+  "hand-paper-o": "pointer",
+  undo: "undo-2",
+  redo: "redo-2",
+  repeat: "repeat",
+  data: "database",
+  "paper-plane": "send",
+  reset: "rotate-ccw",
+  loader: "loader-circle",
+  detail: "file-text",
+  spreadsheet: "file-spreadsheet"
+};