feat: 🎸 add reusable components

.changeset/cool-coins-sin.md

@@ -0,0 +1,5 @@
+---
+"@fleek-platform/login-button": patch
+---
+
+Adds reusable component AuthButton off-loading most of the logic, also includes an option for dropdown version

.tailwind/fonts.ts

@@ -0,0 +1,5 @@
+export const fontFamily = {
+  'sans': ['AtypDisplay'],
+  'plex-sans': ['IBM Plex Sans'],
+  'plex-mono': ['IBM Plex Mono'],
+};

.tailwind/gridLayout.ts

@@ -0,0 +1,3 @@
+export const gridTemplateColumns = {
+  32: 'repeat(32, minmax(0, 1fr))',
+};

.tailwind/tailwind.config.utils.mjs

@@ -0,0 +1,12 @@
+const baseFontSizePx = 10;
+const unitToRem = (val) => `${val}rem`;
+const pxToRem = (val) => val / baseFontSizePx;
+const pxToRemUnit = (val) => unitToRem(pxToRem(val));
+const appendPx = (val) => `${val}px`;
+
+export {
+    unitToRem,
+    pxToRem,
+    pxToRemUnit,
+    appendPx,
+};

.tailwind/tailwind.custom.config.mjs

@@ -0,0 +1,104 @@
+import createSpacingPlugin from "./tailwind.plugin.spacing";
+import gridPlugin from "./tailwind.plugin.grid";
+import safelist from "./tailwind.safelist";
+import aspectRatioPlugin from "@tailwindcss/aspect-ratio";
+
+export default function (usePx) {
+ const { plugin: spacingPlugin } = createSpacingPlugin(usePx);
+
+ const generateSizes = (noUnits) => {
+    const max = 128;
+    const sizes = {};
+    for (let i = 1; i <= max; i++) {
+      if (noUnits) {
+        sizes[i] = i.toString();
+      } else {
+        sizes[i] = usePx ? `${i}px` : `${i / 10}rem`;
+      }
+    }
+    return sizes;
+ };
+
+ const aspectRatioSizes = () => {
+    const max = 32;
+    const sizes = {};
+    for (let i = 1; i <= max; i++) {
+      sizes[i] = i.toString();
+    }
+    return sizes;
+ };
+
+ return {
+    safelist,
+    theme: {
+      container: {
+        center: true,
+      },
+      fontFamily: {
+        sans: ["sans-serif"],
+        serif: ["serif"],
+      },
+      aspectRatio: aspectRatioSizes(),
+      borderRadius: {
+        none: "0",
+        full: "9999px",
+        ...generateSizes(),
+      },
+      borderWidth: {
+        DEFAULT: usePx ? "1px" : "0.1rem",
+        0: "0",
+        ...generateSizes(),
+      },
+      fontSize: {
+        ...generateSizes(),
+      },
+      letterSpacing: {
+        ...generateSizes(),
+      },
+      zIndex: {
+        ...generateSizes(true),
+      },
+      extend: {
+        boxShadow: {
+          sm: "0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.12)",
+          soft: "0px 1px 1px rgba(0, 0, 0, 0.1), 0px 2px 6px rgba(0, 0, 0, 0.12)",
+          dark: "0px 2px 8px 0px rgba(26, 26, 26, 0.25)",
+          'glow': '0 0 15px 5px rgba(255, 255, 255, 0.6)',
+        },
+        lineHeight: generateSizes(),
+        keyframes: {
+          blur: {
+            "0%": { filter: "blur(20px)" },
+            "100%": { filter: "blur(0)" },
+          },
+          rock: {
+            "0%": {
+              transform: "rotate(-9deg)",
+            },
+            "50%": {
+              transform: "rotate(-8deg)",
+            },
+            "100%": {
+              transform: "rotate(-9deg)",
+            },
+          },
+          'fade-in': {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 1 },
+          },
+          'fade-in-down': {
+            '0%': { transform: 'translateY(2%)', opacity: 0 },
+            '100%': { transform: 'translateY(0)', opacity: 1 },
+          },
+        },
+        animation: {
+          "blur-out": "blur 0.6s ease-out",
+          "rock": "rock 1.2s infinite",
+          'fade-in': 'fade-in 100ms ease-out',
+          'fade-in-down': 'fade-in-down 120ms ease-out',
+        },
+      },
+    },
+    plugins: [gridPlugin, spacingPlugin, aspectRatioPlugin],
+ };
+}

