diff --git a/.github/workflows/benchmark.yaml b/.github/workflows/benchmark.yaml index e7e1527..0e45837 100644 --- a/.github/workflows/benchmark.yaml +++ b/.github/workflows/benchmark.yaml @@ -21,4 +21,4 @@ jobs: - name: Run run: | - yarn workspace vitest test \ No newline at end of file + yarn workspace vitest test --poolOptions.threads.isolate=false \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Alert/Alert.module.css b/benchmarks/vitest/tests/original/Alert/Alert.module.css deleted file mode 100644 index 49bc942..0000000 --- a/benchmarks/vitest/tests/original/Alert/Alert.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.main { - border: 1px solid transparent; - border-radius: 8px; - display: flex; - font-size: 14px; - padding: 16px; -} - -.error { - background: var(--R50); - border-color: var(--R400); - color: var(--R400); -} - -/* stylelint-disable-next-line selector-max-type, selector-max-combinators */ -.error a, .error strong { color: inherit } - -.info { - background: var(--N50); - border-color: var(--N400); - color: var(--N400); -} - -/* stylelint-disable-next-line selector-max-type, selector-max-combinators */ -.info a, .info strong { color: inherit } - -.success { - background: var(--G50); - border-color: var(--G400); - color: var(--G400); -} - -/* stylelint-disable-next-line selector-max-type, selector-max-combinators */ -.success a, .success strong { color: inherit } - -.warning { - background: var(--Y50); - border-color: var(--Y400); - color: var(--Y500); -} - -/* stylelint-disable-next-line selector-max-type, selector-max-combinators */ -.warning a, .warning strong { color: inherit } - -.icon { - margin-right: 16px; -} - -.title { - color: inherit; - font-weight: bold; - margin: 0 0 8px; -} - -.text { - display: flex; - flex-direction: column; -} - -.children { color: var(--COLOR-GRAY-800) } \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Alert/Alert.test.tsx b/benchmarks/vitest/tests/original/Alert/Alert.test.tsx deleted file mode 100644 index b67b8bf..0000000 --- a/benchmarks/vitest/tests/original/Alert/Alert.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import Alert from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render the given message', () => { - const {getByText} = render(Hello World); - expect(getByText('Hello World')).toBeDefined(); - }); - - it('should render with only a title', () => { - const {getByText} = render(); - expect(getByText('Hello World')).toBeDefined(); - }); - - it('should support all the different icons', () => { - const {getByLabelText, rerender} = render(); - expect(getByLabelText('warning-sign')).toBeDefined(); - - rerender() - expect(getByLabelText('info-sign')).toBeDefined(); - - rerender() - expect(getByLabelText('tick-circle')).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/Alert/Alert.tsx b/benchmarks/vitest/tests/original/Alert/Alert.tsx deleted file mode 100644 index e5bf66d..0000000 --- a/benchmarks/vitest/tests/original/Alert/Alert.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import Icon, {IconNames} from '../Icon'; -import clsx from 'clsx'; -import React from 'react'; -import styles from './Alert.module.css'; - -type IntentType = 'error' | 'info' | 'success' | 'warning'; - -type PropsType = { - className?: string | null, - children?: React.ReactNode, - intent?: IntentType, - title?: string | null, -} - -const getIcon = (intent: IntentType) => { - switch (intent) { - case 'info': return IconNames.InfoSign; - case 'success': return IconNames.TickCircle; - case 'warning': return IconNames.WarningSign; - case 'error': return IconNames.Error; - } - return IconNames.Error; -}; - -const Alert = ({ - className, - children, - intent = 'error', - title, -}: PropsType) => { - const classes = clsx(styles.main, styles[intent], className); - - return ( -
- -
- {title ?

{title}

: null} - {children ? ( -
{children}
- ) : null} -
-
- ); -}; - -export default Alert; diff --git a/benchmarks/vitest/tests/original/Alert/index.ts b/benchmarks/vitest/tests/original/Alert/index.ts deleted file mode 100644 index d2b7f86..0000000 --- a/benchmarks/vitest/tests/original/Alert/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Alert'; diff --git a/benchmarks/vitest/tests/original/Avatar/Avatar.module.css b/benchmarks/vitest/tests/original/Avatar/Avatar.module.css deleted file mode 100644 index 2722b15..0000000 --- a/benchmarks/vitest/tests/original/Avatar/Avatar.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.main { - align-items: center; - border-radius: 100%; - display: inline-flex; - font-size: 15px; - height: 40px; - justify-content: center; - width: 40px; -} \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Avatar/Avatar.test.tsx b/benchmarks/vitest/tests/original/Avatar/Avatar.test.tsx deleted file mode 100644 index c179a22..0000000 --- a/benchmarks/vitest/tests/original/Avatar/Avatar.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import Avatar from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render the avatar with the initials of the title', () => { - const {getByText} = render(); - expect(getByText('HW')).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/Avatar/Avatar.tsx b/benchmarks/vitest/tests/original/Avatar/Avatar.tsx deleted file mode 100644 index bb087e1..0000000 --- a/benchmarks/vitest/tests/original/Avatar/Avatar.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; -import styles from './Avatar.module.css'; - -type PropsType = { - className?: string | null, - colorKey?: SupportedColorsType | null, - title?: string | null, -} - -type SupportedColorsType = typeof SUPPORTED_COLORS[number]; - -const SUPPORTED_COLORS = [ - 'N', 'B', 'G', 'Y', 'R', 'V', 'T', 'P', 'O', -] as const; - -const stringToColorIndex = (str: string) => { - // This gives us a number between 0 and 41 - const chr = (str.length ? str.charCodeAt(0) : 0) - 49; - - // This gives us an index in our supported color range - return Math.floor(chr / (41 / SUPPORTED_COLORS.length)); -}; - -const getColor = (initials: string, colorKey?: string | null) => { - const colorIndex = stringToColorIndex(initials); - const key = colorKey || SUPPORTED_COLORS[colorIndex]; - const background = `var(--${key}100)`; - const color = `var(--${key}600)`; - return {background, color}; -}; - -const Avatar = ({ - className, - colorKey, - title, -}: PropsType) => { - const classes = clsx(styles.main, className); - const initials = title?.length ? - title - .trim() - .split(' ') - .map((word) => word[0].toUpperCase()) - .slice(0, 2) - .join('') : - null; - const {background, color} = getColor(initials || '', colorKey); - const style = {background, color}; - - return ( -
- {initials} -
- ); -}; - -export default Avatar; diff --git a/benchmarks/vitest/tests/original/Avatar/index.ts b/benchmarks/vitest/tests/original/Avatar/index.ts deleted file mode 100644 index e1fdf1e..0000000 --- a/benchmarks/vitest/tests/original/Avatar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Avatar'; diff --git a/benchmarks/vitest/tests/original/Badge/Badge.module.css b/benchmarks/vitest/tests/original/Badge/Badge.module.css deleted file mode 100644 index 5c4b0ea..0000000 --- a/benchmarks/vitest/tests/original/Badge/Badge.module.css +++ /dev/null @@ -1,53 +0,0 @@ -.main { - align-items: center; - border-radius: 4px; - display: inline-flex; - font-size: 11px; - height: 16px; - padding: 0 6px; -} - -.blue { - background: var(--B200); - color: var(--B600); -} - -.green { - background: var(--G300); - color: var(--G600); -} - -.neutral { - background: var(--N300); - color: var(--N800); -} - -.orange { - background: var(--O200); - color: var(--O600); -} - -.purple { - background: var(--P200); - color: var(--P600); -} - -.red { - background: var(--R200); - color: var(--R600); -} - -.turquoise { - background: var(--T200); - color: var(--T600); -} - -.violet { - background: var(--V200); - color: var(--V600); -} - -.yellow { - background: var(--Y200); - color: var(--Y600); -} \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Badge/Badge.test.tsx b/benchmarks/vitest/tests/original/Badge/Badge.test.tsx deleted file mode 100644 index 051c6e0..0000000 --- a/benchmarks/vitest/tests/original/Badge/Badge.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import Badge from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render the given badge', () => { - const {getByText} = render(Hello World); - expect(getByText('Hello World')).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/Badge/Badge.tsx b/benchmarks/vitest/tests/original/Badge/Badge.tsx deleted file mode 100644 index e36e6f6..0000000 --- a/benchmarks/vitest/tests/original/Badge/Badge.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; -import styles from './Badge.module.css'; - -type PropsType = { - className?: string | null, - children: string, - color?: 'blue' | 'green' | 'neutral' | 'orange' | 'purple' | 'red' | 'turquoise' | 'violet' | 'yellow', -} - -const Badge = ({ - className, - children, - color = 'neutral', -}: PropsType) => ( - - {children} - -); - -export default Badge; diff --git a/benchmarks/vitest/tests/original/Badge/index.ts b/benchmarks/vitest/tests/original/Badge/index.ts deleted file mode 100644 index 1cacee3..0000000 --- a/benchmarks/vitest/tests/original/Badge/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Badge'; diff --git a/benchmarks/vitest/tests/original/Card/Card.module.css b/benchmarks/vitest/tests/original/Card/Card.module.css deleted file mode 100644 index 1e03bf6..0000000 --- a/benchmarks/vitest/tests/original/Card/Card.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.main { - background: var(--N0); - border-radius: 8px; - box-shadow: 0 4px 8px rgba(16, 24, 64, 0.08); - display: flex; - padding: 32px; -} \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Card/Card.test.tsx b/benchmarks/vitest/tests/original/Card/Card.test.tsx deleted file mode 100644 index 44c6e44..0000000 --- a/benchmarks/vitest/tests/original/Card/Card.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import Card from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render the given children', () => { - const {getByText} = render(Hello World); - expect(getByText('Hello World')).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/Card/Card.tsx b/benchmarks/vitest/tests/original/Card/Card.tsx deleted file mode 100644 index d4f0095..0000000 --- a/benchmarks/vitest/tests/original/Card/Card.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import clsx from 'clsx'; -import React from 'react'; -import styles from './Card.module.css'; - -type PropsType = { - className?: string | null, - children?: React.ReactNode, -} - -const Card = ({ - className, - children, -}: PropsType) => ( -
- {children} -
-); - -export default Card; diff --git a/benchmarks/vitest/tests/original/Card/index.ts b/benchmarks/vitest/tests/original/Card/index.ts deleted file mode 100644 index 324373e..0000000 --- a/benchmarks/vitest/tests/original/Card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Card'; diff --git a/benchmarks/vitest/tests/original/Checkbox/Checkbox.module.css b/benchmarks/vitest/tests/original/Checkbox/Checkbox.module.css deleted file mode 100644 index 10c559b..0000000 --- a/benchmarks/vitest/tests/original/Checkbox/Checkbox.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.main { - color: var(--N800); - cursor: pointer; - position: relative; -} - -.input { display: none } - -.checkbox { - align-items: center; - background: var(--N0); - border: 1px solid var(--N400); - border-radius: 4px; - display: flex; - height: 16px; - justify-content: center; - position: relative; - transition: - background 100ms ease-in-out, - border-color 100ms ease-in-out, - color 100ms ease-in-out; - width: 16px; -} - -.checkboxChecked { - background: var(--G400); - border-color: var(--G400); - color: var(--N0); -} - -/* stylelint-disable selector-max-combinators */ -.main:focus-visible .checkbox, -.main:hover .checkbox { - border-color: var(--N600); -} - -.main:active .checkbox { - border-color: var(--N500); -} - -.main:focus-visible .checkboxChecked, -.main:hover .checkboxChecked { - background: var(--G500); - border-color: var(--G500); -} - -.main:active .checkboxChecked { - background: var(--G600); - border-color: var(--G600); -} -/* stylelint-enable selector-max-combinators */ - -/* Needed to avoid layout shift when checkbox is an inline block */ -.icon { position: absolute } \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Checkbox/Checkbox.test.tsx b/benchmarks/vitest/tests/original/Checkbox/Checkbox.test.tsx deleted file mode 100644 index 0de5f0c..0000000 --- a/benchmarks/vitest/tests/original/Checkbox/Checkbox.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import Checkbox from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render the checkbox', () => { - const {getByRole} = render( {}} />); - expect(getByRole('checkbox')).toBeDefined(); - }); - - it('should support the indeterminate state', () => { - const {getByLabelText} = render( - {}} /> - ); - expect(getByLabelText('indeterminate')).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/Checkbox/Checkbox.tsx b/benchmarks/vitest/tests/original/Checkbox/Checkbox.tsx deleted file mode 100644 index aeb93c0..0000000 --- a/benchmarks/vitest/tests/original/Checkbox/Checkbox.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import clsx from 'clsx'; -import Icon from '../Icon'; -import React from 'react'; -import styles from './Checkbox.module.css'; - -type PropsType = { - checked?: boolean, - className?: string | null, - indeterminate?: boolean, - label?: string, - onChange?: ((e: React.ChangeEvent) => unknown) | undefined, - title?: string, -} - -const getIcon = ({ - checked, - indeterminate, -}: { - checked: boolean, - indeterminate: boolean, -}) => { - if (indeterminate) return ( - - - - ); - if (checked) return ; - return null; -}; - -const Checkbox = ({ - className, - checked = false, - indeterminate = false, - label, - onChange, - title, -}: PropsType) => { - const classes = clsx(styles.main, className); - const checkboxClasses = clsx( - styles.checkbox, - checked || indeterminate ? styles.checkboxChecked : null - ); - - return ( - - ); -}; - -export default Checkbox; diff --git a/benchmarks/vitest/tests/original/Checkbox/index.ts b/benchmarks/vitest/tests/original/Checkbox/index.ts deleted file mode 100644 index b03c7a9..0000000 --- a/benchmarks/vitest/tests/original/Checkbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Checkbox'; diff --git a/benchmarks/vitest/tests/original/Collapsible/Collapsible.module.css b/benchmarks/vitest/tests/original/Collapsible/Collapsible.module.css deleted file mode 100644 index 3a5a53e..0000000 --- a/benchmarks/vitest/tests/original/Collapsible/Collapsible.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.main { - display: flex; - flex-direction: column; -} - -.headerButton { - align-items: center; - background: transparent; - border: 0; - border-radius: 4px; - color: var(--N800); - cursor: pointer; - display: flex; - font-size: 14px; - font-weight: bold; - height: 32px; - justify-content: space-between; - outline: none; - padding: 0 8px; -} - -.headerButton:hover { - background: rgba(0, 0, 0, 0.1); -} - -.headerButton:focus-visible { - box-shadow: 0 0 0 2px var(--B200); -} - -.content { overflow: hidden } \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/Collapsible/Collapsible.test.tsx b/benchmarks/vitest/tests/original/Collapsible/Collapsible.test.tsx deleted file mode 100644 index d323ea0..0000000 --- a/benchmarks/vitest/tests/original/Collapsible/Collapsible.test.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import {render, waitForElementToBeRemoved} from '@testing-library/react'; -import Collapsible from '.'; -import React from 'react'; -import userEvent from '@testing-library/user-event'; - -describe('', () => { - it('should render the children for the element', () => { - const {getByText} = render( - - Hello World - - ); - expect(getByText('Hello World')).toBeDefined(); - }); - - it('should be able to toggle the collapsible content', async () => { - const user = userEvent.setup(); - const {getByText, queryByText} = render( - - Hello World - - ); - expect(getByText('Hello World')).toBeDefined(); - - await user.click(getByText('My Title')) - - await waitForElementToBeRemoved(queryByText('Hello World')); - }); -}); diff --git a/benchmarks/vitest/tests/original/Collapsible/Collapsible.tsx b/benchmarks/vitest/tests/original/Collapsible/Collapsible.tsx deleted file mode 100644 index da9705a..0000000 --- a/benchmarks/vitest/tests/original/Collapsible/Collapsible.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import {AnimatePresence, motion} from 'framer-motion'; -import React, {useState} from 'react'; -import clsx from 'clsx'; -import Icon from '../Icon'; -import styles from './Collapsible.module.css'; - -type PropsType = { - className?: string | null, - children?: React.ReactNode, - contentClassName?: string, - initiallyCollapsed?: boolean, - title: React.ReactNode, -} - -const TRANSITION = { - duration: 0.5, - type: 'spring', -}; - -const VARIANTS = { - open: {height: 'auto', marginTop: 16}, - collapsed: {height: 0, marginTop: 0}, -}; - -const Collapsible = ({ - className, - children, - contentClassName, - initiallyCollapsed = false, - title, -}: PropsType) => { - const [isCollapsed, setIsCollapsed] = useState(initiallyCollapsed); - - const handleToggleClick = () => setIsCollapsed(!isCollapsed); - - return ( -
- - - {!isCollapsed ? ( - - {children} - - ) : null} - -
- ); -}; - -export default Collapsible; diff --git a/benchmarks/vitest/tests/original/Collapsible/index.ts b/benchmarks/vitest/tests/original/Collapsible/index.ts deleted file mode 100644 index 1d44d8e..0000000 --- a/benchmarks/vitest/tests/original/Collapsible/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Collapsible'; diff --git a/benchmarks/vitest/tests/original/DateString/DateString.module.css b/benchmarks/vitest/tests/original/DateString/DateString.module.css deleted file mode 100644 index a8ede42..0000000 --- a/benchmarks/vitest/tests/original/DateString/DateString.module.css +++ /dev/null @@ -1 +0,0 @@ -.main { text-transform: capitalize } \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/DateString/DateString.test.tsx b/benchmarks/vitest/tests/original/DateString/DateString.test.tsx deleted file mode 100644 index 5efe063..0000000 --- a/benchmarks/vitest/tests/original/DateString/DateString.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import {describe, expect, it} from 'vitest'; -import DateString from '.'; -import React from 'react'; -import {render} from '@testing-library/react'; - -describe('', () => { - it('should render nothing if nothing is given', () => { - const {container} = render(); - expect(container.innerHTML).toEqual(''); - }); - - it('should support Date objects as children', () => { - const {getByText} = render( - {new Date(2022, 1, 1)} - ); - expect(getByText('2022-02-01')).toBeDefined(); - }); - - it('should support strings as children', () => { - const {getByText} = render( - 2022-02-01T01:02:03Z - ); - expect(getByText('2022-02-01')).toBeDefined(); - }); - - it('should show yesterday as long form text', () => { - const today = new Date(); - const yesterday = new Date(today.setDate(today.getDate() - 1)).toISOString(); - const {getByText} = render( - {yesterday} - ); - expect(getByText(/yesterday/u)).toBeDefined(); - }); -}); diff --git a/benchmarks/vitest/tests/original/DateString/DateString.tsx b/benchmarks/vitest/tests/original/DateString/DateString.tsx deleted file mode 100644 index 2ec5e7d..0000000 --- a/benchmarks/vitest/tests/original/DateString/DateString.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// @ts-expect-error Importing an internal lib -import buildFormatLongFn from 'date-fns/locale/_lib/buildFormatLongFn'; -// @ts-expect-error Importing an internal lib -import type {FormatLong} from 'date-fns/locale/types'; -import {formatRelative} from 'date-fns'; -import React from 'react'; -import styles from './DateString.module.css'; -import usLocale from 'date-fns/locale/en-US'; - -type PropsType = { - children?: Date | string | null, -} - -const DateString = ({children}: PropsType) => { - if (!children) return null; - - const locale = { - ...usLocale, - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - formatLong: { - ...usLocale.formatLong, - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - date: buildFormatLongFn({ - formats: { - full: 'EEEE, MMMM do, y', - long: 'MMMM do, y', - medium: 'MMM d, y', - short: 'yyyy-MM-dd', - }, - defaultWidth: 'full', - }) as unknown, - } as FormatLong, - }; - - return ( - - {formatRelative(new Date(children), new Date(), {locale})} - - ); -}; - -export default DateString; diff --git a/benchmarks/vitest/tests/original/DateString/index.ts b/benchmarks/vitest/tests/original/DateString/index.ts deleted file mode 100644 index aac16ec..0000000 --- a/benchmarks/vitest/tests/original/DateString/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './DateString'; diff --git a/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.test.tsx b/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.test.tsx deleted file mode 100644 index 626fa15..0000000 --- a/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.test.tsx +++ /dev/null @@ -1,22 +0,0 @@ -// @vitest-environment happy-dom - -import {describe, expect, it} from 'vitest'; -import React from 'react'; -import {render} from '@testing-library/react'; -import StatusBadge from '.'; - -describe('', () => { - it('should render without failure', () => { - const {asFragment} = render(); - expect(asFragment()).toMatchInlineSnapshot(` - - - DRAFTED - - - `); - }); -}); diff --git a/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.tsx b/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.tsx deleted file mode 100644 index 72b5a9c..0000000 --- a/benchmarks/vitest/tests/original/StatusBadge/StatusBadge.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Badge from '../Badge'; -import React from 'react'; - -type PropsType = { - status: 'DRAFTED' | 'COMPLETED', -}; - -const STATUSES = [ - {color: 'green' as const, value: 'DRAFTED'}, - {color: 'orange' as const, value: 'COMPLETED'} -] - -const StatusBadge = ({ - status, -}: PropsType) => { - const record = STATUSES.find(({value}) => value === status); - - return ( - - {status} - - ); -}; - -export default StatusBadge; diff --git a/benchmarks/vitest/tests/original/StatusBadge/index.ts b/benchmarks/vitest/tests/original/StatusBadge/index.ts deleted file mode 100644 index ce69851..0000000 --- a/benchmarks/vitest/tests/original/StatusBadge/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './StatusBadge'; diff --git a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.module.css b/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.module.css deleted file mode 100644 index f83de95..0000000 --- a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.main { - background: var(--N900); - border-radius: 4px; - box-shadow: - rgba(67, 90, 111, 0) 0 0 1px, - rgba(67, 90, 111, 0) 0 8px 10px -4px; - color: var(--N100); - font-size: 12px; - max-width: 320px; - min-height: 16px; - padding: 8px; - pointer-events: none; - position: relative; - text-align: center; - user-select: none; - z-index: 1000; -} - -.arrow { - background: var(--N900); - height: 8px; - position: absolute; - transform: rotate(45deg); - width: 8px; -} \ No newline at end of file diff --git a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.test.tsx b/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.test.tsx deleted file mode 100644 index 322575d..0000000 --- a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -// @vitest-environment happy-dom - -import {describe, expect, it} from 'vitest'; -import React from 'react'; -import {render} from '@testing-library/react'; -import WithTooltip from '.'; - -describe('', () => { - it('should render render nothing if no tooltip was given', () => { - const {asFragment} = render( - Howdy - ); - expect(asFragment()).toMatchInlineSnapshot(` - - - Howdy - - - `); - }); -}); diff --git a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.tsx b/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.tsx deleted file mode 100644 index e80f24d..0000000 --- a/benchmarks/vitest/tests/original/WithTooltip/WithTooltip.tsx +++ /dev/null @@ -1,165 +0,0 @@ -/* eslint-disable react/jsx-props-no-spreading */ - -import {AnimatePresence, motion} from 'framer-motion'; -import { - arrow, - autoPlacement, - autoUpdate, - FloatingPortal, - offset, - shift, - useDismiss, - useFloating, - useHover, - useInteractions, - useRole, -} from '@floating-ui/react-dom-interactions'; -import type {Coords, Placement} from '@floating-ui/react-dom-interactions'; -import React, {cloneElement, forwardRef, useRef, useState} from 'react'; -import clsx from 'clsx'; -import styles from './WithTooltip.module.css'; - -type PropsType = { - children: JSX.Element, - // Force placement - placement?: Placement, - // This is the body of the tooltip - tooltip?: React.ReactNode | null, -}; - -const ARROW_SIZE = 4; - -const getArrowStyle = (arrow: Partial | undefined, placement: Placement) => { - const arrowX = arrow?.x || 0; - const arrowY = arrow?.y || 0; - - switch (placement) { - case 'left': - return { - right: arrowX - ARROW_SIZE, - top: arrowY, - }; - case 'right': - return { - left: arrowX - ARROW_SIZE, - top: arrowY, - }; - case 'bottom': - return { - left: arrowX, - top: arrowY - ARROW_SIZE, - }; - default: - return { - left: arrowX, - bottom: arrowY - ARROW_SIZE, - }; - } -}; - -const WithTooltip = forwardRef(({ - children, - placement: forcedPlacement, - tooltip, - ...parentProps -}, parentRef) => { - const [isOpen, setIsOpen] = useState(false); - const arrowRef = useRef(null); - - const { - context, - floating, - placement: calculatedPlacement, - reference, - strategy, - x, - y, - middlewareData: md, - } = useFloating({ - middleware: [ - offset(8), - autoPlacement({ - allowedPlacements: forcedPlacement ? - [forcedPlacement] : - ['top', 'bottom'], - }), - shift({padding: 8}), - arrow({element: arrowRef, padding: 8}), - ], - onOpenChange: setIsOpen, - open: isOpen, - whileElementsMounted: autoUpdate, - }); - - const placement = forcedPlacement ? forcedPlacement : calculatedPlacement; - - const ref = reference; - - const {getReferenceProps, getFloatingProps} = useInteractions([ - // TODO: Form elements are auto-focused in the app for some reason. - // Until we can figure out, keep this off. - // useFocus(context), - useHover(context, {move: false}), - useRole(context, {role: 'tooltip'}), - useDismiss(context, {referencePress: true}), - ]); - - const arrowStyle = getArrowStyle(md.arrow, placement); - // eslint-disable-next-line no-nested-ternary - const translateY = placement === 'bottom' ? 10 : placement === 'top' ? -10 : 0; - // eslint-disable-next-line no-nested-ternary - const translateX = placement === 'right' ? 10 : placement === 'left' ? -10 : 0; - - return ( - <> - {cloneElement( - children, - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - getReferenceProps({ - ref, - ...children.props, - ...parentProps, - onKeyDown: (event) => { - // Dismiss if pressing Spacebar or Enter - if (event.keyCode === 32 || event.keyCode === 13) { - setIsOpen(false); - } - }, - }) - )} - - {isOpen && tooltip != null ? ( - - - {tooltip} -
- - - ) : null} - - - ); -}); - -WithTooltip.displayName = 'WithTooltip'; - -export default WithTooltip; diff --git a/benchmarks/vitest/tests/original/WithTooltip/index.ts b/benchmarks/vitest/tests/original/WithTooltip/index.ts deleted file mode 100644 index 84ad64f..0000000 --- a/benchmarks/vitest/tests/original/WithTooltip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {default} from './WithTooltip';