@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/TypableDropdownField/TypableDropdownField.stories.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import TypableDropdownField from "./TypableDropdownField";
+import {TypableNameValueInterface} from "./TypableDropdownFieldProps";
+import { MagnifyingGlass } from "../../Icons";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / Typable Dropdown Field',
+  component: TypableDropdownField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TypableDropdownField>;
+
+export default meta;
+type Story = StoryObj<typeof TypableDropdownField>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    name: 'dropdown-field',
+    placeholder: 'Super long placeholder text',
+    options: [
+      'Lorem ipsum',
+      'Suspendisse sit amet',
+      'In sagittis metus'
+    ],
+    onSearch: undefined,
+    icon: <MagnifyingGlass/>
+  },
+};
+
+export const Props: Story = {
+  args: {
+    name: 'dropdown-field',
+    placeholder: 'Placeholder text',
+    onSearch: undefined,
+    options: [
+      {
+        label: 'Lorem ipsum',
+        value: 1
+      },
+      {
+        label: 'In sagittis metus',
+        value: 2
+      },
+      {
+        label: 'Suspendisse potenti',
+        value: 3
+      },
+    ] as TypableNameValueInterface[]
+  },
+};

package/src/Components/Form/TypableDropdownField/TypableDropdownField.tsx

@@ -0,0 +1,313 @@
+import cx from "classnames";
+import TypableDropdownFieldProps, { TypableNameValueInterface } from "./TypableDropdownFieldProps.tsx";
+import styles from "./typableDropdown.module.scss";
+import { useEffect, useState, MouseEvent, useRef } from "react";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import TypableDropdownFieldSelector from "./TypableDropdownFieldSelector.tsx";
+import TypableDropdownFieldItem from "./TypableDropdownFieldItem.tsx";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const TypableDropdownField = (props: TypableDropdownFieldProps) => {
+
+  const {
+    name,
+    id,
+    value,
+    icon,
+    options,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    onClick,
+    autoComplete,
+    creatable,
+    onCreateNew,
+    onSearch,
+    isLoading,
+    skeletonLoading,
+    ...args
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [inputValue, setInputValue] = useState<string | number>("");
+  const [filteredOptions, setFilteredOptions] = useState<any[]>([]);
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setOpened(false);
+      }
+    };
+
+    // @ts-ignore
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // @ts-ignore
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const updateDropdownPosition = () => {
+    if (opened && controlRef.current && dropdownSelectorRef.current) {
+      const rect = controlRef.current.getBoundingClientRect();
+      const dropdownHeight = dropdownSelectorRef.current.offsetHeight;
+      const spaceBelow = window.innerHeight - rect.bottom;
+
+      const dropdownTop = spaceBelow < dropdownHeight ? rect.top - dropdownHeight : rect.bottom;
+
+      setDropdownStyles({
+        top: `${dropdownTop}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        position: 'fixed',
+        zIndex: 100,
+      });
+    }
+  };
+
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let initialPosition = controlRef.current.getBoundingClientRect();
+
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+
+      if (!controlRef.current) return;
+
+      const currentPosition = controlRef.current.getBoundingClientRect();
+
+      if (
+        initialPosition.top !== currentPosition.top ||
+        initialPosition.left !== currentPosition.left
+      ) {
+        setOpened(false);
+      }
+    };
+
+    if (opened) {
+      window.addEventListener('resize', handleResizeOrScroll);
+      window.addEventListener('scroll', handleResizeOrScroll, true);
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll, true);
+    };
+  }, [opened]);
+
+  useEffect(() => {
+    updateDropdownPosition();
+  }, [opened]);
+
+  useEffect(() => {
+    const handleResizeOrScroll = () => {
+      updateDropdownPosition();
+    };
+
+    window.addEventListener('resize', handleResizeOrScroll);
+    window.addEventListener('scroll', handleResizeOrScroll, true);
+
+    return () => {
+      window.removeEventListener('resize', handleResizeOrScroll);
+      window.removeEventListener('scroll', handleResizeOrScroll, true);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    let lastPosition = controlRef.current.getBoundingClientRect();
+
+    const observer = new ResizeObserver(() => {
+      const currentPosition = controlRef.current!.getBoundingClientRect();
+
+      if (
+        lastPosition.y !== currentPosition.y ||
+        lastPosition.x !== currentPosition.x ||
+        lastPosition.top !== currentPosition.top ||
+        lastPosition.left !== currentPosition.left
+      ) {
+        setOpened(false);
+      }
+      lastPosition = currentPosition;
+    });
+
+    observer.observe(controlRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [controlRef, opened]);
+
+  const classNames = [styles.dropdown];
+  if (error) {
+    classNames.push(styles.error);
+  }
+
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+  if (disabled) {
+    classNames.push(styles.disabled);
+  }
+
+  if (readonly) {
+    classNames.push(styles.readonly);
+  }
+
+  const handleOpenClose = (e: any) => {
+    setOpened(!opened);
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleSelect = (e: MouseEvent, selectedValue: string | number, label: string | number) => {
+    setInputValue(label);
+    setOpened(false);
+    if (onChange) {
+      onChange(e, selectedValue);
+    }
+  };
+
+  useEffect(() => {
+    setFilteredOptions(options);
+  }, [options]);
+
+  useEffect(() => {
+    if (onSearch) {
+      onSearch(inputValue);
+    } else {
+      let filtered: any[] = [];
+      if (inputValue) {
+        options.map((option: any) => {
+          if (typeof option === "string") {
+            if (option.toLowerCase().indexOf(inputValue.toString().toLowerCase()) >= 0) {
+              filtered.push(option);
+            }
+          } else if (option.label && option.label.toLowerCase().indexOf(inputValue.toString().toLowerCase()) >= 0) {
+            filtered.push(option);
+          }
+        });
+      } else {
+        filtered = [...options];
+      }
+      setFilteredOptions(filtered);
+    }
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (value) {
+      setInputValue(value);
+    }
+  }, [value]);
+
+  const handleCreateNew = (e: any) => {
+    if (onCreateNew) {
+      onCreateNew(inputValue, e);
+    }
+  };
+
+  return (
+    <div ref={dropdownRef} className={cx(classNames)}>
+      {skeletonLoading && <LoadingInput />}
+      <div ref={controlRef} className={`${styles.control} control ${icon ? styles.textField : ""}`}>
+        {!!icon && <div className={styles.textFieldIcon}>{icon}</div>}
+        <input
+          className={`${styles.input} input`}
+          type="text"
+          value={inputValue}
+          placeholder={placeholder}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+          }}
+          onClick={handleOpenClose}
+          onKeyUp={(e) => {
+            if (creatable && e.key === "Enter") {
+              e.preventDefault();
+              setOpened(false);
+              handleCreateNew(e);
+            }
+          }}
+          readOnly={readonly}
+          required={required}
+          autoComplete={autoComplete ? "on" : "off"}
+          aria-label={ariaLabel ? ariaLabel : name}
+          aria-required={required ? "true" : "false"}
+          aria-invalid={error ? "true" : "false"}
+          aria-disabled={disabled ? "true" : "false"}
+          aria-readonly={readonly ? "true" : "false"}
+          aria-autocomplete={autoComplete ? "list" : "none"}
+          {...args}
+        />
+        {isLoading ? (
+            <div onClick={(e) => e.stopPropagation()} className={styles.chevron}>
+              <div className={styles.customLoader}></div>
+            </div>)
+          : (
+            <div className={`${styles.chevron} ${styles.chevronArrow}`}>
+              {!opened && <CaretDown />}
+              {!!opened && <CaretUp />}
+            </div>)
+        }
+      </div>
+      {creatable ? (<>
+          {!!opened && (
+            <TypableDropdownFieldSelector ref={dropdownSelectorRef} style={{ ...dropdownStyles}}>
+              {creatable && filteredOptions.length === 0 && (
+                <div onClick={(e) =>{
+                  setOpened(false);
+                  handleCreateNew(e);
+                }} className={styles.createOptionMessage}>Press Enter or click here to create new</div>
+              )}
+              {filteredOptions.map((option: string | TypableNameValueInterface, index: number) => (
+                <TypableDropdownFieldItem
+                  key={index}
+                  handleSelect={handleSelect}
+                  label={typeof option === "object" ? option.label : option}
+                  value={typeof option === "object" ? option.value : option}
+                />
+              ))}
+            </TypableDropdownFieldSelector>
+          )}
+        </>
+      ) : (
+        <>
+          {!!opened && filteredOptions.length > 0 && (
+            <TypableDropdownFieldSelector ref={dropdownSelectorRef} style={{ ...dropdownStyles}}>
+              {creatable && filteredOptions.length === 0 && (
+                <div className={styles.createOptionMessage}>Press Enter to create "{inputValue}"</div>
+              )}
+              {filteredOptions.map((option: string | TypableNameValueInterface, index: number) => (
+                <TypableDropdownFieldItem
+                  key={index}
+                  handleSelect={handleSelect}
+                  label={typeof option === "object" ? option.label : option}
+                  value={typeof option === "object" ? option.value : option}
+                />
+              ))}
+            </TypableDropdownFieldSelector>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default TypableDropdownField;

package/src/Components/Form/TypableDropdownField/TypableDropdownFieldItem.tsx

@@ -0,0 +1,27 @@
+import TypableDropdownFieldItemProps from "./TypableDropdownFieldItemProps.tsx";
+import styles from './typableDropdown.module.scss'
+import {MouseEvent} from "react";
+
+const TypableDropdownFieldItem = (props: TypableDropdownFieldItemProps) => {
+  const {
+    label,
+    value,
+    handleSelect
+  } = props;
+
+  return <div
+    className={styles.dropdownItem}
+    data-value={value}
+    aria-label={label}
+    onClick={(e: MouseEvent) => {
+      if (handleSelect) {
+        handleSelect(e, value, label);
+      }
+    }}
+  >
+    {label}
+  </div>
+
+}
+
+export default TypableDropdownFieldItem;

package/src/Components/Form/TypableDropdownField/TypableDropdownFieldItemProps.tsx

@@ -0,0 +1,9 @@
+import {MouseEvent} from "react";
+
+interface TypableDropdownFieldItemProps {
+  label: string;
+  value: string|number;
+  handleSelect: (e: MouseEvent, value: string|number, label: string|number) => void;
+}
+
+export default TypableDropdownFieldItemProps;

package/src/Components/Form/TypableDropdownField/TypableDropdownFieldProps.tsx

@@ -0,0 +1,38 @@
+import { MouseEvent, FocusEvent, ReactNode } from "react";
+
+interface TypableNameValueInterface {
+  label: string;
+  value: string|number;
+}
+
+interface TypableDropdownFieldProps {
+  icon?: ReactNode;
+  name?: string;
+  id?: string;
+  value?: string | number | undefined;
+  options: TypableNameValueInterface[]|string[]
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  minLength?: number;
+  maxLength?: number;
+  ariaLabeledby?: string;
+  creatable?:boolean;
+  onCreateNew?: (option: string|number, e: any) => void;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: MouseEvent, value: string|number) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onSearch?: (keywords: any) => void;
+  isLoading?:boolean;
+  skeletonLoading?:boolean;
+}
+
+export type { TypableNameValueInterface };
+
+export default TypableDropdownFieldProps;

package/src/Components/Form/TypableDropdownField/TypableDropdownFieldSelector.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import TypableDropdownFieldSelectorProps from "./TypableDropdownFieldSelectorProps.tsx";
+import styles from './typableDropdown.module.scss';
+import React from "react";
+
+const TypableDropdownFieldSelector  = React.forwardRef<HTMLDivElement, TypableDropdownFieldSelectorProps>((props, ref) => {
+
+  const classes = [styles.dropdownSelector];
+
+  return <div ref={ref} style={props.style} className={cx(classes)}>
+    {props.children}
+  </div>
+
+});
+
+export default TypableDropdownFieldSelector;

package/src/Components/Form/TypableDropdownField/TypableDropdownFieldSelectorProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface TypableDropdownFieldSelectorProps {
+  children: ReactNode
+  style?:any;
+}
+
+export default TypableDropdownFieldSelectorProps;

package/src/Components/Form/TypableDropdownField/typableDropdown.module.scss

@@ -0,0 +1,185 @@
+.dropdown {
+  position: relative;
+
+  &.readonly{
+    pointer-events: none;
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .textField {
+    width: 100%;
+
+    [type="text"] {
+      padding-left: calc(var(--space-unit) * 11);
+    }
+
+    .textFieldIcon {
+      display: flex;
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+
+      svg {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &.error .control input{
+    border: 1px solid var(--color-error);
+    background: var(--color-error-lite);
+  }
+
+  .control {
+    input {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 48px;
+      padding: var(--space-unit) calc(var(--space-unit) * 3);
+      border: 1px solid var(--color-gray-300);
+      border-radius: 6px;
+      font-family: var(--font);
+      font-size: var(--font-size-input);
+      line-height: var(--line-height-input);
+      font-weight: var(--font-weight-input);
+      cursor: pointer;
+      background: white;
+      padding-right: 36px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+
+      &::placeholder{
+        color: var(--color-gray-500);
+        font-size: var(--font-size-input);
+        line-height: var(--line-height-input);
+        font-weight: var(--font-weight-input);
+        padding-right: calc(var(--space-unit) * 4);
+      }
+
+    }
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  .label {
+    flex-grow: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-right: calc(var(--space-unit) * 3);
+  }
+
+  .placeholder {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-grow: 1;
+    color: var(--color-gray-500);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--font-weight-input);
+    padding-right: calc(var(--space-unit) * 3);
+  }
+
+  .chevron {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+
+    .customLoader {
+      width: 16px;
+      height: 16px;
+      border-radius: 100%;
+      position: relative;
+      border: 2px solid transparent;
+      border-top-color: var(--color-gray-400);
+      border-bottom-color: var(--color-gray-400);
+      border-left-color: var(--color-gray-400);
+      animation: rotate-ring 1s infinite linear;
+    }
+
+    @keyframes rotate-ring {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
+
+.dropdownSelector {
+  z-index: 100;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  padding: calc(var(--space-unit) * 2) 0;
+  border-radius: 4px;
+  background-color: var(--color-white);
+  box-shadow: var(--drop-shadow-default);
+  overflow-y: auto;
+  max-height: 150px;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.15);
+  }
+
+}
+
+.dropdownItem {
+  padding: calc(var(--space-unit) * 2);
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}
+
+.createOptionMessage{
+  padding: calc(var(--space-unit) * 2);
+  font-size: 12px;
+  color: var(--color-gray-500);
+}
+.chevronArrow{
+  cursor: pointer;
+  pointer-events: none;
+}

package/src/Components/Form/UnitInput/UnitField.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import UnitField from "./UnitField";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / UnitField",
+  component: UnitField,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof UnitField>;
+
+export default meta;
+type Story = StoryObj<typeof UnitField>;
+
+export const Example: Story = {
+  args: {
+    placeholder: "Placeholder",
+    value: 200,
+  },
+};