@uxf/ui 1.0.0-beta.9 → 1.0.0-beta.91

package/utils/tailwind-config.js

@@ -0,0 +1,170 @@
+const plugin = require("tailwindcss/plugin");
+const { em } = require("@uxf/styles/units/em");
+const { rem } = require("@uxf/styles/units/rem");
+
+/** @type {Record<string, string>} */
+const CONTAINERS = {
+    xs: rem(540),
+    sm: rem(720),
+    md: rem(928),
+    lg: rem(1024),
+    xl: rem(1216),
+};
+
+/** @type {Record<string, string>} */
+const SCREENS = {
+    xs: em(576),
+    sm: em(768),
+    md: em(992),
+    lg: em(1200),
+    xl: em(1440),
+};
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [],
+    theme: {
+        containers: CONTAINERS,
+        screens: SCREENS,
+        inputSize: {
+            xs: "30px",
+            sm: "34px",
+            default: "38px",
+            lg: "42px",
+            xl: "46px",
+        },
+        extend: {
+            borderRadius: {
+                inherit: "inherit",
+            },
+            colors: {
+                inherit: "inherit",
+                lightHigh: "#111827",
+                lightMedium: "#4b5563",
+                lightLow: "#9ca3af",
+                darkHigh: "#ffffff",
+                darkMedium: "#ffffffcc",
+                darkLow: "#ffffff80",
+                lightBorder: "#e5e7eb",
+                darkBorder: "#374151",
+                primary: {
+                    50: "#eff6ff",
+                    100: "#dbeafe",
+                    200: "#bfdbfe",
+                    300: "#93c5fd",
+                    400: "#60a5fa",
+                    500: "#3b82f6",
+                    600: "#2563eb",
+                    700: "#1d4ed8",
+                    800: "#1e40af",
+                    900: "#1e3a8a",
+                },
+                success: {
+                    50: "#f0fdf4",
+                    100: "#dcfce7",
+                    200: "#bbf7d0",
+                    300: "#86efac",
+                    400: "#4ade80",
+                    500: "#22c55e",
+                    600: "#16a34a",
+                    700: "#15803d",
+                    800: "#166534",
+                    900: "#14532d",
+                },
+                warning: {
+                    50: "#fff7ed",
+                    100: "#ffedd5",
+                    200: "#fed7aa",
+                    300: "#fdba74",
+                    400: "#fb923c",
+                    500: "#f97316",
+                    600: "#ea580c",
+                    700: "#c2410c",
+                    800: "#9a3412",
+                    900: "#7c2d12",
+                },
+                error: {
+                    50: "#fef2f2",
+                    100: "#fee2e2",
+                    200: "#fecaca",
+                    300: "#fca5a5",
+                    400: "#f87171",
+                    500: "#ef4444",
+                    600: "#dc2626",
+                    700: "#b91c1c",
+                    800: "#991b1b",
+                    900: "#7f1d1d",
+                },
+            },
+            spacing: {
+                inherit: "inherit",
+            },
+            zIndex: {
+                1: "1",
+                focus: "5",
+                fixed: "10",
+                menu: "25",
+                header: "50",
+                modal: "100",
+                dropdown: "200",
+                flashMessage: "250",
+                tooltip: "300",
+            },
+        },
+    },
+    corePlugins: {
+        aspectRatio: false,
+        container: false,
+    },
+    plugins: [
+        require("@tailwindcss/aspect-ratio"),
+        require("@tailwindcss/line-clamp"),
+        plugin(
+            ({ addComponents, theme }) => {
+                const screens = theme("screens", SCREENS);
+                const containers = theme("containers", CONTAINERS);
+
+                const mqs = Object.entries(screens);
+                const widths = mqs
+                    .map((item) => {
+                        const key = item[0];
+                        const value = item[1];
+                        const width = containers[key];
+                        if (width) {
+                            return { [`@media (min-width: ${value})`]: { ".container": { "max-width": width } } };
+                        }
+                    })
+                    .filter((i) => i);
+
+                addComponents([
+                    {
+                        ".container": {
+                            "margin-left": "auto",
+                            "margin-right": "auto",
+                            width: "100%",
+                        },
+                    },
+                    ...widths,
+                ]);
+            },
+            {
+                content: [],
+                theme: {
+                    containers: CONTAINERS,
+                },
+            },
+        ),
+        plugin(({ addVariant }) => {
+            addVariant("is-active", "&.is-active");
+            addVariant("is-selected", "&.is-selected");
+            addVariant("is-hoverable", ["&.is-hoverable:active", "&.is-hoverable:hover"]);
+            addVariant("is-focused", "&.is-focused");
+            addVariant("is-required", ["&.is-required", "&:required"]);
+            addVariant("is-invalid", "&.is-invalid");
+            addVariant("is-loading", ["&.is-loading"]);
+            addVariant("is-readonly", ["&.is-readonly", "&:readonly"]);
+            addVariant("is-disabled", ["&.is-disabled", "&:disabled"]);
+            addVariant("is-empty", ["&.is-empty"]);
+        }),
+    ],
+};

