@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

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

@@ -1,31 +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
-  },
-};
-
+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

@@ -1,71 +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;
+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

@@ -1,27 +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;
+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

@@ -1,49 +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;
-}
-
-
+.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

@@ -1,22 +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",
-  },
-};
+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

@@ -1,58 +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;
+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

@@ -1,49 +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,
-  },
-};
+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,
+  },
+};