48:I[660678,["/_next/static/chunks/13vqyfldau57p.js","/_next/static/chunks/1gbl-dcot4vlq.js","/_next/static/chunks/3w7s_-pxil6pv.js","/_next/static/chunks/3zorfbfh_a_pd.js","/_next/static/chunks/0cnrn8dx8wpm6.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/1mbdq0lktamc7.js","/_next/static/chunks/0nq310uz96h4-.js","/_next/static/chunks/2i4xo8xu-dpuk.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/2wyk4b1ao4pa_.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/0ugk39ckud30x.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/3bhq66ea_v7by.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/0r86cplnpkdza.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/1ra7jqz5hyzln.js","/_next/static/chunks/42kj-we3o-c3u.js","/_next/static/chunks/2vvl77bxv5nze.js","/_next/static/chunks/2dk9hti1hh4ut.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/1qsa_rj-5yj90.js","/_next/static/chunks/0ewjxq-e6quq-.js","/_next/static/chunks/34y7-26s89h2f.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/3enqpgm3pn7at.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/1cvej8ocaz0a2.js","/_next/static/chunks/1j29bqcxcpyur.js"],"HydrationBoundary"] 47:Tab9,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"Alex Bit","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/78109534?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"cal-design-system-audit-custom-components","item":"https://app.codemod.com/registry/cal-design-system-audit-custom-components"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#webpage","url":"https://app.codemod.com/registry/cal-design-system-audit-custom-components","name":"cal-design-system-audit-custom-components - Codemod Registry","description":"Leaves comment on top of custom UI components to help with the design system audit","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#sourcecode","name":"cal-design-system-audit-custom-components","description":"Leaves comment on top of custom UI components to help with the design system audit","url":"https://app.codemod.com/registry/cal-design-system-audit-custom-components","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/78109534?v=4","isAccessibleForFree":true,"license":"MIT","version":"0.1.1","keywords":["mining","design-system","ui","audit"],"datePublished":"2026-01-08 05:11:22.260752+00","dateModified":"2026-01-08 05:15:52.70639+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/cal-design-system-audit-custom-components#app","name":"cal-design-system-audit-custom-components codemod","description":"Leaves comment on top of custom UI components to help with the design system audit","url":"https://app.codemod.com/registry/cal-design-system-audit-custom-components","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.1","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}49:Tbd2,# Cal Design System Component Audit Codemod This codemod classifies React components in TypeScript/TSX files as either: - **design-system-component**: Components in `packages/ui/components` (standard design system components) - **custom-ui-component**: Domain-specific UI components with custom styling - **other**: Route files, providers, or non-UI components (no comment added) ## What It Does The codemod scans `.tsx` and `.ts` files, detects React components, and inserts classification comments above component declarations: ```typescript // codemod:design-system-component export const Button = forwardRef(...) // codemod:custom-ui-component export function BookingCard(...) { ... } ``` ## Configuration ### Design System Hints Edit constants in `scripts/codemod.ts`: - `DS_FOLDER_HINTS`: Folder patterns for design system components - `DS_IMPORT_HINTS`: Import patterns from design system packages - `DS_PRIMITIVE_NAMES`: Primitive component names (Button, Card, etc.) - `DOMAIN_KEYWORDS`: Domain-specific keywords (booking, event, etc.) ## Usage ### Run on Target Files ```bash npx codemod jssg run -l tsx ./scripts/codemod.ts ``` Example: ```bash npx codemod jssg run -l tsx ./scripts/codemod.ts packages/ui/components ``` ### Run Tests ```bash npm test ``` Or: ```bash npx codemod jssg test -l tsx ./scripts/codemod.ts ``` ### Update Test Snapshots ```bash npx codemod jssg test -l tsx ./scripts/codemod.ts -u ``` ## Classification Rules ### Design System Component A component is classified as `design-system-component` if: - File path contains `packages/ui/components/` (+5 points) - Component name in `DS_PRIMITIVE_NAMES` (+3 points) - Imports from `@calcom/ui/components/` (+3 points) - Uses `forwardRef` (+2 points) - Has presentational props (variant, size, etc.) (+2 points) Subtracted if: - Has domain imports (-4 points) - Has data fetching (-3 points) - Has domain props (-3 points) **Classify if score >= 6** ### Custom UI Component A component is classified as `custom-ui-component` if: - Has domain props (booking, event, etc.) (+3 points) - File path in `modules/` or `features/` (+2 points) - Uses 4+ raw DOM tags (+2 points) - Uses zero DS primitives (+3 points) - Has styling (className/style) (+1 point) **Classify if score >= 5** ### Excluded (No Comment) - Route files (`page.tsx`, `layout.tsx`, `route.ts`) - Provider/Container components with data fetching - Barrel export files (index.ts with only exports) - Type-only files - Pure utility functions - Pure lazy wrappers ## Features - **Pre-filtering**: Skips non-UI files early (barrel exports, type-only, utilities) - **Idempotent**: Won't add duplicate comments if already present - **Preserves formatting**: Maintains existing code style - **Comprehensive detection**: Handles function, const, forwardRef, and class components ## Test Cases See `tests/fixtures/` for test cases covering: - Design system components - Custom UI components - Barrel exports (skipped) - Type-only files (skipped) 19:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$47"}}],["$","$L48",null,{"state":{"mutations":[],"queries":[{"state":{"data":{"json":{"id":"723b2c64-b7ae-4e16-bb1d-cf8d34c7ae2d","name":"cal-design-system-audit-custom-components","displayName":"cal-design-system-audit-custom-components","description":"Leaves comment on top of custom UI components to help with the design system audit","scope":null,"visibility":"public","downloadCount":24,"executionCount":0,"createdAt":"2026-01-08 05:11:22.260752+00","updatedAt":"2026-01-08 05:15:52.70639+00","latestVersion":"0.1.1","keywords":["mining","design-system","ui","audit"],"starCount":0,"author":"Alex Bit ","homepage":null,"repository":null,"license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$49","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","username":"alexbit-codemod","name":"Alex Bit","avatarUrl":"https://avatars.githubusercontent.com/u/78109534?v=4"},"isLegacy":false,"versions":[{"version":{"id":"f025b8e1-e198-4503-914f-926f993d5b0f","packageId":"723b2c64-b7ae-4e16-bb1d-cf8d34c7ae2d","version":"0.1.1","description":"Leaves comment on top of custom UI components to help with the design system audit","manifest":{"name":"cal-design-system-audit-custom-components","author":"Alex Bit ","license":"MIT","targets":{"versions":{},"languages":["typescript"],"frameworks":[]},"version":"0.1.1","keywords":["mining","design-system","ui","audit"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Leaves comment on top of custom UI components to help with the design system audit","dependencies":[],"schema_version":"1.0"},"checksum":"31d5af3eed63b0110e650e55f386489450f7a554d1e28931778021712d9616e5","size":12738,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/cal-design-system-audit-custom-components/0.1.1/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan TypeScript/TSX files and classify UI components","type":"js-ast-grep","language":"tsx"}]}]},"validated":false,"validationErrors":null,"publishedBy":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","deprecated":false,"deprecationMessage":null,"downloadCount":21,"cachedTestCases":{"input":"import { useState } from \"react\";\nimport type { Booking } from \"@calcom/features/bookings/types\";\n\ninterface BookingCardProps {\n booking: Booking;\n event: {\n title: string;\n duration: number;\n };\n className?: string;\n}\n\nexport function BookingCard({ booking, event, className }: BookingCardProps) {\n const [expanded, setExpanded] = useState(false);\n \n return (\n

