@hellobetterdigitalnz/betterui 0.0.0

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

@@ -0,0 +1,22 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface RadioButtonProps {
+  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;
+}
+
+export default RadioButtonProps;

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import RadioButtons from "./RadioButtons";
+import RadioButton from "./RadioButton";
+
+import "./radioButton.stories.scss";
+
+const meta: Meta = {
+  title: "Form / Radio Button",
+  component: RadioButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const RadioButtoTemplate: Story = {
+  render: ({ items, ...args }) => {
+    return (
+      <RadioButtons {...args}>
+        {items.map((item: any) => (
+          <RadioButton extraClass={"spacing"} name={item.name} id={item.id} />
+        ))}
+      </RadioButtons>
+    );
+  },
+};
+
+export const Default = {
+  ...RadioButtoTemplate,
+  args: {
+    columns: false,
+    items: [
+      {
+        id: "c-1",
+        name: "check-one",
+        disabled: false,
+      },
+      {
+        id: "c-2",
+        name: "check-one",
+      },
+      {
+        id: "c-3",
+        name: "check-one",
+      },
+      {
+        id: "c-4",
+        name: "check-one",
+      },
+      {
+        id: "c-5",
+        name: "check-one",
+      },
+      {
+        id: "c-6",
+        name: "check-one",
+      },
+    ],
+  },
+};

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

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

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface RadioButtonsProps {
+  children: ReactNode;
+  error?: boolean;
+  columns?: boolean;
+  extraClass?: string;
+}
+
+export default RadioButtonsProps;

package/src/Components/Form/RadioButtons/radioButton.stories.scss

@@ -0,0 +1,3 @@
+.spacing {
+  padding: 4px;
+}

package/src/Components/Form/RadioButtons/radiobutton.module.scss

@@ -0,0 +1,63 @@
+.checkboxSet {
+  display: flex;
+
+  &.container {
+    flex-direction: column;
+  }
+}
+
+.radio {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+
+  input[type="radio"] {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    background-color: var(--color-white);
+    border: 1px solid var(--color-gray-500);
+    outline-offset: 2px;
+    outline: 2px solid transparent;
+    cursor: pointer;
+    transition: linear 0.3s;
+
+    &:checked + .circle {
+      opacity: 1;
+    }
+
+    &:hover {
+      border: 2px solid var(--color-gray-800);
+    }
+
+    &:focus {
+      outline: 2px solid var(--color-gray-800);
+    }
+
+    &:disabled {
+      background-color: var(--color-gray-200);
+
+      &:checked {
+        border-color: var(--color-gray-200);
+      }
+    }
+  }
+
+  .circle {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    background-color: var(--color-gray-800);
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.3s;
+  }
+}

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

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

package/src/Components/Form/TextField/TextField.tsx

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

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

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

package/src/Components/Form/Textarea/Textarea.tsx

@@ -0,0 +1,71 @@
+import React, {useState} from "react";
+import cx from 'classnames';
+import TextareaProps from "./TextareaProps";
+import styles from './textarea.module.scss';
+
+const Textarea = (props: TextareaProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    rows,
+    displayChars,
+    maxLength,
+    onChange,
+    ...args
+  } = props;
+
+
+  const [text, setText] = useState('');
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setText(e.target?.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const classes = [styles.textarea];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return <>
+    <textarea
+      className={cx(classes)}
+      id={id}
+      name={name}
+      value={value}
+      placeholder={placeholder}
+      rows={rows}
+      onChange={handleChange}
+      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}
+    />
+    {!!displayChars && <p className={styles.length}>
+      {text.length} / {maxLength}
+    </p>}
+  </>
+};
+
+export default Textarea;

package/src/Components/Form/Textarea/TextareaProps.tsx

@@ -0,0 +1,27 @@
+import {FocusEvent, MouseEvent, ChangeEvent} from 'react'
+
+interface TextareaProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  extraClass?: string;
+  placeholder?: string;
+  error?: boolean;
+  disabled?:boolean;
+  readonly?: boolean;
+  autoComplete?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  required?: boolean;
+  ariaLabel?: string;
+  ariaLabeledby?: string;
+  ariaDescribedby?: string;
+  rows?: number,
+  displayChars?: boolean,
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export default TextareaProps;

