From 2ec263ff8f3c50c81754a8b226e6ea69705b2cd6 Mon Sep 17 00:00:00 2001 From: = <=> Date: Tue, 6 Feb 2024 19:12:43 +0530 Subject: [PATCH] UI: move from cx to cn classname utility --- .../ActionList/components/Item/Item.tsx | 9 +- .../components/AlertDialog/AlertDialog.tsx | 11 +- .../opub-ui/src/components/Avatar/Avatar.tsx | 8 +- .../opub-ui/src/components/Badge/Badge.tsx | 4 +- .../components/Badge/components/Pip/Pip.tsx | 4 +- packages/opub-ui/src/components/Box/Box.tsx | 10 +- .../components/Breadcrumbs/Breadcrumbs.tsx | 7 +- .../opub-ui/src/components/Button/Button.tsx | 13 +- .../components/ButtonGroup/ButtonGroup.tsx | 6 +- .../ButtonGroup/components/Item/Item.tsx | 6 +- .../src/components/Calendar/Calendar.tsx | 15 +- .../src/components/Calendar/RangeCalendar.tsx | 15 +- .../components/CalendarGrid/CalendarCell.tsx | 9 +- .../src/components/Checkbox/Checkbox.tsx | 11 +- .../CheckboxGroup/CheckboxGroup.tsx | 7 +- .../opub-ui/src/components/Choice/Choice.tsx | 6 +- .../components/Collapsible/Collapsible.tsx | 11 +- .../opub-ui/src/components/Connected/Item.tsx | 7 +- .../src/components/DataTable/DataTable.tsx | 22 +- .../DataTable/components/Cell/Cell.tsx | 11 +- .../DataTable/components/Row/Row.tsx | 9 +- .../src/components/DateField/DateField.tsx | 235 +++++++++--------- .../src/components/DatePicker/DatePicker.tsx | 177 ++++++------- .../components/DatePicker/DateRangePicker.tsx | 173 +++++++------ .../src/components/DatePicker/MonthPicker.tsx | 187 +++++++------- .../opub-ui/src/components/Dialog/Dialog.tsx | 10 +- .../components/CloseButton/CloseButton.tsx | 7 +- .../src/components/DropZone/DropZone.tsx | 30 +-- .../components/FileUpload/FileUpload.tsx | 17 +- .../FormLayout/components/Group/Group.tsx | 6 +- packages/opub-ui/src/components/Icon/Icon.tsx | 5 +- .../opub-ui/src/components/Input/Input.tsx | 32 +-- .../opub-ui/src/components/Label/Label.tsx | 14 +- .../src/components/Labelled/Labelled.tsx | 159 ++++++------ .../components/ProgressBar/ProgressBar.tsx | 8 +- .../src/components/RadioGroup/RadioGroup.tsx | 17 +- .../components/RangeSlider/RangeSlider.tsx | 9 +- .../src/components/ScrollArea/ScrollArea.tsx | 7 +- .../opub-ui/src/components/Select/Select.tsx | 9 +- .../opub-ui/src/components/Sheet/Sheet.tsx | 9 +- .../SkeletonDisplayText.tsx | 6 +- .../components/SkeletonTabs/SkeletonTabs.tsx | 4 +- .../SkeletonThumbnail/SkeletonThumbnail.tsx | 6 +- .../src/components/Spinner/Spinner.tsx | 5 +- .../opub-ui/src/components/Table/Table.tsx | 25 +- .../components/Table/components/Cell/Cell.tsx | 11 +- packages/opub-ui/src/components/Tabs/Tabs.tsx | 11 +- packages/opub-ui/src/components/Tag/Tag.tsx | 13 +- packages/opub-ui/src/components/Text/Text.tsx | 4 +- .../src/components/Thumbnail/Thumbnail.tsx | 8 +- .../src/components/TimeField/TimeField.tsx | 107 ++++---- packages/opub-ui/src/components/Tray/Tray.tsx | 7 +- 52 files changed, 773 insertions(+), 746 deletions(-) diff --git a/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx b/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx index 0d2474cf..54703acb 100644 --- a/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx +++ b/packages/opub-ui/src/components/ActionList/components/Item/Item.tsx @@ -1,13 +1,14 @@ +import React from 'react'; + import type { ActionListItemDescriptor } from '../../../../types/actionlist'; import { Color } from '../../../../types/icon'; +import { cn } from '../../../../utils'; import { handleMouseUpByBlurring } from '../../../../utils/focus'; import { Box } from '../../../Box'; import { UnstyledLink } from '../../../Button/BaseLink'; import { Icon } from '../../../Icon'; import { Text } from '../../../Text'; import styles from '../../ActionList.module.scss'; -import cx from 'classnames'; -import React from 'react'; export type ItemProps = ActionListItemDescriptor; @@ -28,7 +29,7 @@ export function Item({ active, role, }: ItemProps) { - const className = cx( + const className = cn( styles.Item, disabled && styles.disabled, destructive && styles.destructive, @@ -65,7 +66,7 @@ export function Item({ ); const suffixMarkup = suffix && ( - + {} ); diff --git a/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx b/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx index 734ccac6..5d9130d4 100644 --- a/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx +++ b/packages/opub-ui/src/components/AlertDialog/AlertDialog.tsx @@ -1,9 +1,10 @@ -import styles from '../Dialog/Dialog.module.scss'; +import React, { forwardRef, Ref } from 'react'; +import * as AlertDialogRadix from '@radix-ui/react-alert-dialog'; + +import { cn } from '../../utils'; import { Footer, FooterProps } from '../Dialog/components'; +import styles from '../Dialog/Dialog.module.scss'; import { Header } from './components'; -import * as AlertDialogRadix from '@radix-ui/react-alert-dialog'; -import cx from 'classnames'; -import React, { forwardRef, Ref } from 'react'; interface DialogProps extends AlertDialogRadix.DialogProps { Trigger?: AlertDialogRadix.DialogTriggerProps; @@ -74,7 +75,7 @@ const Content = forwardRef((props: ContentProps, ref: any) => { const rId = React.useId(); const finalId = id || rId; - const classname = cx( + const classname = cn( styles.Dialog, small && styles.sizeSmall, large && styles.sizeLarge, diff --git a/packages/opub-ui/src/components/Avatar/Avatar.tsx b/packages/opub-ui/src/components/Avatar/Avatar.tsx index c0402bca..dca3bfa6 100644 --- a/packages/opub-ui/src/components/Avatar/Avatar.tsx +++ b/packages/opub-ui/src/components/Avatar/Avatar.tsx @@ -1,8 +1,8 @@ -import { Box } from '../Box'; +import * as AvatarRadix from '@radix-ui/react-avatar'; + +import { cn } from '../../utils'; import { Text } from '../Text'; import styles from './Avatar.module.scss'; -import * as AvatarRadix from '@radix-ui/react-avatar'; -import cx from 'classnames'; type Props = { showLabel?: boolean; @@ -38,7 +38,7 @@ const Avatar = ({ .map((item: any) => item[0]) .join('') .toUpperCase(); - const className = cx( + const className = cn( styles.Avatar, variantStyles[size], size === 'medium' && showInitials && styles.AvatarProfileMedium, diff --git a/packages/opub-ui/src/components/Badge/Badge.tsx b/packages/opub-ui/src/components/Badge/Badge.tsx index 1b05f3f6..355d45ef 100644 --- a/packages/opub-ui/src/components/Badge/Badge.tsx +++ b/packages/opub-ui/src/components/Badge/Badge.tsx @@ -1,8 +1,8 @@ import { BadgeProps } from '../../types/badge'; +import { cn } from '../../utils'; import { Text } from '../Text'; import styles from './Badge.module.scss'; import { Pip } from './components/Pip'; -import cx from 'classnames'; export const Badge = ({ progress = 'default', @@ -33,7 +33,7 @@ export const Badge = ({ return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`; } - const className = cx( + const className = cn( styles.Badge, status && styles[variationName('status', status)] ); diff --git a/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx b/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx index 03388c5d..8b757622 100644 --- a/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx +++ b/packages/opub-ui/src/components/Badge/components/Pip/Pip.tsx @@ -1,5 +1,5 @@ -import cx from 'classnames'; import { Progress, Status } from '../../../../types/badge'; +import { cn } from '../../../../utils'; import { Text } from '../../../Text'; import styles from './Pip.module.scss'; @@ -18,7 +18,7 @@ export const Pip = ({ progress = 'complete', accessibilityLabelOverride, }: PipProps) => { - const className = cx( + const className = cn( styles.Pip, status && styles[variationName('status', status)], progress && styles[variationName('progress', progress)] diff --git a/packages/opub-ui/src/components/Box/Box.tsx b/packages/opub-ui/src/components/Box/Box.tsx index 6036859b..73515034 100644 --- a/packages/opub-ui/src/components/Box/Box.tsx +++ b/packages/opub-ui/src/components/Box/Box.tsx @@ -1,7 +1,11 @@ -import cx from 'classnames'; import React, { createElement, forwardRef } from 'react'; + import { BoxProps, FlexStyleProps } from '../../types/box'; -import { getResponsiveProps, sanitizeCustomProperties } from '../../utils/css'; +import { + cn, + getResponsiveProps, + sanitizeCustomProperties, +} from '../../utils/css'; import boxStyles from './Box.module.scss'; export const Box = forwardRef( @@ -175,7 +179,7 @@ export const Box = forwardRef( alignContent, } as React.CSSProperties; - const className = cx( + const className = cn( boxStyles.Box, visuallyHidden && boxStyles.visuallyHidden, printHidden && boxStyles.printHidden, diff --git a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx index dc6efe34..3ba049d2 100644 --- a/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/opub-ui/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,7 +1,8 @@ +import React from 'react'; + +import { cn } from '../../utils'; import { Text } from '../Text'; import styles from './Breadcrumbs.module.scss'; -import cx from 'classnames'; -import React from 'react'; type Props = { crumbs: { @@ -12,7 +13,7 @@ type Props = { itemsAfterCollapse?: number; }; -const className = cx(styles.Breadcrumbs); +const className = cn(styles.Breadcrumbs); const Breadcrumbs = ({ crumbs, diff --git a/packages/opub-ui/src/components/Button/Button.tsx b/packages/opub-ui/src/components/Button/Button.tsx index 1b7e54e8..42440256 100644 --- a/packages/opub-ui/src/components/Button/Button.tsx +++ b/packages/opub-ui/src/components/Button/Button.tsx @@ -4,10 +4,9 @@ import { IconChevronUp, IconSelector, } from '@tabler/icons-react'; -import cx from 'classnames'; import { ConnectedDisclosure } from '../../types/button'; -import { variationName } from '../../utils/css'; +import { cn, variationName } from '../../utils/css'; import { handleMouseUpByBlurring, MouseUpBlurHandler } from '../../utils/focus'; import { Icon } from '../Icon'; import { Menu } from '../Menu'; @@ -127,7 +126,7 @@ const Button = React.forwardRef( } = props; const isDisabled = disabled || loading; - const className = cx( + const className = cn( styles.Button, styles[variationName('kind', kind)], styles[variationName('variant', variant)], @@ -146,7 +145,7 @@ const Button = React.forwardRef( const childMarkup = children ? ( @@ -165,12 +164,12 @@ const Button = React.forwardRef( ) : null; const iconMarkup = icon ? ( - {icon} + {icon} ) : null; const disclosureMarkup = disclosure ? ( -
+
{loading ? (
) : ( @@ -187,7 +186,7 @@ const Button = React.forwardRef( let connectedDisclosureMarkup; if (connectedDisclosure && connectedDisclosure.actions.length > 0) { - const connectedDisclosureClassName = cx( + const connectedDisclosureClassName = cn( styles.Button, styles[variationName('kind', kind)], styles[variationName('variant', variant)], diff --git a/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx b/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx index 8a433928..5a062f51 100644 --- a/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx +++ b/packages/opub-ui/src/components/ButtonGroup/ButtonGroup.tsx @@ -1,6 +1,6 @@ -import cx from 'classnames'; import React from 'react'; -import { elementChildren } from '../../utils'; + +import { cn, elementChildren } from '../../utils'; import styles from './ButtonGroup.module.scss'; import { Item } from './components'; @@ -29,7 +29,7 @@ export function ButtonGroup({ connectedTop, noWrap, }: ButtonGroupProps) { - const className = cx( + const className = cn( styles.ButtonGroup, spacing && styles[spacing], segmented && styles.segmented, diff --git a/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx b/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx index bc3578eb..9371a597 100644 --- a/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx +++ b/packages/opub-ui/src/components/ButtonGroup/components/Item/Item.tsx @@ -1,6 +1,6 @@ -import cx from 'classnames'; import React from 'react'; -import { useToggle } from '../../../../utils'; + +import { cn, useToggle } from '../../../../utils'; import styles from '../../ButtonGroup.module.scss'; export interface ItemProps { @@ -14,7 +14,7 @@ export function Item({ button }: ItemProps) { setFalse: forceFalseFocused, } = useToggle(false); - const className = cx( + const className = cn( styles.Item, focused && styles['Item-focused'], button.props.plain && styles['Item-plain'] diff --git a/packages/opub-ui/src/components/Calendar/Calendar.tsx b/packages/opub-ui/src/components/Calendar/Calendar.tsx index 82e4aad4..19b6b83e 100644 --- a/packages/opub-ui/src/components/Calendar/Calendar.tsx +++ b/packages/opub-ui/src/components/Calendar/Calendar.tsx @@ -1,17 +1,18 @@ 'use client'; -import { Icon } from '../Icon'; -import { Text } from '../Text'; -import styles from './Calendar.module.scss'; -import { CalendarGrid } from './components/CalendarGrid'; +import { forwardRef, LegacyRef } from 'react'; import { GregorianCalendar } from '@internationalized/date'; import { AriaCalendarProps, DateValue } from '@react-types/calendar'; import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'; -import cx from 'classnames'; -import { forwardRef, LegacyRef } from 'react'; import { useCalendar, useLocale } from 'react-aria'; import { CalendarStateOptions, useCalendarState } from 'react-stately'; +import { cn } from '../../utils'; +import { Icon } from '../Icon'; +import { Text } from '../Text'; +import styles from './Calendar.module.scss'; +import { CalendarGrid } from './components/CalendarGrid'; + function createCalendar(identifier: any) { switch (identifier) { case 'gregory': @@ -48,7 +49,7 @@ const Calendar = forwardRef( ...othersNext } = nextButtonProps; - const themeClass = cx(styles.Calendar, {}); + const themeClass = cn(styles.Calendar); return (
{title} diff --git a/packages/opub-ui/src/components/Choice/Choice.tsx b/packages/opub-ui/src/components/Choice/Choice.tsx index c859c34a..bba03707 100644 --- a/packages/opub-ui/src/components/Choice/Choice.tsx +++ b/packages/opub-ui/src/components/Choice/Choice.tsx @@ -1,8 +1,8 @@ +import { cn } from '../../utils'; import { InlineMessage } from '../InlineMessage'; import { Label } from '../Label'; import { Text } from '../Text'; import styles from './Choice.module.scss'; -import cx from 'classnames'; export interface ChoiceProps { /** A unique identifier for the choice */ @@ -39,13 +39,13 @@ export const Choice = ({ }: ChoiceProps) => { const { error, helpText } = props; - const wrapperClassName = cx( + const wrapperClassName = cn( styles.Checkbox, error && styles.error, className ); - const labelClassName = cx(styles.Label, labelHidden && styles.hidden); + const labelClassName = cn(styles.Label, labelHidden && styles.hidden); const checkboxMarkup = (
{children} diff --git a/packages/opub-ui/src/components/Collapsible/Collapsible.tsx b/packages/opub-ui/src/components/Collapsible/Collapsible.tsx index 45450c6a..99e22b15 100644 --- a/packages/opub-ui/src/components/Collapsible/Collapsible.tsx +++ b/packages/opub-ui/src/components/Collapsible/Collapsible.tsx @@ -1,10 +1,11 @@ +import React from 'react'; +import * as CollapsibleDemo from '@radix-ui/react-collapsible'; +import { IconMinus, IconPlus } from '@tabler/icons-react'; + import { CollapsibleProps } from '../../types/collapsible'; +import { cn } from '../../utils'; import { Icon } from '../Icon'; import styles from './Collapsible.module.scss'; -import * as CollapsibleDemo from '@radix-ui/react-collapsible'; -import { IconMinus, IconPlus } from '@tabler/icons-react'; -import cx from 'classnames'; -import React from 'react'; export const Collapsible = ({ collapsibleHeading, @@ -12,7 +13,7 @@ export const Collapsible = ({ }: CollapsibleProps) => { const [open, setOpen] = React.useState(false); - const className = cx(styles.CollapsibleRoot); + const className = cn(styles.CollapsibleRoot); const iconSource = open ? IconMinus : IconPlus; return ( { }, [defaultRowCount]); const rowCountIsEven = rows.length % 2 === 0; - const themeClass = cx( + const themeClass = cn( styles.DataTable, hasZebraStripingOnData && styles.ZebraStripingOnData, hasZebraStripingOnData && rowCountIsEven && styles.RowCountIsEven, increasedTableDensity && styles.IncreasedTableDensity ); - const tableRowClassname = cx(styles.TableRow, hoverable && styles.Hoverable); + const tableRowClassname = cn(styles.TableRow, hoverable && styles.Hoverable); const selectedCount = Object.keys(rowSelection).length; return ( @@ -132,18 +132,18 @@ const DataTable = (props: DataTableProps) => { /> )}
{table.getHeaderGroups().map((headerGroup) => ( {!hideSelection && ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header, index) => { @@ -86,7 +87,7 @@ const Table = (props: TableProps) => { return ( { {table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell, index) => { @@ -119,7 +120,7 @@ const Table = (props: TableProps) => { ); return ( { const { fitted, disclosureText, className, ...others } = props; - const classname = cx(styles.TabList, fitted && styles.fitted, className); + const classname = cn(styles.TabList, fitted && styles.fitted, className); return ; }); @@ -44,7 +45,7 @@ const Tab = forwardRef( return (
{ return ( { })} {rowActions && ( { key={row.id} row={row} hideSelection={hideSelection} - classname={cx( + classname={cn( tableRowClassname, styles.TableBodyRow, row.getCanSelect() && styles['TableRow-selectable'], @@ -237,7 +237,7 @@ const DataTable = (props: DataTableProps) => { ); return ( { ); })} {rowActions && ( - + { className={classname} > {!hideSelection && ( - + ) + (DateFieldStateOptions | AriaDateFieldProps); const DateField = (props: any) => { - const { - trim, - isRange, - helpText, - label, - labelAction, - labelHidden, - requiredIndicator, - errorMessage, - isPicker, - ...others - } = props - let { locale } = useLocale() - let ref = React.useRef(null) + const { + trim, + isRange, + helpText, + label, + labelAction, + labelHidden, + requiredIndicator, + errorMessage, + isPicker, + ...others + } = props; + let { locale } = useLocale(); + let ref = React.useRef(null); - let state = useDateFieldState({ - ...others, - locale, - createCalendar, - }) + let state = useDateFieldState({ + ...others, + locale, + createCalendar, + }); - let { labelProps, fieldProps } = useDateField(others, state, ref) + let { labelProps, fieldProps } = useDateField(others, state, ref); - const themeClass = cx(styles.DateField, {}) - const inputMarkup = ( -
-
-
- {state.segments.map((segment, i) => ( - - ))} -
- {!isRange && !isPicker &&
} -
-
- ) - if (isPicker) { - return inputMarkup - } + const themeClass = cn(styles.DateField); + const inputMarkup = ( +
+
+
+ {state.segments.map((segment, i) => ( + + ))} +
+ {!isRange && !isPicker &&
} +
+
+ ); + if (isPicker) { + return inputMarkup; + } - return ( - - {inputMarkup} - - ) -} + return ( + + {inputMarkup} + + ); +}; interface DatePickerSegmentProps extends DatePickerBase { - segment: DateSegment - state: DateFieldState + segment: DateSegment; + state: DateFieldState; } export function DateFieldSegment({ segment, state }: DatePickerSegmentProps) { - let ref = React.useRef(null) - let { segmentProps } = useDateSegment(segment, state, ref) - const classname = cx( - styles.Segment, - segment.isPlaceholder && styles.Placeholder - ) + let ref = React.useRef(null); + let { segmentProps } = useDateSegment(segment, state, ref); + const classname = cn( + styles.Segment, + segment.isPlaceholder && styles.Placeholder + ); - return ( -
- {segment.text} -
- ) + return ( +
+ {segment.text} +
+ ); } type RangeProps = { - startFieldProps: AriaDatePickerProps - endFieldProps: AriaDatePickerProps -} + startFieldProps: AriaDatePickerProps; + endFieldProps: AriaDatePickerProps; +}; const DateRangeField = ({ startFieldProps, endFieldProps }: RangeProps) => { - return ( -
- - {'-'} - -
- ) -} + return ( +
+ + {'-'} + +
+ ); +}; -export { DateField, DateRangeField } +export { DateField, DateRangeField }; diff --git a/packages/opub-ui/src/components/DatePicker/DatePicker.tsx b/packages/opub-ui/src/components/DatePicker/DatePicker.tsx index 132781bc..31d313ed 100644 --- a/packages/opub-ui/src/components/DatePicker/DatePicker.tsx +++ b/packages/opub-ui/src/components/DatePicker/DatePicker.tsx @@ -1,97 +1,98 @@ -'use client' +'use client'; -import { Calendar } from '../Calendar' -import { DateField } from '../DateField' -import { IconButton } from '../IconButton' -import inputStyles from '../Input/Input.module.scss' -import { Labelled, LabelledProps } from '../Labelled' -import { Popover } from '../Popover' -import styles from './DatePicker.module.scss' -import { DateValue } from '@react-types/calendar' -import { IconCalendar } from '@tabler/icons-react' -import cx from 'classnames' -import React from 'react' -import { AriaDatePickerProps, useDatePicker } from 'react-aria' -import { DatePickerState, useDatePickerState } from 'react-stately' +import React from 'react'; +import { DateValue } from '@react-types/calendar'; +import { IconCalendar } from '@tabler/icons-react'; +import { AriaDatePickerProps, useDatePicker } from 'react-aria'; +import { DatePickerState, useDatePickerState } from 'react-stately'; + +import { cn } from '../../utils'; +import { Calendar } from '../Calendar'; +import { DateField } from '../DateField'; +import { IconButton } from '../IconButton'; +import inputStyles from '../Input/Input.module.scss'; +import { Labelled, LabelledProps } from '../Labelled'; +import { Popover } from '../Popover'; +import styles from './DatePicker.module.scss'; export type DatePickerProps = { - /** Label for the field */ - label: string - /** Error to display beneath the label */ - error?: any - /** Adds an action to the label */ - labelAction?: LabelledProps['action'] - /** Visually hide the label */ - labelHidden?: boolean - /** Visual required indicator, add an asterisk to label */ - requiredIndicator?: boolean - /** Additional text to aide in use */ - helpText?: React.ReactNode -} & (DatePickerState | AriaDatePickerProps) + /** Label for the field */ + label: string; + /** Error to display beneath the label */ + error?: any; + /** Adds an action to the label */ + labelAction?: LabelledProps['action']; + /** Visually hide the label */ + labelHidden?: boolean; + /** Visual required indicator, add an asterisk to label */ + requiredIndicator?: boolean; + /** Additional text to aide in use */ + helpText?: React.ReactNode; +} & (DatePickerState | AriaDatePickerProps); const DatePicker = React.forwardRef( - ( - { - error, - labelAction, - labelHidden, - helpText, - requiredIndicator, - ...props - }: DatePickerProps, - ref: any - ) => { - let state = useDatePickerState(props) + ( + { + error, + labelAction, + labelHidden, + helpText, + requiredIndicator, + ...props + }: DatePickerProps, + ref: any + ) => { + let state = useDatePickerState(props); - let { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = - useDatePicker(props, state, ref) - const themeClass = cx(styles.DatePicker) + let { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = + useDatePicker(props, state, ref); + const themeClass = cn(styles.DatePicker); - const { - onPress: onPressPrev, - isDisabled: disabledPrev, - ...othersProps - } = buttonProps + const { + onPress: onPressPrev, + isDisabled: disabledPrev, + ...othersProps + } = buttonProps; - return ( -
- -
- - - !state.isOpen ? state.open() : state.close() - } - open={state.isOpen} - {...dialogProps} - > - - - trigger calendar - - - - - - -
-
- -
- ) - } -) + return ( +
+ +
+ + + !state.isOpen ? state.open() : state.close() + } + open={state.isOpen} + {...dialogProps} + > + + + trigger calendar + + + + + + +
+
+ +
+ ); + } +); -export { DatePicker } +export { DatePicker }; diff --git a/packages/opub-ui/src/components/DatePicker/DateRangePicker.tsx b/packages/opub-ui/src/components/DatePicker/DateRangePicker.tsx index cd6e33eb..705efe3a 100644 --- a/packages/opub-ui/src/components/DatePicker/DateRangePicker.tsx +++ b/packages/opub-ui/src/components/DatePicker/DateRangePicker.tsx @@ -1,99 +1,98 @@ -'use client' +'use client'; -import { DateTimeProps } from '../../types/datetime' -import { Button } from '../Button' -import { RangeCalendar } from '../Calendar' -import { DateRangeField } from '../DateField' -import { Icon } from '../Icon' -import { IconButton } from '../IconButton' -import inputStyles from '../Input/Input.module.scss' -import { Labelled } from '../Labelled' -import { Popover } from '../Popover' -import styles from './DatePicker.module.scss' -import { DateValue } from '@react-types/calendar' -import { IconCalendar } from '@tabler/icons-react' -import cx from 'classnames' -import React from 'react' -import { AriaDateRangePickerProps, useDateRangePicker } from 'react-aria' -import { DateRangePickerState, useDateRangePickerState } from 'react-stately' +import React from 'react'; +import { DateValue } from '@react-types/calendar'; +import { IconCalendar } from '@tabler/icons-react'; +import { AriaDateRangePickerProps, useDateRangePicker } from 'react-aria'; +import { DateRangePickerState, useDateRangePickerState } from 'react-stately'; + +import { DateTimeProps } from '../../types/datetime'; +import { cn } from '../../utils'; +import { RangeCalendar } from '../Calendar'; +import { DateRangeField } from '../DateField'; +import { IconButton } from '../IconButton'; +import inputStyles from '../Input/Input.module.scss'; +import { Labelled } from '../Labelled'; +import { Popover } from '../Popover'; +import styles from './DatePicker.module.scss'; export type RangePickerProps = { - label: string + label: string; } & Omit & - (DateRangePickerState | AriaDateRangePickerProps) + (DateRangePickerState | AriaDateRangePickerProps); const DateRangePicker = React.forwardRef( - (props: RangePickerProps, ref: any) => { - const { - helpText, - label, - labelAction, - labelHidden, - requiredIndicator, - errorMessage, - } = props + (props: RangePickerProps, ref: any) => { + const { + helpText, + label, + labelAction, + labelHidden, + requiredIndicator, + errorMessage, + } = props; - let state = useDateRangePickerState(props) + let state = useDateRangePickerState(props); - let { - labelProps, - startFieldProps, - endFieldProps, - buttonProps, - dialogProps, - calendarProps, - } = useDateRangePicker(props, state, ref) - const themeClass = cx(styles.DatePicker, {}) + let { + labelProps, + startFieldProps, + endFieldProps, + buttonProps, + dialogProps, + calendarProps, + } = useDateRangePicker(props, state, ref); + const themeClass = cn(styles.DatePicker); - const { - onPress: onPressPrev, - isDisabled: disabledPrev, - ...othersProps - } = buttonProps + const { + onPress: onPressPrev, + isDisabled: disabledPrev, + ...othersProps + } = buttonProps; - return ( -
- -
- + return ( +
+ +
+ - - !state.isOpen ? state.open() : state.close() - } - open={state.isOpen} - {...dialogProps} - > - - - trigger calendar - - - - - - -
-
- -
- ) - } -) + + !state.isOpen ? state.open() : state.close() + } + open={state.isOpen} + {...dialogProps} + > + + + trigger calendar + + + + + + +
+
+ +
+ ); + } +); -export { DateRangePicker } +export { DateRangePicker }; diff --git a/packages/opub-ui/src/components/DatePicker/MonthPicker.tsx b/packages/opub-ui/src/components/DatePicker/MonthPicker.tsx index 2deff14f..f92f336d 100644 --- a/packages/opub-ui/src/components/DatePicker/MonthPicker.tsx +++ b/packages/opub-ui/src/components/DatePicker/MonthPicker.tsx @@ -1,102 +1,103 @@ -'use client' +'use client'; -import { YearCalendar } from '../Calendar/YearCalendar' -import { DateField } from '../DateField' -import { IconButton } from '../IconButton' -import inputStyles from '../Input/Input.module.scss' -import { Labelled, LabelledProps } from '../Labelled' -import { Popover } from '../Popover' -import styles from './DatePicker.module.scss' -import { DateValue } from '@react-types/calendar' -import { IconCalendar } from '@tabler/icons-react' -import cx from 'classnames' -import React from 'react' -import { AriaDatePickerProps, useDatePicker } from 'react-aria' -import { DatePickerState, useDatePickerState } from 'react-stately' +import React from 'react'; +import { DateValue } from '@react-types/calendar'; +import { IconCalendar } from '@tabler/icons-react'; +import { AriaDatePickerProps, useDatePicker } from 'react-aria'; +import { DatePickerState, useDatePickerState } from 'react-stately'; + +import { cn } from '../../utils'; +import { YearCalendar } from '../Calendar/YearCalendar'; +import { DateField } from '../DateField'; +import { IconButton } from '../IconButton'; +import inputStyles from '../Input/Input.module.scss'; +import { Labelled, LabelledProps } from '../Labelled'; +import { Popover } from '../Popover'; +import styles from './DatePicker.module.scss'; export type DatePickerProps = { - /** Label for the field */ - label: string - /** Error to display beneath the label */ - error?: any - /** Adds an action to the label */ - labelAction?: LabelledProps['action'] - /** Visually hide the label */ - labelHidden?: boolean - /** Visual required indicator, add an asterisk to label */ - requiredIndicator?: boolean - /** Additional text to aide in use */ - helpText?: React.ReactNode -} & (DatePickerState | AriaDatePickerProps) + /** Label for the field */ + label: string; + /** Error to display beneath the label */ + error?: any; + /** Adds an action to the label */ + labelAction?: LabelledProps['action']; + /** Visually hide the label */ + labelHidden?: boolean; + /** Visual required indicator, add an asterisk to label */ + requiredIndicator?: boolean; + /** Additional text to aide in use */ + helpText?: React.ReactNode; +} & (DatePickerState | AriaDatePickerProps); const MonthPicker = React.forwardRef( - ( - { - error, - labelAction, - labelHidden, - helpText, - requiredIndicator, - ...props - }: DatePickerProps, - ref: any - ) => { - let state = useDatePickerState(props) + ( + { + error, + labelAction, + labelHidden, + helpText, + requiredIndicator, + ...props + }: DatePickerProps, + ref: any + ) => { + let state = useDatePickerState(props); - let { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = - useDatePicker(props, state, ref) - const themeClass = cx(styles.DatePicker) + let { labelProps, fieldProps, buttonProps, dialogProps, calendarProps } = + useDatePicker(props, state, ref); + const themeClass = cn(styles.DatePicker); - const { - onPress: onPressPrev, - isDisabled: disabledPrev, - ...othersProps - } = buttonProps + const { + onPress: onPressPrev, + isDisabled: disabledPrev, + ...othersProps + } = buttonProps; - return ( -
- -
- - - !state.isOpen ? state.open() : state.close() - } - open={state.isOpen} - {...dialogProps} - > - - - trigger calendar - - - - - - -
-
- -
- ) - } -) + return ( +
+ +
+ + + !state.isOpen ? state.open() : state.close() + } + open={state.isOpen} + {...dialogProps} + > + + + trigger calendar + + + + + + +
+
+ +
+ ); + } +); -export { MonthPicker } +export { MonthPicker }; diff --git a/packages/opub-ui/src/components/Dialog/Dialog.tsx b/packages/opub-ui/src/components/Dialog/Dialog.tsx index 78be8059..7b6d9294 100644 --- a/packages/opub-ui/src/components/Dialog/Dialog.tsx +++ b/packages/opub-ui/src/components/Dialog/Dialog.tsx @@ -1,9 +1,9 @@ -import React, { Ref, forwardRef } from 'react'; +import React, { forwardRef, Ref } from 'react'; import * as DialogRadix from '@radix-ui/react-dialog'; -import cx from 'classnames'; -import styles from './Dialog.module.scss'; +import { cn } from '../../utils'; import { Footer, FooterProps, Header } from './components'; +import styles from './Dialog.module.scss'; interface DialogProps extends DialogRadix.DialogProps { Trigger?: DialogRadix.DialogTriggerProps; @@ -79,7 +79,7 @@ const Content = forwardRef((props: ContentProps, ref: any) => { const rId = React.useId(); const finalId = props.id || rId; - const classnameStyles = cx( + const classnameStyles = cn( styles.Dialog, small && styles.sizeSmall, large && styles.sizeLarge, @@ -97,7 +97,7 @@ const Content = forwardRef((props: ContentProps, ref: any) => { {headerHidden ? null : (
)} -
{children}
+
{children}
{footer && (
diff --git a/packages/opub-ui/src/components/DropZone/DropZone.tsx b/packages/opub-ui/src/components/DropZone/DropZone.tsx index 3decba64..3a644348 100644 --- a/packages/opub-ui/src/components/DropZone/DropZone.tsx +++ b/packages/opub-ui/src/components/DropZone/DropZone.tsx @@ -1,6 +1,17 @@ 'use client'; -import { variationName } from '../../utils/css'; +import React, { + FunctionComponent, + RefAttributes, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import { IconAlertCircle, IconUpload } from '@tabler/icons-react'; + +import { cn, variationName } from '../../utils/css'; import { debounce } from '../../utils/debounce'; import { useComponentDidMount } from '../../utils/hooks/use-component-did-mount'; import { useEventListener } from '../../utils/hooks/use-event-listener'; @@ -10,26 +21,15 @@ import { Box } from '../Box'; import { Icon } from '../Icon'; import { Labelled, LabelledProps } from '../Labelled'; import { Text } from '../Text'; -import styles from './DropZone.module.scss'; import { FileUpload } from './components'; import { DropZoneContext } from './context'; +import styles from './DropZone.module.scss'; import { - DropZoneEvent, defaultAllowMultiple, + DropZoneEvent, fileAccepted, getDataTransferFiles, } from './utils'; -import { IconAlertCircle, IconUpload } from '@tabler/icons-react'; -import cx from 'classnames'; -import React, { - FunctionComponent, - RefAttributes, - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from 'react'; export type DropZoneFileType = 'file' | 'image' | 'video'; @@ -305,7 +305,7 @@ export const DropZone: React.ForwardRefExoticComponent< const labelValue = label; const labelHiddenValue = label ? labelHidden : true; - const classes = cx( + const classes = cn( styles.DropZone, outline && styles.hasOutline, focused && styles.focused, diff --git a/packages/opub-ui/src/components/DropZone/components/FileUpload/FileUpload.tsx b/packages/opub-ui/src/components/DropZone/components/FileUpload/FileUpload.tsx index e620e80d..43e8b50d 100644 --- a/packages/opub-ui/src/components/DropZone/components/FileUpload/FileUpload.tsx +++ b/packages/opub-ui/src/components/DropZone/components/FileUpload/FileUpload.tsx @@ -1,14 +1,15 @@ +import { useContext } from 'react'; +import { + IconCloudUpload, + IconSquareRoundedArrowUpFilled, +} from '@tabler/icons-react'; + +import { cn } from '../../../../utils'; import { Box } from '../../../Box'; import { Icon } from '../../../Icon'; import { Text } from '../../../Text'; import { DropZoneContext } from '../../context'; import styles from './FileUpload.module.scss'; -import { - IconCloudUpload, - IconSquareRoundedArrowUpFilled, -} from '@tabler/icons-react'; -import cx from 'classnames'; -import { useContext } from 'react'; export interface FileUploadProps { actionTitle?: string; @@ -28,10 +29,10 @@ export function FileUpload(props: FileUploadProps) { actionTitle = allowMultiple ? `Add ${type}s` : `Add ${type}`, actionHint, } = props; - const actionClassNames = cx(styles.Action, disabled && styles.disabled); + const actionClassNames = cn(styles.Action, disabled && styles.disabled); const actionMarkup =
{actionTitle}
; - const fileUploadClassName = cx( + const fileUploadClassName = cn( styles.FileUpload, measuring && styles.measuring, size === 'large' && styles.large, diff --git a/packages/opub-ui/src/components/FormLayout/components/Group/Group.tsx b/packages/opub-ui/src/components/FormLayout/components/Group/Group.tsx index 2a9abd64..00f65eb4 100644 --- a/packages/opub-ui/src/components/FormLayout/components/Group/Group.tsx +++ b/packages/opub-ui/src/components/FormLayout/components/Group/Group.tsx @@ -1,6 +1,6 @@ -import cx from 'classnames'; import React, { Children } from 'react'; -import { wrapWithComponent } from '../../../../utils'; + +import { cn, wrapWithComponent } from '../../../../utils'; import { Box } from '../../../Box'; import styles from '../../FormLayout.module.scss'; import { Item } from '../Item'; @@ -13,7 +13,7 @@ export interface GroupProps { } export function Group({ children, condensed, title, helpText }: GroupProps) { - const className = cx(condensed ? styles.condensed : styles.grouped); + const className = cn(condensed ? styles.condensed : styles.grouped); const id = React.useId(); diff --git a/packages/opub-ui/src/components/Icon/Icon.tsx b/packages/opub-ui/src/components/Icon/Icon.tsx index 97f7282d..3f634b1a 100644 --- a/packages/opub-ui/src/components/Icon/Icon.tsx +++ b/packages/opub-ui/src/components/Icon/Icon.tsx @@ -1,8 +1,7 @@ import { IconProps } from '../../types'; -import { variationName } from '../../utils/css'; +import { cn, variationName } from '../../utils/css'; import { Text } from '../Text'; import styles from './Icon.module.scss'; -import cx from 'classnames'; export function Icon({ source, @@ -14,7 +13,7 @@ export function Icon({ className, noEvents, }: IconProps) { - const classes = cx( + const classes = cn( styles.Icon, color && styles[variationName('color', color)], backdrop && styles.hasBackdrop, diff --git a/packages/opub-ui/src/components/Input/Input.tsx b/packages/opub-ui/src/components/Input/Input.tsx index 5a43b3b0..bd151df6 100644 --- a/packages/opub-ui/src/components/Input/Input.tsx +++ b/packages/opub-ui/src/components/Input/Input.tsx @@ -1,26 +1,26 @@ 'use client'; +import React, { + createElement, + useCallback, + useEffect, + useId, + useRef, + useState, +} from 'react'; +import { IconX } from '@tabler/icons-react'; + import { TextFieldProps } from '../../types/input'; import { Key } from '../../types/shared/key'; -import { variationName } from '../../utils/css'; +import { cn, variationName } from '../../utils/css'; import { useForwardRef } from '../../utils/helpers'; import { useIsAfterInitialMount } from '../../utils/hooks'; import { Connected } from '../Connected'; import { Icon } from '../Icon'; import { Labelled } from '../Labelled'; import { Text } from '../Text'; -import styles from './Input.module.scss'; import { Resizer, Spinner, SpinnerProps } from './components'; -import { IconX } from '@tabler/icons-react'; -import cx from 'classnames'; -import React, { - createElement, - useCallback, - useEffect, - useId, - useRef, - useState, -} from 'react'; +import styles from './Input.module.scss'; export const Input = React.forwardRef( ( @@ -121,7 +121,7 @@ export const Input = React.forwardRef( const normalizedMax = max != null ? max : Infinity; const normalizedMin = min != null ? min : -Infinity; - const className = cx( + const className = cn( styles.TextField, Boolean(normalizedValue) && styles.hasValue, disabled && styles.disabled, @@ -152,7 +152,7 @@ export const Input = React.forwardRef( ? `${characterCount} of ${maxLength} characters used` : `${characterCount} characters`; - const characterCountClassName = cx( + const characterCountClassName = cn( styles.CharacterCount, multiline && styles.AlignFieldBottom ); @@ -306,7 +306,7 @@ export const Input = React.forwardRef( labelledBy.unshift(`${id}-label`); - const inputClassName = cx( + const inputClassName = cn( styles.Input, align && styles[variationName('Input-align', align)], suffix && styles['Input-suffixed'], @@ -392,7 +392,7 @@ export const Input = React.forwardRef( const backdropMarkup = (
{children} diff --git a/packages/opub-ui/src/components/Labelled/Labelled.tsx b/packages/opub-ui/src/components/Labelled/Labelled.tsx index 20e7e214..c026f231 100644 --- a/packages/opub-ui/src/components/Labelled/Labelled.tsx +++ b/packages/opub-ui/src/components/Labelled/Labelled.tsx @@ -1,97 +1,98 @@ -import { Action } from '../../types/button' -import type { Error } from '../../types/shared/form' -import { buttonFrom } from '../Button/utils' -import { InlineMessage } from '../InlineMessage' -import { Label } from '../Label/Label' -import { Text } from '../Text' -import styles from './Labelled.module.scss' -import cx from 'classnames' -import React from 'react' +import React from 'react'; + +import { Action } from '../../types/button'; +import type { Error } from '../../types/shared/form'; +import { cn } from '../../utils'; +import { buttonFrom } from '../Button/utils'; +import { InlineMessage } from '../InlineMessage'; +import { Label } from '../Label/Label'; +import { Text } from '../Text'; +import styles from './Labelled.module.scss'; export type LabelledProps = { - /** A unique identifier for the label */ - id?: string - /** Text for the label */ - label: React.ReactNode - /** Error to display beneath the label */ - error?: Error | boolean - /** An action */ - action?: Action - /** Additional hint text to display */ - helpText?: React.ReactNode - /** Content to display inside the connected */ - children?: React.ReactNode - /** Visually hide the label */ - labelHidden?: boolean - /** Visual required indicator for the label */ - requiredIndicator?: boolean - /** Additional class names to apply to the label */ - className?: string -} + /** A unique identifier for the label */ + id?: string; + /** Text for the label */ + label: React.ReactNode; + /** Error to display beneath the label */ + error?: Error | boolean; + /** An action */ + action?: Action; + /** Additional hint text to display */ + helpText?: React.ReactNode; + /** Content to display inside the connected */ + children?: React.ReactNode; + /** Visually hide the label */ + labelHidden?: boolean; + /** Visual required indicator for the label */ + requiredIndicator?: boolean; + /** Additional class names to apply to the label */ + className?: string; +}; export function Labelled({ - id = '', - label, - error, - action, - helpText, - children, - labelHidden, - requiredIndicator, - className, - ...rest + id = '', + label, + error, + action, + helpText, + children, + labelHidden, + requiredIndicator, + className, + ...rest }: LabelledProps) { - const classes = cx(labelHidden && styles.hidden, className) + const classes = cn(labelHidden && styles.hidden, className); - const actionMarkup = action ? ( -
- {buttonFrom(action, { kind: 'tertiary', variant: 'interactive' })} -
- ) : null + const actionMarkup = action ? ( +
+ {buttonFrom(action, { kind: 'tertiary', variant: 'interactive' })} +
+ ) : null; - const helpTextMarkup = helpText ? ( -
- - {helpText} - -
- ) : null + const helpTextMarkup = helpText ? ( +
+ + {helpText} + +
+ ) : null; - const errorMarkup = error && typeof error !== 'boolean' && ( -
- -
- ) + const errorMarkup = error && typeof error !== 'boolean' && ( +
+ +
+ ); - const labelMarkup = label ? ( -
- + const labelMarkup = label ? ( +
+ - {actionMarkup} -
- ) : null + {actionMarkup} +
+ ) : null; - return ( -
- {labelMarkup} - {children} - {errorMarkup} - {helpTextMarkup} -
- ) + return ( +
+ {labelMarkup} + {children} + {errorMarkup} + {helpTextMarkup} +
+ ); } export function errorID(id: string) { - return `${id}Error` + return `${id}Error`; } export function helpTextID(id: string) { - return `${id}HelpText` + return `${id}HelpText`; } diff --git a/packages/opub-ui/src/components/ProgressBar/ProgressBar.tsx b/packages/opub-ui/src/components/ProgressBar/ProgressBar.tsx index c5d84cd1..1326618a 100644 --- a/packages/opub-ui/src/components/ProgressBar/ProgressBar.tsx +++ b/packages/opub-ui/src/components/ProgressBar/ProgressBar.tsx @@ -1,9 +1,9 @@ +import React, { forwardRef, Ref } from 'react'; import * as Progress from '@radix-ui/react-progress'; + import { motion } from '../../tokens/motion'; import { ProgressBarProps } from '../../types/progressbar'; -import { variationName } from '../../utils/css'; -import cx from 'classnames'; -import React, { forwardRef, Ref } from 'react'; +import { cn, variationName } from '../../utils/css'; import styles from './ProgressBar.module.scss'; const ProgressBar = forwardRef( @@ -21,7 +21,7 @@ const ProgressBar = forwardRef( return () => clearTimeout(timer); }, []); - const themeClass = cx( + const themeClass = cn( styles.Root, size && styles[variationName('size', size)], color && styles[variationName('color', color)] diff --git a/packages/opub-ui/src/components/RadioGroup/RadioGroup.tsx b/packages/opub-ui/src/components/RadioGroup/RadioGroup.tsx index 7d299d83..25ea1b0b 100644 --- a/packages/opub-ui/src/components/RadioGroup/RadioGroup.tsx +++ b/packages/opub-ui/src/components/RadioGroup/RadioGroup.tsx @@ -1,15 +1,16 @@ +import React from 'react'; +import * as RadioRadix from '@radix-ui/react-radio-group'; +import type { + RadioGroupItemProps, + RadioGroupProps, +} from '@radix-ui/react-radio-group'; + import type { Error } from '../../types/shared/form'; +import { cn } from '../../utils'; import { Choice } from '../Choice'; import { InlineMessage } from '../InlineMessage'; import { Text } from '../Text'; import styles from './RadioGroup.module.scss'; -import * as RadioRadix from '@radix-ui/react-radio-group'; -import type { - RadioGroupProps, - RadioGroupItemProps, -} from '@radix-ui/react-radio-group'; -import cx from 'classnames'; -import React from 'react'; export type RadioProps = Omit & { name: string; @@ -76,7 +77,7 @@ const RadioItem = ({ children, className, ...props }: RadioItemProps) => { const { helpText, value, disabled, required } = props; const id = React.useId(); - const inputClassName = cx( + const inputClassName = cn( styles.RadioItem, props.disabled && styles.Disabled ); diff --git a/packages/opub-ui/src/components/RangeSlider/RangeSlider.tsx b/packages/opub-ui/src/components/RangeSlider/RangeSlider.tsx index b1cbca20..c7c26296 100644 --- a/packages/opub-ui/src/components/RangeSlider/RangeSlider.tsx +++ b/packages/opub-ui/src/components/RangeSlider/RangeSlider.tsx @@ -1,15 +1,16 @@ 'use client'; +import React, { forwardRef, useEffect } from 'react'; +import * as Slider from '@radix-ui/react-slider'; + import type { Action } from '../../types/button'; import type { Error } from '../../types/shared/form'; +import { cn } from '../../utils'; import { Box } from '../Box'; import { Labelled } from '../Labelled'; import { Text } from '../Text'; import styles from './RangeSlider.module.scss'; import { getThumbInBoundsOffset } from './utils'; -import * as Slider from '@radix-ui/react-slider'; -import cx from 'classnames'; -import React, { forwardRef, useEffect } from 'react'; export type RangeSliderProps = { /** Label for the range input */ @@ -47,7 +48,7 @@ const RangeSlider = forwardRef((props: RangeSliderProps, ref: any) => { props.value || props.defaultValue || [0] ); - const themeClass = cx(styles.RangeSlider, {}); + const themeClass = cn(styles.RangeSlider); const { id, label, diff --git a/packages/opub-ui/src/components/ScrollArea/ScrollArea.tsx b/packages/opub-ui/src/components/ScrollArea/ScrollArea.tsx index 7663313a..ef74348e 100644 --- a/packages/opub-ui/src/components/ScrollArea/ScrollArea.tsx +++ b/packages/opub-ui/src/components/ScrollArea/ScrollArea.tsx @@ -1,7 +1,7 @@ -import styles from './ScrollArea.module.scss'; -import * as Scroll from '@radix-ui/react-scroll-area'; -import cx from 'classnames'; import React, { forwardRef } from 'react'; +import * as Scroll from '@radix-ui/react-scroll-area'; + +import styles from './ScrollArea.module.scss'; type Props = { children: React.ReactNode; @@ -9,7 +9,6 @@ type Props = { const ScrollArea = forwardRef((props: Props, ref: any) => { const { children, ...others } = props; - const themeClass = cx(styles.ScrollArea, {}); return ( <> diff --git a/packages/opub-ui/src/components/Select/Select.tsx b/packages/opub-ui/src/components/Select/Select.tsx index 1862d79a..b40b5af3 100644 --- a/packages/opub-ui/src/components/Select/Select.tsx +++ b/packages/opub-ui/src/components/Select/Select.tsx @@ -1,3 +1,6 @@ +import React, { forwardRef, LegacyRef, useId } from 'react'; +import { IconChevronDown } from '@tabler/icons-react'; + import { HideableStrictOption, SelectGroup, @@ -6,14 +9,12 @@ import { StrictGroup, StrictOption, } from '../../types/select'; +import { cn } from '../../utils'; import { Box } from '../Box'; import { Icon } from '../Icon'; import { helpTextID, Labelled } from '../Labelled'; import { Text } from '../Text'; import styles from './Select.module.scss'; -import { IconChevronDown } from '@tabler/icons-react'; -import cx from 'classnames'; -import React, { forwardRef, LegacyRef, useId } from 'react'; const PLACEHOLDER_VALUE = ''; @@ -56,7 +57,7 @@ export const Select = forwardRef( const id = idProp || randomId; const labelHidden = labelInline ? true : labelHiddenProp; - const classes = cx( + const classes = cn( styles.Select, error && styles.error, disabled && styles.disabled diff --git a/packages/opub-ui/src/components/Sheet/Sheet.tsx b/packages/opub-ui/src/components/Sheet/Sheet.tsx index 9537f338..117c6b17 100644 --- a/packages/opub-ui/src/components/Sheet/Sheet.tsx +++ b/packages/opub-ui/src/components/Sheet/Sheet.tsx @@ -1,8 +1,9 @@ +import { forwardRef, Ref } from 'react'; +import * as Dialog from '@radix-ui/react-dialog'; + +import { cn } from '../../utils'; import dialogStyles from '../Dialog/Dialog.module.scss'; import styles from './Sheet.module.scss'; -import * as Dialog from '@radix-ui/react-dialog'; -import cx from 'classnames'; -import { forwardRef, Ref } from 'react'; interface SheetProps extends Dialog.DialogProps { Trigger?: Dialog.DialogTriggerProps; @@ -49,7 +50,7 @@ const Content = forwardRef( size = 'narrow', className, } = props; - const themeClass = cx(styles.Sheet, styles[side], styles[size], className); + const themeClass = cn(styles.Sheet, styles[side], styles[size], className); return ( diff --git a/packages/opub-ui/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx b/packages/opub-ui/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx index 011b0811..96ec5248 100644 --- a/packages/opub-ui/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx +++ b/packages/opub-ui/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx @@ -1,6 +1,6 @@ -import { variationName } from '../../utils/css'; -import cx from 'classnames'; +import { cn, variationName } from '../../utils/css'; import styles from './SkeletonDisplayText.module.scss'; + type Size = 'small' | 'medium' | 'large' | 'extraLarge'; export interface SkeletonDisplayTextProps { @@ -14,7 +14,7 @@ export interface SkeletonDisplayTextProps { export function SkeletonDisplayText({ size = 'medium', }: SkeletonDisplayTextProps) { - const className = cx( + const className = cn( styles.DisplayText, size && styles[variationName('size', size)] ); diff --git a/packages/opub-ui/src/components/SkeletonTabs/SkeletonTabs.tsx b/packages/opub-ui/src/components/SkeletonTabs/SkeletonTabs.tsx index c84f1afd..675c63b4 100644 --- a/packages/opub-ui/src/components/SkeletonTabs/SkeletonTabs.tsx +++ b/packages/opub-ui/src/components/SkeletonTabs/SkeletonTabs.tsx @@ -1,4 +1,4 @@ -import cx from 'classnames'; +import { cn } from '../../utils'; import { SkeletonBodyText } from '../SkeletonBodyText'; import styles from './SkeletonTabs.module.scss'; @@ -14,7 +14,7 @@ export function SkeletonTabs({ count = 2 }: SkeletonTabsProps) { key % 2 === 0 ? styles['Tab-short'] : styles['Tab-long']; return ( -
+
); diff --git a/packages/opub-ui/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx b/packages/opub-ui/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx index e3658a10..e250caf8 100644 --- a/packages/opub-ui/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx +++ b/packages/opub-ui/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx @@ -1,6 +1,6 @@ -import { variationName } from '../../utils/css'; -import cx from 'classnames'; +import { cn, variationName } from '../../utils/css'; import styles from './SkeletonThumbnail.module.scss'; + type Size = 'extraSmall' | 'small' | 'medium' | 'large'; export interface SkeletonThumbnailProps { @@ -12,7 +12,7 @@ export interface SkeletonThumbnailProps { } export function SkeletonThumbnail({ size = 'medium' }: SkeletonThumbnailProps) { - const className = cx( + const className = cn( styles.SkeletonThumbnail, size && styles[variationName('size', size)] ); diff --git a/packages/opub-ui/src/components/Spinner/Spinner.tsx b/packages/opub-ui/src/components/Spinner/Spinner.tsx index 8741b4c4..c860477c 100644 --- a/packages/opub-ui/src/components/Spinner/Spinner.tsx +++ b/packages/opub-ui/src/components/Spinner/Spinner.tsx @@ -1,7 +1,6 @@ -import { variationName } from '../../utils/css'; +import { cn, variationName } from '../../utils/css'; import { useIsAfterInitialMount } from '../../utils/hooks/use-is-after-initial-mount'; import styles from './Spinner.module.scss'; -import cx from 'classnames'; type Size = 'small' | 'large'; @@ -34,7 +33,7 @@ export function Spinner({ }: SpinnerProps) { const isAfterInitialMount = useIsAfterInitialMount(); - const className = cx( + const className = cn( styles.Spinner, size && styles[variationName('size', size)] ); diff --git a/packages/opub-ui/src/components/Table/Table.tsx b/packages/opub-ui/src/components/Table/Table.tsx index c5f2998a..ffcd1017 100644 --- a/packages/opub-ui/src/components/Table/Table.tsx +++ b/packages/opub-ui/src/components/Table/Table.tsx @@ -1,18 +1,19 @@ 'use client'; -import type { TableProps } from '../../types/datatable'; -import styles from './Table.module.scss'; -import { Cell, Footer, HeaderCell } from './components'; +import React from 'react'; import { - SortingState, flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, + SortingState, useReactTable, } from '@tanstack/react-table'; -import cx from 'classnames'; -import React from 'react'; + +import type { TableProps } from '../../types/datatable'; +import { cn } from '../../utils'; +import { Cell, Footer, HeaderCell } from './components'; +import styles from './Table.module.scss'; const Table = (props: TableProps) => { const { @@ -54,14 +55,14 @@ const Table = (props: TableProps) => { const footerVisible = !hideFooter && data.length > 0; const rowCountIsEven = data.length % 2 === 0; - const themeClass = cx( + const themeClass = cn( styles.DataTable, hasZebraStripingOnData && styles.ZebraStripingOnData, hasZebraStripingOnData && rowCountIsEven && styles.RowCountIsEven, increasedTableDensity && styles.IncreasedTableDensity ); - const tableRowClassname = cx(styles.TableRow, hoverable && styles.Hoverable); + const tableRowClassname = cn(styles.TableRow, hoverable && styles.Hoverable); return (
@@ -70,7 +71,7 @@ const Table = (props: TableProps) => {