From 2408b0e0f95e2a05f756a1f7107c8c4852a61dfe Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Tue, 14 Jan 2025 15:46:19 -0300 Subject: [PATCH] Minor fixes - fix lint and typing errors --- .storybook/Story.tsx | 30 ++-- .storybook/preview.tsx | 6 +- src/components/Accordion/Accordion.tsx | 3 +- src/components/Accordion/AccordionItem.tsx | 8 +- src/components/Accordion/useAccordion.ts | 84 +++++----- src/components/Alert/Alert.tsx | 2 +- src/components/Alert/useAlert.ts | 5 +- src/components/Anchor/Anchor.tsx | 2 +- src/components/Anchor/useAnchor.ts | 5 +- .../AspectRatio/AspectRatio.stories.tsx | 1 - src/components/AspectRatio/useAspectRatio.ts | 4 +- src/components/Avatar/Avatar.stories.tsx | 1 - src/components/Avatar/Avatar.tsx | 2 +- src/components/Avatar/useAvatar.ts | 4 +- src/components/Badge/Badge.stories.tsx | 2 +- src/components/Badge/Badge.tsx | 2 +- src/components/Badge/useBadge.ts | 4 +- src/components/Box/Box.tsx | 2 +- src/components/Box/useBox.ts | 4 +- src/components/Button/Button.stories.tsx | 1 - src/components/Button/Button.tsx | 2 +- src/components/Button/useButton.ts | 4 +- src/components/ButtonGroup/ButtonGroup.tsx | 2 +- src/components/ButtonGroup/useButtonGroup.ts | 8 +- .../ButtonSplit/ButtonSplit.stories.tsx | 1 + src/components/ButtonSplit/ButtonSplit.tsx | 6 +- src/components/ButtonSplit/index.ts | 2 +- src/components/ButtonSplit/useButtonSplit.ts | 4 +- .../ButtonUnstyled/ButtonUnstyled.tsx | 2 +- .../ButtonUnstyled/useButtonUnstyled.ts | 9 +- .../CheckboxAndRadio/Checkbox.stories.tsx | 1 - src/components/CheckboxAndRadio/Checkbox.tsx | 2 +- .../CheckboxAndRadio/Radio.stories.tsx | 1 - .../CheckboxAndRadio/useCheckboxAndRadio.tsx | 31 ++-- src/components/Chip/Chip.stories.tsx | 1 - src/components/Chip/Chip.tsx | 2 +- src/components/Chip/useChip.ts | 5 +- .../ClickOutside/useClickOutside.ts | 4 +- src/components/Collapse/Collapse.tsx | 2 +- src/components/Collapse/useCollapse.ts | 4 +- src/components/Container/Container.tsx | 2 +- src/components/Container/useContainer.ts | 4 +- .../CopyToClipboard/CopyToClipboard.tsx | 2 +- .../CopyToClipboard/useCopyToClipboard.ts | 4 +- .../DataTable/DataTable.stories.tsx | 59 +++---- src/components/DataTable/DataTable.tsx | 2 +- src/components/DataTable/useDataTable.ts | 54 +++---- src/components/DatePicker/Range.tsx | 2 +- src/components/DatePicker/Selector.tsx | 2 +- src/components/DatePicker/Single.tsx | 2 +- src/components/DatePicker/useDatePicker.ts | 46 +++--- src/components/DatePicker/utils.tsx | 104 ++++++------- src/components/Dialog/useDialog.ts | 4 +- src/components/Divider/Divider.tsx | 4 +- src/components/Divider/useDivider.ts | 5 +- src/components/Dropdown/Content.tsx | 1 - src/components/Dropdown/Dropdown.stories.tsx | 2 +- src/components/Dropdown/Items.tsx | 1 - src/components/Dropdown/useDropdown.ts | 4 +- src/components/Emoji/useEmoji.ts | 4 +- src/components/Field/Debug.tsx | 44 +++--- src/components/Field/Field.tsx | 2 +- src/components/Field/Input.tsx | 6 +- src/components/Field/useField.ts | 144 +++++++++--------- src/components/Flex/Flex.tsx | 4 +- src/components/Flex/useFlex.ts | 4 +- src/components/Form/Form.tsx | 4 +- src/components/Form/useForm.ts | 8 +- .../useFormElementWrapper.ts | 4 +- src/components/FormGroup/useFormGroup.ts | 4 +- src/components/Grid/useGrid.ts | 4 +- src/components/Headings/Basic.stories.tsx | 1 + src/components/Headings/Jumbo.stories.tsx | 1 + src/components/Headings/useHeading.ts | 11 +- src/components/Icon/useIcon.ts | 4 +- src/components/Image/Image.stories.tsx | 1 - src/components/Image/Image.tsx | 2 +- src/components/Image/useImage.ts | 4 +- src/components/Input/Input.stories.tsx | 1 - src/components/Input/useInput.ts | 8 +- .../InputColor/InputColor.stories.tsx | 1 - src/components/InputColor/useInputColor.ts | 8 +- .../InputFile/InputFile.stories.tsx | 1 - src/components/InputFile/useInputFile.ts | 8 +- src/components/Keyboard/useKeyboard.ts | 54 +++---- src/components/Label/useLabel.ts | 5 +- src/components/List/List.stories.tsx | 1 - src/components/List/index.ts | 2 +- src/components/List/useList.ts | 12 +- src/components/Loader/useLoader.ts | 28 ++-- src/components/Menu/Menu.stories.tsx | 1 + src/components/Menu/index.ts | 2 +- src/components/Menu/useMenu.tsx | 88 +++++------ src/components/Modal/useModal.ts | 4 +- src/components/NavBar/NavBar.stories.tsx | 2 +- src/components/NavBar/NavBar.tsx | 1 - src/components/NavBar/NavBarContent.tsx | 1 - src/components/NavBar/useNavBar.tsx | 62 ++++---- .../NonIdealState/useNonIdealState.ts | 4 +- src/components/Page/Page.tsx | 2 +- src/components/Page/usePage.ts | 4 +- .../Pagination/Pagination.stories.tsx | 12 +- src/components/Pagination/usePagination.ts | 32 ++-- src/components/Paragraph/useParagraph.ts | 5 +- src/components/Portal/usePortal.ts | 22 +-- .../ProgressBar/ProgressBar.stories.tsx | 1 - src/components/ProgressBar/useProgressBar.ts | 4 +- .../ProgressCircle/ProgressCircle.stories.tsx | 1 - .../ProgressCircle/useProgressCircle.ts | 8 +- src/components/Quote/useQuote.ts | 5 +- src/components/RadioGroup/useRadioGroup.ts | 4 +- src/components/Ripple/Ripple.tsx | 1 - src/components/Ripple/useRipple.tsx | 4 +- src/components/Search/Search.stories.tsx | 2 +- src/components/Search/Search.tsx | 1 - src/components/Search/useSearch.ts | 20 +-- src/components/Select/Select.stories.tsx | 1 - src/components/Select/useSelect.ts | 4 +- src/components/Sidebar/useSidebar.ts | 4 +- src/components/Skeleton/useSkeleton.ts | 56 +++---- src/components/Snippet/Snippet.stories.tsx | 3 +- src/components/Snippet/useSnippet.ts | 4 +- src/components/Spacer/useSpacer.ts | 4 +- .../StatusIndicator.stories.tsx | 1 - .../StatusIndicator/useStatusIndicator.ts | 4 +- src/components/Tabs/index.ts | 2 +- src/components/Tabs/useTabs.ts | 114 +++++++------- src/components/Text/Text.stories.tsx | 1 - src/components/Text/useText.ts | 5 +- src/components/Textarea/useTextarea.ts | 8 +- src/components/Toggle/Toggle.stories.tsx | 1 - src/components/Toggle/Toggle.tsx | 2 +- src/components/Toggle/useToggle.ts | 18 +-- src/components/Tooltip/Tooltip.tsx | 1 - src/components/Tooltip/useTooltip.ts | 33 ++-- src/components/Truncate/useTruncate.ts | 4 +- src/hooks/useImage.ts | 10 +- src/hooks/useKeyboardNavigation.test.tsx | 8 +- src/hooks/useKeyboardNavigation.ts | 12 +- src/hooks/useTheme.tsx | 4 +- src/index.ts | 20 +-- src/modules/animations.ts | 4 +- src/modules/colors.ts | 16 +- src/modules/system.ts | 40 ++--- src/modules/validations.ts | 10 +- src/types/common.ts | 63 ++++---- src/types/components.ts | 16 +- src/types/props.ts | 14 +- src/types/shared.ts | 59 +++---- src/types/theme.ts | 20 +-- stories/Overview/components/Colors.tsx | 1 - stories/Overview/components/Icons.tsx | 4 +- stories/Overview/components/Introduction.tsx | 4 +- stories/Overview/components/Spacing.tsx | 1 - .../components/ThemeCustomization.tsx | 4 +- stories/Overview/components/Typography.tsx | 4 +- stories/__helpers__/index.ts | 66 ++++---- 157 files changed, 933 insertions(+), 964 deletions(-) diff --git a/.storybook/Story.tsx b/.storybook/Story.tsx index a249aae1..71c1912f 100644 --- a/.storybook/Story.tsx +++ b/.storybook/Story.tsx @@ -15,21 +15,6 @@ import { WithPadding, } from '../src/types'; -export interface StoryKnownProps - extends StyledProps, - Pick, - Pick, - Pick { - align?: string; - children?: ReactNode; - display?: string; - justify?: string; - maxWidth?: number; - minHeight?: string; - minWidth?: number; - style?: CSSProperties; -} - type StoryProps = Simplify>; export interface Context { @@ -46,6 +31,21 @@ export interface Context { viewMode: string; } +export interface StoryKnownProps + extends StyledProps, + Pick, + Pick, + Pick { + align?: string; + children?: ReactNode; + display?: string; + justify?: string; + maxWidth?: number; + minHeight?: string; + minWidth?: number; + style?: CSSProperties; +} + const StyledStory = styled( 'div', getStyledOptions(), diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d8417161..8d29398d 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -9,10 +9,10 @@ import { DocsContainer } from '@storybook/addon-docs'; import { useGlobals } from '@storybook/preview-api'; import { GlobalTypes } from '@storybook/types'; -import { Context, Story } from './Story'; - import { mergeTheme } from '../src'; -import { black, colors as themeColors, darkColor, lightColor, white } from '../src/modules/theme'; +import { black, darkColor, lightColor, colors as themeColors, white } from '../src/modules/theme'; + +import { Context, Story } from './Story'; export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 2ebbb6d8..4ae92c55 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -7,7 +7,6 @@ import { SetRequired } from '@gilbarbara/types'; import is from 'is-lite'; import { useKeyboardNavigation } from '~/hooks/useKeyboardNavigation'; - import { getStyledOptions, getStyles } from '~/modules/system'; import { Divider } from '~/components/Divider/Divider'; @@ -157,4 +156,4 @@ export function Accordion(props: AccordionProps) { Accordion.displayName = 'Accordion'; -export { defaultProps, type AccordionProps } from './useAccordion'; +export { type AccordionProps, defaultProps } from './useAccordion'; diff --git a/src/components/Accordion/AccordionItem.tsx b/src/components/Accordion/AccordionItem.tsx index fa230f4e..ba9807f3 100644 --- a/src/components/Accordion/AccordionItem.tsx +++ b/src/components/Accordion/AccordionItem.tsx @@ -6,6 +6,10 @@ import { Text } from '~/components/Text'; import { AccordionItemBaseProps, AccordionItemProps, useAccordionItem } from './useAccordion'; +export function AccordionItem(props: AccordionItemProps) { + return ; +} + export function AccordionItemBase(props: AccordionItemBaseProps) { const { componentProps, getDataAttributes } = useAccordionItem(props); const { children, compact, headerAlign, hideToggle, subtitle, title, ...rest } = componentProps; @@ -48,8 +52,4 @@ export function AccordionItemBase(props: AccordionItemBaseProps) { ); } -export function AccordionItem(props: AccordionItemProps) { - return ; -} - export { type AccordionItemProps } from './useAccordion'; diff --git a/src/components/Accordion/useAccordion.ts b/src/components/Accordion/useAccordion.ts index a3526000..2f183d9b 100644 --- a/src/components/Accordion/useAccordion.ts +++ b/src/components/Accordion/useAccordion.ts @@ -27,48 +27,6 @@ import { WithShadow, } from '~/types'; -export interface AccordionItemKnownProps - extends Omit< - CollapseProps, - | 'bottomToggle' - | 'defaultOpen' - | 'hideHeaderToggle' - | 'initialHeight' - | 'maxHeight' - | 'showBottomToggle' - > { - /** - * Make the accordion item compact. - */ - compact?: boolean; - /** - * Disable the accordion item. - * @default false - */ - disabled?: boolean; - // indicator IndicatorProps The accordion item expanded indicator, usually an arrow icon. - /** - * Hide the toggle. - * @default false - */ - hideToggle?: boolean; - /** - * The accordion item id. - */ - id: string; - /** - * The accordion item subtitle. - */ - subtitle?: ReactNode; - /** - * The accordion item title. - */ - title: ReactNode; -} - -export type AccordionItemBaseProps = Simplify; -export type AccordionItemProps = Omit; - interface AccordionKnownProps extends StyledProps, WithColors, @@ -130,8 +88,50 @@ interface AccordionKnownProps variant?: Exclude | 'split'; } +export type AccordionItemBaseProps = Simplify; +export type AccordionItemProps = Omit; + export type AccordionProps = Simplify; +export interface AccordionItemKnownProps + extends Omit< + CollapseProps, + | 'bottomToggle' + | 'defaultOpen' + | 'hideHeaderToggle' + | 'initialHeight' + | 'maxHeight' + | 'showBottomToggle' + > { + /** + * Make the accordion item compact. + */ + compact?: boolean; + /** + * Disable the accordion item. + * @default false + */ + disabled?: boolean; + // indicator IndicatorProps The accordion item expanded indicator, usually an arrow icon. + /** + * Hide the toggle. + * @default false + */ + hideToggle?: boolean; + /** + * The accordion item id. + */ + id: string; + /** + * The accordion item subtitle. + */ + subtitle?: ReactNode; + /** + * The accordion item title. + */ + title: ReactNode; +} + export const defaultProps = { compact: false, disabled: false, diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 6dd15d4b..00357249 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -75,4 +75,4 @@ export const Alert = forwardRef((props, ref) => { Alert.displayName = 'Alert'; -export { defaultProps, type AlertProps } from './useAlert'; +export { type AlertProps, defaultProps } from './useAlert'; diff --git a/src/components/Alert/useAlert.ts b/src/components/Alert/useAlert.ts index 82399d06..ac75d462 100644 --- a/src/components/Alert/useAlert.ts +++ b/src/components/Alert/useAlert.ts @@ -1,7 +1,6 @@ import { SetRequired, Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { getColorTokens } from '~/modules/colors'; import { @@ -19,6 +18,8 @@ import { WithVariant, } from '~/types'; +export type AlertProps = Simplify; + export interface AlertKnownProps extends StyledProps, WithBorder, @@ -44,8 +45,6 @@ export interface AlertKnownProps type: 'success' | 'warning' | 'error' | 'info' | 'neutral'; } -export type AlertProps = Simplify; - export function getColor(type: AlertProps['type'], light?: boolean) { const colors = { success: light ? 'green.100' : 'green.600', diff --git a/src/components/Anchor/Anchor.tsx b/src/components/Anchor/Anchor.tsx index dbf95d6a..104de239 100644 --- a/src/components/Anchor/Anchor.tsx +++ b/src/components/Anchor/Anchor.tsx @@ -65,4 +65,4 @@ export const Anchor = forwardRef((props, ref) => Anchor.displayName = 'Anchor'; -export { defaultProps, type AnchorProps } from './useAnchor'; +export { type AnchorProps, defaultProps } from './useAnchor'; diff --git a/src/components/Anchor/useAnchor.ts b/src/components/Anchor/useAnchor.ts index 047ab39f..b93abc28 100644 --- a/src/components/Anchor/useAnchor.ts +++ b/src/components/Anchor/useAnchor.ts @@ -2,7 +2,6 @@ import { omit } from '@gilbarbara/helpers'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -20,6 +19,8 @@ import { WithTextOptions, } from '~/types'; +export type AnchorProps = Simplify>; + export interface AnchorKnownProps extends StyledProps, WithChildren, @@ -49,8 +50,6 @@ export interface AnchorKnownProps href: string; } -export type AnchorProps = Simplify>; - export const defaultProps = { ...omit(textDefaultOptions, 'size'), color: 'primary', diff --git a/src/components/AspectRatio/AspectRatio.stories.tsx b/src/components/AspectRatio/AspectRatio.stories.tsx index 15ab11e6..72445e3a 100644 --- a/src/components/AspectRatio/AspectRatio.stories.tsx +++ b/src/components/AspectRatio/AspectRatio.stories.tsx @@ -3,7 +3,6 @@ import SVG from 'react-inlinesvg'; import { Meta, StoryObj } from '@storybook/react'; import { grayScale } from '~/modules/theme'; - import { hideProps, hideTable, marginProps } from '~/stories/__helpers__'; import Info from '~/stories/components/Info'; diff --git a/src/components/AspectRatio/useAspectRatio.ts b/src/components/AspectRatio/useAspectRatio.ts index 3e461cd4..802449bb 100644 --- a/src/components/AspectRatio/useAspectRatio.ts +++ b/src/components/AspectRatio/useAspectRatio.ts @@ -4,6 +4,8 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { StyledProps, WithChildren, WithHTMLAttributes, WithMargin } from '~/types'; +export type AspectRatioProps = Simplify; + export interface AspectRatioKnownProps extends StyledProps, WithChildren, @@ -13,8 +15,6 @@ export interface AspectRatioKnownProps ratio: number; } -export type AspectRatioProps = Simplify; - export function useAspectRatio(props: AspectRatioProps) { return useComponentProps(props); } diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index d90f637c..57719dae 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Flex, FlexCenter, Grid, Icon, Paragraph } from '~'; import { avatar, radius } from '~/modules/theme'; - import users from '~/stories/__fixtures__/users.json'; import { colorProps, diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 1342e273..7bf4bce7 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -116,4 +116,4 @@ export const Avatar = forwardRef((props, ref) => { Avatar.displayName = 'Avatar'; -export { defaultProps, type AvatarProps } from './useAvatar'; +export { type AvatarProps, defaultProps } from './useAvatar'; diff --git a/src/components/Avatar/useAvatar.ts b/src/components/Avatar/useAvatar.ts index a8379d9d..43d8ca9f 100644 --- a/src/components/Avatar/useAvatar.ts +++ b/src/components/Avatar/useAvatar.ts @@ -12,6 +12,8 @@ import { WithRadius, } from '~/types'; +export type AvatarProps = Simplify; + export interface AvatarKnownProps extends StyledProps, WithColorsDefaultBg, @@ -46,8 +48,6 @@ export interface AvatarKnownProps style?: CSSProperties; } -export type AvatarProps = Simplify; - export const defaultProps = { bg: 'primary', borderColor: 'primary', diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index a5c90428..c7bf399c 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -76,7 +76,7 @@ export const Colors: Story = { {...rest} bg={d} borderColor={d === 'white' ? 'red' : undefined} - color={color ?? (!['yellow', 'white'].includes(d) ? 'white' : undefined)} + color={color ?? (!['white', 'yellow'].includes(d) ? 'white' : undefined)} > diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 2b25ee88..a63e11f4 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -144,4 +144,4 @@ export function Badge(props: BadgeProps) { Badge.displayName = 'Badge'; -export { defaultProps, type BadgeProps } from './useBadge'; +export { type BadgeProps, defaultProps } from './useBadge'; diff --git a/src/components/Badge/useBadge.ts b/src/components/Badge/useBadge.ts index 548f6623..f8ba9816 100644 --- a/src/components/Badge/useBadge.ts +++ b/src/components/Badge/useBadge.ts @@ -14,6 +14,8 @@ import { WithRadius, } from '~/types'; +export type BadgeProps = Simplify; + export interface BadgeKnownProps extends StyledProps, WithChildren, @@ -68,8 +70,6 @@ export interface BadgeKnownProps shape?: 'circle' | 'rectangle'; } -export type BadgeProps = Simplify; - export const defaultProps = { bg: 'primary', hideBorder: false, diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx index 64677eb1..5b9c84a1 100644 --- a/src/components/Box/Box.tsx +++ b/src/components/Box/Box.tsx @@ -20,4 +20,4 @@ export const Box = forwardRef((props, ref) => { Box.displayName = 'Box'; -export { defaultProps, type BoxProps } from './useBox'; +export { type BoxProps, defaultProps } from './useBox'; diff --git a/src/components/Box/useBox.ts b/src/components/Box/useBox.ts index 59d88949..24552cd3 100644 --- a/src/components/Box/useBox.ts +++ b/src/components/Box/useBox.ts @@ -18,6 +18,8 @@ import { WithShadow, } from '~/types'; +export type BoxProps = Simplify>; + export interface BoxKnownProps extends StyledProps, WithBorder, @@ -32,8 +34,6 @@ export interface BoxKnownProps WithRadius, WithShadow {} -export type BoxProps = Simplify>; - export const defaultProps = { display: 'block', } satisfies Omit; diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 5ce19e39..159d8b82 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -5,7 +5,6 @@ import { expect, fn, userEvent, waitForElementToBeRemoved, within } from '@story import { Flex, Grid, Icon, Spacer } from '~'; import { radius } from '~/modules/theme'; - import { colorProps, COMPONENT_SIZES, diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index eb825d84..4042e3c9 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -146,4 +146,4 @@ export const Button = forwardRef((props, ref) => { Button.displayName = 'Button'; -export { defaultProps, type ButtonProps } from './useButton'; +export { type ButtonProps, defaultProps } from './useButton'; diff --git a/src/components/Button/useButton.ts b/src/components/Button/useButton.ts index d42698c8..09d90d17 100644 --- a/src/components/Button/useButton.ts +++ b/src/components/Button/useButton.ts @@ -23,6 +23,8 @@ import { WithVariant, } from '~/types'; +export type ButtonProps = Simplify>; + export interface ButtonKnownProps extends StyledProps, WithBlock, @@ -74,8 +76,6 @@ export interface ButtonKnownProps wide?: boolean; } -export type ButtonProps = Simplify>; - export const defaultProps = { bg: 'primary', block: false, diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx index eed955cd..3109428a 100644 --- a/src/components/ButtonGroup/ButtonGroup.tsx +++ b/src/components/ButtonGroup/ButtonGroup.tsx @@ -144,4 +144,4 @@ export function ButtonGroup(props: ButtonGroupProps) { ButtonGroup.displayName = 'ButtonGroup'; -export { defaultProps, type ButtonGroupProps, type ButtonGroupItemProps } from './useButtonGroup'; +export { type ButtonGroupItemProps, type ButtonGroupProps, defaultProps } from './useButtonGroup'; diff --git a/src/components/ButtonGroup/useButtonGroup.ts b/src/components/ButtonGroup/useButtonGroup.ts index e7b6f210..5906a6c2 100644 --- a/src/components/ButtonGroup/useButtonGroup.ts +++ b/src/components/ButtonGroup/useButtonGroup.ts @@ -16,6 +16,10 @@ import { WithMargin, } from '~/types'; +export type ButtonGroupProps = Simplify< + RequireAtLeastOne +>; + export interface ButtonGroupItemProps extends Omit, DataAttributes { @@ -59,10 +63,6 @@ export interface ButtonGroupKnownProps unselectedVariant?: Exclude; } -export type ButtonGroupProps = Simplify< - RequireAtLeastOne ->; - export const defaultProps = { bg: 'primary', disabled: false, diff --git a/src/components/ButtonSplit/ButtonSplit.stories.tsx b/src/components/ButtonSplit/ButtonSplit.stories.tsx index cd19944b..e55101b3 100644 --- a/src/components/ButtonSplit/ButtonSplit.stories.tsx +++ b/src/components/ButtonSplit/ButtonSplit.stories.tsx @@ -13,6 +13,7 @@ import { hideProps, VARIANTS, } from '~/stories/__helpers__'; + import { MenuItemProps } from '~/types/props'; import { diff --git a/src/components/ButtonSplit/ButtonSplit.tsx b/src/components/ButtonSplit/ButtonSplit.tsx index 36b7fe96..497c57f1 100644 --- a/src/components/ButtonSplit/ButtonSplit.tsx +++ b/src/components/ButtonSplit/ButtonSplit.tsx @@ -157,9 +157,9 @@ export function ButtonSplit(props: ButtonSplitProps) { ButtonSplit.displayName = 'ButtonSplit'; +export { type ButtonSplitProps, defaultProps } from './useButtonSplit'; + export { - MenuSeparator as ButtonSplitSeparator, MenuItem as ButtonSplitItem, + MenuSeparator as ButtonSplitSeparator, } from '~/components/Menu'; - -export { defaultProps, type ButtonSplitProps } from './useButtonSplit'; diff --git a/src/components/ButtonSplit/index.ts b/src/components/ButtonSplit/index.ts index 4029299f..e17da959 100644 --- a/src/components/ButtonSplit/index.ts +++ b/src/components/ButtonSplit/index.ts @@ -1 +1 @@ -export { ButtonSplit, ButtonSplitSeparator, ButtonSplitItem } from './ButtonSplit'; +export { ButtonSplit, ButtonSplitItem, ButtonSplitSeparator } from './ButtonSplit'; diff --git a/src/components/ButtonSplit/useButtonSplit.ts b/src/components/ButtonSplit/useButtonSplit.ts index c1b5fa51..61533e56 100644 --- a/src/components/ButtonSplit/useButtonSplit.ts +++ b/src/components/ButtonSplit/useButtonSplit.ts @@ -17,6 +17,8 @@ import { WithTextOptions, } from '~/types'; +export type ButtonSplitProps = Simplify; + export interface ButtonSplitKnownProps extends Pick, WithBlock, @@ -36,8 +38,6 @@ export interface ButtonSplitKnownProps position?: PositionY; } -export type ButtonSplitProps = Simplify; - export const defaultProps = { bg: 'primary', block: false, diff --git a/src/components/ButtonUnstyled/ButtonUnstyled.tsx b/src/components/ButtonUnstyled/ButtonUnstyled.tsx index 112d257d..af5e5e87 100644 --- a/src/components/ButtonUnstyled/ButtonUnstyled.tsx +++ b/src/components/ButtonUnstyled/ButtonUnstyled.tsx @@ -51,4 +51,4 @@ export const ButtonUnstyled = forwardRef ButtonUnstyled.displayName = 'ButtonUnstyled'; -export { defaultProps, type ButtonUnstyledProps } from './useButtonUnstyled'; +export { type ButtonUnstyledProps, defaultProps } from './useButtonUnstyled'; diff --git a/src/components/ButtonUnstyled/useButtonUnstyled.ts b/src/components/ButtonUnstyled/useButtonUnstyled.ts index 22c0a5a8..250f1148 100644 --- a/src/components/ButtonUnstyled/useButtonUnstyled.ts +++ b/src/components/ButtonUnstyled/useButtonUnstyled.ts @@ -2,7 +2,6 @@ import { ButtonHTMLAttributes } from 'react'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -23,6 +22,10 @@ import { WithTextOptions, } from '~/types'; +export type ButtonUnstyledProps = Simplify< + OmitElementProps +>; + export interface ButtonUnstyledKnownProps extends StyledProps, WithBorder, @@ -41,10 +44,6 @@ export interface ButtonUnstyledKnownProps type?: ButtonHTMLAttributes['type']; } -export type ButtonUnstyledProps = Simplify< - OmitElementProps ->; - export const defaultProps = { ...textDefaultOptions, align: 'center', diff --git a/src/components/CheckboxAndRadio/Checkbox.stories.tsx b/src/components/CheckboxAndRadio/Checkbox.stories.tsx index b7872e3f..34ad899f 100644 --- a/src/components/CheckboxAndRadio/Checkbox.stories.tsx +++ b/src/components/CheckboxAndRadio/Checkbox.stories.tsx @@ -4,7 +4,6 @@ import { expect, fireEvent, fn, within } from '@storybook/test'; import { Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps, marginProps } from '~/stories/__helpers__'; import { Checkbox, defaultProps } from './Checkbox'; diff --git a/src/components/CheckboxAndRadio/Checkbox.tsx b/src/components/CheckboxAndRadio/Checkbox.tsx index 6f6e683b..851c27f3 100644 --- a/src/components/CheckboxAndRadio/Checkbox.tsx +++ b/src/components/CheckboxAndRadio/Checkbox.tsx @@ -73,4 +73,4 @@ export const Checkbox = forwardRef((props, ref) Checkbox.displayName = 'Checkbox'; -export { checkBoxDefaultProps as defaultProps, type CheckboxProps } from './useCheckboxAndRadio'; +export { type CheckboxProps, checkBoxDefaultProps as defaultProps } from './useCheckboxAndRadio'; diff --git a/src/components/CheckboxAndRadio/Radio.stories.tsx b/src/components/CheckboxAndRadio/Radio.stories.tsx index 8fad9176..08ec6699 100644 --- a/src/components/CheckboxAndRadio/Radio.stories.tsx +++ b/src/components/CheckboxAndRadio/Radio.stories.tsx @@ -4,7 +4,6 @@ import { expect, fireEvent, fn, within } from '@storybook/test'; import { Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps, marginProps } from '~/stories/__helpers__'; import { defaultProps, Radio } from './Radio'; diff --git a/src/components/CheckboxAndRadio/useCheckboxAndRadio.tsx b/src/components/CheckboxAndRadio/useCheckboxAndRadio.tsx index 9ad83d10..f28e8f05 100644 --- a/src/components/CheckboxAndRadio/useCheckboxAndRadio.tsx +++ b/src/components/CheckboxAndRadio/useCheckboxAndRadio.tsx @@ -5,7 +5,6 @@ import { pick, px } from '@gilbarbara/helpers'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { getColorTokens } from '~/modules/colors'; import { getDisableStyles, @@ -28,6 +27,20 @@ import { WithTheme, } from '~/types'; +interface InnerProps + extends Omit, + Omit, + WithTheme { + category?: 'checkbox' | 'radio'; +} + +export type CheckboxProps = Simplify< + OmitElementProps +>; +export type RadioProps = Simplify< + OmitElementProps +>; + export interface CheckboxAndRadioKnownProps extends StyledProps, WithAccent, @@ -40,20 +53,6 @@ export interface CheckboxAndRadioKnownProps onChange?: ChangeEventHandler; } -export type CheckboxProps = Simplify< - OmitElementProps ->; -export type RadioProps = Simplify< - OmitElementProps ->; - -interface InnerProps - extends Omit, - Omit, - WithTheme { - category?: 'checkbox' | 'radio'; -} - export const checkBoxDefaultProps = { accent: 'primary', align: 'center', @@ -223,7 +222,7 @@ export function handleKeyDown(event: KeyboardEvent) { const target = event.target as HTMLSpanElement; const input = target.previousElementSibling as HTMLInputElement; - if (!input || input.disabled || !['Space', 'Enter'].includes(event.code)) { + if (!input || input.disabled || !['Enter', 'Space'].includes(event.code)) { return; } diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx index 4dded69c..03490261 100644 --- a/src/components/Chip/Chip.stories.tsx +++ b/src/components/Chip/Chip.stories.tsx @@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Grid, Icon, Spacer } from '~'; import { textSizes } from '~/modules/options'; - import { colorProps, dimensionProps, diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index 2ea01287..ab001a01 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -76,4 +76,4 @@ export const Chip = forwardRef((props, ref) => { Chip.displayName = 'Chip'; -export { defaultProps, type ChipProps } from './useChip'; +export { type ChipProps, defaultProps } from './useChip'; diff --git a/src/components/Chip/useChip.ts b/src/components/Chip/useChip.ts index 267e62cf..0481fc66 100644 --- a/src/components/Chip/useChip.ts +++ b/src/components/Chip/useChip.ts @@ -3,7 +3,6 @@ import { omit } from '@gilbarbara/helpers'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -23,6 +22,8 @@ import { WithVariant, } from '~/types'; +export type ChipProps = Simplify; + export interface ChipKnownProps extends StyledProps, WithChildren, @@ -51,8 +52,6 @@ export interface ChipKnownProps style?: CSSProperties; } -export type ChipProps = Simplify; - export const defaultProps = { ...omit(textDefaultOptions, 'size'), bg: 'primary', diff --git a/src/components/ClickOutside/useClickOutside.ts b/src/components/ClickOutside/useClickOutside.ts index d04d61d6..4a20be38 100644 --- a/src/components/ClickOutside/useClickOutside.ts +++ b/src/components/ClickOutside/useClickOutside.ts @@ -4,13 +4,13 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { WithChildren, WithDisplay, WithFlexBox, WithLayout } from '~/types'; +export type ClickOutsideProps = Simplify; + export interface ClickOutsideKnownProps extends WithChildren, WithDisplay, WithLayout, WithFlexBox { active: boolean; onClick: () => void; } -export type ClickOutsideProps = Simplify; - export function useClickOutside(props: ClickOutsideProps) { return useComponentProps(props); } diff --git a/src/components/Collapse/Collapse.tsx b/src/components/Collapse/Collapse.tsx index 1113fe00..00a2a99e 100644 --- a/src/components/Collapse/Collapse.tsx +++ b/src/components/Collapse/Collapse.tsx @@ -266,4 +266,4 @@ export function Collapse(props: CollapseProps) { Collapse.displayName = 'Collapse'; -export { defaultProps, type CollapseProps } from './useCollapse'; +export { type CollapseProps, defaultProps } from './useCollapse'; diff --git a/src/components/Collapse/useCollapse.ts b/src/components/Collapse/useCollapse.ts index 6a901826..7f4ee755 100644 --- a/src/components/Collapse/useCollapse.ts +++ b/src/components/Collapse/useCollapse.ts @@ -16,6 +16,8 @@ import { WithShadow, } from '~/types'; +export type CollapseProps = Simplify; + export interface CollapseKnownProps extends StyledProps, AriaAttributes, @@ -93,8 +95,6 @@ export interface CollapseKnownProps title?: ReactNode; } -export type CollapseProps = Simplify; - export interface ContentProps extends Pick< SetRequired< diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx index 6af19112..3c46d3aa 100644 --- a/src/components/Container/Container.tsx +++ b/src/components/Container/Container.tsx @@ -44,4 +44,4 @@ export const Container = forwardRef((props, ref) Container.displayName = 'Container'; -export { defaultProps, type ContainerProps } from './useContainer'; +export { type ContainerProps, defaultProps } from './useContainer'; diff --git a/src/components/Container/useContainer.ts b/src/components/Container/useContainer.ts index eb61ce24..2191d2c6 100644 --- a/src/components/Container/useContainer.ts +++ b/src/components/Container/useContainer.ts @@ -15,6 +15,8 @@ import { WithPadding, } from '~/types'; +export type ContainerProps = Simplify; + export interface ContainerKnownProps extends StyledProps, WithChildren, @@ -37,8 +39,6 @@ export interface ContainerKnownProps verticalPadding?: boolean; } -export type ContainerProps = Simplify; - export const defaultProps = { align: 'stretch', direction: 'column', diff --git a/src/components/CopyToClipboard/CopyToClipboard.tsx b/src/components/CopyToClipboard/CopyToClipboard.tsx index 7ea6fa58..46cc58c0 100644 --- a/src/components/CopyToClipboard/CopyToClipboard.tsx +++ b/src/components/CopyToClipboard/CopyToClipboard.tsx @@ -151,4 +151,4 @@ export function CopyToClipboard(props: CopyToClipboardProps) { CopyToClipboard.displayName = 'CopyToClipboard'; -export { defaultProps, type CopyToClipboardProps } from './useCopyToClipboard'; +export { type CopyToClipboardProps, defaultProps } from './useCopyToClipboard'; diff --git a/src/components/CopyToClipboard/useCopyToClipboard.ts b/src/components/CopyToClipboard/useCopyToClipboard.ts index 6b930121..94ac3d16 100644 --- a/src/components/CopyToClipboard/useCopyToClipboard.ts +++ b/src/components/CopyToClipboard/useCopyToClipboard.ts @@ -7,6 +7,8 @@ import { TooltipProps } from '~/components/Tooltip/Tooltip'; import { WithChildrenOptional, WithColors, WithMargin, WithPadding } from '~/types'; +export type CopyToClipboardProps = Simplify; + export interface CopyToClipboardKnownProps extends Pick, WithChildrenOptional, @@ -66,8 +68,6 @@ export interface CopyToClipboardKnownProps value: ReactNode; } -export type CopyToClipboardProps = Simplify; - export const defaultProps = { disableAnimation: false, hideTooltip: false, diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx index 706cc1be..67e23de4 100644 --- a/src/components/DataTable/DataTable.stories.tsx +++ b/src/components/DataTable/DataTable.stories.tsx @@ -34,6 +34,7 @@ import { radiusProps, spacingProps, } from '~/stories/__helpers__'; + import { ColorVariantTones, DropdownOption } from '~/types'; import { DataTable, defaultProps } from './DataTable'; @@ -77,6 +78,11 @@ type WrapperColumns = 'avatar' | 'email' | 'team' | 'status' | 'action'; type WrapperState = typeof wrapperState; +interface Props extends SharedState { + accent?: ColorVariantTones; + setState: (state: Partial) => void; +} + interface SharedState { // eslint-disable-next-line react/no-unused-prop-types search: string; @@ -84,11 +90,6 @@ interface SharedState { team: string; } -interface Props extends SharedState { - accent?: ColorVariantTones; - setState: (state: Partial) => void; -} - const wrapperState = { loading: false, search: '', @@ -323,6 +324,30 @@ export const Basic: Story = { render: props => , }; +type ExternalColumns = 'name' | 'description' | 'keywords' | 'version' | 'links'; + +interface Entry { + package: Package; + score: { + detail: { + maintenance: number; + popularity: number; + quality: number; + }; + final: number; + }; + searchScore: number; +} + +interface ExternalState { + currentPage: number; + loading: boolean; + results: Array; + selected: StringOrNull; + showModal: boolean; + totalPages: number; +} + interface Package { author: { email: string; @@ -351,36 +376,12 @@ interface Package { version: string; } -interface Entry { - package: Package; - score: { - detail: { - maintenance: number; - popularity: number; - quality: number; - }; - final: number; - }; - searchScore: number; -} - interface Response { objects: Entry[]; time: string; total: number; } -interface ExternalState { - currentPage: number; - loading: boolean; - results: Array; - selected: StringOrNull; - showModal: boolean; - totalPages: number; -} - -type ExternalColumns = 'name' | 'description' | 'keywords' | 'version' | 'links'; - const externalState: ExternalState = { currentPage: 1, loading: false, diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index a885cda3..61d75862 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -227,4 +227,4 @@ export function DataTable(props: DataTableProps = Simplify>; + +export type DataTableRow = Simplify< + Record & { id?: StringOrNumber } +>; + +export type DataTableRowContent = ReactNode | { label: ReactNode; value: string }; + +export interface DataTableBodyProps + extends WithAccent, + Pick { + getDataAttributes: UseThemeReturn['getDataAttributes']; + isResponsive: boolean; + sortColumn?: string; + theme: Theme; +} + export interface DataTableColumn { /** * Disable sorting for the column. @@ -62,11 +79,16 @@ export interface DataTableColumn { title: ReactNode; } -export type DataTableRowContent = ReactNode | { label: ReactNode; value: string }; - -export type DataTableRow = Simplify< - Record & { id?: StringOrNumber } ->; +export interface DataTableHeadProps extends WithAccent, Pick { + getDataAttributes: UseThemeReturn['getDataAttributes']; + isDisabled: boolean; + isResponsive: boolean; + onClick: MouseEventHandler; + sortBy: StringOrNull; + sortDirection: SortDirection; + stickyHeader: boolean; + theme: Theme; +} export interface DataTableKnownProps extends StyledProps, @@ -181,28 +203,6 @@ export interface DataTableKnownProps width?: number; } -export type DataTableProps = Simplify>; - -export interface DataTableHeadProps extends WithAccent, Pick { - getDataAttributes: UseThemeReturn['getDataAttributes']; - isDisabled: boolean; - isResponsive: boolean; - onClick: MouseEventHandler; - sortBy: StringOrNull; - sortDirection: SortDirection; - stickyHeader: boolean; - theme: Theme; -} - -export interface DataTableBodyProps - extends WithAccent, - Pick { - getDataAttributes: UseThemeReturn['getDataAttributes']; - isResponsive: boolean; - sortColumn?: string; - theme: Theme; -} - export const defaultProps = { accent: 'primary', breakpoint: 768, diff --git a/src/components/DatePicker/Range.tsx b/src/components/DatePicker/Range.tsx index 08e813a5..22f74246 100644 --- a/src/components/DatePicker/Range.tsx +++ b/src/components/DatePicker/Range.tsx @@ -165,4 +165,4 @@ export function DatePickerRange(props: DatePickerRangeProps) { DatePickerRange.displayName = 'DatePickerRange'; -export { rangeDefaultProps as defaultProps, type DatePickerRangeProps } from './useDatePicker'; +export { type DatePickerRangeProps, rangeDefaultProps as defaultProps } from './useDatePicker'; diff --git a/src/components/DatePicker/Selector.tsx b/src/components/DatePicker/Selector.tsx index e01ca125..40ab7a08 100644 --- a/src/components/DatePicker/Selector.tsx +++ b/src/components/DatePicker/Selector.tsx @@ -334,6 +334,6 @@ export function DatePickerSelector(props: DatePickerSelectorProps) { DatePickerSelector.displayName = 'DatePickerSelector'; export { - selectorDefaultProps as defaultProps, type DatePickerSelectorProps, + selectorDefaultProps as defaultProps, } from './useDatePicker'; diff --git a/src/components/DatePicker/Single.tsx b/src/components/DatePicker/Single.tsx index a428e154..1c750070 100644 --- a/src/components/DatePicker/Single.tsx +++ b/src/components/DatePicker/Single.tsx @@ -64,4 +64,4 @@ export function DatePicker(props: DatePickerSingleProps) { DatePicker.displayName = 'DatePicker'; -export { singleDefaultProps as defaultProps, type DatePickerSingleProps } from './useDatePicker'; +export { type DatePickerSingleProps, singleDefaultProps as defaultProps } from './useDatePicker'; diff --git a/src/components/DatePicker/useDatePicker.ts b/src/components/DatePicker/useDatePicker.ts index e72ee10e..f072a6fe 100644 --- a/src/components/DatePicker/useDatePicker.ts +++ b/src/components/DatePicker/useDatePicker.ts @@ -21,6 +21,29 @@ import { WithShadow, } from '~/types'; +export type DatePickerRangeClickHandler = (range: DatePickerRangeParameter) => void; + +export type DatePickerRangeParameter = [from?: string, to?: string]; + +export type DatePickerRangeProps = Simplify; + +export type DatePickerSelectorProps = Simplify< + DatePickerSelectorBaseProps & + ( + | { + mode: 'range'; + onChange?: DatePickerRangeClickHandler; + } + | { + mode?: 'single'; + onChange?: DatePickerSingleClickHandler; + } + ) +>; +export type DatePickerSingleClickHandler = (isoDate: string) => void; + +export type DatePickerSingleProps = Simplify; + export interface DatePickerBaseProps extends StyledProps, WithAccent { /** * @default Go to today @@ -37,11 +60,6 @@ export interface DatePickerLayoutProps WithRadius, WithShadow {} -export type DatePickerRangeParameter = [from?: string, to?: string]; - -export type DatePickerRangeClickHandler = (range: DatePickerRangeParameter) => void; -export type DatePickerSingleClickHandler = (isoDate: string) => void; - export interface DatePickerRangeKnownProps extends DatePickerBaseProps, DatePickerLayoutProps, @@ -69,8 +87,6 @@ export interface DatePickerRangeKnownProps showApply?: boolean; } -export type DatePickerRangeProps = Simplify; - export interface DatePickerSelectorBaseProps extends DatePickerBaseProps, Omit, @@ -126,20 +142,6 @@ export interface DatePickerSelectorBaseProps width?: StringOrNumber; } -export type DatePickerSelectorProps = Simplify< - DatePickerSelectorBaseProps & - ( - | { - mode: 'range'; - onChange?: DatePickerRangeClickHandler; - } - | { - mode?: 'single'; - onChange?: DatePickerSingleClickHandler; - } - ) ->; - export interface DatePickerSingleKnownProps extends DatePickerBaseProps, DatePickerLayoutProps, @@ -152,8 +154,6 @@ export interface DatePickerSingleKnownProps selected?: string; } -export type DatePickerSingleProps = Simplify; - export const baseProps = { accent: 'primary', formatLocale: 'en-US', diff --git a/src/components/DatePicker/utils.tsx b/src/components/DatePicker/utils.tsx index 40c41a90..4e5be0c6 100644 --- a/src/components/DatePicker/utils.tsx +++ b/src/components/DatePicker/utils.tsx @@ -13,17 +13,6 @@ import { DatePickerBaseProps, DatePickerLayoutProps } from '~/components/DatePic import { WithTheme } from '~/types'; -export function getNumberOfMonths(fromDate?: Date | string, toDate?: Date | string): number { - if (fromDate && toDate) { - const day1 = is.date(fromDate) ? fromDate : new Date(fromDate); - const day2 = is.date(toDate) ? toDate : new Date(toDate); - - return isSameMonth(day1, day2) ? 1 : 2; - } - - return 2; -} - export function getFooter(setter: (date: Date) => void, label: ReactNode, apply?: ReactNode) { if (!label && !apply) { return null; @@ -43,50 +32,15 @@ export function getFooter(setter: (date: Date) => void, label: ReactNode, apply? ); } -export function getRange( - fromDate?: Date | string, - toDate?: Date | string, -) { - const additionalProps: Partial = {}; - let dateStart; - let dateEnd; - - if (fromDate) { - dateStart = is.date(fromDate) ? fromDate : new Date(fromDate); - - additionalProps.fromMonth = new Date(dateStart.getFullYear(), dateStart.getMonth()); - additionalProps.disabled = [ - { - from: new Date(dateStart.getFullYear(), dateStart.getMonth(), 0), - to: new Date(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate()), - }, - ]; - } - - if (toDate) { - dateEnd = is.date(toDate) ? toDate : new Date(toDate); - const disabledDays = []; - - disabledDays.push({ - from: new Date(dateEnd.getFullYear(), dateEnd.getMonth(), dateEnd.getDate()), - to: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 1, 1), - }); - - if (dateStart && dateStart.getMonth() === dateEnd.getMonth()) { - disabledDays.push({ - from: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 1, 0), - to: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 2, 1), - }); - } - - additionalProps.toMonth = new Date(dateEnd.getFullYear(), dateEnd.getMonth()); +export function getNumberOfMonths(fromDate?: Date | string, toDate?: Date | string): number { + if (fromDate && toDate) { + const day1 = is.date(fromDate) ? fromDate : new Date(fromDate); + const day2 = is.date(toDate) ? toDate : new Date(toDate); - additionalProps.disabled = is.array(additionalProps.disabled) - ? [...additionalProps.disabled, ...disabledDays] - : disabledDays; + return isSameMonth(day1, day2) ? 1 : 2; } - return additionalProps; + return 2; } export function getPickerStyles(props: DatePickerBaseProps & DatePickerLayoutProps & WithTheme) { @@ -418,3 +372,49 @@ export function getPickerStyles(props: DatePickerBaseProps & DatePickerLayoutPro } `; } + +export function getRange( + fromDate?: Date | string, + toDate?: Date | string, +) { + const additionalProps: Partial = {}; + let dateStart; + let dateEnd; + + if (fromDate) { + dateStart = is.date(fromDate) ? fromDate : new Date(fromDate); + + additionalProps.fromMonth = new Date(dateStart.getFullYear(), dateStart.getMonth()); + additionalProps.disabled = [ + { + from: new Date(dateStart.getFullYear(), dateStart.getMonth(), 0), + to: new Date(dateStart.getFullYear(), dateStart.getMonth(), dateStart.getDate()), + }, + ]; + } + + if (toDate) { + dateEnd = is.date(toDate) ? toDate : new Date(toDate); + const disabledDays = []; + + disabledDays.push({ + from: new Date(dateEnd.getFullYear(), dateEnd.getMonth(), dateEnd.getDate()), + to: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 1, 1), + }); + + if (dateStart && dateStart.getMonth() === dateEnd.getMonth()) { + disabledDays.push({ + from: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 1, 0), + to: new Date(dateEnd.getFullYear(), dateEnd.getMonth() + 2, 1), + }); + } + + additionalProps.toMonth = new Date(dateEnd.getFullYear(), dateEnd.getMonth()); + + additionalProps.disabled = is.array(additionalProps.disabled) + ? [...additionalProps.disabled, ...disabledDays] + : disabledDays; + } + + return additionalProps; +} diff --git a/src/components/Dialog/useDialog.ts b/src/components/Dialog/useDialog.ts index 75f4897f..a64f20b8 100644 --- a/src/components/Dialog/useDialog.ts +++ b/src/components/Dialog/useDialog.ts @@ -19,6 +19,8 @@ import { WithShadow, } from '~/types'; +export type DialogProps = Simplify; + export interface DialogKnownProps extends StyledProps, WithAccent, @@ -71,8 +73,6 @@ export interface DialogKnownProps width?: StringOrNumber; } -export type DialogProps = Simplify; - export const defaultProps = { ...portalDefaultProps, accent: 'primary', diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 17851889..ba99f228 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -90,12 +90,12 @@ const StyledDivider = styled('div', getStyledOptions('type'))< } &:before { - flex-grow: ${['right', 'center'].includes(align) ? 1 : 0}; + flex-grow: ${['center', 'right'].includes(align) ? 1 : 0}; margin-right: ${spacingTheme[gap]}; } &:after { - flex-grow: ${['left', 'center'].includes(align) ? 1 : 0}; + flex-grow: ${['center', 'left'].includes(align) ? 1 : 0}; margin-left: ${spacingTheme[gap]}; } `; diff --git a/src/components/Divider/useDivider.ts b/src/components/Divider/useDivider.ts index b788f502..d51b8c9a 100644 --- a/src/components/Divider/useDivider.ts +++ b/src/components/Divider/useDivider.ts @@ -1,7 +1,6 @@ import { Simplify, StringOrNumber } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -18,6 +17,8 @@ import { WithTextOptions, } from '~/types'; +export type DividerProps = Simplify; + export interface DividerKnownProps extends StyledProps, WithAlign, @@ -64,8 +65,6 @@ export interface DividerKnownProps spacing?: SpacingOrZero | [start: SpacingOrZero, end: SpacingOrZero]; } -export type DividerProps = Simplify; - export const defaultProps = { ...textDefaultOptions, align: 'center', diff --git a/src/components/Dropdown/Content.tsx b/src/components/Dropdown/Content.tsx index 2021520a..789b9ea7 100644 --- a/src/components/Dropdown/Content.tsx +++ b/src/components/Dropdown/Content.tsx @@ -4,7 +4,6 @@ import styled from '@emotion/styled'; import { ComponentProps, Option } from '@gilbarbara/react-dropdown'; import { useTheme } from '~/hooks/useTheme'; - import { getStyledOptions } from '~/modules/system'; import { FlexInline } from '~/components/Flex'; diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx index 885956c9..17286968 100644 --- a/src/components/Dropdown/Dropdown.stories.tsx +++ b/src/components/Dropdown/Dropdown.stories.tsx @@ -5,8 +5,8 @@ import { expect, fn, userEvent, within } from '@storybook/test'; import { Icon, Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps, marginProps } from '~/stories/__helpers__'; + import { DropdownOption } from '~/types'; import { defaultProps, Dropdown } from './Dropdown'; diff --git a/src/components/Dropdown/Items.tsx b/src/components/Dropdown/Items.tsx index f7e21ff1..77086f24 100644 --- a/src/components/Dropdown/Items.tsx +++ b/src/components/Dropdown/Items.tsx @@ -5,7 +5,6 @@ import { ComponentProps } from '@gilbarbara/react-dropdown'; import { PlainObject, StringOrNumber } from '@gilbarbara/types'; import { useTheme } from '~/hooks/useTheme'; - import { getColorTokens } from '~/modules/colors'; import { getStyledOptions } from '~/modules/system'; diff --git a/src/components/Dropdown/useDropdown.ts b/src/components/Dropdown/useDropdown.ts index bf9e3016..543ecc39 100644 --- a/src/components/Dropdown/useDropdown.ts +++ b/src/components/Dropdown/useDropdown.ts @@ -30,6 +30,8 @@ export type DropdownBaseProps = Omit< | 'styles' >; +export type DropdownProps = Simplify; + export interface DropdownKnownProps extends StyledProps, WithAccent, @@ -57,8 +59,6 @@ export interface DropdownKnownProps width?: StringOrNumber; } -export type DropdownProps = Simplify; - export const defaultProps = { accent: 'primary', allowCreate: false, diff --git a/src/components/Emoji/useEmoji.ts b/src/components/Emoji/useEmoji.ts index fedd6bc0..ad624f16 100644 --- a/src/components/Emoji/useEmoji.ts +++ b/src/components/Emoji/useEmoji.ts @@ -4,6 +4,8 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { StyledProps, WithHTMLAttributes, WithLabel } from '~/types'; +export type EmojiProps = Simplify; + export interface EmojiKnownProps extends StyledProps, WithHTMLAttributes, @@ -12,8 +14,6 @@ export interface EmojiKnownProps symbol: string; } -export type EmojiProps = Simplify; - export function useEmoji(props: EmojiProps) { return useComponentProps(props); } diff --git a/src/components/Field/Debug.tsx b/src/components/Field/Debug.tsx index cda8b8e7..3d4378dd 100644 --- a/src/components/Field/Debug.tsx +++ b/src/components/Field/Debug.tsx @@ -10,6 +10,28 @@ interface Props { debug?: boolean; } +function FieldDebug(props: Props) { + const { debug } = props; + const { getDataAttributes } = useTheme(); + + if (!debug) { + return null; + } + + return ( + + {objectEntries(props) + .filter(([key]) => key !== 'debug') + .sort(sortByLocaleCompare('0')) + .map(([key, value]) => ( + + {key}: {primitiveToString(value, key)} + + ))} + + ); +} + /** * Convert primitive to string */ @@ -37,28 +59,6 @@ function primitiveToString(value: any, key: string): string { return value.toString(); } -function FieldDebug(props: Props) { - const { debug } = props; - const { getDataAttributes } = useTheme(); - - if (!debug) { - return null; - } - - return ( - - {objectEntries(props) - .filter(([key]) => key !== 'debug') - .sort(sortByLocaleCompare('0')) - .map(([key, value]) => ( - - {key}: {primitiveToString(value, key)} - - ))} - - ); -} - FieldDebug.displayName = 'FieldDebug'; export default FieldDebug; diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx index 83a4f42b..c50e699a 100644 --- a/src/components/Field/Field.tsx +++ b/src/components/Field/Field.tsx @@ -96,8 +96,8 @@ export function Field(props: T) { if (!skipValidation) { groupProps.skipIcon = [ - 'color', 'checkbox', + 'color', 'datePicker', 'dropdown', 'radio', diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx index 3432ad8b..4868c8bf 100644 --- a/src/components/Field/Input.tsx +++ b/src/components/Field/Input.tsx @@ -1,6 +1,6 @@ import { ChangeEvent, FocusEvent, useCallback } from 'react'; import { UseFormRegisterReturn } from 'react-hook-form'; -import { formatMoney, formatPhoneBR, formatPhoneUS } from '@gilbarbara/helpers'; +import { formatMoney, formatPhoneBR, formatPhoneUS, Types } from '@gilbarbara/helpers'; import { PlainObject } from '@gilbarbara/types'; import { clearNumber } from '~/modules/helpers'; @@ -9,7 +9,7 @@ import { Input } from '~/components/Input'; import { InputColor } from '~/components/InputColor'; import { InputFile } from '~/components/InputFile'; -import { InputTypes, ValidatePasswordOptions } from '~/types'; +import { InputTypes } from '~/types'; import { FieldInputProps } from './useField'; import { getInputParameters } from './utils'; @@ -20,7 +20,7 @@ interface Props extends Omit { registration: UseFormRegisterReturn; setStatus: (status: { isActive?: boolean; isDirty?: boolean }) => void; type: InputTypes; - validationOptions?: ValidatePasswordOptions; + validationOptions?: Types.ValidatePasswordOptions; } function FieldInput(props: Props) { diff --git a/src/components/Field/useField.ts b/src/components/Field/useField.ts index 1c2aec3e..a5108a8f 100644 --- a/src/components/Field/useField.ts +++ b/src/components/Field/useField.ts @@ -1,5 +1,6 @@ import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react'; import { FieldValues, UseFormGetValues } from 'react-hook-form'; +import { Types } from '@gilbarbara/helpers'; import { Simplify, StringOrNumber } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; @@ -11,7 +12,6 @@ import { DropdownOption, InputTypes, RadioItem, - ValidatePasswordOptions, WithAccent, WithBorderless, WithDisabled, @@ -23,43 +23,6 @@ import type { ToggleProps, } from '~/types/props'; -export type RegisterOptionsProps = Simplify< - FieldBaseProps & { - getValues: UseFormGetValues; - } & ( - | { - formatter?: FieldInputProps['formatter']; - type: Exclude; - validationOptions?: never; - } - | { - formatter?: never; - type: 'password'; - validationOptions?: ValidatePasswordOptions; - } - ) ->; - -export type FieldTypes = - | InputTypes - | 'checkbox' - | 'datePicker' - | 'dropdown' - | 'radio' - | 'select' - | 'toggle' - | 'textarea'; - -export type FieldValidations = 'email' | `equalsTo:${string}` | 'password' | 'phoneBR' | 'phoneUS'; - -export interface FieldInputHandlers< - T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, -> { - onBlur?: FocusEventHandler; - onChange?: ChangeEventHandler; - onFocus?: FocusEventHandler; -} - interface FieldExcludedProps { children?: never; datePickerProps?: never; @@ -72,29 +35,6 @@ interface FieldExcludedProps { validationOptions?: never; } -export interface FieldBaseProps - extends Pick< - FormGroupProps, - 'assistiveText' | 'hideAssistiveText' | 'inline' | 'label' | 'required' | 'style' - >, - WithAccent, - WithBorderless, - WithDisabled { - autoComplete?: string; - clearError?: () => void; - debug?: boolean; - id?: string; - maxLength?: number; - minLength?: number; - name: string; - placeholder?: string; - readOnly?: boolean; - setValueAs?: (value: any) => any; - skipValidation?: boolean; - validations?: FieldValidations[]; - value?: any; -} - export type FieldCheckboxProps = Simplify< FieldBaseProps & Omit & { @@ -142,10 +82,21 @@ export type FieldPasswordProps = Simplify< Omit, 'onChange'> & { onChange?: (value: string) => void; type: 'password'; - validationOptions?: ValidatePasswordOptions; + validationOptions?: Types.ValidatePasswordOptions; } >; +export type FieldProps = + | FieldCheckboxProps + | FieldDatePickerProps + | FieldDropdownProps + | FieldInputProps + | FieldPasswordProps + | FieldRadioProps + | FieldSelectProps + | FieldTextareaProps + | FieldToggleProps; + export type FieldRadioProps = Simplify< FieldBaseProps & Omit & { @@ -184,16 +135,65 @@ export type FieldToggleProps = Simplify< } >; -export type FieldProps = - | FieldCheckboxProps - | FieldDatePickerProps - | FieldDropdownProps - | FieldInputProps - | FieldPasswordProps - | FieldRadioProps - | FieldSelectProps - | FieldTextareaProps - | FieldToggleProps; +export type FieldTypes = + | InputTypes + | 'checkbox' + | 'datePicker' + | 'dropdown' + | 'radio' + | 'select' + | 'toggle' + | 'textarea'; + +export type FieldValidations = 'email' | `equalsTo:${string}` | 'password' | 'phoneBR' | 'phoneUS'; + +export type RegisterOptionsProps = Simplify< + FieldBaseProps & { + getValues: UseFormGetValues; + } & ( + | { + formatter?: FieldInputProps['formatter']; + type: Exclude; + validationOptions?: never; + } + | { + formatter?: never; + type: 'password'; + validationOptions?: Types.ValidatePasswordOptions; + } + ) +>; + +export interface FieldBaseProps + extends Pick< + FormGroupProps, + 'assistiveText' | 'hideAssistiveText' | 'inline' | 'label' | 'required' | 'style' + >, + WithAccent, + WithBorderless, + WithDisabled { + autoComplete?: string; + clearError?: () => void; + debug?: boolean; + id?: string; + maxLength?: number; + minLength?: number; + name: string; + placeholder?: string; + readOnly?: boolean; + setValueAs?: (value: any) => any; + skipValidation?: boolean; + validations?: FieldValidations[]; + value?: any; +} + +export interface FieldInputHandlers< + T extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, +> { + onBlur?: FocusEventHandler; + onChange?: ChangeEventHandler; + onFocus?: FocusEventHandler; +} export const defaultProps = { accent: 'primary', diff --git a/src/components/Flex/Flex.tsx b/src/components/Flex/Flex.tsx index 3c45c285..d6df3e65 100644 --- a/src/components/Flex/Flex.tsx +++ b/src/components/Flex/Flex.tsx @@ -37,8 +37,8 @@ export const FlexInline = forwardRef> FlexInline.displayName = 'FlexInline'; export { - type FlexProps, + flexCenterDefaultProps, flexDefaultProps, flexInlineDefaultProps, - flexCenterDefaultProps, + type FlexProps, } from './useFlex'; diff --git a/src/components/Flex/useFlex.ts b/src/components/Flex/useFlex.ts index b1dc831c..dcfcf572 100644 --- a/src/components/Flex/useFlex.ts +++ b/src/components/Flex/useFlex.ts @@ -19,6 +19,8 @@ import { WithTextOptions, } from '~/types'; +export type FlexProps = Simplify>; + export interface FlexKnownProps extends StyledProps, WithBorder, @@ -34,8 +36,6 @@ export interface FlexKnownProps WithShadow, WithTextOptions {} -export type FlexProps = Simplify>; - export const flexDefaultProps = { display: 'flex', } satisfies Omit; diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx index 8197b800..2482e811 100644 --- a/src/components/Form/Form.tsx +++ b/src/components/Form/Form.tsx @@ -52,6 +52,6 @@ export function Form = PlainObject>(props: FormP Form.displayName = 'Form'; -export type { SubmitHandler as FormSubmitHandler } from 'react-hook-form'; - export type { FormProps, FormRenderProps } from './useForm'; + +export type { SubmitHandler as FormSubmitHandler } from 'react-hook-form'; diff --git a/src/components/Form/useForm.ts b/src/components/Form/useForm.ts index d51d6648..ffb32200 100644 --- a/src/components/Form/useForm.ts +++ b/src/components/Form/useForm.ts @@ -4,16 +4,16 @@ import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; -export interface FormRenderProps { - formMethods: UseFormReturn; -} - export type FormProps = Simplify< UseFormProps & { children: (props: FormRenderProps) => ReactNode; } >; +export interface FormRenderProps { + formMethods: UseFormReturn; +} + export function useForm(props: FormProps) { return useComponentProps(props); } diff --git a/src/components/FormElementWrapper/useFormElementWrapper.ts b/src/components/FormElementWrapper/useFormElementWrapper.ts index 6f8024b9..d9d81603 100644 --- a/src/components/FormElementWrapper/useFormElementWrapper.ts +++ b/src/components/FormElementWrapper/useFormElementWrapper.ts @@ -5,6 +5,8 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { StyledProps, WithChildren, WithEndContent, WithMargin, WithStartContent } from '~/types'; +export type FormElementWrapperProps = Simplify; + export interface FormElementWrapperKnownProps extends StyledProps, WithChildren, @@ -21,8 +23,6 @@ export interface FormElementWrapperKnownProps width?: StringOrNumber; } -export type FormElementWrapperProps = Simplify; - export const defaultProps = { size: 40, width: '100%', diff --git a/src/components/FormGroup/useFormGroup.ts b/src/components/FormGroup/useFormGroup.ts index 539bd58e..8898355c 100644 --- a/src/components/FormGroup/useFormGroup.ts +++ b/src/components/FormGroup/useFormGroup.ts @@ -16,6 +16,8 @@ import { WithRadius, } from '~/types'; +export type FormGroupProps = Simplify; + export interface FormGroupKnownProps extends StyledProps, WithBorder, @@ -38,8 +40,6 @@ export interface FormGroupKnownProps valid?: boolean; } -export type FormGroupProps = Simplify; - export const defaultProps = { hideAssistiveText: false, inline: false, diff --git a/src/components/Grid/useGrid.ts b/src/components/Grid/useGrid.ts index 0c3b8d3d..874f8816 100644 --- a/src/components/Grid/useGrid.ts +++ b/src/components/Grid/useGrid.ts @@ -19,6 +19,8 @@ import { WithShadow, } from '~/types'; +export type GridProps = Simplify; + export interface GridKnownProps extends StyledProps, WithBorder, @@ -37,8 +39,6 @@ export interface GridKnownProps display?: 'grid' | 'inline-grid'; } -export type GridProps = Simplify; - export function useGrid(props: GridProps) { return useComponentProps(props); } diff --git a/src/components/Headings/Basic.stories.tsx b/src/components/Headings/Basic.stories.tsx index bcb153c6..0e8be5bd 100644 --- a/src/components/Headings/Basic.stories.tsx +++ b/src/components/Headings/Basic.stories.tsx @@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { colorProps, hideProps, marginProps, PANGRAM } from '~/stories/__helpers__'; import { H1, H2, H3, H4, H5, H6 } from './index'; + import { defaultProps } from './useHeading'; export default { diff --git a/src/components/Headings/Jumbo.stories.tsx b/src/components/Headings/Jumbo.stories.tsx index 4994f8c7..abf41979 100644 --- a/src/components/Headings/Jumbo.stories.tsx +++ b/src/components/Headings/Jumbo.stories.tsx @@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { colorProps, hideProps, marginProps, PANGRAM } from '~/stories/__helpers__'; import { Jumbo } from './index'; + import { jumboDefaultProps } from './useHeading'; type Story = StoryObj; diff --git a/src/components/Headings/useHeading.ts b/src/components/Headings/useHeading.ts index bd2b16ac..be4026a1 100644 --- a/src/components/Headings/useHeading.ts +++ b/src/components/Headings/useHeading.ts @@ -3,7 +3,6 @@ import { omit } from '@gilbarbara/helpers'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { alignStyles, getStyles } from '~/modules/system'; import { @@ -21,6 +20,11 @@ import { WithTheme, } from '~/types'; +export type HeadingLargeProps = Simplify< + OmitElementProps +>; + +export type HeadingProps = Simplify>; export interface HeadingKnownProps extends StyledProps, WithAlign, @@ -32,11 +36,6 @@ export interface HeadingKnownProps WithMargin, Omit {} -export type HeadingProps = Simplify>; -export type HeadingLargeProps = Simplify< - OmitElementProps ->; - export const defaultProps = { light: false, } satisfies Omit; diff --git a/src/components/Icon/useIcon.ts b/src/components/Icon/useIcon.ts index 3a910a8a..e8d210f0 100644 --- a/src/components/Icon/useIcon.ts +++ b/src/components/Icon/useIcon.ts @@ -5,6 +5,8 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { Icons, StyledProps, WithColors, WithMargin } from '~/types'; +export type IconProps = Simplify>; + export interface IconKnownProps extends StyledProps, Pick, WithMargin { name: Icons; /** @default 16 */ @@ -15,8 +17,6 @@ export interface IconKnownProps extends StyledProps, Pick, url: string; } -export type IconProps = Simplify>; - export const defaultProps = { size: 16, spin: false, diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx index bb437c03..a88fa6c1 100644 --- a/src/components/Image/Image.stories.tsx +++ b/src/components/Image/Image.stories.tsx @@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Flex, FlexCenter, Paragraph } from '~'; import { radius } from '~/modules/theme'; - import users from '~/stories/__fixtures__/users.json'; import { hideProps, radiusProps } from '~/stories/__helpers__'; import Code from '~/stories/components/Code'; diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index dee0f6c4..2f72a512 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -101,7 +101,7 @@ export const Image = forwardRef((props, ref) => { } = componentProps; const isLoaded = status === 'loaded' && !isLoadingProp; - const isLoading = isLoadingProp ?? ['pending', 'loading'].includes(status); + const isLoading = isLoadingProp ?? ['loading', 'pending'].includes(status); const hasError = status === 'failed'; const showFallback = (!src || !isLoaded) && !!fallbackSrc; diff --git a/src/components/Image/useImage.ts b/src/components/Image/useImage.ts index 0677eb8c..2cdb5ecf 100644 --- a/src/components/Image/useImage.ts +++ b/src/components/Image/useImage.ts @@ -6,6 +6,8 @@ import { NativeImageProps, useImage as useImageHook, UseImageProps } from '~/hoo import { OmitElementProps, StyledProps, WithRadius, WithShadow } from '~/types'; +export type ImageProps = Simplify>; + export interface ImageKnownProps extends StyledProps, UseImageProps, WithRadius, WithShadow { /** * The image `alt` attribute. @@ -48,8 +50,6 @@ export interface ImageKnownProps extends StyledProps, UseImageProps, WithRadius, zoomPercentage?: number; } -export type ImageProps = Simplify>; - export const defaultProps = { disableSkeleton: false, loading: 'lazy', diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index 729c6350..46b234e4 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Spacer } from '~'; import { inputTypes, sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps, PANGRAM } from '~/stories/__helpers__'; import { defaultProps, Input } from './Input'; diff --git a/src/components/Input/useInput.ts b/src/components/Input/useInput.ts index c7346584..c41418e2 100644 --- a/src/components/Input/useInput.ts +++ b/src/components/Input/useInput.ts @@ -13,6 +13,10 @@ import { WithHeight, } from '~/types'; +export type InputProps = Simplify< + OmitElementProps +>; + export interface InputKnownProps extends StyledProps, WithAccent, @@ -25,10 +29,6 @@ export interface InputKnownProps type?: InputTypes; } -export type InputProps = Simplify< - OmitElementProps ->; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/InputColor/InputColor.stories.tsx b/src/components/InputColor/InputColor.stories.tsx index 90e2e1f7..785da7ad 100644 --- a/src/components/InputColor/InputColor.stories.tsx +++ b/src/components/InputColor/InputColor.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { disableControl, hideProps } from '~/stories/__helpers__'; import { defaultProps, InputColor } from './InputColor'; diff --git a/src/components/InputColor/useInputColor.ts b/src/components/InputColor/useInputColor.ts index 028a6b82..6ae48044 100644 --- a/src/components/InputColor/useInputColor.ts +++ b/src/components/InputColor/useInputColor.ts @@ -12,6 +12,10 @@ import { WithHeight, } from '~/types'; +export type InputColorProps = Simplify< + OmitElementProps +>; + export interface InputColorKnownProps extends StyledProps, WithAccent, @@ -39,10 +43,6 @@ export interface InputColorKnownProps value?: string; } -export type InputColorProps = Simplify< - OmitElementProps ->; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/InputFile/InputFile.stories.tsx b/src/components/InputFile/InputFile.stories.tsx index 89200736..c3c9d6f6 100644 --- a/src/components/InputFile/InputFile.stories.tsx +++ b/src/components/InputFile/InputFile.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps } from '~/stories/__helpers__'; import { defaultProps, InputFile } from './InputFile'; diff --git a/src/components/InputFile/useInputFile.ts b/src/components/InputFile/useInputFile.ts index 8cf126ae..22d27923 100644 --- a/src/components/InputFile/useInputFile.ts +++ b/src/components/InputFile/useInputFile.ts @@ -4,6 +4,10 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { OmitElementProps, StyledProps, WithAccent, WithFormElements, WithHeight } from '~/types'; +export type InputFileProps = Simplify< + OmitElementProps +>; + export interface InputFileKnownProps extends StyledProps, WithAccent, WithFormElements, WithHeight { /** * Solid color @@ -13,10 +17,6 @@ export interface InputFileKnownProps extends StyledProps, WithAccent, WithFormEl value?: string; } -export type InputFileProps = Simplify< - OmitElementProps ->; - export const defaultProps = { accent: 'primary', disabled: false, diff --git a/src/components/Keyboard/useKeyboard.ts b/src/components/Keyboard/useKeyboard.ts index 26bbd40c..ee6fc852 100644 --- a/src/components/Keyboard/useKeyboard.ts +++ b/src/components/Keyboard/useKeyboard.ts @@ -14,33 +14,6 @@ import { WithTextOptions, } from '~/types'; -export interface KeyboardKnownProps - extends StyledProps, - WithBorder, - WithChildrenOptional, - WithColors, - Pick, - WithHTMLAttributes, - WithRadius, - WithShadow, - WithTextOptions { - /** - * The key or keys to be displayed. - */ - keys: KeyboardKey | KeyboardKey[]; - /** - * The separator between keys. - */ - separator?: string; - /** - * Don't show symbols. - * @default false - */ - textOnly?: boolean; -} - -export type KeyboardProps = Simplify; - export type KeyboardKey = | 'command' | 'option' @@ -66,6 +39,33 @@ export type KeyboardKey = export type KeyboardKeysLabelType = typeof keyboardKeysLabelMap; +export type KeyboardProps = Simplify; + +export interface KeyboardKnownProps + extends StyledProps, + WithBorder, + WithChildrenOptional, + WithColors, + Pick, + WithHTMLAttributes, + WithRadius, + WithShadow, + WithTextOptions { + /** + * The key or keys to be displayed. + */ + keys: KeyboardKey | KeyboardKey[]; + /** + * The separator between keys. + */ + separator?: string; + /** + * Don't show symbols. + * @default false + */ + textOnly?: boolean; +} + export const keyboardKeysMap: Record = { command: '⌘', option: '⌥', diff --git a/src/components/Label/useLabel.ts b/src/components/Label/useLabel.ts index 3296af9d..f2aca6c9 100644 --- a/src/components/Label/useLabel.ts +++ b/src/components/Label/useLabel.ts @@ -2,7 +2,6 @@ import { ReactNode } from 'react'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -15,6 +14,8 @@ import { WithTextOptions, } from '~/types'; +export type LabelProps = Simplify; + export interface LabelKnownProps extends StyledProps, Pick, @@ -28,8 +29,6 @@ export interface LabelKnownProps labelInfo?: ReactNode; } -export type LabelProps = Simplify; - export const defaultProps = { ...textDefaultOptions, bold: true, diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx index 1b915aa5..ce90e506 100644 --- a/src/components/List/List.stories.tsx +++ b/src/components/List/List.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Avatar, Box, H3, H6, ListProps, Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { addChromaticModes, colorProps, diff --git a/src/components/List/index.ts b/src/components/List/index.ts index 0d05367a..44d1e4b1 100644 --- a/src/components/List/index.ts +++ b/src/components/List/index.ts @@ -1,2 +1,2 @@ -export { List } from './List'; export { ListItem } from './Item'; +export { List } from './List'; diff --git a/src/components/List/useList.ts b/src/components/List/useList.ts index c809679b..e1b6d9ac 100644 --- a/src/components/List/useList.ts +++ b/src/components/List/useList.ts @@ -18,6 +18,12 @@ import { WithTheme, } from '~/types'; +export type ListProps = Simplify; + +export interface ListItemProps + extends BoxProps, + Pick {} + export interface ListKnownProps extends StyledProps, WithChildren, @@ -49,12 +55,6 @@ export interface ListKnownProps orientation?: Orientation; } -export type ListProps = Simplify; - -export interface ListItemProps - extends BoxProps, - Pick {} - export const defaultProps = { hideBorder: false, hideDivider: false, diff --git a/src/components/Loader/useLoader.ts b/src/components/Loader/useLoader.ts index 024141d8..5249d12e 100644 --- a/src/components/Loader/useLoader.ts +++ b/src/components/Loader/useLoader.ts @@ -13,8 +13,22 @@ import { WithLabel, } from '~/types'; +export type LoaderKnownProps = LoaderBaseProps & + ( + | { + size?: number; + type?: Exclude; + } + | { + size?: LoaderSize; + type: 'pill'; + } + ); export type LoaderLabelPosition = 'bottom' | 'left' | 'right' | 'top' | 'middle'; +export type LoaderProps = Simplify; + export type LoaderSize = number | [width: number, height: number]; + export type LoaderType = 'grow' | 'pill' | 'pride' | 'pulse' | 'rotate'; export interface LoaderBaseProps @@ -35,20 +49,6 @@ export interface LoaderBaseProps labelSize?: TextSizes; } -export type LoaderKnownProps = LoaderBaseProps & - ( - | { - size?: number; - type?: Exclude; - } - | { - size?: LoaderSize; - type: 'pill'; - } - ); - -export type LoaderProps = Simplify; - export interface LoaderComponentProps extends Omit, UseThemeReturn { diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 0317df9d..799462c9 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -8,6 +8,7 @@ import { Avatar, Box, ButtonUnstyled, Icon, MenuToggle, Paragraph } from '~'; import { colorProps, disableControl, hideProps, VARIANTS } from '~/stories/__helpers__'; import { Menu, MenuItem, MenuSeparator, MenuTitle } from './index'; + import { defaultProps } from './useMenu'; type Story = StoryObj; diff --git a/src/components/Menu/index.ts b/src/components/Menu/index.ts index ea416aaf..ebc08a02 100644 --- a/src/components/Menu/index.ts +++ b/src/components/Menu/index.ts @@ -1,4 +1,4 @@ -export { Menu } from './Menu'; export { MenuItem } from './Item'; +export { Menu } from './Menu'; export { MenuSeparator } from './Separator'; export { MenuTitle } from './Title'; diff --git a/src/components/Menu/useMenu.tsx b/src/components/Menu/useMenu.tsx index dd951c25..afcd2f4f 100644 --- a/src/components/Menu/useMenu.tsx +++ b/src/components/Menu/useMenu.tsx @@ -32,6 +32,39 @@ import { WithTextSize, } from '~/types'; +export type MenuProps = Simplify; + +export interface MenuItemProps extends WithAccent, WithColors, WithDisabled, WithPadding { + children: ((props: { closeMenu: () => void }) => ReactNode) | ReactNode; + /** + * Prevents the menu from closing when the item is clicked + * @default false + */ + disableAutoClose?: boolean; + /** + * Remove styling on hover. + * @default false + */ + disableHover?: boolean; + onToggle?: ( + event: MouseEvent | KeyboardEvent, + closeMenu: () => void, + ) => void; + /** + * Allows the item to wrap its content + * @default false + */ + wrap?: boolean; +} + +export interface MenuItemsProps + extends Required>, + Pick { + children: ReactNode; + id: string; + isOpen: boolean; +} + export interface MenuKnownProps extends StyledProps, WithAccent, @@ -76,46 +109,13 @@ export interface MenuKnownProps trigger?: 'click' | 'hover'; } -export type MenuProps = Simplify; - -export interface MenuItemsProps - extends Required>, - Pick { - children: ReactNode; - id: string; - isOpen: boolean; -} - -export interface MenuItemProps extends WithAccent, WithColors, WithDisabled, WithPadding { - children: ((props: { closeMenu: () => void }) => ReactNode) | ReactNode; - /** - * Prevents the menu from closing when the item is clicked - * @default false - */ - disableAutoClose?: boolean; - /** - * Remove styling on hover. - * @default false - */ - disableHover?: boolean; - onToggle?: ( - event: MouseEvent | KeyboardEvent, - closeMenu: () => void, - ) => void; - /** - * Allows the item to wrap its content - * @default false - */ - wrap?: boolean; -} +export interface MenuSeparatorProps extends WithMargin {} export interface MenuTitleProps extends WithColors, WithTextOptions, WithTextSize { children: ReactNode; style?: CSSProperties; } -export interface MenuSeparatorProps extends WithMargin {} - export const defaultProps = { accent: 'primary', button: , @@ -133,12 +133,6 @@ export const defaultProps = { trigger: 'click', } satisfies Omit; -interface MenuContextProps { - children: ReactNode; - closeMenu: () => void; - props: ContextState; -} - type ContextState = Omit< SetRequired< MenuProps, @@ -152,6 +146,12 @@ type ContextState = Omit< >, 'button' | 'children' >; + +interface MenuContextProps { + children: ReactNode; + closeMenu: () => void; + props: ContextState; +} interface MenuContextValue { closeMenu: () => void; state: ContextState; @@ -178,6 +178,10 @@ export function MenuProvider({ children, closeMenu, props }: MenuContextProps) { return {children}; } +export function useMenu = MenuProps>(props: T) { + return useComponentProps(props, defaultProps); +} + export function useMenuContext(): MenuContextValue { const context = useContext(MenuContext); @@ -187,7 +191,3 @@ export function useMenuContext(): MenuContextValue { return context; } - -export function useMenu = MenuProps>(props: T) { - return useComponentProps(props, defaultProps); -} diff --git a/src/components/Modal/useModal.ts b/src/components/Modal/useModal.ts index ba98912c..0a32fc5f 100644 --- a/src/components/Modal/useModal.ts +++ b/src/components/Modal/useModal.ts @@ -9,6 +9,8 @@ import { splitPortalProps } from '~/components/Portal/usePortal'; import { StyledProps, WithBorder, WithPadding, WithRadius, WithShadow } from '~/types'; +export type ModalProps = Simplify; + export interface ModalKnownProps extends StyledProps, WithBorder, @@ -39,8 +41,6 @@ export interface ModalKnownProps width?: StringOrNumber; } -export type ModalProps = Simplify; - export const defaultProps = { ...portalDefaultProps, hideCloseButton: false, diff --git a/src/components/NavBar/NavBar.stories.tsx b/src/components/NavBar/NavBar.stories.tsx index fc21c62b..252ddcd6 100644 --- a/src/components/NavBar/NavBar.stories.tsx +++ b/src/components/NavBar/NavBar.stories.tsx @@ -15,11 +15,11 @@ import { import { Anchor, Button, Flex, Icon } from '~'; import { scrollTo } from '~/modules/animations'; - import { colorProps, hideProps } from '~/stories/__helpers__'; import Content from '~/stories/components/Content'; import { NavBar, NavBarContent, NavBarMenu, NavBarMenuToggle } from './index'; + import { defaultProps } from './useNavBar'; type Story = StoryObj; diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index c80c776b..0c494e03 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/src/components/NavBar/NavBar.tsx @@ -8,7 +8,6 @@ import { opacify } from 'colorizr'; import is from 'is-lite'; import { useScrollPosition } from '~/hooks/useScrollPosition'; - import { getColorTokens } from '~/modules/colors'; import { splitReactChildren } from '~/modules/react-helpers'; import { getStyledOptions } from '~/modules/system'; diff --git a/src/components/NavBar/NavBarContent.tsx b/src/components/NavBar/NavBarContent.tsx index 16e7c5cb..9f830994 100644 --- a/src/components/NavBar/NavBarContent.tsx +++ b/src/components/NavBar/NavBarContent.tsx @@ -1,7 +1,6 @@ import { useResponsive } from '@gilbarbara/hooks'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { formatBreakpoints } from '~/modules/helpers'; import { Flex } from '~/components/Flex'; diff --git a/src/components/NavBar/useNavBar.tsx b/src/components/NavBar/useNavBar.tsx index 015fa402..c831ca9d 100644 --- a/src/components/NavBar/useNavBar.tsx +++ b/src/components/NavBar/useNavBar.tsx @@ -17,6 +17,33 @@ import { WithPadding, } from '~/types'; +type ContextState = SetRequired, keyof typeof defaultProps> & { + isMenuOpen: boolean; +}; + +interface NavBarContextProps { + children: ReactNode; + props: ContextState; + toggleMenu: (isOpen: boolean) => void; +} + +interface NavBarContextValue extends Pick { + state: ContextState; +} + +export type NavBarProps = Simplify; + +export interface NavBarContentProps extends StyledProps, WithChildren, WithDimension, WithFlexBox { + /** + * The breakpoint at which the content should be hidden. + */ + hideBreakpoint?: Breakpoint; + /** + * The breakpoint at which the content should be visible. + */ + showBreakpoint?: Breakpoint; +} + export interface NavBarKnownProps extends StyledProps, WithChildren, WithColors { /** * Add a blur effect to the navbar. @@ -103,19 +130,6 @@ export interface NavBarKnownProps extends StyledProps, WithChildren, WithColors zIndex?: number; } -export type NavBarProps = Simplify; - -export interface NavBarContentProps extends StyledProps, WithChildren, WithDimension, WithFlexBox { - /** - * The breakpoint at which the content should be hidden. - */ - hideBreakpoint?: Breakpoint; - /** - * The breakpoint at which the content should be visible. - */ - showBreakpoint?: Breakpoint; -} - export interface NavBarMenuProps extends WithBorder, WithChildren, @@ -124,20 +138,6 @@ export interface NavBarMenuProps WithPadding, Omit {} -type ContextState = SetRequired, keyof typeof defaultProps> & { - isMenuOpen: boolean; -}; - -interface NavBarContextProps { - children: ReactNode; - props: ContextState; - toggleMenu: (isOpen: boolean) => void; -} - -interface NavBarContextValue extends Pick { - state: ContextState; -} - export const defaultProps = { blurred: true, blurredRadius: 8, @@ -175,6 +175,10 @@ export function NavBarProvider({ children, props, toggleMenu }: NavBarContextPro return {children}; } +export function useNavBar(props: NavBarProps) { + return useComponentProps(props, defaultProps); +} + export function useNavBarContext(): NavBarContextValue { const context = useContext(NavBarContext); @@ -184,7 +188,3 @@ export function useNavBarContext(): NavBarContextValue { return context; } - -export function useNavBar(props: NavBarProps) { - return useComponentProps(props, defaultProps); -} diff --git a/src/components/NonIdealState/useNonIdealState.ts b/src/components/NonIdealState/useNonIdealState.ts index a9841fa3..fd387c44 100644 --- a/src/components/NonIdealState/useNonIdealState.ts +++ b/src/components/NonIdealState/useNonIdealState.ts @@ -20,6 +20,8 @@ import { WithShadow, } from '~/types'; +export type NonIdealStateProps = Simplify; + export interface NonIdealStateKnownProps extends StyledProps, WithBorder, @@ -47,8 +49,6 @@ export interface NonIdealStateKnownProps type?: 'error' | 'no-results' | 'not-found' | 'offline' | null; } -export type NonIdealStateProps = Simplify; - export const defaultProps = { hideIcon: false, maxWidth: '600px', diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index 55730e3e..0bfc8139 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -45,7 +45,7 @@ export function Page(props: PageProps) { if (!textAlign) { if (centered) { textAlignValue = 'center'; - } else if (align && (['start', 'center', 'end'].includes(align) || align.startsWith('flex'))) { + } else if (align && (['center', 'end', 'start'].includes(align) || align.startsWith('flex'))) { textAlignValue = textAlignMap[align]; } } diff --git a/src/components/Page/usePage.ts b/src/components/Page/usePage.ts index 97aa9d50..15329611 100644 --- a/src/components/Page/usePage.ts +++ b/src/components/Page/usePage.ts @@ -12,6 +12,8 @@ import { WithPadding, } from '~/types'; +export type PageProps = Simplify; + export interface PageKnownProps extends StyledProps, WithColors, @@ -44,8 +46,6 @@ export interface PageKnownProps textAlign?: Alignment; } -export type PageProps = Simplify; - export const defaultProps = { centered: false, isLoading: false, diff --git a/src/components/Pagination/Pagination.stories.tsx b/src/components/Pagination/Pagination.stories.tsx index 1c356a98..760cc414 100644 --- a/src/components/Pagination/Pagination.stories.tsx +++ b/src/components/Pagination/Pagination.stories.tsx @@ -46,12 +46,6 @@ export const SinglePage: Story = { render: Basic.render, }; -function getButtons(filter: string) { - return screen - .getAllByTestId('PaginationButton') - .filter(d => d.getAttribute('data-type') === filter); -} - function getButton(attribute: number | string, type = 'data-page') { const getValue = (d: HTMLElement) => d.getAttribute(type); @@ -64,6 +58,12 @@ function getButton(attribute: number | string, type = 'data-page') { ); } +function getButtons(filter: string) { + return screen + .getAllByTestId('PaginationButton') + .filter(d => d.getAttribute('data-type') === filter); +} + export const Tests: Story = { tags: ['!dev', '!autodocs'], args: { diff --git a/src/components/Pagination/usePagination.ts b/src/components/Pagination/usePagination.ts index cc293186..adfe3e01 100644 --- a/src/components/Pagination/usePagination.ts +++ b/src/components/Pagination/usePagination.ts @@ -12,6 +12,22 @@ import { WithPadding, } from '~/types'; +export type PaginationProps = Simplify; + +export interface PaginationButtonProps extends WithAccent, WithChildrenOptional { + currentPage: number; + disabled: boolean; + onClick?: (currentPage: number, type?: string) => void; + page: number; + type?: string; +} + +export interface PaginationItem extends WithDisabled { + content?: ReactNode; + page?: number; + type: string; +} + export interface PaginationKnownProps extends WithAccent, WithBorder, WithMargin, WithPadding { /** @default end */ align?: 'start' | 'center' | 'end'; @@ -36,22 +52,6 @@ export interface PaginationKnownProps extends WithAccent, WithBorder, WithMargin totalPages: number; } -export type PaginationProps = Simplify; - -export interface PaginationItem extends WithDisabled { - content?: ReactNode; - page?: number; - type: string; -} - -export interface PaginationButtonProps extends WithAccent, WithChildrenOptional { - currentPage: number; - disabled: boolean; - onClick?: (currentPage: number, type?: string) => void; - page: number; - type?: string; -} - export const defaultProps = { accent: 'primary', align: 'end', diff --git a/src/components/Paragraph/useParagraph.ts b/src/components/Paragraph/useParagraph.ts index 922a3ce5..ce5da05b 100644 --- a/src/components/Paragraph/useParagraph.ts +++ b/src/components/Paragraph/useParagraph.ts @@ -1,7 +1,6 @@ import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -14,6 +13,8 @@ import { WithTextOptions, } from '~/types'; +export type ParagraphProps = Simplify>; + export interface ParagraphKnownProps extends StyledProps, WithAlign, @@ -28,8 +29,6 @@ export interface ParagraphKnownProps skipMarginTop?: boolean; } -export type ParagraphProps = Simplify>; - export const defaultProps = { skipMarginTop: false, ...textDefaultOptions, diff --git a/src/components/Portal/usePortal.ts b/src/components/Portal/usePortal.ts index 72d28967..c6daeab6 100644 --- a/src/components/Portal/usePortal.ts +++ b/src/components/Portal/usePortal.ts @@ -4,6 +4,17 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { StyledProps, Target, WithChildren, WithColors, WithPositioning } from '~/types'; +export type PortalOwnPropsKeys = keyof typeof portalPropsKeys; + +export type PortalProps = Simplify; + +export interface PortalKnownProps + extends StyledProps, + WithChildren, + Pick, + Omit, + PortalOwnProps {} + export interface PortalOwnProps { /** * The easing of the animation. @@ -90,17 +101,6 @@ export interface PortalOwnProps { zIndex?: number; } -export interface PortalKnownProps - extends StyledProps, - WithChildren, - Pick, - Omit, - PortalOwnProps {} - -export type PortalProps = Simplify; - -export type PortalOwnPropsKeys = keyof typeof portalPropsKeys; - export const defaultProps = { animationEasing: 'ease-in-out', animationEnterDuration: 0.5, diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx index e8cee43e..6b6083d3 100644 --- a/src/components/ProgressBar/ProgressBar.stories.tsx +++ b/src/components/ProgressBar/ProgressBar.stories.tsx @@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Box, H4, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { addChromaticModes, colorProps, diff --git a/src/components/ProgressBar/useProgressBar.ts b/src/components/ProgressBar/useProgressBar.ts index 8d11750a..829c9740 100644 --- a/src/components/ProgressBar/useProgressBar.ts +++ b/src/components/ProgressBar/useProgressBar.ts @@ -16,6 +16,8 @@ import { WithMargin, } from '~/types'; +export type ProgressBarProps = Simplify>; + export interface ProgressBarKnownProps extends StyledProps, AriaAttributes, @@ -73,8 +75,6 @@ export interface ProgressBarKnownProps width?: StringOrNumber; } -export type ProgressBarProps = Simplify>; - export const defaultProps = { accent: 'primary', formatLocale: 'en-US', diff --git a/src/components/ProgressCircle/ProgressCircle.stories.tsx b/src/components/ProgressCircle/ProgressCircle.stories.tsx index 43b4fdf6..407bcc04 100644 --- a/src/components/ProgressCircle/ProgressCircle.stories.tsx +++ b/src/components/ProgressCircle/ProgressCircle.stories.tsx @@ -5,7 +5,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Flex, Grid, Paragraph } from '~'; import { sizes } from '~/modules/options'; - import { addChromaticModes, colorProps, diff --git a/src/components/ProgressCircle/useProgressCircle.ts b/src/components/ProgressCircle/useProgressCircle.ts index a11ffdd9..855d65ba 100644 --- a/src/components/ProgressCircle/useProgressCircle.ts +++ b/src/components/ProgressCircle/useProgressCircle.ts @@ -17,6 +17,10 @@ import { WithMargin, } from '~/types'; +export type ProgressCircleProps = Simplify< + RequireAtLeastOne +>; + export interface ProgressCircleKnownProps extends StyledProps, AriaAttributes, @@ -81,10 +85,6 @@ export interface ProgressCircleKnownProps value: number; } -export type ProgressCircleProps = Simplify< - RequireAtLeastOne ->; - export const defaultProps = { accent: 'primary', busy: false, diff --git a/src/components/Quote/useQuote.ts b/src/components/Quote/useQuote.ts index 925ff317..2c717ae9 100644 --- a/src/components/Quote/useQuote.ts +++ b/src/components/Quote/useQuote.ts @@ -2,7 +2,6 @@ import { ReactNode } from 'react'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -19,6 +18,8 @@ import { WithTextOptions, } from '~/types'; +export type QuoteProps = Simplify; + export type TextOptions = WithTextOptions; export interface QuoteKnownProps @@ -61,8 +62,6 @@ export interface QuoteKnownProps gap?: Spacing; } -export type QuoteProps = Simplify; - export const defaultProps = { ...textDefaultOptions, accent: 'primary', diff --git a/src/components/RadioGroup/useRadioGroup.ts b/src/components/RadioGroup/useRadioGroup.ts index ca7ce71c..55a1ce38 100644 --- a/src/components/RadioGroup/useRadioGroup.ts +++ b/src/components/RadioGroup/useRadioGroup.ts @@ -6,6 +6,8 @@ import { RadioProps } from '~/components/CheckboxAndRadio/useCheckboxAndRadio'; import { RadioItem, WithComponentSize } from '~/types'; +export type RadioGroupProps = Simplify; + export interface RadioGroupKnownProps extends WithComponentSize, Omit { @@ -14,8 +16,6 @@ export interface RadioGroupKnownProps items: RadioItem[]; } -export type RadioGroupProps = Simplify; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/Ripple/Ripple.tsx b/src/components/Ripple/Ripple.tsx index 60669172..a90eaa36 100644 --- a/src/components/Ripple/Ripple.tsx +++ b/src/components/Ripple/Ripple.tsx @@ -5,7 +5,6 @@ import { px } from '@gilbarbara/helpers'; import { lighten } from 'colorizr'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { ripple } from '~/modules/animations'; import { getColorTokens } from '~/modules/colors'; import { getStyledOptions } from '~/modules/system'; diff --git a/src/components/Ripple/useRipple.tsx b/src/components/Ripple/useRipple.tsx index 0912a1d4..b8e423a1 100644 --- a/src/components/Ripple/useRipple.tsx +++ b/src/components/Ripple/useRipple.tsx @@ -8,6 +8,8 @@ export type RippleType = { y: number; }; +export type UseRippleReturn = ReturnType; + export interface UseRippleProps {} export function useRipple(props: UseRippleProps = {}) { @@ -36,5 +38,3 @@ export function useRipple(props: UseRippleProps = {}) { return { ripples, onClick, onClear, ...props }; } - -export type UseRippleReturn = ReturnType; diff --git a/src/components/Search/Search.stories.tsx b/src/components/Search/Search.stories.tsx index 45a9a3b3..2acb7115 100644 --- a/src/components/Search/Search.stories.tsx +++ b/src/components/Search/Search.stories.tsx @@ -7,9 +7,9 @@ import { clearAllMocks, expect, fn, userEvent, waitFor, within } from '@storyboo import { Avatar, Box, Flex, Paragraph } from '~'; import { colors } from '~/modules/theme'; - import users from '~/stories/__fixtures__/users.json'; import { colorProps, disableControl, hideProps, marginProps } from '~/stories/__helpers__'; + import { ColorVariant } from '~/types'; import { defaultProps, Search, SearchItem } from './Search'; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 9787de78..784da9c0 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -14,7 +14,6 @@ import { px } from '@gilbarbara/helpers'; import { useSetState } from '@gilbarbara/hooks'; import { useKeyboardNavigation } from '~/hooks/useKeyboardNavigation'; - import { getStyledOptions, marginStyles } from '~/modules/system'; import { ClickOutside } from '~/components/ClickOutside'; diff --git a/src/components/Search/useSearch.ts b/src/components/Search/useSearch.ts index a6d2b2a7..796ac467 100644 --- a/src/components/Search/useSearch.ts +++ b/src/components/Search/useSearch.ts @@ -14,11 +14,19 @@ import { WithMargin, } from '~/types'; +export type SearchOnSelect = (event: MouseEvent | KeyboardEvent) => void; + +export type SearchProps = Simplify; + export interface SearchItem extends WithAccent, WithLabel { value: string; } -export type SearchOnSelect = (event: MouseEvent | KeyboardEvent) => void; +export interface SearchItemProps extends Required, WithChildren, UseThemeReturn { + isSelected: boolean; + onSelect: SearchOnSelect; + value: string; +} export interface SearchItemsProps extends Required, @@ -32,21 +40,15 @@ export interface SearchItemsProps onSelect: SearchOnSelect; } -export interface SearchItemProps extends Required, WithChildren, UseThemeReturn { - isSelected: boolean; - onSelect: SearchOnSelect; - value: string; -} - export interface SearchKnownProps extends StyledProps, WithAccent, WithBorderless, WithMargin { /** * Disable closing the list when you click outside. * @default false */ disableCloseOnBlur?: boolean; + disabled?: boolean; /** @default false */ disableKeyboardNavigation?: boolean; - disabled?: boolean; height?: StringOrNumber; /** @default false */ hideIcon?: boolean; @@ -90,8 +92,6 @@ export interface SearchKnownProps extends StyledProps, WithAccent, WithBorderles width?: StringOrNumber; } -export type SearchProps = Simplify; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx index c70c0a55..69d1d873 100644 --- a/src/components/Select/Select.stories.tsx +++ b/src/components/Select/Select.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps } from '~/stories/__helpers__'; import { defaultProps, Select } from './Select'; diff --git a/src/components/Select/useSelect.ts b/src/components/Select/useSelect.ts index 38a0d4c6..bef63a39 100644 --- a/src/components/Select/useSelect.ts +++ b/src/components/Select/useSelect.ts @@ -13,6 +13,8 @@ import { WithHeight, } from '~/types'; +export type SelectProps = Simplify>; + export interface SelectKnownProps extends StyledProps, WithAccent, @@ -22,8 +24,6 @@ export interface SelectKnownProps WithFormElements, WithHeight {} -export type SelectProps = Simplify>; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/Sidebar/useSidebar.ts b/src/components/Sidebar/useSidebar.ts index 33946df2..9a02be2b 100644 --- a/src/components/Sidebar/useSidebar.ts +++ b/src/components/Sidebar/useSidebar.ts @@ -23,6 +23,8 @@ import { WithShadow, } from '~/types'; +export type SidebarProps = Simplify; + export interface SidebarKnownProps extends StyledProps, DataAttributes, @@ -74,8 +76,6 @@ export interface SidebarKnownProps side?: 'left' | 'right'; } -export type SidebarProps = Simplify; - export const defaultProps = { ...portalDefaultProps, blurred: false, diff --git a/src/components/Skeleton/useSkeleton.ts b/src/components/Skeleton/useSkeleton.ts index bfb575ef..944c5ef8 100644 --- a/src/components/Skeleton/useSkeleton.ts +++ b/src/components/Skeleton/useSkeleton.ts @@ -13,6 +13,34 @@ import { WithRadius, } from '~/types'; +export type SkeletonCircleProps = Simplify< + Omit & { + size: StringOrNumber; + } +>; + +export type SkeletonProps = Simplify; + +export type SkeletonTextProps = Simplify< + Omit & { + /** + * The spacing between lines + * @default xs + */ + gap?: Spacing; + /** + * The height of each line + * @default 16 + */ + height?: StringOrNumber; + /** + * The number of lines to render + * @default 3 + */ + lines?: number; + } +>; + export interface SkeletonKnownProps extends StyledProps, WithChildrenOptional, @@ -58,34 +86,6 @@ export interface SkeletonKnownProps isLoaded?: boolean; } -export type SkeletonProps = Simplify; - -export type SkeletonTextProps = Simplify< - Omit & { - /** - * The spacing between lines - * @default xs - */ - gap?: Spacing; - /** - * The height of each line - * @default 16 - */ - height?: StringOrNumber; - /** - * The number of lines to render - * @default 3 - */ - lines?: number; - } ->; - -export type SkeletonCircleProps = Simplify< - Omit & { - size: StringOrNumber; - } ->; - export const baseDefaultProps = { accent: 'white', animationDelay: 0, diff --git a/src/components/Snippet/Snippet.stories.tsx b/src/components/Snippet/Snippet.stories.tsx index 6c67f1b5..a2255020 100644 --- a/src/components/Snippet/Snippet.stories.tsx +++ b/src/components/Snippet/Snippet.stories.tsx @@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { FlexCenter, Grid, Icon, Paragraph, Spacer } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, @@ -108,7 +107,7 @@ export const Colors: Story = { {VARIANTS.map(d => ( - + {d} ))} diff --git a/src/components/Snippet/useSnippet.ts b/src/components/Snippet/useSnippet.ts index 68b02998..5bd466e1 100644 --- a/src/components/Snippet/useSnippet.ts +++ b/src/components/Snippet/useSnippet.ts @@ -21,6 +21,8 @@ import { WithRadius, } from '~/types'; +export type SnippetProps = Simplify; + export interface SnippetKnownProps extends Pick< CopyToClipboardProps, @@ -92,8 +94,6 @@ export interface SnippetKnownProps symbol?: ReactNode; } -export type SnippetProps = Simplify; - export const defaultProps = { align: 'center', display: 'inline-flex', diff --git a/src/components/Spacer/useSpacer.ts b/src/components/Spacer/useSpacer.ts index c035957e..f3d351d2 100644 --- a/src/components/Spacer/useSpacer.ts +++ b/src/components/Spacer/useSpacer.ts @@ -17,6 +17,8 @@ import { WithShadow, } from '~/types'; +export type SpacerProps = Simplify; + export interface SpacerKnownProps extends StyledProps, WithBorder, @@ -65,8 +67,6 @@ export interface SpacerKnownProps wrap?: boolean; } -export type SpacerProps = Simplify; - export const defaultProps = { orientation: 'horizontal', distribution: 'start', diff --git a/src/components/StatusIndicator/StatusIndicator.stories.tsx b/src/components/StatusIndicator/StatusIndicator.stories.tsx index 180757b2..a7688eb7 100644 --- a/src/components/StatusIndicator/StatusIndicator.stories.tsx +++ b/src/components/StatusIndicator/StatusIndicator.stories.tsx @@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Flex, Grid, Icon, Spacer } from '~'; import { colors } from '~/modules/theme'; - import { disableControl, hideProps, marginProps, VARIANTS } from '~/stories/__helpers__'; import { defaultProps, StatusIndicator } from './StatusIndicator'; diff --git a/src/components/StatusIndicator/useStatusIndicator.ts b/src/components/StatusIndicator/useStatusIndicator.ts index a9200ae1..58771fba 100644 --- a/src/components/StatusIndicator/useStatusIndicator.ts +++ b/src/components/StatusIndicator/useStatusIndicator.ts @@ -13,6 +13,8 @@ import { WithMargin, } from '~/types'; +export type StatusIndicatorProps = Simplify; + export interface StatusIndicatorKnownProps extends StyledProps, WithHTMLAttributes, WithMargin { /** * The size of the inner circle relative to the outer circle. @@ -48,8 +50,6 @@ export interface StatusIndicatorKnownProps extends StyledProps, WithHTMLAttribut tone?: ColorTone; } -export type StatusIndicatorProps = Simplify; - export const defaultProps = { borderRatio: 0.7, color: 'green', diff --git a/src/components/Tabs/index.ts b/src/components/Tabs/index.ts index ae0111d7..4cc57e3e 100644 --- a/src/components/Tabs/index.ts +++ b/src/components/Tabs/index.ts @@ -1,2 +1,2 @@ -export { Tabs } from './Tabs'; export { Tab } from './Tab'; +export { Tabs } from './Tabs'; diff --git a/src/components/Tabs/useTabs.ts b/src/components/Tabs/useTabs.ts index 6ef085f3..6caa693c 100644 --- a/src/components/Tabs/useTabs.ts +++ b/src/components/Tabs/useTabs.ts @@ -18,6 +18,63 @@ import { WithPadding, } from '~/types'; +export type TabProps = Simplify; + +export type TabsProps = Simplify; + +export interface TabKnownProps + extends StyledProps, + WithChildren, + WithColors, + WithDisabled, + WithPadding { + id: string; + title: ReactNode; +} + +export interface TabsKnownProps + extends StyledProps, + WithAccent, + WithColors, + WithChildren, + WithDimension, + Pick, + WithHTMLAttributes, + WithMargin { + /** + * The id of the default active tab. + * If not provided, the first tab is active by default. + */ + defaultId?: string; + /** + * Hide the active tab indicator. + * @default false + */ + hideIndicator?: boolean; + /** + * A loader component to display while content is loading. + */ + loader?: ReactNode; + /** + * Configuration options for the tabs menu, such as styles and behavior. + */ + menu?: TabsMenuConfig; + /** + * Content to display when there are no active tabs or content to show. + * Typically used as a fallback or empty state. + */ + noContent?: ReactNode; + /** + * Hnadler called when a tab is clicked. + */ + onClick?: (id: string) => void; + /** + * The orientation of the tabs. + * @default horizontal + */ + orientation?: Orientation; +} + export interface TabsMenuConfig extends Pick { /** * The background color of the active tab. @@ -76,63 +133,6 @@ export interface TabsMenuConfig extends Pick { width?: string | number; } -export interface TabsKnownProps - extends StyledProps, - WithAccent, - WithColors, - WithChildren, - WithDimension, - Pick, - WithHTMLAttributes, - WithMargin { - /** - * The id of the default active tab. - * If not provided, the first tab is active by default. - */ - defaultId?: string; - /** - * Hide the active tab indicator. - * @default false - */ - hideIndicator?: boolean; - /** - * A loader component to display while content is loading. - */ - loader?: ReactNode; - /** - * Configuration options for the tabs menu, such as styles and behavior. - */ - menu?: TabsMenuConfig; - /** - * Content to display when there are no active tabs or content to show. - * Typically used as a fallback or empty state. - */ - noContent?: ReactNode; - /** - * Hnadler called when a tab is clicked. - */ - onClick?: (id: string) => void; - /** - * The orientation of the tabs. - * @default horizontal - */ - orientation?: Orientation; -} - -export type TabsProps = Simplify; - -export interface TabKnownProps - extends StyledProps, - WithChildren, - WithColors, - WithDisabled, - WithPadding { - id: string; - title: ReactNode; -} - -export type TabProps = Simplify; - export interface TabsMenuProps extends Omit { activeId: string; onClickItem: MouseEventHandler; diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx index f1c2dafa..483d8f7b 100644 --- a/src/components/Text/Text.stories.tsx +++ b/src/components/Text/Text.stories.tsx @@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react'; import { Paragraph, Spacer } from '~'; import { textDefaultOptions, textSizes } from '~/modules/options'; - import { colorProps, disableControl, diff --git a/src/components/Text/useText.ts b/src/components/Text/useText.ts index 60a8ff56..25962597 100644 --- a/src/components/Text/useText.ts +++ b/src/components/Text/useText.ts @@ -1,7 +1,6 @@ import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -14,6 +13,8 @@ import { WithTextOptions, } from '~/types'; +export type TextProps = Simplify; + export interface TextKnownProps extends StyledProps, WithChildren, @@ -23,8 +24,6 @@ export interface TextKnownProps WithHTMLAttributes, WithTextOptions {} -export type TextProps = Simplify; - export function useText(props: TextProps) { return useComponentProps(props, textDefaultOptions); } diff --git a/src/components/Textarea/useTextarea.ts b/src/components/Textarea/useTextarea.ts index 283f6598..e56376df 100644 --- a/src/components/Textarea/useTextarea.ts +++ b/src/components/Textarea/useTextarea.ts @@ -11,6 +11,10 @@ import { WithFormElements, } from '~/types'; +export type TextareaProps = Simplify< + OmitElementProps +>; + export interface TextareaKnownProps extends StyledProps, WithAccent, @@ -18,10 +22,6 @@ export interface TextareaKnownProps WithElementSpacing, WithFormElements {} -export type TextareaProps = Simplify< - OmitElementProps ->; - export const defaultProps = { accent: 'primary', borderless: false, diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx index 2f5374f0..9c95576e 100644 --- a/src/components/Toggle/Toggle.stories.tsx +++ b/src/components/Toggle/Toggle.stories.tsx @@ -7,7 +7,6 @@ import { clearAllMocks, expect, fireEvent, fn, waitFor, within } from '@storyboo import { Flex, Grid, Icon, Paragraph, Tooltip } from '~'; import { sizes } from '~/modules/options'; - import { colorProps, disableControl, hideProps, VARIANTS } from '~/stories/__helpers__'; import { defaultProps, Toggle, ToggleProps } from './Toggle'; diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx index 053d37c3..77f854c0 100644 --- a/src/components/Toggle/Toggle.tsx +++ b/src/components/Toggle/Toggle.tsx @@ -240,7 +240,7 @@ export const Toggle = forwardRef((props, ref) => }; const handleKeyDown = (event: KeyboardEvent) => { - if (disabled || !['Space', 'Enter'].includes(event.code)) { + if (disabled || !['Enter', 'Space'].includes(event.code)) { return; } diff --git a/src/components/Toggle/useToggle.ts b/src/components/Toggle/useToggle.ts index 47fa7a1e..0071b0d4 100644 --- a/src/components/Toggle/useToggle.ts +++ b/src/components/Toggle/useToggle.ts @@ -14,6 +14,15 @@ import { WithTheme, } from '~/types'; +export type ToggleProps = Simplify; + +export interface ToggleInnerProps + extends SetRequired, 'accent' | 'size'>, + Pick, + WithTheme { + isChecked: boolean; +} + export interface ToggleKnownProps extends StyledProps, AriaAttributes, @@ -49,15 +58,6 @@ export interface ToggleKnownProps thumbIconUnchecked?: ReactNode; } -export type ToggleProps = Simplify; - -export interface ToggleInnerProps - extends SetRequired, 'accent' | 'size'>, - Pick, - WithTheme { - isChecked: boolean; -} - export const defaultProps = { accent: 'primary', defaultChecked: false, diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 3934c002..3f5957da 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -7,7 +7,6 @@ import { SetRequired } from '@gilbarbara/types'; import is from 'is-lite'; import { UseThemeReturn } from '~/hooks/useTheme'; - import { fadeIn } from '~/modules/animations'; import { getColorTokens } from '~/modules/colors'; import { baseStyles, getStyledOptions, getStyles } from '~/modules/system'; diff --git a/src/components/Tooltip/useTooltip.ts b/src/components/Tooltip/useTooltip.ts index d9723dd1..97626e4e 100644 --- a/src/components/Tooltip/useTooltip.ts +++ b/src/components/Tooltip/useTooltip.ts @@ -3,7 +3,6 @@ import { omit } from '@gilbarbara/helpers'; import { Simplify } from '@gilbarbara/types'; import { useComponentProps } from '~/hooks/useComponentProps'; - import { textDefaultOptions } from '~/modules/options'; import { @@ -19,21 +18,7 @@ import { WithTextOptions, } from '~/types'; -export interface TooltipSharedProps { - /** - * The placement of the tooltip. - * @default bottom-middle - */ - placement: Placement; - /** - * Optional title for the tooltip. - */ - title?: string; - /** Content wrapping */ - wrap?: Sizes; - /** @default 100 */ - zIndex?: number; -} +export type TooltipProps = Simplify; export interface TooltipAnimationProps { /** @@ -98,7 +83,21 @@ export interface TooltipKnownProps style?: CSSProperties; } -export type TooltipProps = Simplify; +export interface TooltipSharedProps { + /** + * The placement of the tooltip. + * @default bottom-middle + */ + placement: Placement; + /** + * Optional title for the tooltip. + */ + title?: string; + /** Content wrapping */ + wrap?: Sizes; + /** @default 100 */ + zIndex?: number; +} export const defaultProps = { ...omit(textDefaultOptions, 'size'), diff --git a/src/components/Truncate/useTruncate.ts b/src/components/Truncate/useTruncate.ts index be20af59..cee79fe0 100644 --- a/src/components/Truncate/useTruncate.ts +++ b/src/components/Truncate/useTruncate.ts @@ -4,14 +4,14 @@ import { useComponentProps } from '~/hooks/useComponentProps'; import { StyledProps, WithChildren } from '~/types'; +export type TruncateProps = Simplify; + export interface TruncateKnownProps extends StyledProps, WithChildren { /** @default 2 */ lines?: number; maxWidth?: StringOrNumber; } -export type TruncateProps = Simplify; - export const defaultProps = { lines: 2, } satisfies Omit; diff --git a/src/hooks/useImage.ts b/src/hooks/useImage.ts index bb49e744..bfb62082 100644 --- a/src/hooks/useImage.ts +++ b/src/hooks/useImage.ts @@ -1,7 +1,12 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import type { ImgHTMLAttributes, SyntheticEvent } from 'react'; +type ImageEvent = SyntheticEvent; + +type Status = 'loading' | 'failed' | 'pending' | 'loaded'; + export type NativeImageProps = ImgHTMLAttributes; +export type UseImageReturn = ReturnType; export interface UseImageProps { /** @@ -34,9 +39,6 @@ export interface UseImageProps { srcSet?: string; } -type ImageEvent = SyntheticEvent; -type Status = 'loading' | 'failed' | 'pending' | 'loaded'; - /** * React hook that loads an image in the browser, * and lets us know the `status`. @@ -128,5 +130,3 @@ export function useImage(props: UseImageProps) { [crossOrigin, loading, onError, onLoad, sizes, srcSet, status], ); } - -export type UseImageReturn = ReturnType; diff --git a/src/hooks/useKeyboardNavigation.test.tsx b/src/hooks/useKeyboardNavigation.test.tsx index c0480827..c7572f4b 100644 --- a/src/hooks/useKeyboardNavigation.test.tsx +++ b/src/hooks/useKeyboardNavigation.test.tsx @@ -18,10 +18,6 @@ interface Props extends Omit { selector?: string; } -function dispatchKeydownEvent(code: string) { - window.dispatchEvent(new KeyboardEvent('keydown', { code })); -} - function Component(props: Props) { const { selector = 'button', ...rest } = props; const componentRef = useRef(null); @@ -56,6 +52,10 @@ function Component(props: Props) { ); } +function dispatchKeydownEvent(code: string) { + window.dispatchEvent(new KeyboardEvent('keydown', { code })); +} + describe('hooks/useKeyboardNavigation', () => { let unmount: () => void; diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts index 9dc8099b..4c3a0e33 100644 --- a/src/hooks/useKeyboardNavigation.ts +++ b/src/hooks/useKeyboardNavigation.ts @@ -1,8 +1,10 @@ -import { MutableRefObject, useCallback, useEffect } from 'react'; +import { RefObject, useCallback, useEffect } from 'react'; import { useLatest } from '@gilbarbara/hooks'; type ArrowNavigation = 'horizontal' | 'vertical' | 'both'; +export type UseKeyboardNavigationReturn = ReturnType; + export interface UseKeyboardNavigationOptions { /** * The arrow navigation type @@ -30,7 +32,7 @@ export interface UseKeyboardNavigationOptions { } export function useKeyboardNavigation( - elementRef: MutableRefObject, + elementRef: RefObject, options: UseKeyboardNavigationOptions, ) { const { arrowNavigation, disabled, escCallback, initialFocusedElement, selector, trapFocus } = @@ -69,7 +71,7 @@ export function useKeyboardNavigation( return; } - const isPrevious = ['ArrowUp', 'ArrowLeft'].includes(event.code); + const isPrevious = ['ArrowLeft', 'ArrowUp'].includes(event.code); const initialIndex = getElementIndex(elements); let index = getElementIndex(elements); @@ -144,7 +146,7 @@ export function useKeyboardNavigation( ) { interceptArrows(event); } else if ( - ['ArrowUp', 'ArrowDown'].includes(code) && + ['ArrowDown', 'ArrowUp'].includes(code) && allowArrowNavigation(['vertical', 'both']) ) { interceptArrows(event); @@ -207,5 +209,3 @@ export function useKeyboardNavigation( removeScope, }; } - -export type UseKeyboardNavigationReturn = ReturnType; diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx index 188b2e14..ced38039 100644 --- a/src/hooks/useTheme.tsx +++ b/src/hooks/useTheme.tsx @@ -9,6 +9,8 @@ import { Theme } from '~/types'; let storedEmotionTheme: Theme; let storedTheme: Theme; +export type UseThemeReturn = ReturnType; + export function useTheme() { const emotionTheme = useThemeEmotion(); const needsUpdate = !storedTheme || !deepEqual(storedEmotionTheme, emotionTheme); @@ -33,5 +35,3 @@ export function useTheme() { return { getDataAttributes, theme: nextTheme.current }; } - -export type UseThemeReturn = ReturnType; diff --git a/src/index.ts b/src/index.ts index f0b8bccb..5a179b3f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,6 +10,7 @@ export * from './components/ButtonGroup'; export * from './components/ButtonSplit'; export * from './components/ButtonUnstyled'; export * from './components/CheckboxAndRadio'; +export * from './components/Chip'; export * from './components/ClickOutside'; export * from './components/Collapse'; export * from './components/Container'; @@ -36,9 +37,9 @@ export * from './components/Keyboard'; export * from './components/Label'; export * from './components/List'; export * from './components/Loader'; -export * from './components/Modal'; export * from './components/Menu'; export * from './components/MenuToggle'; +export * from './components/Modal'; export * from './components/NavBar'; export * from './components/NonIdealState'; export * from './components/Page'; @@ -50,49 +51,48 @@ export * from './components/ProgressCircle'; export * from './components/Quote'; export * from './components/RadioGroup'; export * from './components/Ripple'; -export * from './components/Select'; export * from './components/Search'; +export * from './components/Select'; export * from './components/Sidebar'; export * from './components/Skeleton'; export * from './components/Snippet'; export * from './components/Spacer'; export * from './components/StatusIndicator'; export * from './components/Tabs'; -export * from './components/Chip'; export * from './components/Text'; export * from './components/Textarea'; export * from './components/Toggle'; export * from './components/Tooltip'; export * from './components/Truncate'; +export { useImage } from './hooks/useImage'; // Hooks export { useKeyboardNavigation } from './hooks/useKeyboardNavigation'; -export { useImage } from './hooks/useImage'; export { useTheme } from './hooks/useTheme'; // Modules export { animateIcon, fadeIn, - fadeOut, fadeInOut, + fadeOut, horizontalScale, ripple, rotate, } from './modules/animations'; -export { icons } from './modules/options'; export { mergeTheme, responsive } from './modules/helpers'; -export * as theme from './modules/theme'; +export { icons } from './modules/options'; export { getContainerStyles } from './modules/system'; -export { px } from '@gilbarbara/helpers'; - +export * as theme from './modules/theme'; // Types export * as Types from './types'; + export * as Props from './types/props'; export * from './types/props'; export type { Theme } from './types/theme'; +export { px } from '@gilbarbara/helpers'; // Libraries -export { default as SVG } from 'react-inlinesvg'; export * from 'colorizr'; +export { default as SVG } from 'react-inlinesvg'; diff --git a/src/modules/animations.ts b/src/modules/animations.ts index faa18771..5d00a384 100644 --- a/src/modules/animations.ts +++ b/src/modules/animations.ts @@ -5,10 +5,10 @@ import scroll from 'scroll'; import { getColorTokens } from '~/modules/colors'; -import * as baseTheme from './theme'; - import { ColorVariantTones, Theme } from '../types'; +import * as baseTheme from './theme'; + interface ScrollToOptions { element?: HTMLElement; scrollDuration?: number; diff --git a/src/modules/colors.ts b/src/modules/colors.ts index d885ef98..8d9bcfc6 100644 --- a/src/modules/colors.ts +++ b/src/modules/colors.ts @@ -1,11 +1,11 @@ import { objectKeys } from '@gilbarbara/helpers'; import { + textColor as contrastingColor, darken, hex2hsl, hsl2hex, lighten, parseCSS, - textColor as contrastingColor, } from 'colorizr'; import * as theme from '~/modules/theme'; @@ -18,13 +18,6 @@ export function getColorComplement(color: string) { return l >= 90 ? darken(color, 10) : lighten(color, 10); } -export function getColorWithTone(color: string, tone: ColorTone) { - const hsl = hex2hsl(parseCSS(color, 'hex')); - const lightness = 100 - parseInt(tone, 10) / 10; - - return hsl2hex({ ...hsl, l: lightness }); -} - /** * Get color from theme */ @@ -95,3 +88,10 @@ export function getColorTokens( }; } } + +export function getColorWithTone(color: string, tone: ColorTone) { + const hsl = hex2hsl(parseCSS(color, 'hex')); + const lightness = 100 - parseInt(tone, 10) / 10; + + return hsl2hex({ ...hsl, l: lightness }); +} diff --git a/src/modules/system.ts b/src/modules/system.ts index 5bfa3100..343f5a93 100644 --- a/src/modules/system.ts +++ b/src/modules/system.ts @@ -74,6 +74,13 @@ interface GetDisableStylesOptions { isButton?: boolean; } +interface GetStylesOptions extends ColorStylesOptions { + lineHeightCustom?: StringOrNumber; + skipColor?: boolean; + skipSpacing?: boolean; + useFontSize?: boolean; +} + interface GetStylesProps extends WithAccent, WithBlock, @@ -101,18 +108,23 @@ interface GetStylesProps variant?: string; } -interface GetStylesOptions extends ColorStylesOptions { - lineHeightCustom?: StringOrNumber; - skipColor?: boolean; - skipSpacing?: boolean; - useFontSize?: boolean; -} - interface TextStylesOptions { lineHeightCustom?: StringOrNumber; skipFontSizing?: boolean; } +export function alignStyles(props: T): CSSObject { + const { align } = props; + + if (align) { + return { + textAlign: align, + }; + } + + return {}; +} + export function getContainerStyles(props: WithTheme, options?: GetContainerStylesOptions) { const { responsive = true, verticalPadding = false } = options ?? {}; const { spacing } = props.theme; @@ -272,18 +284,6 @@ export function getStyles(props: GetStylesProps, options: GetStylesOptions = {}) return sortObjectKeys(cleanUpObject(styles)) as CSSObject; } -export function alignStyles(props: T): CSSObject { - const { align } = props; - - if (align) { - return { - textAlign: align, - }; - } - - return {}; -} - export const appearanceStyles: CSSObject = { appearance: 'none', }; @@ -307,7 +307,7 @@ export function borderStyles(props: T): CSSObj if (['bottom', 'left', 'right', 'top'].includes(side)) { item[`border${capitalize(side)}`] = value; - } else if (['start', 'end'].includes(side)) { + } else if (['end', 'start'].includes(side)) { item[`borderInline${capitalize(side)}`] = value; } else if (side === 'horizontal') { item.borderBottom = value; diff --git a/src/modules/validations.ts b/src/modules/validations.ts index f5da8067..951cef49 100644 --- a/src/modules/validations.ts +++ b/src/modules/validations.ts @@ -1,6 +1,8 @@ -import { isValidEmail, validatePassword as validatePasswordHelper } from '@gilbarbara/helpers'; - -import { ValidatePasswordOptions } from '~/types'; +import { + isValidEmail, + Types, + validatePassword as validatePasswordHelper, +} from '@gilbarbara/helpers'; import { clearNumber } from './helpers'; @@ -16,7 +18,7 @@ export function validateMatchField( return compare === value || message; } -export function validatePassword(value: string, options?: ValidatePasswordOptions) { +export function validatePassword(value: string, options?: Types.ValidatePasswordOptions) { try { validatePasswordHelper(value, options); diff --git a/src/types/common.ts b/src/types/common.ts index 6b3b090d..bfa42851 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -1,6 +1,5 @@ import { CSSProperties, RefObject } from 'react'; import { SerializedStyles } from '@emotion/react'; -import { validatePassword } from '@gilbarbara/helpers'; import { StringOrNumber } from '@gilbarbara/types'; import { StandardShorthandProperties } from 'csstype'; @@ -21,54 +20,62 @@ export type BorderItemSide = | 'all' | Orientation; -export interface BorderItem { - /** - * @default gray.100 - */ - color?: ColorVariantTones; - /** - * @default all - */ - side?: BorderItemSide; - /** - * @default 1px - */ - size?: StandardShorthandProperties['borderWidth'] | number; - /** - * @default solid - */ - style?: StandardShorthandProperties['borderStyle']; -} - export type ButtonTypes = 'button' | 'submit' | 'reset'; export type DataAttributes = Record<`data-${string}`, StringOrNumber>; -export type Orientation = 'horizontal' | 'vertical'; - export type HeadingSizes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'jumbo'; -export type TextSizes = (typeof textSizes)[number]; export type Icons = (typeof icons)[number]['name']; export type InputTypes = (typeof inputTypes)[number]; +export type Orientation = 'horizontal' | 'vertical'; export type Placement = Concat; +export type Position = 'bottom' | 'left' | 'right' | 'top'; + export type PositionX = 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top'; export type PositionY = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'; -export type Position = 'bottom' | 'left' | 'right' | 'top'; +export type ResponsiveInput = { + [key: ResponsiveSizes]: CSSProperties | SerializedStyles; +}; + +export type ResponsiveSizes = '_' | Breakpoint | string; export type Sizes = (typeof sizes)[number]; export type SortDirection = 'asc' | 'desc'; +export type StringLiteral = {} & string; + export type Target = RefObject | T | null | string; +export type TextSizes = (typeof textSizes)[number]; + export type Variant = 'bordered' | 'clean' | 'solid' | 'shadow'; +export interface BorderItem { + /** + * @default gray.100 + */ + color?: ColorVariantTones; + /** + * @default all + */ + side?: BorderItemSide; + /** + * @default 1px + */ + size?: StandardShorthandProperties['borderWidth'] | number; + /** + * @default solid + */ + style?: StandardShorthandProperties['borderStyle']; +} + // Responsive export interface MediaQueries { [key: string]: any; @@ -80,11 +87,3 @@ export interface MediaQueries { xl: string; xs: string; } - -export type ResponsiveSizes = '_' | Breakpoint | string; - -export type ResponsiveInput = { - [key: ResponsiveSizes]: CSSProperties | SerializedStyles; -}; - -export type ValidatePasswordOptions = Parameters[1]; diff --git a/src/types/components.ts b/src/types/components.ts index 63572192..58006c13 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -5,16 +5,14 @@ import { StringOrNumber } from '@gilbarbara/types'; import { WithDisabled, WithLabel } from './shared'; import { ColorVariantTones, Theme } from './theme'; +export type OmitElementProps = TProps & + Omit, 'ref' | 'size' | 'wrap' | keyof TProps | TProperties>; + export interface BaseProps { [hey: string]: any; theme?: Partial; } -export interface StyledProps { - as?: ElementType; - theme?: Theme; -} - export interface CheckboxItem extends WithDisabled, WithLabel { name: string; } @@ -25,10 +23,12 @@ export interface DropdownOption extends Option { type?: string; } -export type OmitElementProps = TProps & - Omit, 'ref' | 'size' | 'wrap' | keyof TProps | TProperties>; - export interface RadioItem extends WithDisabled, WithLabel { accent?: ColorVariantTones; value: StringOrNumber; } + +export interface StyledProps { + as?: ElementType; + theme?: Theme; +} diff --git a/src/types/props.ts b/src/types/props.ts index 057b60ca..a51d1603 100644 --- a/src/types/props.ts +++ b/src/types/props.ts @@ -7,7 +7,7 @@ export type { AvatarProps } from '../components/Avatar/Avatar'; export type { BadgeProps } from '../components/Badge/Badge'; export type { BoxProps } from '../components/Box/Box'; export type { ButtonProps } from '../components/Button/Button'; -export type { ButtonGroupProps, ButtonGroupItemProps } from '../components/ButtonGroup/ButtonGroup'; +export type { ButtonGroupItemProps, ButtonGroupProps } from '../components/ButtonGroup/ButtonGroup'; export type { ButtonSplitProps } from '../components/ButtonSplit/ButtonSplit'; export type { ButtonUnstyledProps } from '../components/ButtonUnstyled/ButtonUnstyled'; export type { CheckboxProps, RadioProps } from '../components/CheckboxAndRadio/useCheckboxAndRadio'; @@ -16,16 +16,16 @@ export type { CollapseProps } from '../components/Collapse/Collapse'; export type { ContainerProps } from '../components/Container/Container'; export type { CopyToClipboardProps } from '../components/CopyToClipboard/CopyToClipboard'; export type { - DataTableProps, - DataTableHeadProps, DataTableBodyProps, DataTableColumn, + DataTableHeadProps, + DataTableProps, DataTableRow, } from '../components/DataTable/useDataTable'; export type { - DatePickerSingleProps, DatePickerRangeProps, DatePickerSelectorProps, + DatePickerSingleProps, } from '../components/DatePicker/useDatePicker'; export type { DialogProps } from '../components/Dialog/Dialog'; export type { DividerProps } from '../components/Divider/Divider'; @@ -37,7 +37,7 @@ export type { FormProps, FormRenderProps, FormSubmitHandler } from '../component export type { FormElementWrapperProps } from '../components/FormElementWrapper/FormElementWrapper'; export type { FormGroupProps } from '../components/FormGroup/FormGroup'; export type { GridProps } from '../components/Grid/Grid'; -export type { HeadingProps, HeadingLargeProps } from '../components/Headings/useHeading'; +export type { HeadingLargeProps, HeadingProps } from '../components/Headings/useHeading'; export type { IconProps } from '../components/Icon/Icon'; export type { ImageProps } from '../components/Image/Image'; export type { InputProps } from '../components/Input/Input'; @@ -67,7 +67,7 @@ export type { ProgressCircleProps } from '../components/ProgressCircle/ProgressC export type { QuoteProps } from '../components/Quote/Quote'; export type { RadioGroupProps } from '../components/RadioGroup/RadioGroup'; export type { RippleProps } from '../components/Ripple/Ripple'; -export type { SearchProps, SearchItem } from '../components/Search/Search'; +export type { SearchItem, SearchProps } from '../components/Search/Search'; export type { SelectProps } from '../components/Select/Select'; export type { SidebarProps } from '../components/Sidebar/Sidebar'; export type { SkeletonProps } from '../components/Skeleton/Skeleton'; @@ -75,9 +75,9 @@ export type { SnippetProps } from '../components/Snippet/Snippet'; export type { SpacerProps } from '../components/Spacer/Spacer'; export type { StatusIndicatorProps } from '../components/StatusIndicator/StatusIndicator'; export type { TabProps, TabsProps } from '../components/Tabs/useTabs'; -export type { ChipProps } from '~/components/Chip/Chip'; export type { TextProps } from '../components/Text/Text'; export type { TextareaProps } from '../components/Textarea/Textarea'; export type { ToggleProps } from '../components/Toggle/Toggle'; export type { TooltipProps } from '../components/Tooltip/Tooltip'; export type { TruncateProps } from '../components/Truncate/Truncate'; +export type { ChipProps } from '~/components/Chip/Chip'; diff --git a/src/types/shared.ts b/src/types/shared.ts index dde8f019..e70b65c5 100644 --- a/src/types/shared.ts +++ b/src/types/shared.ts @@ -9,13 +9,21 @@ import { HeadingSizes, Orientation, Sizes, + StringLiteral, TextSizes, Variant, } from './common'; import { ButtonSize, ColorVariantTones, Radius, Shadow, Spacing, Theme } from './theme'; -export type SpacingOrZero = Spacing | 0; +export type Gap = Spacing | StringLiteral | number; + export type SpacingAuto = SpacingOrZero | 'auto'; +export type SpacingOrZero = Spacing | 0; + +export type WithHTMLAttributes = Pick< + HTMLAttributes, + 'className' | 'id' | 'style' | 'tabIndex' | 'title' +>; export interface WithAccent { /** @@ -49,14 +57,6 @@ export interface WithBorderless { borderless?: boolean; } -export interface WithButtonSize { - /** - * Button size - * @default md - */ - size?: ButtonSize; -} - export interface WithBusy { /** * Add an animated icon @@ -65,6 +65,14 @@ export interface WithBusy { busy?: boolean; } +export interface WithButtonSize { + /** + * Button size + * @default md + */ + size?: ButtonSize; +} + export interface WithChildren { /** Required */ children: ReactNode; @@ -155,7 +163,7 @@ export interface WithFlexBox { * The gap CSS property sets the gaps (gutters) between rows and columns. * It is a shorthand for row-gap and column-gap. */ - gap?: Spacing | ({} & string) | number; + gap?: Gap; /** * How to align the contents along the main axis.
* Any 'justify-content' valid CSS value is accepted. @@ -214,12 +222,12 @@ export interface WithGrid { autoRows?: StandardLonghandProperties['gridAutoRows']; column?: StandardShorthandProperties['gridColumn']; columnEnd?: StandardLonghandProperties['gridColumnEnd']; - columnGap?: Spacing | ({} & string) | number; + columnGap?: Gap; columnStart?: StandardLonghandProperties['gridColumnStart']; grid?: StandardShorthandProperties['grid']; row?: StandardShorthandProperties['gridRow']; rowEnd?: StandardLonghandProperties['gridRowEnd']; - rowGap?: Spacing | ({} & string) | number; + rowGap?: Gap; rowStart?: StandardLonghandProperties['gridRowStart']; template?: StandardShorthandProperties['gridTemplate']; templateAreas?: StandardLonghandProperties['gridTemplateAreas']; @@ -235,11 +243,6 @@ export interface WithHeight { height?: Sizes; } -export type WithHTMLAttributes = Pick< - HTMLAttributes, - 'className' | 'id' | 'style' | 'tabIndex' | 'title' ->; - export interface WithInline { /** * Display as an inline element @@ -248,6 +251,10 @@ export interface WithInline { inline?: boolean; } +export interface WithLabel { + label?: ReactNode; +} + export interface WithLayout extends WithDisplay, WithDimension { opacity?: StandardLonghandProperties['opacity'] | number; overflow?: StandardShorthandProperties['overflow']; @@ -258,10 +265,6 @@ export interface WithLayout extends WithDisplay, WithDimension { transition?: StandardShorthandProperties['transition']; } -export interface WithLabel { - label?: ReactNode; -} - export interface WithLight { /** * Remove bold style @@ -352,13 +355,6 @@ export interface WithStartContent { startContent?: ReactNode; } -export interface WithTextSize { - /** - * Text size - */ - size?: T; -} - export interface WithTextOptions extends WithTextSize { /** @@ -378,6 +374,13 @@ export interface WithTextOptions wordSpacing?: StandardLonghandProperties['wordSpacing']; } +export interface WithTextSize { + /** + * Text size + */ + size?: T; +} + export interface WithTheme { theme: Theme; } diff --git a/src/types/theme.ts b/src/types/theme.ts index fa92d097..8d490b10 100644 --- a/src/types/theme.ts +++ b/src/types/theme.ts @@ -1,9 +1,9 @@ import { LiteralUnion } from '@gilbarbara/types'; -import { MapLiteralToPrimitive } from './utils'; - import * as theme from '../modules/theme'; +import { MapLiteralToPrimitive } from './utils'; + export type AvatarSize = keyof typeof theme.avatar; export type BaseTheme = MapLiteralToPrimitive; @@ -26,14 +26,6 @@ export type ColorTone = | '800' | '900'; -export type Radius = keyof typeof theme.radius; - -export type Shadow = keyof typeof theme.shadow; - -export type Spacing = keyof typeof theme.spacing; - -export type Typography = keyof typeof theme.typography; - export type ColorVariant = Color | 'black' | 'white'; export type ColorVariantTones = LiteralUnion< @@ -44,4 +36,12 @@ export type ColorVariantTones = LiteralUnion< string >; +export type Radius = keyof typeof theme.radius; + +export type Shadow = keyof typeof theme.shadow; + +export type Spacing = keyof typeof theme.spacing; + +export type Typography = keyof typeof theme.typography; + export interface Theme extends BaseTheme {} diff --git a/stories/Overview/components/Colors.tsx b/stories/Overview/components/Colors.tsx index e691ff51..f073e630 100644 --- a/stories/Overview/components/Colors.tsx +++ b/stories/Overview/components/Colors.tsx @@ -5,7 +5,6 @@ import { compare, textColor } from 'colorizr'; import { Box, Chip, Flex, FlexCenter, H2, H3, Paragraph, Spacer } from '~'; import * as theme from '~/modules/theme'; - import { TONES } from '~/stories/__helpers__'; interface SwatchProps { diff --git a/stories/Overview/components/Icons.tsx b/stories/Overview/components/Icons.tsx index 5aa79781..b3cfa6c8 100644 --- a/stories/Overview/components/Icons.tsx +++ b/stories/Overview/components/Icons.tsx @@ -6,8 +6,8 @@ import { Box, Dropdown, H2, H3, Icon, Input, Jumbo, Paragraph, Spacer, Text } fr import { icons } from '~/modules/options'; import { avatar, variants } from '~/modules/theme'; - import Navigation from '~/stories/Overview/components/Navigation'; + import type { ColorVariant, DropdownOption, Icons } from '~/types'; interface ItemProps { @@ -51,7 +51,7 @@ export default function Icons() { size: 64, search: '', }); - const debounceRef = useRef(); + const debounceRef = useRef(0); const handleChangeCategories = (values: DropdownOption[]) => { const [selected] = values; diff --git a/stories/Overview/components/Introduction.tsx b/stories/Overview/components/Introduction.tsx index cc972e4b..817f7a8c 100644 --- a/stories/Overview/components/Introduction.tsx +++ b/stories/Overview/components/Introduction.tsx @@ -1,10 +1,10 @@ import { Anchor, Box, H2, H3, Jumbo, Paragraph, Spacer, SVG } from '~'; -import Navigation from './Navigation'; - import packageJson from '../../../package.json'; import CodeBlock from '../../components/CodeBlock'; +import Navigation from './Navigation'; + export default function Introduction() { return ( diff --git a/stories/Overview/components/Spacing.tsx b/stories/Overview/components/Spacing.tsx index 38c178b6..a2685346 100644 --- a/stories/Overview/components/Spacing.tsx +++ b/stories/Overview/components/Spacing.tsx @@ -1,7 +1,6 @@ import { Box, Grid, H2, Paragraph, Spacer } from '~'; import { spacing } from '~/modules/theme'; - import { SPACING } from '~/stories/__helpers__'; export default function Spacing() { diff --git a/stories/Overview/components/ThemeCustomization.tsx b/stories/Overview/components/ThemeCustomization.tsx index ba1f62f6..fcfad94a 100644 --- a/stories/Overview/components/ThemeCustomization.tsx +++ b/stories/Overview/components/ThemeCustomization.tsx @@ -1,10 +1,10 @@ import { Box, H2, Jumbo, Paragraph } from '~'; -import Navigation from './Navigation'; - import Code from '../../components/Code'; import CodeBlock from '../../components/CodeBlock'; +import Navigation from './Navigation'; + export default function ThemeCustomization() { return ( <> diff --git a/stories/Overview/components/Typography.tsx b/stories/Overview/components/Typography.tsx index c984fea8..d07e9723 100644 --- a/stories/Overview/components/Typography.tsx +++ b/stories/Overview/components/Typography.tsx @@ -1,10 +1,10 @@ import { Box, H1, H2, H3, H4, H5, H6, Jumbo, Paragraph, Spacer } from '~'; -import Heading from './Heading'; - import { typography } from '../../../src/modules/theme'; import { PANGRAM } from '../../__helpers__'; +import Heading from './Heading'; + export default function Typography() { return ( diff --git a/stories/__helpers__/index.ts b/stories/__helpers__/index.ts index 25b79351..054b61f0 100644 --- a/stories/__helpers__/index.ts +++ b/stories/__helpers__/index.ts @@ -71,6 +71,12 @@ const CHROMATIC_MODE = { type ChromaticMode = keyof typeof CHROMATIC_MODE; +interface FlexBoxPropsOptions { + exclude?: Array; + hideCategory?: boolean; + include?: Array; +} + export function addChromaticModes(...inputModes: [ChromaticMode, ...ChromaticMode[]]) { const modes = inputModes.reduce>((acc, mode) => { const { title, ...rest } = CHROMATIC_MODE[mode]; @@ -87,35 +93,6 @@ export function addChromaticModes(...inputModes: [ChromaticMode, ...ChromaticMod }; } -export function disableControl(): InputType { - return { control: false }; -} - -export function hideNoControlsWarning() { - return { - hideNoControlsWarning: true, - }; -} - -export function hideProps(...props: string[]) { - const fields: PlainObject = { - as: hideTable(), - theme: hideTable(), - }; - - props.forEach(d => { - fields[d] = hideTable(); - }); - - return fields; -} - -export function hideTable() { - return { - table: { disable: true }, - }; -} - export function colorProps( props: Array<'accent' | 'backgroundColor' | 'bg' | 'borderColor' | 'color'> = ['color'], variantsOnly = false, @@ -143,10 +120,8 @@ export function dimensionProps(): ControlMap { }; } -interface FlexBoxPropsOptions { - exclude?: Array; - hideCategory?: boolean; - include?: Array; +export function disableControl(): InputType { + return { control: false }; } export function flexBoxProps(options: FlexBoxPropsOptions = {}) { @@ -191,6 +166,31 @@ export function flexItemProps(): ControlMap { }; } +export function hideNoControlsWarning() { + return { + hideNoControlsWarning: true, + }; +} + +export function hideProps(...props: string[]) { + const fields: PlainObject = { + as: hideTable(), + theme: hideTable(), + }; + + props.forEach(d => { + fields[d] = hideTable(); + }); + + return fields; +} + +export function hideTable() { + return { + table: { disable: true }, + }; +} + export function layoutProps(options?: { display: string }): ControlMap { const { display } = options ?? {};