@wikicasa-dev/tailwind-plugins 0.0.1

package/README.md

@@ -0,0 +1,15 @@
+# @wikicasa-dev/tailwind-plugins
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.1.10. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

package/index.ts

@@ -0,0 +1 @@
+export { buttonPlugin } from "./plugins/buttonPlugin";

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@wikicasa-dev/tailwind-plugins",
+  "module": "index.ts",
+  "main": "index.js",
+  "type": "module",
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://matteocarniglia@bitbucket.org/wikicasa/wikicasa-fe.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://bitbucket.org/wikicasa/wikicasa-fe/issues"
+  },
+  "homepage": "https://bitbucket.org/wikicasa/wikicasa-fe#readme",
+  "version": "0.0.1"
+}

package/plugins/buttonPlugin.ts

@@ -0,0 +1,334 @@
+import plugin from "tailwindcss/plugin";
+export const buttonPlugin = plugin(({ addComponents, theme }) => {
+  addComponents({
+    ".btn": {
+      "--btn-px": "25px",
+      "--btn-py": "11px",
+      "--btn-bg-color": "transparent",
+      "--btn-text-color": theme("colors.w-black"),
+      "--btn-border-color": "unset",
+      "--btn-border-width": "0",
+      "--btn-border-radius": theme("borderRadius.lg"),
+      "--btn-border-style": "solid",
+      "--btn-height": "42px",
+      "--btn-min-w": "90px",
+      "--btn-font-size": theme("fontSize.DEFAULT"),
+      "--btn-transition":
+        "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
+      display: "inline-block",
+      "font-size": "var(--btn-font-size)",
+      "font-weight": theme("fontWeight.semibold"),
+      "white-space": "nowrap",
+      border:
+        "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
+      "border-radius": "var(--btn-border-radius)",
+      cursor: "pointer",
+      height: "var(--btn-height)",
+      "min-width": "var(--btn-min-w)",
+      "background-color": "var(--btn-bg-color)",
+      color: "var(--btn-text-color)",
+      padding: "var(--btn-py) var(--btn-px)",
+      transition: "var(--btn-transition)",
+      "line-height": "1",
+      "-webkit-tap-highlight-color": "transparent",
+      "&:disabled": {
+        "--btn-bg-color": theme("colors.w-primary"),
+        "--btn-text-color": "rgb(255 255 255 / 0.8)",
+        cursor: "not-allowed",
+        opacity: "0.5",
+      },
+      "&.btn-lg": {
+        "--btn-height": "47px",
+        "--btn-px": "28px",
+        "--btn-py": "12px",
+        "line-height": "0",
+      },
+      "&.btn-md": {
+        "--btn-height": "42px",
+      },
+      "&.btn-sm": {
+        "--btn-px": "18px",
+        "--btn-py": "8px",
+        "--btn-height": "36px",
+      },
+      "&.btn-outline": {
+        "--btn-border-width": "1px",
+        "--btn-bg-color": theme("colors.white"),
+        [`@media screen and (max-width: ${theme("screens.sm")})`]: {
+          "&:hover": {
+            "--btn-bg-color": theme("colors.white"),
+          },
+        },
+        [`@media screen and (min-width: ${theme("screens.sm")})`]: {
+          "&:hover": {
+            "--btn-text-color": theme("colors.white"),
+            "& svg, & img": {
+              filter: "brightness(0) invert(1)",
+            },
+          },
+        },
+        "&:active": {
+          "--btn-text-color": theme("colors.white") + " !important",
+          "& svg, & img": {
+            filter: "brightness(0) invert(1)",
+          },
+        },
+      },
+    },
+    ".btn-empty": {
+      "--btn-min-w": "0",
+    },
+    ".btn-w-primary": createBtn(
+      theme("screens.sm"),
+      {
+        bgColor: theme("colors.w-primary"),
+        textColor: theme("colors.white"),
+        hoverBgColor: "#0057D9",
+        hoverDisabledBgColor: theme("colors.w-primary"),
+      },
+      {
+        mainColor: theme("colors.w-primary"),
+      }
+    ),
+    ".btn-light": createBtn(theme("screens.sm"), {
+      textColor: theme("colors.w-primary"),
+      bgColor: theme("colors.white"),
+      hoverTextColor: theme("colors.w-primary"),
+      hoverBgColor: "#FAFAFA",
+      hoverDisabledBgColor: theme("colors.white"),
+    }),
+    ".btn-w-secondary": createBtn(
+      theme("screens.sm"),
+      {
+        bgColor: theme("colors.w-secondary"),
+        textColor: theme("colors.white"),
+        hoverBgColor: "#8A9DDD",
+        hoverDisabledBgColor: theme("colors.w-secondary"),
+      },
+      {
+        mainColor: theme("colors.w-secondary"),
+        textColor: theme("colors.w-black"),
+      }
+    ),
+    ".btn-w-warning": createBtn(theme("screens.sm"), {
+      bgColor: theme("colors.w-warning"),
+      textColor: "#2A3761",
+      hoverBgColor: "#F2C761",
+      hoverDisabledBgColor: theme("colors.w-warning"),
+    }),
+    ".btn-w-danger": createBtn(
+      theme("screens.sm"),
+      {
+        bgColor: theme("colors.w-danger"),
+        textColor: theme("colors.white"),
+        hoverBgColor: "#E0485A",
+        hoverDisabledBgColor: theme("colors.w-danger"),
+      },
+      {
+        mainColor: theme("colors.w-danger"),
+      }
+    ),
+    ".btn-multi-selection, .btn-single-selection": {
+      "&[data-active='true']": {
+        "--btn-bg-color": theme("colors.w-lavender"),
+        "--btn-border-color": "#385CF6",
+        "&:hover": {
+          "--btn-text-color": theme("colors.w-black"),
+        },
+      },
+    },
+    ".btn-multi-selection": {
+      "--btn-py": "10px",
+      "--btn-height": "40px",
+      "font-weight": theme("fontWeight.regular"),
+      "--btn-border-radius": theme("borderRadius.xs"),
+      "--btn-border-color": "#EAEFFD",
+      "--btn-border-width": "1px",
+      "white-space": "normal",
+      ...createBtn(theme("screens.sm"), {
+        textColor: theme("colors.w-black"),
+        bgColor: "#F5F7FA",
+        hoverBgColor: theme("colors.w-lavender"),
+        hoverDisabledBgColor: theme("colors.white"),
+        hoverBorderColor: "#385CF6",
+      }),
+    },
+    ".btn-single-selection": {
+      "--btn-px": "16px",
+      "--btn-py": "8px",
+      "--btn-height": "40px",
+      "--btn-border-radius": "5px",
+      "font-weight": theme("fontWeight.regular"),
+      ...createBtn(theme("screens.sm"), {
+        textColor: theme("colors.w-black"),
+        bgColor: theme("colors.white"),
+        hoverBgColor: theme("colors.w-cultured"),
+        hoverDisabledBgColor: theme("colors.white"),
+      }),
+    },
+    ".btn-facile": {
+      "--btn-facile-color": "#FF6600",
+      "--btn-facile-hover-color": "#b34700",
+      ...createBtn(theme("screens.sm"), {
+        bgColor: "var(--btn-facile-color)",
+        textColor: theme("colors.white"),
+        hoverBgColor: "var(--btn-facile-hover-color)",
+        hoverTextColor: theme("colors.white"),
+        hoverDisabledBgColor: "var(--btn-facile-color)",
+      }),
+    },
+    ".btn-show-more": {
+      "--btn-border-radius": "0",
+      "--btn-border-color": theme("colors.white"),
+      ...createBtn(theme("screens.sm"), {
+        textColor: "#2B5DFF",
+        bgColor: theme("colors.white"),
+        hoverTextColor: "#3646B3",
+        hoverBgColor: theme("colors.white"),
+        hoverDisabledBgColor: theme("colors.white"),
+      }),
+    },
+    ".btn-transparent": {
+      "--border-color": "transparent",
+      "--btn-px": "0",
+      "--btn-py": "0",
+      "&:hover": {
+        "--btn-bg-color": "transparent",
+        "--border-color": "transparent",
+      },
+      "&:disabled": {
+        "--btn-bg-color": "transparent",
+      },
+    },
+  });
+});
+
+type BtnAttributes = {
+  bgColor: string;
+  textColor: string;
+  hoverBgColor: string;
+  hoverMobileBgColor?: string;
+  hoverTextColor?: string;
+  /* The border color will be applied to desktop mode */
+  hoverBorderColor?: string;
+  activeBorderColor?: string;
+  hoverMobileTextColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+  hoverDisabledBgColor: string;
+};
+type BtnOutlineVariantAttributes = {
+  /* If present, it will be used to set the color to borders, text and background */
+  mainColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  hoverMobileBgColor?: string;
+  /* The hover bg color will be activated only from tablet mode on */
+  hoverBgColor?: string;
+  hoverDisabledBgColor?: string;
+  /* The hover text color will be activated only from tablet mode on */
+  hoverTextColor?: string;
+  hoverMobileTextColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+};
+
+const createBtn = (
+  smallBreakpoint: string,
+  btnProps: BtnAttributes,
+  btnOutlineProps?: BtnOutlineVariantAttributes
+): any => {
+  const res = {
+    "--btn-bg-color": btnProps.bgColor,
+    "--btn-text-color": btnProps.textColor,
+    [`@media screen and (max-width: ${smallBreakpoint})`]: {
+      "&:hover": {
+        "--btn-bg-color": btnProps.hoverMobileBgColor ?? btnProps.bgColor,
+        "--btn-text-color": btnProps.hoverMobileTextColor ?? btnProps.textColor,
+      },
+    },
+    [`@media screen and (min-width: ${smallBreakpoint})`]: {
+      "&:hover": {
+        "--btn-bg-color": btnProps.hoverBgColor,
+        ...(btnProps.hoverTextColor
+          ? { "--btn-text-color": btnProps.hoverTextColor }
+          : {}),
+        ...(btnProps.hoverBorderColor
+          ? { "--btn-border-color": btnProps.hoverBorderColor }
+          : {}),
+      },
+    },
+    "&:hover": {
+      "&:disabled": {
+        "--btn-bg-color": btnProps.hoverDisabledBgColor,
+      },
+    },
+    "&:active": {
+      "--btn-bg-color": btnProps.activeBgColor ?? btnProps.hoverBgColor,
+      "--btn-text-color": btnProps.activeTextColor ?? btnProps.hoverTextColor,
+      ...(btnProps.activeBorderColor || btnProps.hoverBorderColor
+        ? {
+            "--btn-border-color":
+              btnProps.activeBorderColor ?? btnProps.hoverBorderColor,
+          }
+        : {}),
+    },
+    ...(btnOutlineProps
+      ? {
+          "&.btn-outline": createOutlineVariant(
+            btnOutlineProps,
+            smallBreakpoint
+          ),
+        }
+      : {}),
+  };
+  return res;
+};
+
+const createOutlineVariant = (
+  props: BtnOutlineVariantAttributes,
+  smallBreakpoint: string
+): any => {
+  const res = {
+    "--btn-border-color": props.mainColor ?? props.borderColor,
+    "--btn-text-color":
+      props.mainColor && !props.textColor ? props.mainColor : props.textColor,
+    //By default, the active section is the same of the hover section in desktop mode
+    "&:active": {
+      "--btn-bg-color":
+        (props.mainColor ?? props.activeBgColor ?? props.hoverBgColor) +
+        " !important",
+      //By default, on active the text is white
+      ...(props.activeTextColor || props.hoverTextColor
+        ? {
+            "--btn-text-color": props.activeTextColor ?? props.hoverTextColor,
+          }
+        : {}),
+    },
+    "&:disabled": {
+      "&:hover": {
+        "--btn-bg-color": props.mainColor ?? props.hoverDisabledBgColor,
+      },
+    },
+    [`@media screen and (max-width: ${smallBreakpoint})`]: {
+      "&:hover": {
+        //By default, the text color is white
+        ...(props.hoverMobileBgColor
+          ? { "--btn-bg-color": props.hoverMobileBgColor }
+          : {}),
+        "--btn-text-color": props.hoverMobileTextColor ?? props.textColor,
+      },
+    },
+    [`@media screen and (min-width: ${smallBreakpoint})`]: {
+      "&:hover": {
+        "--btn-bg-color": props.mainColor ?? props.hoverBgColor,
+        //By default, the text color is white when hovering
+        ...(props.hoverTextColor
+          ? { "--btn-text-color": props.hoverTextColor }
+          : {}),
+      },
+    },
+  };
+
+  return res;
+};

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "baseUrl": "."
+  },
+  "include": ["plugins"]
+}