From f46ac7dd481d9b5935009a69ec355a8704b7424c Mon Sep 17 00:00:00 2001 From: Benji <64439681+benjitrosch@users.noreply.github.com> Date: Sat, 16 Apr 2022 16:45:15 -0400 Subject: [PATCH] chore: ran prettier (#95) --- src/Artboard/Artboard.tsx | 7 +- src/Badge/Badge.tsx | 11 +- src/Breadcrumbs/BreadcrumbsItem.tsx | 6 +- src/Button/Button.stories.tsx | 8 +- src/Button/Button.test.tsx | 8 +- src/Button/Button.tsx | 10 +- src/ButtonGroup/ButtonGroup.tsx | 6 +- src/Carousel/Carousel.stories.tsx | 237 ++++++++++++++---- src/Carousel/Carousel.tsx | 32 +-- src/Carousel/CarouselItem.tsx | 14 +- src/Checkbox/Checkbox.stories.tsx | 2 +- src/Checkbox/Checkbox.tsx | 2 +- src/CodeMockup/CodeMockup.tsx | 8 +- src/Countdown/Countdown.stories.tsx | 50 ++-- src/Drawer/Drawer.tsx | 7 +- src/Dropdown/Dropdown.tsx | 8 +- src/Footer/Footer.tsx | 8 +- src/Form/Form.tsx | 8 +- src/Hero/Hero.tsx | 8 +- src/Indicator/Indicator.tsx | 7 +- src/Menu/Menu.tsx | 8 +- src/Modal/Modal.stories.tsx | 26 +- src/Modal/Modal.tsx | 5 +- src/Modal/ModalActions.tsx | 26 +- src/Modal/ModalBody.tsx | 22 +- src/Modal/ModalHeader.tsx | 22 +- src/Navbar/Navbar.tsx | 9 +- src/PhoneMockup/PhoneMockup.tsx | 8 +- src/Progress/Progress.stories.tsx | 16 +- src/RadialProgress/RadialProgress.stories.tsx | 16 +- src/RadialProgress/RadialProgress.tsx | 23 +- src/Stack/Stack.tsx | 8 +- src/Steps/Steps.tsx | 4 +- src/Swap/Swap.tsx | 6 +- src/Table/Table.stories.tsx | 182 ++++++++------ src/Table/TableFooter.tsx | 36 +-- src/Tabs/Tab.tsx | 5 +- src/Tabs/Tabs.tsx | 7 +- src/Theme/Theme.stories.tsx | 4 +- src/Tooltip/Tooltip.stories.tsx | 82 ++---- src/WindowMockup/WindowMockup.tsx | 8 +- src/styles.css | 15 +- src/utils.ts | 2 +- 43 files changed, 580 insertions(+), 407 deletions(-) diff --git a/src/Artboard/Artboard.tsx b/src/Artboard/Artboard.tsx index f81991c7..326ab39a 100644 --- a/src/Artboard/Artboard.tsx +++ b/src/Artboard/Artboard.tsx @@ -26,10 +26,11 @@ const Artboard = forwardRef( ) return ( -
{children} diff --git a/src/Badge/Badge.tsx b/src/Badge/Badge.tsx index 4f780acc..e073bbbf 100644 --- a/src/Badge/Badge.tsx +++ b/src/Badge/Badge.tsx @@ -14,7 +14,16 @@ export type BadgeProps = Omit, 'color'> & const Badge = forwardRef( ( - { children, variant, size, color, responsive, dataTheme, className, ...props }, + { + children, + variant, + size, + color, + responsive, + dataTheme, + className, + ...props + }, ref ): JSX.Element => { const classes = twMerge( diff --git a/src/Breadcrumbs/BreadcrumbsItem.tsx b/src/Breadcrumbs/BreadcrumbsItem.tsx index b919ccbf..cb1dee2b 100644 --- a/src/Breadcrumbs/BreadcrumbsItem.tsx +++ b/src/Breadcrumbs/BreadcrumbsItem.tsx @@ -7,11 +7,7 @@ export type BreadcrumbsItemProps = React.LiHTMLAttributes & { const BreadcrumbsItem = React.forwardRef( ({ children, href, ...props }, ref): JSX.Element => { return ( -
  • +
  • {href ? {children} : <>{children}}
    • ) diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 57328ea9..0e4175d2 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -21,7 +21,7 @@ const Template: Story = (args) => { } export const Default = Template.bind({}) Default.args = { - children: 'Button' + children: 'Button', } export const Colors: Story = (args) => { @@ -108,14 +108,12 @@ export const AsHref: Story = (args) => { return (
    - +
    ) } diff --git a/src/Button/Button.test.tsx b/src/Button/Button.test.tsx index 75f44b60..9053a2c5 100644 --- a/src/Button/Button.test.tsx +++ b/src/Button/Button.test.tsx @@ -31,13 +31,9 @@ describe('Button', () => { }) it('Renders an anchor tag when an href exists', () => { - const { getByRole } = render( - - ) + const { getByRole } = render() - expect(getByRole("link")).toBeTruthy() + expect(getByRole('link')).toBeTruthy() expect(getByRole('link')).toHaveAttribute('href', '/home') }) }) diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 92fc1dd7..3edd8501 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -55,9 +55,7 @@ const Button = forwardRef( const classes = twMerge( 'btn', className, - clsx( - ((startIcon && !loading) || endIcon) && 'gap-2', - { + clsx(((startIcon && !loading) || endIcon) && 'gap-2', { [`btn-${size}`]: size, [`btn-${shape}`]: shape, [`btn-${variant}`]: variant, @@ -73,11 +71,7 @@ const Button = forwardRef( if (href) { return ( - + {startIcon && startIcon} {children} {endIcon && endIcon} diff --git a/src/ButtonGroup/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx index dac7a36a..d85288b7 100644 --- a/src/ButtonGroup/ButtonGroup.tsx +++ b/src/ButtonGroup/ButtonGroup.tsx @@ -17,9 +17,9 @@ const ButtonGroup = React.forwardRef( return (
    {children} diff --git a/src/Carousel/Carousel.stories.tsx b/src/Carousel/Carousel.stories.tsx index c8e61ca2..ce5f1c2d 100644 --- a/src/Carousel/Carousel.stories.tsx +++ b/src/Carousel/Carousel.stories.tsx @@ -12,13 +12,34 @@ export default { export const Default: Story = (args) => { return ( - - - - - - - + + + + + + + ) } @@ -27,30 +48,72 @@ Default.args = {} export const Snap: Story = (args) => { return ( - - - - - - - + + + + + + + ) } Snap.args = { - snap: 'end' + snap: 'end', } export const FullWidth: Story = (args) => { return ( - - - - - - - + + + + + + + ) } @@ -61,13 +124,34 @@ FullWidth.args = { export const HalfWidth: Story = (args) => { return ( - - - - - - - + + + + + + + ) } @@ -78,13 +162,34 @@ HalfWidth.args = { export const Vertical: Story = (args) => { return ( - - - - - - - + + + + + + + ) } @@ -96,10 +201,22 @@ Vertical.args = { export const Numbered: Story = (args) => { return ( - - - - + + + + ) } @@ -110,10 +227,22 @@ Numbered.args = { export const Sequential: Story = (args) => { return ( - - - - + + + + ) } @@ -130,10 +259,22 @@ export const CustomButton: Story = (args) => { return ( - - - - + + + + ) } diff --git a/src/Carousel/Carousel.tsx b/src/Carousel/Carousel.tsx index d3f70915..bab322e2 100644 --- a/src/Carousel/Carousel.tsx +++ b/src/Carousel/Carousel.tsx @@ -1,18 +1,21 @@ import React, { cloneElement, - createRef, + createRef, forwardRef, ReactElement, RefObject, useEffect, - useState + useState, } from 'react' import clsx from 'clsx' import { twMerge } from 'tailwind-merge' import { IComponentBaseProps } from '../types' -import CarouselItem, { CarouselItemProps, CarouselItemWidth } from './CarouselItem' +import CarouselItem, { + CarouselItemProps, + CarouselItemWidth, +} from './CarouselItem' import Button from '../Button' export type CarouselProps = React.HTMLAttributes & @@ -27,7 +30,8 @@ export type CarouselProps = React.HTMLAttributes & const Carousel = forwardRef( ( - { children, + { + children, display = 'slider', snap, vertical, @@ -45,7 +49,7 @@ const Carousel = forwardRef( clsx({ [`carousel-${snap}`]: snap, 'carousel-vertical': vertical, - 'w-full': display !== 'slider' + 'w-full': display !== 'slider', }) ) @@ -87,22 +91,22 @@ const Carousel = forwardRef( width: display !== 'slider' ? 'full' : width, hasButtons: display === 'sequential', buttonStyle, - onPrev: () => scrollToIndex(i - 1 < 0 ? children.length - 1 : i - 1), - onNext: () => scrollToIndex(i + 1 > children.length - 1 ? 0 : i + 1), + onPrev: () => + scrollToIndex(i - 1 < 0 ? children.length - 1 : i - 1), + onNext: () => + scrollToIndex(i + 1 > children.length - 1 ? 0 : i + 1), ...child.props, }) })}
    {display === 'numbered' && ( -
    +
    {children.map((_, i) => { if (buttonStyle != null) { - return ( - cloneElement(buttonStyle((i + 1).toString()), { - key: i, - onClick: () => scrollToIndex(i) - }) - ) + return cloneElement(buttonStyle((i + 1).toString()), { + key: i, + onClick: () => scrollToIndex(i), + }) } return ( diff --git a/src/Carousel/CarouselItem.tsx b/src/Carousel/CarouselItem.tsx index a2378757..537f96c6 100644 --- a/src/Carousel/CarouselItem.tsx +++ b/src/Carousel/CarouselItem.tsx @@ -33,7 +33,7 @@ const CarouselItem = ({ ...props }: CarouselItemProps): JSX.Element => { const classes = twMerge( - "carousel-item relative", + 'carousel-item relative', className, clsx({ 'w-full': width === 'full', @@ -51,10 +51,10 @@ const CarouselItem = ({ return ( <> {cloneElement(buttonStyle('❮'), { - onClick: onPrev + onClick: onPrev, })} {cloneElement(buttonStyle('❯'), { - onClick: onNext + onClick: onNext, })} ) @@ -62,8 +62,12 @@ const CarouselItem = ({ return ( <> - - + + ) } diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx index 368923dc..bd60dd8b 100644 --- a/src/Checkbox/Checkbox.stories.tsx +++ b/src/Checkbox/Checkbox.stories.tsx @@ -18,7 +18,7 @@ Default.args = {} export const Indeterminate = Template.bind({}) Indeterminate.args = { - indeterminate: true + indeterminate: true, } const FormTemplate: Story = (args) => { diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index be2de290..f04ca323 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, - useRef + useRef, } from 'react' import clsx from 'clsx' import { twMerge } from 'tailwind-merge' diff --git a/src/CodeMockup/CodeMockup.tsx b/src/CodeMockup/CodeMockup.tsx index 0edce463..55038885 100644 --- a/src/CodeMockup/CodeMockup.tsx +++ b/src/CodeMockup/CodeMockup.tsx @@ -12,7 +12,13 @@ const CodeMockup = forwardRef( const classes = twMerge('mockup-code', className) return ( -
    +
    {children}
    ) diff --git a/src/Countdown/Countdown.stories.tsx b/src/Countdown/Countdown.stories.tsx index 860c0c78..f8cd7c42 100644 --- a/src/Countdown/Countdown.stories.tsx +++ b/src/Countdown/Countdown.stories.tsx @@ -13,7 +13,7 @@ export const Default: Story = (args) => { useEffect(() => { const timer = setTimeout(() => { - setValue((v) => v <= 0 ? args.value : v - 1) + setValue((v) => (v <= 0 ? args.value : v - 1)) }, 1000) return () => { @@ -21,7 +21,7 @@ export const Default: Story = (args) => { } }, [value]) - return + return } Default.args = { value: 50, @@ -32,7 +32,7 @@ export const Clock: Story = (args) => { useEffect(() => { const timer = setTimeout(() => { - setValue((v) => v <= 0 ? args.value : v - 1) + setValue((v) => (v <= 0 ? args.value : v - 1)) }, 1000) return () => { @@ -41,7 +41,7 @@ export const Clock: Story = (args) => { }, [value]) return ( - + : : @@ -57,7 +57,7 @@ export const WithLabels: Story = (args) => { useEffect(() => { const timer = setTimeout(() => { - setValue((v) => v <= 0 ? args.value : v - 1) + setValue((v) => (v <= 0 ? args.value : v - 1)) }, 1000) return () => { @@ -66,21 +66,21 @@ export const WithLabels: Story = (args) => { }, [value]) return ( -
    -
    - +
    +
    + days
    -
    - +
    + hours
    -
    - +
    + min
    -
    - +
    + sec
    @@ -95,7 +95,7 @@ export const WithBoxes: Story = (args) => { useEffect(() => { const timer = setTimeout(() => { - setValue((v) => v <= 0 ? args.value : v - 1) + setValue((v) => (v <= 0 ? args.value : v - 1)) }, 1000) return () => { @@ -104,21 +104,21 @@ export const WithBoxes: Story = (args) => { }, [value]) return ( -
    -
    - +
    +
    + days
    -
    - +
    + hours
    -
    - +
    + min
    -
    - +
    + sec
    @@ -126,4 +126,4 @@ export const WithBoxes: Story = (args) => { } WithBoxes.args = { value: 26, -} \ No newline at end of file +} diff --git a/src/Drawer/Drawer.tsx b/src/Drawer/Drawer.tsx index 90e38d8b..2943daac 100644 --- a/src/Drawer/Drawer.tsx +++ b/src/Drawer/Drawer.tsx @@ -34,7 +34,12 @@ const Drawer = ({ ) return ( -
    +
    {children}
    diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx index 056fe4f2..feeff856 100644 --- a/src/Dropdown/Dropdown.tsx +++ b/src/Dropdown/Dropdown.tsx @@ -33,7 +33,13 @@ const Dropdown = React.forwardRef( ) return ( -
    +
      {item}
    diff --git a/src/Footer/Footer.tsx b/src/Footer/Footer.tsx index ccf15555..abbcb243 100644 --- a/src/Footer/Footer.tsx +++ b/src/Footer/Footer.tsx @@ -22,7 +22,13 @@ const Footer = React.forwardRef( ) return ( -
    +
    ) } ) diff --git a/src/Form/Form.tsx b/src/Form/Form.tsx index f1f1ad2e..806a0f76 100644 --- a/src/Form/Form.tsx +++ b/src/Form/Form.tsx @@ -13,7 +13,13 @@ const Form = React.forwardRef( const classes = twMerge('form-control', className) return ( -
    +
    {children}
    ) diff --git a/src/Hero/Hero.tsx b/src/Hero/Hero.tsx index 3bf4f9df..e96ce0c7 100644 --- a/src/Hero/Hero.tsx +++ b/src/Hero/Hero.tsx @@ -14,7 +14,13 @@ const Hero = React.forwardRef( const classes = twMerge('hero', className) return ( -
    +
    {children}
    ) diff --git a/src/Indicator/Indicator.tsx b/src/Indicator/Indicator.tsx index 1d2107ee..a0895c2b 100644 --- a/src/Indicator/Indicator.tsx +++ b/src/Indicator/Indicator.tsx @@ -37,7 +37,12 @@ const Indicator = React.forwardRef( return (
    -
    +
    {item}
    diff --git a/src/Menu/Menu.tsx b/src/Menu/Menu.tsx index 2336af98..1d7d86ff 100644 --- a/src/Menu/Menu.tsx +++ b/src/Menu/Menu.tsx @@ -75,7 +75,13 @@ const Menu = React.forwardRef( ) return ( -
      +
        ) } ) diff --git a/src/Modal/Modal.stories.tsx b/src/Modal/Modal.stories.tsx index d0356eda..05f39430 100644 --- a/src/Modal/Modal.stories.tsx +++ b/src/Modal/Modal.stories.tsx @@ -20,22 +20,20 @@ export const Default: Story = (args) => { <> - Lorem Ipsum + Lorem Ipsum - - Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut - adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea - quasi eligendi. Saepe velit autem minima. - + + Enim dolorem dolorum omnis atque necessitatibus. Consequatur aut + adipisci qui iusto illo eaque. Consequatur repudiandae et. Nulla ea + quasi eligendi. Saepe velit autem minima. + - - - - + + + + ) diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 1e856bbd..0e0b849f 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -36,10 +36,7 @@ const Modal = forwardRef( }) ) - const bodyClasses = twMerge( - 'modal-box', - className - ) + const bodyClasses = twMerge('modal-box', className) return (
        & - IComponentBaseProps +type ModalActionsProps = React.HTMLAttributes & + IComponentBaseProps -const ModalActions = React.forwardRef(({ - children, - className, - ...props -}, ref) => { +const ModalActions = React.forwardRef( + ({ children, className, ...props }, ref) => { const classes = twMerge('modal-action', className) return ( -
        - {children} -
        +
        + {children} +
        ) -}) + } +) -ModalActions.displayName = "ModalActions" +ModalActions.displayName = 'ModalActions' export default ModalActions diff --git a/src/Modal/ModalBody.tsx b/src/Modal/ModalBody.tsx index 029200c0..9f8f7ec7 100644 --- a/src/Modal/ModalBody.tsx +++ b/src/Modal/ModalBody.tsx @@ -2,22 +2,16 @@ import React from 'react' type ModalBodyProps = React.HTMLAttributes -const ModalBody = React.forwardRef(({ - children, - className, - ...props -}, ref) => { +const ModalBody = React.forwardRef( + ({ children, className, ...props }, ref) => { return ( -
        - {children} -
        +
        + {children} +
        ) -}) + } +) -ModalBody.displayName = "ModalBody" +ModalBody.displayName = 'ModalBody' export default ModalBody diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx index c541365e..d7988576 100644 --- a/src/Modal/ModalHeader.tsx +++ b/src/Modal/ModalHeader.tsx @@ -3,23 +3,17 @@ import { twMerge } from 'tailwind-merge' type ModalHeaderProps = React.HTMLAttributes -const ModalHeader = React.forwardRef(({ - children, - className, - ...props -}, ref) => { +const ModalHeader = React.forwardRef( + ({ children, className, ...props }, ref) => { const classes = twMerge('w-full mb-8 text-xl', className) return ( -
        - {children} -
        +
        + {children} +
        ) -}) + } +) -ModalHeader.displayName = "ModalHeader" +ModalHeader.displayName = 'ModalHeader' export default ModalHeader diff --git a/src/Navbar/Navbar.tsx b/src/Navbar/Navbar.tsx index f31c4e57..b35026f2 100644 --- a/src/Navbar/Navbar.tsx +++ b/src/Navbar/Navbar.tsx @@ -13,7 +13,14 @@ const Navbar = React.forwardRef( const classes = twMerge('navbar', className) return ( -
        +
        {children}
        ) diff --git a/src/PhoneMockup/PhoneMockup.tsx b/src/PhoneMockup/PhoneMockup.tsx index cc377072..d270e5f6 100644 --- a/src/PhoneMockup/PhoneMockup.tsx +++ b/src/PhoneMockup/PhoneMockup.tsx @@ -25,7 +25,13 @@ const PhoneMockup = forwardRef( ) return ( -
        +
        = (args) => { return ( -
        +
        @@ -28,43 +28,43 @@ Default.args = { export const PrimaryColor = Template.bind({}) PrimaryColor.args = { max: 100, - color: 'primary' + color: 'primary', } export const SecondaryColor = Template.bind({}) SecondaryColor.args = { max: 100, - color: 'secondary' + color: 'secondary', } export const AccentColor = Template.bind({}) AccentColor.args = { max: 100, - color: 'accent' + color: 'accent', } export const SuccessColor = Template.bind({}) SuccessColor.args = { max: 100, - color: 'success' + color: 'success', } export const InfoColor = Template.bind({}) InfoColor.args = { max: 100, - color: 'info' + color: 'info', } export const WarningColor = Template.bind({}) WarningColor.args = { max: 100, - color: 'warning' + color: 'warning', } export const ErrorColor = Template.bind({}) ErrorColor.args = { max: 100, - color: 'error' + color: 'error', } export const Indeterminate: Story = (args) => { diff --git a/src/RadialProgress/RadialProgress.stories.tsx b/src/RadialProgress/RadialProgress.stories.tsx index 1a7da8c2..28f306fe 100644 --- a/src/RadialProgress/RadialProgress.stories.tsx +++ b/src/RadialProgress/RadialProgress.stories.tsx @@ -20,21 +20,25 @@ Default.args = { export const CustomColor = Template.bind({}) CustomColor.args = { value: 75, - color: 'primary' + color: 'primary', } export const BackgroundColor = Template.bind({}) BackgroundColor.args = { value: 75, - className: 'bg-primary text-primary-content border-4 border-primary' + className: 'bg-primary text-primary-content border-4 border-primary', } export const CustomSizeAndThickness: Story = (args) => { return ( -
        - 70% - 80% +
        + + 70% + + + 80% +
        ) } -CustomSizeAndThickness.args = {} \ No newline at end of file +CustomSizeAndThickness.args = {} diff --git a/src/RadialProgress/RadialProgress.tsx b/src/RadialProgress/RadialProgress.tsx index 75bb950f..0de80f04 100644 --- a/src/RadialProgress/RadialProgress.tsx +++ b/src/RadialProgress/RadialProgress.tsx @@ -13,16 +13,19 @@ export type RadialProgressProps = React.HTMLAttributes & } const RadialProgress = forwardRef( - ({ - value, - size = '4rem', - thickness = '4px', - color, - dataTheme, - className, - children, - ...props - }, ref): JSX.Element => { + ( + { + value, + size = '4rem', + thickness = '4px', + color, + dataTheme, + className, + children, + ...props + }, + ref + ): JSX.Element => { const classes = twMerge( 'radial-progress', className, diff --git a/src/Stack/Stack.tsx b/src/Stack/Stack.tsx index d24a5731..0a18901b 100644 --- a/src/Stack/Stack.tsx +++ b/src/Stack/Stack.tsx @@ -11,7 +11,13 @@ const Stack = forwardRef( const classes = twMerge('stack', className) return ( -
        +
        {children}
        ) diff --git a/src/Steps/Steps.tsx b/src/Steps/Steps.tsx index 064bb0a2..25d73352 100644 --- a/src/Steps/Steps.tsx +++ b/src/Steps/Steps.tsx @@ -20,8 +20,8 @@ const Steps = React.forwardRef( aria-label="Steps" role="group" {...props} - data-theme={dataTheme} - className={classes} + data-theme={dataTheme} + className={classes} ref={ref} > {children} diff --git a/src/Swap/Swap.tsx b/src/Swap/Swap.tsx index f85cb041..e1ccbbc7 100644 --- a/src/Swap/Swap.tsx +++ b/src/Swap/Swap.tsx @@ -52,11 +52,7 @@ const Swap = React.forwardRef( }) return ( -