refactor: update stories to use hook and update controls (#7)

packages/react-front-kit/src/1-styleGuide/Icons.stories.tsx

@@ -1,5 +1,6 @@
 import type { Icon, IconProps } from '@phosphor-icons/react';
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactElement } from 'react';
 
 import { Center, Grid, Text } from '@mantine/core';
 
@@ -23,7 +24,7 @@ export default meta;
 type IStory = StoryObj<typeof meta>;
 
 function render(icons: Record<string, Icon>) {
-  return function Render(props: IconProps): JSX.Element {
+  return function Render(props: IconProps): ReactElement {
     return (
       <Grid>
         {Object.entries(icons).map(([key, IconCmp]) => {

packages/react-front-kit/src/3-custom/Components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -3,6 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Breadcrumbs as Cmp } from './Breadcrumbs';
 
 const meta = {
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
   component: Cmp,
   tags: ['autodocs'],
   title: '3-custom/Components/Breadcrumbs',

packages/react-front-kit/src/3-custom/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { BreadcrumbsProps } from '@mantine/core';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import { Breadcrumbs as MantineBreadcrumbs, createStyles } from '@mantine/core';
 
@@ -28,7 +28,7 @@ const svgSeparator = (
 );
 
 /** Additional props will be forwarded to the [Mantine Breadcrumb component](https://mantine.dev/core/breadcrumbs) */
-export function Breadcrumbs(props: IBreadcrumbsProps): JSX.Element {
+export function Breadcrumbs(props: IBreadcrumbsProps): ReactElement {
   const { separator = svgSeparator, children, ...BreadcrumbsProps } = props;
 
   const useStyles = createStyles((theme) => ({

packages/react-front-kit/src/3-custom/Components/CollapseButton/CollapseButton.stories.tsx

@@ -10,6 +10,12 @@ import { CollapseButton as Cmp } from './CollapseButton';
 
 const meta = {
   argTypes: {
+    id: {
+      control: 'text',
+    },
+    label: {
+      control: 'text',
+    },
     leftIcon: {
       control: 'select',
       mapping: iconsElements,
@@ -39,11 +45,13 @@ maximus mi. Vivamus consequat quam tristique ex laoreet, ut
 eleifend eros sodales. Cras bibendum enim dolor, id rutrum urna
 vestibulum non.`,
     fullWidth: true,
+    id: '',
     label: 'Home',
     leftIcon: iconsElements.HouseLine,
     level: 0,
     line: false,
     radius: 0,
+    selected: false,
     variant: 'white',
   },
   play: async ({ canvasElement }) => {
@@ -67,10 +75,12 @@ export const Nested: IStory = {
       </>
     ),
     fullWidth: true,
+    id: '',
     label: 'Pull Requests',
     leftIcon: iconsElements.User,
     level: 0,
     line: true,
     radius: 0,
+    selected: false,
   },
 };

packages/react-front-kit/src/3-custom/Components/CollapseButton/CollapseButton.tsx

@@ -62,7 +62,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-interface ICollapseButtonProps<T> extends ButtonProps {
+interface ICollapseButtonProps<T extends number | string> extends ButtonProps {
   children?: ReactNode;
   id?: T;
   label?: ReactNode;
@@ -72,7 +72,7 @@ interface ICollapseButtonProps<T> extends ButtonProps {
   selected?: boolean;
 }
 
-export function CollapseButton<T>(
+export function CollapseButton<T extends number | string>(
   props: ICollapseButtonProps<T>,
 ): ReactElement {
   const {

packages/react-front-kit/src/3-custom/Components/DropdownButton/DropdownButton.stories.tsx

@@ -9,6 +9,11 @@ import { sleep } from '../../../utils/storybook';
 import { DropdownButton as Cmp } from './DropdownButton';
 
 const meta = {
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
   component: Cmp,
   tags: ['autodocs'],
   title: '3-custom/Components/DropdownButton',

packages/react-front-kit/src/3-custom/Components/Header/Header.stories.tsx

@@ -4,6 +4,7 @@ import { Avatar, Menu } from '@mantine/core';
 import { expect } from '@storybook/jest';
 import { userEvent, within } from '@storybook/testing-library';
 
+import { useStorybookArgsConnect } from '../../../hooks/useStorybookArgsConnect';
 import { primaryTheme } from '../../../theme';
 import { DropdownButton } from '../DropdownButton/DropdownButton';
 
@@ -12,27 +13,27 @@ import { Header as Cmp } from './Header';
 const meta = {
   argTypes: {
     children: {
-      table: {
-        disable: true,
-      },
+      control: false,
+    },
+    childrenComponent: {
+      control: 'text',
     },
     left: {
-      table: {
-        disable: true,
-      },
+      control: false,
     },
     right: {
-      table: {
-        disable: true,
-      },
-    },
-    searchTheme: {
-      table: {
-        disable: true,
-      },
+      control: false,
     },
   },
   component: Cmp,
+  decorators: [
+    function Component(Story, ctx) {
+      const args = useStorybookArgsConnect(ctx.args, {
+        onSearchChange: 'searchValue',
+      });
+      return <Story args={{ ...args }} />;
+    },
+  ],
   parameters: {
     layout: 'fullscreen',
   },
@@ -75,6 +76,7 @@ export const Header: IStory = {
       </>
     ),
     searchTheme: primaryTheme,
+    searchValue: '',
     withBorder: false,
   },
   play: async ({ canvasElement }) => {

packages/react-front-kit/src/3-custom/Components/Header/Header.tsx

@@ -1,14 +1,7 @@
 'use client';
 
 import type { HeaderProps, MantineThemeOverride } from '@mantine/core';
-import type {
-  ChangeEventHandler,
-  ElementType,
-  FormEvent,
-  MouseEventHandler,
-  ReactElement,
-  ReactNode,
-} from 'react';
+import type { ElementType, FormEvent, ReactElement, ReactNode } from 'react';
 
 import {
   Button,
@@ -77,8 +70,7 @@ interface IHeaderProps extends Omit<HeaderProps, 'height' | 'left' | 'right'> {
   childrenComponent?: ElementType;
   height?: number;
   left?: ReactNode;
-  onSearchChange?: ChangeEventHandler<HTMLInputElement>;
-  onSearchClear?: MouseEventHandler<HTMLButtonElement>;
+  onSearchChange?: (value: string) => void;
   onSearchSubmit?: (event: FormEvent) => void;
   right?: ReactNode;
   searchTheme?: MantineThemeOverride;
@@ -92,7 +84,6 @@ export function Header(props: IHeaderProps): ReactElement {
     height = 90,
     left,
     onSearchChange,
-    onSearchClear,
     onSearchSubmit,
     right,
     searchTheme,
@@ -146,7 +137,6 @@ export function Header(props: IHeaderProps): ReactElement {
               <HeaderSearch
                 data-testid="searchBar"
                 onChange={onSearchChange}
-                onClear={onSearchClear}
                 onSubmit={onSearchSubmit}
                 opened={opened}
                 value={searchValue}

packages/react-front-kit/src/3-custom/Components/HeaderSearch/HeaderSearch.stories.tsx

@@ -1,41 +1,34 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ChangeEvent, ReactElement } from 'react';
 
-import { useState } from 'react';
+import { useStorybookArgsConnect } from '../../../hooks/useStorybookArgsConnect';
 
 import { HeaderSearch as Cmp } from './HeaderSearch';
 
 const meta = {
   component: Cmp,
+  decorators: [
+    function Component(Story, ctx) {
+      const args = useStorybookArgsConnect(ctx.args, {
+        onChange: 'value',
+      });
+      return (
+        <div style={{ position: 'relative' }}>
+          <Story args={{ ...args }} />
+        </div>
+      );
+    },
+  ],
   tags: ['autodocs'],
   title: '3-custom/Components/HeaderSearch',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-function Render(props: Record<string, unknown>): ReactElement {
-  const [search, setSearch] = useState('');
-  function handleSearchChange(event: ChangeEvent<HTMLInputElement>): void {
-    setSearch(event.target.value);
-  }
-
-  function handleSearchClear(): void {
-    setSearch('');
-  }
-  return (
-    <div style={{ position: 'relative' }}>
-      <Cmp
-        {...props}
-        onChange={handleSearchChange}
-        onClear={handleSearchClear}
-        value={search}
-      />
-    </div>
-  );
-}
-
 export const HeaderSearch: IStory = {
-  args: {},
-  render: Render,
+  args: {
+    clearButtonAriaLabel: 'Clear',
+    opened: false,
+    value: '',
+  },
 };

packages/react-front-kit/src/3-custom/Components/HeaderSearch/HeaderSearch.tsx

@@ -1,13 +1,7 @@
 'use client';
 
 import type { BoxProps } from '@mantine/core';
-import type {
-  ChangeEventHandler,
-  FormEvent,
-  MouseEvent,
-  MouseEventHandler,
-  ReactElement,
-} from 'react';
+import type { ChangeEvent, FormEvent, ReactElement } from 'react';
 
 import { Box, CloseButton, Input, createStyles } from '@mantine/core';
 import { useEffect, useRef } from 'react';
@@ -26,8 +20,7 @@ const useStyles = createStyles((theme) => ({
 
 interface IHeaderSearchProps extends BoxProps {
   clearButtonAriaLabel?: string;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onClear?: MouseEventHandler<HTMLButtonElement>;
+  onChange?: (value: string) => void;
   onSubmit?: (event: FormEvent) => void;
   opened?: boolean;
   value?: string;
@@ -38,7 +31,6 @@ export function HeaderSearch(props: IHeaderSearchProps): ReactElement {
     clearButtonAriaLabel = 'Clear',
     opened,
     onChange,
-    onClear,
     onSubmit,
     value,
     ...boxProps
@@ -52,8 +44,12 @@ export function HeaderSearch(props: IHeaderSearchProps): ReactElement {
     }
   }, [opened]);
 
-  function handleSearchClear(event: MouseEvent<HTMLButtonElement>): void {
-    onClear?.(event);
+  function handleSearchChange(event: ChangeEvent<HTMLInputElement>): void {
+    onChange?.(event.target.value);
+  }
+
+  function handleSearchClear(): void {
+    onChange?.('');
     if (inputRef.current && opened) {
       inputRef.current.focus();
     }
@@ -64,7 +60,7 @@ export function HeaderSearch(props: IHeaderSearchProps): ReactElement {
       <form onSubmit={onSubmit}>
         <Input
           ref={inputRef}
-          onChange={onChange}
+          onChange={handleSearchChange}
           rightSection={
             <CloseButton
               aria-label={clearButtonAriaLabel}

packages/react-front-kit/src/3-custom/Pages/TestPage/TestPage.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ChangeEvent, FormEvent, ReactElement } from 'react';
+import type { FormEvent, ReactElement } from 'react';
 
 import { AppShell, Avatar, Container, Grid, Menu } from '@mantine/core';
 import { useState } from 'react';
@@ -17,14 +17,6 @@ import { menu } from '../../Components/SidebarMenu/SidebarMenu.mock';
 export function TestPage(): ReactElement {
   const [search, setSearch] = useState('');
 
-  function handleSearchChange(event: ChangeEvent<HTMLInputElement>): void {
-    setSearch(event.target.value);
-  }
-
-  function handleSearchClear(): void {
-    setSearch('');
-  }
-
   function handleSearchSubmit(event: FormEvent): void {
     event.preventDefault();
   }
@@ -35,8 +27,7 @@ export function TestPage(): ReactElement {
         <Header
           childrenComponent="nav"
           left={<img alt="logo" height="58" src="./logo.svg" width="128" />}
-          onSearchChange={handleSearchChange}
-          onSearchClear={handleSearchClear}
+          onSearchChange={setSearch}
           onSearchSubmit={handleSearchSubmit}
           right={
             <>