update deps

Author: robphoenix

package.json

@@ -6,22 +6,22 @@
     "url": "https://github.com/utilitywarehouse/design-systems"
   },
   "devDependencies": {
-    "@changesets/changelog-github": "^0.4.2",
-    "@changesets/cli": "^2.23.1",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@utilitywarehouse/prettier-config": "^0.1.0",
-    "eslint": "^8.25.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.9",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "@utilitywarehouse/prettier-config": "^0.1.1",
+    "eslint": "8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "patch-package": "^8.0.0",
-    "prettier": "^3.2.5",
-    "turbo": "^2.0.12",
+    "prettier": "^3.3.3",
+    "turbo": "^2.2.3",
     "typescript": "^5"
   },
   "scripts": {
-    "setup": "corepack enable && corepack prepare pnpm@8.6.3 --activate",
+    "setup": "corepack enable && corepack prepare pnpm@9 --activate",
     "build": "turbo run build",
     "dev": "turbo run dev",
     "build:storybook": "turbo run --no-cache build:storybook",
@@ -46,12 +46,12 @@
     "apps/*"
   ],
   "dependencies": {
-    "pnpm": "^8.6.3"
+    "pnpm": "^9"
   },
   "resolutions": {
     "react-docgen-typescript": "2.2.2"
   },
