chore: bump wttj-config to v3 (#2556)

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": {

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 = <RightIcon />, title, store, dataTestId, ...rest }, ref) => {
+  ({ children, dataTestId, icon = <RightIcon />, store, title, ...rest }, ref) => {
     return (
       <S.Accordion data-testid={dataTestId} ref={ref} {...rest}>
         <S.Disclosure data-testid={dataTestId ? `${dataTestId}-title` : undefined} store={store}>

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 {

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>

packages/Alert/src/styles.ts

@@ -13,7 +13,7 @@ export const Alert = styled(Box)<AlertOptions>(
     ${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;

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>
 

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
 }

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>

packages/ButtonGroup/src/styles.ts

@@ -30,5 +30,5 @@ export const ButtonGroup = styled.div`
     }
   }
 
-  ${system}
+  ${system};
 `

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};
 `

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};
 `

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,

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");

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 => {

packages/Core/src/theme/alerts.ts

@@ -9,9 +9,9 @@ type Sizes = 'sm' | 'md'
 type AttributesState = CSSObject
 
 export type ThemeAlerts = {
-  sizes: Record<Sizes, { padding?: string }>
   default: CSSObject
-  title: Record<State, { color: string }>
+  sizes: Record<Sizes, { padding?: string }>
+  title: Record<State, { color: CSSObject['color'] }>
 } & Record<State, AttributesState>
 
 export const getAlerts = (theme: WuiTheme): ThemeAlerts => {

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
   }
 }
 

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 = {

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
 }
 

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 => {

packages/Core/src/theme/core.ts

@@ -73,14 +73,14 @@ export type ThemeFontsUrl =
   | string
 
 export type Options = {
+  [param: string]: unknown
   defaultFontFamily?: string
   defaultFontSize?: number
   defaultLetterSpacing?: string
   defaultLineHeight?: number
   fontsUrl?: ThemeFontsUrl
   headingFontFamily?: string
   iconFontFamily?: string
-  [param: string]: unknown
 }
 
 export const createTheme = (options: Options = {}): WuiTheme => {

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<Size, CSSObject>
-  iconPlacement: Record<Size, CSSObject>
   checkableField: {
     checked: CSSObject
     disabled: CSSObject
   }
+  checkablelabel: {
+    checked: CSSObject
+    default: CSSObject
+  }
+  default: CSSObject
   disabled: CSSObject
-  placeholder: CSSObject
+  fieldset: CSSObject
   focused: {
     default: CSSObject & ReturnType<ThemeFocus>
     error: CSSObject & ReturnType<ThemeFocus>
-    warning: CSSObject & ReturnType<ThemeFocus>
-    success: CSSObject & ReturnType<ThemeFocus>
     info: CSSObject & ReturnType<ThemeFocus>
+    success: CSSObject & ReturnType<ThemeFocus>
+    warning: CSSObject & ReturnType<ThemeFocus>
   }
-  checkablelabel: {
-    default: CSSObject
-    checked: CSSObject
-  }
+  iconPlacement: Record<Size, CSSObject>
+  placeholder: CSSObject
   select: {
     default: CSSObject
+    disabled: CSSObject
     existing: CSSObject
     highlighted: CSSObject
-    selectedAndHighlighted: CSSObject
     selected: CSSObject
-    disabled: CSSObject
+    selectedAndHighlighted: CSSObject
   }
-  fieldset: CSSObject
+  sizes: Record<Size, CSSObject>
 }
 
 export const getDefaultFields = (theme: WuiTheme): ThemeDefaultFields => {

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<Size, Record<'width', string>>
     vertical: Record<Size, Record<'height', string>>
   }
+  title: CSSObject
 }
 
 export const getDrawers = (theme: WuiTheme): ThemeDrawers => {

packages/Core/src/theme/filedrops.ts

@@ -4,9 +4,9 @@ import { WuiTheme } from './types'
 
 export type ThemeFiledrops = {
   default: CSSObject
+  disabled: CSSObject
   dragAccept: Record<string, unknown>
   dragReject: Record<string, unknown>
-  disabled: CSSObject
 }
 
 export const getFiledrops = (theme: WuiTheme): ThemeFiledrops => {

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 = {

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
 }