package/src/Components/Form/Textarea/textarea.module.scss

@@ -0,0 +1,49 @@
+.textarea {
+  display: inline-block;
+  border: 1px solid var(--color-gray-300);
+  border-radius: 6px;
+  resize: none;
+  padding: calc(var(--space-unit) * 3);
+  width: 100%;
+  height: 96px;
+  font-family: var(--font);
+  font-size: var(--font-size-input);
+  line-height: var(--line-height-input);
+  font-weight: var(--font-weight-input);
+
+  &::placeholder {
+    font-family: var(--font);
+    color: var(--color-gray-500);
+    font-size: var(--font-size-input);
+    line-height: var(--line-height-input);
+    font-weight: var(--font-weight-input);
+  }
+
+  &:focus {
+    outline: none;
+    border: 2px solid var(--color-gray-900);
+  }
+
+  &:disabled{
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+
+  &.error {
+    border: 1px solid var(--color-error);
+    background: var(--color-error-lite);
+
+    &:focus {
+      border: 2px solid var(--color-error);
+      background: #ffffff;
+    }
+  }
+}
+
+.length {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 12px;
+}
+
+

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

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

package/src/Components/Form/TimeField/TimeField.tsx

@@ -0,0 +1,58 @@
+import cx from "classnames";
+import InputProps from "../InputProps";
+import styles from "../inputs.module.scss";
+import Clock from "../../Icons/Time/Clock/Clock";
+
+const TimeField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    ...args
+  } = props;
+
+  const classes = [styles.input];
+  if (error) {
+    classes.push(styles.error);
+  }
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+
+  return (
+    <div className={styles.time}>
+      <input
+        className={cx(classes)}
+        id={id}
+        name={name}
+        type="time"
+        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"}
+        pattern="[0-2][0-9]:[0-5][0-9]" // 24-hour format pattern
+        {...args}
+      />
+      <div className={styles.clockIcon}>
+        <Clock type="light" />
+      </div>
+    </div>
+  );
+};
+
+export default TimeField;

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ToggleSwitch from "./ToggleSwitch";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / ToggleSwitch",
+  component: ToggleSwitch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof ToggleSwitch>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    checked: false,
+  },
+};
+
+export const On: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const OffDisabled: Story = {
+  args: {
+    checked: false,
+    disabled: true,
+  },
+};
+
+export const OnDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    checked: true,
+    error: true,
+  },
+};

package/src/Components/Form/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,87 @@
+import cx from "classnames";
+import ToggleSwitchProps from "./ToggleSwitchProps";
+import styles from "./toggleSwitch.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const {
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["switch", styles.switch];
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+  if (error) {
+    classes.push(styles.error);
+  }
+
+  useEffect(() => {
+    setIsChecked(checked ? checked : false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(!isChecked);
+    if (onChange) {
+      onChange(e, isChecked);
+    }
+  };
+
+  return (
+    <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}
+        {...args}
+      />
+      <span className={`${styles.slider} ${styles.round}`}>
+        <span className={`${styles.circle}`}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="9"
+            viewBox="0 0 12 9"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M11.5458 1.47502C11.7411 1.67029 11.7411 1.98687 11.5458 2.18213L5.18186 8.54609C4.9866 8.74135 4.67002 8.74135 4.47476 8.54609L0.939224 5.01056C0.743962 4.8153 0.743962 4.49871 0.939224 4.30345L1.64633 3.59635C1.84159 3.40108 2.15818 3.40108 2.35344 3.59635L4.82831 6.07122L10.1316 0.767918C10.3269 0.572656 10.6435 0.572656 10.8387 0.767918L11.5458 1.47502Z"
+              fill="currentColor"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  );
+};
+
+export default ToggleSwitch;

package/src/Components/Form/ToggleSwitch/ToggleSwitchProps.tsx

@@ -0,0 +1,22 @@
+import { FocusEvent, MouseEvent } from "react";
+
+interface ToggleSwitchProps {
+  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;
+}
+
+export default ToggleSwitchProps;