Skip to content

Commit 67c57ab

Browse files
jakehwlljakehwll
authored
chore: tighten .vscode IDE and typescript configuration (#24537)
This branch tightens import hygiene and editor guidance to reduce accidental use of legacy or discouraged patterns. It also updates consumers too, by propagating the new `lucide-react` import convention across the existing UI surfaces that reference those icons. - Updated `.vscode/settings.json` to prefer non-relative imports and improve TypeScript auto-import behavior. - Re-enabled and expanded Biome restricted-import enforcement in `biome.jsonc` for migration guardrails. - Added/used `lucide-react` `-Icon` naming conventions for clarity and consistency. - Updated consumers too across components, modules, and pages so the new import rules are applied end-to-end.
1 parent e186dc3 commit 67c57ab

63 files changed

Lines changed: 218 additions & 183 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.vscode/settings.json‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,21 @@
6262
"[markdown]": {
6363
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
6464
},
65-
"biome.lsp.bin": "site/node_modules/.bin/biome"
65+
"biome.lsp.bin": "site/node_modules/.bin/biome",
66+
67+
// Prefer type only imports.
68+
"typescript.preferences.preferTypeOnlyAutoImports": true,
69+
// Prefer aliased/non-relative imports (e.g. "#/...") over "../../...".
70+
"typescript.preferences.importModuleSpecifier": "non-relative",
71+
"javascript.preferences.importModuleSpecifier": "non-relative",
72+
// We discourage people from various older libraries that
73+
// are no longer recommended/being migrated from.
74+
"typescript.preferences.autoImportSpecifierExcludeRegexes": [
75+
// discourage people from using MUI components
76+
"^@mui(?:/.*)?$",
77+
// discourage people from using Emotion CSS
78+
"^@emotion(?:/.*)?$",
79+
// we prefer people use `lodash/foo` over `lodash`
80+
"^lodash$"
81+
]
6682
}

‎biome.jsonc‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
"message": "React 19 no longer requires forwardRef. Use ref as a prop instead.",
5252
"importNames": ["forwardRef"]
5353
},
54-
// "@mui/material/Alert": "Use components/Alert/Alert instead.",
55-
// "@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
54+
"@mui/material/Alert": "Use components/Alert/Alert instead.",
55+
"@mui/material/AlertTitle": "Use components/Alert/Alert instead.",
5656
// "@mui/material/Autocomplete": "Use shadcn/ui Combobox instead.",
5757
"@mui/material/Avatar": "Use components/Avatar/Avatar instead.",
5858
"@mui/material/Box": "Use a <div> with Tailwind classes instead.",
@@ -61,7 +61,7 @@
6161
// "@mui/material/CardActionArea": "Use shadcn/ui Card component instead.",
6262
// "@mui/material/CardContent": "Use shadcn/ui Card component instead.",
6363
// "@mui/material/Checkbox": "Use shadcn/ui Checkbox component instead.",
64-
// "@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
64+
"@mui/material/Chip": "Use components/Badge or Tailwind styles instead.",
6565
// "@mui/material/CircularProgress": "Use components/Spinner/Spinner instead.",
6666
// "@mui/material/Collapse": "Use shadcn/ui Collapsible instead.",
6767
// "@mui/material/CssBaseline": "Use Tailwind CSS base styles instead.",
@@ -74,48 +74,48 @@
7474
// "@mui/material/Drawer": "Use shadcn/ui Sheet component instead.",
7575
// "@mui/material/FormControl": "Use native form elements with Tailwind instead.",
7676
// "@mui/material/FormControlLabel": "Use shadcn/ui Label with form components instead.",
77-
// "@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
77+
"@mui/material/FormGroup": "Use a <div> with Tailwind classes instead.",
7878
// "@mui/material/FormHelperText": "Use a <p> with Tailwind classes instead.",
79-
// "@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
80-
// "@mui/material/Grid": "Use Tailwind grid utilities instead.",
81-
// "@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
79+
"@mui/material/FormLabel": "Use shadcn/ui Label component instead.",
80+
"@mui/material/Grid": "Use Tailwind grid utilities instead.",
81+
"@mui/material/IconButton": "Use components/Button/Button with variant='icon' instead.",
8282
// "@mui/material/InputAdornment": "Use Tailwind positioning in input wrapper instead.",
8383
// "@mui/material/InputBase": "Use shadcn/ui Input component instead.",
84-
// "@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
84+
"@mui/material/LinearProgress": "Use a progress bar with Tailwind instead.",
8585
// "@mui/material/Link": "Use React Router Link or native <a> tags instead.",
8686
// "@mui/material/List": "Use native <ul> with Tailwind instead.",
8787
// "@mui/material/ListItem": "Use native <li> with Tailwind instead.",
88-
// "@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
88+
"@mui/material/ListItemIcon": "Use lucide-react icons in list items instead.",
8989
// "@mui/material/ListItemText": "Use native elements with Tailwind instead.",
9090
// "@mui/material/Menu": "Use shadcn/ui DropdownMenu instead.",
9191
// "@mui/material/MenuItem": "Use shadcn/ui DropdownMenu components instead.",
9292
// "@mui/material/MenuList": "Use shadcn/ui DropdownMenu components instead.",
93-
// "@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
93+
"@mui/material/Paper": "Use a <div> with Tailwind shadow/border classes instead.",
9494
"@mui/material/Popover": "Use components/Popover/Popover instead.",
9595
// "@mui/material/Radio": "Use shadcn/ui RadioGroup instead.",
9696
// "@mui/material/RadioGroup": "Use shadcn/ui RadioGroup instead.",
9797
// "@mui/material/Select": "Use shadcn/ui Select component instead.",
98-
// "@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
98+
"@mui/material/Skeleton": "Use shadcn/ui Skeleton component instead.",
9999
// "@mui/material/Snackbar": "Use components/GlobalSnackbar instead.",
100100
// "@mui/material/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
101101
// "@mui/material/styles": "Use Tailwind CSS instead.",
102102
// "@mui/material/SvgIcon": "Use lucide-react icons instead.",
103-
// "@mui/material/Switch": "Use shadcn/ui Switch component instead.",
103+
"@mui/material/Switch": "Use shadcn/ui Switch component instead.",
104104
"@mui/material/Table": "Import from components/Table/Table instead.",
105-
// "@mui/material/TableRow": "Import from components/Table/Table instead.",
105+
"@mui/material/TableRow": "Import from components/Table/Table instead.",
106106
// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
107107
// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
108108
// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
109109
"@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.",
110110
"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
111-
// "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
111+
"@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
112112
// "@mui/system": "Use Tailwind CSS instead.",
113-
// "@mui/utils": "Use native alternatives or utility libraries instead.",
113+
"@mui/utils": "Use native alternatives or utility libraries instead.",
114114
// "@emotion/css": "Use Tailwind CSS instead.",
115115
// "@emotion/react": "Use Tailwind CSS instead.",
116116
"@emotion/styled": "Use Tailwind CSS instead.",
117117
// "@emotion/cache": "Use Tailwind CSS instead.",
118-
// "components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
118+
// "#/components/Stack/Stack": "Use Tailwind flex utilities instead (e.g., <div className='flex flex-col gap-4'>).",
119119
"lodash": "Use lodash/<name> instead."
120120
}
121121
}

