@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/MultiSelectField/multiSelectField.module.scss

@@ -0,0 +1,205 @@
+.dropdown {
+  position: relative;
+
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  &.error {
+    .control{
+      border: 1px solid var(--color-error);
+      background: var(--color-error-lite);
+
+      input{
+        background:transparent;
+      }
+
+      &:focus {
+        border: 2px solid var(--color-error);
+        background: #ffffff;
+      }
+    }
+  }
+
+  .control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    min-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;
+
+    &:focus {
+      outline: none;
+      border: 2px solid var(--color-gray-900);
+    }
+  }
+
+  .tagHolder {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: -2px;
+    width: 100%;
+  }
+
+  .input {
+    min-width: 2px;
+    flex: 1;
+  }
+
+  input[type= 'text'] {
+    min-width: 2px;
+    width: 100%;
+    border: none;
+    outline: none;
+    font-family: var(--font);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--font-weight-input);
+
+    &:focus {
+      border: 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);
+    max-width: 200px;
+    width: 100%;
+  }
+
+  .chevron {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.dropdownMenu {
+  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);
+  }
+
+}
+
+.tagWrap {
+  padding: 2px;
+}
+
+button.tag {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 4px;
+  background-color: var(--color-gray-200);
+  border: none;
+  outline: none;
+  height: 32px;
+  padding: 2px 8px;
+  transition: linear 0.3s;
+
+  &:hover {
+    background-color: var(--color-gray-400);
+  }
+
+  .removeBtn {
+    display: flex;
+    align-items: center;
+    margin-left: 4px;
+    cursor: pointer;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+  }
+
+}
+
+.dropdownItem {
+  padding: calc(var(--space-unit) * 2);
+  cursor: pointer;
+  color: black;
+
+
+  &.selected {
+    background-color: var(--color-gray-300);
+  }
+
+  &.active {
+    background-color: var(--color-gray-50);
+  }
+
+  &:hover {
+    background-color: var(--color-gray-100);
+  }
+}
+
+.createOptionMessage {
+  padding: calc(var(--space-unit) * 2);
+  font-size: 12px;
+  color: var(--color-gray-500);
+}

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

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

package/src/Components/Form/NumberField/NumberField.tsx

@@ -0,0 +1,137 @@
+import cx from "classnames";
+import styles from "../inputs.module.scss";
+import NumberFieldProps from "./NumberFieldProps.tsx";
+import { useEffect, useRef, useState } from "react";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const NumberField = (props: NumberFieldProps) => {
+  const {
+    name,
+    id,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    numberValue,
+    preventScrolling,
+    formatter = true,
+    onChange,
+    loading,
+    ...args
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [displayValue, setDisplayValue] = useState("");
+
+  useEffect(() => {
+    if (formatter) {
+      if (numberValue && numberValue !== '') {
+        const cleanValue = numberValue?.toString().replace(/[^0-9.]/g, "");
+        // @ts-ignore
+        setDisplayValue(formatNumber(cleanValue));
+      }else{
+        setDisplayValue('')
+      }
+    } else {
+      setDisplayValue(numberValue);
+    }
+  }, [numberValue, formatter]);
+
+  const formatNumber = (value: string) => {
+    if(formatter){
+      const parts = value?.toString().split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      return parts.join('.');
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    let newValue = '';
+    if (value) {
+      const cleanValue = value?.toString().replace(/[^0-9.]/g, '');
+
+      const decimalCount = cleanValue.split('.').length - 1;
+      newValue = cleanValue;
+      if (decimalCount > 1) {
+        newValue = cleanValue.slice(0, cleanValue.lastIndexOf('.'));
+      }
+    }
+
+    // @ts-ignore
+    setDisplayValue(formatNumber(newValue));
+
+    if (onChange) {
+      const e = {
+        ...event,
+        target: {
+          ...event.target,
+          value: newValue,
+        },
+      };
+      onChange(e);
+    }
+  };
+
+
+  useEffect(() => {
+    const handleWheel = (e: WheelEvent) => {
+      if (preventScrolling && e.target === inputRef.current) {
+        e.preventDefault();
+      }
+    };
+
+    const currentInput = inputRef.current;
+
+    if (currentInput) {
+      currentInput.addEventListener("wheel", handleWheel);
+    }
+
+    return () => {
+      if (currentInput) {
+        currentInput.removeEventListener("wheel", handleWheel);
+      }
+    };
+  }, [preventScrolling]);
+
+  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={formatter ? 'text' : 'number'}
+      value={displayValue}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readonly}
+      inputMode={'numeric'}
+      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"}
+      ref={inputRef}
+      onChange={handleChange}
+      {...args}
+    />
+  </div>
+};
+
+export default NumberField;

package/src/Components/Form/NumberField/NumberFieldProps.tsx

@@ -0,0 +1,10 @@
+import InputProps from "../../Form/InputProps";
+
+interface NumberFieldProps extends InputProps {
+  numberValue?: number | string | any | undefined;
+  preventScrolling?: boolean;
+  formatter?: boolean;
+  numberMode?: boolean;
+}
+
+export default NumberFieldProps;

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

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

package/src/Components/Form/PasswordField/PasswordField.tsx

@@ -0,0 +1,73 @@
+import cx from "classnames";
+import InputProps from "../InputProps";
+import styles from "../inputs.module.scss";
+import Eye from "../../Icons/Design/Eye/Eye";
+import EyeSlash from "../../Icons/Design/EyeSlash/EyeSlash";
+import { useState } from "react";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const PasswordField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    loading,
+    ...args
+  } = props;
+
+  const [fieldType, setFieldType] = useState("password");
+
+  const onPasswordChange = () => {
+    setFieldType(fieldType === "password" ? "text" : "password");
+  };
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={styles.passwordCon}>
+      {loading && <LoadingInput />}
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type={fieldType}
+        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}
+      />
+      <span onClick={onPasswordChange} className={styles.eyeicon}>
+        {fieldType == "password" ? (
+          <Eye type="regular" />
+        ) : (
+          <EyeSlash type="regular" />
+        )}
+      </span>
+    </div>
+  );
+};
+
+export default PasswordField;

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

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

