-
+
{children}
@@ -125,12 +123,7 @@ interface ItemProps extends BaseComponentProps, PropsWithChildren {
* The `Item` component represents a single item in the `Accordion`. It contains
* a `Trigger` and `Content`.
*/
-const Item = ({
- children,
- className,
- value,
- testId = 'accordion-item',
-}: ItemProps): JSX.Element => {
+const Item = ({ children, className, value, testId = 'accordion-item' }: ItemProps) => {
const [isOpen, setIsOpen] = useState(false);
const { activeItems, addItem, removeItem } = useContext(AccordionContext);
@@ -157,9 +150,7 @@ const Item = ({
return (
-
- {children}
-
+ {children}
);
};
@@ -169,11 +160,7 @@ Accordion.Item = Item;
* The `Trigger` component represents the trigger for an `Item`. When clicked,
* it will open or close the `Content`.
*/
-const Trigger = ({
- children,
- className,
- testId = 'accordion-trigger',
-}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+const Trigger = ({ children, className, testId = 'accordion-trigger' }: BaseComponentProps & PropsWithChildren) => {
const { addActiveItem, removeActiveItem } = useContext(AccordionContext);
const { isOpen, value } = useContext(AccordionItemContext);
const [springs, api] = useSpring(() => ({
@@ -221,11 +208,7 @@ Accordion.Trigger = Trigger;
* The `Content` component represents the content of an `Item`. When the `Item`
* is open, the content will be displayed.
*/
-const Content = ({
- children,
- className,
- testId = 'accordion-content',
-}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+const Content = ({ children, className, testId = 'accordion-content' }: BaseComponentProps & PropsWithChildren) => {
const contentRef = useRef
- Ornare occaecat aliquip voluptate esse est occaecat
- cillum nam. Eiusmod aliquip magna dapibus ut ut deserunt. Justo nisi mi nunc nunc cras.
- Ipsum quam officia dapibus et aenean enim. Bibendum do convallis donec eiusmod elit arcu
- est. Quam ero ea massa culpa adipiscing. Justo neque aute qui nisi. Convallis nisi et
- irure mollit dui aliqua fugait laoreet.
+ Ornare occaecat aliquip voluptate esse est occaecat cillum nam. Eiusmod
+ aliquip magna dapibus ut ut deserunt. Justo nisi mi nunc nunc cras. Ipsum quam officia dapibus et aenean
+ enim. Bibendum do convallis donec eiusmod elit arcu est. Quam ero ea massa culpa adipiscing. Justo neque
+ aute qui nisi. Convallis nisi et irure mollit dui aliqua fugait laoreet.
- Mollit urna ut ut pulvinar ullamco. Ero enim eiusmod qui in velit. Posuere dapibus cras
- culpa ligula magna. Do neque urna nostrud tempus officia. Consequat condimentum a
- eiusmod cillum. Pulvinar elit qui pulvinar donec non aute dolor. Sunt aliquip dapibus mi
- vitae labore.
+ Mollit urna ut ut pulvinar ullamco. Ero enim eiusmod qui in velit. Posuere dapibus cras culpa ligula magna.
+ Do neque urna nostrud tempus officia. Consequat condimentum a eiusmod cillum. Pulvinar elit qui pulvinar
+ donec non aute dolor. Sunt aliquip dapibus mi vitae labore.
- Irure laoreet ligula justo sapien magna ea vel. Proident mollit aenean aliquip magna
- ullamco ipsum tempus incididunt. Do aenean eiusmod amet dolor ipsum sunt sit. Irure
- reprehenderit ad cupidatat labore bibendum convallis. Tempor deserunt nam lorem cras
- excepteur a bibendum egestas. Donec labore duis esse quam. Dui culpa cupidatat cras
- cillum vel ornare pulvinar dui. Duis donec aenean vel adipiscing ligula.
+ Irure laoreet ligula justo sapien magna ea vel. Proident mollit aenean aliquip magna ullamco ipsum tempus
+ incididunt. Do aenean eiusmod amet dolor ipsum sunt sit. Irure reprehenderit ad cupidatat labore bibendum
+ convallis. Tempor deserunt nam lorem cras excepteur a bibendum egestas. Donec labore duis esse quam. Dui
+ culpa cupidatat cras cillum vel ornare pulvinar dui. Duis donec aenean vel adipiscing ligula.
- Egestas justo donec laboris justo id laborum aliqua.
- Nulla dapibus aute aenean donec vitae enim pulvinar donec. Neque cupidatat facilisis
- sint laboris magna ea. Anim ero proident laboris fugait. Tempus labore dui vel laborum
- esse donec pariatur. Consequat id laoreet mollit fugait id cillum anim.
+ Egestas justo donec laboris justo id laborum aliqua. Nulla dapibus aute
+ aenean donec vitae enim pulvinar donec. Neque cupidatat facilisis sint laboris magna ea. Anim ero proident
+ laboris fugait. Tempus labore dui vel laborum esse donec pariatur. Consequat id laoreet mollit fugait id
+ cillum anim.
- Pulvinar e nibh veniam arcu at aliqua pariatur. Enim cillum cupidatat elit elit occaecat
- reprehenderit. Nibh sed justo quam convallis fermentum e aute. Incididunt ero in ornare
- anim voluptate incididunt nul. Do exercitation bibendum nulla lorem est nul. Irure
- labore ligula dui qos culpa aliquip condimentum. Proin excepteur incididunt do commodo
- deserunt egestas.
+ Pulvinar e nibh veniam arcu at aliqua pariatur. Enim cillum cupidatat elit elit occaecat reprehenderit. Nibh
+ sed justo quam convallis fermentum e aute. Incididunt ero in ornare anim voluptate incididunt nul. Do
+ exercitation bibendum nulla lorem est nul. Irure labore ligula dui qos culpa aliquip condimentum. Proin
+ excepteur incididunt do commodo deserunt egestas.
{children}
@@ -59,11 +51,7 @@ const Alert = ({
/**
* The `Title` component renders the styled title text for an `Alert`.
*/
-const Title = ({
- children,
- className,
- testId = 'alert-title',
-}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+const Title = ({ children, className, testId = 'alert-title' }: BaseComponentProps & PropsWithChildren) => {
return (
{children}
@@ -75,11 +63,7 @@ Alert.Title = Title;
/**
* The `Description` component renders the styled description text for an `Alert`.
*/
-const Description = ({
- children,
- className,
- testId = 'alert-description',
-}: BaseComponentProps & PropsWithChildren): JSX.Element => {
+const Description = ({ children, className, testId = 'alert-description' }: BaseComponentProps & PropsWithChildren) => {
return (
{children}
@@ -91,7 +75,7 @@ Alert.Description = Description;
/**
* The `Icon` component renders the styled icon for an `Alert`.
*/
-const Icon = ({ size = 'lg', testId = 'alert-icon', ...props }: FAIconProps): JSX.Element => {
+const Icon = ({ size = 'lg', testId = 'alert-icon', ...props }: FAIconProps) => {
return ,
- Partial> {
+export interface ErrorAlertProps extends Omit, Partial> {
title?: string;
description: string;
}
@@ -23,7 +21,7 @@ const ErrorAlert = ({
testId = 'alert-error',
title,
...props
-}: ErrorAlertProps): JSX.Element => {
+}: ErrorAlertProps) => {
return (
Something unexpected has happened!
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
@@ -45,10 +45,10 @@ export const NoIcon: Story = {
Something unexpected has happened!
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
@@ -61,10 +61,10 @@ export const DescriptionOnly: Story = {
render: (args) => (
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
@@ -90,10 +90,10 @@ export const Info: Story = {
Something you should know...
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
@@ -107,10 +107,10 @@ export const Warning: Story = {
Proceed with caution!
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
@@ -124,10 +124,10 @@ export const Success: Story = {
You did it!
- Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero
- exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum
- exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui.
- Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt.
+ Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a.
+ Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam.
+ Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque
+ incididunt.
),
diff --git a/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx b/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
index 7ed71ad..cadf6d8 100644
--- a/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
+++ b/src/common/components/Alert/__stories__/ErrorAlert.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
import ErrorAlert from '../ErrorAlert';
diff --git a/src/common/components/Backdrop/Backdrop.tsx b/src/common/components/Backdrop/Backdrop.tsx
index f7025fa..1b2017e 100644
--- a/src/common/components/Backdrop/Backdrop.tsx
+++ b/src/common/components/Backdrop/Backdrop.tsx
@@ -18,21 +18,15 @@ export interface BackdropProps extends BaseComponentProps, PropsWithChildren {
* component. Usually used to partially mask background content to draw
* attention to content in the foreground such as a `Dialog` or `Menu`.
* @param {BackgroundProps} props - Component properties
- * @returns {JSX.Element} JSX
*/
-const Backdrop = ({
- children,
- className,
- onClick,
- testId = 'backdrop',
-}: BackdropProps): JSX.Element => {
+const Backdrop = ({ children, className, onClick, testId = 'backdrop' }: BackdropProps) => {
const handleClick = (e: React.MouseEvent) => {
onClick?.(e);
};
return (
diff --git a/src/common/components/Badge/Badge.tsx b/src/common/components/Badge/Badge.tsx
index e8337cd..37b4a2c 100644
--- a/src/common/components/Badge/Badge.tsx
+++ b/src/common/components/Badge/Badge.tsx
@@ -43,14 +43,7 @@ export interface BadgeProps extends BaseComponentProps, PropsWithChildren, Badge
* The `Badge` component highlights a notification, a count, or a piece status
* information.
*/
-const Badge = ({
- children,
- className,
- size,
- testId = 'badge',
- variant,
- uppercase,
-}: BadgeProps): JSX.Element => {
+const Badge = ({ children, className, size, testId = 'badge', variant, uppercase }: BadgeProps) => {
return (
{children}
diff --git a/src/common/components/Badge/__stories__/Badge.stories.tsx b/src/common/components/Badge/__stories__/Badge.stories.tsx
index ff3a69c..0af3c43 100644
--- a/src/common/components/Badge/__stories__/Badge.stories.tsx
+++ b/src/common/components/Badge/__stories__/Badge.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
import Badge from '../Badge';
diff --git a/src/common/components/Breadcrumbs/Breadcrumbs.tsx b/src/common/components/Breadcrumbs/Breadcrumbs.tsx
index 2e41fd8..abfbf73 100644
--- a/src/common/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/common/components/Breadcrumbs/Breadcrumbs.tsx
@@ -48,11 +48,7 @@ export interface BreadcrumbsProps extends BaseComponentProps, PropsWithChildren
* ```
*/
-const Breadcrumbs = ({
- children,
- className,
- testId = 'breadcrumbs',
-}: BreadcrumbsProps): JSX.Element => {
+const Breadcrumbs = ({ children, className, testId = 'breadcrumbs' }: BreadcrumbsProps) => {
return (