‎site/src/@types/lucide-react.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
declare module "lucide-react" {
2+
export * from "lucide-react/dist/lucide-react.suffixed";
3+
}

‎site/src/components/AnimatedIcons/ChevronDown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChevronDown as LucideChevronDown } from "lucide-react";
1+
import { ChevronDownIcon as LucideChevronDown } from "lucide-react";
22
import { cn } from "#/utils/cn";
33

44
interface ChevronDownIconProps

‎site/src/components/Autocomplete/Autocomplete.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react-vite";
2-
import { Check } from "lucide-react";
2+
import { CheckIcon } from "lucide-react";
33
import { useState } from "react";
44
import { expect, fn, screen, userEvent, waitFor, within } from "storybook/test";
55
import { Avatar } from "#/components/Avatar/Avatar";
@@ -319,7 +319,7 @@ export const WithCustomRenderOption: Story = {
319319
subtitle={user.email}
320320
src={user.avatar_url}
321321
/>
322-
{isSelected && <Check className="size-4 shrink-0" />}
322+
{isSelected && <CheckIcon className="size-4 shrink-0" />}
323323
</div>
324324
)}
325325
/>
@@ -363,7 +363,7 @@ export const WithStartAdornment: Story = {
363363
subtitle={user.email}
364364
src={user.avatar_url}
365365
/>
366-
{isSelected && <Check className="size-4 shrink-0" />}
366+
{isSelected && <CheckIcon className="size-4 shrink-0" />}
367367
</div>
368368
)}
369369
/>