package/stories/button.stories.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { Button } from "@uxf/ui/button";
-import { useStorybookConfig } from "@uxf/ui/storybook";
-import { Fragment } from "react";
-
-export default {
-  title: "UI/Button",
-  component: Button,
-};
-
-export function Default() {
-  const config = useStorybookConfig("Button");
-
-  return (
-    <div className="space-y-2">
-      {config.variants.map((variant) => (
-        <Fragment key={variant}>
-          {config.colors.map((color) => (
-            <div key={color} className="space-x-2">
-              {config.sizes.map((size) => (
-                <Button key={size} variant={variant} color={color} size={size}>
-                  Button
-                </Button>
-              ))}
-            </div>
-          ))}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export function Disabled() {
-  const config = useStorybookConfig("Button");
-
-  return (
-    <div className="space-y-2">
-      {config.variants.map((variant) => (
-        <Fragment key={variant}>
-          {config.colors.map((color) => (
-            <div key={color} className="space-x-2">
-              {config.sizes.map((size) => (
-                <Button
-                  key={size}
-                  variant={variant}
-                  color={color}
-                  size={size}
-                  disabled
-                >
-                  Button
-                </Button>
-              ))}
-            </div>
-          ))}
-        </Fragment>
-      ))}
-    </div>
-  );
-}
-
-export function Loading() {
-  const config = useStorybookConfig("Button");
-
-  return (
-    <div className="space-y-2">
-      {config.variants.map((variant) => (
-        <Fragment key={variant}>
-          {config.colors.map((color) => (
-            <div key={color} className="space-x-2">
-              {config.sizes.map((size) => (
-                <Button
-                  key={size}
-                  variant={variant}
-                  color={color}
-                  size={size}
-                  loading
-                >
-                  Button
-                </Button>
-              ))}
-            </div>
-          ))}
-        </Fragment>
-      ))}
-    </div>
-  );
-}

package/storybook/index.d.ts

@@ -1 +0,0 @@
-export * from "./storybook-config";

package/storybook/storybook-config.d.ts

@@ -1,21 +0,0 @@
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-import { ReactNode } from "react";
-export declare const defaultConfig: StorybookConfig;
-export interface StorybookConfig {
-    Button: {
-        sizes: Array<keyof ButtonSizes>;
-        variants: Array<keyof ButtonVariants>;
-        colors: Array<keyof ButtonColors>;
-    };
-}
-export declare function useStorybookConfig(key: keyof StorybookConfig): {
-    sizes: (keyof ButtonSizes)[];
-    variants: (keyof ButtonVariants)[];
-    colors: (keyof ButtonColors)[];
-};
-interface StorybookContextProviderProps {
-    config: StorybookConfig;
-    children: ReactNode;
-}
-export declare function StorybookContextProvider(props: StorybookContextProviderProps): JSX.Element;
-export {};

package/tailwindui/button.css

@@ -1,51 +0,0 @@
-.button {
-    @apply inline-flex shadow-sm items-center shadow-sm font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2;
-
-    &.button--disabled {
-        @apply pointer-events-none opacity-40;
-    }
-
-    &.button--size-xs {
-        @apply px-2.5 py-1.5 text-xs;
-    }
-
-    &.button--size-sm {
-        @apply px-3 py-2 text-sm leading-4;
-    }
-
-    &.button--size-default {
-        @apply px-4 py-2 text-sm;
-    }
-
-    &.button--size-lg {
-        @apply px-4 py-2 text-base;
-    }
-
-    &.button--size-xl {
-        @apply px-6 py-3 border text-base;
-    }
-
-    &.button--variant-outlined {
-        @apply border bg-white;
-
-        &.button--color-default {
-            @apply border-primary-300 text-primary-700 hover:bg-primary-50 focus:ring-primary-500;
-        }
-
-        &.button--color-secondary {
-            @apply border-secondary-300 text-secondary-700 hover:bg-secondary-50 focus:ring-secondary-500;
-        }
-    }
-
-    &.button--variant-default {
-        @apply border-transparent text-white;
-
-        &.button--color-default {
-            @apply bg-primary-500 hover:bg-primary-600 focus:ring-primary-400;
-        }
-
-        &.button--color-secondary {
-            @apply bg-secondary-500 hover:bg-secondary-600 focus:ring-secondary-400;
-        }
-    }
-}

package/types.d.ts

@@ -1,3 +0,0 @@
-export declare type Classes<T extends string> = {
-    [key in T]: string;
-};

package/types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9