chore: renaming componants

Smile-SA · May 7, 2024 · e366146 · e366146
1 parent 6706259
commit e366146
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 99 deletions.
diff --git a/docs/guide/02-theme.md b/docs/guide/02-theme.md
@@ -31,9 +31,9 @@ The code might look like this:
   <AppShell header={<Header searchTheme={primary}>...</Header>}>
     <FoldableColumnLayout>
       <MantineProvider theme={secondary}>
-        <InfoCard>
+        <InfoBox>
           <Dropzone />
-        </InfoCard>
+        </InfoBox>
       </MantineProvider>
       <TableGridView />
     </FoldableColumnLayout>

diff --git a/docs/haring-react/components/action-bar.mdx b/docs/haring-react/components/action-bar.mdx
@@ -5,7 +5,7 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 <Description
   extendsInfo={[
     {
-      label: 'ActionRowOverflow',
+      label: 'ActionList',
       link: './action-row-overflow',
       logo: <GitHubLogo />,
     },
@@ -31,9 +31,9 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 
 ## Props
 
-ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionRowOverflow](./action-row-overflow).
+ActionBar takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionList](./action-row-overflow).
 
 | Name                              | Type                                   | Default                                                                 | Description                                                                                                                                                                         |
 | --------------------------------- | -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | selectedElementsLabel <Required/> | `(selectedElements: number) => string` | ``(selectedElements: number) => `${selectedElements} file(s) selected`` | Function used to generate the string that displays how many elements are currently selected, it gives the current number of elements in the `selectedElements` array as a parameter |
-| ...                               | -                                      | -                                                                       | extends [`ActionRowOverflow props`](./action-row-overflow#props)                                                                                                                    |
+| ...                               | -                                      | -                                                                       | extends [`ActionList props`](./action-row-overflow#props)                                                                                                                           |
diff --git a/...-react/components/action-row-overflow.mdx → docs/haring-react/components/action-list.mdx b/...-react/components/action-row-overflow.mdx → docs/haring-react/components/action-list.mdx
@@ -1,4 +1,4 @@
-# Action Row Overflow
+# Action List
 
 <Description
   extendsInfo={[
@@ -7,15 +7,15 @@
       link: 'https://v6.mantine.dev/core/group/',
     },
   ]}
-  importExample="import { ActionRowOverflow } from '@smile/haring-react';"
+  importExample="import { ActionList } from '@smile/haring-react';"
   packageInfo={{
     label: '@smile/haring-react',
     link: 'https://www.npmjs.com/package/@smile/haring-react',
   }}
   sourceInfo={{
-    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/ActionRowOverflow/ActionRowOverflow.tsx',
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/ActionList/ActionList.tsx',
   }}
-  storybookInfo="3-custom-components-actionrowoverflow--docs"
+  storybookInfo="3-custom-components-ActionList--docs"
 >
   Renders an array of [`IAction`s](../../shared-types/actions#iactiont) as
   [ActionIcons](https://v6.mantine.dev/core/action-icon/), with an option to
@@ -24,10 +24,7 @@
 
 ## Storybook Docs
 
-<StorybookEmbed
-  storyId="3-custom-components-actionrowoverflow--docs"
-  height="820"
-/>
+<StorybookEmbed storyId="3-custom-components-actionlist--docs" height="820" />
 
 ## Props
 

diff --git a/...ct/components/button-list-or-dropdown.mdx → docs/haring-react/components/button-list.mdx b/...ct/components/button-list-or-dropdown.mdx → docs/haring-react/components/button-list.mdx
@@ -1,6 +1,6 @@
 import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 
-# Button list or dropdown
+# Button list
 
 <Description
   extendsInfo={[
@@ -13,36 +13,33 @@ import { GitHubLogo } from '../../../src/icons/GitHubLogo';
       link: 'https://v6.mantine.dev/core/button/',
     },
   ]}
-  importExample="import { ButtonListOrDropdown } from '@smile/haring-react';"
+  importExample="import { ButtonList } from '@smile/haring-react';"
   packageInfo={{
     label: '@smile/haring-react',
     link: 'https://www.npmjs.com/package/@smile/haring-react',
   }}
   sourceInfo={{
-    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/ButtonListOrDropdown/ButtonListOrDropdown.tsx',
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/ButtonList/ButtonList.tsx',
   }}
-  storybookInfo="3-custom-components-buttonlistordropdown--docs"
+  storybookInfo="3-custom-components-buttonlist--docs"
 >
-  ButtonListOrDropdown component displays a list of buttons. When the number of
-  buttons exceeds a specified threshold (controlled by the maxButtonItems prop),
-  the component dynamically transforms into a dropdown menu.
+  ButtonList component displays a list of buttons. When the number of buttons
+  exceeds a specified threshold (controlled by the maxButtonItems prop), the
+  component dynamically transforms into a dropdown menu.
 </Description>
 
 ## Storybook Docs
 
-<StorybookEmbed
-  storyId="3-custom-components-buttonlistordropdown--docs"
-  height="820"
-/>
+<StorybookEmbed storyId="3-custom-components-buttonlist--docs" height="820" />
 
 ## Props
 
-| Name                       | Type             | Default | Description                                                                                                                                         |
-| -------------------------- | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| defaultCurrent <Required/> | `string`         | -       | The default selected value                                                                                                                          |
-| items <Required/>          | `IItems<string>` | -       | Is the list of items of type `IItems<string>`                                                                                                       |
-| maxButtonItems             | `number`         | `0`     | The value of the maximum number to display. If the number is exceeded, the button list transforms into a dropdown menu                              |
-| buttonProps                | `ButtonProps`    | -       | Props extend from the Mantine [Button](https://v6.mantine.dev/core/button/) component, used to modify the buttons of ButtonListOrDropdown component |
-| current                    | `string`         | -       | Currently selected value. Props used to make the component controlled                                                                               |
-| onAction                   | `(() => void)`   | -       | Function called each time an item is clicked                                                                                                        |
-| ....                       |                  | -       | Extend props from the Mantine [Menu](https://v6.mantine.dev/core/menu/) component. Used to modify Menu component                                    |
+| Name                       | Type             | Default | Description                                                                                                                               |
+| -------------------------- | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultCurrent <Required/> | `string`         | -       | The default selected value                                                                                                                |
+| items <Required/>          | `IItems<string>` | -       | Is the list of items of type `IItems<string>`                                                                                             |
+| maxButtonItems             | `number`         | `0`     | The value of the maximum number to display. If the number is exceeded, the button list transforms into a dropdown menu                    |
+| buttonProps                | `ButtonProps`    | -       | Props extend from the Mantine [Button](https://v6.mantine.dev/core/button/) component, used to modify the buttons of ButtonList component |
+| current                    | `string`         | -       | Currently selected value. Props used to make the component controlled                                                                     |
+| onAction                   | `(() => void)`   | -       | Function called each time an item is clicked                                                                                              |
+| ....                       |                  | -       | Extend props from the Mantine [Menu](https://v6.mantine.dev/core/menu/) component. Used to modify Menu component                          |
diff --git a/docs/haring-react/components/filter-list.mdx b/docs/haring-react/components/filter-list.mdx
@@ -15,8 +15,8 @@
       link: 'https://v6.mantine.dev/core/modal/',
     },
     {
-      label: 'SearchableCheckboxList',
-      link: 'https://smile-sa.github.io/haring/?path=/docs/3-custom-components-searchablecheckboxlist--docs',
+      label: 'SearchableList',
+      link: 'https://smile-sa.github.io/haring/?path=/docs/3-custom-components-SearchableList--docs',
     },
   ]}
   importExample="import { FilterList } from '@smile/haring-react';"
@@ -31,7 +31,7 @@
 >
   Renders a list of filters with text inputs and a manage filters button which
   displays the component
-  [SearchableCheckboxList](../components/searchable-checkbox-list)
+  [SearchableList](../components/searchable-checkbox-list)
 </Description>
 
 ## Storybook Docs

diff --git a/docs/haring-react/components/header-menu.mdx b/docs/haring-react/components/header-menu.mdx
@@ -0,0 +1,37 @@
+# Header Menu
+
+<Description
+  importExample="import { HeaderMenu } from '@smile/haring-react';"
+  packageInfo={{
+    label: '@smile/haring-react',
+    link: 'https://www.npmjs.com/package/@smile/haring-react',
+  }}
+  sourceInfo={{
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/HeaderMenu/HeaderMenu.tsx',
+  }}
+  storybookInfo="3-custom-components-headermenu--docs"
+>
+  Renders a list of menus as either a horizontal list of NavLink components or a
+  vertical SidebarMenu in mobile mode
+</Description>
+
+## Storybook Docs
+
+<StorybookEmbed storyId="3-custom-components-headermenu--docs" height="1210" />
+
+## Props
+
+| Name              | Type                   | Default | Description                                                                                                                          |
+| ----------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| menus <required/> | `IHeaderMenuMenu<T>[]` | -       | Array of menu objets to be rendered in vertical or horizontal lists                                                                  |
+| isMobile          | `boolean`              | `false` | Determines if the menus will be displayed as a horizontal list of NavLink components (desktop) or as a vertical SidebarMenu (mobile) |
+| navLinkComponent  | `ElementType`          | `"a"`   | Type of Element tag used for the NavLink components                                                                                  |
+
+## IHeaderMenuMenu
+
+`IHeaderMenuMenu` has a generic `T` that extend of `number | string` and it extend of `IMenuItem<T>`
+
+| Name     | Type                   | Description                                      |
+| -------- | ---------------------- | ------------------------------------------------ |
+| children | `IHeaderMenuMenu<T>[]` | Object array to be rendered in a header sub-menu |
+| url      | `string`               | the url of the navigation link                   |
diff --git a/docs/haring-react/components/header-nav.mdx b/docs/haring-react/components/header-nav.mdx
diff --git a/docs/haring-react/components/info-card.mdx → docs/haring-react/components/info-box.mdx b/docs/haring-react/components/info-card.mdx → docs/haring-react/components/info-box.mdx
@@ -1,23 +1,23 @@
-# Info Card
+# Info Box
 
 <Description
   extendsInfo={[{ label: 'Paper', link: 'https://v6.mantine.dev/core/paper/' }]}
-  importExample="import { InfoCard } from '@smile/haring-react';"
+  importExample="import { InfoBox } from '@smile/haring-react';"
   packageInfo={{
     label: '@smile/haring-react',
     link: 'https://www.npmjs.com/package/@smile/haring-react',
   }}
   sourceInfo={{
-    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/InfoCard/InfoCard.tsx',
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/InfoBox/InfoBox.tsx',
   }}
-  storybookInfo="3-custom-components-infocard--docs"
+  storybookInfo="3-custom-components-InfoBox--docs"
 >
   Render a card with title, content, content blocks and background motif
 </Description>
 
 ## Storybook Docs
 
-<StorybookEmbed storyId="3-custom-components-infocard--docs" height="1710" />
+<StorybookEmbed storyId="3-custom-components-infobox--docs" height="1710" />
 
 ## Props
 

diff --git a/...aring-react/components/menu-languages.mdx → ...haring-react/components/language-menu.mdx b/...aring-react/components/menu-languages.mdx → ...haring-react/components/language-menu.mdx
@@ -1,48 +1,45 @@
 import { GitHubLogo } from '../../../src/icons/GitHubLogo';
 
-# Menu languages
+# Language Menu
 
 <Description
   extendsInfo={[
     {
-      label: 'ButtonListOrDropdown',
+      label: 'ButtonList',
       link: './button-list-or-dropdown',
       logo: <GitHubLogo />,
     },
   ]}
-  importExample="import { MenuLanguages } from '@smile/haring-react';"
+  importExample="import { LanguageMenu } from '@smile/haring-react';"
   packageInfo={{
     label: '@smile/haring-react',
     link: 'https://www.npmjs.com/package/@smile/haring-react',
   }}
   sourceInfo={{
-    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/MenuLanguages/MenuLanguages.tsx',
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/LanguageMenu/LanguageMenu.tsx',
   }}
-  storybookInfo="3-custom-components-menulanguages--docs"
+  storybookInfo="3-custom-components-languagemenu--docs"
 >
-  It inherits from the [ButtonListOrDropdown](./button-list-or-dropdown)
-  component. It displays a list of language buttons with or without flags in a
-  4x3 or 1x1 format. When the number of buttons exceeds a specified threshold
-  (controlled by the maxButtonItems property), the component dynamically
-  transforms into a dropdown menu.
+  It inherits from the [ButtonList](./button-list-or-dropdown) component. It
+  displays a list of language buttons with or without flags in a 4x3 or 1x1
+  format. When the number of buttons exceeds a specified threshold (controlled
+  by the maxButtonItems property), the component dynamically transforms into a
+  dropdown menu.
 </Description>
 
 ## Storybook Docs
 
-<StorybookEmbed
-  storyId="3-custom-components-menulanguages--docs"
-  height="820"
-/>
+<StorybookEmbed storyId="3-custom-components-languagemenu--docs" height="820" />
 
 ## Props
 
-MenuLanguages takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionRowOverflow](./action-row-overflow).
+LanguageMenu takes a `<Data>` generic type that extends `Record<string, unknown>`, to be used by [ActionList](./action-row-overflow).
 
 | Name                  | Type      | Default | Description                                                                                  |
 | --------------------- | --------- | ------- | -------------------------------------------------------------------------------------------- |
 | languages <Required/> | `ILang[]` | -       | Is the array of langs of type `ILang` displayed into the component                           |
 | squareFormat          | `boolean` | `false` | Displays the default 4x3 format, If this prop is set to true, it shows flags in a 1x1 format |
-| ...                   |           | -       | Extend props from [ButtonListOrDropdown](./button-list-or-dropdown) component                |
+| ...                   |           | -       | Extend props from [ButtonList](./button-list-or-dropdown) component                          |
 
 ## `ILang`
 

diff --git a/...t/components/searchable-checkbox-list.mdx → ...ring-react/components/searchable-list.mdx b/...t/components/searchable-checkbox-list.mdx → ...ring-react/components/searchable-list.mdx
@@ -1,24 +1,24 @@
-# Searchable Checkbox List
+# Searchable List
 
 <Description
   extendsInfo={[]}
-  importExample="import { searchablecheckboxlist } from '@smile/haring-react';"
+  importExample="import { SearchableList } from '@smile/haring-react';"
   packageInfo={{
     label: '@smile/haring-react',
     link: 'https://www.npmjs.com/package/@smile/haring-react',
   }}
   sourceInfo={{
-    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/SearchableCheckboxList/SearchableCheckboxList.tsx',
+    link: 'https://github.com/Smile-SA/haring/blob/main/packages/haring-react/src/Components/SearchableList/SearchableList.tsx',
   }}
-  storybookInfo="3-custom-components-searchablecheckboxlist--docs"
+  storybookInfo="3-custom-components-searchablelist--docs"
 >
   Renders a search bar with checkboxes and a validation button
 </Description>
 
 ## Storybook Docs
 
 <StorybookEmbed
-  storyId="3-custom-components-searchablecheckboxlist--docs"
+  storyId="3-custom-components-searchablelist--docs"
   height="820"
 />