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

package/avatar/avatar.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AvatarSizes } from "./theme";
+interface FileResponse {
+    uuid: string;
+    namespace?: string;
+    extension: string;
+}
+export interface AvatarProps {
+    src: FileResponse | string | null | undefined;
+    size?: keyof AvatarSizes;
+    rounded?: boolean;
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;
+export {};

package/avatar/avatar.jsx

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+function Avatar(props) {
+    var _a;
+    const className = (0, cx_1.cx)("avatar", `avatar--size-${props.size}`, `avatar--variant-${(_a = props.circular) !== null && _a !== void 0 ? _a : "default"}`);
+    return <img src={props.src} className={className}/>;
+}
+exports.Avatar = Avatar;

package/avatar/avatar.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Avatar } from "./avatar";
+declare const _default: {
+    title: string;
+    component: typeof Avatar;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/avatar/avatar.stories.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+const avatar_1 = require("./avatar");
+exports.default = {
+    title: "UI/Avatar",
+    component: avatar_1.Avatar,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (<div className="space-y-4">
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12"/>
+      </div>
+      <div className="flex flex-row items-center space-x-4">
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10" variant="circular"/>
+        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12" variant="circular"/>
+      </div>
+    </div>);
+}
+exports.Default = Default;

package/avatar/theme.d.ts

@@ -0,0 +1,5 @@
+export interface AvatarSizes {
+    "8": true;
+    "10": true;
+    "12": true;
+}

package/button/button.css

@@ -0,0 +1,75 @@
+.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

@@ -8,6 +8,7 @@ interface ButtonProps {
     loading?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
+    type?: "button" | "submit" | "reset";
     children: ReactNode;
 }
 declare function Button(props: ButtonProps): JSX.Element;

package/button/button.jsx

@@ -8,7 +8,7 @@ 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="button" className={className}>
+    return (<button type={props.type} className={className}>
       {props.startAdornment}
       {props.children}
       {props.endAdornment}

package/button/button.stories.jsx

@@ -6,14 +6,14 @@ 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_1 = require("@uxf/ui/storybook");
+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_1.useStorybookConfig)("Button");
+    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}>
@@ -28,7 +28,7 @@ function Default() {
 }
 exports.Default = Default;
 function Disabled() {
-    const config = (0, storybook_1.useStorybookConfig)("Button");
+    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}>
@@ -43,7 +43,7 @@ function Disabled() {
 }
 exports.Disabled = Disabled;
 function Loading() {
-    const config = (0, storybook_1.useStorybookConfig)("Button");
+    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}>

package/button/button.stories.tsx

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,36 @@
+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.ts

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

package/button/theme.ts

@@ -0,0 +1,20 @@
+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.tsx

@@ -0,0 +1,19 @@
+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.tsx

@@ -0,0 +1,17 @@
+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.tsx

@@ -0,0 +1,67 @@
+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.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+function IconChevronLeft() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10 text-white"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+    </svg>
+  );
+}
+
+export default IconChevronLeft;

package/image-gallery/components/icon-chevron-right.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+function IconChevronRight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-10 w-10 text-white"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+    </svg>
+  );
+}
+
+export default IconChevronRight;

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

@@ -0,0 +1,22 @@
+import React from "react";
+
+function IconClose() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      className="h-10 w-10 text-white"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+}
+
+export default IconClose;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import IconChevronRight from "./icon-chevron-right";
+
+interface NextButtonProps {
+  onClick: () => void;
+}
+
+function NextButton(props: NextButtonProps) {
+  return (
+    <button
+      className="pointer-events-auto rounded-full bg-black bg-opacity-50  p-2"
+      onClick={props.onClick}
+    >
+      <IconChevronRight />
+    </button>
+  );
+}
+
+export default NextButton;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import IconChevronLeft from "./icon-chevron-left";
+
+interface PreviousButtonProps {
+  onClick: () => void;
+}
+
+function PreviousButton(props: PreviousButtonProps) {
+  return (
+    <button
+      className="pointer-events-auto rounded-full bg-black bg-opacity-50 p-2"
+      onClick={props.onClick}
+    >
+      <IconChevronLeft />
+    </button>
+  );
+}
+
+export default PreviousButton;

package/image-gallery/context.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { ImageGalleryImageProps } from "./types";
+
+type ContextType = {
+  registerImage: (props: ImageGalleryImageProps) => void;
+  unregisterImage: (props: ImageGalleryImageProps) => void;
+  openGallery: (props: ImageGalleryImageProps) => void;
+};
+
+const ImageGalleryContext = createContext<ContextType>({
+  registerImage: () => null,
+  unregisterImage: () => null,
+  openGallery: () => null,
+});
+
+export const ImageGalleryProvider = ImageGalleryContext.Provider;
+export const useImageGalleryContext = () => useContext(ImageGalleryContext);

package/image-gallery/image-gallery.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import ImageGallery from "./image-gallery";
+import Image from "./image";
+
+export default {
+  title: "Lab/ImageGallery",
+  component: ImageGallery,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+};
+
+const images = [
+  "https://opentopo.app/hero_image.jpeg",
+  "https://opentopo.app/generated/area-18/d/9/d9033d93-ea48-4f66-b0c1-6045c091b326_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-16/f/4/f4a4ca79-ea9e-44d1-a4ec-3c8ccfbcc218_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-1/8/b/8b84e378-1f55-4ce7-b750-b504091cb833_1024_1024_c.jpg",
+  "https://opentopo.app/generated/area-2/e/7/e7ec532b-20c2-407e-9305-fa7cfb71f01f_1024_1024_c.jpg",
+];
+
+export function Default() {
+  return (
+    <ImageGallery>
+      <div className="flex-direction flex gap-2">
+        {images.map((src) => (
+          <Image
+            key={src}
+            src={src}
+            className="h-56 w-56 cursor-pointer object-cover transition-transform hover:scale-105"
+          />
+        ))}
+      </div>
+    </ImageGallery>
+  );
+}