refactor(components): rewrite form components

7 files changed, 17 insertions, 21 deletions

diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 1ef10b5..57485d3 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -57,7 +57,7 @@ export default {
 } as ComponentMeta<typeof MainNav>;
 
 const Template: ComponentStory<typeof MainNav> = ({
-  isActive,
+  isActive = false,
   setIsActive: _setIsActive,
   ...args
 }) => {
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index cf49bd4..4182b4c 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -18,7 +18,7 @@ export type MainNavProps = {
   /**
    * The button state.
    */
-  isActive: BooleanFieldProps['checked'];
+  isActive: BooleanFieldProps['isChecked'];
   /**
    * The main nav items.
    */
@@ -30,7 +30,7 @@ export type MainNavProps = {
 };
 
 const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
-  { className = '', isActive, items, setIsActive },
+  { className = '', isActive = false, items, setIsActive },
   ref
 ) => {
   const intl = useIntl();
@@ -49,9 +49,9 @@ const MainNavWithRef: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
   return (
     <div className={`${sharedStyles.item} ${mainNavStyles.item}`} ref={ref}>
       <BooleanField
-        checked={isActive}
         className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`}
         id="main-nav-button"
+        isChecked={isActive}
         name="main-nav-button"
         onChange={setIsActive}
         type="checkbox"
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 3b2a747..2c8dd10 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -62,7 +62,7 @@ export default {
 } as ComponentMeta<typeof Search>;
 
 const Template: ComponentStory<typeof Search> = ({
-  isActive,
+  isActive = false,
   setIsActive: _setIsActive,
   ...args
 }) => {
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 1b2643c..b20f0d5 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -19,7 +19,7 @@ export type SearchProps = {
   /**
    * The button state.
    */
-  isActive: BooleanFieldProps['checked'];
+  isActive: BooleanFieldProps['isChecked'];
   /**
    * A callback function to execute search.
    */
@@ -31,7 +31,7 @@ export type SearchProps = {
 };
 
 const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
-  { className = '', isActive, searchPage, setIsActive },
+  { className = '', isActive = false, searchPage, setIsActive },
   ref
 ) => {
   const intl = useIntl();
@@ -57,9 +57,9 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
   return (
     <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
       <BooleanField
-        checked={isActive}
         className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
         id="search-button"
+        isChecked={isActive}
         name="search-button"
         onChange={setIsActive}
         type="checkbox"
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index a83f8d3..bea0d9e 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -86,7 +86,7 @@ export default {
 } as ComponentMeta<typeof Settings>;
 
 const Template: ComponentStory<typeof Settings> = ({
-  isActive,
+  isActive = false,
   setIsActive: _setIsActive,
   ...args
 }) => {
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 8a4d4a9..3f328a5 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -3,14 +3,13 @@ import { useIntl } from 'react-intl';
 import { BooleanField, type BooleanFieldProps, Cog } from '../../atoms';
 import { FlippingLabel } from '../../molecules';
 import { SettingsModal, type SettingsModalProps } from '../modals';
-import settingsStyles from './settings.module.scss';
-import sharedStyles from './toolbar-items.module.scss';
+import styles from './toolbar-items.module.scss';
 
 export type SettingsProps = SettingsModalProps & {
   /**
    * The button state.
    */
-  isActive: BooleanFieldProps['checked'];
+  isActive: BooleanFieldProps['isChecked'];
   /**
    * A callback function to handle button state.
    */
@@ -24,10 +23,9 @@ const SettingsWithRef: ForwardRefRenderFunction<
   {
     ackeeStorageKey,
     className = '',
-    isActive,
+    isActive = false,
     motionStorageKey,
     setIsActive,
-    tooltipClassName = '',
   },
   ref
 ) => {
@@ -45,11 +43,11 @@ const SettingsWithRef: ForwardRefRenderFunction<
       });
 
   return (
-    <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}>
+    <div className={styles.item} ref={ref}>
       <BooleanField
-        checked={isActive}
-        className={sharedStyles.checkbox}
+        className={styles.checkbox}
         id="settings-button"
+        isChecked={isActive}
         name="settings-button"
         onChange={setIsActive}
         type="checkbox"
@@ -57,7 +55,7 @@ const SettingsWithRef: ForwardRefRenderFunction<
       />
       <FlippingLabel
         aria-label={label}
-        className={sharedStyles.label}
+        className={styles.label}
         htmlFor="settings-button"
         isActive={isActive}
       >
@@ -65,9 +63,8 @@ const SettingsWithRef: ForwardRefRenderFunction<
       </FlippingLabel>
       <SettingsModal
         ackeeStorageKey={ackeeStorageKey}
-        className={`${sharedStyles.modal} ${className}`}
+        className={`${styles.modal} ${className}`}
         motionStorageKey={motionStorageKey}
-        tooltipClassName={`${settingsStyles.tooltip} ${tooltipClassName}`}
       />
     </div>
   );
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 218b4fb..94c9d95 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -68,7 +68,6 @@ export const Toolbar: FC<ToolbarProps> = ({
         motionStorageKey={motionStorageKey}
         ref={settingsRef}
         setIsActive={() => setIsSettingsOpened(!isSettingsOpened)}
-        tooltipClassName={styles.tooltip}
       />
     </div>
   );