refactor: Upgrade react-icon and radix dependencies

.changeset/dirty-wombats-think.md

@@ -0,0 +1,7 @@
+---
+'@halfdomelabs/project-builder-web': patch
+'@halfdomelabs/react-generators': patch
+'@halfdomelabs/ui-components': patch
+---
+
+Upgrade react-icon and radix dependencies

.github/workflows/test-e2e.yml

@@ -38,7 +38,5 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile --filter @halfdomelabs/project-builder-test... --filter @halfdomelabs/project-builder-cli... --filter @halfdomelabs/root
 
-      - name: Typecheck
-        run: pnpm typecheck
       - name: Run E2E Tests
         run: pnpm test:e2e:affected

.github/workflows/test.yml

@@ -34,4 +34,6 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - run: pnpm build:affected
+      - name: Typecheck
+        run: pnpm typecheck
       - run: pnpm test:affected

packages/project-builder-web/package.json

@@ -64,7 +64,7 @@
     "react-dom": "catalog:",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "7.53.0",
-    "react-icons": "5.0.1",
+    "react-icons": "5.5.0",
     "react-router-dom": "6.22.3",
     "react-select": "5.8.0",
     "react-time-ago": "^7.3.3",

packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/ModelFieldForm.tsx

@@ -49,15 +49,12 @@ function ModelFieldForm({
     control,
   });
 
