From a6ff5eee45215effb3344cb5d631a27a7c0369aa Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Sep 2023 19:34:01 +0200
Subject: refactor(components): rewrite form components

---
 .../forms/fields/boolean-field/boolean-field.tsx   | 86 ++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/atoms/forms/fields/boolean-field/boolean-field.tsx

(limited to 'src/components/atoms/forms/fields/boolean-field/boolean-field.tsx')

diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
new file mode 100644
index 0000000..7985c0b
--- /dev/null
+++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx
@@ -0,0 +1,86 @@
+import { FC, InputHTMLAttributes } from 'react';
+import styles from './boolean-field.module.scss';
+
+export type BooleanFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  | 'checked'
+  | 'disabled'
+  | 'hidden'
+  | 'name'
+  | 'readOnly'
+  | 'required'
+  | 'type'
+  | 'value'
+> & {
+  /**
+   * Should the field be checked?
+   *
+   * @default false
+   */
+  isChecked?: boolean;
+  /**
+   * Should the field be disabled?
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Should the field be visually hidden?
+   *
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Should the field be readonly?
+   *
+   * @default false
+   */
+  isReadOnly?: boolean;
+  /**
+   * Should the field be required?
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+  /**
+   * Field name attribute.
+   */
+  name: string;
+  /**
+   * The input type.
+   */
+  type: 'checkbox' | 'radio';
+  /**
+   * Field name attribute.
+   */
+  value: string;
+};
+
+/**
+ * BooleanField component
+ *
+ * Render a checkbox or a radio input type.
+ */
+export const BooleanField: FC<BooleanFieldProps> = ({
+  className = '',
+  isChecked = false,
+  isDisabled = false,
+  isHidden = false,
+  isReadOnly = false,
+  isRequired = false,
+  ...props
+}) => {
+  const visibilityClass = isHidden ? styles['field--hidden'] : '';
+  const inputClass = `${visibilityClass} ${className}`;
+
+  return (
+    <input
+      {...props}
+      checked={isChecked}
+      className={inputClass}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      required={isRequired}
+    />
+  );
+};
-- 
cgit v1.2.3