@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

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

@@ -0,0 +1,55 @@
+import React from "react";
+import type { Meta, StoryObj } from '@storybook/react';
+import DropdownField from "./DropdownField";
+import {NameValueInterface} from "./DropdownFieldProps";
+import Users from "../../Icons/People/Users/Users";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Form / Dropdown Field',
+  component: DropdownField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownField>;
+
+export default meta;
+type Story = StoryObj<typeof DropdownField>;
+
+// 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'
+    ],
+    pillar: "visit",
+    level: "primary"
+  },
+};
+
+export const Props: Story = {
+  args: {
+    name: 'dropdown-field',
+    placeholder: 'Placeholder text',
+    options: [
+      {
+        label: 'Lorem ipsum',
+        value: 1,
+        icon: <Users/>
+      },
+      {
+        label: 'In sagittis metus',
+        value: 2
+      },
+      {
+        label: 'Suspendisse potenti',
+        value: 3
+      },
+    ] as NameValueInterface[]
+  },
+};

package/src/Components/Form/DropdownField/DropdownField.tsx

@@ -0,0 +1,245 @@
+import cx from "classnames";
+import DropdownFieldProps, { NameValueInterface } from "./DropdownFieldProps";
+import styles from "./dropdown.module.scss";
+import { useEffect, useState, useRef, MouseEvent, useCallback } from "react";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import DropdownFieldSelector from "./DropdownFieldSelector";
+import DropdownFieldItem from "./DropdownFieldItem";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+import { createPortal } from "react-dom";
+
+const DropdownField = (props: DropdownFieldProps) => {
+  const {
+    name,
+    id,
+    value,
+    options,
+    placeholder,
+    extraClass,
+    disabled = false,
+    readonly = false,
+    error,
+    ariaLabel,
+    required,
+    emptyString,
+    commentInDropdown,
+    loading,
+    pillar,
+    level,
+    onChange,
+  } = props;
+
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState<string | number | undefined | null | boolean>();
+  const [label, setLabel] = useState("");
+  const [dropdownStyles, setDropdownStyles] = useState<React.CSSProperties>({});
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const dropdownSelectorRef = useRef<HTMLDivElement>(null);
+  const controlRef = useRef<HTMLDivElement>(null);
+  const lastPosition = useRef<DOMRect | null>(null);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  useEffect(() => {
+    for (const option of options) {
+      let matched = null;
+      if (typeof option === "string") {
+        matched = option === selected ? option : null;
+      } else {
+        matched = option.value === selected ? option.label : null;
+      }
+      if (matched) {
+        setLabel(matched);
+        break;
+      }
+    }
+  }, [selected, options]);
+
+  const updateDropdownPosition = useCallback(() => {
+    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: 99999,
+      });
+    }
+  }, [opened]);
+
+  const handlePositionChanges = useCallback(() => {
+    if (!controlRef.current) return;
+
+    updateDropdownPosition();
+    const currentPosition = controlRef.current.getBoundingClientRect();
+
+    if (opened && lastPosition.current && (
+      lastPosition.current.top !== currentPosition.top ||
+      lastPosition.current.left !== currentPosition.left
+    )) {
+      setOpened(false);
+    }
+
+    lastPosition.current = currentPosition;
+  }, [opened, updateDropdownPosition]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        dropdownSelectorRef.current &&
+        !dropdownSelectorRef.current.contains(event.target as Node)
+      ) {
+        setOpened(false);
+      }
+    };
+
+    // @ts-ignore
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // @ts-ignore
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (opened) {
+      window.addEventListener('resize', handlePositionChanges);
+      window.addEventListener('scroll', handlePositionChanges, true);
+      updateDropdownPosition();
+    }
+
+    return () => {
+      window.removeEventListener('resize', handlePositionChanges);
+      window.removeEventListener('scroll', handlePositionChanges, true);
+    };
+  }, [opened, handlePositionChanges, updateDropdownPosition]);
+
+  useEffect(() => {
+    if (!controlRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!controlRef.current) return;
+
+      const currentPosition = controlRef.current.getBoundingClientRect();
+      if (lastPosition.current && (
+        lastPosition.current.y !== currentPosition.y ||
+        lastPosition.current.x !== currentPosition.x ||
+        lastPosition.current.top !== currentPosition.top ||
+        lastPosition.current.left !== currentPosition.left
+      )) {
+        setOpened(false);
+      }
+      lastPosition.current = currentPosition;
+    });
+
+    observer.observe(controlRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const classNames = [styles.dropdown];
+
+  if (error) {
+    classNames.push(styles.error);
+  }
+
+  if (extraClass) {
+    classNames.push(extraClass);
+  }
+
+  if (disabled) {
+    classNames.push(styles.disabled);
+  }
+
+  const handleOpenClose = () => {
+    if (disabled || readonly) return;
+    setOpened(!opened);
+  };
+  const handleSelect = (
+    e: MouseEvent,
+    value: string | number | undefined | null | boolean
+  ) => {
+    e.stopPropagation()
+    setSelected(value);
+    setOpened(false);
+    if (onChange) {
+      onChange(e, value);
+    }
+  };
+
+
+  return (
+    <div ref={dropdownRef}  className={`${cx(classNames)} ${pillar} ${level}`}>
+      {loading && <LoadingInput />}
+      <div ref={controlRef} className={styles.control} onClick={handleOpenClose} tabIndex={0}>
+        {!selected && placeholder && (
+          <div className={styles.placeholder} aria-label={ariaLabel}>
+            {placeholder}
+          </div>
+        )}
+        {(selected || !placeholder) && (
+          <div className={styles.label} aria-label={ariaLabel}>
+            {label}
+            {!!selected && <div className={styles.reset}></div>}
+          </div>
+        )}
+        <div className={styles.chevron}>
+          {!opened && <CaretDown />}
+          {!!opened && <CaretUp />}
+        </div>
+      </div>
+      { opened && (!readonly && !disabled) &&  createPortal(
+          <DropdownFieldSelector ref={dropdownSelectorRef} style={{ ...dropdownStyles}}>
+            {commentInDropdown && (
+              <div className={styles.message}>{commentInDropdown}</div>
+            )}
+            {!!emptyString && (
+              <DropdownFieldItem
+                label={emptyString}
+                value={''}
+                handleSelect={handleSelect}
+              />
+            )}
+            {options.map((option: string | NameValueInterface, index: number) => {
+              return (
+                <DropdownFieldItem
+                  key={index}
+                  handleSelect={handleSelect}
+                  label={typeof option === "object" ? option.label : option}
+                  value={typeof option === "object" ? option.value : option}
+                />
+              );
+            })}
+          </DropdownFieldSelector>,
+          document.body
+      )}
+
+      <input
+        name={name}
+        value={selected ? selected.toString() : ""}
+        id={id}
+        type={"hidden"}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+      />
+    </div>
+  );
+};
+
+export default DropdownField;

