@uxf/ui 1.0.0-beta.16 → 1.0.0-beta.22

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.22",
   "description": "",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "yarn compile",
+    "build": "npm run-script compile",
     "compile": "tsc -P tsconfig.json",
     "typecheck": "tsc --noEmit --skipLibCheck",
-    "prepublish": "yarn build"
+    "prepublish": "npm run-script build"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/react-dom": "^0.6.0",
+    "@headlessui/react": "^1.6.6",
     "@uxf/core": "latest"
-  },
-  "stableVersion": "1.0.0-beta.15"
-}
+  }
+}

package/button/button.css

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

package/button/button.d.ts

@@ -1,15 +0,0 @@
-import { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-interface ButtonProps {
-    variant?: keyof ButtonVariants;
-    color?: keyof ButtonColors;
-    size?: keyof ButtonSizes;
-    disabled?: boolean;
-    loading?: boolean;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    type?: "button" | "submit" | "reset";
-    children: ReactNode;
-}
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;

package/button/button.jsx

@@ -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 });
-const react_1 = __importDefault(require("react"));
-const cx_1 = require("@uxf/core/utils/cx");
-function Button(props) {
-    var _a, _b, _c;
-    const className = (0, cx_1.cx)("button", `button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && `button--disabled`, props.loading && `button--loading`);
-    return (<button type={props.type} className={className}>
-      {props.startAdornment}
-      {props.children}
-      {props.endAdornment}
-    </button>);
-}
-exports.default = Button;

package/button/button.stories.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { Button } from "@uxf/ui/button";
-declare const _default: {
-    title: string;
-    component: typeof Button;
-};
-export default _default;
-export declare function Default(): JSX.Element;
-export declare function Disabled(): JSX.Element;
-export declare function Loading(): JSX.Element;

package/button/button.stories.jsx

@@ -1,59 +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;
-const react_1 = __importDefault(require("react"));
-const button_1 = require("@uxf/ui/button");
-const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
-const react_2 = require("react");
-exports.default = {
-    title: "UI/Button",
-    component: button_1.Button,
-};
-function Default() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (<div className="space-y-2">
-      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
-          {config.colors.map((color) => (<react_2.Fragment key={color}>
-              {config.sizes.map((size) => (<div>
-                  <button_1.Button key={size} variant={variant} color={color} size={size}>
-                    Button
-                  </button_1.Button>
-                </div>))}
-            </react_2.Fragment>))}
-        </react_2.Fragment>))}
-    </div>);
-}
-exports.Default = Default;
-function Disabled() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (<div className="space-y-2">
-      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
-          {config.colors.map((color) => (<react_2.Fragment key={color}>
-              {config.sizes.map((size) => (<div>
-                  <button_1.Button key={size} variant={variant} color={color} size={size} disabled>
-                    Button
-                  </button_1.Button>
-                </div>))}
-            </react_2.Fragment>))}
-        </react_2.Fragment>))}
-    </div>);
-}
-exports.Disabled = Disabled;
-function Loading() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (<div className="space-y-2">
-      {config.variants.map((variant) => (<react_2.Fragment key={variant}>
-          {config.colors.map((color) => (<react_2.Fragment key={color}>
-              {config.sizes.map((size) => (<div>
-                  <button_1.Button key={size} variant={variant} color={color} size={size} loading>
-                    Button
-                  </button_1.Button>
-                </div>))}
-            </react_2.Fragment>))}
-        </react_2.Fragment>))}
-    </div>);
-}
-exports.Loading = Loading;

package/button/button.stories.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import { Button } from "@uxf/ui/button";
-import { useStorybookConfig } from "@uxf/ui/utils/storybook-config";
-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) => (
-            <Fragment key={color}>
-              {config.sizes.map((size) => (
-                <div>
-                  <Button
-                    key={size}
-                    variant={variant}
-                    color={color}
-                    size={size}
-                  >
-                    Button
-                  </Button>
-                </div>
-              ))}
-            </Fragment>
-          ))}
-        </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) => (
-            <Fragment key={color}>
-              {config.sizes.map((size) => (
-                <div>
-                  <Button
-                    key={size}
-                    variant={variant}
-                    color={color}
-                    size={size}
-                    disabled
-                  >
-                    Button
-                  </Button>
-                </div>
-              ))}
-            </Fragment>
-          ))}
-        </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) => (
-            <Fragment key={color}>
-              {config.sizes.map((size) => (
-                <div>
-                  <Button
-                    key={size}
-                    variant={variant}
-                    color={color}
-                    size={size}
-                    loading
-                  >
-                    Button
-                  </Button>
-                </div>
-              ))}
-            </Fragment>
-          ))}
-        </Fragment>
-      ))}
-    </div>
-  );
-}

package/button/button.tsx

@@ -1,36 +0,0 @@
-import React, { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-import { cx } from "@uxf/core/utils/cx";
-
-interface ButtonProps {
-  variant?: keyof ButtonVariants;
-  color?: keyof ButtonColors;
-  size?: keyof ButtonSizes;
-  disabled?: boolean;
-  loading?: boolean;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  type?: "button" | "submit" | "reset";
-  children: ReactNode;
-}
-
-function Button(props: ButtonProps) {
-  const className = cx(
-    "button",
-    `button--color-${props.color ?? "default"}`,
-    `button--size-${props.size ?? "default"}`,
-    `button--variant-${props.variant ?? "default"}`,
-    props.disabled && `button--disabled`,
-    props.loading && `button--loading`
-  );
-
-  return (
-    <button type={props.type} className={className}>
-      {props.startAdornment}
-      {props.children}
-      {props.endAdornment}
-    </button>
-  );
-}
-
-export default Button;

package/button/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "@uxf/ui/button/button";
-export * from "@uxf/ui/button/theme";

package/button/index.js

@@ -1,23 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-var button_1 = require("@uxf/ui/button/button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
-__exportStar(require("@uxf/ui/button/theme"), exports);

package/button/index.ts

@@ -1,2 +0,0 @@
-export { default as Button } from "@uxf/ui/button/button";
-export * from "@uxf/ui/button/theme";

package/button/theme.d.ts

@@ -1,18 +0,0 @@
-export interface ButtonVariants {
-    outlined: true;
-    default: true;
-}
-export interface ButtonSizes {
-    xs: true;
-    sm: true;
-    default: true;
-    lg: true;
-    xl: true;
-}
-export interface ButtonColors {
-    default: true;
-    white: true;
-    success: true;
-    warning: true;
-    error: true;
-}

package/button/theme.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/button/theme.ts

@@ -1,20 +0,0 @@
-export interface ButtonVariants {
-  outlined: true;
-  default: true;
-}
-
-export interface ButtonSizes {
-  xs: true;
-  sm: true;
-  default: true;
-  lg: true;
-  xl: true;
-}
-
-export interface ButtonColors {
-  default: true;
-  white: true;
-  success: true;
-  warning: true;
-  error: true;
-}

package/image-gallery/components/close-button.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface CloseButtonProps {
-    onClick: () => void;
-}
-declare function CloseButton(props: CloseButtonProps): JSX.Element;
-export default CloseButton;

package/image-gallery/components/close-button.jsx

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const icon_close_1 = __importDefault(require("./icon-close"));
-function CloseButton(props) {
-    return (<button className="bg-black bg-opacity-50 p-3" onClick={() => props.onClick()}>
-      <icon_close_1.default />
-    </button>);
-}
-exports.default = CloseButton;

package/image-gallery/components/close-button.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import IconClose from "./icon-close";
-
-interface CloseButtonProps {
-  onClick: () => void;
-}
-
-function CloseButton(props: CloseButtonProps) {
-  return (
-    <button
-      className="bg-black bg-opacity-50 p-3"
-      onClick={() => props.onClick()}
-    >
-      <IconClose />
-    </button>
-  );
-}
-
-export default CloseButton;

package/image-gallery/components/dot.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-interface DotProps {
-    active?: boolean;
-}
-declare function Dot(props: DotProps): JSX.Element;
-export default Dot;

package/image-gallery/components/dot.jsx

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const cx_1 = require("@uxf/core/utils/cx");
-const react_1 = __importDefault(require("react"));
-function Dot(props) {
-    const className = (0, cx_1.cx)("h-2 w-2 rounded-full", props.active ? "bg-gray-500" : "bg-white");
-    return <div className={className}/>;
-}
-exports.default = Dot;

package/image-gallery/components/dot.tsx

@@ -1,17 +0,0 @@
-import { cx } from "@uxf/core/utils/cx";
-import React from "react";
-
-interface DotProps {
-  active?: boolean;
-}
-
-function Dot(props: DotProps) {
-  const className = cx(
-    "h-2 w-2 rounded-full",
-    props.active ? "bg-gray-500" : "bg-white"
-  );
-
-  return <div className={className} />;
-}
-
-export default Dot;

package/image-gallery/components/gallery.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { ImageGalleryImageProps } from "../types";
-interface GalleryProps {
-    onClose: () => void;
-    onNext: () => void;
-    onPrevious: () => void;
-    imageIndex: number;
-    images: ImageGalleryImageProps[];
-}
-declare function Gallery(props: GalleryProps): JSX.Element;
-export default Gallery;

package/image-gallery/components/gallery.jsx

@@ -1,74 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const close_button_1 = __importDefault(require("./close-button"));
-const previous_button_1 = __importDefault(require("./previous-button"));
-const next_button_1 = __importDefault(require("./next-button"));
-const dot_1 = __importDefault(require("./dot"));
-const react_1 = __importStar(require("react"));
-function Gallery(props) {
-    (0, react_1.useEffect)(() => {
-        const onKeyDown = (event) => {
-            switch (event.key) {
-                case "ArrowRight":
-                    props.onNext();
-                    break;
-                case "ArrowLeft":
-                    props.onPrevious();
-                    break;
-                case "Escape":
-                    props.onClose();
-                    break;
-            }
-        };
-        document.body.style.overflow = "hidden";
-        window.addEventListener("keydown", onKeyDown);
-        return () => {
-            document.body.style.overflow = "auto";
-            window.removeEventListener("keydown", onKeyDown);
-        };
-    }, []);
-    return (<div className="fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity">
-      <div className="flex justify-end">
-        <close_button_1.default onClick={props.onClose}/>
-      </div>
-      <div className="container mx-auto flex h-full flex-1 flex-col">
-        <div className="relative flex flex-1 items-center justify-center">
-          <img className="absolute left-0 right-0 top-0 h-full w-full object-contain" src={props.images[props.imageIndex].src}/>
-          <div className="pointer-events-none absolute inset-0 flex items-center justify-between p-2">
-            <previous_button_1.default onClick={props.onPrevious}/>
-            <next_button_1.default onClick={props.onNext}/>
-          </div>
-        </div>
-      </div>
-      <div className="row mx-auto flex space-x-2 p-4">
-        {props.images.map((url, index) => (<dot_1.default key={url.src} active={index === props.imageIndex}/>))}
-      </div>
-    </div>);
-}
-exports.default = Gallery;

package/image-gallery/components/gallery.tsx

@@ -1,67 +0,0 @@
-import CloseButton from "./close-button";
-import PreviousButton from "./previous-button";
-import NextButton from "./next-button";
-import Dot from "./dot";
-import React, { useEffect } from "react";
-import { ImageGalleryImageProps } from "../types";
-
-interface GalleryProps {
-  onClose: () => void;
-  onNext: () => void;
-  onPrevious: () => void;
-  imageIndex: number;
-  images: ImageGalleryImageProps[];
-}
-
-function Gallery(props: GalleryProps) {
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      switch (event.key) {
-        case "ArrowRight":
-          props.onNext();
-          break;
-        case "ArrowLeft":
-          props.onPrevious();
-          break;
-        case "Escape":
-          props.onClose();
-          break;
-      }
-    };
-
-    document.body.style.overflow = "hidden";
-    window.addEventListener("keydown", onKeyDown);
-
-    return () => {
-      document.body.style.overflow = "auto";
-      window.removeEventListener("keydown", onKeyDown);
-    };
-  }, []);
-
-  return (
-    <div className="fixed inset-0 top-0 bottom-0 z-50 flex flex-col bg-black bg-opacity-75 transition-opacity">
-      <div className="flex justify-end">
-        <CloseButton onClick={props.onClose} />
-      </div>
-      <div className="container mx-auto flex h-full flex-1 flex-col">
-        <div className="relative flex flex-1 items-center justify-center">
-          <img
-            className="absolute left-0 right-0 top-0 h-full w-full object-contain"
-            src={props.images[props.imageIndex].src}
-          />
-          <div className="pointer-events-none absolute inset-0 flex items-center justify-between p-2">
-            <PreviousButton onClick={props.onPrevious} />
-            <NextButton onClick={props.onNext} />
-          </div>
-        </div>
-      </div>
-      <div className="row mx-auto flex space-x-2 p-4">
-        {props.images.map((url, index) => (
-          <Dot key={url.src} active={index === props.imageIndex} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default Gallery;

package/image-gallery/components/icon-chevron-left.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function IconChevronLeft(): JSX.Element;
-export default IconChevronLeft;