‎site/src/components/Autocomplete/Autocomplete.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Check, X } from "lucide-react";
1+
import { CheckIcon, XIcon } from "lucide-react";
22
import {
33
type KeyboardEvent,
44
type ReactNode,
@@ -184,7 +184,7 @@ export function Autocomplete<TOption>({
184184
className="flex items-center justify-center size-5 rounded hover:bg-surface-secondary transition-colors cursor-pointer"
185185
aria-label="Clear selection"
186186
>
187-
<X className="size-4 text-content-secondary hover:text-content-primary" />
187+
<XIcon className="size-4 text-content-secondary hover:text-content-primary" />
188188
</span>
189189
)}
190190
<span className="flex items-center justify-center size-5">
@@ -234,7 +234,9 @@ export function Autocomplete<TOption>({
234234
) : (
235235
<>
236236
<span className="flex-1">{optionLabel}</span>
237-
{selected && <Check className="size-4 shrink-0" />}
237+
{selected && (
238+
<CheckIcon className="size-4 shrink-0" />
239+
)}
238240
</>
239241
)}
240242
</CommandItem>

‎site/src/components/Badge/Badge.stories.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react-vite";
2-
import { Database, Settings, TriangleAlert } from "lucide-react";
2+
import { DatabaseIcon, SettingsIcon, TriangleAlertIcon } from "lucide-react";
33
import { Badges } from "#/components/Badges/Badges";
44
import { Badge } from "./Badge";
55

@@ -14,15 +14,15 @@ export const Default: Story = {
1414
render: () => (
1515
<Badges>
1616
<Badge size="xs">
17-
<Database />
17+
<DatabaseIcon />
1818
Text
1919
</Badge>
2020
<Badge size="sm">
21-
<Database />
21+
<DatabaseIcon />
2222
Text
2323
</Badge>
2424
<Badge size="md">
25-
<Database />
25+
<DatabaseIcon />
2626
Text
2727
</Badge>
2828
</Badges>
@@ -34,14 +34,14 @@ export const Warning: Story = {
3434
<Badges>
3535
<Badge variant="warning" size="xs">
3636
Warning
37-
<TriangleAlert />
37+
<TriangleAlertIcon />
3838
</Badge>
3939
<Badge variant="warning" size="sm">
40-
<TriangleAlert />
40+
<TriangleAlertIcon />
4141
Warning
4242
</Badge>
4343
<Badge variant="warning" size="md">
44-
<TriangleAlert />
44+
<TriangleAlertIcon />
4545
Warning
4646
</Badge>
4747
</Badges>
@@ -53,14 +53,14 @@ export const Destructive: Story = {
5353
<Badges>
5454
<Badge variant="destructive" size="xs">
5555
Destructive
56-
<TriangleAlert />
56+
<TriangleAlertIcon />
5757
</Badge>
5858
<Badge variant="destructive" size="sm">
59-
<TriangleAlert />
59+
<TriangleAlertIcon />
6060
Destructive
6161
</Badge>
6262
<Badge variant="destructive" size="md">
63-
<TriangleAlert />
63+
<TriangleAlertIcon />
6464
Destructive
6565
</Badge>
6666
</Badges>
@@ -134,7 +134,7 @@ export const Magenta: Story = {
134134
export const SmallWithIcon: Story = {
135135
render: () => (
136136
<Badge variant="default" size="sm">
137-
<Settings />
137+
<SettingsIcon />
138138
Preset
139139
</Badge>
140140
),
@@ -143,7 +143,7 @@ export const SmallWithIcon: Story = {
143143
export const MediumWithIcon: Story = {
144144
render: () => (
145145
<Badge variant="warning" size="md">
146-
<TriangleAlert />
146+
<TriangleAlertIcon />
147147
Immutable
148148
</Badge>
149149
),

‎site/src/components/Breadcrumb/Breadcrumb.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copied from shadc/ui on 12/13/2024
33
* @see {@link https://ui.shadcn.com/docs/components/breadcrumb}
44
*/
5-
import { MoreHorizontal } from "lucide-react";
5+
import { MoreHorizontalIcon } from "lucide-react";
66
import { Slot } from "radix-ui";
77
import { cn } from "#/utils/cn";
88

@@ -110,7 +110,7 @@ export const BreadcrumbEllipsis: React.FC<
110110
className={cn("flex h-9 w-9 items-center justify-center", className)}
111111
{...props}
112112
>
113-
<MoreHorizontal className="h-4 w-4" />
113+
<MoreHorizontalIcon className="h-4 w-4" />
114114
<span className="sr-only">More</span>
115115
</span>
116116
);

‎site/src/components/Checkbox/Checkbox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Copied from shadc/ui on 04/03/2025
33
* @see {@link https://ui.shadcn.com/docs/components/checkbox}
44
*/
5-
import { Check, Minus } from "lucide-react";
5+
import { CheckIcon, MinusIcon } from "lucide-react";
66
import { Checkbox as CheckboxPrimitive } from "radix-ui";
77
import { cn } from "#/utils/cn";
88

@@ -44,10 +44,10 @@ export const Checkbox: React.FC<
4444
)}
4545
>
4646
{(props.checked === true || props.defaultChecked === true) && (
47-
<Check className="size-4" strokeWidth={2.5} />
47+
<CheckIcon className="size-4" strokeWidth={2.5} />
4848
)}
4949
{props.checked === "indeterminate" && (
50-
<Minus className="size-4" strokeWidth={2.5} />
50+
<MinusIcon className="size-4" strokeWidth={2.5} />
5151
)}
5252
</CheckboxPrimitive.Indicator>
5353
</CheckboxPrimitive.Root>

‎site/src/components/Collapsible/Collapsible.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react-vite";
2-
import { ChevronsUpDown } from "lucide-react";
2+
import { ChevronsUpDownIcon } from "lucide-react";
33
import { Button } from "#/components/Button/Button";
44
import {
55
Collapsible,
@@ -20,7 +20,7 @@ const meta: Meta<typeof Collapsible> = {
2020
</h4>
2121
<CollapsibleTrigger asChild>
2222
<Button size="sm">
23-
<ChevronsUpDown />
23+
<ChevronsUpDownIcon />
2424
<span className="sr-only">Toggle</span>
2525
</Button>
2626
</CollapsibleTrigger>

0 commit comments

Comments
 (0)