@uxf/ui 1.0.0-beta.10 → 1.0.0-beta.13

package/utils/cx.ts

@@ -0,0 +1,56 @@
+export type ClassArray = ClassValue[];
+export type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
+
+function toVal(mix: ClassValue) {
+    let k;
+    let y;
+    let str = "";
+
+    if (typeof mix === "string" || typeof mix === "number") {
+        str += mix;
+    } else if (typeof mix === "object") {
+        if (Array.isArray(mix)) {
+            for (k = 0; k < mix.length; k++) {
+                if (mix[k]) {
+                    if ((y = toVal(mix[k]))) {
+                        if (str) {
+                            str += " ";
+                        }
+                        str += y;
+                    }
+                }
+            }
+        } else {
+            for (k in mix) {
+                if (mix?.[k]) {
+                    if (str) {
+                        str += " ";
+                    }
+                    str += k;
+                }
+            }
+        }
+    }
+
+    return str;
+}
+
+export function cx(...classes: ClassValue[]): string {
+    let i = 0;
+    let tmp;
+    let x;
+    let str = "";
+
+    while (i < classes.length) {
+        if ((tmp = classes[i++])) {
+            if ((x = toVal(tmp))) {
+                if (str) {
+                    str += " ";
+                }
+                str += x;
+            }
+        }
+    }
+
+    return str;
+}

package/utils/forwardRef.d.ts

