Refactor/stories notion review

apps/frontend-demo/src/components/atoms/skeleton-loader.tsx

@@ -1,6 +1,7 @@
 import { tv } from "@techsio/ui-kit/utils"
 import type * as React from "react"
 import type { VariantProps } from "tailwind-variants"
+import "../../tokens/app-components/atoms/_skeleton-loader.css"
 
 const skeletonVariants = tv({
   base: [
@@ -10,7 +11,7 @@ const skeletonVariants = tv({
     "before:absolute",
     "before:inset-0",
     "before:-translate-x-full",
-    "before:animate-[skeleton-shimmer_var(--skeleton-shimmer-duration)_ease-in-out_infinite]",
+    "before:animate-skeleton-shimmer",
     "before:bg-gradient-to-r",
     "before:from-transparent",
     "before:via-skeleton-shimmer",

apps/frontend-demo/src/components/auth/auth-dropdown.tsx

@@ -27,7 +27,7 @@ export function AuthDropdown() {
         trigger={
           <span className="text-nowrap text-white text-xs">Přihlásit se</span>
         }
-        triggerClassName="data-[state=open]:ring-0 data-[state=open]:ring-offset-0 rounded-sm bg-tertiary hover:bg-tertiary/60 mr-150"
+        triggerClassName="data-[state=open]:outline-none rounded-sm bg-tertiary hover:bg-tertiary/60 mr-150"
       >
         <QuickLoginForm />
       </Popover>
@@ -80,7 +80,7 @@ export function AuthDropdown() {
           </span>
         </span>
       }
-      triggerClassName="hover:bg-transparent active:bg-transparent data-[state=open]:ring-0 data-[state=open]:ring-offset-0"
+      triggerClassName="hover:bg-transparent active:bg-transparent data-[state=open]:outline-none"
     >
       <ul className="space-y-1">
         {menuItems.map((item) => (

apps/frontend-demo/src/components/header.tsx

@@ -94,7 +94,7 @@ export function Header({
                     )}
                   </div>
                 }
-                triggerClassName="data-[state=open]:ring-0 data-[state=open]:ring-offset-0"
+                triggerClassName="data-[state=open]:outline-none"
               >
                 <CartPreview />
               </Popover>
@@ -109,7 +109,7 @@ export function Header({
               {/* Mobile menu button */}
               {showMobileMenu && (
                 <Button
-                  className="inline-flex items-center justify-center rounded-header-mobile-menu p-header-mobile-menu-padding text-header-icon-size text-header-mobile-menu-text hover:bg-header-mobile-menu-hover hover:text-header-mobile-menu-text-hover focus:outline-none focus:ring-header-mobile-menu-color focus:ring-header-mobile-menu-width focus:ring-inset lg:hidden"
+                  className="inline-flex items-center justify-center rounded-header-mobile-menu p-header-mobile-menu-padding text-header-icon-size text-header-mobile-menu-text hover:bg-header-mobile-menu-hover hover:text-header-mobile-menu-text-hover focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-ring focus-visible:outline-offset-(length:--default-ring-offset) lg:hidden"
                   icon="token-icon-menu"
                   onClick={() => setIsMobileMenuOpen(true)}
                   size="sm"

apps/frontend-demo/src/components/molecules/header-search.tsx

@@ -109,7 +109,7 @@ export function HeaderSearch() {
           icon="token-icon-search"
         />
       }
-      triggerClassName="data-[state=open]:ring-0 data-[state=open]:ring-offset-0"
+      triggerClassName="data-[state=open]:outline-none"
     >
       <form
         onSubmit={(e) => {

apps/frontend-demo/src/components/molecules/payment-selection.tsx

@@ -41,7 +41,7 @@ export function PaymentSelection({
           <Button
             aria-label={`Vybrat platební metodu ${method.name}`}
             aria-pressed={selected === method.id}
-            className="relative flex h-[100px] flex-col items-center justify-center rounded-lg border-2 border-border-subtle bg-surface p-2 transition-all duration-200 hover:bg-surface-hover hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base data-[selected=true]:border-primary data-[selected=true]:bg-surface-selected data-[selected=true]:shadow-lg sm:h-[140px] sm:p-3 lg:h-[180px] lg:p-4"
+            className="relative flex h-[100px] flex-col items-center justify-center rounded-lg border-2 border-border-subtle bg-surface p-2 transition-all duration-200 hover:bg-surface-hover hover:shadow-md focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-ring focus-visible:outline-offset-(length:--default-ring-offset) data-[selected=true]:border-primary data-[selected=true]:bg-surface-selected data-[selected=true]:shadow-lg sm:h-[140px] sm:p-3 lg:h-[180px] lg:p-4"
             data-selected={selected === method.id}
             key={method.id}
             onClick={() => onSelect(method.id)}

apps/frontend-demo/src/components/molecules/shipping-selection.tsx

@@ -97,7 +97,7 @@ export function ShippingSelection({
           <Button
             aria-checked={selected === method.id}
             aria-label={`${method.name} - ${method.calculated_price.calculated_amount}`}
-            className="relative flex items-center rounded-lg border-2 border-border-subtle bg-surface p-3 transition-all duration-200 hover:bg-surface-hover hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base data-[selected=true]:border-primary data-[selected=true]:bg-surface-selected data-[selected=true]:shadow-lg sm:p-4"
+            className="relative flex items-center rounded-lg border-2 border-border-subtle bg-surface p-3 transition-all duration-200 hover:bg-surface-hover hover:shadow-md focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width) focus-visible:outline-ring focus-visible:outline-offset-(length:--default-ring-offset) data-[selected=true]:border-primary data-[selected=true]:bg-surface-selected data-[selected=true]:shadow-lg sm:p-4"
             data-selected={selected === method.id}
             key={method.id}
             onClick={() => onSelect(method.id)}

apps/frontend-demo/src/hooks/use-cart.ts

@@ -11,6 +11,25 @@ import { sdk } from "@/lib/medusa-client"
 import { queryKeys } from "@/lib/query-keys"
 
 export type Cart = HttpTypes.StoreCart | undefined
+
+type ErrorResponse = {
+  status?: number
+  message?: string
+  response?: { status?: number; data?: { message?: string } }
+}
+
+const getErrorStatus = (error: unknown): number | undefined => {
+  if (!error || typeof error !== "object") return undefined
+  const err = error as ErrorResponse
+  return err.status ?? err.response?.status
+}
+
+const getErrorMessage = (error: unknown): string | undefined => {
+  if (!error || typeof error !== "object") return undefined
+  const err = error as ErrorResponse
+  return err.message ?? err.response?.data?.message
+}
+
 // Cart hook using React Query
 export function useCart() {
   const { selectedRegion } = useRegions()
@@ -48,10 +67,10 @@ export function useCart() {
           }
 
           return cart
-        } catch (err: any) {
+        } catch (err) {
           console.error("[Cart Hook] Failed to retrieve cart:", err)
           // Only remove cart ID if it's a 404 (cart not found)
-          if (err?.status === 404 || err?.response?.status === 404) {
+          if (getErrorStatus(err) === 404) {
             if (typeof window !== "undefined") {
               localStorage.removeItem(STORAGE_KEYS.CART_ID)
             }
@@ -78,9 +97,9 @@ export function useCart() {
     },
     enabled: !!selectedRegion,
     ...cacheConfig.realtime, // 30s stale, 5m gc, refetch on focus
-    retry: (failureCount, error: any) => {
+    retry: (failureCount, error) => {
       // Don't retry if cart was not found
-      if (error?.status === 404) return false
+      if (getErrorStatus(error) === 404) return false
       // Retry up to 3 times for other errors
       return failureCount < 3
     },
@@ -114,12 +133,11 @@ export function useCart() {
         type: "success",
       })
     },
-    onError: (error: any) => {
+    onError: (error) => {
       console.error("[Cart Hook] Add item error:", error)
 
       // Parse error message for specific inventory issue
-      const errorMessage =
-        error?.message || error?.response?.data?.message || "Unknown error"
+      const errorMessage = getErrorMessage(error) || "Unknown error"
 
       if (errorMessage.toLowerCase().includes("inventory")) {
         toast.create({

apps/frontend-demo/src/lib/query-keys.ts

@@ -37,7 +37,10 @@ export const queryKeys = {
   regions: () => [...queryKeys.all, "regions"] as const,
 
   // Cart queries
-  cart: (id?: string) => [...queryKeys.all, "cart", id] as const,
+  cart: (id?: string) => {
+    const base = [...queryKeys.all, "cart"] as const
+    return id ? ([...base, id] as const) : base
+  },
 
   // Authentication queries
   auth: {

apps/frontend-demo/src/tokens/_overrides-components.css

@@ -14,34 +14,19 @@
   --border-width-accordion: 1px;
 
   /* === BUTTON === */
-  /* Change from --alpha-ring to --opacity-ring for all focus rings */
-  --color-button-ring-primary: --alpha(
-    var(--color-button-primary) /
-    var(--opacity-ring)
-  );
-  --color-button-ring-secondary: --alpha(
-    var(--color-button-secondary) /
-    var(--opacity-ring)
-  );
-  --color-button-ring-tertiary: --alpha(
-    var(--color-button-tertiary) /
-    var(--opacity-ring)
-  );
-  --color-button-ring-warning: --alpha(
-    var(--color-button-warning) /
-    var(--opacity-ring)
-  );
-  --color-button-ring-danger: --alpha(
-    var(--color-button-danger) /
-    var(--opacity-ring)
-  );
+  /* Solid focus ring colors */
+  --color-button-ring-primary: var(--color-button-primary);
+  --color-button-ring-secondary: var(--color-button-secondary);
+  --color-button-ring-tertiary: var(--color-button-tertiary);
+  --color-button-ring-warning: var(--color-button-warning);
+  --color-button-ring-danger: var(--color-button-danger);
   --color-button-text-secondary: var(--color-fg-dark);
 
   /* === INPUT === */
   /* Different padding for small inputs */
   --padding-input-sm: var(--spacing-3xs) var(--spacing-2xs);
   --padding-input-md: var(--spacing-2xs) var(--spacing-xs);
-  --color-input-ring: --alpha(var(--color-tertiary) / 50%);
+  --color-input-ring: var(--color-tertiary);
   /* Font weight token name change */
   --font-label: var(--font-weight-bold);
 

apps/frontend-demo/src/tokens/_overrides.css

@@ -330,7 +330,7 @@
   --spacing: 0.25rem;
 
   /* Focus ring */
-  --color-ring-primary: --alpha(var(--color-primary) / var(--opacity-ring));
+  --color-ring-primary: var(--color-primary);
 
   /* Aspect ratio */
   --aspect-ratio-square: 1 / 1;

apps/frontend-demo/src/tokens/app-components/atoms/_skeleton-loader.css

@@ -30,3 +30,8 @@
     transform: translateX(100%);
   }
 }
+
+@utility animate-skeleton-shimmer {
+  animation: skeleton-shimmer var(--skeleton-shimmer-duration) ease-in-out
+    infinite;
+}

apps/medusa-be/src/utils/__tests__/errors.unit.spec.ts

@@ -58,7 +58,7 @@ describe("shouldCaptureException", () => {
       ["INVALID_DATA", MedusaError.Types.INVALID_DATA],
       ["NOT_FOUND", MedusaError.Types.NOT_FOUND],
     ])("skips %s errors", (_, errorType) => {
-      const error = { type: errorType, message: "test" }
+      const error = new MedusaError(errorType, "test")
       expect(shouldCaptureException(error)).toBe(false)
     })
   })
@@ -74,7 +74,7 @@ describe("shouldCaptureException", () => {
       ["DB_ERROR", MedusaError.Types.DB_ERROR],
       ["UNEXPECTED_STATE", MedusaError.Types.UNEXPECTED_STATE],
     ])("captures %s errors", (_, errorType) => {
-      const error = { type: errorType, message: "test" }
+      const error = new MedusaError(errorType, "test")
       expect(shouldCaptureException(error)).toBe(true)
     })
   })

apps/medusa-be/src/utils/errors.ts

@@ -24,11 +24,9 @@ export function normalizeError(throwable: unknown): Error {
 }
 
 export function shouldCaptureException(error: unknown): boolean {
-  if (error === null || typeof error !== "object") {
-    return true
+  if (error instanceof MedusaError) {
+    return !CLIENT_ERROR_TYPES.has(error.type)
   }
 
-  const errorObj = error as { type?: string }
-
-  return !(errorObj.type && CLIENT_ERROR_TYPES.has(errorObj.type))
+  return true
 }

libs/ui/.claude/CLAUDE.md

@@ -0,0 +1 @@
+../AGENTS.md

libs/ui/AGENTS.md

@@ -36,7 +36,7 @@ stories/
 - `bunx nx run ui:storybook`   # Component preview
 - `bunx nx run ui:build`       # Build library
 - `pnpm validate:tokens`       # Token validation
-- `bunx biome check --write <file>`   # Lint specific file (never ".")
+- `bunx biome check --write <file>`   # Lint-specific file (never ".")
 
 ## PR Descriptions (CLI)
 

libs/ui/src/atoms/badge.tsx

@@ -8,7 +8,7 @@ const badgeVariants = tv({
     "p-badge",
     "rounded-badge border-badge-border",
     "font-badge text-badge-size",
-    "border-(length:--border-width-badge-dynamic)",
+    "border-(length:--border-width-badge)",
   ],
   variants: {
     variant: {

libs/ui/src/atoms/button.tsx

@@ -9,10 +9,10 @@ export const buttonVariants = tv({
     "inline-flex cursor-pointer items-baseline justify-center",
     "font-medium",
     "transition-all duration-200 motion-reduce:transition-none",
-    "focus:outline-none",
-    "focus-visible:ring",
-    "focus-visible:ring-button-ring",
-    "disabled:pointer-events-none disabled:text-button-fg-disabled",
+    "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+    "focus-visible:outline-button-ring",
+    "focus-visible:outline-offset-(length:--default-ring-offset)",
+    "disabled:cursor-not-allowed disabled:text-button-fg-disabled",
   ],
   variants: {
     variant: {
@@ -26,8 +26,9 @@ export const buttonVariants = tv({
       solid: "disabled:bg-button-bg-disabled",
       light: "disabled:bg-button-bg-disabled",
       borderless:
-        "bg-button-bg-borderless hover:bg-button-bg-borderless-hover active:bg-button-bg-borderless-active",
-      outlined: "border disabled:border-button-border-disabled",
+        "bg-button-bg-borderless hover:bg-button-bg-borderless-hover active:bg-button-bg-borderless-active disabled:hover:bg-button-bg-borderless",
+      outlined:
+        "border bg-button-bg-outlined disabled:border-button-border-disabled disabled:hover:bg-button-bg-outlined",
       unstyled: "",
     },
     uppercase: {

libs/ui/src/atoms/checkbox.tsx

@@ -25,11 +25,14 @@ const checkboxVariants = tv({
     "disabled:checked:text-checkbox-fg-disabled",
     "disabled:checked:border-checkbox-border-disabled",
     "transition-all duration-200 motion-reduce:transition-none",
-    "focus:outline-none",
-    "focus-visible:ring",
-    "focus-visible:ring-checkbox-ring-focus",
-    "aria-invalid:border-checkbox-border-error",
-    "aria-invalid:ring-checkbox-ring-error",
+    "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+    "focus-visible:outline-checkbox-ring-focus",
+    "focus-visible:outline-offset-(length:--default-ring-offset)",
+    "data-invalid:border-(length:--border-width-validation)",
+    "data-invalid:border-checkbox-border-error",
+    "data-invalid:outline-(style:--default-ring-style) data-invalid:outline-(length:--default-ring-width)",
+    "data-invalid:outline-checkbox-ring-error",
+    "data-invalid:outline-offset-(length:--default-ring-offset)",
   ],
 })
 
@@ -61,6 +64,7 @@ export function Checkbox({
     <input
       aria-invalid={invalid || undefined}
       className={checkboxVariants({ className })}
+      data-invalid={invalid || undefined}
       ref={setIndeterminate}
       type="checkbox"
       {...props}