package/src/Components/Form/PhoneField/PhoneField.tsx

@@ -0,0 +1,55 @@
+import cx from "classnames";
+import styles from "../inputs.module.scss";
+import inputProps from "../InputProps.tsx";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const PhoneField = (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="tel"
+      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 PhoneField;

package/src/Components/Form/RadioButtons/RadioButton.tsx

@@ -0,0 +1,100 @@
+import cx from "classnames";
+import RadioButtonProps from "./RadioButtonProps";
+import styles from "./radiobutton.module.scss";
+import { useEffect, useState} from "react";
+
+const RadioButton = (props: RadioButtonProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["radio", styles.radio];
+  const classesHolders = [
+    "radioHolder",
+    styles.radioHolder,
+  ];
+
+  // `${displaytype === "box" && styles.radioBtnBox}`, todo
+
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  if (disabled) {
+    classesHolders.push(styles.disabled);
+  }
+
+  if (error) {
+    classes.push(styles.error);
+    classesHolders.push(styles.error);
+  }
+
+  useEffect(() => {
+    setIsChecked(checked || false);
+  }, [checked]);
+
+  const handleChange = (e:any) => {
+    if (!readonly && !disabled) {
+      setIsChecked(e.target.checked);
+      if (onChange) {
+        onChange(e, e.target.checked);
+      }
+    }
+  };
+  return (
+    <div className={`${styles.radioButtonWrap}`}>
+      <label className={cx(classesHolders)} onChange={handleChange}>
+        <div className={cx(classes)} >
+          <input
+            id={id}
+            name={name}
+            checked={isChecked}
+            type={"radio"}
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readonly}
+            required={required}
+            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"}
+            {...args}
+          />
+          <div className={styles.circle}></div>
+        </div>
+
+        {label &&
+          (typeof label === "string" ? (
+            <label htmlFor={id} className={styles.radioBtnLabel}>{label}</label>
+          ) : (
+            <label htmlFor={id} className={styles.radioBtnLabel}>
+              {label}
+            </label>
+          ))
+        }
+
+        {/* {!!label && <label htmlFor={id}>{label}</label>} */}
+      </label>
+    </div>
+  );
+};
+
+export default RadioButton;

package/src/Components/Form/RadioButtons/RadioButtonProps.tsx

@@ -0,0 +1,25 @@
+import { FocusEvent, MouseEvent } from "react";
+import { ReactNode } from "react";
+
+interface RadioButtonProps {
+  label?:string | ReactNode;
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  checked?: boolean;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  onChange?: (e: MouseEvent, checked?: boolean) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  displaytype?: 'default' | 'box';
+}
+
+export default RadioButtonProps;