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

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-element.jsx

@@ -1,11 +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 forwardRef_1 = require("@uxf/ui/utils/forwardRef");
-function InputElement(props, ref) {
-    return (<input id={props.id} ref={ref} className="uxf-input__element" value={props.value} onFocus={props.onFocus} onBlur={props.onBlur} onChange={(event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }} placeholder={props.placeholder}/>);
-}
-exports.default = (0, forwardRef_1.forwardRef)("InputElement", InputElement);

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);

package/input/input-left-addon.tsx

@@ -1,12 +0,0 @@
-import React, { ReactNode } from "react";
-import { forwardRef } from "../utils/forwardRef";
-
-interface InputLeftAddonProps {
-  children: ReactNode;
-}
-
-function InputLeftAddon(props: InputLeftAddonProps) {
-  return <div className="uxf-input__left-addon">{props.children}</div>;
-}
-
-export default InputLeftAddon;

package/input/input-left-element.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputLeftElementProps {
-  children?: ReactNode;
-}
-
-function InputLeftElement(props: InputLeftElementProps) {
-  return <div className="uxf-input__left-element">{props.children}</div>;
-}
-
-export default InputLeftElement;

package/input/input-right-addon.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputRightAddonProps {
-  children: ReactNode;
-}
-
-function InputRightAddon(props: InputRightAddonProps) {
-  return <div className="uxf-input__right-addon">{props.children}</div>;
-}
-
-export default InputRightAddon;

package/input/input-right-element.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from "react";
-
-interface InputRightElementProps {
-  children?: ReactNode;
-}
-
-function InputRightElement(props: InputRightElementProps) {
-  return <div className="uxf-input__right-element">{props.children}</div>;
-}
-
-export default InputRightElement;

package/input/input.css

@@ -1,75 +0,0 @@
-.uxf-input {
-  @apply rounded-md text-sm shadow-sm;
-
-  &__left-element,
-  &__right-element {
-    @apply text-gray-400;
-  }
-
-  &__left-element {
-    @apply pl-2;
-  }
-  &__right-element {
-    @apply pr-2;
-  }
-
-  &__left-addon,
-  &__right-addon {
-    @apply border border-gray-300 bg-gray-50 px-2 text-gray-500;
-  }
-
-  &__left-addon {
-    @apply rounded-l-md border-r-0;
-  }
-
-  &__right-addon {
-    @apply rounded-r-md border-l-0;
-  }
-
-  &__wrapper {
-    @apply h-10 rounded-md border border-gray-300;
-  }
-
-  &__element {
-    @apply bg-transparent outline-none;
-  }
-
-  &--has-right-addon {
-    .uxf-input__wrapper {
-      @apply rounded-r-none;
-    }
-  }
-
-  &--has-left-addon {
-    .uxf-input__wrapper {
-      @apply rounded-l-none;
-    }
-  }
-
-  &--focused {
-    .uxf-input__wrapper {
-      @apply border-primary-500 ring-1 ring-inset ring-primary-500 ring-offset-0;
-    }
-  }
-
-  &--invalid {
-    &.uxf-input--focused {
-      .uxf-input__wrapper {
-        @apply ring-1 ring-inset ring-error-500 ring-offset-0;
-      }
-    }
-
-    .uxf-input__wrapper {
-      @apply border-error-500 placeholder-error-300;
-
-      .uxf-input__left-element,
-      .uxf-input__right-element {
-        @apply text-error-500;
-      }
-
-      .uxf-input__element {
-        @apply text-error-900 placeholder-error-300;
-      }
-    }
-  }
-}

package/input/input.stories.jsx

@@ -1,78 +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 });
-exports.ComponentStructure = exports.Default = void 0;
-const react_1 = __importStar(require("react"));
-const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
-const action_1 = require("@uxf/ui/utils/action");
-const input_1 = require("@uxf/ui/input");
-exports.default = {
-    title: "UI/Input",
-    component: input_1.Input,
-};
-function Default() {
-    const [value, onChange] = (0, react_1.useState)("");
-    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
-    return (<div className="space-y-2">
-      <input type="checkbox" checked={isInvalid} onChange={(e) => setInvalid(e.target.checked)}/>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>InputLeftAddon</input_1.Input.LeftAddon>
-        <input_1.Input.LeftElement>InputLeftElement</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightElement>InputRightElement</input_1.Input.RightElement>
-        <input_1.Input.RightAddon>InputRightAddon</input_1.Input.RightAddon>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>https://</input_1.Input.LeftAddon>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightAddon>.uxf.cz</input_1.Input.RightAddon>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.LeftElement>🌷</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-        <input_1.Input.RightElement>🔔</input_1.Input.RightElement>
-      </input_1.Input>
-      <input_1.Input>
-        <input_1.Input.Element value={value} onChange={(0, action_1.action)("onChange", onChange)} placeholder="Placeholder" isInvalid={isInvalid}/>
-      </input_1.Input>
-    </div>);
-}
-exports.Default = Default;
-function ComponentStructure() {
-    const [value, onChange] = (0, react_1.useState)("");
-    return (<component_structure_analyzer_1.default>
-      <input_1.Input>
-        <input_1.Input.LeftAddon>Left addon</input_1.Input.LeftAddon>
-        <input_1.Input.LeftElement>Left element</input_1.Input.LeftElement>
-        <input_1.Input.Element value={value} onChange={onChange}/>
-        <input_1.Input.RightElement>Right element</input_1.Input.RightElement>
-        <input_1.Input.RightAddon>Right addon</input_1.Input.RightAddon>
-      </input_1.Input>
-    </component_structure_analyzer_1.default>);
-}
-exports.ComponentStructure = ComponentStructure;