package/src/Components/Form/DropdownField/DropdownFieldItem.tsx

@@ -0,0 +1,33 @@
+import DropdownFieldItemProps from "./DropdownFieldItemProps";
+import styles from './dropdown.module.scss'
+import {MouseEvent} from "react";
+
+const DropdownFieldItem = (props: DropdownFieldItemProps) => {
+  const {
+    label,
+    value,
+    icon,
+    handleSelect
+  } = props;
+
+  return <div
+    className={styles.dropdownItem}
+    data-value={value} aria-label={label}
+    onClick={(e: MouseEvent) => {
+      e.stopPropagation();
+      if (handleSelect) {
+        handleSelect(e, value);
+      }
+    }}
+  >
+    {icon && (
+      <div className={styles.itemIcon}>
+        {icon}
+      </div>
+    )}
+    {label}
+  </div>
+
+}
+
+export default DropdownFieldItem;

package/src/Components/Form/DropdownField/DropdownFieldItemProps.tsx

@@ -0,0 +1,10 @@
+import { MouseEvent, ReactNode } from "react";
+
+interface DropdownFieldItemProps {
+  label: string;
+  value: string|number|undefined|null|boolean;
+  icon?:ReactNode
+  handleSelect: (e: MouseEvent, value: string |number|undefined|null|boolean) => void;
+}
+
+export default DropdownFieldItemProps;

