@hellobetterdigitalnz/betterui 0.0.0

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

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

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

@@ -0,0 +1,33 @@
+import {MouseEvent, FocusEvent} from "react";
+
+interface NameValueInterface {
+  label: string;
+  value: string|number;
+}
+
+interface DropdownFieldProps {
+  name?: string;
+  id?: string;
+  value?: string;
+  options: NameValueInterface[]|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;
+  onClick?: (e: MouseEvent) => void;
+  onChange?: (e: MouseEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+}
+
+export type { NameValueInterface };
+
+export default DropdownFieldProps;

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

@@ -0,0 +1,15 @@
+import cx from 'classnames';
+import DropdownFieldSelectorProps from "./DropdownFieldSelectorProps";
+import styles from './dropdown.module.scss';
+
+const DropdownFieldSelector = (props: DropdownFieldSelectorProps) => {
+
+  const classes = [styles.dropdownSelector];
+
+  return <div className={cx(classes)}>
+    {props.children}
+  </div>
+
+}
+
+export default DropdownFieldSelector;

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

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

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

@@ -0,0 +1,79 @@
+.dropdown {
+  position: relative;
+
+  .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(--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(--line-height-input);
+    cursor: pointer;
+  }
+
+  .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 {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.dropdownSelector {
+  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);
+}
+
+.dropdownItem {
+  padding: calc(var(--space-unit) * 2);
+  cursor: pointer;
+
+  &.active,
+  &:hover {
+    background-color: var(--color-gray-50);
+  }
+}

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,51 @@
+import cx from 'classnames';
+import styles from '../inputs.module.scss' ;
+import InputProps from "../InputProps";
+
+const EmailField = (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='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}
+  />
+};
+
+
+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.tsx

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

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import IconButton from "./IconButton";
+import CalendarBank from "../../Icons/Time/CalendarBank/CalendarBank";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Form / IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "solid",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: <CalendarBank />,
+    style: "hollow",
+    size: "default",
+    scheme: "primary",
+  },
+};
+
+export const Borderless: Story = {
+  args: {
+    icon: <CalendarBank type="bold" />,
+    style: "no-border",
+    size: "default",
+    scheme: "primary",
+  },
+};

package/src/Components/Form/IconButton/IconButton.tsx

@@ -0,0 +1,58 @@
+import cx from "classnames";
+import styles from "./iconButton.module.scss";
+import IconButtonProps from "./IconButtonProps";
+
+/**
+ * Primary UI component for user interaction
+ */
+const IconButton = (props: IconButtonProps) => {
+  const {
+    type = "button",
+    size = "default",
+    style,
+    disabled = false,
+    scheme,
+    icon,
+    ...args
+  } = props;
+
+  const classes = [
+    "button",
+    "btn",
+    `btn-${size}`,
+    `btn-${style}`,
+    `btn-${scheme}`,
+    styles.iconButton,
+  ];
+  if (size === "large") {
+    classes.push(styles.large);
+  } else if (size === "small") {
+    classes.push(styles.small);
+  } else if (size === "default") {
+    classes.push(styles.default);
+  }
+  if (style === "solid") {
+    classes.push(styles.solid);
+    classes.push(styles[`solid-${scheme}`]);
+  } else if (style === "hollow") {
+    classes.push(styles.hollow);
+    classes.push(styles[`hollow-${scheme}`]);
+  } else if (style === "no-border") {
+    classes.push(styles.noBorder);
+    classes.push(styles[`no-border-${scheme}`]);
+  }
+
+  if (disabled === true) {
+    classes.push(styles.disabled);
+  }
+
+  console.log(styles);
+
+  return (
+    <button type={type} className={cx(classes)} disabled={disabled} {...args}>
+      {icon}
+    </button>
+  );
+};
+
+export default IconButton;

package/src/Components/Form/IconButton/IconButtonProps.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface IconButtonProps {
+  type?: "button" | "submit" | "reset";
+  size?: "default" | "large" | "small";
+  style?: "solid" | "hollow" | "no-border";
+  scheme?: "primary" | "secondary" | "gray";
+  disabled?: boolean;
+  icon?: ReactNode;
+  onClick?: () => void;
+  onHover?: () => void;
+  onFocus?: () => void;
+}
+
+export default IconButtonProps;