.tailwind/tailwind.plugin.grid.mjs

@@ -0,0 +1,74 @@
+import plugin from "tailwindcss/plugin";
+/**
+ * Creates a custom css grid with 24 columns instead of 12 columns, which are Tailwind default
+ */
+
+const columns = 24;
+const generateGridTemplateColumns = () => {
+    const ret = {};
+    for (let i = 1; i <= columns; i++) {
+        ret[i] = `repeat(${i}, minmax(0, 1fr))`;
+    }
+    return ret;
+};
+
+const generateGridColumn = () => {
+    const ret = {};
+    for (let i = 1; i <= columns; i++) {
+        ret["span-" + i] = `span ${i} / span ${i}`;
+    }
+    return ret;
+};
+
+const generateGridColumnStart = () => {
+    const ret = {};
+    for (let i = 1; i <= columns; i++) {
+        ret[`${i}`] = `${i}`;
+    }
+    return ret;
+};
+
+const generateGridColumnEnd = () => {
+    const ret = {};
+    for (let i = 1; i <= columns; i++) {
+        ret[`${i}`] = `${i}`;
+    }
+    return ret;
+};
+
+const generateGapSizes = () => {
+    const ret = {};
+    for (let i = 1; i <= 78; i++) {
+        ret[i] = `${i / 10}rem`;
+    }
+    return ret;
+};
+
+const grid = plugin(function () {}, {
+    theme: {
+        gridTemplateColumns: {
+            ...generateGridTemplateColumns(),
+        },
+        gridColumn: {
+            ...generateGridColumn(),
+        },
+        gridColumnStart: {
+            ...generateGridColumnStart(),
+        },
+        gridColumnEnd: {
+            ...generateGridColumnEnd(),
+        },
+        gap: {
+            ...generateGapSizes(),
+        },
+    },
+    // variants: {
+    //   gridTemplateColumns: ["responsive"],
+    //   gridColumn: ["responsive"],
+    //   gridColumnStart: ["responsive"],
+    //   gridColumnEnd: ["responsive"],
+    //   gap: ["responsive"],
+    // },
+});
+
+export default grid;

.tailwind/tailwind.plugin.spacing.mjs

@@ -0,0 +1,58 @@
+import plugin from "tailwindcss/plugin";
+import { pxToRemUnit } from "./tailwind.config.utils";
+
+export default function(usePx) {
+    /**
+     * Creates a custom spacing scale, where the classname maps
+     * 1:1 to its pixel value. Uses px to rem conversion under the hood.
+     *
+     * iE `w-16 => width: 16px | 1.6rem;`
+     *
+     * ```
+     * 1-32 = 1px steps.
+     * 32-64 = 2px steps.
+     * 64-128 = 4px steps.
+     * 128-256 = 8px steps.
+     * 256-512 = 16px steps.
+     * 512-1024 = 32px steps.
+     * ```
+     */
+    const createScale = ({ min = 0, max = 100, steps = 1, valFM, keyFM }) => {
+        const limit = Math.round((max - min) / steps);
+        const scale = [...new Array(limit + 1)].map((_, i) => min + i * steps);
+
+        return scale.reduce((prev, curr) => {
+            const key = keyFM ? keyFM(curr) : curr;
+            const val = valFM && curr !== 0 ? valFM(curr) : curr;
+
+            return { ...prev, [String(key)]: val };
+        }, {});
+    };
+
+    const valFM = usePx ? (val) => val : pxToRemUnit;
+
+    const spacing = {
+        ...createScale({ max: 32, steps: 1, valFM }),
+        ...createScale({ min: 32, max: 64, steps: 2, valFM }),
+        ...createScale({ min: 64, max: 128, steps: 4, valFM }),
+        ...createScale({ min: 128, max: 256, steps: 8, valFM }),
+        ...createScale({ min: 256, max: 512, steps: 16, valFM }),
+        ...createScale({ min: 512, max: 1024, steps: 32, valFM }),
+    };
+
+    const spacings = plugin(function () {}, {
+        theme: {
+            spacing,
+            extend: {
+                minWidth: spacing,
+                minHeight: spacing,
+                gap: spacing,
+            },
+        },
+    });
+
+    return {
+        pxToRemUnit,
+        plugin: spacings,
+    };
+};

.tailwind/tailwind.plugin.typography.mjs

