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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "description": "",
   "publishConfig": {
     "access": "public"

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.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.ts

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

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.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.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.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.tsx

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

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

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

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

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

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

@@ -1,33 +0,0 @@
-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>
-  );
-}

package/image-gallery/image-gallery.tsx

@@ -1,59 +0,0 @@
-import React, { ReactNode, useCallback, useState } from "react";
-import { ImageGalleryProvider } from "./context";
-import { ImageGalleryImageProps } from "./types";
-import Gallery from "./components/gallery";
-
-interface ImageGalleryProviderProps {
-  children: ReactNode;
-}
-
-function ImageGallery(props: ImageGalleryProviderProps) {
-  const [images, setImages] = useState<ImageGalleryImageProps[]>([]);
-  const [imageIndex, setImageIndex] = useState<null | number>(null);
-
-  const registerImage = (image: ImageGalleryImageProps) =>
-    setImages((v) => [...v, image]);
-
-  const unregisterImage = (image: ImageGalleryImageProps) =>
-    setImages((v) => v.filter((u) => u.src !== image.src));
-
-  const openGallery = (image: ImageGalleryImageProps) =>
-    setImageIndex(images.findIndex((i) => i.src === image.src));
-
-  const onPrevious = useCallback(() => {
-    setImageIndex((v) => (v === null ? null : v - 1));
-  }, []);
-
-  const onNext = useCallback(() => {
-    setImageIndex((v) => (v === null ? null : v + 1));
-  }, []);
-
-  // modulo bug https://stackoverflow.com/a/4467559
-  const moduloImageIndex =
-    imageIndex === null
-      ? null
-      : imageIndex < 0
-      ? ((imageIndex % images.length) + images.length) % images.length
-      : imageIndex % images.length;
-
-  const contextValue = { registerImage, unregisterImage, openGallery };
-
-  return (
-    <>
-      <ImageGalleryProvider value={contextValue}>
-        {props.children}
-      </ImageGalleryProvider>
-      {typeof moduloImageIndex === "number" && (
-        <Gallery
-          onClose={() => setImageIndex(null)}
-          onNext={onNext}
-          onPrevious={onPrevious}
-          imageIndex={moduloImageIndex}
-          images={images}
-        />
-      )}
-    </>
-  );
-}
-
-export default ImageGallery;

package/image-gallery/image.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { useImage } from "./use-image";
-import { ImageGalleryImageProps } from "@uxf/ui/image-gallery/types";
-
-function Image(props: ImageGalleryImageProps) {
-  const openGallery = useImage(props);
-
-  return (
-    <img
-      src={props.src}
-      alt={props.alt}
-      title={props.title}
-      className={props.className}
-      onClick={() => openGallery(props)}
-    />
-  );
-}
-
-export default Image;

package/image-gallery/index.ts

@@ -1,3 +0,0 @@
-export { default as Image } from "./image";
-export { default as ImageGallery } from "./image-gallery";
-export * from "./use-image";

package/image-gallery/types.ts

@@ -1,6 +0,0 @@
-export interface ImageGalleryImageProps {
-  src: string;
-  title?: string;
-  alt?: string;
-  className?: string;
-}

package/image-gallery/use-image.ts

@@ -1,17 +0,0 @@
-import { useEffect } from "react";
-import { useImageGalleryContext } from "./context";
-import { ImageGalleryImageProps } from "./types";
-
-export function useImage(props: ImageGalleryImageProps) {
-  const { registerImage, unregisterImage, openGallery } =
-    useImageGalleryContext();
-
-  useEffect(() => {
-    registerImage(props);
-    return () => {
-      unregisterImage(props);
-    };
-  }, [props]);
-
-  return openGallery;
-}

package/input/index.ts

@@ -1,14 +0,0 @@
-import RootInput from "./input";
-import Element from "./input-element";
-import LeftElement from "./input-left-element";
-import RightElement from "./input-right-element";
-import LeftAddon from "./input-left-addon";
-import RightAddon from "./input-right-addon";
-
-export const Input = Object.assign(RootInput, {
-  Element,
-  LeftElement,
-  RightElement,
-  LeftAddon,
-  RightAddon,
-});

package/input/input-basic.css

@@ -1,18 +0,0 @@
-.uxf-input {
-  @apply flex flex-row;
-}
-
-.uxf-input__wrapper {
-  @apply flex w-full flex-row;
-}
-
-.uxf-input__element {
-  @apply w-full px-2;
-}
-
-.uxf-input__left-element,
-.uxf-input__right-element,
-.uxf-input__left-addon,
-.uxf-input__right-addon {
-  @apply flex flex-row items-center whitespace-nowrap;
-}

package/input/input-element.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { forwardRef } from "@uxf/ui/utils/forwardRef";
-import { FormControlProps } from "@uxf/ui/types/form-control-props";
-
-export interface InputElementProps extends FormControlProps<string> {
-  id?: string;
-  placeholder?: string;
-}
-
-type InputTypeRef = HTMLInputElement;
-
-function InputElement(
-  props: InputElementProps,
-  ref: React.ForwardedRef<InputTypeRef>
-) {
-  return (
-    <input
-      id={props.id}
-      ref={ref}
-      className="uxf-input__element"
-      value={props.value}
-      onFocus={props.onFocus}
-      onBlur={props.onBlur}
-      onChange={(event) => props.onChange?.(event.target.value, event)}
-      placeholder={props.placeholder}
-    />
-  );
-}
-
-export default forwardRef("InputElement", InputElement);