chore: improve formatting in README and clean up code #115
carhartlewisci.yml
on: push
Lint
25s
Type Check
28s
Unit Tests
35s
Storybook Tests
1m 40s
Build
48s
Annotations
20 errors and 10 warnings
|
Lint
Process completed with exit code 1.
|
|
Lint
@comp/example#lint: command (/home/runner/work/design-system/design-system/apps/example) /home/runner/setup-pnpm/node_modules/.bin/pnpm run lint exited (1)
|
|
Lint:
apps/example/src/app/(app)/vendors/[vendorId]/page.tsx#L66
`'` can be escaped with `'`, `‘`, `'`, `’`
|
|
Type Check
Process completed with exit code 2.
|
|
Type Check
File '@repo/typescript-config/react-library.json' not found.
|
|
Type Check
Type '{ children: Element[]; slot?: string; style?: CSSProperties | (CSSProperties & ((state: ButtonState) => CSSProperties)); ... 278 more ...; onClick: (event: BaseUIEvent<...>) => void; }' is not assignable to type 'IntrinsicAttributes & (ButtonProps & RefAttributes<HTMLElement>)'.
|
|
Type Check
Type '{ children: Element[]; slot?: string; style?: CSSProperties | (CSSProperties & ((state: ButtonState) => CSSProperties)); ... 277 more ...; className: string; }' is not assignable to type 'IntrinsicAttributes & (ButtonProps & RefAttributes<HTMLElement>)'.
|
|
Type Check
Type '{ children: Element[]; slot?: string; style?: CSSProperties | (CSSProperties & ((state: ButtonState) => CSSProperties)); ... 277 more ...; className: string; }' is not assignable to type 'IntrinsicAttributes & (ButtonProps & RefAttributes<HTMLElement>)'.
|
|
Type Check
Type '{ slot?: string; style?: CSSProperties | (CSSProperties & ((state: ButtonState) => CSSProperties)); title?: string; key?: Key; ... 277 more ...; className: string; }' is not assignable to type 'IntrinsicAttributes & (ButtonProps & RefAttributes<HTMLElement>)'.
|
|
Type Check
@trycompai/design-system#typecheck: command (/home/runner/work/design-system/design-system/packages/design-system) /home/runner/setup-pnpm/node_modules/.bin/pnpm run typecheck exited (2)
|
|
Unit Tests
Process completed with exit code 1.
|
|
[unit] tests/Button.test.tsx > Button > applies size classes:
apps/storybook/tests/Button.test.tsx#L80
Error: expect(element).toHaveClass("h-9")
Expected the element to have class:
h-9
Received:
focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2
❯ tests/Button.test.tsx:80:20
|
|
[unit] tests/Button.test.tsx > Button > shows spinner when loading:
apps/storybook/tests/Button.test.tsx#L35
TestingLibraryElementError: Unable to find an accessible element with the role "status" and name "Loading"
Here are the accessible roles:
button:
Name "LoadingLoading":
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90 h-7 gap-1 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
data-disabled=""
data-loading="true"
data-slot="button"
disabled=""
tabindex="0"
type="button"
/>
--------------------------------------------------
img:
Name "Loading":
<svg
aria-label="Loading"
class="size-4 shrink-0 animate-spin"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90 h-7 gap-1 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
data-disabled=""
data-loading="true"
data-slot="button"
disabled=""
tabindex="0"
type="button"
>
<svg
aria-label="Loading"
class="size-4 shrink-0 animate-spin"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 10H6.78A11 11 0 0127 16h2A13 13 0 006 7.68V4H4v8h8zM20 22h5.22A11 11 0 015 16H3a13 13 0 0023 8.32V28h2V20H20z"
/>
</svg>
Loading
</button>
</div>
</body>
❯ Object.getElementError ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/config.js:37:19
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/Button.test.tsx:35:19
|
|
[unit] tests/Badge.test.tsx > Badge > variants > applies outline variant classes:
apps/storybook/tests/Badge.test.tsx#L34
Error: expect(element).toHaveClass("border-border")
Expected the element to have class:
border-border
Received:
gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none border border-border/50 bg-transparent text-foreground [a]:hover:bg-muted/30
❯ tests/Badge.test.tsx:34:43
|
|
[unit] tests/Badge.test.tsx > Badge > variants > applies secondary variant classes:
apps/storybook/tests/Badge.test.tsx#L24
Error: expect(element).toHaveClass("bg-secondary")
Expected the element to have class:
bg-secondary
Received:
gap-1 rounded-sm px-1.5 py-1 text-[10px] font-semibold uppercase tracking-wider leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] transition-colors has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden antialiased select-none bg-muted text-muted-foreground [a]:hover:bg-muted/80
❯ tests/Badge.test.tsx:24:43
|
|
Build
Process completed with exit code 1.
|
|
Build
@comp/example#build: command (/home/runner/work/design-system/design-system/apps/example) /home/runner/setup-pnpm/node_modules/.bin/pnpm run build exited (1)
|
|
Storybook Tests
Process completed with exit code 1.
|
|
[storybook (chromium)] stories/Dialog.stories.tsx > With Textarea:
apps/storybook/stories/Dialog.stories.tsx#L158
Error:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/organisms-dialog--with-textarea&addonPanel=storybook/interactions/panel
expect(element).toBeVisible()
Received element is not visible:
<textarea
class="border-input dark:bg-input/30 focus-visible:border-primary focus-visible:ring-primary/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-sm border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 min-w-0 w-full resize-y outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=sm]:max-w-xs data-[size=default]:max-w-md data-[size=lg]:max-w-xl data-[size=full]:max-w-none"
data-size="default"
data-slot="textarea"
placeholder="Add optional comment or reason (will be added as a comment)"
/>
❯ toBeVisible stories/Dialog.stories.tsx:158:27
❯ node_modules/.cache/storybook/ea097f2041f0bda258f82ea653bd9b76e7bd010ce2223ed46210633281efca87/sb-vitest/deps/@storybook_addon-vitest_internal_test-utils.js?v=aaad3e5d:117:100
|
|
[storybook (chromium)] stories/Button.stories.tsx > Loading:
apps/storybook/stories/Button.stories.tsx#L105
TestingLibraryElementError:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/atoms-button--loading&addonPanel=storybook/interactions/panel
Unable to find an accessible element with the role "status" and name "Loading"
Here are the accessible roles:
button:
Name "Loading Loading...":
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90 h-7 gap-1 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
data-disabled=""
data-loading="true"
data-slot="button"
disabled=""
tabindex="0"
type="button"
/>
--------------------------------------------------
img:
Name "Loading":
<svg
aria-label="Loading"
class="size-4 shrink-0 animate-spin"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<div>
<div
class=""
>
<div
class="bg-background text-foreground min-h-screen p-6"
>
<button
class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent text-[13px] font-medium leading-none [text-box-trim:both] [text-box-edge:cap_alphabetic] focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all duration-200 ease-out active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90 h-7 gap-1 px-2 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5"
data-disabled=""
data-loading="true"
data-slot="button"
disabled=""
tabindex="0"
type="button"
>
<svg
aria-label="Loading"
class="size-4 shrink-0 animate-spin"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 10H6.78A11 11 0 0127 16h2A13 13 0 006 7.68V4H4v8h8zM20 22h5.22A11 11 0 015 16H3a13 13 0 0023 8.32V28h2V20H20z"
/>
</svg>
Loading...
</button>
</div>
</div>
</div>
❯ getByRole stories/Button.stories.tsx:105:24
❯ node_modules/.cache/storybook/ea097f2041f0bda258f82ea653bd9b76e7bd010ce2223ed46210633281efca87/sb-vitest/deps/@storybook_addon-vitest_internal_test-utils.js?v=aaad3e5d:117:100
|
|
Lint:
apps/example/src/components/shell/nav-config.tsx#L15
'Wallet' is defined but never used
|
|
Lint:
apps/example/src/components/shell/nav-config.tsx#L2
'Book' is defined but never used
|
|
Lint:
apps/example/src/components/shell/app-shell-client.tsx#L40
'Stack' is defined but never used
|
|
Lint:
apps/example/src/components/shell/app-shell-client.tsx#L12
'AppShellNavGroup' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/projects/page.tsx#L15
'Text' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/policies/[id]/page.tsx#L25
'Link' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/policies/[id]/page.tsx#L11
'HStack' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/page.tsx#L21
'PageHeaderActions' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/page.tsx#L12
'Heading' is defined but never used
|
|
Lint:
apps/example/src/app/(app)/page.tsx#L10
'CardContent' is defined but never used
|