package/input/input.stories.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from "react";
-import ComponentStructureAnalyzer from "@uxf/ui/utils/component-structure-analyzer";
-import { action } from "@uxf/ui/utils/action";
-import { Input } from "@uxf/ui/input";
-
-export default {
-  title: "UI/Input",
-  component: Input,
-};
-
-export function Default() {
-  const [value, onChange] = useState("");
-  const [isInvalid, setInvalid] = useState(false);
-
-  return (
-    <div className="space-y-2">
-      <input
-        type="checkbox"
-        checked={isInvalid}
-        onChange={(e) => setInvalid(e.target.checked)}
-      />
-      <Input>
-        <Input.LeftAddon>InputLeftAddon</Input.LeftAddon>
-        <Input.LeftElement>InputLeftElement</Input.LeftElement>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightElement>InputRightElement</Input.RightElement>
-        <Input.RightAddon>InputRightAddon</Input.RightAddon>
-      </Input>
-      <Input>
-        <Input.LeftAddon>https://</Input.LeftAddon>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightAddon>.uxf.cz</Input.RightAddon>
-      </Input>
-      <Input>
-        <Input.LeftElement>🌷</Input.LeftElement>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-        <Input.RightElement>🔔</Input.RightElement>
-      </Input>
-      <Input>
-        <Input.Element
-          value={value}
-          onChange={action("onChange", onChange)}
-          placeholder="Placeholder"
-          isInvalid={isInvalid}
-        />
-      </Input>
-    </div>
-  );
-}
-
-export function ComponentStructure() {
-  const [value, onChange] = useState("");
-  return (
-    <ComponentStructureAnalyzer>
-      <Input>
-        <Input.LeftAddon>Left addon</Input.LeftAddon>
-        <Input.LeftElement>Left element</Input.LeftElement>
-        <Input.Element value={value} onChange={onChange} />
-        <Input.RightElement>Right element</Input.RightElement>
-        <Input.RightAddon>Right addon</Input.RightAddon>
-      </Input>
-    </ComponentStructureAnalyzer>
-  );
-}

package/input/input.tsx

@@ -1,70 +0,0 @@
-import React, { ReactElement, ReactNode, useRef, useState } from "react";
-import { cx } from "@uxf/ui/utils/cx";
-import { InputGroupSizes, InputGroupVariants } from "@uxf/ui/input/theme";
-
-export interface InputProps {
-  children: ReactNode;
-  variant?: keyof InputGroupVariants;
-  size?: keyof InputGroupSizes;
-}
-
-function getChildrenById(
-  children: ReactNode,
-  componentName: string
-): ReactElement | undefined {
-  return React.Children.toArray(children)
-    .filter(React.isValidElement)
-    .find((ch) => (ch.type as any).displayName === componentName);
-}
-
-function Input(props: InputProps) {
-  const inputWrapperRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [focused, setFocused] = useState(false);
-
-  const mainInput = getChildrenById(props.children, "InputElement");
-  const leftAddon = getChildrenById(props.children, "InputLeftAddon");
-  const rightAddon = getChildrenById(props.children, "InputRightAddon");
-  const leftElement = getChildrenById(props.children, "InputLeftElement");
-  const rightElement = getChildrenById(props.children, "InputRightElement");
-
-  const inputGroupClasses = cx(
-    "uxf-input",
-    leftAddon && "uxf-input--has-left-addon",
-    leftElement && "uxf-input--has-left-element",
-    rightElement && "uxf-input--has-right-element",
-    rightAddon && "uxf-input--has-right-addon",
-    focused && "uxf-input--focused",
-    mainInput?.props.isInvalid && "uxf-input--invalid"
-  );
-
-  const onFocus = (e: any) => {
-    setFocused(true);
-    mainInput?.props.onFocus?.(e);
-  };
-
-  const onBlur = (e: any) => {
-    setFocused(false);
-    mainInput?.props.onBlur?.(e);
-  };
-
-  return (
-    <div className={inputGroupClasses}>
-      {leftAddon}
-      <div
-        className="uxf-input__wrapper"
-        ref={inputWrapperRef}
-        onClick={() => inputRef.current?.focus()}
-      >
-        {leftElement}
-        {mainInput
-          ? React.cloneElement(mainInput, { ref: inputRef, onFocus, onBlur })
-          : null}
-        {rightElement}
-      </div>
-      {rightAddon}
-    </div>
-  );
-}
-
-export default Input;

