feat(redmine 1294330): renaming Components (#179)

Co-authored-by: pereag <[email protected]>
Smile-SA · May 7, 2024 · 88bcbd0 · 88bcbd0
1 parent 87bb550
commit 88bcbd0
Show file tree

Hide file tree

Showing 54 changed files with 157 additions and 162 deletions.
diff --git a/.changeset/itchy-cats-begin.md b/.changeset/itchy-cats-begin.md
@@ -0,0 +1,6 @@
+---
+'storybook-pages': minor
+'@smile/haring-react': minor
+---
+
+renaming components
diff --git a/packages/haring-react/CHANGELOG.md b/packages/haring-react/CHANGELOG.md
@@ -246,7 +246,7 @@
 
 - [#10](https://github.com/Smile-SA/haring/pull/10) [`f4a2c9b`](https://github.com/Smile-SA/haring/commit/f4a2c9b332346276ac4e05235ebda5ce02f52aab) Thanks [@vapersmile](https://github.com/vapersmile)! - Add table component
 
-- [#5](https://github.com/Smile-SA/haring/pull/5) [`6949191`](https://github.com/Smile-SA/haring/commit/69491915691b14b9841557ad23f8bce4c7437687) Thanks [@vapersmile](https://github.com/vapersmile)! - Add breadcrumbs component
+- [#5](https://github.com/Smile-SA/haring/pull/5) [`6949191`](https://github.com/Smile-SA/haring/commit/69491915691b14b9841557ad23f8bce4c7437687) Thanks [@vapersmile](https://github.com/vapersmile)! - Add Breadcrumbs component
 
 - [#3](https://github.com/Smile-SA/haring/pull/3) [`44aac62`](https://github.com/Smile-SA/haring/commit/44aac629b5e6dc5cc036e1964a06f7fd6cc863af) Thanks [@QuentinLeCaignec](https://github.com/QuentinLeCaignec)! - Add pagination component
 

diff --git a/packages/haring-react/src/Assembly/DashboardCard/DashboardCard.stories.tsx b/packages/haring-react/src/Assembly/DashboardCard/DashboardCard.stories.tsx
@@ -32,7 +32,7 @@ import {
 const meta = {
   component: null,
   tags: ['autodocs'],
-  title: '3-custom/Assembly/DashboardCard',
+  title: '3-custom/Assembly/Cards',
 };
 
 export default meta;
@@ -958,7 +958,7 @@ export const CardListNotificationWithoutButton: IStory = {
   ),
 };
 
-export const CardListUpload: IStory = {
+export const CardListSimple: IStory = {
   render: () => (
     <Card radius={16}>
       <Card.Section>

diff --git a/packages/haring-react/src/Components/ActionBar/ActionBar.mock.tsx b/packages/haring-react/src/Components/ActionBar/ActionBar.mock.tsx
@@ -4,7 +4,7 @@ import type { IThumbnail } from '../../types';
 import {
   actionRowOverflowActionsMock,
   actionRowOverflowSelectedMock,
-} from '../ActionRowOverflow/ActionRowOverflow.mock';
+} from '../ActionList/ActionList.mock';
 
 export const actionBarLabelMock = (elements: number): string =>
   `${elements} selected`;

diff --git a/packages/haring-react/src/Components/ActionBar/ActionBar.stories.tsx b/packages/haring-react/src/Components/ActionBar/ActionBar.stories.tsx
@@ -1,10 +1,10 @@
-import type { IActionRowOverflowAction } from '../ActionRowOverflow/ActionRowOverflow';
+import type { IActionListAction } from '../ActionList/ActionList';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
   actionRowOverflowActionsMock,
   actionRowOverflowSelectedMock,
-} from '../ActionRowOverflow/ActionRowOverflow.mock';
+} from '../ActionList/ActionList.mock';
 
 import { ActionBar as Cmp } from './ActionBar';
 import { actionBarLabelMock } from './ActionBar.mock';
@@ -20,7 +20,7 @@ type IStory = StoryObj<typeof meta>;
 
 export const ActionBar: IStory = {
   args: {
-    actions: actionRowOverflowActionsMock as IActionRowOverflowAction<
+    actions: actionRowOverflowActionsMock as IActionListAction<
       Record<string, unknown>
     >[],
     rowActionNumber: 2,

diff --git a/packages/haring-react/src/Components/ActionBar/ActionBar.tsx b/packages/haring-react/src/Components/ActionBar/ActionBar.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import type { IActionRowOverflowProps } from '../ActionRowOverflow/ActionRowOverflow';
+import type { IActionListProps } from '../ActionList/ActionList';
 import type { ReactElement } from 'react';
 
-import { ActionRowOverflow } from '../ActionRowOverflow/ActionRowOverflow';
+import { ActionList } from '../ActionList/ActionList';
 
 import classes from './ActionBar.module.css';
 
 export interface IActionBarProps<Data extends Record<string, unknown>>
-  extends IActionRowOverflowProps<Data> {
+  extends IActionListProps<Data> {
   selectedElementsLabel?: (selectedElements: number) => string;
 }
 
@@ -26,7 +26,7 @@ export function ActionBar<Data extends Record<string, unknown>>(
   return (
     <div className={`${classes.actionBar} actionBarRef`}>
       <span>{selectedElementsLabel(numberOfSelectedElements)}</span>
-      <ActionRowOverflow
+      <ActionList
         {...actionRowOverflowProps}
         selectedElements={selectedElements}
       />

diff --git a/...ionRowOverflow/ActionRowOverflow.mock.tsx → ...Components/ActionList/ActionList.mock.tsx b/...ionRowOverflow/ActionRowOverflow.mock.tsx → ...Components/ActionList/ActionList.mock.tsx
@@ -1,4 +1,4 @@
-import type { IActionRowOverflowProps } from './ActionRowOverflow';
+import type { IActionListProps } from './ActionList';
 import type { IThumbnail, IThumbnailAction } from '../../types';
 
 import { Trash } from '@phosphor-icons/react';
@@ -64,7 +64,7 @@ export const actionRowOverflowSelectedMock: IThumbnail[] = [
   },
 ];
 
-export const actionRowOverflowMock: IActionRowOverflowProps<IThumbnail> = {
+export const ActionListMock: IActionListProps<IThumbnail> = {
   actions: actionRowOverflowActionsMock,
   selectedElements: actionRowOverflowSelectedMock,
 };
diff --git a/...nRowOverflow/ActionRowOverflow.module.css → ...mponents/ActionList/ActionList.module.css b/...nRowOverflow/ActionRowOverflow.module.css → ...mponents/ActionList/ActionList.module.css
diff --git a/...RowOverflow/ActionRowOverflow.stories.tsx → ...ponents/ActionList/ActionList.stories.tsx b/...RowOverflow/ActionRowOverflow.stories.tsx → ...ponents/ActionList/ActionList.stories.tsx
@@ -1,24 +1,24 @@
-import type { IActionRowOverflowAction } from './ActionRowOverflow';
+import type { IActionListAction } from './ActionList';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ActionRowOverflow as Cmp } from './ActionRowOverflow';
+import { ActionList as Cmp } from './ActionList';
 import {
   actionRowOverflowActionsMock,
   actionRowOverflowSelectedMock,
-} from './ActionRowOverflow.mock';
+} from './ActionList.mock';
 
 const meta = {
   component: Cmp,
   tags: ['autodocs'],
-  title: '3-custom/Components/ActionRowOverflow',
+  title: '3-custom/Components/ActionList',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-export const ActionRowOverflow: IStory = {
+export const ActionList: IStory = {
   args: {
-    actions: actionRowOverflowActionsMock as IActionRowOverflowAction<
+    actions: actionRowOverflowActionsMock as IActionListAction<
       Record<string, unknown>
     >[],
     rowActionNumber: 2,

diff --git a/...ents/MenuLanguages/MenuLanguages.test.tsx → ...Components/ActionList/ActionList.test.tsx b/...ents/MenuLanguages/MenuLanguages.test.tsx → ...Components/ActionList/ActionList.test.tsx
@@ -1,16 +1,16 @@
 import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
 
-import { MenuLanguages } from './MenuLanguages';
-import { languages } from './MenuLanguages.mock';
+import { ActionList } from './ActionList';
+import { ActionListMock } from './ActionList.mock';
 
-describe('MenuLanguages', () => {
+describe('ActionList', () => {
   beforeEach(() => {
     // Prevent mantine random ID
     Math.random = () => 0.42;
   });
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <MenuLanguages defaultCurrent="FR" languages={languages} />,
+      <ActionList {...ActionListMock} />,
     );
     expect(container).toMatchSnapshot();
   });

diff --git a/...s/ActionRowOverflow/ActionRowOverflow.tsx → .../src/Components/ActionList/ActionList.tsx b/...s/ActionRowOverflow/ActionRowOverflow.tsx → .../src/Components/ActionList/ActionList.tsx
@@ -19,7 +19,7 @@ import { useState } from 'react';
 
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 
-import classes from './ActionRowOverflow.module.css';
+import classes from './ActionList.module.css';
 
 const defaultTooltipProps = {
   color: 'gray.7',
@@ -28,23 +28,24 @@ const defaultTooltipProps = {
   withArrow: true,
 };
 
-export type IActionRowOverflowAction<Data extends Record<string, unknown>> =
-  IAction<Data[]>;
+export type IActionListAction<Data extends Record<string, unknown>> = IAction<
+  Data[]
+>;
 
-export interface IActionRowOverflowProps<Data extends Record<string, unknown>>
+export interface IActionListProps<Data extends Record<string, unknown>>
   extends GroupProps {
   actionButtonProps?: ButtonProps;
   actionTooltipProps?: TooltipProps;
-  actions: IActionRowOverflowAction<Data>[];
+  actions: IActionListAction<Data>[];
   isCompactStyle?: boolean;
   modalProps?: Omit<ModalProps, 'title'>;
   overflowMenuLabel?: string;
   rowActionNumber?: number;
   selectedElements: Data[];
 }
 
-export function ActionRowOverflow<Data extends Record<string, unknown>>(
-  props: IActionRowOverflowProps<Data>,
+export function ActionList<Data extends Record<string, unknown>>(
+  props: IActionListProps<Data>,
 ): ReactNode {
   const {
     actionButtonProps,
@@ -64,7 +65,7 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
   const menuRowActions =
     rowActionNumber !== undefined ? actions.slice(rowActionNumber) : [];
 
-  function setModal(action: IActionRowOverflowAction<Data>): void {
+  function setModal(action: IActionListAction<Data>): void {
     setConfirmAction({
       cancelColor: action.confirmModalProps?.cancelColor,
       cancelLabel: action.confirmModalProps?.cancelLabel,
@@ -89,15 +90,15 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
     handleClose();
   }
 
-  function handleAction(action: IActionRowOverflowAction<Data>): void {
+  function handleAction(action: IActionListAction<Data>): void {
     if (action.confirmation) {
       setModal(action);
     } else {
       action.onAction?.(selectedElements);
     }
   }
 
-  function getActionLabel(action?: IActionRowOverflowAction<Data>): string {
+  function getActionLabel(action?: IActionListAction<Data>): string {
     if (!action) {
       return '';
     }
@@ -106,7 +107,7 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
       : action.label;
   }
 
-  function getActionIcon(action?: IActionRowOverflowAction<Data>): ReactNode {
+  function getActionIcon(action?: IActionListAction<Data>): ReactNode {
     if (!action) {
       return null;
     }
@@ -116,7 +117,7 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
   }
 
   function getActionComponentProps(
-    action?: IActionRowOverflowAction<Data>,
+    action?: IActionListAction<Data>,
   ): Record<string, unknown> | undefined {
     if (!action) {
       return undefined;
@@ -126,9 +127,7 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
       : action.componentProps;
   }
 
-  const visibleRowAction = (
-    action: IActionRowOverflowAction<Data>,
-  ): ReactElement =>
+  const visibleRowAction = (action: IActionListAction<Data>): ReactElement =>
     !isCompactStyle ? (
       <Button
         key={action.id}
@@ -167,9 +166,7 @@ export function ActionRowOverflow<Data extends Record<string, unknown>>(
       </Tooltip>
     );
 
-  const menuRowAction = (
-    action: IActionRowOverflowAction<Data>,
-  ): ReactElement => (
+  const menuRowAction = (action: IActionListAction<Data>): ReactElement => (
     <Menu.Item
       key={action.id}
       color={action.color}

diff --git a/...apshots__/ActionRowOverflow.test.tsx.snap → ...st/__snapshots__/ActionList.test.tsx.snap b/...apshots__/ActionRowOverflow.test.tsx.snap → ...st/__snapshots__/ActionList.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActionRowOverflow matches snapshot 1`] = `
+exports[`ActionList matches snapshot 1`] = `
 <div>
   <style
     data-mantine-styles="true"

diff --git a/packages/haring-react/src/Components/Breadcrumbs/Breadcrumbs.tsx b/packages/haring-react/src/Components/Breadcrumbs/Breadcrumbs.tsx
@@ -29,7 +29,7 @@ const svgSeparator = (
   </svg>
 );
 
-/** Additional props will be forwarded to the [Mantine Breadcrumb component](https://mantine.dev/core/breadcrumbs) */
+/** Additional props will be forwarded to the [Mantine Breadcrumbs component](https://mantine.dev/core/Breadcrumbs) */
 export function Breadcrumbs(props: IBreadcrumbsProps): ReactElement {
   const { separator = svgSeparator, children, ...BreadcrumbsProps } = props;
 

diff --git a/...tOrDropdown/ButtonListOrDropdown.mock.tsx → ...Components/ButtonList/ButtonList.mock.tsx b/...tOrDropdown/ButtonListOrDropdown.mock.tsx → ...Components/ButtonList/ButtonList.mock.tsx
diff --git a/...rDropdown/ButtonListOrDropdown.module.css → ...mponents/ButtonList/ButtonList.module.css b/...rDropdown/ButtonListOrDropdown.module.css → ...mponents/ButtonList/ButtonList.module.css
diff --git a/...Dropdown/ButtonListOrDropdown.stories.tsx → ...ponents/ButtonList/ButtonList.stories.tsx b/...Dropdown/ButtonListOrDropdown.stories.tsx → ...ponents/ButtonList/ButtonList.stories.tsx
@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ButtonListOrDropdown as Cmp } from './ButtonListOrDropdown';
-import { items } from './ButtonListOrDropdown.mock';
+import { ButtonList as Cmp } from './ButtonList';
+import { items } from './ButtonList.mock';
 
 const meta = {
   component: Cmp,
   tags: ['autodocs'],
-  title: '3-custom/Components/ButtonListOrDropdown',
+  title: '3-custom/Components/ButtonList',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-export const ButtonListOrDropdown: IStory = {
+export const ButtonList: IStory = {
   args: {
     defaultCurrent: 'FR',
     items,

diff --git a/...ionRowOverflow/ActionRowOverflow.test.tsx → ...Components/ButtonList/ButtonList.test.tsx b/...ionRowOverflow/ActionRowOverflow.test.tsx → ...Components/ButtonList/ButtonList.test.tsx
@@ -1,16 +1,16 @@
 import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
 
-import { ActionRowOverflow } from './ActionRowOverflow';
-import { actionRowOverflowMock } from './ActionRowOverflow.mock';
+import { ButtonList } from './ButtonList';
+import { items } from './ButtonList.mock';
 
-describe('ActionRowOverflow', () => {
+describe('ButtonList', () => {
   beforeEach(() => {
     // Prevent mantine random ID
     Math.random = () => 0.42;
   });
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <ActionRowOverflow {...actionRowOverflowMock} />,
+      <ButtonList defaultCurrent="FR" items={items} />,
     );
     expect(container).toMatchSnapshot();
   });

diff --git a/...onListOrDropdown/ButtonListOrDropdown.tsx → .../src/Components/ButtonList/ButtonList.tsx b/...onListOrDropdown/ButtonListOrDropdown.tsx → .../src/Components/ButtonList/ButtonList.tsx
@@ -6,9 +6,9 @@ import type { ReactElement, ReactNode } from 'react';
 import { Button, Menu } from '@mantine/core';
 import { useUncontrolled } from '@mantine/hooks';
 
-import classes from './ButtonListOrDropdown.module.css';
+import classes from './ButtonList.module.css';
 
-export interface IButtonListOrDropdownProps extends MenuProps {
+export interface IButtonListProps extends MenuProps {
   buttonProps?: ButtonProps;
   current?: string;
   defaultCurrent: string;
@@ -17,9 +17,7 @@ export interface IButtonListOrDropdownProps extends MenuProps {
   onAction?: () => void;
 }
 
-export function ButtonListOrDropdown(
-  props: IButtonListOrDropdownProps,
-): ReactElement {
+export function ButtonList(props: IButtonListProps): ReactElement {
   const {
     buttonProps,
     current,

diff --git a/...hots__/ButtonListOrDropdown.test.tsx.snap → ...st/__snapshots__/ButtonList.test.tsx.snap b/...hots__/ButtonListOrDropdown.test.tsx.snap → ...st/__snapshots__/ButtonList.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonListOrDropdown matches snapshot 1`] = `
+exports[`ButtonList matches snapshot 1`] = `
 <div>
   <style
     data-mantine-styles="true"

diff --git a/packages/haring-react/src/Components/DocumentList/DocumentList.stories.tsx b/packages/haring-react/src/Components/DocumentList/DocumentList.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
-import { actionRowOverflowActionsMock } from '../ActionRowOverflow/ActionRowOverflow.mock';
+import { actionRowOverflowActionsMock } from '../ActionList/ActionList.mock';
 
 import { DocumentList as Cmp } from './DocumentList';
 import { documentsMock } from './DocumentList.mock';

diff --git a/packages/haring-react/src/Components/DocumentList/DocumentList.test.tsx b/packages/haring-react/src/Components/DocumentList/DocumentList.test.tsx
@@ -1,6 +1,6 @@
 import { renderWithProviders } from '@smile/haring-react-shared/test-utils';
 
-import { actionRowOverflowActionsMock } from '../ActionRowOverflow/ActionRowOverflow.mock';
+import { actionRowOverflowActionsMock } from '../ActionList/ActionList.mock';
 
 import { DocumentList } from './DocumentList';
 import { documentsMock } from './DocumentList.mock';

diff --git a/packages/haring-react/src/Components/DocumentList/DocumentList.tsx b/packages/haring-react/src/Components/DocumentList/DocumentList.tsx
@@ -1,5 +1,5 @@
 import type { IActionBarProps } from '../ActionBar/ActionBar';
-import type { IActionRowOverflowAction } from '../ActionRowOverflow/ActionRowOverflow';
+import type { IActionListAction } from '../ActionList/ActionList';
 import type { ISelectableListProps } from '../SelectableList/SelectableList';
 import type { ReactElement, ReactNode } from 'react';
 
@@ -33,7 +33,7 @@ export interface IDocumentListProps
     IActionBarProps<IDocument>,
     'actions' | 'selectedElements'
   >;
-  actions?: IActionRowOverflowAction<IDocument>[];
+  actions?: IActionListAction<IDocument>[];
   documents: IDocument[];
   isClickCardToSelect?: boolean;
   mobileImageButtonLabel?: string;