more files

2026-05-06 23:19:35 +02:00
parent 563f82d497
commit 1634c4cc0d
22 changed files with 2959 additions and 119 deletions
@@ -0,0 +1,59 @@
+import { cn } from '../lib/utils'
+
+interface SkeletonProps {
+  className?: string
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded bg-[#F4F5F7]', className)}
+      aria-hidden="true"
+    />
+  )
+}
+
+export function RepoListSkeleton() {
+  return (
+    <div className="flex flex-col gap-3" aria-label="Loading repositories">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
+          <Skeleton className="size-8 rounded-full shrink-0" />
+          <div className="flex-1 flex flex-col gap-2">
+            <Skeleton className="h-4 w-48" />
+            <Skeleton className="h-3 w-72" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function PRListSkeleton() {
+  return (
+    <div className="flex flex-col gap-2" aria-label="Loading pull requests">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3 p-4 border border-[#DFE1E6] rounded">
+          <Skeleton className="h-5 w-12 rounded-full shrink-0" />
+          <div className="flex-1 flex flex-col gap-2">
+            <Skeleton className="h-4 w-64" />
+            <Skeleton className="h-3 w-40" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function DiffViewerSkeleton() {
+  return (
+    <div className="font-mono text-sm" aria-label="Loading diff">
+      {Array.from({ length: 12 }).map((_, i) => (
+        <div key={i} className="flex gap-2 py-1 px-2">
+          <Skeleton className="h-4 w-8 shrink-0" />
+          <Skeleton className={`h-4 ${i % 3 === 0 ? 'w-full' : i % 3 === 1 ? 'w-3/4' : 'w-1/2'}`} />
+        </div>
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,43 @@
+export const tokens = {
+  space: {
+    xs: 4,   // 4px
+    sm: 8,   // 8px
+    md: 16,  // 16px
+    lg: 24,  // 24px
+    xl: 32,  // 32px
+    xxl: 48, // 48px
+  },
+  color: {
+    brand:   '#0052CC', // Atlassian Blue
+    brandHover: '#0065FF',
+    surface: '#FFFFFF',
+    subtle:  '#F4F5F7',
+    elevated: '#FAFBFC',
+    text:    '#172B4D',
+    muted:   '#5E6C84',
+    border:  '#DFE1E6',
+    borderFocus: '#4C9AFF',
+    danger:  '#DE350B',
+    dangerSubtle: '#FFEBE6',
+    success: '#00875A',
+    successSubtle: '#E3FCEF',
+    warning: '#FF8B00',
+    warningSubtle: '#FFFAE6',
+    info:    '#0052CC',
+    infoSubtle: '#DEEBFF',
+  },
+  sidebar: {
+    collapsed: 56,
+    expanded:  320,
+  },
+  touchTarget: 44, // WCAG 2.5.5 minimum
+  borderRadius: {
+    sm: 3,
+    md: 4,
+    lg: 8,
+    full: 9999,
+  },
+} as const
+
+export type ColorToken = keyof typeof tokens.color
+export type SpaceToken = keyof typeof tokens.space