@hellobetterdigitalnz/selwynui 0.0.1-8 → 0.0.1-80

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,111 @@
+import cx from "classnames";
+import CheckboxProps from "./CheckboxProps";
+import styles from "./checkbox.module.scss";
+import {useEffect, useState, MouseEvent} from "react";
+
+const Checkbox = (props: CheckboxProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onClick,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classesHolders = ["checkboxHolder", styles.checkboxHolder];
+  const classes = ["checkbox", styles.checkbox];
+
+
+  if (extraClass) {
+    classesHolders.push(extraClass);
+  }
+  if (error) {
+    classesHolders.push(styles.error);
+    classes.push(styles.error);
+  }
+
+  if (disabled) {
+    classesHolders.push(styles.disabled);
+  }
+
+
+  useEffect(() => {
+    setIsChecked(checked ? checked : false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(!isChecked);
+    if ( onClick) {
+      onClick(e, isChecked);
+    }
+  };
+
+  const onChangeHandler = (e:any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <div className={cx(classesHolders)}>
+    <div className={cx(classes)}>
+      <input
+        id={id}
+        name={name}
+        checked={isChecked}
+        type={"checkbox"}
+        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"}
+        onClick={handleClick}
+        onChange={onChangeHandler}
+        {...args}
+      />
+      {!!isChecked && (
+        <svg
+          width="11"
+          height="10"
+          viewBox="0 0 11 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10.8425 2.10473C11.0378 2.29999 11.0378 2.61658 10.8425 2.81184L4.47856 9.1758C4.2833 9.37106 3.96672 9.37106 3.77146 9.1758L0.353775 5.75812C0.158513 5.56286 0.158513 5.24627 0.353775 5.05101L1.41443 3.99035C1.6097 3.79509 1.92628 3.79509 2.12154 3.99035L4.12501 5.99382L9.07476 1.04407C9.27002 0.84881 9.5866 0.84881 9.78187 1.04407L10.8425 2.10473Z"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+    </div>
+      {!!label && (
+        <label
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox;

package/src/Components/Form/Checkbox/CheckboxProps.tsx

@@ -0,0 +1,24 @@
+import {ChangeEvent, FocusEvent, MouseEvent} from "react";
+
+interface CheckboxProps {
+  label?:string;
+  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;
+  onClick?: (e: MouseEvent, checked?: boolean) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export default CheckboxProps;

package/src/Components/Form/Checkbox/checkbox.module.scss

@@ -0,0 +1,105 @@
+.checkboxHolder {
+  display: inline-flex;
+  align-items: center;
+
+  label {
+    cursor: pointer;
+    font-size: var(--font-size-label);
+    line-height: var(--line-height-h3);
+    font-weight: var(--font-weight-h3);
+    margin-left: 12px;
+  }
+
+  &.error {
+    label {
+      color: var(--color-error);
+    }
+  }
+
+  &.disabled {
+    label {
+      cursor: not-allowed;
+      color: var(--color-gray-200);
+    }
+  }
+
+}
+
+[dir="rtl"] {
+  .checkboxHolder {
+    label {
+      margin-right: calc(var(--space-unit) * 3);
+      margin-left: 0px;
+    }
+  }
+}
+
+.checkbox {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  input[type="checkbox"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    background-color: white;
+    border: 1px solid var(--form-field-border);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    cursor: pointer;
+
+    &:checked {
+      background-color: var(--color-gray-800);
+      border-color: var(--color-text);
+    }
+
+    &:hover {
+      border-color: var(--color-text);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-text);
+    }
+
+    &:disabled {
+      background-color: var(--color-gray-200);
+      border-color: var(--color-gray-200);
+
+
+      &:hover {
+        border-color: var(--color-gray-200);
+      }
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  input[type="checkbox"] ~ svg {
+    color: var(--color-white);
+  }
+
+  &.error {
+    input[type="checkbox"] {
+      border-color: var(--color-error);
+      color: var(--color-white);
+
+      &:checked {
+        background-color: var(--color-error);
+      }
+    }
+  }
+}

package/src/Components/Form/CheckboxSelect/CheckboxSelect.tsx

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

package/src/Components/Form/CheckboxSelect/CheckboxSelectItem.tsx

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

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

@@ -0,0 +1,100 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import CheckboxSet from "./CheckboxSet";
+import CheckboxSetItem from "./CheckboxSetItem";
+
+const meta: Meta = {
+  title: "Form / CheckboxSet",
+  component: CheckboxSet,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const CheckboxSetTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <CheckboxSet {...args}>
+        {items.map((item: any) => (
+          <CheckboxSetItem label={item.label} name={item.name} id={item.id} />
+        ))}
+      </CheckboxSet>
+    );
+  },
+};
+
+export const Default = {
+  ...CheckboxSetTemplate,
+  args: {
+    items: [
+      {
+        id: "c-1",
+        name: "check-one",
+        label:'Check label'
+      },
+      {
+        id: "c-2",
+        name: "check-one",
+        label:'Check label'
+      },
+      {
+        id: "c-3",
+        name: "check-one",
+        label:'Check label'
+      },
+      {
+        id: "c-4",
+        name: "check-one",
+        label:'Check label'
+      },
+      {
+        id: "c-5",
+        name: "check-one",
+        label:'Check label'
+      },
+      {
+        id: "c-6",
+        name: "check-one",
+        label:'Check label'
+      },
+    ],
+  },
+};
+
+export const Horizontal = {
+  ...CheckboxSetTemplate,
+  args: {
+    columns: true,
+    items: [
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+      {
+        id: "c-1",
+        name: "check-one",
+      },
+    ],
+  },
+};

package/src/Components/Form/CheckboxSet/CheckboxSet.tsx

@@ -0,0 +1,14 @@
+import CheckboxSetProps from "./CheckboxSetProps";
+import styles from "./checkboxSet.module.scss";
+
+const CheckboxSet = (props: CheckboxSetProps) => {
+  const { children, columns } = props;
+
+  return (
+    <div className={`${styles.checkboxSet} ${columns ? styles.container : ""}`}>
+      {children}
+    </div>
+  );
+};
+
+export default CheckboxSet;

package/src/Components/Form/CheckboxSet/CheckboxSetItem.tsx

@@ -0,0 +1,109 @@
+import cx from "classnames";
+import CheckboxProps from "../Checkbox/CheckboxProps";
+import styles from "../Checkbox/checkbox.module.scss";
+import checkboxSetStyle from "./checkboxSet.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const CheckboxSetItem = (props: CheckboxProps) => {
+  const {
+    label,
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onClick,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["checkbox", styles.checkbox];
+  const wrapperClasses = ["checkboxHolder", styles.checkboxHolder];
+
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+  if (error) {
+    classes.push(styles.error);
+    wrapperClasses.push(styles.error);
+  }
+
+  useEffect(() => {
+    setIsChecked(checked ? checked : false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(!isChecked);
+    if ( onClick) {
+      onClick(e, isChecked);
+    }
+  };
+
+  const onChangeHandler = (e:any) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    <div className={checkboxSetStyle.checkboxSetItemCon}>
+      <div className={cx(wrapperClasses)}>
+        <div className={cx(classes)}>
+          <input
+            id={id}
+            name={name}
+            checked={isChecked}
+            type={"checkbox"}
+            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"}
+            onClick={handleClick}
+            onChange={onChangeHandler}
+            {...args}
+          />
+          {!!isChecked && (
+            <svg
+              width="11"
+              height="10"
+              viewBox="0 0 11 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10.8425 2.10473C11.0378 2.29999 11.0378 2.61658 10.8425 2.81184L4.47856 9.1758C4.2833 9.37106 3.96672 9.37106 3.77146 9.1758L0.353775 5.75812C0.158513 5.56286 0.158513 5.24627 0.353775 5.05101L1.41443 3.99035C1.6097 3.79509 1.92628 3.79509 2.12154 3.99035L4.12501 5.99382L9.07476 1.04407C9.27002 0.84881 9.5866 0.84881 9.78187 1.04407L10.8425 2.10473Z"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                fill="currentColor"
+              />
+            </svg>
+          )}
+        </div>
+        {!!label && (
+          <label
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CheckboxSetItem;

package/src/Components/Form/CheckboxSet/CheckboxSetProps.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface CheckboxSetProps {
+  children: ReactNode;
+  error?: boolean;
+  columns?: boolean;
+}
+
+export default CheckboxSetProps;

package/src/Components/Form/CheckboxSet/checkboxSet.module.scss

@@ -0,0 +1,19 @@
+.checkboxSet {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(var(--space-unit) * -1);
+
+  &.container {
+    flex-direction: column;
+  }
+}
+
+.checkboxWrapper{
+  display: inline-flex;
+  align-items: center;
+}
+
+.checkboxSetItemCon {
+  flex-shrink: 0;
+  padding: calc(1 * var(--space-unit));
+}

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

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

package/src/Components/Form/CurrencyField/CurrencyField.tsx

@@ -0,0 +1,105 @@
+import cx from "classnames";
+import styles from "../inputs.module.scss";
+import CurrencyDollarSimple from "../../Icons/Commerce/CurrencyDollarSimple/CurrencyDollarSimple";
+import { useEffect, useState } from "react";
+import CurrencyFieldProps from "./CurrencyFieldProps";
+import LoadingInput from "../LoadingInput/LoadingInput.tsx";
+
+const CurrencyField = (props: CurrencyFieldProps) => {
+  const {
+    name,
+    id,
+    placeholder,
+    value,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    currencyIcon,
+    onChange,
+    loading,
+    ...args
+  } = props;
+
+  const [displayValue, setDisplayValue] = useState('');
+
+  useEffect(() => {
+    if (value && value !== '') {
+      const cleanValue = value?.toString().replace(/[^0-9.]/g, '');
+      setDisplayValue(formatCurrency(cleanValue));
+    }else{
+      setDisplayValue('')
+    }
+  }, [value]);
+
+  const formatCurrency = (value: string) => {
+    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;
+    const cleanValue = value?.toString().replace(/[^0-9.]/g, '');
+
+    const decimalCount = cleanValue.split('.').length - 1;
+    let newValue = cleanValue;
+    if (decimalCount > 1) {
+      newValue = cleanValue.slice(0, cleanValue.lastIndexOf('.'));
+    }
+
+    // setRawValue(newValue);
+    setDisplayValue(formatCurrency(newValue));
+
+    if (onChange) {
+      const e = {
+        ...event,
+        target: {
+          ...event.target,
+          value: newValue,
+        },
+      };
+      onChange(e);
+    }
+  };
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <div className={styles.currency}>
+    {loading && <LoadingInput />}
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="text"
+        value={displayValue}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readonly}
+        required={required}
+        onChange={handleChange}
+        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 className={styles.currencyIcon}>
+        {currencyIcon ? currencyIcon : <CurrencyDollarSimple />}
+      </div>
+    </div>
+};
+
+export default CurrencyField;

package/src/Components/Form/CurrencyField/CurrencyFieldProps.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import InputProps from "../InputProps";
+
+
+interface CurrencyFieldProps extends InputProps {
+  currencyIcon?: ReactNode;
+  value?: string | number | any;
+}
+
+export default CurrencyFieldProps;

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

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