\n {event.title}\n \n

\n {expanded && (\n

Duration: {event.duration} minutes

Status: {booking.status}

\n )}\n

\n );\n}\n","output":"import { useState } from \"react\";\nimport type { Booking } from \"@calcom/features/bookings/types\";\n\ninterface BookingCardProps {\n booking: Booking;\n event: {\n title: string;\n duration: number;\n };\n className?: string;\n}\n\n// codemod:custom-ui-component\nexport function BookingCard({ booking, event, className }: BookingCardProps) {\n const [expanded, setExpanded] = useState(false);\n \n return (\n

\n {event.title}\n \n

\n {expanded && (\n

Duration: {event.duration} minutes

Status: {booking.status}

\n )}\n

\n );\n}\n","isValid":true,"examples":[{"name":"custom-component","path":"tests/custom-component","input":"import { useState } from \"react\";\nimport type { Booking } from \"@calcom/features/bookings/types\";\n\ninterface BookingCardProps {\n booking: Booking;\n event: {\n title: string;\n duration: number;\n };\n className?: string;\n}\n\nexport function BookingCard({ booking, event, className }: BookingCardProps) {\n const [expanded, setExpanded] = useState(false);\n \n return (\n

\n {event.title}\n \n

\n {expanded && (\n

Duration: {event.duration} minutes

Status: {booking.status}

\n )}\n

\n {event.title}\n \n

\n {expanded && (\n

Duration: {event.duration} minutes

Status: {booking.status}

\n )}\n

