apply @typescript-eslint/member-delimiter-style

.eslintrc.js

@@ -7,14 +7,12 @@ module.exports = {
     files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
   }],
   rules: {
-    'block-spacing': ['error', 'always'],
-    'brace-style': ['error', '1tbs', { allowSingleLine: true }],
-    'comma-spacing': ['error', { before: false, after: true }],
-    'func-call-spacing': ['error', 'never'],
-    'semi-spacing': ['error', { before: false, after: true }],
-    'space-before-blocks': ['error', 'always'],
-    'space-before-function-paren': ['error', 'always'],
-    'space-before-function-paren': ['error', 'always'],
-    'space-in-parens': ['error', 'never'],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: { delimiter: 'none' },
+        singleline: { delimiter: 'comma', requireLast: false }
+      }
+    ],
   }
 }

design-system/packages/button/src/Button.tsx

@@ -10,19 +10,19 @@ import type { WeightKey, ToneKey, SizeKey } from './hooks/button'
 
 type ButtonProps = {
   /** The Button label content. */
-  children: ReactNode;
+  children: ReactNode
   /** Whether the Button should display as a block */
-  isBlock?: boolean;
+  isBlock?: boolean
   /** Whether the Button should be disabled */
-  isDisabled?: boolean;
+  isDisabled?: boolean
   /** Whether the Button should be in a loading state */
-  isLoading?: boolean;
+  isLoading?: boolean
   /** The size of the Button. */
-  size?: SizeKey;
+  size?: SizeKey
   /** The tone of the Button. */
-  tone?: ToneKey;
+  tone?: ToneKey
   /** The weight of the Button. */
-  weight?: WeightKey;
+  weight?: WeightKey
 }
 
 const loadingContainerStyles = {

design-system/packages/button/src/context.tsx

@@ -11,12 +11,12 @@ import {
 
 export const ButtonContext = createContext<{
   defaults: {
-    size: SizeKey;
-    tone: ToneKey;
-    weight: WeightKey;
-  };
-  useButtonStyles: typeof useButtonStyles;
-  useButtonTokens: typeof useButtonTokens;
+    size: SizeKey
+    tone: ToneKey
+    weight: WeightKey
+  }
+  useButtonStyles: typeof useButtonStyles
+  useButtonTokens: typeof useButtonTokens
 }>({
   defaults: buttonPropDefaults,
   useButtonStyles,
@@ -26,22 +26,22 @@ export const ButtonContext = createContext<{
 // Note hooks are optional for the provider value, but not in the context created above; this is
 // because they will be merged with the existing context and always exist in the value
 type ProviderHooksProp = {
-  useButtonStyles?: typeof useButtonStyles;
-  useButtonTokens?: typeof useButtonTokens;
+  useButtonStyles?: typeof useButtonStyles
+  useButtonTokens?: typeof useButtonTokens
 }
 type ProviderDefaultsProp = {
-  size?: SizeKey;
-  tone?: ToneKey;
-  weight?: WeightKey;
+  size?: SizeKey
+  tone?: ToneKey
+  weight?: WeightKey
 }
 export const ButtonProvider = ({
   defaults,
   hooks,
   children,
 }: {
-  defaults?: ProviderDefaultsProp;
-  hooks?: ProviderHooksProp;
-  children: ReactNode;
+  defaults?: ProviderDefaultsProp
+  hooks?: ProviderHooksProp
+  children: ReactNode
 }) => {
   const parentContext = useContext(ButtonContext)
   const newContext = useMemo(

design-system/packages/button/src/hooks/button.ts

@@ -19,9 +19,9 @@ export type ToneKey = (typeof buttonToneValues)[number]
 export type WeightKey = (typeof buttonWeightValues)[number]
 
 export type ButtonPropDefaults = {
-  size: SizeKey;
-  tone: ToneKey;
-  weight: WeightKey;
+  size: SizeKey
+  tone: ToneKey
+  weight: WeightKey
 }
 export const buttonPropDefaults = {
   size: 'medium',
@@ -30,29 +30,29 @@ export const buttonPropDefaults = {
 } as const
 
 type ButtonTokensProps = {
-  size: SizeKey;
-  tone: ToneKey;
-  weight: WeightKey;
+  size: SizeKey
+  tone: ToneKey
+  weight: WeightKey
 }
 type ButtonStateTokens = {
-  background?: string;
-  borderColor?: string;
-  foreground?: string;
-  shadow?: string;
-  textDecoration?: string;
+  background?: string
+  borderColor?: string
+  foreground?: string
+  shadow?: string
+  textDecoration?: string
 }
 export type ButtonTokens = {
-  borderRadius?: number;
-  borderWidth?: number;
-  disabledOpacity: number;
-  fontSize?: number | string;
-  fontWeight?: number;
-  height?: number;
-  paddingX?: number;
-  transition?: string;
-  focus: ButtonStateTokens;
-  hover: ButtonStateTokens;
-  pressed: ButtonStateTokens;
+  borderRadius?: number
+  borderWidth?: number
+  disabledOpacity: number
+  fontSize?: number | string
+  fontWeight?: number
+  height?: number
+  paddingX?: number
+  transition?: string
+  focus: ButtonStateTokens
+  hover: ButtonStateTokens
+  pressed: ButtonStateTokens
 } & ButtonStateTokens
 
 type Weight = ButtonStateTokens & Pick<ButtonTokens, 'focus' | 'hover' | 'pressed'>
@@ -150,9 +150,9 @@ export function useButtonTokens ({
 }
 
 type ButtonStylesProps = {
-  isDisabled?: boolean;
-  isBlock?: boolean;
-  tokens: ButtonTokens;
+  isDisabled?: boolean
+  isBlock?: boolean
+  tokens: ButtonTokens
 }
 
 export function useButtonStyles ({ isDisabled, isBlock, tokens }: ButtonStylesProps) {

design-system/packages/core/src/a11y/VisuallyHidden.tsx

@@ -6,7 +6,7 @@ import { forwardRefWithAs } from '../utils'
 // See: https://a11yproject.com/posts/how-to-hide-content/
 
 type Props = {
-  children?: ReactNode;
+  children?: ReactNode
 }
 
 export const VisuallyHidden = forwardRefWithAs<'span', Props>(

design-system/packages/core/src/components/Box.tsx

@@ -19,67 +19,67 @@ type TextAlignment = ResponsiveProp<TextAlign>
 type ColorType = ResponsiveProp<keyof Theme['palette']>
 export type ColorProps = {
   /** background-color */
-  background?: ColorType;
+  background?: ColorType
   /** color */
-  foreground?: ColorType;
+  foreground?: ColorType
 }
 
 type RadiiType = ResponsiveProp<keyof Theme['radii']>
 export type RadiiProps = {
   /** border-radius */
-  rounding?: RadiiType;
+  rounding?: RadiiType
   /** border-bottom-left-radius and border-bottom-right-radius */
-  roundingBottom?: RadiiType;
+  roundingBottom?: RadiiType
   /** border-bottom-left-radius and border-top-left-radius */
-  roundingLeft?: RadiiType;
+  roundingLeft?: RadiiType
   /** border-bottom-right-radius and border-top-right-radius */
-  roundingRight?: RadiiType;
+  roundingRight?: RadiiType
   /** border-bottom-left-radius and border-bottom-right-radius */
-  roundingTop?: RadiiType;
+  roundingTop?: RadiiType
 }
 
 type SpacingType = ResponsiveProp<keyof Theme['spacing']>
 export type MarginProps = {
   /** margin */
-  margin?: SpacingType;
+  margin?: SpacingType
   /** margin-top */
-  marginTop?: SpacingType;
+  marginTop?: SpacingType
   /** margin-right */
-  marginRight?: SpacingType;
+  marginRight?: SpacingType
   /** margin-bottom */
-  marginBottom?: SpacingType;
+  marginBottom?: SpacingType
   /** margin-left */
-  marginLeft?: SpacingType;
+  marginLeft?: SpacingType
   /** margin-top and margin-bottom */
-  marginY?: SpacingType;
+  marginY?: SpacingType
   /** margin-left and margin-right */
-  marginX?: SpacingType;
+  marginX?: SpacingType
 }
 
 export type PaddingProps = {
   /** padding */
-  padding?: SpacingType;
+  padding?: SpacingType
   /** padding-top */
-  paddingTop?: SpacingType;
+  paddingTop?: SpacingType
   /** padding-right */
-  paddingRight?: SpacingType;
+  paddingRight?: SpacingType
   /** padding-bottom */
-  paddingBottom?: SpacingType;
+  paddingBottom?: SpacingType
   /** padding-left */
-  paddingLeft?: SpacingType;
+  paddingLeft?: SpacingType
   /** padding-top and padding-bottom */
-  paddingY?: SpacingType;
+  paddingY?: SpacingType
   /** padding-left and padding-right */
-  paddingX?: SpacingType;
+  paddingX?: SpacingType
 }
 
 type BaseBoxProps = {
   /** text-align */
-  textAlign?: TextAlignment;
+  textAlign?: TextAlignment
   /** height */
-  height?: ResponsiveProp<DimensionType>;
+  height?: ResponsiveProp<DimensionType>
   /** width */
-  width?: ResponsiveProp<DimensionType>;
+  width?: ResponsiveProp<DimensionType>
 }
 
 export type BoxProps = ColorProps & RadiiProps & MarginProps & PaddingProps & BaseBoxProps

design-system/packages/core/src/components/Center.tsx

@@ -7,7 +7,7 @@ import { forwardRefWithAs } from '../utils'
 import { Box, type BoxProps } from './Box'
 
 type CenterProps = {
-  fillView?: boolean;
+  fillView?: boolean
 } & BoxProps
 
 export const Center = forwardRefWithAs<'div', CenterProps>(

design-system/packages/core/src/components/Core.tsx

@@ -9,11 +9,11 @@ import { useTheme } from '../theme'
 
 type CoreProps = {
   /** The app content. */
-  children: ReactNode;
+  children: ReactNode
   /** Include styles to normalize element styles among browsers. */
-  includeNormalize?: boolean;
+  includeNormalize?: boolean
   /** Optimize text rendering with CSS. */
-  optimizeLegibility?: boolean;
+  optimizeLegibility?: boolean
 }
 
 export const Core = ({

design-system/packages/core/src/components/Divider.tsx

@@ -15,10 +15,10 @@ const orientationMap = {
 }
 
 type DividerProps = {
-  children?: never;
-  color?: ColorType;
-  orientation?: keyof typeof orientationMap;
-  className?: string;
+  children?: never
+  color?: ColorType
+  orientation?: keyof typeof orientationMap
+  className?: string
 } & MarginProps
 
 export const Divider = ({ orientation = 'vertical', color, ...props }: DividerProps) => {

design-system/packages/core/src/components/Heading.tsx

@@ -12,7 +12,7 @@ type HeadingType = (typeof HeadingTypes)[number]
 
 type HeadingProps = {
   /** The type of heading. */
-  type?: HeadingType;
+  type?: HeadingType
 } & BoxProps
 
 export const Heading = forwardRefWithAs<'h1', HeadingProps>(

design-system/packages/core/src/components/Inline.tsx

@@ -18,11 +18,11 @@ const alignment = {
 
 type InlineProps = {
   /** The value of the "align-items" property. */
-  align?: keyof typeof alignment;
+  align?: keyof typeof alignment
   /** Each item in the container. */
-  children: ReactNode;
+  children: ReactNode
   /** The size of the gap between each item. */
-  gap?: keyof Theme['spacing'];
+  gap?: keyof Theme['spacing']
 } & BoxProps
 
 export const Inline = forwardRefWithAs<'div', InlineProps>(

design-system/packages/core/src/components/Stack.tsx

@@ -34,15 +34,15 @@ const orientationMap = {
 
 export type StackProps = {
   /** The value of the "align-items" property. */
-  align?: keyof typeof alignment;
+  align?: keyof typeof alignment
   /** Each element in the stack. */
-  children: ReactNode;
+  children: ReactNode
   /** Causes items in the stack to be oriented horizontally, instead of vertically */
-  across?: boolean;
+  across?: boolean
   /** The placement, if any, of the dividing elements. */
-  dividers?: 'none' | 'around' | 'between' | 'start' | 'end';
+  dividers?: 'none' | 'around' | 'between' | 'start' | 'end'
   /** The size of the gap between each element in the stack. */
-  gap?: keyof Theme['spacing'];
+  gap?: keyof Theme['spacing']
 } & BoxProps
 
 export const Stack = forwardRefWithAs<'div', StackProps>(

design-system/packages/core/src/components/Text.tsx

@@ -11,15 +11,15 @@ import { Box, type BoxProps } from './Box'
 
 type TextProps = {
   /** The leading of the text. */
-  leading?: keyof Theme['typography']['leading'];
+  leading?: keyof Theme['typography']['leading']
   /** The size of the text. */
-  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
   /** The tracking of the text. */
-  tracking?: keyof Theme['typography']['tracking'];
+  tracking?: keyof Theme['typography']['tracking']
   /** The color of the text. */
-  color?: keyof Theme['palette'];
+  color?: keyof Theme['palette']
   /** The font-weight of the text. */
-  weight?: keyof Theme['typography']['fontWeight'];
+  weight?: keyof Theme['typography']['fontWeight']
 } & BoxProps
 
 export const Text = forwardRefWithAs<'div', TextProps>(

design-system/packages/core/src/theme.tsx

@@ -4,12 +4,12 @@ import type { Theme } from './types'
 import { theme } from './themes/default'
 
 export const ThemeContext = createContext<{
-  theme: Theme;
+  theme: Theme
 }>({
   theme,
 })
 
-export const ThemeProvider = ({ theme, children }: { theme: Theme; children: ReactNode }) => {
+export const ThemeProvider = ({ theme, children }: { theme: Theme, children: ReactNode }) => {
   return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
 }