@@ -0,0 +1,12 @@
+import { ForwardedRef, ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+export declare type ForwardRefRenderFunction<T, P> = {
+    (props: P, ref: ForwardedRef<T>): ReactElement | null;
+    displayName?: string;
+    /** defaultProps are not supported on render functions */
+    defaultProps?: never;
+    /** propTypes are not supported on render functions */
+    propTypes?: never;
+    /** used by Chakra */
+    id?: string;
+};
+export declare const forwardRef: <T, P>(name: string, render: ForwardRefRenderFunction<T, P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/utils/forwardRef.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRef = void 0;
+const react_1 = require("react");
+const forwardRef = (name, render) => {
+    const Component = (0, react_1.forwardRef)(render);
+    Component.displayName = name;
+    return Component;
+};
+exports.forwardRef = forwardRef;

package/utils/forwardRef.ts

@@ -0,0 +1,30 @@
+import {
+  ForwardedRef,
+  forwardRef as reactForwardRef,
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  ReactElement,
+  RefAttributes,
+} from 'react';
+
+export type ForwardRefRenderFunction<T, P> = {
+  (props: P, ref: ForwardedRef<T>): ReactElement | null;
+  displayName?: string;
+  // explicit rejected with `never` required due to
+  // https://github.com/microsoft/TypeScript/issues/36826
+  /** defaultProps are not supported on render functions */
+  defaultProps?: never;
+  /** propTypes are not supported on render functions */
+  propTypes?: never;
+  /** used by Chakra */
+  id?: string;
+};
+
+export const forwardRef = <T, P>(
+  name: string,
+  render: ForwardRefRenderFunction<T, P>
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+  const Component = reactForwardRef(render);
+  Component.displayName = name;
+  return Component;
+};

package/{storybook → utils}/storybook-config.d.ts

@@ -1,5 +1,5 @@
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
 import { ReactNode } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "../button";
 export declare const defaultConfig: StorybookConfig;
 export interface StorybookConfig {
     Button: {
@@ -7,12 +7,9 @@ export interface StorybookConfig {
         variants: Array<keyof ButtonVariants>;
         colors: Array<keyof ButtonColors>;
     };
+    Input: {};
 }
-export declare function useStorybookConfig(key: keyof StorybookConfig): {
-    sizes: (keyof ButtonSizes)[];
-    variants: (keyof ButtonVariants)[];
-    colors: (keyof ButtonColors)[];
-};
+export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
 interface StorybookContextProviderProps {
     config: StorybookConfig;
     children: ReactNode;

package/{storybook/storybook-config.js → utils/storybook-config.jsx}

@@ -24,23 +24,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StorybookContextProvider = exports.useStorybookConfig = exports.defaultConfig = void 0;
-var react_1 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 exports.defaultConfig = {
     Button: {
         sizes: ["xs", "sm", "default", "lg", "xl"],
-        colors: ["default", "secondary"],
+        colors: ["default", "white", "success", "warning", "error"],
         variants: ["outlined", "default"],
     },
+    Input: {},
 };
 // Context
-var Context = react_1.default.createContext(exports.defaultConfig);
+const Context = react_1.default.createContext(exports.defaultConfig);
 // consumer
 function useStorybookConfig(key) {
     return (0, react_1.useContext)(Context)[key];
 }
 exports.useStorybookConfig = useStorybookConfig;
 function StorybookContextProvider(props) {
-    return (react_1.default.createElement(Context.Provider, { value: props.config }, props.children));
+    return (<Context.Provider value={props.config}>{props.children}</Context.Provider>);
 }
 exports.StorybookContextProvider = StorybookContextProvider;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rvcnlib29rLWNvbmZpZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9zdG9yeWJvb2svc3Rvcnlib29rLWNvbmZpZy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFDQSw2Q0FBcUQ7QUFFeEMsUUFBQSxhQUFhLEdBQW9CO0lBQzVDLE1BQU0sRUFBRTtRQUNOLEtBQUssRUFBRSxDQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxJQUFJLENBQUM7UUFDMUMsTUFBTSxFQUFFLENBQUMsU0FBUyxFQUFFLFdBQVcsQ0FBQztRQUNoQyxRQUFRLEVBQUUsQ0FBQyxVQUFVLEVBQUUsU0FBUyxDQUFDO0tBQ2xDO0NBQ0YsQ0FBQztBQVVGLFVBQVU7QUFDVixJQUFNLE9BQU8sR0FBRyxlQUFLLENBQUMsYUFBYSxDQUFDLHFCQUFhLENBQUMsQ0FBQztBQUVuRCxXQUFXO0FBQ1gsU0FBZ0Isa0JBQWtCLENBQUMsR0FBMEI7SUFDM0QsT0FBTyxJQUFBLGtCQUFVLEVBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUM7QUFDbEMsQ0FBQztBQUZELGdEQUVDO0FBUUQsU0FBZ0Isd0JBQXdCLENBQUMsS0FBb0M7SUFDM0UsT0FBTyxDQUNMLDhCQUFDLE9BQU8sQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxNQUFNLElBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBb0IsQ0FDM0UsQ0FBQztBQUNKLENBQUM7QUFKRCw0REFJQyJ9

package/utils/storybook-config.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode, useContext } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "../button";
+
+export const defaultConfig: StorybookConfig = {
+  Button: {
+    sizes: ["xs", "sm", "default", "lg", "xl"],
+    colors: ["default", "white", "success", "warning", "error"],
+    variants: ["outlined", "default"],
+  },
+  Input: {},
+};
+
+export interface StorybookConfig {
+  Button: {
+    sizes: Array<keyof ButtonSizes>;
+    variants: Array<keyof ButtonVariants>;
+    colors: Array<keyof ButtonColors>;
+  };
+  Input: {};
+}
+
+// Context
+const Context = React.createContext(defaultConfig);
+
+// consumer
+export function useStorybookConfig<T extends keyof StorybookConfig>(
+  key: T
+): StorybookConfig[T] {
+  return useContext(Context)[key];
+}
+
+// Provider
+interface StorybookContextProviderProps {
+  config: StorybookConfig;
+  children: ReactNode;
+}
+
+export function StorybookContextProvider(props: StorybookContextProviderProps) {
+  return (
+    <Context.Provider value={props.config}>{props.children}</Context.Provider>
+  );
+}

package/button/button.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var cx_1 = require("@uxf/core/utils/cx");
-function Button(props) {
-    var _a, _b, _c;
-    var className = (0, cx_1.cx)("button", "button--color-".concat((_a = props.color) !== null && _a !== void 0 ? _a : "default"), "button--size-".concat((_b = props.size) !== null && _b !== void 0 ? _b : "default"), "button--variant-".concat((_c = props.variant) !== null && _c !== void 0 ? _c : "default"), props.disabled && "button--disabled", props.loading && "button--loading");
-    return (react_1.default.createElement("button", { type: "button", className: className },
-        props.startAdornment,
-        props.children,
-        props.endAdornment));
-}
-exports.default = Button;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2J1dHRvbi9idXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsZ0RBQXlDO0FBRXpDLHlDQUF3QztBQWF4QyxTQUFTLE1BQU0sQ0FBQyxLQUFrQjs7SUFDaEMsSUFBTSxTQUFTLEdBQUcsSUFBQSxPQUFFLEVBQ2xCLFFBQVEsRUFDUix3QkFBaUIsTUFBQSxLQUFLLENBQUMsS0FBSyxtQ0FBSSxTQUFTLENBQUUsRUFDM0MsdUJBQWdCLE1BQUEsS0FBSyxDQUFDLElBQUksbUNBQUksU0FBUyxDQUFFLEVBQ3pDLDBCQUFtQixNQUFBLEtBQUssQ0FBQyxPQUFPLG1DQUFJLFNBQVMsQ0FBRSxFQUMvQyxLQUFLLENBQUMsUUFBUSxJQUFJLGtCQUFrQixFQUNwQyxLQUFLLENBQUMsT0FBTyxJQUFJLGlCQUFpQixDQUNuQyxDQUFDO0lBRUYsT0FBTyxDQUNMLDBDQUFRLElBQUksRUFBQyxRQUFRLEVBQUMsU0FBUyxFQUFFLFNBQVM7UUFDdkMsS0FBSyxDQUFDLGNBQWM7UUFDcEIsS0FBSyxDQUFDLFFBQVE7UUFDZCxLQUFLLENBQUMsWUFBWSxDQUNaLENBQ1YsQ0FBQztBQUNKLENBQUM7QUFFRCxrQkFBZSxNQUFNLENBQUMifQ==

package/button/button.stories.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loading = exports.Disabled = exports.Default = void 0;
-var react_1 = __importDefault(require("react"));
-var button_1 = require("@uxf/ui/button");
-var storybook_1 = require("@uxf/ui/storybook");
-var react_2 = require("react");
-exports.default = {
-    title: "UI/Button",
-    component: button_1.Button,
-};
-function Default() {
-    var config = (0, storybook_1.useStorybookConfig)("Button");
-    return (react_1.default.createElement("div", { className: "space-y-2" }, config.variants.map(function (variant) { return (react_1.default.createElement(react_2.Fragment, { key: variant }, config.colors.map(function (color) { return (react_1.default.createElement(react_2.Fragment, { key: color }, config.sizes.map(function (size) { return (react_1.default.createElement("div", null,
-        react_1.default.createElement(button_1.Button, { key: size, variant: variant, color: color, size: size }, "Button"))); }))); }))); })));
-}
-exports.Default = Default;
-function Disabled() {
-    var config = (0, storybook_1.useStorybookConfig)("Button");
-    return (react_1.default.createElement("div", { className: "space-y-2" }, config.variants.map(function (variant) { return (react_1.default.createElement(react_2.Fragment, { key: variant }, config.colors.map(function (color) { return (react_1.default.createElement(react_2.Fragment, { key: color }, config.sizes.map(function (size) { return (react_1.default.createElement("div", null,
-        react_1.default.createElement(button_1.Button, { key: size, variant: variant, color: color, size: size, disabled: true }, "Button"))); }))); }))); })));
-}
-exports.Disabled = Disabled;
-function Loading() {
-    var config = (0, storybook_1.useStorybookConfig)("Button");
-    return (react_1.default.createElement("div", { className: "space-y-2" }, config.variants.map(function (variant) { return (react_1.default.createElement(react_2.Fragment, { key: variant }, config.colors.map(function (color) { return (react_1.default.createElement(react_2.Fragment, { key: color }, config.sizes.map(function (size) { return (react_1.default.createElement("div", null,
-        react_1.default.createElement(button_1.Button, { key: size, variant: variant, color: color, size: size, loading: true }, "Button"))); }))); }))); })));
-}
-exports.Loading = Loading;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLnN0b3JpZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL2J1dHRvbi5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxnREFBMEI7QUFDMUIseUNBQXdDO0FBQ3hDLCtDQUF1RDtBQUN2RCwrQkFBaUM7QUFFakMsa0JBQWU7SUFDYixLQUFLLEVBQUUsV0FBVztJQUNsQixTQUFTLEVBQUUsZUFBTTtDQUNsQixDQUFDO0FBRUYsU0FBZ0IsT0FBTztJQUNyQixJQUFNLE1BQU0sR0FBRyxJQUFBLDhCQUFrQixFQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRTVDLE9BQU8sQ0FDTCx1Q0FBSyxTQUFTLEVBQUMsV0FBVyxJQUN2QixNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLE9BQU8sSUFBSyxPQUFBLENBQ2hDLDhCQUFDLGdCQUFRLElBQUMsR0FBRyxFQUFFLE9BQU8sSUFDbkIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFLLElBQUssT0FBQSxDQUM1Qiw4QkFBQyxnQkFBUSxJQUFDLEdBQUcsRUFBRSxLQUFLLElBQ2pCLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FDMUI7UUFDRSw4QkFBQyxlQUFNLElBQ0wsR0FBRyxFQUFFLElBQUksRUFDVCxPQUFPLEVBQUUsT0FBTyxFQUNoQixLQUFLLEVBQUUsS0FBSyxFQUNaLElBQUksRUFBRSxJQUFJLGFBR0gsQ0FDTCxDQUNQLEVBWDJCLENBVzNCLENBQUMsQ0FDTyxDQUNaLEVBZjZCLENBZTdCLENBQUMsQ0FDTyxDQUNaLEVBbkJpQyxDQW1CakMsQ0FBQyxDQUNFLENBQ1AsQ0FBQztBQUNKLENBQUM7QUEzQkQsMEJBMkJDO0FBRUQsU0FBZ0IsUUFBUTtJQUN0QixJQUFNLE1BQU0sR0FBRyxJQUFBLDhCQUFrQixFQUFDLFFBQVEsQ0FBQyxDQUFDO0lBRTVDLE9BQU8sQ0FDTCx1Q0FBSyxTQUFTLEVBQUMsV0FBVyxJQUN2QixNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLE9BQU8sSUFBSyxPQUFBLENBQ2hDLDhCQUFDLGdCQUFRLElBQUMsR0FBRyxFQUFFLE9BQU8sSUFDbkIsTUFBTSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFLLElBQUssT0FBQSxDQUM1Qiw4QkFBQyxnQkFBUSxJQUFDLEdBQUcsRUFBRSxLQUFLLElBQ2pCLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FDMUI7UUFDRSw4QkFBQyxlQUFNLElBQ0wsR0FBRyxFQUFFLElBQUksRUFDVCxPQUFPLEVBQUUsT0FBTyxFQUNoQixLQUFLLEVBQUUsS0FBSyxFQUNaLElBQUksRUFBRSxJQUFJLEVBQ1YsUUFBUSxtQkFHRCxDQUNMLENBQ1AsRUFaMkIsQ0FZM0IsQ0FBQyxDQUNPLENBQ1osRUFoQjZCLENBZ0I3QixDQUFDLENBQ08sQ0FDWixFQXBCaUMsQ0FvQmpDLENBQUMsQ0FDRSxDQUNQLENBQUM7QUFDSixDQUFDO0FBNUJELDRCQTRCQztBQUVELFNBQWdCLE9BQU87SUFDckIsSUFBTSxNQUFNLEdBQUcsSUFBQSw4QkFBa0IsRUFBQyxRQUFRLENBQUMsQ0FBQztJQUU1QyxPQUFPLENBQ0wsdUNBQUssU0FBUyxFQUFDLFdBQVcsSUFDdkIsTUFBTSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxPQUFPLElBQUssT0FBQSxDQUNoQyw4QkFBQyxnQkFBUSxJQUFDLEdBQUcsRUFBRSxPQUFPLElBQ25CLE1BQU0sQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLFVBQUMsS0FBSyxJQUFLLE9BQUEsQ0FDNUIsOEJBQUMsZ0JBQVEsSUFBQyxHQUFHLEVBQUUsS0FBSyxJQUNqQixNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxVQUFDLElBQUksSUFBSyxPQUFBLENBQzFCO1FBQ0UsOEJBQUMsZUFBTSxJQUNMLEdBQUcsRUFBRSxJQUFJLEVBQ1QsT0FBTyxFQUFFLE9BQU8sRUFDaEIsS0FBSyxFQUFFLEtBQUssRUFDWixJQUFJLEVBQUUsSUFBSSxFQUNWLE9BQU8sbUJBR0EsQ0FDTCxDQUNQLEVBWjJCLENBWTNCLENBQUMsQ0FDTyxDQUNaLEVBaEI2QixDQWdCN0IsQ0FBQyxDQUNPLENBQ1osRUFwQmlDLENBb0JqQyxDQUFDLENBQ0UsQ0FDUCxDQUFDO0FBQ0osQ0FBQztBQTVCRCwwQkE0QkMifQ==

package/storybook/index.d.ts

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

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