package/src/Components/Form/DropdownField/DropdownFieldProps.tsx

@@ -0,0 +1,39 @@
+import { MouseEvent, FocusEvent, ReactNode } from "react";
+
+interface NameValueInterface {
+  label: string;
+  value: string|number|undefined|null|boolean;
+  icon?:ReactNode
+}
+
+interface DropdownFieldProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  options: NameValueInterface[]|string[]
+  extraClass?: string;
+  placeholder?: string;
+  emptyString?: string;
+  commentInDropdown?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: React.MouseEvent, value: string |number|undefined|null|boolean) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  loading?: boolean;
+  level?: 'primary' | 'secondary' | 'light'
+  pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+}
+
+export type { NameValueInterface };
+
+export default DropdownFieldProps;

package/src/Components/Form/DropdownField/DropdownFieldSelector.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import styles from './dropdown.module.scss';
+import  DropdownFieldSelectorProps  from "./DropdownFieldSelectorProps";
+import React from "react";
+
+const DropdownFieldSelector = React.forwardRef<HTMLDivElement, DropdownFieldSelectorProps>((props, ref) => {
+  const { children, style,  } = props;
+
+  const dropdownClasses = cx(styles.dropdownSelector);
+
+
+  return (
+    <div
+      ref={ref}
+      className={dropdownClasses}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default DropdownFieldSelector;

package/src/Components/Form/DropdownField/DropdownFieldSelectorProps.tsx

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

package/src/Components/Form/DropdownField/dropdown.module.scss

@@ -0,0 +1,144 @@
+.dropdown {
+  position: relative;
+  width: 100%;
+  // padding: 18px;
+
+  &.error .control{
+      border: 1px solid var(--color-error);
+      background: var(--color-error-lite);
+  }
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .control {
+    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(--form-field-border);
+    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;
+
+    &:focus {
+      outline: 4px solid color-mix(in srgb, var(--color-text) 50%, transparent);
+      // outline: 4px solid red;
+    }
+  }
+
+
+  .label {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-right: calc(var(--space-unit) * 3);
+
+    .labelIcon{
+      display: flex;
+      margin-right: 8px;
+
+      svg{
+        width: 48px;
+        height: 48px;
+      }
+    }
+  }
+
+  .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 {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.dropdownSelector {
+  z-index: 100;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  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 {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+  color: black;
+  cursor: pointer;
+
+  .itemIcon{
+    display: flex;
+    margin-right: 8px;
+
+    svg{
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &.active,
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}
+
+.message{
+  padding: calc(var(--space-unit) * 2);
+  font-size: 12px;
+  color: var(--color-gray-500);
+}

package/src/Components/Form/EmailField/EmailField.stories.ts

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

package/src/Components/Form/EmailField/EmailField.tsx

@@ -0,0 +1,56 @@
+import cx from 'classnames';
+import styles from '../inputs.module.scss' ;
+import InputProps from "../InputProps";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const EmailField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    loading,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={styles.field}>
+    {loading && <LoadingInput />}
+    <input
+      className={cx(classes)}
+      id={id}
+      name={name}
+      type='email'
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      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}
+    />
+  </div>
+};
+
+
+export default EmailField;

package/src/Components/Form/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,5 @@
+const ErrorMessage = () =>{
+
+}
+
+export default ErrorMessage;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import FormFieldHolder from "./FormFieldHolder";
+import TextField from "../TextField/TextField";
+
+const meta: Meta = {
+  title: "Form / FormFieldHolder",
+  component: FormFieldHolder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const FormFieldHolderTemplate: Story = {
+  render: () => {
+    return (
+      <FormFieldHolder optional={true} label="Name" description={"helper text"} labelClass="labelColor">
+        <TextField  placeholder="Placeholder" />
+      </FormFieldHolder>
+    );
+  },
+};
+
+export const FormFieldHolderComponent = {
+  ...FormFieldHolderTemplate,
+};