-  "packageManager": "pnpm@8.6.3",
+  "packageManager": "pnpm@9.14.2",
   "pnpm": {
     "overrides": {
       "react-docgen-typescript": "2.2.2",

packages/native-ui/src/components/Center/Center.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { createStyleSheet } from 'react-native-unistyles';
 import { Box } from '../../lab';
 
-interface CenterProps extends Omit<ComponentProps<typeof Box>, 'style'> {}
+type CenterProps = Omit<ComponentProps<typeof Box>, 'style'>;
 
 const stylesheet = createStyleSheet({
   container: {

packages/native-ui/src/components/Input/Input.props.ts

@@ -53,6 +53,6 @@ interface InputWithoutChildrenProps extends InputBaseProps, TextInputProps {
  */
 type InputProps = InputWithChildrenProps | InputWithoutChildrenProps;
 
-export interface InputContextValue extends InputBaseProps {}
+export type InputContextValue = InputBaseProps;
 
 export default InputProps;

packages/native-ui/src/components/List/ListHeading/ListHeading.props.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from 'react-native';
 
-interface ListHeadingBaseProps extends Omit<ViewProps, 'children'> {}
+type ListHeadingBaseProps = Omit<ViewProps, 'children'>;
 
 export interface ListHeadingWithChildren extends ListHeadingBaseProps {
   children: ViewProps['children'];

packages/native-ui/src/config/gluestack-ui.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 import { AnimationResolver } from '@gluestack-style/animation-resolver';
 import { MotionAnimationDriver } from '@gluestack-style/legend-motion-animation-driver';
 import { createConfig, createComponents } from '@gluestack-style/react';

packages/native-ui/src/hooks/useMedia.ts

@@ -1,4 +1,4 @@
-import { UnistylesBreakpoints, useStyles } from 'react-native-unistyles';
+import { useStyles } from 'react-native-unistyles';
 
 const useMedia = (): Partial<Record<keyof typeof breakpoints, boolean>> => {
   const {
@@ -10,14 +10,15 @@ const useMedia = (): Partial<Record<keyof typeof breakpoints, boolean>> => {
   const mediaBreakpoints: Partial<Record<BreakPointKeys, boolean>> = {};
 
   // Type guard function to check if 'breakpoint' is a key of 'breakpoints'
-  function isBreakpointKey(
-    value: keyof UnistylesBreakpoints,
-    breakpointsObj: typeof breakpoints
-  ): value is BreakPointKeys {
-    return value in breakpointsObj;
-  }
+  // function isBreakpointKey(
+  //   value: keyof UnistylesBreakpoints,
+  //   breakpointsObj: typeof breakpoints
+  // ): value is BreakPointKeys {
+  //   return value in breakpointsObj;
+  // }
 
-  if (isBreakpointKey(breakpoint, breakpoints)) {
+  // if (isBreakpointKey(breakpoint, breakpoints)) {
+  if (breakpoint in breakpoints) {
     (Object.keys(breakpoints) as Array<BreakPointKeys>).forEach(currentBreakPoint => {
       mediaBreakpoints[currentBreakPoint] =
         breakpoints[currentBreakPoint] === breakpoints[breakpoint];

packages/native-ui/src/lab/Box/Box.tsx

@@ -259,7 +259,7 @@ const BoxComponent = <T extends React.ElementType = typeof View>(
     if (propValue !== undefined) {
       const themeKey = themeStyleMapping[stylePropName];
       if (themeKey) {
-        const themeMapping = theme[themeKey as keyof UnistylesTheme];
+        const themeMapping = theme[themeKey];
         if (themeMapping && typeof themeMapping === 'object') {
           (styles as any)[stylePropName] = resolveThemeValue(propValue, themeMapping);
         } else {
@@ -292,13 +292,13 @@ const BoxComponent = <T extends React.ElementType = typeof View>(
 
     // Check if propName is a valid style property
     if (isViewStyleProp(propName)) {
-      const stylePropName = propName as keyof ViewStyle;
+      const stylePropName = propName;
       const propValue = props[propName as keyof Omit<BoxProps, 'children' | 'style'>];
 
       if (propValue !== undefined) {
         const themeKey = themeStyleMapping[stylePropName];
         if (themeKey) {
-          const themeMapping = theme[themeKey as keyof UnistylesTheme];
+          const themeMapping = theme[themeKey];
           if (themeMapping && typeof themeMapping === 'object') {
             (styles as any)[stylePropName] = resolveThemeValue(propValue, themeMapping);
           } else {

packages/native-ui/src/lab/Carousel/Carousel.props.ts

@@ -8,14 +8,18 @@ import {
   ViewStyle,
 } from 'react-native';
 
-export interface CarouselRef extends FlatList {}
+export type CarouselRef = FlatList;
 
 export interface CarouselContextValue {
   activeIndex: number;
   numItems: number;
 }
 
-export interface CarouselProps<T> extends Pick<FlatListProps<T>, 'children' | 'data' | 'removeClippedSubviews' | 'renderItem' | 'scrollEnabled' | 'style'> {
+export interface CarouselProps<T>
+  extends Pick<
+    FlatListProps<T>,
+    'children' | 'data' | 'removeClippedSubviews' | 'renderItem' | 'scrollEnabled' | 'style'
+  > {
   inactiveItemOpacity?: number;
   itemStyle?: StyleProp<ViewStyle>;
   itemWidth?: number;
@@ -33,7 +37,7 @@ export interface CarouselItemProps<T> extends ListRenderItemInfo<T>, ViewProps {
   width: number;
 }
 
-export interface CarouselPaginationProps extends ViewProps {}
+export type CarouselPaginationProps = ViewProps;
 
 export interface CarouselPaginationItemProps extends ViewProps {
   active: boolean;

packages/native-ui/src/types/unistyles.ts

@@ -9,6 +9,6 @@ export type AppThemes = {
 };
 
 declare module 'react-native-unistyles' {
-  export interface UnistylesBreakpoints extends AppBreakpoints {}
-  export interface UnistylesThemes extends AppThemes {}
+  export type UnistylesBreakpoints = AppBreakpoints;
+  export type UnistylesThemes = AppThemes;
 }

packages/web-ui/src/components/Box/createBox.ts

@@ -22,14 +22,12 @@ type Options = {
  */
 export function createBox<
   RootComponent extends React.ElementType = MuiBoxTypeMap['defaultComponent'],
->(
-  /* eslint-disable @typescript-eslint/ban-types */
-  options: Options = {}
-) {
+>(options: Options = {}) {
   const { componentName = 'Box' } = options;
   const BaseBox = createMuiBox<Theme>({
     defaultTheme: theme,
     defaultClassName: withGlobalPrefix(componentName),
   });
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   return BaseBox as OverridableComponent<MuiBoxTypeMap<{}, RootComponent, Theme>>;
 }

packages/web-ui/src/components/Checkbox/Checkbox.props.ts

@@ -1,3 +1,3 @@
 import { CheckboxBaseProps } from '../CheckboxBase';
 
-export interface CheckboxProps extends CheckboxBaseProps {}
+export type CheckboxProps = CheckboxBaseProps;

packages/web-ui/src/components/CheckboxTile/CheckboxTile.props.ts

@@ -1,3 +1,3 @@
 import { CheckboxBaseProps } from '../CheckboxBase';
 
-export interface CheckboxTileProps extends CheckboxBaseProps {}
+export type CheckboxTileProps = CheckboxBaseProps;

packages/web-ui/src/components/Fieldset/Fieldset.props.ts

@@ -1,3 +1,3 @@
 import { ComponentPropsWithoutRef } from 'react';
 
-export interface FieldsetProps extends ComponentPropsWithoutRef<'fieldset'> {}
+export type FieldsetProps = ComponentPropsWithoutRef<'fieldset'>;

packages/web-ui/src/components/Menu/Menu.tsx

@@ -8,7 +8,7 @@ import { colors } from '@utilitywarehouse/colour-system';
 
 import { spacing } from '../../utils';
 
-export interface MenuProps extends Omit<MuiMenuProps, 'ref'> {}
+export type MenuProps = Omit<MuiMenuProps, 'ref'>;
 
 const StyledMenu = styled(MuiMenu)({
   '& .MuiPaper-root': {

packages/web-ui/src/components/RadioTile/RadioTile.props.ts

@@ -1,3 +1,3 @@
 import type { RadioProps } from '../Radio';
 
-export interface RadioTileProps extends RadioProps {}
+export type RadioTileProps = RadioProps;