package/src/Components/Form/IconButton/iconButton.module.scss

@@ -0,0 +1,111 @@
+@import "../../../variables";
+
+.iconButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: linear all 300ms;
+  font-family: var(--font);
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .primaryIcon,
+  .secondaryIcon {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.solid {
+  }
+
+  &.hollow {
+  }
+
+  &.noBorder {
+    border-color: transparent;
+  }
+
+  &.default {
+    padding: calc(var(--space-unit) * 3);
+    min-height: 40px;
+  }
+
+  &.large {
+    padding: calc(var(--space-unit) * 4);
+    min-height: 48px;
+  }
+
+  &.small {
+    padding: calc(var(--space-unit) * 2);
+    min-height: 32px;
+  }
+
+  @each $color in $colors {
+    &.solid-#{$color} {
+      color: var(--color-lite);
+      background-color: var(--color-#{$color}-500);
+      border-color: var(--color-#{$color}-500);
+
+      &:hover:enabled {
+        background-color: var(--color-#{$color}-300);
+        border-color: var(--color-#{$color}-300);
+      }
+
+      &:active:enabled {
+        background-color: var(--color-#{$color}-600);
+        border-color: var(--color-#{$color}-600);
+      }
+    }
+  }
+
+  @each $color in $colors {
+    &.hollow-#{$color} {
+      background: transparent;
+      color: var(--color-#{$color}-800);
+      border-color: var(--color-#{$color}-600);
+
+      &:hover:enabled {
+        background: var(--color-#{$color}-100);
+      }
+
+      &:active:enabled {
+        background: var(--color-#{$color}-100);
+        border-width: 2px;
+      }
+    }
+  }
+
+  @each $color in $colors {
+    &.no-border-#{$color} {
+      background: transparent;
+      color: var(--color-#{$color}-800);
+      border-color: transparent;
+
+      &:hover:enabled {
+        background-color: var(--color-#{$color}-200);
+        color: var(--color-#{$color}-800);
+      }
+
+      &:active:enabled {
+        background-color: var(--color-#{$color}-100);
+        color: var(--color-#{$color}-800);
+      }
+    }
+  }
+}

package/src/Components/Form/InputProps.tsx

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

package/src/Components/Form/MultiSelectField/MultiSelectField.tsx

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

package/src/Components/Form/MultiSelectField/MultiSelectFieldItem.tsx

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

package/src/Components/Form/MultiSelectField/MultiSelectFieldTag.tsx

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

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

@@ -0,0 +1,22 @@
+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,70 @@
+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";
+
+const PasswordField = (props: InputProps) => {
+  const {
+    name,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    autoComplete,
+    ...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}>
+      <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/RadioButtons/RadioButton.tsx

@@ -0,0 +1,70 @@
+import cx from "classnames";
+import RadioButtonProps from "./RadioButtonProps";
+import styles from "./radiobutton.module.scss";
+import { useEffect, useState, MouseEvent } from "react";
+
+const RadioButton = (props: RadioButtonProps) => {
+  const {
+    name,
+    checked,
+    id,
+    value,
+    placeholder,
+    extraClass,
+    disabled,
+    error,
+    ariaLabel,
+    required,
+    readonly,
+    onChange,
+    ...args
+  } = props;
+
+  const [isChecked, setIsChecked] = useState(false);
+
+  const classes = ["radio", styles.radio];
+
+  if (extraClass) {
+    classes.push(extraClass);
+  }
+  if (error) {
+    classes.push(styles.error);
+  }
+
+  useEffect(() => {
+    setIsChecked(checked || false);
+  }, [checked]);
+
+  const handleClick = (e: MouseEvent) => {
+    setIsChecked(true);
+    if (onChange) {
+      onChange(e, true);
+    }
+  };
+
+  return (
+    <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"}
+        onClick={handleClick}
+        {...args}
+      />
+      <div className={styles.circle}></div>
+    </div>
+  );
+};
+
+export default RadioButton;