From 3733a81e2873a8adcd1dfccd87ef59891b33306d Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 16 Aug 2023 18:15:25 +0200 Subject: [PATCH 01/32] feat: [WIP] Accordion refactor --- .../Accordion/Accordion.stories.tsx | 98 +++++++++++-------- .../components/Accordion/Accordion.test.tsx | 98 ------------------- .../src/components/Accordion/Accordion.tsx | 51 +++------- .../components/Accordion/AccordionSection.tsx | 33 +++---- .../Accordion/AccordionSections.tsx | 19 ++++ .../src/components/Accordion/index.ts | 25 ++++- .../src/components/Accordion/useLinked.ts | 16 +++ .../src/components/NavFooter/NavFooter.tsx | 2 +- .../src/components/NavFooter/index.ts | 4 +- .../src/components/NavHeader/NavHeader.tsx | 2 +- .../src/components/NavHeader/index.ts | 4 +- .../Notification/NotificationContainer.tsx | 4 +- 12 files changed, 155 insertions(+), 201 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx create mode 100644 packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx create mode 100644 packages/libs/react-ui/src/components/Accordion/useLinked.ts diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index ba132ab57b..e955fd2e26 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -1,59 +1,79 @@ -import { Accordion, IAccordionProps } from './Accordion'; +import type { IAccordionRootProps, IAccordionSectionProps } from './'; +import { Accordion } from './'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -const meta: Meta<{} & IAccordionProps> = { +const generateSection = (index: number): IAccordionSectionProps => ({ + title: Section {index + 1}, + children:

This is the content for section {index + 1}

, + onOpen: () => console.log(`open section ${index + 1}`), + onClose: () => console.log(`close section ${index + 1}`), +}); +const generateSections = (n: number): IAccordionSectionProps[] => + Array.from({ length: n }, (d, i) => generateSection(i)); + +const sampleSections: IAccordionSectionProps[] = generateSections(5); + +type StoryProps = { sectionCount: number } & IAccordionRootProps; + +const meta: Meta = { title: 'Components/Accordion', + parameters: { + controls: { + hideNoControlsWarning: true, + sort: 'requiredFirst', + }, + docs: { + description: { + component: '', + }, + }, + }, argTypes: { linked: { - type: 'boolean', - defaultValue: true, + control: { type: 'boolean' }, description: 'Each section will close the other sections if they are linked', - control: { - type: 'boolean', - }, }, - sections: { - defaultValue: [], - description: 'Accordion children', - control: { - type: 'array', - }, + sectionCount: { + control: { type: 'range', min: 1, max: sampleSections.length, step: 1 }, + description: 'Adjust sample section items count', }, }, }; -export default meta; -type Story = StoryObj<{} & IAccordionProps>; +type IStory = StoryObj; -export const Dynamic: Story = { +export const Dynamic: IStory = { name: 'Accordion', args: { - linked: true, - sections: [ - { - title: First Section, - children:

This is the content for the first section

, - onOpen: () => console.log('open first item'), - onClose: () => console.log('close first item'), - }, - { - title: Second Section, - children:

This is the content for the second section

, - onOpen: () => console.log('open second item'), - onClose: () => console.log('close second item'), - }, - { - title: Third Section, - children:

This is the content for the third section

, - onOpen: () => console.log('open third item'), - onClose: () => console.log('close third item'), - }, - ], + linked: false, + sectionCount: 3, }, - render: ({ linked, sections }) => { - return ; + render: ({ linked, sectionCount }) => { + return ( + + {sampleSections + .slice(0, sectionCount) + .map( + ( + { title, children, onOpen, onClose }: IAccordionSectionProps, + index, + ) => ( + + {children} + + ), + )} + + ); }, }; + +export default meta; diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx deleted file mode 100644 index 5d68d71f3a..0000000000 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.test.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Accordion } from './Accordion'; - -import { fireEvent, render } from '@testing-library/react'; -import React from 'react'; - -// eslint-disable-next-line @kadena-dev/typedef-var -const sections = [ - { - title: 'Section 1', - children: 'Section 1 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, - { - title: 'Section 2', - children: 'Section 2 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, - { - title: 'Section 3', - children: 'Section 3 content', - onOpen: jest.fn(), - onClose: jest.fn(), - }, -]; - -beforeEach(() => { - jest.clearAllMocks(); -}); - -describe('Accordion', () => { - test('renders the correct number of sections', () => { - const { getAllByTestId } = render(); - const sectionElements = getAllByTestId('kda-accordion-title'); - expect(sectionElements.length).toBe(sections.length); - }); - - test('opens a linked section when clicked and closes others', () => { - const { getAllByTestId } = render( - , - ); - - const sectionTitles = Array.from(getAllByTestId('kda-accordion-title')); - - expect(sections[0].onOpen).toHaveBeenCalledTimes(0); - fireEvent.click(sectionTitles[0]); // Open Section 1 - expect(sections[0].onOpen).toHaveBeenCalledTimes(1); - - expect(sections[0].onClose).toHaveBeenCalledTimes(0); - fireEvent.click(sectionTitles[1]); // Close section 1 and Open Section 2 - expect(sections[0].onClose).toHaveBeenCalledTimes(1); - expect(sections[1].onOpen).toHaveBeenCalledTimes(1); - - expect(sectionTitles[0].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - expect(sectionTitles[1].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - expect(sectionTitles[2].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - }); - - test('allows multiple unlinked sections to be open at the same time', () => { - const { getAllByTestId } = render( - , - ); - - const sectionTitles = Array.from(getAllByTestId('kda-accordion-title')); - - expect(sections[0].onOpen).toHaveBeenCalledTimes(0); - expect(sections[1].onOpen).toHaveBeenCalledTimes(0); - expect(sections[2].onOpen).toHaveBeenCalledTimes(0); - - fireEvent.click(sectionTitles[0]); // Open Section 1 - fireEvent.click(sectionTitles[2]); // Open Section 3 - - expect(sections[0].onOpen).toHaveBeenCalledTimes(1); - expect(sections[1].onOpen).toHaveBeenCalledTimes(0); - expect(sections[2].onOpen).toHaveBeenCalledTimes(1); - - expect(sections[0].onClose).toHaveBeenCalledTimes(0); - expect(sections[1].onClose).toHaveBeenCalledTimes(0); - expect(sections[2].onClose).toHaveBeenCalledTimes(0); - - expect(sectionTitles[0].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - expect(sectionTitles[1].querySelector('[role="button"]')).not.toHaveClass( - 'isOpen', - ); - expect(sectionTitles[2].querySelector('[role="button"]')).toHaveClass( - 'isOpen', - ); - }); -}); diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index b3b38abe7b..1228d2013e 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,41 +1,22 @@ -import { AccordionSection, IAccordionSectionProps } from './AccordionSection'; +import useLinked from './useLinked'; +import { IAccordionSectionsProps } from '.'; -import React, { FC, useState } from 'react'; +import React, { FC, FunctionComponentElement } from 'react'; -export interface IAccordionProps { - sections: Omit[]; +export interface IAccordionRootProps { + children?: React.ReactNode; linked?: boolean; + openSection?: number; } -export const Accordion: FC = ({ sections, linked = true }) => { - const [expandedSections, setExpandedSections] = useState([]); - const handleOpen = (index: number): void => { - if (linked) setExpandedSections([index]); - else setExpandedSections([...expandedSections, index]); - }; - const handleClose = (index: number): void => { - setExpandedSections(expandedSections.filter((item) => item !== index)); - }; - - const isOpen = (index: number): boolean => expandedSections.includes(index); - - const handleToggle = (index: number): void => { - if (isOpen(index)) handleClose(index); - else handleOpen(index); - }; - - return ( -
- {sections.map((section, index) => ( - handleToggle(index)} - key={String(section.title)} - > - {section.children} - - ))} -
- ); +export const AccordionRoot: FC = ({ + children, + linked, + openSection, +}) => { + if (linked) { + const { setUsingLinked } = useLinked(openSection); + setUsingLinked(true); + } + return
{children}
; }; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index e49b406219..7a5bf5c180 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -5,45 +5,42 @@ import { accordionTitleVariants, toggleButtonClass, } from './Accordion.css'; +import useLinked from './useLinked'; import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, useEffect, useRef } from 'react'; +import React, { FC, useState } from 'react'; export interface IAccordionSectionProps { title: React.ReactNode; children: React.ReactNode; - isOpen: boolean; - onToggle: () => void; + onToggle?: () => void; onOpen?: () => void; onClose?: () => void; } export const AccordionSection: FC = ({ - isOpen = false, title, children, - onToggle, onOpen, onClose, }) => { - const didMountRef = useRef(false); + const { usingLinked, activeSection, setActiveSection } = useLinked(); + const [isOpen, setIsOpen] = useState(false); - useEffect(() => { - if (!didMountRef.current) { - didMountRef.current = true; - return; - } - - if (isOpen) onOpen?.(); - else onClose?.(); - }, [isOpen]); + const onToggle = (): void => (isOpen ? onClose?.() : onOpen?.()); + const handleClick = (): void => { + setIsOpen(!isOpen); + }; return ( -
+
{ + handleClick(); + onToggle(); + }} className={classNames( accordionTitleClass, accordionTitleVariants[isOpen ? 'opened' : 'closed'], diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx new file mode 100644 index 0000000000..2d6a71e427 --- /dev/null +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx @@ -0,0 +1,19 @@ +import useLinked from './useLinked'; +import { IAccordionSectionProps } from '.'; + +import React, { FC, FunctionComponentElement } from 'react'; + +export interface IAccordionSectionsProps { + // children?: FunctionComponentElement[]; + children?: React.ReactNode; + linked?: boolean; + openSection?: number; +} + +export const AccordionSections: FC = ({ + children, + linked, + openSection = 0, +}) => { + return
{children}
; +}; diff --git a/packages/libs/react-ui/src/components/Accordion/index.ts b/packages/libs/react-ui/src/components/Accordion/index.ts index 397de139ee..d7e05c8d40 100644 --- a/packages/libs/react-ui/src/components/Accordion/index.ts +++ b/packages/libs/react-ui/src/components/Accordion/index.ts @@ -1,3 +1,22 @@ -export { Accordion } from './Accordion'; -export type { IAccordionProps } from './Accordion'; -export type { IAccordionSectionProps } from './AccordionSection'; +import type { IAccordionRootProps } from './Accordion'; +import { AccordionRoot } from './Accordion'; +import type { IAccordionSectionProps } from './AccordionSection'; +import { AccordionSection } from './AccordionSection'; +import type { IAccordionSectionsProps } from './AccordionSections'; +import { AccordionSections } from './AccordionSections'; + +import { FC } from 'react'; + +export { IAccordionRootProps, IAccordionSectionProps, IAccordionSectionsProps }; + +export interface IAccordionProps { + Root: FC; + Sections: FC; + Section: FC; +} + +export const Accordion: IAccordionProps = { + Root: AccordionRoot, + Sections: AccordionSections, + Section: AccordionSection, +}; diff --git a/packages/libs/react-ui/src/components/Accordion/useLinked.ts b/packages/libs/react-ui/src/components/Accordion/useLinked.ts new file mode 100644 index 0000000000..804c48e8e5 --- /dev/null +++ b/packages/libs/react-ui/src/components/Accordion/useLinked.ts @@ -0,0 +1,16 @@ +import { useState } from 'react'; + +interface IUseLinkedReturn { + activeSection: number; + setActiveSection: React.Dispatch>; + usingLinked: boolean; + setUsingLinked: React.Dispatch>; +} + +const useLinked = (openSection = 0): IUseLinkedReturn => { + const [usingLinked, setUsingLinked] = useState(false); + const [activeSection, setActiveSection] = useState(openSection); + return { activeSection, setActiveSection, usingLinked, setUsingLinked }; +}; + +export default useLinked; diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx index f87f47922c..5eec6d33ed 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx @@ -9,7 +9,7 @@ export interface INavFooterRootProps { darkMode?: boolean; } -export const NavFooterContainer: FC = ({ +export const NavFooterRoot: FC = ({ children, darkMode = false, }) => { diff --git a/packages/libs/react-ui/src/components/NavFooter/index.ts b/packages/libs/react-ui/src/components/NavFooter/index.ts index 21836b9298..235d0fdf55 100644 --- a/packages/libs/react-ui/src/components/NavFooter/index.ts +++ b/packages/libs/react-ui/src/components/NavFooter/index.ts @@ -1,5 +1,5 @@ import type { INavFooterRootProps } from './NavFooter'; -import { NavFooterContainer } from './NavFooter'; +import { NavFooterRoot } from './NavFooter'; import type { INavFooterIconButtonProps } from './NavFooterIconButton'; import { NavFooterIconButton } from './NavFooterIconButton'; import type { INavFooterLinkProps } from './NavFooterLink'; @@ -24,7 +24,7 @@ export interface INavFooterProps { } export const NavFooter: INavFooterProps = { - Root: NavFooterContainer, + Root: NavFooterRoot, Panel: NavFooterPanel, Link: NavFooterLink, IconButton: NavFooterIconButton, diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index f139780f86..3e72af17b0 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -22,7 +22,7 @@ export interface INavHeaderRootProps { >[]; } -export const NavHeaderContainer: FC = ({ +export const NavHeaderRoot: FC = ({ brand = logoVariants[0], children, }) => { diff --git a/packages/libs/react-ui/src/components/NavHeader/index.ts b/packages/libs/react-ui/src/components/NavHeader/index.ts index da9372023d..9f8d226b4f 100644 --- a/packages/libs/react-ui/src/components/NavHeader/index.ts +++ b/packages/libs/react-ui/src/components/NavHeader/index.ts @@ -1,5 +1,5 @@ import type { INavHeaderRootProps } from './NavHeader'; -import { NavHeaderContainer } from './NavHeader'; +import { NavHeaderRoot } from './NavHeader'; import type { INavHeaderContentProps } from './NavHeaderContent'; import { NavHeaderContent } from './NavHeaderContent'; import { NavHeaderLink } from './NavHeaderLink'; @@ -26,7 +26,7 @@ export interface INavHeaderProps { } export const NavHeader: INavHeaderProps = { - Root: NavHeaderContainer, + Root: NavHeaderRoot, Navigation: NavHeaderNavigation, Link: NavHeaderLink, Content: NavHeaderContent, diff --git a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx b/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx index 308d182403..62310a15de 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx @@ -39,7 +39,7 @@ export const NotificationContainer: FC = ({ ); return ( -
+ ); }; From 26c668b132fa98022e4ee6e44a01eb9ebf6838d1 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 17 Aug 2023 08:56:50 +0200 Subject: [PATCH 02/32] feat: accordion refactor --- .../Accordion/Accordion.stories.tsx | 56 +++++------ .../src/components/Accordion/Accordion.tsx | 15 +-- .../components/Accordion/AccordionSection.tsx | 63 ++++--------- .../Accordion/AccordionSections.tsx | 94 +++++++++++++++++-- .../src/components/Accordion/useLinked.ts | 10 +- 5 files changed, 140 insertions(+), 98 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index e955fd2e26..f086d19be8 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -1,21 +1,21 @@ -import type { IAccordionRootProps, IAccordionSectionProps } from './'; +import type { IAccordionProps, IAccordionSectionProps } from './'; import { Accordion } from './'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -const generateSection = (index: number): IAccordionSectionProps => ({ - title: Section {index + 1}, - children:

This is the content for section {index + 1}

, - onOpen: () => console.log(`open section ${index + 1}`), - onClose: () => console.log(`close section ${index + 1}`), +const generateSection = (i: number): IAccordionSectionProps => ({ + title: Section {i}, + children:

This is the content for section {i}

, + onOpen: () => console.log(`open section ${i}`), + onClose: () => console.log(`close section ${i}`), }); const generateSections = (n: number): IAccordionSectionProps[] => - Array.from({ length: n }, (d, i) => generateSection(i)); + Array.from({ length: n }, (d, i) => generateSection(i + 1)); const sampleSections: IAccordionSectionProps[] = generateSections(5); -type StoryProps = { sectionCount: number } & IAccordionRootProps; +type StoryProps = { sectionCount: number; linked: boolean } & IAccordionProps; const meta: Meta = { title: 'Components/Accordion', @@ -34,7 +34,7 @@ const meta: Meta = { linked: { control: { type: 'boolean' }, description: - 'Each section will close the other sections if they are linked', + 'When linked, only one section can be open at a time. If a section is opened, the previously opened section will be closed.', }, sectionCount: { control: { type: 'range', min: 1, max: sampleSections.length, step: 1 }, @@ -53,24 +53,26 @@ export const Dynamic: IStory = { }, render: ({ linked, sectionCount }) => { return ( - - {sampleSections - .slice(0, sectionCount) - .map( - ( - { title, children, onOpen, onClose }: IAccordionSectionProps, - index, - ) => ( - - {children} - - ), - )} + + + {sampleSections + .slice(0, sectionCount) + .map( + ( + { title, children, onOpen, onClose }: IAccordionSectionProps, + index, + ) => ( + + {children} + + ), + )} + ); }, diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 1228d2013e..5e1f879485 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,22 +1,11 @@ -import useLinked from './useLinked'; import { IAccordionSectionsProps } from '.'; import React, { FC, FunctionComponentElement } from 'react'; export interface IAccordionRootProps { - children?: React.ReactNode; - linked?: boolean; - openSection?: number; + children?: FunctionComponentElement; } -export const AccordionRoot: FC = ({ - children, - linked, - openSection, -}) => { - if (linked) { - const { setUsingLinked } = useLinked(openSection); - setUsingLinked(true); - } +export const AccordionRoot: FC = ({ children }) => { return
{children}
; }; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 7a5bf5c180..e14db08d22 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -1,64 +1,33 @@ -import { - accordionContentWrapperClass, - accordionSectionClass, - accordionTitleClass, - accordionTitleVariants, - toggleButtonClass, -} from './Accordion.css'; -import useLinked from './useLinked'; +import { toggleButtonClass } from './Accordion.css'; import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, useState } from 'react'; +import React, { FC } from 'react'; export interface IAccordionSectionProps { - title: React.ReactNode; children: React.ReactNode; - onToggle?: () => void; - onOpen?: () => void; + isOpen?: boolean; onClose?: () => void; + onOpen?: () => void; + title: React.ReactNode; } export const AccordionSection: FC = ({ title, - children, - onOpen, - onClose, + isOpen, }) => { - const { usingLinked, activeSection, setActiveSection } = useLinked(); - const [isOpen, setIsOpen] = useState(false); - - const onToggle = (): void => (isOpen ? onClose?.() : onOpen?.()); - const handleClick = (): void => { - setIsOpen(!isOpen); - }; - return ( -
-
{ - handleClick(); - onToggle(); - }} - className={classNames( - accordionTitleClass, - accordionTitleVariants[isOpen ? 'opened' : 'closed'], - )} - > - {title} +
+ {title} - -
- - {isOpen &&
{children}
} +
); }; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx index 2d6a71e427..7d61e68cc5 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx @@ -1,19 +1,101 @@ +import { + accordionContentWrapperClass, + accordionSectionClass, + accordionTitleClass, + accordionTitleVariants, +} from './Accordion.css'; import useLinked from './useLinked'; import { IAccordionSectionProps } from '.'; -import React, { FC, FunctionComponentElement } from 'react'; +import classNames from 'classnames'; +import React, { + FC, + FunctionComponentElement, + useCallback, + useEffect, +} from 'react'; export interface IAccordionSectionsProps { - // children?: FunctionComponentElement[]; - children?: React.ReactNode; + children?: FunctionComponentElement[]; linked?: boolean; openSection?: number; } export const AccordionSections: FC = ({ children, - linked, - openSection = 0, + linked = false, + openSection, }) => { - return
{children}
; + const { usingLinked, setUsingLinked, openSections, setOpenSections } = + useLinked(openSection); + + useEffect(() => { + setUsingLinked(linked); + if (linked && openSections.length > 1) { + const lastOpen = openSections.pop() || -1; + setOpenSections([lastOpen]); + } + }, [linked]); + + const handleToggleSection = useCallback( + ( + index: number, + { onOpen, onClose }: Pick, + ): void => { + const isOpen = openSections.includes(index); + if (isOpen) { + setOpenSections(openSections.filter((i) => i !== index)); + onClose?.(); + } else { + setOpenSections(usingLinked ? [index] : [...openSections, index]); + onOpen?.(); + } + }, + [openSections, usingLinked], + ); + + return ( +
+ {React.Children.map(children, (section, sectionIndex) => ( +
+
+ handleToggleSection(sectionIndex, { + onOpen: section?.props.onOpen, + onClose: section?.props.onClose, + }) + } + className={classNames( + accordionTitleClass, + accordionTitleVariants[ + openSections.includes(sectionIndex) ? 'opened' : 'closed' + ], + )} + > + {React.cloneElement( + section as React.ReactElement< + HTMLElement | IAccordionSectionProps, + | string + | React.JSXElementConstructor< + JSX.Element & IAccordionSectionProps + > + >, + { + isOpen: openSections.includes(sectionIndex), + }, + )} +
+ {openSections.includes(sectionIndex) && section && ( +
+ {section.props.children} +
+ )} +
+ ))} +
+ ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/useLinked.ts b/packages/libs/react-ui/src/components/Accordion/useLinked.ts index 804c48e8e5..bae70c042b 100644 --- a/packages/libs/react-ui/src/components/Accordion/useLinked.ts +++ b/packages/libs/react-ui/src/components/Accordion/useLinked.ts @@ -1,16 +1,16 @@ import { useState } from 'react'; interface IUseLinkedReturn { - activeSection: number; - setActiveSection: React.Dispatch>; + openSections: number[]; + setOpenSections: React.Dispatch>; usingLinked: boolean; setUsingLinked: React.Dispatch>; } -const useLinked = (openSection = 0): IUseLinkedReturn => { +const useLinked = (openSection = -1): IUseLinkedReturn => { const [usingLinked, setUsingLinked] = useState(false); - const [activeSection, setActiveSection] = useState(openSection); - return { activeSection, setActiveSection, usingLinked, setUsingLinked }; + const [openSections, setOpenSections] = useState([openSection]); + return { openSections, setOpenSections, usingLinked, setUsingLinked }; }; export default useLinked; From 51b21a0594955ab2743f5b5138e6ab1c4e1b6c5c Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 17 Aug 2023 09:30:09 +0200 Subject: [PATCH 03/32] chore: update accordion implementation [tools app] --- .../Common/Layout/partials/Sidebar/Menu.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx index 61c896f968..49e9df76be 100644 --- a/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx +++ b/packages/apps/tools/src/components/Common/Layout/partials/Sidebar/Menu.tsx @@ -19,14 +19,15 @@ export const Menu: FC = () => { title={activeMenu.title} />
- ({ - title: '', // @todo: fix Type error: Property 'title' does not exist on type 'ISidebarSubMenuItem'. - children: , - })) ?? [] - } - /> + + + {activeMenu.items?.map((item, index) => ( + + + + ))} + +
); }; From 57e767acae5ad97c03301fdd0e2f1e4142fd24fb Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Thu, 17 Aug 2023 11:09:52 +0200 Subject: [PATCH 04/32] chore: explicit type imports everywhere --- .../src/components/Accordion/Accordion.tsx | 3 +- .../components/Accordion/AccordionSection.tsx | 3 +- .../Accordion/AccordionSections.tsx | 8 ++--- .../src/components/Accordion/index.ts | 2 +- .../src/components/Box/Box.stories.tsx | 3 +- .../libs/react-ui/src/components/Box/Box.tsx | 6 ++-- .../src/components/BrandLogo/index.tsx | 3 +- .../components/BrandLogo/variants/Kadena.tsx | 2 +- .../BrandLogo/variants/KadenaDevTools.tsx | 2 +- .../BrandLogo/variants/KadenaDocs.tsx | 2 +- .../Breadcrumbs/Breadcrumbs.stories.tsx | 3 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 5 +-- .../Breadcrumbs/BreadcrumbsItem.tsx | 3 +- .../src/components/Breadcrumbs/index.tsx | 2 +- .../src/components/Button/Button.css.ts | 3 +- .../react-ui/src/components/Button/Button.tsx | 3 +- .../src/components/Button/ButtonIcon.tsx | 3 +- .../src/components/Card/Card.stories.tsx | 3 +- .../react-ui/src/components/Card/Card.tsx | 3 +- .../ContentHeader/ContentHeader.stories.tsx | 3 +- .../ContentHeader/ContentHeader.tsx | 3 +- .../src/components/Divider/Divider.tsx | 3 +- .../src/components/Grid/Grid.stories.tsx | 5 +-- .../react-ui/src/components/Grid/GridItem.tsx | 3 +- .../react-ui/src/components/Grid/GridRoot.tsx | 3 +- .../react-ui/src/components/Grid/index.ts | 2 +- .../src/components/Icon/IconWrapper.tsx | 3 +- .../Icon/Product/ProductIcon.stories.tsx | 3 +- .../Icon/Product/svgs/BlogChain.tsx | 2 +- .../components/Icon/Product/svgs/Chainweb.tsx | 2 +- .../components/Icon/Product/svgs/Concepts.tsx | 2 +- .../Icon/Product/svgs/Contribute.tsx | 2 +- .../Icon/Product/svgs/KadenaOverview.tsx | 2 +- .../Icon/Product/svgs/ManageKda.tsx | 2 +- .../Icon/Product/svgs/Marmalade.tsx | 2 +- .../components/Icon/Product/svgs/Overview.tsx | 2 +- .../Icon/Product/svgs/PactDeveloper.tsx | 2 +- .../Icon/Product/svgs/PactLanguage.tsx | 2 +- .../Icon/Product/svgs/QuickStart.tsx | 2 +- .../components/Icon/Product/svgs/RestApi.tsx | 2 +- .../Icon/Product/svgs/SmartContract.tsx | 2 +- .../components/Icon/Product/svgs/Syntax.tsx | 2 +- .../Icon/Product/svgs/UsefulTools.tsx | 2 +- .../Icon/Product/svgs/Whitepapers.tsx | 2 +- .../Icon/System/SystemIcons.stories.tsx | 3 +- .../components/Icon/System/svgs/Account.tsx | 2 +- .../components/Icon/System/svgs/AlertBox.tsx | 2 +- .../Icon/System/svgs/AlertBoxOutline.tsx | 2 +- .../Icon/System/svgs/AlertCircleOutline.tsx | 2 +- .../Icon/System/svgs/Application.tsx | 2 +- .../Icon/System/svgs/ApplicationBrackets.tsx | 2 +- .../System/svgs/ApplicationCogOutline.tsx | 2 +- .../Icon/System/svgs/ArrowCollapseDown.tsx | 2 +- .../Icon/System/svgs/ArrowExpandUp.tsx | 2 +- .../src/components/Icon/System/svgs/At.tsx | 2 +- .../Icon/System/svgs/Backburger.tsx | 2 +- .../Icon/System/svgs/BadgeAccount.tsx | 2 +- .../src/components/Icon/System/svgs/Bell.tsx | 2 +- .../components/Icon/System/svgs/BellRing.tsx | 2 +- .../Icon/System/svgs/CarBrakeParking.tsx | 2 +- .../src/components/Icon/System/svgs/Check.tsx | 2 +- .../Icon/System/svgs/CheckDecagram.tsx | 2 +- .../Icon/System/svgs/CheckDecagramOutline.tsx | 2 +- .../Icon/System/svgs/CheckboxBlankOutline.tsx | 2 +- .../svgs/CheckboxIntermediateVariant.tsx | 2 +- .../Icon/System/svgs/CheckboxMarked.tsx | 2 +- .../Icon/System/svgs/ChevronDown.tsx | 2 +- .../components/Icon/System/svgs/ChevronUp.tsx | 2 +- .../components/Icon/System/svgs/Circle.tsx | 2 +- .../src/components/Icon/System/svgs/Close.tsx | 2 +- .../src/components/Icon/System/svgs/Code.tsx | 2 +- .../Icon/System/svgs/ContentCopy.tsx | 2 +- .../components/Icon/System/svgs/Cookie.tsx | 2 +- .../components/Icon/System/svgs/Dialpad.tsx | 2 +- .../src/components/Icon/System/svgs/Earth.tsx | 2 +- .../src/components/Icon/System/svgs/Edit.tsx | 2 +- .../Icon/System/svgs/EmailOutline.tsx | 2 +- .../components/Icon/System/svgs/ExitToApp.tsx | 2 +- .../src/components/Icon/System/svgs/Eye.tsx | 2 +- .../Icon/System/svgs/EyeOffOutline.tsx | 2 +- .../Icon/System/svgs/EyeOutline.tsx | 2 +- .../Icon/System/svgs/FlagCheckered.tsx | 2 +- .../Icon/System/svgs/FolderRemoveOutline.tsx | 2 +- .../Icon/System/svgs/FormTextboxPassword.tsx | 2 +- .../components/Icon/System/svgs/Github.tsx | 2 +- .../Icon/System/svgs/HelpCircle.tsx | 2 +- .../components/Icon/System/svgs/History.tsx | 2 +- .../Icon/System/svgs/Information.tsx | 2 +- .../src/components/Icon/System/svgs/KIcon.tsx | 2 +- .../Icon/System/svgs/KeyIconFilled.tsx | 2 +- .../Icon/System/svgs/KeyIconOutlined.tsx | 2 +- .../Icon/System/svgs/LeadingIcon.tsx | 2 +- .../src/components/Icon/System/svgs/Link.tsx | 2 +- .../components/Icon/System/svgs/Linkedin.tsx | 2 +- .../components/Icon/System/svgs/Loading.tsx | 2 +- .../components/Icon/System/svgs/Magnify.tsx | 2 +- .../components/Icon/System/svgs/MapMarker.tsx | 2 +- .../components/Icon/System/svgs/MenuOpen.tsx | 2 +- .../src/components/Icon/System/svgs/Plus.tsx | 2 +- .../Icon/System/svgs/ProgressWrench.tsx | 2 +- .../Icon/System/svgs/QrcodeScan.tsx | 2 +- .../Icon/System/svgs/RadioboxBlank.tsx | 2 +- .../Icon/System/svgs/RadioboxMarked.tsx | 2 +- .../components/Icon/System/svgs/Refresh.tsx | 2 +- .../Icon/System/svgs/ScriptTextKey.tsx | 2 +- .../Icon/System/svgs/ScriptTextKeyNew.tsx | 2 +- .../svgs/ShieldAccountVariantOutline.tsx | 2 +- .../Icon/System/svgs/SignatureFreehand.tsx | 2 +- .../Icon/System/svgs/SlashForward.tsx | 2 +- .../Icon/System/svgs/StopCircle.tsx | 2 +- .../Icon/System/svgs/ThemeLightDark.tsx | 2 +- .../Icon/System/svgs/TrailingIcon.tsx | 2 +- .../Icon/System/svgs/Transition.tsx | 2 +- .../Icon/System/svgs/TransitionMasked.tsx | 2 +- .../components/Icon/System/svgs/TrashCan.tsx | 2 +- .../components/Icon/System/svgs/Twitter.tsx | 2 +- .../Icon/System/svgs/UsbFlashDrive.tsx | 2 +- .../components/IconButton/IconButton.css.ts | 3 +- .../IconButton/IconButton.stories.tsx | 3 +- .../src/components/IconButton/IconButton.tsx | 3 +- .../src/components/Input/Input.stories.tsx | 3 +- .../react-ui/src/components/Input/Input.tsx | 3 +- .../InputWrapper/InputHeader/InputHeader.tsx | 3 +- .../InputWrapper/InputHelper/InputHelper.tsx | 3 +- .../InputWrapper/InputWrapper.stories.tsx | 6 ++-- .../components/InputWrapper/InputWrapper.tsx | 9 +++-- .../src/components/Link/Link.stories.tsx | 5 +-- .../react-ui/src/components/Link/Link.tsx | 3 +- .../MaskedValue/MaskedValue.stories.tsx | 5 +-- .../components/MaskedValue/MaskedValue.tsx | 3 +- .../src/components/Modal/Modal.stories.tsx | 3 +- .../react-ui/src/components/Modal/Modal.tsx | 3 +- .../src/components/Modal/ModalProvider.tsx | 3 +- .../src/components/Modal/StoryComponents.tsx | 3 +- .../NavFooter/NavFooter.stories.tsx | 4 +-- .../components/NavFooter/NavFooter.test.tsx | 3 +- .../src/components/NavFooter/NavFooter.tsx | 5 +-- .../NavFooter/NavFooterIconButton.tsx | 3 +- .../components/NavFooter/NavFooterLink.tsx | 3 +- .../components/NavFooter/NavFooterPanel.tsx | 3 +- .../src/components/NavHeader/NavHeader.tsx | 7 ++-- .../components/NavHeader/NavHeaderContent.tsx | 3 +- .../components/NavHeader/NavHeaderLink.tsx | 5 +-- .../NavHeader/NavHeaderNavigation.tsx | 3 +- .../src/components/NavHeader/assets/glow.tsx | 2 +- .../src/components/NavHeader/index.ts | 2 +- .../Notification/Notification.css.ts | 3 +- .../Notification/Notification.stories.tsx | 3 +- .../Notification/NotificationActions.tsx | 3 +- .../Notification/NotificationButton.tsx | 3 +- .../Notification/NotificationContainer.tsx | 3 +- .../src/components/Notification/index.ts | 2 +- .../src/components/Pagination/PageNav.tsx | 4 +-- .../src/components/Pagination/PageNum.tsx | 3 +- .../Pagination/Pagination.stories.tsx | 3 +- .../src/components/Pagination/Pagination.tsx | 5 +-- .../ProfileCard/ProfileCard.stories.tsx | 3 +- .../components/ProfileCard/ProfileCard.tsx | 3 +- .../src/components/ProfileCard/index.ts | 6 ++-- .../ProgressBar/ProgressBar.stories.tsx | 3 +- .../ProgressBar/ProgressBar.test.tsx | 3 +- .../components/ProgressBar/ProgressBar.tsx | 3 +- .../react-ui/src/components/Select/Option.tsx | 3 +- .../src/components/Select/Select.stories.tsx | 3 +- .../react-ui/src/components/Select/Select.tsx | 3 +- .../src/components/Stack/Stack.stories.tsx | 2 +- .../react-ui/src/components/Stack/Stack.tsx | 6 ++-- .../react-ui/src/components/Table/TBody.tsx | 5 +-- .../react-ui/src/components/Table/THead.tsx | 5 +-- .../src/components/Table/Table.stories.tsx | 3 +- .../react-ui/src/components/Table/Table.tsx | 5 +-- .../libs/react-ui/src/components/Table/Td.tsx | 3 +- .../libs/react-ui/src/components/Table/Th.tsx | 3 +- .../libs/react-ui/src/components/Table/Tr.tsx | 5 +-- .../react-ui/src/components/Table/index.ts | 2 +- .../react-ui/src/components/Table/types.ts | 2 +- .../libs/react-ui/src/components/Tabs/Tab.tsx | 3 +- .../src/components/Tabs/TabContent.tsx | 3 +- .../src/components/Tabs/Tabs.stories.tsx | 3 +- .../src/components/Tabs/TabsContainer.tsx | 3 +- .../react-ui/src/components/Tabs/index.ts | 2 +- .../src/components/Tag/Tag.stories.tsx | 3 +- .../libs/react-ui/src/components/Tag/Tag.tsx | 3 +- .../TextField/TextField.stories.tsx | 5 +-- .../src/components/TextField/TextField.tsx | 9 +++-- .../components/Tooltip/Tooltip.stories.tsx | 3 +- .../TrackerCard/TrackerCard.stories.tsx | 5 +-- .../TrackerCard/TrackerCard.test.tsx | 3 +- .../components/TrackerCard/TrackerCard.tsx | 3 +- .../src/components/Tree/Tree.stories.tsx | 3 +- .../react-ui/src/components/Tree/Tree.tsx | 3 +- .../src/components/Tree/TreeItems.tsx | 3 +- .../Typography/GradientText/GradientText.tsx | 3 +- .../components/Typography/Heading/Heading.tsx | 3 +- .../src/components/Typography/Label/Label.tsx | 3 +- .../src/components/Typography/Text/Text.tsx | 3 +- .../components/Typography/typography.css.ts | 2 +- .../libs/react-ui/src/components/index.ts | 36 +++++++++---------- 198 files changed, 338 insertions(+), 248 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 5e1f879485..85c6be056f 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,6 +1,7 @@ import { IAccordionSectionsProps } from '.'; -import React, { FC, FunctionComponentElement } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React from 'react'; export interface IAccordionRootProps { children?: FunctionComponentElement; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index e14db08d22..cc71818871 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -2,7 +2,8 @@ import { toggleButtonClass } from './Accordion.css'; import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IAccordionSectionProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx index 7d61e68cc5..03a977c4ad 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx @@ -8,12 +8,8 @@ import useLinked from './useLinked'; import { IAccordionSectionProps } from '.'; import classNames from 'classnames'; -import React, { - FC, - FunctionComponentElement, - useCallback, - useEffect, -} from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React, { useCallback, useEffect } from 'react'; export interface IAccordionSectionsProps { children?: FunctionComponentElement[]; diff --git a/packages/libs/react-ui/src/components/Accordion/index.ts b/packages/libs/react-ui/src/components/Accordion/index.ts index d7e05c8d40..286187237c 100644 --- a/packages/libs/react-ui/src/components/Accordion/index.ts +++ b/packages/libs/react-ui/src/components/Accordion/index.ts @@ -5,7 +5,7 @@ import { AccordionSection } from './AccordionSection'; import type { IAccordionSectionsProps } from './AccordionSections'; import { AccordionSections } from './AccordionSections'; -import { FC } from 'react'; +import type { FC } from 'react'; export { IAccordionRootProps, IAccordionSectionProps, IAccordionSectionsProps }; diff --git a/packages/libs/react-ui/src/components/Box/Box.stories.tsx b/packages/libs/react-ui/src/components/Box/Box.stories.tsx index b0bdd7512f..da6f1599da 100644 --- a/packages/libs/react-ui/src/components/Box/Box.stories.tsx +++ b/packages/libs/react-ui/src/components/Box/Box.stories.tsx @@ -1,6 +1,7 @@ import { containerClass, contentClass } from './stories.css'; -import { Box, IBoxProps } from '@components/Box'; +import type { IBoxProps } from '@components/Box'; +import { Box } from '@components/Box'; import type { Meta, StoryObj } from '@storybook/react'; import { vars } from '@theme/vars.css'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Box/Box.tsx b/packages/libs/react-ui/src/components/Box/Box.tsx index 16f0434b38..28130611bd 100644 --- a/packages/libs/react-ui/src/components/Box/Box.tsx +++ b/packages/libs/react-ui/src/components/Box/Box.tsx @@ -1,5 +1,7 @@ -import { Sprinkles, sprinkles } from '@theme/sprinkles.css'; -import React, { createElement, ElementType } from 'react'; +import type { Sprinkles } from '@theme/sprinkles.css'; +import { sprinkles } from '@theme/sprinkles.css'; +import type { ElementType } from 'react'; +import React, { createElement } from 'react'; export interface IBoxProps extends Partial< diff --git a/packages/libs/react-ui/src/components/BrandLogo/index.tsx b/packages/libs/react-ui/src/components/BrandLogo/index.tsx index b5985c0a5a..01e3268fe0 100644 --- a/packages/libs/react-ui/src/components/BrandLogo/index.tsx +++ b/packages/libs/react-ui/src/components/BrandLogo/index.tsx @@ -2,7 +2,8 @@ import { KadenaLogo } from './variants/Kadena'; import { KadenaDevToolsLogo } from './variants/KadenaDevTools'; import { KadenaDocsLogo } from './variants/KadenaDocs'; -import React, { FC, SVGProps } from 'react'; +import type { FC, SVGProps } from 'react'; +import React from 'react'; export type LogoVariant = 'Kadena' | 'DevTools' | 'Docs'; export const logoVariants: LogoVariant[] = ['Kadena', 'DevTools', 'Docs']; diff --git a/packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx b/packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx index 5be8768362..7e377c1776 100644 --- a/packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx +++ b/packages/libs/react-ui/src/components/BrandLogo/variants/Kadena.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; export const KadenaLogo: React.FC> = () => ( > = () => ( > = () => ( []; diff --git a/packages/libs/react-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/libs/react-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 393730ed72..d3c884df0b 100644 --- a/packages/libs/react-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/libs/react-ui/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -1,6 +1,7 @@ import { itemClass, linkClass, spanClass } from './Breadcrumbs.css'; -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface IBreadcrumbItemProps { children?: ReactNode; diff --git a/packages/libs/react-ui/src/components/Breadcrumbs/index.tsx b/packages/libs/react-ui/src/components/Breadcrumbs/index.tsx index f46c87152a..9a02585981 100644 --- a/packages/libs/react-ui/src/components/Breadcrumbs/index.tsx +++ b/packages/libs/react-ui/src/components/Breadcrumbs/index.tsx @@ -3,7 +3,7 @@ import { BreadcrumbsContainer } from './Breadcrumbs'; import type { IBreadcrumbItemProps } from './BreadcrumbsItem'; import { BreadcrumbsItem } from './BreadcrumbsItem'; -import { FC } from 'react'; +import type { FC } from 'react'; interface IBreadcrumbs { Root: FC; diff --git a/packages/libs/react-ui/src/components/Button/Button.css.ts b/packages/libs/react-ui/src/components/Button/Button.css.ts index 1100deed3f..049b4f7042 100644 --- a/packages/libs/react-ui/src/components/Button/Button.css.ts +++ b/packages/libs/react-ui/src/components/Button/Button.css.ts @@ -1,6 +1,7 @@ import { colorPalette } from '@theme/colors'; import { sprinkles } from '@theme/sprinkles.css'; -import { ColorType, darkThemeClass, vars } from '@theme/vars.css'; +import type { ColorType } from '@theme/vars.css'; +import { darkThemeClass, vars } from '@theme/vars.css'; import { createVar, keyframes, diff --git a/packages/libs/react-ui/src/components/Button/Button.tsx b/packages/libs/react-ui/src/components/Button/Button.tsx index 7314c44d2c..c6be46f4b4 100644 --- a/packages/libs/react-ui/src/components/Button/Button.tsx +++ b/packages/libs/react-ui/src/components/Button/Button.tsx @@ -7,7 +7,8 @@ import { ButtonIcon } from './ButtonIcon'; import { SystemIcon } from '@components/Icon'; import cx from 'classnames'; -import React, { ButtonHTMLAttributes, FC } from 'react'; +import type { ButtonHTMLAttributes, FC } from 'react'; +import React from 'react'; export interface IButtonProps extends Omit, 'as' | 'disabled'> { diff --git a/packages/libs/react-ui/src/components/Button/ButtonIcon.tsx b/packages/libs/react-ui/src/components/Button/ButtonIcon.tsx index cd93bc81a4..1c3911221a 100644 --- a/packages/libs/react-ui/src/components/Button/ButtonIcon.tsx +++ b/packages/libs/react-ui/src/components/Button/ButtonIcon.tsx @@ -1,5 +1,6 @@ import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; type IconProps = JSX.IntrinsicElements['i']; export interface IButtonIconProps extends IconProps { diff --git a/packages/libs/react-ui/src/components/Card/Card.stories.tsx b/packages/libs/react-ui/src/components/Card/Card.stories.tsx index d077b470b5..b4cfc3b2e8 100644 --- a/packages/libs/react-ui/src/components/Card/Card.stories.tsx +++ b/packages/libs/react-ui/src/components/Card/Card.stories.tsx @@ -1,5 +1,6 @@ import { Button } from '@components/Button'; -import { Card, ICardProps } from '@components/Card'; +import type { ICardProps } from '@components/Card'; +import { Card } from '@components/Card'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Card/Card.tsx b/packages/libs/react-ui/src/components/Card/Card.tsx index d5eaa76d88..075c0e1067 100644 --- a/packages/libs/react-ui/src/components/Card/Card.tsx +++ b/packages/libs/react-ui/src/components/Card/Card.tsx @@ -6,7 +6,8 @@ import { } from './Card.css'; import className from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ICardChildComponentProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.stories.tsx b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.stories.tsx index bbf0652498..fad36e78ba 100644 --- a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.stories.tsx +++ b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.stories.tsx @@ -1,4 +1,5 @@ -import { ContentHeader, IContentHeaderProps } from '@components/ContentHeader'; +import type { IContentHeaderProps } from '@components/ContentHeader'; +import { ContentHeader } from '@components/ContentHeader'; import { SystemIcon } from '@components/Icon'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx index 567f4eb80e..c4922d42a4 100644 --- a/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx +++ b/packages/libs/react-ui/src/components/ContentHeader/ContentHeader.tsx @@ -2,7 +2,8 @@ import { containerClass, descriptionClass } from './ContentHeader.css'; import { SystemIcon } from '@components/Icon'; import { Heading, Text } from '@components/Typography'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IContentHeaderProps { icon: (typeof SystemIcon)[keyof typeof SystemIcon]; diff --git a/packages/libs/react-ui/src/components/Divider/Divider.tsx b/packages/libs/react-ui/src/components/Divider/Divider.tsx index 7964c8c2dd..d74e988b2f 100644 --- a/packages/libs/react-ui/src/components/Divider/Divider.tsx +++ b/packages/libs/react-ui/src/components/Divider/Divider.tsx @@ -1,6 +1,7 @@ import { dividerClass } from './Divider.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export const Divider: FC = () => { return
; diff --git a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx index dfc56ca668..6d91f582d7 100644 --- a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx +++ b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx @@ -1,5 +1,6 @@ -import { gapVariants, ResponsiveInputType } from './Grid.css'; -import { IGridRootProps } from './GridRoot'; +import type { ResponsiveInputType } from './Grid.css'; +import { gapVariants } from './Grid.css'; +import type { IGridRootProps } from './GridRoot'; import { ContentClass } from './stories.css'; import { Grid } from '@components/Grid'; diff --git a/packages/libs/react-ui/src/components/Grid/GridItem.tsx b/packages/libs/react-ui/src/components/Grid/GridItem.tsx index b0b4f8e29e..ba087498cc 100644 --- a/packages/libs/react-ui/src/components/Grid/GridItem.tsx +++ b/packages/libs/react-ui/src/components/Grid/GridItem.tsx @@ -7,7 +7,8 @@ import { } from './Grid.css'; import classNames from 'classnames'; -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface IGridItemProps { children?: ReactNode; diff --git a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx index 8d16309737..365133f8f3 100644 --- a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx +++ b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx @@ -7,7 +7,8 @@ import { } from './Grid.css'; import classNames from 'classnames'; -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface IGridRootProps { children?: ReactNode; diff --git a/packages/libs/react-ui/src/components/Grid/index.ts b/packages/libs/react-ui/src/components/Grid/index.ts index 838e5b9520..22ffd54b58 100644 --- a/packages/libs/react-ui/src/components/Grid/index.ts +++ b/packages/libs/react-ui/src/components/Grid/index.ts @@ -3,7 +3,7 @@ import GridItem from './GridItem'; import type { IGridRootProps } from './GridRoot'; import GridRoot from './GridRoot'; -import { FC } from 'react'; +import type { FC } from 'react'; export type { IGridRootProps as IGridContainerProps, IGridItemProps }; diff --git a/packages/libs/react-ui/src/components/Icon/IconWrapper.tsx b/packages/libs/react-ui/src/components/Icon/IconWrapper.tsx index 84c5426e94..f69d65f6c5 100644 --- a/packages/libs/react-ui/src/components/Icon/IconWrapper.tsx +++ b/packages/libs/react-ui/src/components/Icon/IconWrapper.tsx @@ -1,7 +1,8 @@ import { iconContainer, sizeVariants } from './IconWrapper.css'; import classNames from 'classnames'; -import React, { SVGProps } from 'react'; +import type { SVGProps } from 'react'; +import React from 'react'; export interface IIconProps { size?: keyof typeof sizeVariants; diff --git a/packages/libs/react-ui/src/components/Icon/Product/ProductIcon.stories.tsx b/packages/libs/react-ui/src/components/Icon/Product/ProductIcon.stories.tsx index 02c7d5db2b..8bdf9395d0 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/ProductIcon.stories.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/ProductIcon.stories.tsx @@ -1,7 +1,8 @@ import { sizeVariants } from '../IconWrapper.css'; import { gridContainer, gridItem } from '../stories.css'; -import { IIconProps, ProductIcon } from '@components/Icon'; +import type { IIconProps } from '@components/Icon'; +import { ProductIcon } from '@components/Icon'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/BlogChain.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/BlogChain.tsx index 146b388387..02b8a9f6c5 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/BlogChain.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/BlogChain.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const BlogChain: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Chainweb.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Chainweb.tsx index edbba3e0b8..d7272b89b8 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Chainweb.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Chainweb.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Chainweb: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Concepts.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Concepts.tsx index 6274e1761d..2eb122f418 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Concepts.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Concepts.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Concepts: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Contribute.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Contribute.tsx index 333131caf0..d0d9b64193 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Contribute.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Contribute.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Contribute: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/KadenaOverview.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/KadenaOverview.tsx index e6fc988678..8d428a5c00 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/KadenaOverview.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/KadenaOverview.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const KadenaOverview: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/ManageKda.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/ManageKda.tsx index 777f9ad56f..62874e373c 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/ManageKda.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/ManageKda.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ManageKda: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Marmalade.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Marmalade.tsx index 6f4b5c4868..49727dc964 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Marmalade.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Marmalade.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Marmalade: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Overview.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Overview.tsx index b3ba2d2359..933f4afd32 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Overview.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Overview.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Overview: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/PactDeveloper.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/PactDeveloper.tsx index cfee623bad..a35af3f486 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/PactDeveloper.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/PactDeveloper.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const PactDeveloper: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/PactLanguage.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/PactLanguage.tsx index 12d409adb8..9bc71a6507 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/PactLanguage.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/PactLanguage.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const PactLanguage: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/QuickStart.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/QuickStart.tsx index 0eac1f4882..201d21cfd1 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/QuickStart.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/QuickStart.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const QuickStart: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/RestApi.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/RestApi.tsx index 6de6d8963a..66918679e3 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/RestApi.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/RestApi.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const RestApi: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/SmartContract.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/SmartContract.tsx index f09d03d5e8..c8a97411a0 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/SmartContract.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/SmartContract.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const SmartContract: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Syntax.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Syntax.tsx index 023d78ef6c..084d4a9073 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Syntax.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Syntax.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Syntax: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/UsefulTools.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/UsefulTools.tsx index 519fd43218..15974ae527 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/UsefulTools.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/UsefulTools.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const UsefulTools: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/Product/svgs/Whitepapers.tsx b/packages/libs/react-ui/src/components/Icon/Product/svgs/Whitepapers.tsx index 4dcdd1b4ae..4584a16565 100644 --- a/packages/libs/react-ui/src/components/Icon/Product/svgs/Whitepapers.tsx +++ b/packages/libs/react-ui/src/components/Icon/Product/svgs/Whitepapers.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Whitepapers: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx b/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx index 1ccacdcd97..1bf3e336d5 100644 --- a/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/SystemIcons.stories.tsx @@ -1,7 +1,8 @@ import { sizeVariants } from '../IconWrapper.css'; import { gridContainer, gridItem } from '../stories.css'; -import { IIconProps, SystemIcon } from '@components/Icon'; +import type { IIconProps } from '@components/Icon'; +import { SystemIcon } from '@components/Icon'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Account.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Account.tsx index 6045b9836c..464efde7a3 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Account.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Account.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Account: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBox.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBox.tsx index a012d0fc03..bfa75cfb5e 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBox.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBox.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const AlertBox: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBoxOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBoxOutline.tsx index cc48d6c233..e6add70e00 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBoxOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertBoxOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const AlertBoxOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertCircleOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertCircleOutline.tsx index b7593b6f16..d3155e0712 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/AlertCircleOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/AlertCircleOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const AlertCircleOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Application.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Application.tsx index b58650ce7f..f12a6da101 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Application.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Application.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Application: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationBrackets.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationBrackets.tsx index f071d88e44..1641f6f1a9 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationBrackets.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationBrackets.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ApplicationBrackets: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationCogOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationCogOutline.tsx index ed056b208e..406a053c91 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationCogOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ApplicationCogOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ApplicationCogOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowCollapseDown.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowCollapseDown.tsx index 26a4f97c22..d226fc7d05 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowCollapseDown.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowCollapseDown.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ArrowCollapseDown: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowExpandUp.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowExpandUp.tsx index 5bf7cf0cb5..35441e4506 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowExpandUp.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ArrowExpandUp.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ArrowExpandUp: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/At.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/At.tsx index 14c4972255..f3298e9777 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/At.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/At.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const At: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Backburger.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Backburger.tsx index b16088a48f..f8b4e1a18c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Backburger.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Backburger.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Backburger: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/BadgeAccount.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/BadgeAccount.tsx index 336911ee52..b718f24ea5 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/BadgeAccount.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/BadgeAccount.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const BadgeAccount: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Bell.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Bell.tsx index 67c593e620..138b1f8c3e 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Bell.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Bell.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Bell: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/BellRing.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/BellRing.tsx index 72ff2fefcc..ea9d748d90 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/BellRing.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/BellRing.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const BellRing: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CarBrakeParking.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CarBrakeParking.tsx index 09a69fcf02..9d077a199c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CarBrakeParking.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CarBrakeParking.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CarBrakeParking: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Check.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Check.tsx index d6a501bd2c..053196271b 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Check.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Check.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Check: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagram.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagram.tsx index cf4028dc25..1c0d2e5847 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagram.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagram.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CheckDecagram: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagramOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagramOutline.tsx index a7df3a9d94..ab9fa1967b 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagramOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckDecagramOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CheckDecagramOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxBlankOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxBlankOutline.tsx index e4e9f68943..c534b28d0b 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxBlankOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxBlankOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CheckboxBlankOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxIntermediateVariant.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxIntermediateVariant.tsx index a455b92daa..6f8158f7d9 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxIntermediateVariant.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxIntermediateVariant.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CheckboxIntermediateVariant: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxMarked.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxMarked.tsx index d3df867f54..2f605cad0e 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxMarked.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/CheckboxMarked.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const CheckboxMarked: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronDown.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronDown.tsx index f1d33bba8e..6b56e2b974 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronDown.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronDown.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ChevronDown: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronUp.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronUp.tsx index a4895f76a6..0a98639bec 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronUp.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ChevronUp.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ChevronUp: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Circle.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Circle.tsx index a8d1c64170..9610fc1849 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Circle.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Circle.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Circle: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Close.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Close.tsx index 9a8b6ae907..5620d912f2 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Close.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Close.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Close: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Code.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Code.tsx index 378047e9e9..1dfa444557 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Code.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Code.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Code: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ContentCopy.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ContentCopy.tsx index 928e7f659a..ec52f01664 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ContentCopy.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ContentCopy.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ContentCopy: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Cookie.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Cookie.tsx index a87c4a2dbe..24e737910f 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Cookie.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Cookie.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Cookie: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Dialpad.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Dialpad.tsx index 72cea37e43..88a50343df 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Dialpad.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Dialpad.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Dialpad: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Earth.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Earth.tsx index dc6b421d16..0a36423905 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Earth.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Earth.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Earth: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Edit.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Edit.tsx index a83a55f478..44aa862b97 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Edit.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Edit.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; export const Edit: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/EmailOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/EmailOutline.tsx index 2c4dfbca19..a0e1e537b6 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/EmailOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/EmailOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const EmailOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ExitToApp.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ExitToApp.tsx index e17a8703f1..1c2d33c4ef 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ExitToApp.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ExitToApp.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ExitToApp: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Eye.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Eye.tsx index 324422ad04..875d2f5772 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Eye.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Eye.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Eye: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOffOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOffOutline.tsx index b76fc30fdf..35408e872e 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOffOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOffOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const EyeOffOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOutline.tsx index 1bbfc6c757..dd68126751 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/EyeOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const EyeOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/FlagCheckered.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/FlagCheckered.tsx index a91a8d8a58..78d7d6f436 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/FlagCheckered.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/FlagCheckered.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const FlagCheckered: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/FolderRemoveOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/FolderRemoveOutline.tsx index 12a9593f48..7d7255e70c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/FolderRemoveOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/FolderRemoveOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const FolderRemoveOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/FormTextboxPassword.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/FormTextboxPassword.tsx index 4b94e987bc..ce77a1200d 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/FormTextboxPassword.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/FormTextboxPassword.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const FormTextboxPassword: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Github.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Github.tsx index 5a74159114..bf8eb77da3 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Github.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Github.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Github: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/HelpCircle.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/HelpCircle.tsx index 56329a5e97..b94cf4146a 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/HelpCircle.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/HelpCircle.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const HelpCircle: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/History.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/History.tsx index 01393dab40..88a5ead98d 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/History.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/History.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const History: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Information.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Information.tsx index 7ea75fc91f..4a8ab5aa40 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Information.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Information.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Information: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/KIcon.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/KIcon.tsx index a10d4c3f29..83fb4fc4cc 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/KIcon.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/KIcon.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const KIcon: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconFilled.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconFilled.tsx index a8bf21504d..98b9e7aad7 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconFilled.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconFilled.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const KeyIconFilled: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconOutlined.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconOutlined.tsx index d84c5f827e..d13bd1bd25 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconOutlined.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/KeyIconOutlined.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const KeyIconOutlined: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/LeadingIcon.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/LeadingIcon.tsx index a76ab21132..edb5c9ff6c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/LeadingIcon.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/LeadingIcon.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const LeadingIcon: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Link.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Link.tsx index 2af6fb5087..048eae8ab6 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Link.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Link.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Link: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Linkedin.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Linkedin.tsx index 4e533be1c4..992368fed4 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Linkedin.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Linkedin.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Linkedin: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Loading.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Loading.tsx index f55ef71267..e3e9d7e4de 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Loading.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Loading.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Loading: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Magnify.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Magnify.tsx index 408a48835a..8195c8a085 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Magnify.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Magnify.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Magnify: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/MapMarker.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/MapMarker.tsx index 1ecdd66990..e8a4a520b7 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/MapMarker.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/MapMarker.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const MapMarker: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/MenuOpen.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/MenuOpen.tsx index 24543acd3f..7b9f1f700d 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/MenuOpen.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/MenuOpen.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const MenuOpen: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Plus.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Plus.tsx index 30c8be4e37..8980d41f1d 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Plus.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Plus.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Plus: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ProgressWrench.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ProgressWrench.tsx index 2847371d51..5cb695a6b1 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ProgressWrench.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ProgressWrench.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ProgressWrench: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/QrcodeScan.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/QrcodeScan.tsx index 2f82cf5b25..0436ec0e02 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/QrcodeScan.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/QrcodeScan.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const QrcodeScan: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxBlank.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxBlank.tsx index 2e89e1d880..4d1faf8917 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxBlank.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxBlank.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const RadioboxBlank: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxMarked.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxMarked.tsx index d5ecd2bccc..5b0b17d30a 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxMarked.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/RadioboxMarked.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const RadioboxMarked: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Refresh.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Refresh.tsx index 23da249dd0..9fc3be2a56 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Refresh.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Refresh.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Refresh: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKey.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKey.tsx index 42af57684e..7c4d24b517 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKey.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKey.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ScriptTextKey: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKeyNew.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKeyNew.tsx index 42d422e03e..fd94f3917a 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKeyNew.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ScriptTextKeyNew.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ScriptTextKeyNew: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ShieldAccountVariantOutline.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ShieldAccountVariantOutline.tsx index 64e17467f6..5a6a4d8560 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ShieldAccountVariantOutline.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ShieldAccountVariantOutline.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ShieldAccountVariantOutline: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/SignatureFreehand.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/SignatureFreehand.tsx index 5b5fd700dd..1ac11a6a7c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/SignatureFreehand.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/SignatureFreehand.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const SignatureFreehand: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/SlashForward.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/SlashForward.tsx index 34e7eefe47..c4444cca52 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/SlashForward.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/SlashForward.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const SlashForward: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/StopCircle.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/StopCircle.tsx index 795087ea69..79d38c9da4 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/StopCircle.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/StopCircle.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const StopCircle: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/ThemeLightDark.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/ThemeLightDark.tsx index 7097da50c8..5253e5c988 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/ThemeLightDark.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/ThemeLightDark.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const ThemeLightDark: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/TrailingIcon.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/TrailingIcon.tsx index d81f5a4149..141ab9bccc 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/TrailingIcon.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/TrailingIcon.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const TrailingIcon: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Transition.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Transition.tsx index 3efb06df54..c6b86a8cdf 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Transition.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Transition.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Transition: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/TransitionMasked.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/TransitionMasked.tsx index 1f630d3764..96184f0b9c 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/TransitionMasked.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/TransitionMasked.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const TransitionMasked: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/TrashCan.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/TrashCan.tsx index 0a1525d990..b440eff37e 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/TrashCan.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/TrashCan.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const TrashCan: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/Twitter.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/Twitter.tsx index 472437d3ce..9149014d77 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/Twitter.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/Twitter.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const Twitter: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/Icon/System/svgs/UsbFlashDrive.tsx b/packages/libs/react-ui/src/components/Icon/System/svgs/UsbFlashDrive.tsx index 48c89fa44a..307a73060a 100644 --- a/packages/libs/react-ui/src/components/Icon/System/svgs/UsbFlashDrive.tsx +++ b/packages/libs/react-ui/src/components/Icon/System/svgs/UsbFlashDrive.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; const UsbFlashDrive: React.FC> = ( props: SVGProps, diff --git a/packages/libs/react-ui/src/components/IconButton/IconButton.css.ts b/packages/libs/react-ui/src/components/IconButton/IconButton.css.ts index 52591c9cd5..c038aaea91 100644 --- a/packages/libs/react-ui/src/components/IconButton/IconButton.css.ts +++ b/packages/libs/react-ui/src/components/IconButton/IconButton.css.ts @@ -1,5 +1,6 @@ import { sprinkles } from '@theme/sprinkles.css'; -import { ColorType, vars } from '@theme/vars.css'; +import type { ColorType } from '@theme/vars.css'; +import { vars } from '@theme/vars.css'; import { style, styleVariants } from '@vanilla-extract/css'; export const container = style([ diff --git a/packages/libs/react-ui/src/components/IconButton/IconButton.stories.tsx b/packages/libs/react-ui/src/components/IconButton/IconButton.stories.tsx index 4808a1e83d..c3c3461b57 100644 --- a/packages/libs/react-ui/src/components/IconButton/IconButton.stories.tsx +++ b/packages/libs/react-ui/src/components/IconButton/IconButton.stories.tsx @@ -1,7 +1,8 @@ import { colorVariants } from './IconButton.css'; import { SystemIcon } from '@components/Icon'; -import { IconButton, IIconButtonProps } from '@components/IconButton'; +import type { IIconButtonProps } from '@components/IconButton'; +import { IconButton } from '@components/IconButton'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/IconButton/IconButton.tsx b/packages/libs/react-ui/src/components/IconButton/IconButton.tsx index 796a1349bd..979b880a52 100644 --- a/packages/libs/react-ui/src/components/IconButton/IconButton.tsx +++ b/packages/libs/react-ui/src/components/IconButton/IconButton.tsx @@ -1,7 +1,8 @@ import { colorVariants } from './IconButton.css'; import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IIconButtonProps extends Omit, 'color'> { diff --git a/packages/libs/react-ui/src/components/Input/Input.stories.tsx b/packages/libs/react-ui/src/components/Input/Input.stories.tsx index d1b1cb81cb..fc391a6910 100644 --- a/packages/libs/react-ui/src/components/Input/Input.stories.tsx +++ b/packages/libs/react-ui/src/components/Input/Input.stories.tsx @@ -1,6 +1,7 @@ import { Button } from '@components/Button'; import { SystemIcon } from '@components/Icon'; -import { IInputProps, Input } from '@components/Input'; +import type { IInputProps } from '@components/Input'; +import { Input } from '@components/Input'; import { Stack } from '@components/Stack'; import type { Meta, StoryObj } from '@storybook/react'; import { vars } from '@theme/vars.css'; diff --git a/packages/libs/react-ui/src/components/Input/Input.tsx b/packages/libs/react-ui/src/components/Input/Input.tsx index fecc6951bc..3d54061e52 100644 --- a/packages/libs/react-ui/src/components/Input/Input.tsx +++ b/packages/libs/react-ui/src/components/Input/Input.tsx @@ -10,7 +10,8 @@ import { import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, forwardRef, InputHTMLAttributes } from 'react'; +import type { FC, InputHTMLAttributes } from 'react'; +import React, { forwardRef } from 'react'; import { vars } from 'src/styles'; export interface IInputProps diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputHeader/InputHeader.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputHeader/InputHeader.tsx index 67ec15f848..d67e9e96b3 100644 --- a/packages/libs/react-ui/src/components/InputWrapper/InputHeader/InputHeader.tsx +++ b/packages/libs/react-ui/src/components/InputWrapper/InputHeader/InputHeader.tsx @@ -2,7 +2,8 @@ import { headerClass, infoClass, tagClass } from './InputHeader.css'; import { SystemIcon } from '@components/Icon'; import { Label } from '@components/Typography/Label/Label'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IInputHeaderProps { label: string; diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputHelper/InputHelper.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputHelper/InputHelper.tsx index 2003a1c094..c3ea321746 100644 --- a/packages/libs/react-ui/src/components/InputWrapper/InputHelper/InputHelper.tsx +++ b/packages/libs/react-ui/src/components/InputWrapper/InputHelper/InputHelper.tsx @@ -1,7 +1,8 @@ import { helperClass, helperIconClass } from './InputHelper.css'; import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IInputHelperProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx index 84039700b4..131176bba6 100644 --- a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx +++ b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx @@ -1,8 +1,10 @@ import { statusVariant } from './InputWrapper.css'; import { SystemIcon } from '@components/Icon'; -import { IInputProps, Input } from '@components/Input'; -import { IInputWrapperProps, InputWrapper } from '@components/InputWrapper'; +import type { IInputProps } from '@components/Input'; +import { Input } from '@components/Input'; +import type { IInputWrapperProps } from '@components/InputWrapper'; +import { InputWrapper } from '@components/InputWrapper'; import type { Meta, StoryObj } from '@storybook/react'; import { vars } from '@theme/vars.css'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx index 1ba7c2b0b3..8e3848324b 100644 --- a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx +++ b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.tsx @@ -1,9 +1,12 @@ -import { IInputHeaderProps, InputHeader } from './InputHeader/InputHeader'; +import type { IInputHeaderProps } from './InputHeader/InputHeader'; +import { InputHeader } from './InputHeader/InputHeader'; import { InputHelper } from './InputHelper/InputHelper'; -import { Status, statusVariant } from './InputWrapper.css'; +import type { Status } from './InputWrapper.css'; +import { statusVariant } from './InputWrapper.css'; import { IInputProps } from '@components/Input'; -import React, { FC, FunctionComponentElement } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React from 'react'; import { vars } from 'src/styles'; export interface IInputWrapperProps extends Omit { diff --git a/packages/libs/react-ui/src/components/Link/Link.stories.tsx b/packages/libs/react-ui/src/components/Link/Link.stories.tsx index b826e22725..412f9d8de6 100644 --- a/packages/libs/react-ui/src/components/Link/Link.stories.tsx +++ b/packages/libs/react-ui/src/components/Link/Link.stories.tsx @@ -1,7 +1,8 @@ import { SystemIcon } from '../Icon'; -import { ILinkProps, Link } from '@components/Link'; -import { Meta, StoryObj } from '@storybook/react'; +import type { ILinkProps } from '@components/Link'; +import { Link } from '@components/Link'; +import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; const meta: Meta< diff --git a/packages/libs/react-ui/src/components/Link/Link.tsx b/packages/libs/react-ui/src/components/Link/Link.tsx index 6d1b8ca66a..458119d779 100644 --- a/packages/libs/react-ui/src/components/Link/Link.tsx +++ b/packages/libs/react-ui/src/components/Link/Link.tsx @@ -2,7 +2,8 @@ import { SystemIcon } from '..'; import { linkContainerClass } from './Link.css'; -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface ILinkProps { href: string; diff --git a/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.stories.tsx b/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.stories.tsx index 10ed75b4e8..79c7b66e77 100644 --- a/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.stories.tsx +++ b/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.stories.tsx @@ -1,6 +1,7 @@ -import { IMaskedValueProps, MaskedValue } from './MaskedValue'; +import type { IMaskedValueProps } from './MaskedValue'; +import { MaskedValue } from './MaskedValue'; -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; const meta: Meta = { diff --git a/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.tsx b/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.tsx index f1d0da27bc..57c2353115 100644 --- a/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.tsx +++ b/packages/libs/react-ui/src/components/MaskedValue/MaskedValue.tsx @@ -6,7 +6,8 @@ import { } from './MaskedValue.css'; import { SystemIcon } from '@components/Icon'; -import React, { FC, useState } from 'react'; +import type { FC } from 'react'; +import React, { useState } from 'react'; export interface IMaskedValueProps { title?: string; diff --git a/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx b/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx index 976d2ccdac..8e391caf9a 100644 --- a/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx +++ b/packages/libs/react-ui/src/components/Modal/Modal.stories.tsx @@ -1,6 +1,7 @@ import { Content } from './StoryComponents'; -import { IModalProps, ModalProvider } from '@components/Modal'; +import type { IModalProps } from '@components/Modal'; +import { ModalProvider } from '@components/Modal'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Modal/Modal.tsx b/packages/libs/react-ui/src/components/Modal/Modal.tsx index e6b74c7e17..29ba5da40b 100644 --- a/packages/libs/react-ui/src/components/Modal/Modal.tsx +++ b/packages/libs/react-ui/src/components/Modal/Modal.tsx @@ -11,7 +11,8 @@ import { Card } from '@components/Card'; import { SystemIcon } from '@components/Icon'; import { Heading } from '@components/Typography/Heading/Heading'; import FocusTrap from 'focus-trap-react'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IModalProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Modal/ModalProvider.tsx b/packages/libs/react-ui/src/components/Modal/ModalProvider.tsx index 4b33c04007..722e5b1ce8 100644 --- a/packages/libs/react-ui/src/components/Modal/ModalProvider.tsx +++ b/packages/libs/react-ui/src/components/Modal/ModalProvider.tsx @@ -1,10 +1,9 @@ import { Modal } from './Modal'; import { openModal } from './Modal.css'; +import type { FC, ReactNode } from 'react'; import React, { createContext, - FC, - ReactNode, useCallback, useContext, useEffect, diff --git a/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx b/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx index 3696055ae4..9db7ef1a5b 100644 --- a/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx +++ b/packages/libs/react-ui/src/components/Modal/StoryComponents.tsx @@ -2,7 +2,8 @@ import { useModal } from './ModalProvider'; import { Button } from '@components/Button'; import { Text } from '@components/Typography/Text/Text'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; const ModalContent: FC = () => { return ( diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx index 1ceb7fedb1..4f052f101b 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooter.stories.tsx @@ -1,7 +1,7 @@ -import { Target } from './NavFooterLink'; +import type { Target } from './NavFooterLink'; import { SystemIcon } from '@components/Icon'; -import { IconType } from '@components/Icon/IconWrapper'; +import type { IconType } from '@components/Icon/IconWrapper'; import { NavFooter } from '@components/NavFooter'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx index c8dd2f478d..f2a427ced0 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooter.test.tsx @@ -1,7 +1,8 @@ import { SystemIcon } from '@components/Icon'; import { NavFooter } from '@components/NavFooter'; import { render } from '@testing-library/react'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; const menuLinks: { label: string; href?: string }[] = [ { diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx index 5eec6d33ed..ded0b4f1fc 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooter.tsx @@ -1,8 +1,9 @@ import { containerClass } from './NavFooter.css'; -import { INavFooterPanelProps } from './NavFooterPanel'; +import type { INavFooterPanelProps } from './NavFooterPanel'; import { darkThemeClass } from '@theme/vars.css'; -import React, { FC, FunctionComponentElement } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React from 'react'; export interface INavFooterRootProps { children: FunctionComponentElement[]; diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx index df965b5133..35e51a262a 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooterIconButton.tsx @@ -2,7 +2,8 @@ import { SystemIcon } from '..'; import { iconButtonClass, iconTextClass } from './NavFooter.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface INavFooterIconButtonProps extends Omit, 'color'> { diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx index ae2df97604..2c5d8fe605 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooterLink.tsx @@ -1,7 +1,8 @@ import { linkBoxClass, linkClass } from './NavFooter.css'; import classNames from 'classnames'; -import React, { FC, HTMLAttributeAnchorTarget } from 'react'; +import type { FC, HTMLAttributeAnchorTarget } from 'react'; +import React from 'react'; export type Target = '_self' | '_blank'; export interface INavFooterLinkProps { diff --git a/packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx b/packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx index 77afb39fca..f461b82a59 100644 --- a/packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx +++ b/packages/libs/react-ui/src/components/NavFooter/NavFooterPanel.tsx @@ -2,7 +2,8 @@ import { footerPanel } from './NavFooter.css'; import { INavFooterIconButtonProps } from './NavFooterIconButton'; import { INavFooterLinkProps } from './NavFooterLink'; -import React, { FC, FunctionComponentElement } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React from 'react'; export interface INavFooterPanelProps { children: FunctionComponentElement< diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx index 3e72af17b0..56f3b9a036 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.tsx @@ -1,11 +1,12 @@ import { containerClass, logoClass } from './NavHeader.css'; -import { INavHeaderContentProps } from './NavHeaderContent'; -import { INavHeaderNavigationProps } from './NavHeaderNavigation'; +import type { INavHeaderContentProps } from './NavHeaderContent'; +import type { INavHeaderNavigationProps } from './NavHeaderNavigation'; import type { LogoVariant } from '@components/BrandLogo'; import Logo, { logoVariants } from '@components/BrandLogo'; import { Link } from '@components/Link'; -import React, { FC, FunctionComponentElement } from 'react'; +import type { FC, FunctionComponentElement } from 'react'; +import React from 'react'; export type INavItemTarget = '_self' | '_blank'; export interface INavItem { diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx index 55e03db519..7b59f4dae9 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderContent.tsx @@ -1,6 +1,7 @@ import { childrenClass } from './NavHeader.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface INavHeaderContentProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx index 39104496ae..292dd49dd8 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderLink.tsx @@ -1,8 +1,9 @@ import { activeLinkClass, linkClass } from './NavHeader.css'; -import { INavItem } from './NavHeaderNavigation'; +import type { INavItem } from './NavHeaderNavigation'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export const NavHeaderLink: FC = ({ active, diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index ed9e7d42d5..3ca520df2d 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -9,11 +9,12 @@ import { import useGlow from './useGlow'; import classNames from 'classnames'; -import React, { +import type { FC, FunctionComponentElement, HTMLAttributeAnchorTarget, } from 'react'; +import React from 'react'; export interface INavItem { active?: boolean; diff --git a/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx index b07b9255ae..74edf36049 100644 --- a/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/assets/glow.tsx @@ -1,5 +1,5 @@ +import type { SVGProps } from 'react'; import * as React from 'react'; -import { SVGProps } from 'react'; export const NavGlow: React.FC> = () => ( = { diff --git a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx index a6569a167b..be97394ed8 100644 --- a/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx +++ b/packages/libs/react-ui/src/components/Notification/Notification.stories.tsx @@ -1,7 +1,8 @@ import { cardColorVariants } from './Notification.css'; import { SystemIcon } from '@components/Icon'; -import { INotificationProps, Notification } from '@components/Notification'; +import type { INotificationProps } from '@components/Notification'; +import { Notification } from '@components/Notification'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx b/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx index db328f231f..6bfc8d2ca0 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationActions.tsx @@ -1,6 +1,7 @@ import { actionsContainerClass } from './Notification.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface INotificationActionsProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx b/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx index 07ded46232..ccee82844c 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationButton.tsx @@ -1,7 +1,8 @@ import { actionButtonColorVariants } from './Notification.css'; import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface INotificationButtonProps { icon: (typeof SystemIcon)[keyof typeof SystemIcon]; diff --git a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx b/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx index 62310a15de..85828bb850 100644 --- a/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx +++ b/packages/libs/react-ui/src/components/Notification/NotificationContainer.tsx @@ -9,7 +9,8 @@ import { import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface INotificationProps { icon?: (typeof SystemIcon)[keyof typeof SystemIcon]; diff --git a/packages/libs/react-ui/src/components/Notification/index.ts b/packages/libs/react-ui/src/components/Notification/index.ts index 7245072cf9..c37fd314ad 100644 --- a/packages/libs/react-ui/src/components/Notification/index.ts +++ b/packages/libs/react-ui/src/components/Notification/index.ts @@ -5,7 +5,7 @@ import { NotificationButton } from './NotificationButton'; import type { INotificationProps } from './NotificationContainer'; import { NotificationContainer } from './NotificationContainer'; -import { FC } from 'react'; +import type { FC } from 'react'; export type { INotificationProps, diff --git a/packages/libs/react-ui/src/components/Pagination/PageNav.tsx b/packages/libs/react-ui/src/components/Pagination/PageNav.tsx index aa927ffe90..f3709ea89a 100644 --- a/packages/libs/react-ui/src/components/Pagination/PageNav.tsx +++ b/packages/libs/react-ui/src/components/Pagination/PageNav.tsx @@ -1,8 +1,8 @@ import { pageNavButtonClass, pageNavLabelClass } from './Pagination.css'; -import { Box } from '@components/Box'; import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; interface IPageNavProps { label: string; diff --git a/packages/libs/react-ui/src/components/Pagination/PageNum.tsx b/packages/libs/react-ui/src/components/Pagination/PageNum.tsx index e3860044dd..1d2e9938f1 100644 --- a/packages/libs/react-ui/src/components/Pagination/PageNum.tsx +++ b/packages/libs/react-ui/src/components/Pagination/PageNum.tsx @@ -1,7 +1,8 @@ import { pageNumButtonClass } from './Pagination.css'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; interface IPageNumProps { number: number; diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx index 494f230f09..02216d2e40 100644 --- a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx +++ b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx @@ -1,5 +1,6 @@ import { SystemIcon } from '@components/Icon'; -import { IPaginationProps, Pagination } from '@components/Pagination'; +import type { IPaginationProps } from '@components/Pagination'; +import { Pagination } from '@components/Pagination'; import { Stack } from '@components/Stack'; import { Heading } from '@components/Typography'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx index ea2c340d90..612d9b460e 100644 --- a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx +++ b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx @@ -3,7 +3,8 @@ import { PageNum } from './PageNum'; import { paginate } from './paginate'; import { listClass } from './Pagination.css'; -import React, { FC, useState } from 'react'; +import type { FC } from 'react'; +import React, { useState } from 'react'; export interface IPaginationProps { totalPages: number; @@ -30,7 +31,7 @@ export const Pagination: FC = ({ const enablePrevious = page > 1; const enableNext = page < totalPages; - const onClick = (page: number) => { + const onClick = (page: number): void => { setPage(page); onPageChange(page); }; diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx index 0acfed8f74..a39117030a 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.stories.tsx @@ -1,5 +1,6 @@ import { Grid } from '@components/Grid'; -import { IProfileCardProps, ProfileCard } from '@components/ProfileCard'; +import type { IProfileCardProps } from '@components/ProfileCard'; +import { ProfileCard } from '@components/ProfileCard'; import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx index 583cf3a16e..4dd12a13e7 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx +++ b/packages/libs/react-ui/src/components/ProfileCard/ProfileCard.tsx @@ -11,7 +11,8 @@ import { import { Grid } from '@components/Grid'; import { Tag } from '@components/Tag'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export default {}; export interface IProfileCardProps { diff --git a/packages/libs/react-ui/src/components/ProfileCard/index.ts b/packages/libs/react-ui/src/components/ProfileCard/index.ts index 6d091e05db..5debf0ba5b 100644 --- a/packages/libs/react-ui/src/components/ProfileCard/index.ts +++ b/packages/libs/react-ui/src/components/ProfileCard/index.ts @@ -1,4 +1,2 @@ -import type { IProfileCardProps } from './ProfileCard'; -import { ProfileCard } from './ProfileCard'; - -export { IProfileCardProps, ProfileCard }; +export type { IProfileCardProps } from './ProfileCard'; +export { ProfileCard } from './ProfileCard'; diff --git a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.stories.tsx index 4f11ad8318..62b9c9ab31 100644 --- a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.stories.tsx +++ b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.stories.tsx @@ -1,4 +1,5 @@ -import { ICheckpoint, IProgressBarProps, ProgressBar } from './ProgressBar'; +import type { ICheckpoint, IProgressBarProps } from './ProgressBar'; +import { ProgressBar } from './ProgressBar'; import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.test.tsx b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.test.tsx index 68d3ffac01..69123fa7b5 100644 --- a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.test.tsx +++ b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.test.tsx @@ -1,4 +1,5 @@ -import { ICheckpoint, ProgressBar } from './ProgressBar'; +import type { ICheckpoint } from './ProgressBar'; +import { ProgressBar } from './ProgressBar'; import { render, screen } from '@testing-library/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.tsx b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.tsx index 52150780ce..d1ae5701bd 100644 --- a/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/libs/react-ui/src/components/ProgressBar/ProgressBar.tsx @@ -11,7 +11,8 @@ import { } from './ProgressBar.css'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IProgressBarProps { checkpoints: ICheckpoint[]; diff --git a/packages/libs/react-ui/src/components/Select/Option.tsx b/packages/libs/react-ui/src/components/Select/Option.tsx index 603642ab5d..db2f026210 100644 --- a/packages/libs/react-ui/src/components/Select/Option.tsx +++ b/packages/libs/react-ui/src/components/Select/Option.tsx @@ -1,6 +1,7 @@ import { optionClass } from './Select.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IOptionProps extends Omit, 'as'> { diff --git a/packages/libs/react-ui/src/components/Select/Select.stories.tsx b/packages/libs/react-ui/src/components/Select/Select.stories.tsx index 2bfe4c6ebf..1cb7dc553b 100644 --- a/packages/libs/react-ui/src/components/Select/Select.stories.tsx +++ b/packages/libs/react-ui/src/components/Select/Select.stories.tsx @@ -1,5 +1,6 @@ import { Option } from './Option'; -import { ISelectProps, Select } from './Select'; +import type { ISelectProps } from './Select'; +import { Select } from './Select'; import { SystemIcon } from '@components/Icon'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/packages/libs/react-ui/src/components/Select/Select.tsx b/packages/libs/react-ui/src/components/Select/Select.tsx index bb73b07bb5..b69b8e00b9 100644 --- a/packages/libs/react-ui/src/components/Select/Select.tsx +++ b/packages/libs/react-ui/src/components/Select/Select.tsx @@ -8,7 +8,8 @@ import { import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, forwardRef } from 'react'; +import type { FC } from 'react'; +import React, { forwardRef } from 'react'; export interface ISelectProps extends Omit< diff --git a/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx b/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx index b1dcd176b9..10894ff605 100644 --- a/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx +++ b/packages/libs/react-ui/src/components/Stack/Stack.stories.tsx @@ -2,7 +2,7 @@ import { itemClass, itemSizeClass } from './stories.css'; import { Stack } from '@components/Stack'; import type { Meta, StoryObj } from '@storybook/react'; -import { Sprinkles } from '@theme/sprinkles.css'; +import type { Sprinkles } from '@theme/sprinkles.css'; import { vars } from '@theme/vars.css'; import className from 'classnames'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Stack/Stack.tsx b/packages/libs/react-ui/src/components/Stack/Stack.tsx index 9f289da7ae..8a90f6232c 100644 --- a/packages/libs/react-ui/src/components/Stack/Stack.tsx +++ b/packages/libs/react-ui/src/components/Stack/Stack.tsx @@ -1,5 +1,7 @@ -import { Sprinkles, sprinkles } from '@theme/sprinkles.css'; -import React, { createElement, ElementType } from 'react'; +import type { Sprinkles } from '@theme/sprinkles.css'; +import { sprinkles } from '@theme/sprinkles.css'; +import type { ElementType } from 'react'; +import React, { createElement } from 'react'; export interface IStackProps extends Pick< diff --git a/packages/libs/react-ui/src/components/Table/TBody.tsx b/packages/libs/react-ui/src/components/Table/TBody.tsx index 40d6809691..109008eec3 100644 --- a/packages/libs/react-ui/src/components/Table/TBody.tsx +++ b/packages/libs/react-ui/src/components/Table/TBody.tsx @@ -1,7 +1,8 @@ import { Tr } from './Tr'; -import { CompoundType } from './types'; +import type { CompoundType } from './types'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITBodyProps { children?: CompoundType; diff --git a/packages/libs/react-ui/src/components/Table/THead.tsx b/packages/libs/react-ui/src/components/Table/THead.tsx index 25248b2082..c819f806f1 100644 --- a/packages/libs/react-ui/src/components/Table/THead.tsx +++ b/packages/libs/react-ui/src/components/Table/THead.tsx @@ -1,7 +1,8 @@ import { Tr } from './Tr'; -import { CompoundType } from './types'; +import type { CompoundType } from './types'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITHeadProps { children?: CompoundType; diff --git a/packages/libs/react-ui/src/components/Table/Table.stories.tsx b/packages/libs/react-ui/src/components/Table/Table.stories.tsx index 8b72c15cdb..83bb31283d 100644 --- a/packages/libs/react-ui/src/components/Table/Table.stories.tsx +++ b/packages/libs/react-ui/src/components/Table/Table.stories.tsx @@ -1,4 +1,5 @@ -import { ITableProps, Table } from '@components/Table'; +import type { ITableProps } from '@components/Table'; +import { Table } from '@components/Table'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Table/Table.tsx b/packages/libs/react-ui/src/components/Table/Table.tsx index d1d864e8bc..c9d62eec2f 100644 --- a/packages/libs/react-ui/src/components/Table/Table.tsx +++ b/packages/libs/react-ui/src/components/Table/Table.tsx @@ -1,10 +1,11 @@ import { tableClass } from './Table.css'; import { TBody } from './TBody'; import { THead } from './THead'; -import { CompoundType } from './types'; +import type { CompoundType } from './types'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITableProps { children?: CompoundType | CompoundType; diff --git a/packages/libs/react-ui/src/components/Table/Td.tsx b/packages/libs/react-ui/src/components/Table/Td.tsx index 2eb5856099..35b9c2ee2e 100644 --- a/packages/libs/react-ui/src/components/Table/Td.tsx +++ b/packages/libs/react-ui/src/components/Table/Td.tsx @@ -1,6 +1,7 @@ import { tdClass } from './Table.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITdProps { children?: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Table/Th.tsx b/packages/libs/react-ui/src/components/Table/Th.tsx index 8965b10a43..7c8b8ed0f7 100644 --- a/packages/libs/react-ui/src/components/Table/Th.tsx +++ b/packages/libs/react-ui/src/components/Table/Th.tsx @@ -1,6 +1,7 @@ import { thClass } from './Table.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IThProps { children?: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Table/Tr.tsx b/packages/libs/react-ui/src/components/Table/Tr.tsx index 3e9702ae10..767a7fb069 100644 --- a/packages/libs/react-ui/src/components/Table/Tr.tsx +++ b/packages/libs/react-ui/src/components/Table/Tr.tsx @@ -1,11 +1,12 @@ import { linkButtonClass, trClass } from './Table.css'; import { Td } from './Td'; import { Th } from './Th'; -import { CompoundType } from './types'; +import type { CompoundType } from './types'; import { SystemIcon } from '@components/Icon'; import { IconButton } from '@components/IconButton'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITrProps { children?: CompoundType | CompoundType; diff --git a/packages/libs/react-ui/src/components/Table/index.ts b/packages/libs/react-ui/src/components/Table/index.ts index 4265533561..f6d8cb153a 100644 --- a/packages/libs/react-ui/src/components/Table/index.ts +++ b/packages/libs/react-ui/src/components/Table/index.ts @@ -11,7 +11,7 @@ import { THead } from './THead'; import type { ITrProps } from './Tr'; import { Tr } from './Tr'; -import { FC } from 'react'; +import type { FC } from 'react'; export type { ITableProps, diff --git a/packages/libs/react-ui/src/components/Table/types.ts b/packages/libs/react-ui/src/components/Table/types.ts index b822c2cc69..fc771eca05 100644 --- a/packages/libs/react-ui/src/components/Table/types.ts +++ b/packages/libs/react-ui/src/components/Table/types.ts @@ -1,4 +1,4 @@ -import { FunctionComponentElement } from 'react'; +import type { FunctionComponentElement } from 'react'; export type CompoundType = | FunctionComponentElement diff --git a/packages/libs/react-ui/src/components/Tabs/Tab.tsx b/packages/libs/react-ui/src/components/Tabs/Tab.tsx index 73b225cd1b..c863d71077 100644 --- a/packages/libs/react-ui/src/components/Tabs/Tab.tsx +++ b/packages/libs/react-ui/src/components/Tabs/Tab.tsx @@ -1,7 +1,8 @@ import { selectedClass, tabClass } from './Tabs.css'; import classNames from 'classnames'; -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface ITabProps { children: ReactNode; diff --git a/packages/libs/react-ui/src/components/Tabs/TabContent.tsx b/packages/libs/react-ui/src/components/Tabs/TabContent.tsx index dad9968a71..bfd4113b26 100644 --- a/packages/libs/react-ui/src/components/Tabs/TabContent.tsx +++ b/packages/libs/react-ui/src/components/Tabs/TabContent.tsx @@ -1,4 +1,5 @@ -import React, { FC, ReactNode } from 'react'; +import type { FC, ReactNode } from 'react'; +import React from 'react'; export interface ITabContentProps { children: ReactNode; diff --git a/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx b/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx index 53322f4bb6..df281dcd28 100644 --- a/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx +++ b/packages/libs/react-ui/src/components/Tabs/Tabs.stories.tsx @@ -1,4 +1,5 @@ -import { ITabsContainerProps, Tabs } from '@components/Tabs'; +import type { ITabsContainerProps } from '@components/Tabs'; +import { Tabs } from '@components/Tabs'; import { Text } from '@components/Typography/Text/Text'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Tabs/TabsContainer.tsx b/packages/libs/react-ui/src/components/Tabs/TabsContainer.tsx index 68840524e5..c54e82ba3a 100644 --- a/packages/libs/react-ui/src/components/Tabs/TabsContainer.tsx +++ b/packages/libs/react-ui/src/components/Tabs/TabsContainer.tsx @@ -2,7 +2,8 @@ import { Tab } from './Tab'; import { TabContent } from './TabContent'; import { selectorLine, tabsContainer, tabsContainerWrapper } from './Tabs.css'; -import React, { FC, ReactNode, useEffect, useRef, useState } from 'react'; +import type { FC, ReactNode } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; export interface ITabsContainerProps { children?: ReactNode; diff --git a/packages/libs/react-ui/src/components/Tabs/index.ts b/packages/libs/react-ui/src/components/Tabs/index.ts index a82f79b6f7..defaede0a5 100644 --- a/packages/libs/react-ui/src/components/Tabs/index.ts +++ b/packages/libs/react-ui/src/components/Tabs/index.ts @@ -5,7 +5,7 @@ import { TabContent } from './TabContent'; import type { ITabsContainerProps } from './TabsContainer'; import { TabsContainer } from './TabsContainer'; -import { FC } from 'react'; +import type { FC } from 'react'; interface ITabs { Root: FC; diff --git a/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx b/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx index f7d64f6a65..118cded61c 100644 --- a/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx +++ b/packages/libs/react-ui/src/components/Tag/Tag.stories.tsx @@ -1,5 +1,6 @@ import { Button } from '@components/Button'; -import { ITagProps, Tag } from '@components/Tag'; +import type { ITagProps } from '@components/Tag'; +import { Tag } from '@components/Tag'; import type { Meta, StoryObj } from '@storybook/react'; import React, { useState } from 'react'; diff --git a/packages/libs/react-ui/src/components/Tag/Tag.tsx b/packages/libs/react-ui/src/components/Tag/Tag.tsx index 8644d793bf..8309a5cc19 100644 --- a/packages/libs/react-ui/src/components/Tag/Tag.tsx +++ b/packages/libs/react-ui/src/components/Tag/Tag.tsx @@ -1,7 +1,8 @@ import { closeButtonClass, tagClass, tagLabelClass } from './Tag.css'; import { SystemIcon } from '@components/Icon'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITagProps { children: string; diff --git a/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx b/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx index aeeaa950e1..be286f32c7 100644 --- a/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx +++ b/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx @@ -1,7 +1,8 @@ import { SystemIcon } from '@components/Icon'; -import { IInputProps } from '@components/Input'; +import type { IInputProps } from '@components/Input'; import { statusVariant } from '@components/InputWrapper/InputWrapper.css'; -import { ITextFieldProps, TextField } from '@components/TextField'; +import type { ITextFieldProps } from '@components/TextField'; +import { TextField } from '@components/TextField'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/TextField/TextField.tsx b/packages/libs/react-ui/src/components/TextField/TextField.tsx index ab6c329d38..75b19d4be3 100644 --- a/packages/libs/react-ui/src/components/TextField/TextField.tsx +++ b/packages/libs/react-ui/src/components/TextField/TextField.tsx @@ -1,6 +1,9 @@ -import { IInputProps, Input } from '@components/Input'; -import { IInputWrapperProps, InputWrapper } from '@components/InputWrapper'; -import React, { FC } from 'react'; +import type { IInputProps } from '@components/Input'; +import { Input } from '@components/Input'; +import type { IInputWrapperProps } from '@components/InputWrapper'; +import { InputWrapper } from '@components/InputWrapper'; +import type { FC } from 'react'; +import React from 'react'; export interface ITextFieldProps extends Omit { diff --git a/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx b/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx index f894b8dd61..2adc0e273d 100644 --- a/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx +++ b/packages/libs/react-ui/src/components/Tooltip/Tooltip.stories.tsx @@ -1,5 +1,6 @@ +import type { ITooltipProps } from './'; import { container } from './stories.css'; -import { ITooltipProps, Tooltip } from './'; +import { Tooltip } from './'; import { SystemIcon } from '@components/Icon'; import { IconButton } from '@components/IconButton'; diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.stories.tsx b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.stories.tsx index 1555ba3b85..5ae8447f9a 100644 --- a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.stories.tsx +++ b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.stories.tsx @@ -1,9 +1,10 @@ import { ProductIcon } from '../Icon'; -import { ILabelValue, ITrackerCardProps, TrackerCard } from './TrackerCard'; +import type { ILabelValue, ITrackerCardProps } from './TrackerCard'; +import { TrackerCard } from './TrackerCard'; import { layoutVariant } from './TrackerCard.css'; -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; const meta: Meta<{ selectIcon: keyof typeof ProductIcon } & ITrackerCardProps> = diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.test.tsx b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.test.tsx index 1848bcc5bd..da18f9a04a 100644 --- a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.test.tsx +++ b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.test.tsx @@ -1,4 +1,5 @@ -import { ILabelValue, TrackerCard } from './TrackerCard'; +import type { ILabelValue } from './TrackerCard'; +import { TrackerCard } from './TrackerCard'; import { ProductIcon } from '@components/Icon'; import { render, screen } from '@testing-library/react'; diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx index 613be55792..dc389cd6af 100644 --- a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx +++ b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.tsx @@ -16,7 +16,8 @@ import { } from './TrackerCard.css'; import classNames from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITrackerCardProps { labelValues: ILabelValue[]; diff --git a/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx b/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx index 3bd1102fec..0097e466f7 100644 --- a/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx +++ b/packages/libs/react-ui/src/components/Tree/Tree.stories.tsx @@ -1,4 +1,5 @@ -import { ITreeProps, Tree } from './'; +import type { ITreeProps } from './'; +import { Tree } from './'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/Tree/Tree.tsx b/packages/libs/react-ui/src/components/Tree/Tree.tsx index baf42b54ca..2f918865e5 100644 --- a/packages/libs/react-ui/src/components/Tree/Tree.tsx +++ b/packages/libs/react-ui/src/components/Tree/Tree.tsx @@ -1,5 +1,6 @@ import { TreeItem } from '@components/Tree/TreeItems'; -import React, { FC, useState } from 'react'; +import type { FC } from 'react'; +import React, { useState } from 'react'; export interface ITreeProps { title?: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Tree/TreeItems.tsx b/packages/libs/react-ui/src/components/Tree/TreeItems.tsx index bd12eb64ce..e71398a07d 100644 --- a/packages/libs/react-ui/src/components/Tree/TreeItems.tsx +++ b/packages/libs/react-ui/src/components/Tree/TreeItems.tsx @@ -10,7 +10,8 @@ import { import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; -import React, { FC, useState } from 'react'; +import type { FC } from 'react'; +import React, { useState } from 'react'; export interface ITreeItemProps { title?: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Typography/GradientText/GradientText.tsx b/packages/libs/react-ui/src/components/Typography/GradientText/GradientText.tsx index 229364a951..3cf4b2db67 100644 --- a/packages/libs/react-ui/src/components/Typography/GradientText/GradientText.tsx +++ b/packages/libs/react-ui/src/components/Typography/GradientText/GradientText.tsx @@ -1,6 +1,7 @@ import { gradientTextClass } from './GradientText.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IGradientTextProps { children: React.ReactNode; diff --git a/packages/libs/react-ui/src/components/Typography/Heading/Heading.tsx b/packages/libs/react-ui/src/components/Typography/Heading/Heading.tsx index 88403e2e0d..6a7614d506 100644 --- a/packages/libs/react-ui/src/components/Typography/Heading/Heading.tsx +++ b/packages/libs/react-ui/src/components/Typography/Heading/Heading.tsx @@ -6,7 +6,8 @@ import { import { elementVariants, heading } from './Heading.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface IHeadingProps { as?: keyof typeof elementVariants; diff --git a/packages/libs/react-ui/src/components/Typography/Label/Label.tsx b/packages/libs/react-ui/src/components/Typography/Label/Label.tsx index 0c80ddd393..89c960c853 100644 --- a/packages/libs/react-ui/src/components/Typography/Label/Label.tsx +++ b/packages/libs/react-ui/src/components/Typography/Label/Label.tsx @@ -1,6 +1,7 @@ import { labelClass } from './Label.css'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ILabelProps { htmlFor: string; diff --git a/packages/libs/react-ui/src/components/Typography/Text/Text.tsx b/packages/libs/react-ui/src/components/Typography/Text/Text.tsx index c90a336352..8600ffd7a6 100644 --- a/packages/libs/react-ui/src/components/Typography/Text/Text.tsx +++ b/packages/libs/react-ui/src/components/Typography/Text/Text.tsx @@ -8,7 +8,8 @@ import { } from './Text.css'; import cn from 'classnames'; -import React, { FC } from 'react'; +import type { FC } from 'react'; +import React from 'react'; export interface ITextProps { as?: keyof typeof elementVariant; diff --git a/packages/libs/react-ui/src/components/Typography/typography.css.ts b/packages/libs/react-ui/src/components/Typography/typography.css.ts index dd434a5bac..878e246a15 100644 --- a/packages/libs/react-ui/src/components/Typography/typography.css.ts +++ b/packages/libs/react-ui/src/components/Typography/typography.css.ts @@ -1,5 +1,5 @@ import { sprinkles } from '@theme/sprinkles.css'; -import { ComplexStyleRule } from '@vanilla-extract/css'; +import type { ComplexStyleRule } from '@vanilla-extract/css'; export const fontVariants: Record = { main: [sprinkles({ fontFamily: '$main' })], diff --git a/packages/libs/react-ui/src/components/index.ts b/packages/libs/react-ui/src/components/index.ts index 02a8f1f23e..e465f23f16 100644 --- a/packages/libs/react-ui/src/components/index.ts +++ b/packages/libs/react-ui/src/components/index.ts @@ -12,17 +12,6 @@ export type { IInputWrapperProps, InputWrapperStatus } from './InputWrapper'; export type { ILinkProps } from './Link'; export type { IMaskedValueProps } from './MaskedValue/MaskedValue'; export type { IModalProps } from './Modal'; -export type { IOptionProps } from './Select/Option'; -export type { IPaginationProps } from './Pagination'; -export type { IProgressBarProps } from './ProgressBar'; -export type { ISelectProps } from './Select/Select'; -export type { IStackProps } from './Stack'; -export type { ITabsContainerProps, ITabProps, ITabContentProps } from './Tabs'; -export type { ITagProps } from './Tag'; -export type { ITextFieldProps } from './TextField/TextField'; -export type { ITooltipProps } from './Tooltip'; -export type { ITrackerCardProps, ILabelValue } from './TrackerCard/TrackerCard'; -export type { ITreeProps } from './Tree'; export type { INavFooterIconButtonProps, INavFooterLinkProps, @@ -39,6 +28,12 @@ export type { INotificationActionsProps, INotificationProps, } from './Notification'; +export type { IOptionProps } from './Select/Option'; +export type { IPaginationProps } from './Pagination'; +export type { IProfileCardProps } from './ProfileCard'; +export type { IProgressBarProps } from './ProgressBar'; +export type { ISelectProps } from './Select/Select'; +export type { IStackProps } from './Stack'; export type { ITableProps, ITBodyProps, @@ -47,13 +42,18 @@ export type { IThProps, ITrProps, } from './Table'; +export type { ITabsContainerProps, ITabProps, ITabContentProps } from './Tabs'; +export type { ITagProps } from './Tag'; +export type { ITextFieldProps } from './TextField/TextField'; export type { - ITextProps, - IHeadingProps, IGradientTextProps, + IHeadingProps, ILabelProps, + ITextProps, } from './Typography'; -export type { IProfileCardProps } from './ProfileCard'; +export type { ITooltipProps } from './Tooltip'; +export type { ITrackerCardProps, ILabelValue } from './TrackerCard/TrackerCard'; +export type { ITreeProps } from './Tree'; export { Accordion } from './Accordion'; export { Box } from './Box'; @@ -61,8 +61,7 @@ export { Breadcrumbs } from './Breadcrumbs'; export { Button } from './Button'; export { Card } from './Card'; export { ContentHeader } from './ContentHeader'; -export { NavFooter } from './NavFooter'; -export { NavHeader } from './NavHeader'; +export { Divider } from './Divider/Divider'; export { Grid } from './Grid'; export { IconButton } from './IconButton'; export { Input } from './Input/Input'; @@ -70,9 +69,12 @@ export { InputWrapper } from './InputWrapper'; export { Link } from './Link'; export { MaskedValue } from './MaskedValue/MaskedValue'; export { Modal, ModalProvider, useModal } from './Modal'; +export { NavFooter } from './NavFooter'; +export { NavHeader } from './NavHeader'; export { Notification } from './Notification'; export { Option } from './Select/Option'; export { Pagination } from './Pagination'; +export { ProfileCard } from './ProfileCard'; export { ProgressBar } from './ProgressBar'; export { Select } from './Select/Select'; export { Stack } from './Stack'; @@ -85,5 +87,3 @@ export { TextField } from './TextField/TextField'; export { Tooltip } from './Tooltip'; export { TrackerCard } from './TrackerCard/TrackerCard'; export { Tree } from './Tree'; -export { Divider } from './Divider/Divider'; -export { ProfileCard } from './ProfileCard'; From 0736216ba0f07d4497e6c1af128aa873f72953cc Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 21 Aug 2023 08:50:58 +0200 Subject: [PATCH 05/32] refactor: remove unneccesary accordion wrapper --- .../Accordion/Accordion.stories.tsx | 38 ++++---- .../src/components/Accordion/Accordion.tsx | 95 ++++++++++++++++++- .../src/components/Accordion/index.ts | 6 +- 3 files changed, 109 insertions(+), 30 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index f086d19be8..469f976ac2 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -53,26 +53,24 @@ export const Dynamic: IStory = { }, render: ({ linked, sectionCount }) => { return ( - - - {sampleSections - .slice(0, sectionCount) - .map( - ( - { title, children, onOpen, onClose }: IAccordionSectionProps, - index, - ) => ( - - {children} - - ), - )} - + + {sampleSections + .slice(0, sectionCount) + .map( + ( + { title, children, onOpen, onClose }: IAccordionSectionProps, + index, + ) => ( + + {children} + + ), + )} ); }, diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 85c6be056f..f0174d7645 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,12 +1,97 @@ -import { IAccordionSectionsProps } from '.'; +import { + accordionContentWrapperClass, + accordionSectionClass, + accordionTitleClass, + accordionTitleVariants, +} from './Accordion.css'; +import useLinked from './useLinked'; +import { IAccordionSectionProps } from '.'; +import classNames from 'classnames'; import type { FC, FunctionComponentElement } from 'react'; -import React from 'react'; +import React, { useCallback, useEffect } from 'react'; export interface IAccordionRootProps { - children?: FunctionComponentElement; + children?: FunctionComponentElement[]; + linked?: boolean; + openSection?: number; } -export const AccordionRoot: FC = ({ children }) => { - return
{children}
; +export const AccordionRoot: FC = ({ + children, + linked = false, + openSection, +}) => { + const { usingLinked, setUsingLinked, openSections, setOpenSections } = + useLinked(openSection); + + useEffect(() => { + setUsingLinked(linked); + if (linked && openSections.length > 1) { + const lastOpen = openSections.pop() || -1; + setOpenSections([lastOpen]); + } + }, [linked]); + + const handleToggleSection = useCallback( + ( + index: number, + { onOpen, onClose }: Pick, + ): void => { + const isOpen = openSections.includes(index); + if (isOpen) { + setOpenSections(openSections.filter((i) => i !== index)); + onClose?.(); + } else { + setOpenSections(usingLinked ? [index] : [...openSections, index]); + onOpen?.(); + } + }, + [openSections, usingLinked], + ); + + return ( +
+ {React.Children.map(children, (section, sectionIndex) => ( +
+
+ handleToggleSection(sectionIndex, { + onOpen: section?.props.onOpen, + onClose: section?.props.onClose, + }) + } + className={classNames( + accordionTitleClass, + accordionTitleVariants[ + openSections.includes(sectionIndex) ? 'opened' : 'closed' + ], + )} + > + {React.cloneElement( + section as React.ReactElement< + HTMLElement | IAccordionSectionProps, + | string + | React.JSXElementConstructor< + JSX.Element & IAccordionSectionProps + > + >, + { + isOpen: openSections.includes(sectionIndex), + }, + )} +
+ {openSections.includes(sectionIndex) && section && ( +
+ {section.props.children} +
+ )} +
+ ))} +
+ ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/index.ts b/packages/libs/react-ui/src/components/Accordion/index.ts index 286187237c..9b33c56d68 100644 --- a/packages/libs/react-ui/src/components/Accordion/index.ts +++ b/packages/libs/react-ui/src/components/Accordion/index.ts @@ -2,21 +2,17 @@ import type { IAccordionRootProps } from './Accordion'; import { AccordionRoot } from './Accordion'; import type { IAccordionSectionProps } from './AccordionSection'; import { AccordionSection } from './AccordionSection'; -import type { IAccordionSectionsProps } from './AccordionSections'; -import { AccordionSections } from './AccordionSections'; import type { FC } from 'react'; -export { IAccordionRootProps, IAccordionSectionProps, IAccordionSectionsProps }; +export { IAccordionRootProps, IAccordionSectionProps }; export interface IAccordionProps { Root: FC; - Sections: FC; Section: FC; } export const Accordion: IAccordionProps = { Root: AccordionRoot, - Sections: AccordionSections, Section: AccordionSection, }; From a5991dcff010cb8c27d4ac72050299ab7efabeb2 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 21 Aug 2023 08:51:23 +0200 Subject: [PATCH 06/32] chore: remove unused file --- .../Accordion/AccordionSections.tsx | 97 ------------------- 1 file changed, 97 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx deleted file mode 100644 index 03a977c4ad..0000000000 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSections.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import { - accordionContentWrapperClass, - accordionSectionClass, - accordionTitleClass, - accordionTitleVariants, -} from './Accordion.css'; -import useLinked from './useLinked'; -import { IAccordionSectionProps } from '.'; - -import classNames from 'classnames'; -import type { FC, FunctionComponentElement } from 'react'; -import React, { useCallback, useEffect } from 'react'; - -export interface IAccordionSectionsProps { - children?: FunctionComponentElement[]; - linked?: boolean; - openSection?: number; -} - -export const AccordionSections: FC = ({ - children, - linked = false, - openSection, -}) => { - const { usingLinked, setUsingLinked, openSections, setOpenSections } = - useLinked(openSection); - - useEffect(() => { - setUsingLinked(linked); - if (linked && openSections.length > 1) { - const lastOpen = openSections.pop() || -1; - setOpenSections([lastOpen]); - } - }, [linked]); - - const handleToggleSection = useCallback( - ( - index: number, - { onOpen, onClose }: Pick, - ): void => { - const isOpen = openSections.includes(index); - if (isOpen) { - setOpenSections(openSections.filter((i) => i !== index)); - onClose?.(); - } else { - setOpenSections(usingLinked ? [index] : [...openSections, index]); - onOpen?.(); - } - }, - [openSections, usingLinked], - ); - - return ( -
- {React.Children.map(children, (section, sectionIndex) => ( -
-
- handleToggleSection(sectionIndex, { - onOpen: section?.props.onOpen, - onClose: section?.props.onClose, - }) - } - className={classNames( - accordionTitleClass, - accordionTitleVariants[ - openSections.includes(sectionIndex) ? 'opened' : 'closed' - ], - )} - > - {React.cloneElement( - section as React.ReactElement< - HTMLElement | IAccordionSectionProps, - | string - | React.JSXElementConstructor< - JSX.Element & IAccordionSectionProps - > - >, - { - isOpen: openSections.includes(sectionIndex), - }, - )} -
- {openSections.includes(sectionIndex) && section && ( -
- {section.props.children} -
- )} -
- ))} -
- ); -}; From b3ad892b6de8bed940cbe05459099c0e6c048921 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 21 Aug 2023 08:57:56 +0200 Subject: [PATCH 07/32] chore: container -> root & tsx -> ts --- .../react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx | 5 +---- .../libs/react-ui/src/components/Breadcrumbs/index.tsx | 8 ++++---- .../src/components/Button/{index.tsx => index.ts} | 0 .../src/components/Pagination/{index.tsx => index.ts} | 0 4 files changed, 5 insertions(+), 8 deletions(-) rename packages/libs/react-ui/src/components/Button/{index.tsx => index.ts} (100%) rename packages/libs/react-ui/src/components/Pagination/{index.tsx => index.ts} (100%) diff --git a/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx index f296d61c43..7164cfec8d 100644 --- a/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/libs/react-ui/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -10,10 +10,7 @@ export interface IBreadcrumbsProps { icon?: (typeof ProductIcon)[keyof typeof ProductIcon]; } -export const BreadcrumbsContainer: FC = ({ - children, - icon, -}) => { +export const BreadcrumbsRoot: FC = ({ children, icon }) => { const Icon = icon; return (
- - {activeMenu.items?.map((item, index) => ( - - - - ))} - + {activeMenu.items?.map((item, index) => ( + + + + ))}
); From 3654108796ae4bb431abb494b3721548a80335b9 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 08:53:20 +0200 Subject: [PATCH 11/32] refactor: logic and styles --- .../src/components/Accordion/Accordion.css.ts | 26 +++-- .../Accordion/Accordion.stories.tsx | 5 +- .../src/components/Accordion/Accordion.tsx | 97 ++++++------------- .../components/Accordion/AccordionSection.tsx | 63 +++++++++--- .../src/components/Accordion/useLinked.ts | 16 --- 5 files changed, 97 insertions(+), 110 deletions(-) delete mode 100644 packages/libs/react-ui/src/components/Accordion/useLinked.ts diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index a5d9a08a8d..152b53d3ea 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -3,6 +3,8 @@ import { style, styleVariants } from '@vanilla-extract/css'; export const accordionSectionClass = style([ sprinkles({ + display: 'block', + flexGrow: 1, marginBottom: '$6', }), { @@ -13,21 +15,30 @@ export const accordionSectionClass = style([ }, }, ]); -export const accordionTitleClass = style([ + +export const accordionSectionHeadingClass = style([ sprinkles({ display: 'flex', + }), + { + transition: 'color 0.2s ease 0s', + borderBottom: '1px solid', + }, +]); + +export const accordionTitleClass = style([ + sprinkles({ alignItems: 'center', - justifyContent: 'space-between', cursor: 'pointer', + display: 'flex', fontSize: '$base', fontWeight: '$medium', + justifyContent: 'space-between', paddingBottom: '$2', + width: '100%', }), - { - transition: 'color 0.2s ease 0s', - borderBottom: '1px solid', - }, ]); + export const accordionTitleVariants = styleVariants({ closed: [sprinkles({ color: '$negativeContrast' })], opened: [sprinkles({ color: '$foreground' })], @@ -35,8 +46,8 @@ export const accordionTitleVariants = styleVariants({ export const toggleButtonClass = style([ sprinkles({ - border: 'none', background: 'none', + border: 'none', color: 'inherit', }), { @@ -49,6 +60,7 @@ export const toggleButtonClass = style([ }, }, ]); + export const accordionContentWrapperClass = style([ sprinkles({ paddingTop: '$2', diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index b92c58c666..3aae1a3a3c 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -26,7 +26,8 @@ const meta: Meta = { }, docs: { description: { - component: '', + component: + 'Note: optional property of `openSection` may be set to the Root component to set the initially opened section. This defaults to -1 and has only been explcitly set in the story code for demonstration purposes.', }, }, }, @@ -53,7 +54,7 @@ export const Dynamic: IStory = { }, render: ({ linked, sectionCount }) => { return ( - + {sampleSections .slice(0, sectionCount) .map( diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index f0174d7645..17d9d87c0d 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -1,15 +1,7 @@ -import { - accordionContentWrapperClass, - accordionSectionClass, - accordionTitleClass, - accordionTitleVariants, -} from './Accordion.css'; -import useLinked from './useLinked'; import { IAccordionSectionProps } from '.'; -import classNames from 'classnames'; import type { FC, FunctionComponentElement } from 'react'; -import React, { useCallback, useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; export interface IAccordionRootProps { children?: FunctionComponentElement[]; @@ -20,78 +12,43 @@ export interface IAccordionRootProps { export const AccordionRoot: FC = ({ children, linked = false, - openSection, + openSection = -1, }) => { - const { usingLinked, setUsingLinked, openSections, setOpenSections } = - useLinked(openSection); + const [openSections, setOpenSections] = useState([openSection]); useEffect(() => { - setUsingLinked(linked); if (linked && openSections.length > 1) { const lastOpen = openSections.pop() || -1; setOpenSections([lastOpen]); } }, [linked]); - const handleToggleSection = useCallback( - ( - index: number, - { onOpen, onClose }: Pick, - ): void => { - const isOpen = openSections.includes(index); - if (isOpen) { - setOpenSections(openSections.filter((i) => i !== index)); - onClose?.(); - } else { - setOpenSections(usingLinked ? [index] : [...openSections, index]); - onOpen?.(); - } - }, - [openSections, usingLinked], - ); - return (
- {React.Children.map(children, (section, sectionIndex) => ( -
-
- handleToggleSection(sectionIndex, { - onOpen: section?.props.onOpen, - onClose: section?.props.onClose, - }) - } - className={classNames( - accordionTitleClass, - accordionTitleVariants[ - openSections.includes(sectionIndex) ? 'opened' : 'closed' - ], - )} - > - {React.cloneElement( - section as React.ReactElement< - HTMLElement | IAccordionSectionProps, - | string - | React.JSXElementConstructor< - JSX.Element & IAccordionSectionProps - > - >, - { - isOpen: openSections.includes(sectionIndex), - }, - )} -
- {openSections.includes(sectionIndex) && section && ( -
- {section.props.children} -
- )} -
- ))} + {React.Children.map(children, (section, sectionIndex) => + React.cloneElement( + section as React.ReactElement< + HTMLElement | IAccordionSectionProps, + | string + | React.JSXElementConstructor + >, + { + index: sectionIndex, + openSections, + onClick: () => { + if (openSections.includes(sectionIndex)) { + setOpenSections(openSections.filter((i) => i !== sectionIndex)); + section?.props.onClose?.(); + } else { + setOpenSections( + linked ? [sectionIndex] : [...openSections, sectionIndex], + ); + section?.props.onOpen?.(); + } + }, + }, + ), + )}
); }; diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 31d908e464..d9b8bea40e 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -1,4 +1,11 @@ -import { toggleButtonClass } from './Accordion.css'; +import { + accordionContentWrapperClass, + accordionSectionClass, + accordionSectionHeadingClass, + accordionTitleClass, + accordionTitleVariants, + toggleButtonClass, +} from './Accordion.css'; import { SystemIcon } from '@components/Icon'; import classNames from 'classnames'; @@ -6,29 +13,55 @@ import type { FC } from 'react'; import React from 'react'; export interface IAccordionSectionProps { - children: React.ReactNode; - isOpen?: boolean; + children?: React.ReactNode; + index?: number; onClose?: () => void; onOpen?: () => void; title: string; + onClick?: () => void; + openSections?: number[]; } export const AccordionSection: FC = ({ + children, + index = 0, title, - isOpen, + onClick, + openSections, }) => { + const isOpen = openSections?.includes(index); return ( - <> - {title} - - - + + {title} + + + +
+ + {isOpen && children && ( +
{children}
+ )} + ); }; diff --git a/packages/libs/react-ui/src/components/Accordion/useLinked.ts b/packages/libs/react-ui/src/components/Accordion/useLinked.ts deleted file mode 100644 index bae70c042b..0000000000 --- a/packages/libs/react-ui/src/components/Accordion/useLinked.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { useState } from 'react'; - -interface IUseLinkedReturn { - openSections: number[]; - setOpenSections: React.Dispatch>; - usingLinked: boolean; - setUsingLinked: React.Dispatch>; -} - -const useLinked = (openSection = -1): IUseLinkedReturn => { - const [usingLinked, setUsingLinked] = useState(false); - const [openSections, setOpenSections] = useState([openSection]); - return { openSections, setOpenSections, usingLinked, setUsingLinked }; -}; - -export default useLinked; From c02b9d97d062c4f6f81dc36155c4d8ddab890119 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 08:58:49 +0200 Subject: [PATCH 12/32] fix: merge --- .../src/components/InputWrapper/InputWrapper.stories.tsx | 1 - .../libs/react-ui/src/components/TextField/TextField.stories.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx index 7cacdcb122..2d0c827c9e 100644 --- a/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx +++ b/packages/libs/react-ui/src/components/InputWrapper/InputWrapper.stories.tsx @@ -3,7 +3,6 @@ import { statusVariant } from './InputWrapper.css'; import { SystemIcon } from '@components/Icon'; import { Input } from '@components/Input'; import { IInputWrapperProps, InputWrapper } from '@components/InputWrapper'; - import type { Meta, StoryObj } from '@storybook/react'; import { vars } from '@theme/vars.css'; import React from 'react'; diff --git a/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx b/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx index 127e7f812c..bccf43c1aa 100644 --- a/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx +++ b/packages/libs/react-ui/src/components/TextField/TextField.stories.tsx @@ -1,5 +1,4 @@ import { SystemIcon } from '@components/Icon'; -import type { IInputProps } from '@components/Input'; import { statusVariant } from '@components/InputWrapper/InputWrapper.css'; import type { ITextFieldProps } from '@components/TextField'; import { TextField } from '@components/TextField'; From 8a762dd5e28957680c2ed0608a1e0b5fe36f7ef1 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 09:12:58 +0200 Subject: [PATCH 13/32] fix: merge --- .../react-ui/src/components/NavHeader/NavHeaderNavigation.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx index 714a10b8d4..cf1a287a8f 100644 --- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx +++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderNavigation.tsx @@ -15,9 +15,8 @@ import type { FC, FunctionComponentElement, HTMLAttributeAnchorTarget, - useEffect, } from 'react'; -import React from 'react'; +import React, { useEffect } from 'react'; export interface INavItem { active?: boolean; From 6ab18912985096c8a03fb8382ef9e4893ce3a5a1 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 15:41:37 +0200 Subject: [PATCH 14/32] chore: PR suggestions --- .../libs/react-ui/src/components/Accordion/Accordion.tsx | 6 +++--- .../react-ui/src/components/Accordion/AccordionSection.tsx | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 17d9d87c0d..aa534f7c46 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -12,13 +12,13 @@ export interface IAccordionRootProps { export const AccordionRoot: FC = ({ children, linked = false, - openSection = -1, + openSection = undefined, }) => { const [openSections, setOpenSections] = useState([openSection]); useEffect(() => { if (linked && openSections.length > 1) { - const lastOpen = openSections.pop() || -1; + const lastOpen = openSections.pop() || undefined; setOpenSections([lastOpen]); } }, [linked]); @@ -34,7 +34,7 @@ export const AccordionRoot: FC = ({ >, { index: sectionIndex, - openSections, + isOpen: openSections.includes(sectionIndex), onClick: () => { if (openSections.includes(sectionIndex)) { setOpenSections(openSections.filter((i) => i !== sectionIndex)); diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 8f7aaf5883..754aa384cb 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -21,7 +21,7 @@ export interface IAccordionSectionProps { onOpen?: () => void; title: string; onClick?: () => void; - openSections?: number[]; + isOpen?: boolean; } export const AccordionSection: FC = ({ @@ -29,9 +29,8 @@ export const AccordionSection: FC = ({ index = 0, title, onClick, - openSections, + isOpen, }) => { - const isOpen = openSections?.includes(index); return (
Date: Mon, 28 Aug 2023 15:42:29 +0200 Subject: [PATCH 15/32] chore: PR suggestions --- .../libs/react-ui/src/components/Accordion/Accordion.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index aa534f7c46..808e63effb 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -6,15 +6,15 @@ import React, { useEffect, useState } from 'react'; export interface IAccordionRootProps { children?: FunctionComponentElement[]; linked?: boolean; - openSection?: number; + initialOpenSection?: number; } export const AccordionRoot: FC = ({ children, linked = false, - openSection = undefined, + initialOpenSection = undefined, }) => { - const [openSections, setOpenSections] = useState([openSection]); + const [openSections, setOpenSections] = useState([initialOpenSection]); useEffect(() => { if (linked && openSections.length > 1) { From 3e7ec43cf20cc156c261d01bdd3155d5f9b47597 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 15:45:03 +0200 Subject: [PATCH 16/32] chore: PR suggestions --- .../libs/react-ui/src/components/Accordion/Accordion.css.ts | 2 +- .../libs/react-ui/src/components/Accordion/AccordionSection.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index 152b53d3ea..5ea510604f 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -18,6 +18,7 @@ export const accordionSectionClass = style([ export const accordionSectionHeadingClass = style([ sprinkles({ + cursor: 'pointer', display: 'flex', }), { @@ -29,7 +30,6 @@ export const accordionSectionHeadingClass = style([ export const accordionTitleClass = style([ sprinkles({ alignItems: 'center', - cursor: 'pointer', display: 'flex', fontSize: '$base', fontWeight: '$medium', diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 754aa384cb..26786b0260 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -41,10 +41,10 @@ export const AccordionSection: FC = ({ accordionSectionHeadingClass, accordionTitleVariants[isOpen ? 'opened' : 'closed'], )} + onClick={onClick} > {title} From fc5819e3f09bdf14d97912505b97514874884c62 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 15:48:35 +0200 Subject: [PATCH 17/32] chore: semantics --- .../react-ui/src/components/Accordion/Accordion.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index 3aae1a3a3c..9b6ab597a5 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { docs: { description: { component: - 'Note: optional property of `openSection` may be set to the Root component to set the initially opened section. This defaults to -1 and has only been explcitly set in the story code for demonstration purposes.', + 'Note: optional property of `openSection` may be set to the Root component to set the initially opened section. This defaults to `undefined` and has only been explcitly set to -1 in the story code for demonstration purposes.', }, }, }, @@ -54,7 +54,7 @@ export const Dynamic: IStory = { }, render: ({ linked, sectionCount }) => { return ( - + {sampleSections .slice(0, sectionCount) .map( From 206f3b8eccae943d45f2dc92c57e1107e8843037 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 15:49:21 +0200 Subject: [PATCH 18/32] chore: semantics --- .../react-ui/src/components/Accordion/Accordion.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index 9b6ab597a5..d34317f67e 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { docs: { description: { component: - 'Note: optional property of `openSection` may be set to the Root component to set the initially opened section. This defaults to `undefined` and has only been explcitly set to -1 in the story code for demonstration purposes.', + 'Note: optional property of `initialOpenSection` may be set to the Root component to set the initially opened section. This defaults to `undefined` and has only been explcitly set to -1 in the story code for demonstration purposes.', }, }, }, From 204ddc59576c696cf5a663b42dee5f45290e7fda Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Mon, 28 Aug 2023 16:08:36 +0200 Subject: [PATCH 19/32] feat: separation of concerns --- .../src/components/Accordion/Accordion.tsx | 21 +++++++++---------- .../components/Accordion/AccordionSection.tsx | 21 +++++++++++++------ 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 808e63effb..9fc7141a68 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -35,17 +35,16 @@ export const AccordionRoot: FC = ({ { index: sectionIndex, isOpen: openSections.includes(sectionIndex), - onClick: () => { - if (openSections.includes(sectionIndex)) { - setOpenSections(openSections.filter((i) => i !== sectionIndex)); - section?.props.onClose?.(); - } else { - setOpenSections( - linked ? [sectionIndex] : [...openSections, sectionIndex], - ); - section?.props.onOpen?.(); - } - }, + onOpen: () => section?.props.onOpen?.(), + onClose: () => section?.props.onClose?.(), + onClick: () => + openSections.includes(sectionIndex) + ? setOpenSections( + openSections.filter((i) => i !== sectionIndex), + ) + : setOpenSections( + linked ? [sectionIndex] : [...openSections, sectionIndex], + ), }, ), )} diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 26786b0260..9c5dfff578 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -17,20 +17,29 @@ import React from 'react'; export interface IAccordionSectionProps { children?: React.ReactNode; index?: number; + isOpen?: boolean; + onClick?: () => void; onClose?: () => void; onOpen?: () => void; title: string; - onClick?: () => void; - isOpen?: boolean; } export const AccordionSection: FC = ({ children, - index = 0, - title, - onClick, isOpen, + onClick, + onClose, + onOpen, + title, }) => { + const handleClick = (): void => { + if (isOpen) { + onClose?.(); + } else { + onOpen?.(); + } + onClick?.(); + }; return (
= ({ accordionSectionHeadingClass, accordionTitleVariants[isOpen ? 'opened' : 'closed'], )} - onClick={onClick} + onClick={handleClick} > Date: Mon, 28 Aug 2023 16:13:16 +0200 Subject: [PATCH 20/32] chore: cleanup --- packages/libs/react-ui/src/components/Accordion/Accordion.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx index 9fc7141a68..a30757644c 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.tsx @@ -35,8 +35,6 @@ export const AccordionRoot: FC = ({ { index: sectionIndex, isOpen: openSections.includes(sectionIndex), - onOpen: () => section?.props.onOpen?.(), - onClose: () => section?.props.onClose?.(), onClick: () => openSections.includes(sectionIndex) ? setOpenSections( From 54d9d0bc94e0069a594273a6c3216728d9040a78 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 09:33:25 +0200 Subject: [PATCH 21/32] refactor: section -> article [suggestion] --- .../react-ui/src/components/Accordion/Accordion.css.ts | 1 + .../src/components/Accordion/AccordionSection.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index 5ea510604f..f394ee88e4 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -49,6 +49,7 @@ export const toggleButtonClass = style([ background: 'none', border: 'none', color: 'inherit', + cursor: 'pointer', }), { transition: 'transform 0.2s ease 0s', diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 9c5dfff578..e817740cac 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -41,11 +41,11 @@ export const AccordionSection: FC = ({ onClick?.(); }; return ( -
-
= ({ > -
+ {isOpen && children && (
{children}
)} -
+ ); }; From ad26a19bfbec539b0f19bd8352604fc4dbed65bf Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 10:02:18 +0200 Subject: [PATCH 22/32] refactor: rotate icon instead of button on toggle --- .../src/components/Accordion/Accordion.css.ts | 3 +++ .../src/components/Accordion/AccordionSection.tsx | 15 ++++++++------- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index f394ee88e4..1813df03b8 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -51,6 +51,9 @@ export const toggleButtonClass = style([ color: 'inherit', cursor: 'pointer', }), +]); + +export const toggleIconClass = style([ { transition: 'transform 0.2s ease 0s', transform: 'rotate(45deg)', diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index e817740cac..d76062e948 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -7,6 +7,7 @@ import { accordionTitleClass, accordionTitleVariants, toggleButtonClass, + toggleIconClass, } from './Accordion.css'; import { SystemIcon } from '@components/Icon'; @@ -59,13 +60,13 @@ export const AccordionSection: FC = ({ {title} - From 1f5a0de0b820be282586e7ff7d862c7c4fd68563 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:18:53 +0200 Subject: [PATCH 23/32] refactor: structure and style --- .../src/components/Accordion/Accordion.css.ts | 25 +++++++++++++------ .../components/Accordion/AccordionSection.tsx | 19 +++++++------- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index 1813df03b8..13aaa6ca88 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -1,4 +1,5 @@ import { sprinkles } from '@theme/sprinkles.css'; +import { vars } from '@theme/vars.css'; import { style, styleVariants } from '@vanilla-extract/css'; export const accordionSectionClass = style([ @@ -17,23 +18,30 @@ export const accordionSectionClass = style([ ]); export const accordionSectionHeadingClass = style([ - sprinkles({ + { + alignItems: 'center', + background: 'none', + border: 'none', + borderBottom: `1px solid ${vars.colors.$gray20}`, cursor: 'pointer', display: 'flex', - }), - { + padding: 0, + textAlign: 'left', transition: 'color 0.2s ease 0s', - borderBottom: '1px solid', + width: '100%', + selectors: { + '&.isOpen': { + border: 'none', + }, + }, }, ]); export const accordionTitleClass = style([ sprinkles({ - alignItems: 'center', - display: 'flex', + display: 'block', fontSize: '$base', fontWeight: '$medium', - justifyContent: 'space-between', paddingBottom: '$2', width: '100%', }), @@ -50,6 +58,7 @@ export const toggleButtonClass = style([ border: 'none', color: 'inherit', cursor: 'pointer', + paddingBottom: '$2', }), ]); @@ -67,7 +76,7 @@ export const toggleIconClass = style([ export const accordionContentWrapperClass = style([ sprinkles({ - paddingTop: '$2', + paddingTop: 0, paddingBottom: '$2', }), ]); diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index d76062e948..42bed5c54c 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -42,15 +42,14 @@ export const AccordionSection: FC = ({ onClick?.(); }; return ( -
-
= ({ {title} - -
+ + {isOpen && children && (
{children}
)} -
+
); }; From 3f55a850acb34d81aa13cd5ccc037c5ec0218c38 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:29:33 +0200 Subject: [PATCH 24/32] feat: story description etc --- .../react-ui/src/components/Accordion/Accordion.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index d34317f67e..ab498eea9b 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { docs: { description: { component: - 'Note: optional property of `initialOpenSection` may be set to the Root component to set the initially opened section. This defaults to `undefined` and has only been explcitly set to -1 in the story code for demonstration purposes.', + 'The Accordion component allows the user to show and hide sections of content on a page.
These sections can be expanded and collapsed by clicking the section headers.

initialOpenSection
This optional prop can be used on the Root element to set the initially opened section
It defaults to `undefined` and has only been explcitly set to - 1 in the story code for demonstration purposes.', }, }, }, @@ -36,6 +36,10 @@ const meta: Meta = { control: { type: 'boolean' }, description: 'When linked, only one section can be open at a time. If a section is opened, the previously opened section will be closed.', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, }, sectionCount: { control: { type: 'range', min: 1, max: sampleSections.length, step: 1 }, From ae2549b511ea53a27d7a43f2e4c85758de65d60d Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:32:52 +0200 Subject: [PATCH 25/32] feat: story description etc --- .../react-ui/src/components/Accordion/Accordion.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index ab498eea9b..871c94724f 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { docs: { description: { component: - 'The Accordion component allows the user to show and hide sections of content on a page.
These sections can be expanded and collapsed by clicking the section headers.

initialOpenSection
This optional prop can be used on the Root element to set the initially opened section
It defaults to `undefined` and has only been explcitly set to - 1 in the story code for demonstration purposes.', + 'The Accordion component allows the user to show and hide sections of content on a page.
These sections can be expanded and collapsed by clicking the section headers.

initialOpenSection
This optional prop can be used on the Root element to set the initially opened section
It defaults to `undefined` and has only been explcitly set to - 1 in the story code for demonstration purposes.

Note: this variant of the Accordion component is meant to be used to display content. For Navigation purposes, please check the other variant within the Navigation subgroup.', }, }, }, From 3f301f976c4b687641d7d7e021fed3d3d7100131 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:46:30 +0200 Subject: [PATCH 26/32] chore: remove unused import --- .../libs/react-ui/src/components/Accordion/AccordionSection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx index 42bed5c54c..31c5c98c60 100644 --- a/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx +++ b/packages/libs/react-ui/src/components/Accordion/AccordionSection.tsx @@ -5,7 +5,6 @@ import { accordionSectionClass, accordionSectionHeadingClass, accordionTitleClass, - accordionTitleVariants, toggleButtonClass, toggleIconClass, } from './Accordion.css'; From 94d173858ab33e5d082baa4bb0d9e5c9ea770299 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:46:53 +0200 Subject: [PATCH 27/32] feat: expand story --- .../Accordion/Accordion.stories.tsx | 43 ++++++++++++++++--- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index 871c94724f..78d543852e 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -5,8 +5,13 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; const generateSection = (i: number): IAccordionSectionProps => ({ - title: `Section ${i}`, - children:

This is the content for section {i}

, + title: `Section title ${i}`, + children: ( +

+ This is the content for section {i}. The type of this content is not + restricted: any valid HTML content is allowed. +

+ ), onOpen: () => console.log(`open section ${i}`), onClose: () => console.log(`close section ${i}`), }); @@ -15,7 +20,12 @@ const generateSections = (n: number): IAccordionSectionProps[] => const sampleSections: IAccordionSectionProps[] = generateSections(5); -type StoryProps = { sectionCount: number; linked: boolean } & IAccordionProps; +type StoryProps = { + sectionCount: number; + linked: boolean; + useCustomContent: boolean; + customContent: IAccordionSectionProps[]; +} & IAccordionProps; const meta: Meta = { title: 'Components/Accordion', @@ -44,6 +54,27 @@ const meta: Meta = { sectionCount: { control: { type: 'range', min: 1, max: sampleSections.length, step: 1 }, description: 'Adjust sample section items count', + if: { arg: 'useCustomContent', neq: true }, + table: { + defaultValue: { summary: 3 }, + type: { summary: 'number' }, + }, + }, + useCustomContent: { + control: { type: 'boolean' }, + description: 'Set your own content instead of the sample ones?', + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + customContent: { + defaultValue: [], + description: 'Custom content', + control: { + type: 'array', + }, + if: { arg: 'useCustomContent', eq: true }, }, }, }; @@ -55,11 +86,13 @@ export const Dynamic: IStory = { args: { linked: false, sectionCount: 3, + customContent: sampleSections, }, - render: ({ linked, sectionCount }) => { + render: ({ linked, sectionCount, useCustomContent, customContent }) => { + const sections = useCustomContent ? customContent : sampleSections; return ( - {sampleSections + {sections .slice(0, sectionCount) .map( ( From 9259250b2fad0a0e5624087833a8b210b828b4f2 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:47:41 +0200 Subject: [PATCH 28/32] chore: remove unused css --- .../libs/react-ui/src/components/Accordion/Accordion.css.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index 13aaa6ca88..5c1d58c0e6 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -47,11 +47,6 @@ export const accordionTitleClass = style([ }), ]); -export const accordionTitleVariants = styleVariants({ - closed: [sprinkles({ color: '$negativeContrast' })], - opened: [sprinkles({ color: '$foreground' })], -}); - export const toggleButtonClass = style([ sprinkles({ background: 'none', From 07b386612c46e551ebe8171677c1c6e7a6fdea6d Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 12:50:07 +0200 Subject: [PATCH 29/32] feat: support dark/light mode --- .../libs/react-ui/src/components/Accordion/Accordion.css.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index 5c1d58c0e6..b9b9caebd6 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -39,6 +39,7 @@ export const accordionSectionHeadingClass = style([ export const accordionTitleClass = style([ sprinkles({ + color: '$neutral5', display: 'block', fontSize: '$base', fontWeight: '$medium', @@ -51,7 +52,7 @@ export const toggleButtonClass = style([ sprinkles({ background: 'none', border: 'none', - color: 'inherit', + color: '$neutral5', cursor: 'pointer', paddingBottom: '$2', }), @@ -71,6 +72,7 @@ export const toggleIconClass = style([ export const accordionContentWrapperClass = style([ sprinkles({ + color: '$neutral5', paddingTop: 0, paddingBottom: '$2', }), From e16927cd2350dd41050a445db616d948433891c1 Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Tue, 29 Aug 2023 13:03:48 +0200 Subject: [PATCH 30/32] chore: semantics --- .../src/components/Accordion/Accordion.css.ts | 2 +- .../Accordion/Accordion.stories.tsx | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts index b9b9caebd6..bdea09bf0d 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.css.ts @@ -1,6 +1,6 @@ import { sprinkles } from '@theme/sprinkles.css'; import { vars } from '@theme/vars.css'; -import { style, styleVariants } from '@vanilla-extract/css'; +import { style } from '@vanilla-extract/css'; export const accordionSectionClass = style([ sprinkles({ diff --git a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx index 78d543852e..c15d6dade8 100644 --- a/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx +++ b/packages/libs/react-ui/src/components/Accordion/Accordion.stories.tsx @@ -23,8 +23,8 @@ const sampleSections: IAccordionSectionProps[] = generateSections(5); type StoryProps = { sectionCount: number; linked: boolean; - useCustomContent: boolean; - customContent: IAccordionSectionProps[]; + useCustomSections: boolean; + customSections: IAccordionSectionProps[]; } & IAccordionProps; const meta: Meta = { @@ -60,21 +60,21 @@ const meta: Meta = { type: { summary: 'number' }, }, }, - useCustomContent: { + useCustomSections: { control: { type: 'boolean' }, - description: 'Set your own content instead of the sample ones?', + description: 'Define your own sections instead of the sample ones?', table: { defaultValue: { summary: 'false' }, type: { summary: 'boolean' }, }, }, - customContent: { + customSections: { defaultValue: [], - description: 'Custom content', + description: 'Custom sections', control: { type: 'array', }, - if: { arg: 'useCustomContent', eq: true }, + if: { arg: 'useCustomSections', eq: true }, }, }, }; @@ -86,10 +86,10 @@ export const Dynamic: IStory = { args: { linked: false, sectionCount: 3, - customContent: sampleSections, + customSections: sampleSections, }, - render: ({ linked, sectionCount, useCustomContent, customContent }) => { - const sections = useCustomContent ? customContent : sampleSections; + render: ({ linked, sectionCount, useCustomSections, customSections }) => { + const sections = useCustomSections ? customSections : sampleSections; return ( {sections From c83e2663b11b6098ecacc733d1ec6c7fab08ed0b Mon Sep 17 00:00:00 2001 From: Timo Heddes Date: Wed, 30 Aug 2023 14:04:39 +0200 Subject: [PATCH 31/32] chore: merge mistake --- packages/libs/react-ui/src/components/Select/Option.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/libs/react-ui/src/components/Select/Option.tsx b/packages/libs/react-ui/src/components/Select/Option.tsx index f59b1ef943..452ea8dbba 100644 --- a/packages/libs/react-ui/src/components/Select/Option.tsx +++ b/packages/libs/react-ui/src/components/Select/Option.tsx @@ -1,5 +1,3 @@ -import { optionClass } from './Select.css'; - import type { FC } from 'react'; import React from 'react'; From a8bee2f379f0f1a13d712e1b278442cd05feff4a Mon Sep 17 00:00:00 2001 From: theddes <79908211+timoheddes@users.noreply.github.com> Date: Thu, 31 Aug 2023 09:13:25 +0100 Subject: [PATCH 32/32] chore: changeset --- .changeset/wild-spiders-exist.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/wild-spiders-exist.md diff --git a/.changeset/wild-spiders-exist.md b/.changeset/wild-spiders-exist.md new file mode 100644 index 0000000000..8cb295fc9b --- /dev/null +++ b/.changeset/wild-spiders-exist.md @@ -0,0 +1,6 @@ +--- +"@kadena/tools": patch +"@kadena/react-ui": patch +--- + +Refactor Accordion [Composition pattern, optimisations, contributing standards]