diff --git a/package.json b/package.json index a3d0c7fa53..f348237709 100644 --- a/package.json +++ b/package.json @@ -115,6 +115,7 @@ "depcheck": "^1.4.7", "esbuild": "^0.17.11", "esbuild-plugin-replace": "^1.4.0", + "eslint-plugin-typescript-sort-keys": "^3.3.0", "esm": "^3.2.25", "husky": "8.0.3", "jest": "29.7.0", @@ -134,7 +135,7 @@ "styled-components": "^5.3.9", "svgo": "^3.0.1", "typescript": "5.0.2", - "wttj-config": "^2.6.2", + "wttj-config": "^3.0.1", "yargs": "^17.7.2" }, "resolutions": { diff --git a/packages/Accordion/src/index.tsx b/packages/Accordion/src/index.tsx index 32836c718b..e27e4b8eb5 100644 --- a/packages/Accordion/src/index.tsx +++ b/packages/Accordion/src/index.tsx @@ -6,18 +6,18 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import * as S from './styles' export interface AccordionOptions { - title: string | JSX.Element icon?: JSX.Element /** * store from useAccordion() */ store: UseAccordion + title: string | JSX.Element } export type AccordionProps = CreateWuiProps<'div', AccordionOptions> export const Accordion = forwardRef<'div', AccordionProps>( - ({ children, icon = , title, store, dataTestId, ...rest }, ref) => { + ({ children, dataTestId, icon = , store, title, ...rest }, ref) => { return ( diff --git a/packages/Accordion/src/styles.ts b/packages/Accordion/src/styles.ts index 950dab4536..d6195312b2 100644 --- a/packages/Accordion/src/styles.ts +++ b/packages/Accordion/src/styles.ts @@ -4,7 +4,7 @@ import { Box } from '@welcome-ui/box' export const Accordion = styled.div` ${th('accordions.wrapper')}; - ${system} + ${system}; transition: medium; &:hover { diff --git a/packages/Alert/src/index.tsx b/packages/Alert/src/index.tsx index 0087f969d4..06bb25cbe7 100644 --- a/packages/Alert/src/index.tsx +++ b/packages/Alert/src/index.tsx @@ -11,16 +11,16 @@ import { Title } from './Title' export type Size = 'sm' | 'md' export interface AlertOptions { - variant?: Variant - size?: Size - icon?: JSX.Element | null - isFullWidth?: boolean closeButtonDataTestId?: string cta?: JSX.Element /** * @description add a close button with an onclick handleClose function */ handleClose?: () => void + icon?: JSX.Element | null + isFullWidth?: boolean + size?: Size + variant?: Variant } export type AlertProps = CreateWuiProps<'div', AlertOptions> diff --git a/packages/Alert/src/styles.ts b/packages/Alert/src/styles.ts index aa7a0964b6..be5181a011 100644 --- a/packages/Alert/src/styles.ts +++ b/packages/Alert/src/styles.ts @@ -13,7 +13,7 @@ export const Alert = styled(Box)( ${th('alerts.default')}; ${th(`alerts.${variant}`)}; ${th(`alerts.sizes.${size}`)}; - ${system} + ${system}; ` ) @@ -26,7 +26,7 @@ export const Title = styled(Text).attrs(({ variant }: AlertOptions) => ({ margin: 0; margin-bottom: sm; ${th(`alerts.title.${alertVariant}`)}; - ${system} + ${system}; &:only-child { margin-bottom: 0; diff --git a/packages/Badge/src/index.tsx b/packages/Badge/src/index.tsx index c0a5e9b8d3..ccdace136e 100644 --- a/packages/Badge/src/index.tsx +++ b/packages/Badge/src/index.tsx @@ -4,13 +4,13 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import * as S from './styles' export type BadgeOptions = { + children: string | number disabled?: boolean shape?: 'circle' | 'square' size?: 'sm' | 'md' variant?: 'default' | 'primary' // if a number is higher than 99, we replace this number by 99+ withNumberAbbreviation?: boolean - children: string | number } export type BadgeProps = CreateWuiProps<'div', BadgeOptions> diff --git a/packages/Breadcrumb/src/Item.tsx b/packages/Breadcrumb/src/Item.tsx index 5fcd2ba2a7..e7fada1322 100644 --- a/packages/Breadcrumb/src/Item.tsx +++ b/packages/Breadcrumb/src/Item.tsx @@ -6,8 +6,8 @@ import * as S from './Item.styles' export interface ItemOptions { children: React.ReactNode - separator?: string | React.ReactNode isActive?: boolean + separator?: string | React.ReactNode /* useful for react-router */ to?: string } diff --git a/packages/Button/src/index.tsx b/packages/Button/src/index.tsx index a2788085a2..d4ac8e5570 100644 --- a/packages/Button/src/index.tsx +++ b/packages/Button/src/index.tsx @@ -25,9 +25,9 @@ export type Variant = export interface ButtonOptions { disabled?: boolean isLoading?: boolean + shape?: Shape size?: Size variant?: Variant - shape?: Shape } export type ButtonProps = CreateWuiProps<'button', ButtonOptions> diff --git a/packages/ButtonGroup/src/styles.ts b/packages/ButtonGroup/src/styles.ts index 83362b763c..344f4eb654 100644 --- a/packages/ButtonGroup/src/styles.ts +++ b/packages/ButtonGroup/src/styles.ts @@ -30,5 +30,5 @@ export const ButtonGroup = styled.div` } } - ${system} + ${system}; ` diff --git a/packages/Card/src/Cover.styles.ts b/packages/Card/src/Cover.styles.ts index 85d2f3b537..bcd682b98c 100644 --- a/packages/Card/src/Cover.styles.ts +++ b/packages/Card/src/Cover.styles.ts @@ -4,5 +4,5 @@ import { Shape } from '@welcome-ui/shape' export const Cover = styled(Shape)` ${th('cards.cover')}; - ${system} + ${system}; ` diff --git a/packages/Card/src/styles.ts b/packages/Card/src/styles.ts index f8240f1d59..efae02b21b 100644 --- a/packages/Card/src/styles.ts +++ b/packages/Card/src/styles.ts @@ -8,11 +8,11 @@ export const Card = styled(Box)` background-size: cover; background-position: center; - ${system} + ${system}; ` export const Body = styled(Box)` padding: lg; - ${system} + ${system}; ` diff --git a/packages/Checkbox/src/index.tsx b/packages/Checkbox/src/index.tsx index 4336c3d080..9222c37c86 100644 --- a/packages/Checkbox/src/index.tsx +++ b/packages/Checkbox/src/index.tsx @@ -5,8 +5,8 @@ import { DefaultFieldStylesProps } from '@welcome-ui/utils' import * as S from './styles' export interface CheckboxOptions extends DefaultFieldStylesProps { - checked?: boolean Component?: React.ElementType + checked?: boolean disabled?: boolean indeterminate?: boolean name?: string @@ -19,10 +19,10 @@ export const Checkbox = forwardRef<'input', CheckboxProps>( ( { checked = false, - indeterminate = false, Component = S.Checkbox, dataTestId, disabled, + indeterminate = false, name, onChange, size, diff --git a/packages/Checkbox/src/styles.ts b/packages/Checkbox/src/styles.ts index b829bd1ec2..a9732ed6b4 100644 --- a/packages/Checkbox/src/styles.ts +++ b/packages/Checkbox/src/styles.ts @@ -47,6 +47,7 @@ export const Checkbox = styled(Ariakit.Checkbox).withConfig({ ${th('checkboxes.checked')}; } + /* stylelint-disable string-no-newline */ &::after { content: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 10 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.3973 1.76919C0.953776 1.81988 0.634816 2.04775 0.685235 2.49156C0.732149 2.90436 1.08212 3.03624 1.48789 3.03624L8.6029 2.23086C9.04669 2.18017 9.36538 1.9523 9.31469 1.50849C9.26427 1.06468 8.86389 0.917163 8.41956 0.969201C4.90971 1.38026 4.90828 1.36792 1.3973 1.76919Z' fill='${theme .defaultFields.checkableField.checked.color}'/%3E%3C/svg%3E"); diff --git a/packages/Core/src/theme/accordions.ts b/packages/Core/src/theme/accordions.ts index 9b8bf67144..33ef5071a0 100644 --- a/packages/Core/src/theme/accordions.ts +++ b/packages/Core/src/theme/accordions.ts @@ -3,11 +3,11 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeAccordions = { - padding: string - wrapper: CSSObject - icon: CSSObject content: CSSObject + icon: CSSObject + padding: string title: CSSObject + wrapper: CSSObject } export const getAccordions = (theme: WuiTheme): ThemeAccordions => { diff --git a/packages/Core/src/theme/alerts.ts b/packages/Core/src/theme/alerts.ts index 8df3cf7022..a0009f61f4 100644 --- a/packages/Core/src/theme/alerts.ts +++ b/packages/Core/src/theme/alerts.ts @@ -9,9 +9,9 @@ type Sizes = 'sm' | 'md' type AttributesState = CSSObject export type ThemeAlerts = { - sizes: Record default: CSSObject - title: Record + sizes: Record + title: Record } & Record export const getAlerts = (theme: WuiTheme): ThemeAlerts => { diff --git a/packages/Core/src/theme/badges.ts b/packages/Core/src/theme/badges.ts index 8543769dce..4524fb5f3c 100644 --- a/packages/Core/src/theme/badges.ts +++ b/packages/Core/src/theme/badges.ts @@ -4,17 +4,17 @@ import { WuiTheme } from './types' export type ThemeAccordions = { default: CSSObject - variants: { - default: CSSObject - primary: CSSObject - } disabled: { default: CSSObject primary: CSSObject } sizes: { - sm: CSSObject md: CSSObject + sm: CSSObject + } + variants: { + default: CSSObject + primary: CSSObject } } diff --git a/packages/Core/src/theme/borders.ts b/packages/Core/src/theme/borders.ts index 3fc03f57b1..58b4fb18f1 100644 --- a/packages/Core/src/theme/borders.ts +++ b/packages/Core/src/theme/borders.ts @@ -1,7 +1,7 @@ export type ThemeBorderWidths = { - sm: string - md: string lg: string + md: string + sm: string } export const borderWidths: ThemeBorderWidths = { diff --git a/packages/Core/src/theme/breadcrumbs.ts b/packages/Core/src/theme/breadcrumbs.ts index f42433ab35..6abce23ffd 100644 --- a/packages/Core/src/theme/breadcrumbs.ts +++ b/packages/Core/src/theme/breadcrumbs.ts @@ -3,12 +3,12 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeBreadcrumbs = { - list: CSSObject item: { + active: CSSObject default: CSSObject hover: CSSObject - active: CSSObject } + list: CSSObject separator: CSSObject } diff --git a/packages/Core/src/theme/checkboxes.ts b/packages/Core/src/theme/checkboxes.ts index 094616a6b6..bd99fa59dc 100644 --- a/packages/Core/src/theme/checkboxes.ts +++ b/packages/Core/src/theme/checkboxes.ts @@ -3,9 +3,9 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeCheckboxes = { + checked: CSSObject default: CSSObject disabled: CSSObject - checked: CSSObject } export const getCheckboxes = (theme: WuiTheme): ThemeCheckboxes => { diff --git a/packages/Core/src/theme/core.ts b/packages/Core/src/theme/core.ts index 806fed2995..b8021bdef1 100644 --- a/packages/Core/src/theme/core.ts +++ b/packages/Core/src/theme/core.ts @@ -73,6 +73,7 @@ export type ThemeFontsUrl = | string export type Options = { + [param: string]: unknown defaultFontFamily?: string defaultFontSize?: number defaultLetterSpacing?: string @@ -80,7 +81,6 @@ export type Options = { fontsUrl?: ThemeFontsUrl headingFontFamily?: string iconFontFamily?: string - [param: string]: unknown } export const createTheme = (options: Options = {}): WuiTheme => { diff --git a/packages/Core/src/theme/defaultFields.ts b/packages/Core/src/theme/defaultFields.ts index 7a0915327d..bc75e5ceee 100644 --- a/packages/Core/src/theme/defaultFields.ts +++ b/packages/Core/src/theme/defaultFields.ts @@ -5,35 +5,35 @@ import { ThemeFocus } from './focus' import { WuiTheme } from './types' export type ThemeDefaultFields = { - default: CSSObject - sizes: Record - iconPlacement: Record checkableField: { checked: CSSObject disabled: CSSObject } + checkablelabel: { + checked: CSSObject + default: CSSObject + } + default: CSSObject disabled: CSSObject - placeholder: CSSObject + fieldset: CSSObject focused: { default: CSSObject & ReturnType error: CSSObject & ReturnType - warning: CSSObject & ReturnType - success: CSSObject & ReturnType info: CSSObject & ReturnType + success: CSSObject & ReturnType + warning: CSSObject & ReturnType } - checkablelabel: { - default: CSSObject - checked: CSSObject - } + iconPlacement: Record + placeholder: CSSObject select: { default: CSSObject + disabled: CSSObject existing: CSSObject highlighted: CSSObject - selectedAndHighlighted: CSSObject selected: CSSObject - disabled: CSSObject + selectedAndHighlighted: CSSObject } - fieldset: CSSObject + sizes: Record } export const getDefaultFields = (theme: WuiTheme): ThemeDefaultFields => { diff --git a/packages/Core/src/theme/drawers.ts b/packages/Core/src/theme/drawers.ts index 2e00c7018f..7d4ecf8c43 100644 --- a/packages/Core/src/theme/drawers.ts +++ b/packages/Core/src/theme/drawers.ts @@ -6,15 +6,15 @@ type Size = 'sm' | 'md' | 'lg' export type ThemeDrawers = { backdrop: CSSObject - default: CSSObject closeButton: CSSObject - title: CSSObject content: CSSObject + default: CSSObject footer: CSSObject sizes: { horizontal: Record> vertical: Record> } + title: CSSObject } export const getDrawers = (theme: WuiTheme): ThemeDrawers => { diff --git a/packages/Core/src/theme/filedrops.ts b/packages/Core/src/theme/filedrops.ts index 7cc6c55e39..e60f746ab5 100644 --- a/packages/Core/src/theme/filedrops.ts +++ b/packages/Core/src/theme/filedrops.ts @@ -4,9 +4,9 @@ import { WuiTheme } from './types' export type ThemeFiledrops = { default: CSSObject + disabled: CSSObject dragAccept: Record dragReject: Record - disabled: CSSObject } export const getFiledrops = (theme: WuiTheme): ThemeFiledrops => { diff --git a/packages/Core/src/theme/fonts.ts b/packages/Core/src/theme/fonts.ts index 1e1cf4fc72..3c8d6cc6e4 100644 --- a/packages/Core/src/theme/fonts.ts +++ b/packages/Core/src/theme/fonts.ts @@ -2,13 +2,13 @@ import { WuiTheme } from './types' type FontFace = { display?: FontDisplay + extensions?: string[] isVariable?: boolean stretch?: string style?: string - url: string uniCodeRange?: string + url: string weight?: string - extensions?: string[] } export type ThemeFontFaces = { diff --git a/packages/Core/src/theme/icons.ts b/packages/Core/src/theme/icons.ts index 253d87f59e..7f2f8e35b0 100644 --- a/packages/Core/src/theme/icons.ts +++ b/packages/Core/src/theme/icons.ts @@ -1,11 +1,11 @@ import { WuiTheme } from './types' export type ThemeIcons = { - xs: string - sm: string - md: string lg: string + md: string + sm: string xl: string + xs: string xxl: string } diff --git a/packages/Core/src/theme/links.ts b/packages/Core/src/theme/links.ts index b2de727ea9..58b18a4f6f 100644 --- a/packages/Core/src/theme/links.ts +++ b/packages/Core/src/theme/links.ts @@ -4,7 +4,6 @@ import { WuiTheme } from './types' export type ThemeLinks = { default: CSSObject - withExternalLink: CSSObject disabled: CSSObject primary: { default: CSSObject @@ -14,6 +13,7 @@ export type ThemeLinks = { default: CSSObject hover: CSSObject } + withExternalLink: CSSObject } export const getLinks = (theme: WuiTheme): ThemeLinks => { diff --git a/packages/Core/src/theme/loaders.ts b/packages/Core/src/theme/loaders.ts index d25ca148a4..36448feb14 100644 --- a/packages/Core/src/theme/loaders.ts +++ b/packages/Core/src/theme/loaders.ts @@ -1,10 +1,10 @@ import { WuiTheme } from './types' export type ThemeLoaders = { - xs: string - sm: string - md: string lg: string + md: string + sm: string + xs: string } export const getLoaders = ({ toRem }: WuiTheme): ThemeLoaders => ({ diff --git a/packages/Core/src/theme/modals.ts b/packages/Core/src/theme/modals.ts index 2b08bfdb62..b0adb539b1 100644 --- a/packages/Core/src/theme/modals.ts +++ b/packages/Core/src/theme/modals.ts @@ -6,13 +6,13 @@ type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'auto' export type ThemeModals = { backdrop: CSSObject - default: CSSObject - header: CSSObject body: CSSObject + cover: Record + default: CSSObject footer: CSSObject gutter: string + header: CSSObject sizes: Record - cover: Record } export const getModals = (theme: WuiTheme): ThemeModals => { diff --git a/packages/Core/src/theme/paginations.ts b/packages/Core/src/theme/paginations.ts index 87943f6520..9f474bef89 100644 --- a/packages/Core/src/theme/paginations.ts +++ b/packages/Core/src/theme/paginations.ts @@ -3,10 +3,10 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export interface ThemePaginations { - default: CSSObject - item: CSSObject active: CSSObject + default: CSSObject disabled: CSSObject + item: CSSObject } export const getPaginations = (theme: WuiTheme): ThemePaginations => { diff --git a/packages/Core/src/theme/popovers.ts b/packages/Core/src/theme/popovers.ts index d5c49e4985..090ce1fabc 100644 --- a/packages/Core/src/theme/popovers.ts +++ b/packages/Core/src/theme/popovers.ts @@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemePopovers = { - default: CSSObject content: CSSObject + default: CSSObject title: CSSObject } diff --git a/packages/Core/src/theme/radii.ts b/packages/Core/src/theme/radii.ts index 7b90b1e000..220901b6cc 100644 --- a/packages/Core/src/theme/radii.ts +++ b/packages/Core/src/theme/radii.ts @@ -1,14 +1,14 @@ import { WuiTheme } from './types' export type ThemeRadii = { + [key: number]: string + full: string + lg: string + md: string none: string sm: string - md: string - lg: string xl: string xxl: string - full: string - [key: number]: string } export const getRadii = (theme: WuiTheme): ThemeRadii => { diff --git a/packages/Core/src/theme/radios.ts b/packages/Core/src/theme/radios.ts index d7f91f57be..0a9c41ab2c 100644 --- a/packages/Core/src/theme/radios.ts +++ b/packages/Core/src/theme/radios.ts @@ -3,12 +3,12 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeRadios = { - default: CSSObject checked: CSSObject checkedCenteredColor: { default: string disabled: string } + default: CSSObject } export const getRadios = (theme: WuiTheme): ThemeRadios => { diff --git a/packages/Core/src/theme/radiosTabs.ts b/packages/Core/src/theme/radiosTabs.ts index 06c706dcb0..e14e755aa9 100644 --- a/packages/Core/src/theme/radiosTabs.ts +++ b/packages/Core/src/theme/radiosTabs.ts @@ -3,8 +3,8 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeRadioTabs = { - default: CSSObject checked: CSSObject + default: CSSObject } export const getRadioTabs = (theme: WuiTheme): ThemeRadioTabs => { diff --git a/packages/Core/src/theme/screens.ts b/packages/Core/src/theme/screens.ts index ad95b7c911..4a72dceec8 100644 --- a/packages/Core/src/theme/screens.ts +++ b/packages/Core/src/theme/screens.ts @@ -1,14 +1,14 @@ export type ThemeScreens = { - xs: number - sm: number - md: number + [key: string]: number + [key: number]: number + '3xl': number + '4xl': number lg: number + md: number + sm: number xl: number + xs: number xxl: number - '3xl': number - '4xl': number - [key: string]: number - [key: number]: number } export const screens: ThemeScreens = { diff --git a/packages/Core/src/theme/shadows.ts b/packages/Core/src/theme/shadows.ts index 443c96b693..f1844dddb5 100644 --- a/packages/Core/src/theme/shadows.ts +++ b/packages/Core/src/theme/shadows.ts @@ -1,6 +1,6 @@ export type ThemeShadows = { - sm: string md: string + sm: string } export const shadows: ThemeShadows = { diff --git a/packages/Core/src/theme/sliders.ts b/packages/Core/src/theme/sliders.ts index f563b96478..4a3c202069 100644 --- a/packages/Core/src/theme/sliders.ts +++ b/packages/Core/src/theme/sliders.ts @@ -4,11 +4,11 @@ import { WuiTheme } from './types' export type ThemeSliders = { default: CSSObject - selector: CSSObject - focused: CSSObject - rangeInput: CSSObject disabled: CSSObject + focused: CSSObject output: CSSObject + rangeInput: CSSObject + selector: CSSObject } export const getSliders = (theme: WuiTheme): ThemeSliders => { diff --git a/packages/Core/src/theme/space.ts b/packages/Core/src/theme/space.ts index ee992574eb..1d1ecd397c 100644 --- a/packages/Core/src/theme/space.ts +++ b/packages/Core/src/theme/space.ts @@ -1,20 +1,20 @@ import { WuiTheme } from './types' export type ThemeSpace = { - xxs: string - xs: string - sm: string - md: string - lg: string - xl: string - xxl: string + [key: string]: string + [key: number]: string '3xl': string '4xl': string '5xl': string '6xl': string '7xl': string - [key: string]: string - [key: number]: string + lg: string + md: string + sm: string + xl: string + xs: string + xxl: string + xxs: string } export const getSpace = (theme: WuiTheme): ThemeSpace => { diff --git a/packages/Core/src/theme/tables.ts b/packages/Core/src/theme/tables.ts index ef199b3960..670b162152 100644 --- a/packages/Core/src/theme/tables.ts +++ b/packages/Core/src/theme/tables.ts @@ -3,15 +3,15 @@ import { CSSObject } from '@xstyled/styled-components' import { WuiTheme } from './types' export type ThemeTables = { - th: CSSObject td: CSSObject + th: CSSObject tr: { + clickable: CSSObject default: CSSObject error: CSSObject - warning: CSSObject info: CSSObject success: CSSObject - clickable: CSSObject + warning: CSSObject } } diff --git a/packages/Core/src/theme/tabs.ts b/packages/Core/src/theme/tabs.ts index 66bc4b8993..d517150615 100644 --- a/packages/Core/src/theme/tabs.ts +++ b/packages/Core/src/theme/tabs.ts @@ -5,27 +5,27 @@ import { WuiTheme } from './types' type Size = 'sm' | 'md' export type ThemeTabs = { - tabsBorder: { + activeBar: { horizontal: CSSObject vertical: CSSObject } + badge: CSSObject + icon: CSSObject item: { - default: CSSObject active: CSSObject - focus: CSSObject + default: CSSObject disabled: CSSObject + focus: CSSObject } panel: { - vertical: CSSObject horizontal: CSSObject + vertical: CSSObject } - activeBar: { + size: Record + tabsBorder: { horizontal: CSSObject vertical: CSSObject } - size: Record - icon: CSSObject - badge: CSSObject } export const getTabs = (theme: WuiTheme): ThemeTabs => { diff --git a/packages/Core/src/theme/tags.ts b/packages/Core/src/theme/tags.ts index 9b37290989..5079dbce0d 100644 --- a/packages/Core/src/theme/tags.ts +++ b/packages/Core/src/theme/tags.ts @@ -22,11 +22,11 @@ type Size = 'xs' | 'sm' | 'md' export type ThemeTags = { default: CSSObject - variants: Record hover: Record - sizes: Record icon: Record shape: Record + sizes: Record + variants: Record } export const getTags = (theme: WuiTheme): ThemeTags => { diff --git a/packages/Core/src/theme/toasts.ts b/packages/Core/src/theme/toasts.ts index 2a8d339706..69f65831d5 100644 --- a/packages/Core/src/theme/toasts.ts +++ b/packages/Core/src/theme/toasts.ts @@ -4,9 +4,8 @@ import { WuiTheme } from './types' import { getTexts } from './typography' export type ThemeToasts = { - default: CSSObject - top: CSSObject bottom: CSSObject + default: CSSObject growls: { default: CSSObject title: CSSObject @@ -14,6 +13,7 @@ export type ThemeToasts = { snackbar: { default: CSSObject } + top: CSSObject } export const getToasts = (theme: WuiTheme): ThemeToasts => { diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts index e2c78aa4b0..8598576ae2 100644 --- a/packages/Core/src/theme/toggles.ts +++ b/packages/Core/src/theme/toggles.ts @@ -9,9 +9,9 @@ const SM_LINE_HEIGHT_ADJUSTMENTS = '0.12rem ! important' type State = 'default' | 'checked' | 'disabled' | 'sizes' export type ThemeToggles = { - item: Record after: Record icon: Record<'sizes' | 'position', CSSObject> + item: Record } export const getToggles = (theme: WuiTheme): ThemeToggles => { diff --git a/packages/Core/src/theme/transitions.ts b/packages/Core/src/theme/transitions.ts index 15128ebace..c334eaa9fe 100644 --- a/packages/Core/src/theme/transitions.ts +++ b/packages/Core/src/theme/transitions.ts @@ -13,9 +13,9 @@ export const timingFunction: ThemeTimingFunction = { } export type ThemeTransitions = { - slow: CSSObject['transition'] - medium: CSSObject['transition'] fast: CSSObject['transition'] + medium: CSSObject['transition'] + slow: CSSObject['transition'] } export const transitions: ThemeTransitions = { diff --git a/packages/Core/src/theme/types.ts b/packages/Core/src/theme/types.ts index 050f3cf76d..0a029fab74 100644 --- a/packages/Core/src/theme/types.ts +++ b/packages/Core/src/theme/types.ts @@ -79,69 +79,68 @@ type XStyledTheme = Omit type StyledComponentsTheme = Omit export interface WuiTheme extends XStyledTheme, StyledComponentsTheme { - transformers: { - px: (value: CSSScalar) => CSSScalar - border: (value: CSSScalar) => CSSScalar - } - toEm: (int: number) => string - toRem: (int?: number) => string - toPx: (int?: number) => string - colors: ThemeColors - underline: ThemeUnderline + accordions: ThemeAccordions + alerts: ThemeAlerts + avatars: ThemeAvatars borderWidths: ThemeBorderWidths + breadcrumbs: ThemeBreadcrumbs + buttons: ThemeButtons + cards: ThemeCards + checkboxes: ThemeCheckboxes + colors: ThemeColors + dateTimePickerCommon: ThemeDateTimePickerCommon + defaultCards: ThemeDefaultCards + defaultFields: ThemeDefaultFields + defaultLetterSpacing: string + defaultLineHeight: number + drawers: ThemeDrawers + dropdownMenu: ThemeDropdownMenu + filedrops: ThemeFiledrops + focus: ThemeFocus fontFaces: ThemeFontFaces - fontsUrl: ThemeFontsUrl fontSizes: ThemeFontSizes - defaultLineHeight: number - defaultLetterSpacing: string - lineHeights: ThemeLineHeights fontWeights: ThemeFontWeights - letterSpacings: ThemeLetterSpacings fonts: ThemeFonts - screens: ThemeScreens - space: ThemeSpace - inset: ThemeSpace + fontsUrl: ThemeFontsUrl + hints: ThemeHints icons: ThemeIcons + inset: ThemeSpace + labels: ThemeLabels + letterSpacings: ThemeLetterSpacings + lineHeights: ThemeLineHeights + links: ThemeLinks + loaders: ThemeLoaders + modals: ThemeModals + paginations: ThemePaginations + popovers: ThemePopovers radii: ThemeRadii - transitions: ThemeTransitions - timingFunction: ThemeTimingFunction - shadows: ThemeShadows + radioTabs: ThemeRadioTabs + radios: ThemeRadios + screens: ThemeScreens selection: ThemeSelection - focus: ThemeFocus - defaultCards: ThemeDefaultCards - textsFontWeights: ThemeTextsFontWeights - textsFontFamily: ThemeTextsFontFamily - textsTextTransform: ThemeTextsTextTransform - alerts: ThemeAlerts - avatars: ThemeAvatars - buttons: ThemeButtons - breadcrumbs: ThemeBreadcrumbs - toasts: ThemeToasts - paginations: ThemePaginations + shadows: ThemeShadows + sizes: ThemeSizes + space: ThemeSpace + swipers: ThemeSwipers + tables: ThemeTables tabs: ThemeTabs tags: ThemeTags + textareas: ThemeTextareas texts: ThemeTexts - tooltips: CSSObject - links: ThemeLinks - dropdownMenu: ThemeDropdownMenu - tables: ThemeTables - cards: ThemeCards - modals: ThemeModals - drawers: ThemeDrawers - loaders: ThemeLoaders - accordions: ThemeAccordions - swipers: ThemeSwipers - labels: ThemeLabels - popovers: ThemePopovers - sizes: ThemeSizes - // fields - defaultFields: ThemeDefaultFields - hints: ThemeHints - checkboxes: ThemeCheckboxes + textsFontFamily: ThemeTextsFontFamily + textsFontWeights: ThemeTextsFontWeights + textsTextTransform: ThemeTextsTextTransform + timingFunction: ThemeTimingFunction + toEm: (int: number) => string + toPx: (int?: number) => string + toRem: (int?: number) => string + toasts: ThemeToasts toggles: ThemeToggles - dateTimePickerCommon: ThemeDateTimePickerCommon - textareas: ThemeTextareas - filedrops: ThemeFiledrops - radios: ThemeRadios - radioTabs: ThemeRadioTabs + tooltips: CSSObject + transformers: { + border: (value: CSSScalar) => CSSScalar + px: (value: CSSScalar) => CSSScalar + } + transitions: ThemeTransitions + underline: ThemeUnderline } diff --git a/packages/Core/src/theme/typography.ts b/packages/Core/src/theme/typography.ts index a944b4ae15..97d6cf8e7a 100644 --- a/packages/Core/src/theme/typography.ts +++ b/packages/Core/src/theme/typography.ts @@ -4,6 +4,7 @@ import { WuiTheme } from './types' import { Options } from './core' export type ThemeFontSizes = { + [key: number]: string h0: string h1: string h2: string @@ -14,10 +15,9 @@ export type ThemeFontSizes = { lg: string md: string sm: string - xs: string 'subtitle-md': string 'subtitle-sm': string - [key: number]: string + xs: string } export const getFontSizes = (unit: string, theme: WuiTheme): ThemeFontSizes => { @@ -35,14 +35,14 @@ export const getFontSizes = (unit: string, theme: WuiTheme): ThemeFontSizes => { lg: convert(18), md: convert(16), sm: convert(14), - xs: convert(12), 'subtitle-md': convert(13), 'subtitle-sm': convert(11), + xs: convert(12), } } export type ThemeLineHeights = { - html: number | string + [key: number]: number | string h0: number | string h1: number | string h2: number | string @@ -50,13 +50,13 @@ export type ThemeLineHeights = { h4: number | string h5: number | string h6: number | string + html: number | string lg: number | string md: number | string sm: number | string - xs: number | string 'subtitle-md': number | string 'subtitle-sm': number | string - [key: number]: number | string + xs: number | string } export const getLineHeights = ({ @@ -85,10 +85,10 @@ export const getLineHeights = ({ } export type ThemeFontWeights = { - regular: number - medium: number - bold: number [key: string]: number + bold: number + medium: number + regular: number } export const fontWeights: ThemeFontWeights = { @@ -98,7 +98,7 @@ export const fontWeights: ThemeFontWeights = { } export type ThemeLetterSpacings = { - html: string + [key: string]: string h0: string h1: string h2: string @@ -106,13 +106,13 @@ export type ThemeLetterSpacings = { h4: string h5: string h6: string + html: string lg: string md: string sm: string - xs: string 'subtitle-md': string 'subtitle-sm': string - [key: string]: string + xs: string } export const getLetterSpacings = ({ @@ -141,6 +141,7 @@ export const getLetterSpacings = ({ } export type ThemeTextsFontWeights = { + [key: string]: number h0: number h1: number h2: number @@ -151,10 +152,9 @@ export type ThemeTextsFontWeights = { lg: number md: number sm: number - xs: number 'subtitle-md': number 'subtitle-sm': number - [key: string]: number + xs: number } export const getTextsFontWeights = (theme: WuiTheme): ThemeTextsFontWeights => { @@ -171,13 +171,14 @@ export const getTextsFontWeights = (theme: WuiTheme): ThemeTextsFontWeights => { lg: fontWeights.regular, md: fontWeights.regular, sm: fontWeights.regular, - xs: fontWeights.regular, 'subtitle-md': fontWeights.bold, 'subtitle-sm': fontWeights.medium, + xs: fontWeights.regular, } } export type ThemeTextsFontFamily = { + [key: string]: string h0: string h1: string h2: string @@ -187,7 +188,6 @@ export type ThemeTextsFontFamily = { h6: string 'subtitle-md': string 'subtitle-sm': string - [key: string]: string } export const getTextsFontFamily = (theme: WuiTheme): ThemeTextsFontFamily => { @@ -207,9 +207,9 @@ export const getTextsFontFamily = (theme: WuiTheme): ThemeTextsFontFamily => { } export type ThemeTextsTextTransform = { + [key: string]: string 'subtitle-md': string 'subtitle-sm': string - [key: string]: string } export const getTextsTextTransform = (): ThemeTextsTextTransform => { @@ -220,6 +220,7 @@ export const getTextsTextTransform = (): ThemeTextsTextTransform => { } export type ThemeTextsFontColors = { + [key: number]: string h0: string h1: string h2: string @@ -227,7 +228,6 @@ export type ThemeTextsFontColors = { h4: string h5: string h6: string - [key: number]: string } export const getTextFontColors = (theme: WuiTheme): ThemeTextsFontColors => { @@ -248,11 +248,11 @@ export type ThemeTexts = { [key: string]: Partial<{ color: CSSObject['color'] fontFamily: CSSObject['fontFamily'] - fontWeight: CSSObject['fontWeight'] fontSize: CSSObject['fontSize'] + fontWeight: CSSObject['fontWeight'] + letterSpacing: CSSObject['letterSpacing'] lineHeight: CSSObject['lineHeight'] textTransform: CSSObject['textTransform'] - letterSpacing: CSSObject['letterSpacing'] }> } @@ -284,9 +284,9 @@ export const getTexts = (theme: WuiTheme): ThemeTexts => { } export type ThemeFonts = { - texts: string headings: string icons: string + texts: string } export const getFonts = ( diff --git a/packages/Core/src/theme/underline.ts b/packages/Core/src/theme/underline.ts index d0c87184d6..0acf619e4e 100644 --- a/packages/Core/src/theme/underline.ts +++ b/packages/Core/src/theme/underline.ts @@ -14,7 +14,10 @@ export const getUnderline = ({ colors }: { colors: ThemeColors }): ThemeUnderlin background-repeat: no-repeat; background-size: 100% 50%; background-position-y: calc(200% - 2px); - transition: background-position-y 250ms, background-size 250ms, color 250ms; + transition: + background-position-y 250ms, + background-size 250ms, + color 250ms; `, hover: css` opacity: 1; diff --git a/packages/Core/src/utils/font.ts b/packages/Core/src/utils/font.ts index 185cf9bb78..e962943dad 100644 --- a/packages/Core/src/utils/font.ts +++ b/packages/Core/src/utils/font.ts @@ -3,13 +3,13 @@ import { css } from '@xstyled/styled-components' import { WuiTheme } from '../theme/types' type FontVariation = { - url: string display?: FontDisplay - weight?: string - style?: string - isVariable?: boolean extensions?: string[] + isVariable?: boolean + style?: string unicodeRange?: string + url: string + weight?: string } type Font = { diff --git a/packages/DatePicker/src/index.tsx b/packages/DatePicker/src/index.tsx index d39a969f1e..14b26c632d 100644 --- a/packages/DatePicker/src/index.tsx +++ b/packages/DatePicker/src/index.tsx @@ -15,14 +15,14 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import { ReactDatePickerProps } from 'react-datepicker' export interface DatePickerOptions { - onChange?: (date?: Date) => void onBlur?: CustomInputOptions['handleBlur'] + onChange?: (date?: Date) => void onFocus?: CustomInputOptions['handleFocus'] - useWeekdaysShort?: boolean placeholder?: ReactDatePickerProps['placeholderText'] preventVirtualKeyboard?: boolean - value: string | Date transparent?: boolean + useWeekdaysShort?: boolean + value: string | Date } export type DatePickerProps = CreateWuiProps< @@ -44,19 +44,19 @@ export const DatePicker = forwardRef<'input', DatePickerProps>( endYear = DEFAULT_DATE.getFullYear(), icon, iconPlacement = 'left', - showMonthYearPicker, locale, onBlur, onChange, onFocus, placeholder, - preventVirtualKeyboard = false, popperProps, + preventVirtualKeyboard = false, + showMonthYearPicker, size = 'md', startYear = 1900, + transparent, useWeekdaysShort = true, value = DEFAULT_DATE, - transparent, ...rest }, ref diff --git a/packages/DateTimePicker/src/index.tsx b/packages/DateTimePicker/src/index.tsx index c6513c07c4..6f8cd6095b 100644 --- a/packages/DateTimePicker/src/index.tsx +++ b/packages/DateTimePicker/src/index.tsx @@ -21,8 +21,8 @@ export const DateTimePicker = forwardRef<'input', DateTimePickerProps>( locale, onChange, size = 'md', - value = DEFAULT_DATE, transparent, + value = DEFAULT_DATE, }, ref ) => { diff --git a/packages/Drawer/src/index.tsx b/packages/Drawer/src/index.tsx index 6bd9c17de3..3775610838 100644 --- a/packages/Drawer/src/index.tsx +++ b/packages/Drawer/src/index.tsx @@ -79,7 +79,7 @@ export const DrawerBackdrop: React.FC = ({ return } -type TriggerProps = { store: Ariakit.DialogStore; children: React.ReactNode; as?: As } +type TriggerProps = { as?: As; children: React.ReactNode; store: Ariakit.DialogStore } export const Trigger = forwardRef<'button', TriggerProps>(({ as: As, store, ...rest }, ref) => { return ( diff --git a/packages/DropdownMenu/src/Item.styled.ts b/packages/DropdownMenu/src/Item.styled.ts index c894443dc1..abba7a8247 100644 --- a/packages/DropdownMenu/src/Item.styled.ts +++ b/packages/DropdownMenu/src/Item.styled.ts @@ -16,5 +16,5 @@ export const Item = styled.button` outline: none !important; /* important for firefox */ } - ${system} + ${system}; ` diff --git a/packages/DropdownMenu/src/index.tsx b/packages/DropdownMenu/src/index.tsx index 7511e3b7ad..af3d73ea79 100644 --- a/packages/DropdownMenu/src/index.tsx +++ b/packages/DropdownMenu/src/index.tsx @@ -10,16 +10,16 @@ import { Separator } from './Separator' import * as S from './styles' export interface DropdownMenuOptions extends Omit { - /** add custom props from styled system on DropdownMenu inner */ - innerProps?: WuiProps /** default 4px (space.xs) */ gutter?: keyof WuiTheme['space'] | number + /** add custom props from styled system on DropdownMenu inner */ + innerProps?: WuiProps } export type DropdownMenuProps = CreateWuiProps<'div', DropdownMenuOptions> const DropdownMenuComponent = forwardRef<'div', DropdownMenuProps>( - ({ children, dataTestId, innerProps = {}, store, gutter = 'xs', ...rest }, ref) => { + ({ children, dataTestId, gutter = 'xs', innerProps = {}, store, ...rest }, ref) => { const theme = useTheme() const arrowElement = store.useState('arrowElement') diff --git a/packages/EmojiPicker/src/List.tsx b/packages/EmojiPicker/src/List.tsx index 87589e016e..076c2647f2 100644 --- a/packages/EmojiPicker/src/List.tsx +++ b/packages/EmojiPicker/src/List.tsx @@ -22,9 +22,9 @@ import { } from './utils' export interface Emoji { - name: string alias: string category: string + name: string url?: string } @@ -277,12 +277,12 @@ export const List: React.FC = ({ } interface EmojiRowData { - rows: InternalEmoji[][] - currentRowIndex: number currentColIndex: number + currentRowIndex: number isOpen: boolean onClick: (alias: string) => void onMouseMove: (emoji: InternalEmoji) => void + rows: InternalEmoji[][] } type EmojiRowProps = ListChildComponentProps diff --git a/packages/EmojiPicker/src/index.tsx b/packages/EmojiPicker/src/index.tsx index 402df64418..ca5bac63b1 100644 --- a/packages/EmojiPicker/src/index.tsx +++ b/packages/EmojiPicker/src/index.tsx @@ -22,9 +22,9 @@ export interface EmojiPickerOptions { inputSearchPlaceholder?: string onChange?: (value: string) => void popoverAriaLabel?: string + store: UseEmojiPicker tabListAriaLabel?: string value: string | null - store: UseEmojiPicker } export type EmojiPickerProps = CreateWuiProps<'div', EmojiPickerOptions> @@ -38,9 +38,9 @@ const EmojiPickerComponent = forwardRef<'div', EmojiPickerProps>( inputSearchPlaceholder = 'Search an emoji', onChange, popoverAriaLabel = 'Emoji picker', + store, tabListAriaLabel = 'Emoji picker tabs', value, - store, }, ref ) => { diff --git a/packages/EmojiPicker/src/styles.ts b/packages/EmojiPicker/src/styles.ts index 11e3dcc0db..e3e58f7df1 100644 --- a/packages/EmojiPicker/src/styles.ts +++ b/packages/EmojiPicker/src/styles.ts @@ -1,8 +1,12 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck + import styled, { system, th } from '@xstyled/styled-components' import { Tab } from '@welcome-ui/tabs' import * as WUIPopover from '@welcome-ui/popover' import { Box } from '@welcome-ui/box' +// this component is imported by WH but not used, could be deprecated export const Popover = styled(WUIPopover.Popover)` background-color: ${th('defaultCards.backgroundColor')}; border-width: sm; @@ -14,7 +18,6 @@ export const Popover = styled(WUIPopover.Popover)` /** we change the arrow item color from popover component */ > div > div > svg { color: ${th('defaultCards.backgroundColor')}; - #stroke { color: ${th('defaultCards.borderColor')}; } @@ -66,4 +69,5 @@ export const Tooltip = styled(Box)` &:empty { display: none; } + ${system}; ` diff --git a/packages/EmojiPicker/src/utils.ts b/packages/EmojiPicker/src/utils.ts index 62cfc921fb..6f460568ed 100644 --- a/packages/EmojiPicker/src/utils.ts +++ b/packages/EmojiPicker/src/utils.ts @@ -2,7 +2,7 @@ import groupBy from 'lodash.groupby' import { Emoji } from './List' -export type InternalEmoji = Emoji & { rowIndex: number; colIndex: number } +export type InternalEmoji = Emoji & { colIndex: number; rowIndex: number } // We need to set the width & height of the list for react-window export const NB_EMOJIS_PER_ROW = 8 diff --git a/packages/Field/src/index.tsx b/packages/Field/src/index.tsx index 7479182474..46d6655184 100644 --- a/packages/Field/src/index.tsx +++ b/packages/Field/src/index.tsx @@ -13,13 +13,13 @@ export interface FieldOptions { disabled?: boolean disabledIcon?: JSX.Element error?: string | JSX.Element - label?: string | JSX.Element hint?: string | JSX.Element + info?: string | JSX.Element + label?: string | JSX.Element required?: boolean - warning?: string | JSX.Element success?: string | JSX.Element - info?: string | JSX.Element transparent?: boolean + warning?: string | JSX.Element } export type FieldProps = CreateWuiProps<'div', FieldOptions> diff --git a/packages/Field/src/utils.ts b/packages/Field/src/utils.ts index cb9ea8df0d..d061420f71 100644 --- a/packages/Field/src/utils.ts +++ b/packages/Field/src/utils.ts @@ -11,9 +11,9 @@ export const getBaseType = (type: string): string => TYPES[type] || type type VariantProps = { error?: string | JSX.Element - warning?: string | JSX.Element - success?: string | JSX.Element info?: string | JSX.Element + success?: string | JSX.Element + warning?: string | JSX.Element } export type VariantReturn = 'error' | 'warning' | 'success' | 'info' diff --git a/packages/FieldGroup/src/styles.ts b/packages/FieldGroup/src/styles.ts index 8d0724df22..4b90e91d97 100644 --- a/packages/FieldGroup/src/styles.ts +++ b/packages/FieldGroup/src/styles.ts @@ -1,7 +1,7 @@ import styled, { system, th } from '@xstyled/styled-components' import { shouldForwardProp } from '@welcome-ui/system' -export const FieldGroup = styled('fieldset').withConfig({ shouldForwardProp })` +export const FieldGroup = styled.fieldsetBox.withConfig({ shouldForwardProp })` width: 100%; min-width: 0; min-height: 0; diff --git a/packages/FileDrop/src/index.tsx b/packages/FileDrop/src/index.tsx index b67381297c..d7c6fc00e4 100644 --- a/packages/FileDrop/src/index.tsx +++ b/packages/FileDrop/src/index.tsx @@ -60,11 +60,11 @@ export interface FileDropOptions { accept?: Accept children?: (state: ChildrenType) => JSX.Element fileName?: string - isClearable?: boolean - isEditable?: boolean forceFileType?: ForceFileType handleAddFile?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void handleRemoveFile?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void + isClearable?: boolean + isEditable?: boolean name?: string onBlur?: () => void onChange?: (event: DropEvent | React.ChangeEvent | CreateEvent) => void diff --git a/packages/FileUpload/src/index.tsx b/packages/FileUpload/src/index.tsx index f7bc9c34a9..1463bf167b 100644 --- a/packages/FileUpload/src/index.tsx +++ b/packages/FileUpload/src/index.tsx @@ -12,8 +12,8 @@ const DEFAULT_MAX_FILE_SIZE = 2000000 const DEFAULT_FILE_TYPES = '*/*' export type FileWithPreview = File & { - preview?: string name?: string + preview?: string } export type FileWithPreviewType = FileWithPreview | string export type HandleRemoveType = (file: FileWithPreviewType) => void @@ -21,18 +21,18 @@ export type HandleRemoveType = (file: FileWithPreviewType) => void export interface FileUploadOptions { /** Pass a comma-separated string of file types e.g. "image/png" or "image/png,image/jpeg" */ accept?: string - maxSize?: number - handleAddFile?: (files: FileWithPreviewType[] | FileWithPreviewType) => void - handleRemoveFile?: HandleRemoveType - preview?: typeof DefaultPreview - onBlur?: () => void - onChange?: (event: ReturnType) => void children?: (props: { - openFile: () => void disabled: boolean files: FileWithPreviewType[] onRemoveFile: HandleRemoveType + openFile: () => void }) => React.ReactNode + handleAddFile?: (files: FileWithPreviewType[] | FileWithPreviewType) => void + handleRemoveFile?: HandleRemoveType + maxSize?: number + onBlur?: () => void + onChange?: (event: ReturnType) => void + preview?: typeof DefaultPreview } export type FileUploadProps = CreateWuiProps<'input', FileUploadOptions> @@ -55,17 +55,17 @@ export const FileUpload = forwardRef<'input', FileUploadProps>( disabled, // eslint-disable-next-line @typescript-eslint/no-unused-vars draggable, + handleAddFile, + handleRemoveFile, maxSize = DEFAULT_MAX_FILE_SIZE, multiple, name, - handleAddFile, onBlur, onChange, // eslint-disable-next-line @typescript-eslint/no-unused-vars onError, - handleRemoveFile, - value = [], preview: Preview = DefaultPreview, + value = [], ...rest }, ref diff --git a/packages/Flex/src/index.tsx b/packages/Flex/src/index.tsx index b0ea226a55..a22b3ef3a1 100644 --- a/packages/Flex/src/index.tsx +++ b/packages/Flex/src/index.tsx @@ -5,18 +5,18 @@ import { CreateWuiProps, forwardRef, WuiProps } from '@welcome-ui/system' export interface FlexOptions { /** same as alignItems */ align?: WuiProps['alignItems'] - /** same as justifyContent */ - justify?: WuiProps['justifyContent'] - /** same as flexWrap */ - wrap?: WuiProps['flexWrap'] - /** same as flexDirection */ - direction?: WuiProps['flexDirection'] /** same as flexBasis */ basis?: WuiProps['flexBasis'] + /** same as flexDirection */ + direction?: WuiProps['flexDirection'] /** same as flexGrow */ grow?: WuiProps['flexGrow'] + /** same as justifyContent */ + justify?: WuiProps['justifyContent'] /** same as flexShrink */ shrink?: WuiProps['flexShrink'] + /** same as flexWrap */ + wrap?: WuiProps['flexWrap'] } export type FlexProps = CreateWuiProps<'div', FlexOptions> diff --git a/packages/Icon/src/index.tsx b/packages/Icon/src/index.tsx index 2b102182b9..9ffa4f81f9 100644 --- a/packages/Icon/src/index.tsx +++ b/packages/Icon/src/index.tsx @@ -4,12 +4,12 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import * as S from './styles' type IconContent = { - width?: number - height?: number block?: string - stroked?: boolean + height?: number isFlag?: boolean + stroked?: boolean viewBox?: string + width?: number } type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string @@ -17,9 +17,9 @@ type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string export interface IconOptions { content?: IconContent name?: string + onClick?: (event: React.MouseEvent) => void size?: Size title?: string - onClick?: (event: React.MouseEvent) => void } export type IconProps = CreateWuiProps diff --git a/packages/IconFont/src/styles.ts b/packages/IconFont/src/styles.ts index d5e1e80205..46153d8b35 100644 --- a/packages/IconFont/src/styles.ts +++ b/packages/IconFont/src/styles.ts @@ -16,10 +16,10 @@ function getIconContentByName(name: StyledIconProps['name']) { return null } -// stylelint-disable font-family-no-missing-generic-family-keyword export const Icon = styled.i( ({ name, size = 'md' }) => css` display: inline-block; + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: icons; font-size: ${th(`icons.${size}`)}; ${system}; diff --git a/packages/InputText/src/index.tsx b/packages/InputText/src/index.tsx index 91b8addea7..6b6b0846cd 100644 --- a/packages/InputText/src/index.tsx +++ b/packages/InputText/src/index.tsx @@ -18,9 +18,9 @@ export interface InputTextOptions extends DefaultFieldStylesProps { onFocus?: (event: React.FocusEvent) => void onKeyDown?: (event: React.KeyboardEvent) => void placeholder?: string + transparent?: boolean type?: string value?: string - transparent?: boolean } export type InputTextProps = CreateWuiProps<'input', InputTextOptions> diff --git a/packages/Label/src/index.tsx b/packages/Label/src/index.tsx index 7125409c83..2c720fe1e3 100644 --- a/packages/Label/src/index.tsx +++ b/packages/Label/src/index.tsx @@ -10,11 +10,11 @@ export interface LabelOptions { checkableField?: boolean disabled?: boolean disabledIcon?: JSX.Element + htmlFor?: string icon?: JSX.Element - variant?: Variant required?: boolean + variant?: Variant withDisabledIcon?: boolean - htmlFor?: string } export type LabelProps = CreateWuiProps<'label', LabelOptions> diff --git a/packages/Link/src/index.tsx b/packages/Link/src/index.tsx index 68252e1a5b..89f0d32706 100644 --- a/packages/Link/src/index.tsx +++ b/packages/Link/src/index.tsx @@ -9,9 +9,9 @@ import { shouldWrapWithText } from './utils' export type Variant = 'primary' | 'secondary' export interface LinkOptions { - variant?: Variant - isExternal?: boolean disabled?: boolean + isExternal?: boolean + variant?: Variant } export type LinkProps = CreateWuiProps<'a', LinkOptions & UniversalLinkOptions> diff --git a/packages/Link/src/styles.ts b/packages/Link/src/styles.ts index 180e73ac1d..95d4c7ec7d 100644 --- a/packages/Link/src/styles.ts +++ b/packages/Link/src/styles.ts @@ -5,8 +5,8 @@ import { shouldForwardProp } from '@welcome-ui/system' import { Variant } from './index' export const Link = styled(UniversalLink).withConfig({ shouldForwardProp })<{ - variant: Variant isExternal?: boolean + variant: Variant }>( ({ isExternal, variant = 'primary' }) => css` display: inline-flex; diff --git a/packages/Loader/docs/properties.json b/packages/Loader/docs/properties.json index 22c80c5498..0f1b69fbdb 100644 --- a/packages/Loader/docs/properties.json +++ b/packages/Loader/docs/properties.json @@ -17,7 +17,565 @@ ], "required": false, "type": { - "name": "string" + "name": "enum", + "raw": "Color", + "value": [ + { + "value": "string & {}" + }, + { + "value": "\"-moz-initial\"" + }, + { + "value": "\"inherit\"" + }, + { + "value": "\"initial\"" + }, + { + "value": "\"revert\"" + }, + { + "value": "\"revert-layer\"" + }, + { + "value": "\"unset\"" + }, + { + "value": "\"aliceblue\"" + }, + { + "value": "\"antiquewhite\"" + }, + { + "value": "\"aqua\"" + }, + { + "value": "\"aquamarine\"" + }, + { + "value": "\"azure\"" + }, + { + "value": "\"beige\"" + }, + { + "value": "\"bisque\"" + }, + { + "value": "\"black\"" + }, + { + "value": "\"blanchedalmond\"" + }, + { + "value": "\"blue\"" + }, + { + "value": "\"blueviolet\"" + }, + { + "value": "\"brown\"" + }, + { + "value": "\"burlywood\"" + }, + { + "value": "\"cadetblue\"" + }, + { + "value": "\"chartreuse\"" + }, + { + "value": "\"chocolate\"" + }, + { + "value": "\"coral\"" + }, + { + "value": "\"cornflowerblue\"" + }, + { + "value": "\"cornsilk\"" + }, + { + "value": "\"crimson\"" + }, + { + "value": "\"cyan\"" + }, + { + "value": "\"darkblue\"" + }, + { + "value": "\"darkcyan\"" + }, + { + "value": "\"darkgoldenrod\"" + }, + { + "value": "\"darkgray\"" + }, + { + "value": "\"darkgreen\"" + }, + { + "value": "\"darkgrey\"" + }, + { + "value": "\"darkkhaki\"" + }, + { + "value": "\"darkmagenta\"" + }, + { + "value": "\"darkolivegreen\"" + }, + { + "value": "\"darkorange\"" + }, + { + "value": "\"darkorchid\"" + }, + { + "value": "\"darkred\"" + }, + { + "value": "\"darksalmon\"" + }, + { + "value": "\"darkseagreen\"" + }, + { + "value": "\"darkslateblue\"" + }, + { + "value": "\"darkslategray\"" + }, + { + "value": "\"darkslategrey\"" + }, + { + "value": "\"darkturquoise\"" + }, + { + "value": "\"darkviolet\"" + }, + { + "value": "\"deeppink\"" + }, + { + "value": "\"deepskyblue\"" + }, + { + "value": "\"dimgray\"" + }, + { + "value": "\"dimgrey\"" + }, + { + "value": "\"dodgerblue\"" + }, + { + "value": "\"firebrick\"" + }, + { + "value": "\"floralwhite\"" + }, + { + "value": "\"forestgreen\"" + }, + { + "value": "\"fuchsia\"" + }, + { + "value": "\"gainsboro\"" + }, + { + "value": "\"ghostwhite\"" + }, + { + "value": "\"gold\"" + }, + { + "value": "\"goldenrod\"" + }, + { + "value": "\"gray\"" + }, + { + "value": "\"green\"" + }, + { + "value": "\"greenyellow\"" + }, + { + "value": "\"grey\"" + }, + { + "value": "\"honeydew\"" + }, + { + "value": "\"hotpink\"" + }, + { + "value": "\"indianred\"" + }, + { + "value": "\"indigo\"" + }, + { + "value": "\"ivory\"" + }, + { + "value": "\"khaki\"" + }, + { + "value": "\"lavender\"" + }, + { + "value": "\"lavenderblush\"" + }, + { + "value": "\"lawngreen\"" + }, + { + "value": "\"lemonchiffon\"" + }, + { + "value": "\"lightblue\"" + }, + { + "value": "\"lightcoral\"" + }, + { + "value": "\"lightcyan\"" + }, + { + "value": "\"lightgoldenrodyellow\"" + }, + { + "value": "\"lightgray\"" + }, + { + "value": "\"lightgreen\"" + }, + { + "value": "\"lightgrey\"" + }, + { + "value": "\"lightpink\"" + }, + { + "value": "\"lightsalmon\"" + }, + { + "value": "\"lightseagreen\"" + }, + { + "value": "\"lightskyblue\"" + }, + { + "value": "\"lightslategray\"" + }, + { + "value": "\"lightslategrey\"" + }, + { + "value": "\"lightsteelblue\"" + }, + { + "value": "\"lightyellow\"" + }, + { + "value": "\"lime\"" + }, + { + "value": "\"limegreen\"" + }, + { + "value": "\"linen\"" + }, + { + "value": "\"magenta\"" + }, + { + "value": "\"maroon\"" + }, + { + "value": "\"mediumaquamarine\"" + }, + { + "value": "\"mediumblue\"" + }, + { + "value": "\"mediumorchid\"" + }, + { + "value": "\"mediumpurple\"" + }, + { + "value": "\"mediumseagreen\"" + }, + { + "value": "\"mediumslateblue\"" + }, + { + "value": "\"mediumspringgreen\"" + }, + { + "value": "\"mediumturquoise\"" + }, + { + "value": "\"mediumvioletred\"" + }, + { + "value": "\"midnightblue\"" + }, + { + "value": "\"mintcream\"" + }, + { + "value": "\"mistyrose\"" + }, + { + "value": "\"moccasin\"" + }, + { + "value": "\"navajowhite\"" + }, + { + "value": "\"navy\"" + }, + { + "value": "\"oldlace\"" + }, + { + "value": "\"olive\"" + }, + { + "value": "\"olivedrab\"" + }, + { + "value": "\"orange\"" + }, + { + "value": "\"orangered\"" + }, + { + "value": "\"orchid\"" + }, + { + "value": "\"palegoldenrod\"" + }, + { + "value": "\"palegreen\"" + }, + { + "value": "\"paleturquoise\"" + }, + { + "value": "\"palevioletred\"" + }, + { + "value": "\"papayawhip\"" + }, + { + "value": "\"peachpuff\"" + }, + { + "value": "\"peru\"" + }, + { + "value": "\"pink\"" + }, + { + "value": "\"plum\"" + }, + { + "value": "\"powderblue\"" + }, + { + "value": "\"purple\"" + }, + { + "value": "\"rebeccapurple\"" + }, + { + "value": "\"red\"" + }, + { + "value": "\"rosybrown\"" + }, + { + "value": "\"royalblue\"" + }, + { + "value": "\"saddlebrown\"" + }, + { + "value": "\"salmon\"" + }, + { + "value": "\"sandybrown\"" + }, + { + "value": "\"seagreen\"" + }, + { + "value": "\"seashell\"" + }, + { + "value": "\"sienna\"" + }, + { + "value": "\"silver\"" + }, + { + "value": "\"skyblue\"" + }, + { + "value": "\"slateblue\"" + }, + { + "value": "\"slategray\"" + }, + { + "value": "\"slategrey\"" + }, + { + "value": "\"snow\"" + }, + { + "value": "\"springgreen\"" + }, + { + "value": "\"steelblue\"" + }, + { + "value": "\"tan\"" + }, + { + "value": "\"teal\"" + }, + { + "value": "\"thistle\"" + }, + { + "value": "\"tomato\"" + }, + { + "value": "\"transparent\"" + }, + { + "value": "\"turquoise\"" + }, + { + "value": "\"violet\"" + }, + { + "value": "\"wheat\"" + }, + { + "value": "\"white\"" + }, + { + "value": "\"whitesmoke\"" + }, + { + "value": "\"yellow\"" + }, + { + "value": "\"yellowgreen\"" + }, + { + "value": "\"ActiveBorder\"" + }, + { + "value": "\"ActiveCaption\"" + }, + { + "value": "\"AppWorkspace\"" + }, + { + "value": "\"Background\"" + }, + { + "value": "\"ButtonFace\"" + }, + { + "value": "\"ButtonHighlight\"" + }, + { + "value": "\"ButtonShadow\"" + }, + { + "value": "\"ButtonText\"" + }, + { + "value": "\"CaptionText\"" + }, + { + "value": "\"GrayText\"" + }, + { + "value": "\"Highlight\"" + }, + { + "value": "\"HighlightText\"" + }, + { + "value": "\"InactiveBorder\"" + }, + { + "value": "\"InactiveCaption\"" + }, + { + "value": "\"InactiveCaptionText\"" + }, + { + "value": "\"InfoBackground\"" + }, + { + "value": "\"InfoText\"" + }, + { + "value": "\"Menu\"" + }, + { + "value": "\"MenuText\"" + }, + { + "value": "\"Scrollbar\"" + }, + { + "value": "\"ThreeDDarkShadow\"" + }, + { + "value": "\"ThreeDFace\"" + }, + { + "value": "\"ThreeDHighlight\"" + }, + { + "value": "\"ThreeDLightShadow\"" + }, + { + "value": "\"ThreeDShadow\"" + }, + { + "value": "\"Window\"" + }, + { + "value": "\"WindowFrame\"" + }, + { + "value": "\"WindowText\"" + }, + { + "value": "\"currentcolor\"" + } + ] } }, "size": { diff --git a/packages/Loader/src/index.tsx b/packages/Loader/src/index.tsx index ec4bee1f7b..d453de66e9 100644 --- a/packages/Loader/src/index.tsx +++ b/packages/Loader/src/index.tsx @@ -1,13 +1,14 @@ import React from 'react' import { Box } from '@welcome-ui/box' import { CreateWuiProps, ExtraSize, forwardRef } from '@welcome-ui/system' +import { CSSObject } from '@xstyled/styled-components' import * as S from './styles' export type Size = 'xs' | 'sm' | 'md' | 'lg' | ExtraSize export interface LoaderOptions { - color?: string + color?: CSSObject['color'] /** Predefined size xs, sm, md, lg or custom size */ size?: Size } diff --git a/packages/MarkdownEditor/src/constants.ts b/packages/MarkdownEditor/src/constants.ts index ba40809628..8649a744a7 100644 --- a/packages/MarkdownEditor/src/constants.ts +++ b/packages/MarkdownEditor/src/constants.ts @@ -2,10 +2,10 @@ import React from 'react' export type Action = string | (() => void) export type DefaultToolbarItem = { + action?: Action + icon?: React.ReactElement | string name: string title?: string - icon?: React.ReactElement | string - action?: Action } export type DefaultToolbar = DefaultToolbarItem[] diff --git a/packages/MarkdownEditor/src/utils.ts b/packages/MarkdownEditor/src/utils.ts index bf2973c271..4d8ced612f 100644 --- a/packages/MarkdownEditor/src/utils.ts +++ b/packages/MarkdownEditor/src/utils.ts @@ -2,8 +2,8 @@ import { Doc, Editor } from 'codemirror' export interface CurrentToolsFromEditor { getCursor: Doc['getCursor'] - getTokenAt: Editor['getTokenAt'] getLine: Doc['getLine'] + getTokenAt: Editor['getTokenAt'] } // interface ToolsFrom interface CodeMirrorTypes { diff --git a/packages/Modal/docs/properties.json b/packages/Modal/docs/properties.json index 64870f9786..bdaa5666ea 100644 --- a/packages/Modal/docs/properties.json +++ b/packages/Modal/docs/properties.json @@ -328,7 +328,7 @@ ], "required": false, "type": { - "name": "{ title: string; subtitle: string; }" + "name": "{ subtitle: string; title: string; }" } } } diff --git a/packages/Modal/src/Assets/AssetWithTitle.tsx b/packages/Modal/src/Assets/AssetWithTitle.tsx index a52da3d42a..45111675d6 100644 --- a/packages/Modal/src/Assets/AssetWithTitle.tsx +++ b/packages/Modal/src/Assets/AssetWithTitle.tsx @@ -9,9 +9,9 @@ import * as S from './styles' type AssetWithTitleProps = { children: React.ReactNode + customContent?: JSX.Element | string subtitle?: JSX.Element | string title?: JSX.Element | string - customContent?: JSX.Element | string } const titleBlockMobile = '4rem' diff --git a/packages/Modal/src/Assets/styles.ts b/packages/Modal/src/Assets/styles.ts index ab3d90541c..a4e96ccd1a 100644 --- a/packages/Modal/src/Assets/styles.ts +++ b/packages/Modal/src/Assets/styles.ts @@ -14,7 +14,7 @@ const sizeOfElements = css` width: ${contentWidthDesktop}; } - // for big screens + /* for big screens */ @media (min-width: 1700px) { max-width: 1600; } @@ -46,7 +46,7 @@ export const Content = styled.divBox` max-width: ${contentWidthDesktop}; } - // for big screens + /* for big screens */ @media (min-width: 1700px) { max-width: 1600; } diff --git a/packages/Modal/src/Footer.tsx b/packages/Modal/src/Footer.tsx index 4c45847ba2..c3179a6604 100644 --- a/packages/Modal/src/Footer.tsx +++ b/packages/Modal/src/Footer.tsx @@ -7,8 +7,8 @@ import * as S from './styles' export interface FooterOptions { information?: { - title: string subtitle: string + title: string } } diff --git a/packages/Modal/src/Header.tsx b/packages/Modal/src/Header.tsx index 0e1ce97d80..b41b86665d 100644 --- a/packages/Modal/src/Header.tsx +++ b/packages/Modal/src/Header.tsx @@ -7,9 +7,9 @@ import * as S from './styles' import { Close } from './Close' export interface HeaderOptions { - title: string | JSX.Element - subtitle?: string | JSX.Element icon?: ReactElement + subtitle?: string | JSX.Element + title: string | JSX.Element } export type HeaderProps = HeaderOptions & Omit diff --git a/packages/Modal/src/index.tsx b/packages/Modal/src/index.tsx index 66965f7ce5..7d130d2a11 100644 --- a/packages/Modal/src/index.tsx +++ b/packages/Modal/src/index.tsx @@ -110,7 +110,7 @@ const Cover: React.FC = props => { ) } -type TriggerProps = { store: Ariakit.DialogStore; children: React.ReactNode; as?: As } +type TriggerProps = { as?: As; children: React.ReactNode; store: Ariakit.DialogStore } export const Trigger = forwardRef<'button', TriggerProps>(({ as: As, store, ...rest }, ref) => { return ( diff --git a/packages/Modal/src/styles.ts b/packages/Modal/src/styles.ts index 96ba1ac0d0..bbaa4965ad 100644 --- a/packages/Modal/src/styles.ts +++ b/packages/Modal/src/styles.ts @@ -50,7 +50,9 @@ export const Dialog = styled.divBox( max-width: 100%; overflow: auto; opacity: 0; - transition: opacity 250ms ease-in-out, margin-top 250ms ease-in-out; + transition: + opacity 250ms ease-in-out, + margin-top 250ms ease-in-out; &[data-enter] { opacity: 1; diff --git a/packages/Popover/src/styles.ts b/packages/Popover/src/styles.ts index e9c4c9e3ac..5f0909cb56 100644 --- a/packages/Popover/src/styles.ts +++ b/packages/Popover/src/styles.ts @@ -26,7 +26,7 @@ export const Popover = styled(Ariakit.Popover)<{ $withCloseButton: boolean }>( outline: none; opacity: 0; transition: opacity 150ms ease-in-out; - ${system} + ${system}; /* on open popover for animation */ &[data-enter] { @@ -43,9 +43,9 @@ export const Popover = styled(Ariakit.Popover)<{ $withCloseButton: boolean }>( ) export const PopoverTrigger = styled(Ariakit.PopoverDisclosure)` - ${system} + ${system}; ` export const PopoverHoverTrigger = styled(Ariakit.HovercardAnchor)` - ${system} + ${system}; ` diff --git a/packages/Radio/src/styles.ts b/packages/Radio/src/styles.ts index 946100ed2b..b4b24521e3 100644 --- a/packages/Radio/src/styles.ts +++ b/packages/Radio/src/styles.ts @@ -56,7 +56,7 @@ export const Label = styled(WUILabel)` max-width: 100%; /** we need to reset margin-bottom from Label component */ margin-bottom: 0 !important; - ${system} + ${system}; ` export const Input = styled.div` diff --git a/packages/RadioGroup/src/index.tsx b/packages/RadioGroup/src/index.tsx index d9a9f977e0..8d99e68bc2 100644 --- a/packages/RadioGroup/src/index.tsx +++ b/packages/RadioGroup/src/index.tsx @@ -7,17 +7,17 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system' import * as S from './styles' export type Option = { + hint?: string label: string | number value: string | number - hint?: string } export interface RadioGroupOptions { name: string + onChange?: (value: Option['value']) => void options: Option[] renderOption?: React.ElementType value?: string - onChange?: (value: Option['value']) => void } export type RadioGroupProps = CreateWuiProps< @@ -28,17 +28,17 @@ export type RadioGroupProps = CreateWuiProps< export const RadioGroup = forwardRef<'fieldset', RadioGroupProps>( ( { + dataTestId, flexDirection, - maxWidth, + id, label, + maxWidth, name, + onChange, options = [], renderOption: Component = Radio, required, - dataTestId, - onChange, value, - id, ...rest }, ref diff --git a/packages/RadioTab/src/styles.ts b/packages/RadioTab/src/styles.ts index b5e785f2f8..da9f7d6f75 100644 --- a/packages/RadioTab/src/styles.ts +++ b/packages/RadioTab/src/styles.ts @@ -42,9 +42,9 @@ const rowStyles = css` export const Label = styled.label< { checked?: boolean - flexDirection?: WuiProps['flexDirection'] disabled?: boolean disabledIcon?: React.ReactElement + flexDirection?: WuiProps['flexDirection'] } & DefaultFieldStylesProps >( ({ checked, flexDirection, size, variant }) => css` diff --git a/packages/Search/src/index.tsx b/packages/Search/src/index.tsx index 2ed7c40a92..abf0e6e84f 100644 --- a/packages/Search/src/index.tsx +++ b/packages/Search/src/index.tsx @@ -48,6 +48,7 @@ export const Search = forwardRef<'input', SearchProps>( autoFocus, dataTestId, disabled, + groupsEnabled, icon, id, itemToString, @@ -58,14 +59,13 @@ export const Search = forwardRef<'input', SearchProps>( onClick, onFocus, placeholder = 'Search…', + renderGroupHeader, renderItem, search, size = 'md', throttle = 500, value: selected = EMPTY_STRING, variant, - groupsEnabled, - renderGroupHeader, ...rest }, ref diff --git a/packages/Search/src/styles.ts b/packages/Search/src/styles.ts index 2bfe9915d3..f9b58242ce 100644 --- a/packages/Search/src/styles.ts +++ b/packages/Search/src/styles.ts @@ -72,7 +72,7 @@ export const Indicators = styled.div` display: flex; ` -export const DropDownIndicator = styled.button<{ size: SearchOptions['size']; isOpen?: boolean }>( +export const DropDownIndicator = styled.button<{ isOpen?: boolean; size: SearchOptions['size'] }>( ({ isOpen, size }) => css` position: relative; height: 100%; diff --git a/packages/Select/src/index.tsx b/packages/Select/src/index.tsx index 270b60f96a..f78bb928c5 100644 --- a/packages/Select/src/index.tsx +++ b/packages/Select/src/index.tsx @@ -31,10 +31,10 @@ import * as S from './styles' export type OptionValue = string | number export type Option = { + disabled?: boolean + icon?: React.ReactElement label: string value: OptionValue - icon?: React.ReactElement - disabled?: boolean } export type OptionGroup = { label: string; options: Option[] } export type OptionItem = Option | OptionGroup @@ -42,33 +42,33 @@ export type Options = Array