Migrate to twenty-ui - feedback/progress-bar (#8002)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7527](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7527).

 --- 

### Description

Migrate `feedback/progress-bar` to twenty ui:

- CircularProgressBar
- ProgressBar

### Demo

ProgressBar on Storybook


![](https://assets-service.gitstart.com/4814/10b11cf5-e52e-420c-b70b-274c532f5f94.png)

CircularProgressBar on Storybook


![](https://assets-service.gitstart.com/4814/e483d3db-1b4c-4062-af40-c596c406c221.png)

###### Fixes twentyhq/private-issues#91

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
-import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
-import { MainButton } from 'twenty-ui';
+import { CircularProgressBar, MainButton } from 'twenty-ui';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx

@@ -3,10 +3,10 @@ import styled from '@emotion/styled';
 import { useCallback, useState } from 'react';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { CircularProgressBar } from 'twenty-ui';
 
 import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/SpreadsheetImportStep';
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -10,10 +10,10 @@ import {
   LightButton,
   LightIconButton,
   MOBILE_VIEWPORT,
+  ProgressBar,
+  useProgressAnimation,
 } from 'twenty-ui';
 
-import { ProgressBar } from '@/ui/feedback/progress-bar/components/ProgressBar';
-import { useProgressAnimation } from '@/ui/feedback/progress-bar/hooks/useProgressAnimation';
 import { isDefined } from '~/utils/isDefined';
 
 export enum SnackBarVariant {

packages/twenty-front/tsup.ui.index.tsx

@@ -2,8 +2,7 @@ import { ThemeType } from 'twenty-ui';
 
 export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
-export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar';
-export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar';
+
 export * from './src/modules/ui/input/components/AutosizeTextInput';
 export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';

packages/twenty-ui/src/feedback/index.ts

@@ -0,0 +1,3 @@
+export * from './progress-bar/components/CircularProgressBar';
+export * from './progress-bar/components/ProgressBar';
+export * from './progress-bar/hooks/useProgressAnimation';

packages/twenty-ui/src/feedback/progress-bar/components/__stories__/CircularProgressBar.stories.tsx

@@ -1,7 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import { CatalogDecorator, CatalogStory } from '@ui/testing';
 
 import { CircularProgressBar } from '../CircularProgressBar';
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
 
 const meta: Meta<typeof CircularProgressBar> = {
   title: 'UI/Feedback/CircularProgressBar/CircularProgressBar',

packages/twenty-ui/src/feedback/progress-bar/components/__stories__/ProgressBar.stories.tsx

@@ -1,9 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
-
-import { useProgressAnimation } from '@/ui/feedback/progress-bar/hooks/useProgressAnimation';
-
 import { ProgressBar } from '../ProgressBar';
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+import { useProgressAnimation } from '@ui/feedback/progress-bar/hooks/useProgressAnimation';
 
 const meta: Meta<typeof ProgressBar> = {
   title: 'UI/Feedback/ProgressBar/ProgressBar',

packages/twenty-ui/src/feedback/progress-bar/hooks/useProgressAnimation.ts

@@ -6,7 +6,7 @@ import {
   ValueAnimationTransition,
 } from 'framer-motion';
 
-import { isDefined } from '~/utils/isDefined';
+import { isDefined } from '@ui/utilities';
 
 export const useProgressAnimation = ({
   autoPlay = true,

packages/twenty-ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './accessibility';
 export * from './components';
 export * from './display';
 export * from './input';
+export * from './feedback';
 export * from './layout';
 export * from './navigation';
 export * from './testing';

packages/twenty-website/src/content/twenty-ui/progress-bar.mdx

@@ -10,7 +10,7 @@ Indicates progress or countdown and moves from right to left.
 
 <ArticleTab>
 
-<SandpackEditor content={`import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
+<SandpackEditor content={`import { ProgressBar } from "twenty-ui";
 
 export const MyComponent = () => {
   return (