\n );\n}\n","filename":"input.tsx"},{"name":"design-system-button","path":"tests/design-system-button","input":"import { forwardRef } from \"react\";\nimport classNames from \"@calcom/ui/classNames\";\n\ninterface ButtonProps {\n variant?: \"primary\" | \"secondary\";\n size?: \"base\" | \"sm\" | \"lg\";\n color?: string;\n children?: React.ReactNode;\n}\n\nexport const Button = forwardRef((props, ref) => {\n const { variant = \"primary\", size = \"base\", color, ...rest } = props;\n\n return (\n \n );\n});\n","output":"import { forwardRef } from \"react\";\nimport classNames from \"@calcom/ui/classNames\";\n\ninterface ButtonProps {\n variant?: \"primary\" | \"secondary\";\n size?: \"base\" | \"sm\" | \"lg\";\n color?: string;\n children?: React.ReactNode;\n}\n\n// codemod:design-system-component\nexport const Button = forwardRef((props, ref) => {\n const { variant = \"primary\", size = \"base\", color, ...rest } = props;\n\n return (\n \n );\n});\n","filename":"input.tsx"},{"name":"type-only","path":"tests/type-only","input":"export type ComponentProps = {\n variant: \"primary\" | \"secondary\";\n size: \"sm\" | \"md\" | \"lg\";\n};\n\nexport interface ButtonProps extends ComponentProps {\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport enum ButtonVariant {\n Primary = \"primary\",\n Secondary = \"secondary\",\n}\n","output":"export type ComponentProps = {\n variant: \"primary\" | \"secondary\";\n size: \"sm\" | \"md\" | \"lg\";\n};\n\nexport interface ButtonProps extends ComponentProps {\n disabled?: boolean;\n loading?: boolean;\n}\n\nexport enum ButtonVariant {\n Primary = \"primary\",\n Secondary = \"secondary\",\n}\n","filename":"input.ts"}]},"defaultWorkflowName":"default","createdAt":"2026-01-08T05:15:52.706Z","updatedAt":"2026-09-05 16:16:52.97377+00"},"publishedBy":{"id":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","username":"alexbit-codemod","name":"Alex Bit"},"insightsTemplate":{"packageVersionId":"f025b8e1-e198-4503-914f-926f993d5b0f","status":"ready","generatedAt":"2026-07-21T16:03:19.802Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan TypeScript/TSX files and classify UI components","type":"js-ast-grep","language":"tsx"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"b12b133a-5cb4-4b66-a3e6-efb463e5a38e","packageId":"723b2c64-b7ae-4e16-bb1d-cf8d34c7ae2d","version":"0.1.0","description":"Leaves comment on top of custom UI components to help with the design system audit","manifest":{"name":"cal-design-system-audit-custom-components","author":"Alex Bit ","license":"MIT","targets":{"versions":{},"languages":["typescript"],"frameworks":[]},"version":"0.1.0","keywords":["transformation","migration"],"registry":{"access":"private","visibility":"private"},"workflow":"workflow.yaml","description":"Leaves comment on top of custom UI components to help with the design system audit","dependencies":[],"schema_version":"1.0"},"checksum":"7ae6b62fa29e4c73c2e791b2e8e78485805c75a752bdc80e8e1500b54637a128","size":12726,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/private/cal-design-system-audit-custom-components/0.1.0/private-7ae6_ffmemrwwamo.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":[],"stepTypes":[],"workflowMetadata":{"nodes":[]},"validated":false,"validationErrors":null,"publishedBy":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","deprecated":false,"deprecationMessage":null,"downloadCount":3,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2026-01-08T05:11:22.260Z","updatedAt":"2026-09-06 12:29:43.898989+00"},"publishedBy":{"id":"4519f7a8-2ebc-4eaf-8c0a-e01be4c05878","username":"alexbit-codemod","name":"Alex Bit"},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":[],"stepTypes":[],"workflowMetadata":{"nodes":[]}}],"packageBehavior":"unknown","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"0.1.1"},"latestPackageBehavior":"workflow-only","cachedTestCases":"$19:1:props:state:queries:0:state:data:json:versions:0:version:cachedTestCases"},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"],"versions.1.version.createdAt":["Date"]},"referentialEqualities":{"cachedTestCases":["versions.0.version.cachedTestCases"]}}},"dataUpdateCount":1,"dataUpdatedAt":1789596322008,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"cal-design-system-audit-custom-components","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"cal-design-system-audit-custom-components\"},\"type\":\"query\"}]"}]},"children":"$L4a"}]] 1c:null 20:[["$","title","0",{"children":"cal-design-system-audit-custom-components - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Leaves comment on top of custom UI components to help with the design system audit"}],["$","meta","2",{"name":"author","content":"Alex Bit"}],["$","meta","3",{"name":"keywords","content":"cal-design-system-audit-custom-components, codemod, code transformation, automated refactoring, package, registry, mining, design-system, ui, audit"}],["$","meta","4",{"name":"creator","content":"Alex Bit"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/cal-design-system-audit-custom-components"}],["$","meta","20",{"property":"og:title","content":"cal-design-system-audit-custom-components - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Leaves comment on top of custom UI components to help with the design system audit"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/cal-design-system-audit-custom-components"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/cal-design-system-audit-custom-components"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"cal-design-system-audit-custom-components package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"cal-design-system-audit-custom-components - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Leaves comment on top of custom UI components to help with the design system audit"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/cal-design-system-audit-custom-components"}]]