package/input/theme.ts

@@ -1,7 +0,0 @@
-export interface InputGroupVariants {
-  default: true;
-}
-
-export interface InputGroupSizes {
-  default: true;
-}

package/text-input/index.ts

@@ -1 +0,0 @@
-export * from "./text-input";

package/text-input/text-input.css

@@ -1,29 +0,0 @@
-.uxf-text-input {
-  &__label {
-    @apply mb-1 block text-sm font-medium text-gray-700;
-  }
-
-  &__helper-text {
-    @apply mt-1 text-xs text-gray-500;
-  }
-
-  &--invalid {
-    .uxf-text-input__helper-text {
-      @apply text-error-600;
-    }
-  }
-
-  &--focused {
-  }
-
-  &--disabled {
-  }
-
-  &--required {
-    .uxf-text-input__label {
-      &::after {
-        content: " *";
-      }
-    }
-  }
-}

package/text-input/text-input.jsx

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
-const input_1 = require("@uxf/ui/input");
-const react_1 = require("react");
-const cx_1 = require("@uxf/ui/utils/cx");
-function TextInput(props) {
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const rootClassName = (0, cx_1.cx)("uxf-text-input", props.isInvalid && "uxf-text-input--invalid", props.isDisabled && "uxf-text-input--disabled", props.isRequired && "uxf-text-input--required", isFocused && "uxf-text-input--focused");
-    const onFocus = (e) => {
-        var _a;
-        setIsFocused(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    const onBlur = (e) => {
-        var _a;
-        setIsFocused(false);
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    };
-    return (<div className={rootClassName}>
-      <label className="uxf-text-input__label">{props.label}</label>
-      <input_1.Input size={props.size} variant={props.variant}>
-        {props.leftAddon && (<input_1.Input.LeftAddon>{props.leftAddon}</input_1.Input.LeftAddon>)}
-        {props.leftElement && (<input_1.Input.LeftElement>{props.leftElement}</input_1.Input.LeftElement>)}
-        <input_1.Input.Element name={props.name} value={props.value} onChange={props.onChange} onFocus={onFocus} onBlur={onBlur} isInvalid={props.isInvalid} isRequired={props.isRequired} isReadOnly={props.isReadOnly} isDisabled={props.isDisabled} placeholder={props.placeholder}/>
-        {props.rightElement && (<input_1.Input.RightElement>{props.rightElement}</input_1.Input.RightElement>)}
-        {props.rightAddon && (<input_1.Input.RightAddon>{props.rightAddon}</input_1.Input.RightAddon>)}
-      </input_1.Input>
-      <div className="uxf-text-input__helper-text">{props.helperText}</div>
-    </div>);
-}
-exports.TextInput = TextInput;

package/text-input/text-input.stories.jsx

@@ -1,55 +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 });
-exports.ComponentStructure = exports.Default = void 0;
-const react_1 = __importStar(require("react"));
-const text_input_1 = require("@uxf/ui/text-input");
-const component_structure_analyzer_1 = __importDefault(require("@uxf/ui/utils/component-structure-analyzer"));
-exports.default = {
-    title: "UI/TextInput",
-    component: text_input_1.TextInput,
-};
-function Default() {
-    const [value, onChange] = (0, react_1.useState)("");
-    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
-    return (<div className="space-y-4">
-      <input type="checkbox" checked={isInvalid} onChange={(e) => setInvalid(e.target.checked)}/>
-      <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" isRequired/>
-      <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" leftElement="USD"/>
-      <text_input_1.TextInput label="Label" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text" leftAddon="https://" rightAddon=".cz" leftElement="🌷" rightElement="🔔"/>
-    </div>);
-}
-exports.Default = Default;
-function ComponentStructure() {
-    const [value, onChange] = (0, react_1.useState)("");
-    const [isInvalid, setInvalid] = (0, react_1.useState)(false);
-    return (<component_structure_analyzer_1.default>
-      <text_input_1.TextInput label="Label" placeholder="Placeholder" leftElement="🌷" rightElement="🔔" leftAddon="https://" rightAddon=".cz" value={value} onChange={onChange} isInvalid={isInvalid} helperText="Helper text"/>
-    </component_structure_analyzer_1.default>);
-}
-exports.ComponentStructure = ComponentStructure;