-  const { isPartOfPrimaryKey, hasCompositePrimaryKey, uniqueConstraints } =
-    useEditedModelConfig((model) => {
-      const { primaryKeyFieldRefs, uniqueConstraints } = model.model;
-      return {
-        isPartOfPrimaryKey: primaryKeyFieldRefs.includes(watchedField.id),
-        hasCompositePrimaryKey: primaryKeyFieldRefs.length > 1,
-        uniqueConstraints: uniqueConstraints ?? [],
-      };
-    });
+  const model = useEditedModelConfig((model) => model.model);
+  const isPartOfPrimaryKey = model.primaryKeyFieldRefs.includes(
+    watchedField.id,
+  );
+  const hasCompositePrimaryKey = model.primaryKeyFieldRefs.length > 1;
+  const uniqueConstraints = model.uniqueConstraints ?? [];
 
   const ownUniqueConstraints = uniqueConstraints.filter((uc) =>
     uc.fields.some((f) => f.fieldRef === watchedField.id),
@@ -67,7 +64,7 @@ function ModelFieldForm({
       relation.references.some((r) => r.localRef === watchedField.id),
     ) ?? [];
 
-  const removeError = useEditedModelConfig((model) => {
+  const removeError = (() => {
     // check local references
     if (usedRelations.length > 0) {
       return `Unable to remove field as it is being used in relations ${usedRelations
@@ -80,14 +77,14 @@ function ModelFieldForm({
     }
     // check unique constraints
     if (
-      model.model.uniqueConstraints?.some((constraint) =>
+      model.uniqueConstraints?.some((constraint) =>
         constraint.fields.some((f) => f.fieldRef === watchedField.id),
       )
     ) {
       return `Unable to remove field as it is being used in in a unique constraint`;
     }
     return;
-  });
+  })();
 
   function handleRemove(): void {
     if (removeError) {

packages/project-builder-web/src/pages/data/models/edit/[id]/_components/fields/badges/ModelFieldBadges.tsx

@@ -22,15 +22,17 @@ export function ModelFieldBadges({
   idx,
 }: ModelFieldBadgesProps): React.JSX.Element {
   const field = useEditedModelConfig((model) => model.model.fields[idx]);
-  const { isPrimary, uniqueConstraints } = useEditedModelConfig((model) => ({
-    isPrimary: model.model.primaryKeyFieldRefs.includes(field.id),
-    uniqueConstraints:
+  const isPrimary = useEditedModelConfig((model) =>
+    model.model.primaryKeyFieldRefs.includes(field.id),
+  );
+  const uniqueConstraints = useEditedModelConfig(
+    (model) =>
       model.model.uniqueConstraints
         ?.filter((constraint) =>
           constraint.fields.some((f) => f.fieldRef === field.id),
         )
         .map((uc) => uc.id) ?? [],
-  }));
+  );
   const modelFieldRelations = useEditedModelConfig(({ model }) => {
     const field = model.fields[idx];
     return (

packages/react-generators/src/constants/react-packages.ts

@@ -25,7 +25,7 @@ export const REACT_PACKAGES = {
   clsx: '2.1.1',
   'react-hook-form': '7.53.0',
   'react-hot-toast': '2.4.1',
-  'react-icons': '5.0.1',
+  'react-icons': '5.5.0',
   'react-select': '5.8.0',
   zustand: '5.0.3',
   'react-error-boundary': '4.0.13',

packages/ui-components/package.json

@@ -51,30 +51,30 @@
   },
   "dependencies": {
     "@hookform/resolvers": "3.9.0",
-    "@radix-ui/react-checkbox": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-dropdown-menu": "2.1.1",
-    "@radix-ui/react-label": "2.1.0",
-    "@radix-ui/react-navigation-menu": "1.2.0",
-    "@radix-ui/react-popover": "1.1.1",
-    "@radix-ui/react-scroll-area": "1.1.0",
-    "@radix-ui/react-select": "2.1.1",
-    "@radix-ui/react-separator": "1.1.0",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
+    "@radix-ui/react-label": "2.1.2",
+    "@radix-ui/react-navigation-menu": "1.2.5",
+    "@radix-ui/react-popover": "1.1.6",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tabs": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.8",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "cmdk": "1.0.4",
+    "cmdk": "1.1.1",
     "react": "catalog:",
     "react-colorful": "5.6.1",
     "react-dom": "catalog:",
     "react-hook-form": "7.53.0",
-    "react-icons": "5.0.1",
-    "sonner": "1.7.4",
+    "react-icons": "5.5.0",
+    "sonner": "2.0.1",
     "zod": "catalog:",
     "zustand": "5.0.3"
   },

packages/ui-components/src/components/Badge/Badge.tsx

@@ -44,8 +44,8 @@ function Badge({
   );
 }
 
-interface BadgeWithIconProps extends BadgeProps {
-  icon?: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+export interface BadgeWithIconProps extends BadgeProps {
+  icon?: (props: React.SVGProps<SVGSVGElement>) => React.ReactNode;
 }
 
 Badge.WithIcon = function BadgeWithIcon({

packages/ui-components/src/components/ComboboxField/ComboboxField.stories.tsx

@@ -45,8 +45,8 @@ export const Default: Story = {
       { label: 'Option 2', value: '2' },
       { label: 'Option 3', value: '3' },
     ],
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };
@@ -60,8 +60,8 @@ export const Labelled: Story = {
     ],
     label: 'What option would you like to combobox?',
     description: 'We will never judge you for your choice.',
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };

packages/ui-components/src/components/MultiCheckboxField/MultiCheckboxField.stories.tsx

@@ -45,8 +45,8 @@ export const Default: Story = {
       { label: 'Option 2', value: '2' },
       { label: 'Option 3', value: '3' },
     ],
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };
@@ -60,8 +60,8 @@ export const Labelled: Story = {
     ],
     label: 'What are your favorite options?',
     description: 'We will never judge you for your choice.',
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };

packages/ui-components/src/components/MultiComboboxField/MultiComboboxField.stories.tsx

@@ -45,8 +45,8 @@ export const Default: Story = {
       { label: 'Option 2', value: '2' },
       { label: 'Option 3', value: '3' },
     ],
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };
@@ -60,8 +60,8 @@ export const Labelled: Story = {
     ],
     label: 'What are your favorite options?',
     description: 'We will never judge you for your choice.',
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };

packages/ui-components/src/components/SelectField/SelectField.stories.tsx

@@ -45,8 +45,8 @@ export const Default: Story = {
       { label: 'Option 2', value: '2' },
       { label: 'Option 3', value: '3' },
     ],
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };
@@ -60,8 +60,8 @@ export const Labelled: Story = {
     ],
     label: 'What option would you like to select?',
     description: 'We will never judge you for your choice.',
-    getOptionLabel: (option) => (option as { label: string }).label,
-    getOptionValue: (option) => (option as { value: string }).value,
+    getOptionLabel: (option: { label: string }) => option.label,
+    getOptionValue: (option: { value: string }) => option.value,
     className: 'w-96',
   },
 };