@@ -0,0 +1,101 @@
+import plugin from "tailwindcss/plugin";
+
+// define typography here so intellisense completion works
+export default plugin(({ addComponents }) => {
+ addComponents({
+    ".typo-h1": {
+      "@apply font-sans text-[12rem] font-medium leading-[100%]":
+        {},
+    },
+    ".typo-h2": {
+      "@apply font-sans text-[9rem] font-medium leading-[100%]":
+        {},
+    },
+    ".typo-h4": {
+      "@apply font-sans text-[6.1rem] font-medium leading-[100%]": {},
+    },
+    ".typo-h5": {
+      "@apply font-sans text-39 font-medium leading-[100%]": {},
+    },
+    ".typo-l": {
+      "@apply font-plex-sans text-20 leading-[150%]": {},
+    },
+    ".typo-xl": {
+      "@apply font-plex-sans text-25 font-normal leading-[150%]": {},
+    },
+    ".typo-xl-bold": {
+      "@apply font-plex-sans text-25 font-bold leading-[150%]": {},
+    },
+    ".typo-m": {
+      "@apply font-plex-sans text-16 leading-[150%]": {},
+    },
+    ".typo-m-normal": {
+      "@apply font-plex-sans text-16 font-normal leading-[150%] text-gray-dark-12": {},
+    },
+    ".typo-m-strong": {
+      "@apply font-plex-sans text-16 font-medium leading-[150%]": {},
+    },
+    ".typo-s": {
+      "@apply font-plex-sans text-13 font-normal leading-[150%]": {},
+    },
+    ".typo-caption-l": {
+      "@apply font-plex-sans text-20 font-medium uppercase leading-[150%] tracking-[0.4rem]":
+        {},
+    },
+    ".typo-caption-m": {
+      "@apply font-plex-sans text-16 font-medium uppercase leading-[150%] tracking-[0.32rem]":
+        {},
+    },
+    ".typo-caption-s": {
+      "@apply font-plex-sans text-13 font-medium uppercase leading-[150%] tracking-[0.256rem]":
+        {},
+    },
+    ".typo-caption-s-normal": {
+      "@apply font-plex-sans text-15 leading-[150%] tracking-[0.256rem]":
+        {},
+    },
+    ".typo-caption-xs": {
+      "@apply font-plex-sans text-10 font-normal uppercase leading-[150%] tracking-[0.02725rem]":
+        {},
+    },
+    ".typo-caption-text": {
+      "@apply font-plex-sans text-13 font-medium leading-[150%]": {},
+    },
+    ".typo-nav-m": {
+      "@apply font-plex-sans text-16 uppercase leading-[150%] tracking-[0.064rem]":
+        {},
+    },
+    ".typo-btn-action": {
+      "@apply font-plex-sans text-16 font-medium uppercase leading-[150%] tracking-[0.09rem]":
+        {},
+    },
+    ".typo-btn-cap": {
+      "@apply font-plex-sans text-16 font-normal leading-[150%] tracking-[0.0rem]":
+        {},
+    },
+    ".typo-btn-xs": {
+      "@apply font-plex-sans text-13 font-normal uppercase leading-[150%] tracking-[0.032rem]":
+        {},
+    },
+    ".typo-btn-xxs": {
+      "@apply font-plex-sans text-13 font-thin leading-[150%] tracking-[0.032rem]":
+        {},
+    },
+    ".typo-btn-s": {
+      "@apply font-plex-sans text-13 font-normal uppercase leading-[150%] tracking-[0.096rem]":
+        {},
+    },
+    ".typo-btn-s-normal": {
+      "@apply font-plex-sans text-13 font-normal leading-[150%] tracking-[0.096rem]":
+        {},
+    },
+    ".typo-btn-l": {
+      "@apply font-plex-sans text-16 font-medium uppercase leading-[150%] tracking-[0.192rem]":
+        {},
+    },
+    ".typo-btn-l-mid": {
+      "@apply font-plex-sans text-16 font-medium leading-[150%] tracking-[0.192rem]":
+        {},
+    },
+ });
+});

.tailwind/tailwind.safelist.mjs

@@ -0,0 +1,10 @@
+export default [
+ "bg-white",
+ "hover:bg-white-hover",
+ "text-white",
+ "lazyload",
+ "lazyloading",
+ "lazyloaded",
+ "swiper-pagination",
+ "swiper-pagination-bullet-active",
+];