39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
257 lines
11 KiB
JavaScript
257 lines
11 KiB
JavaScript
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
|
|
import storybook from "eslint-plugin-storybook";
|
|
|
|
import js from '@eslint/js';
|
|
import typescript from '@typescript-eslint/eslint-plugin';
|
|
import typescriptParser from '@typescript-eslint/parser';
|
|
import react from 'eslint-plugin-react';
|
|
import reactHooks from 'eslint-plugin-react-hooks';
|
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
|
import jsxA11y from 'eslint-plugin-jsx-a11y';
|
|
|
|
export default [js.configs.recommended, {
|
|
files: ['**/*.{ts,tsx,js,jsx}'],
|
|
languageOptions: {
|
|
parser: typescriptParser,
|
|
parserOptions: {
|
|
ecmaFeatures: {
|
|
jsx: true,
|
|
},
|
|
ecmaVersion: 2022,
|
|
sourceType: 'module',
|
|
},
|
|
globals: {
|
|
// Browser globals
|
|
window: 'readonly',
|
|
document: 'readonly',
|
|
localStorage: 'readonly',
|
|
sessionStorage: 'readonly',
|
|
console: 'readonly',
|
|
setTimeout: 'readonly',
|
|
clearTimeout: 'readonly',
|
|
setInterval: 'readonly',
|
|
clearInterval: 'readonly',
|
|
fetch: 'readonly',
|
|
WebSocket: 'readonly',
|
|
File: 'readonly',
|
|
FormData: 'readonly',
|
|
CustomEvent: 'readonly',
|
|
Event: 'readonly',
|
|
CloseEvent: 'readonly',
|
|
MessageEvent: 'readonly',
|
|
KeyboardEvent: 'readonly',
|
|
HTMLElement: 'readonly',
|
|
HTMLDivElement: 'readonly',
|
|
HTMLInputElement: 'readonly',
|
|
HTMLButtonElement: 'readonly',
|
|
HTMLAnchorElement: 'readonly',
|
|
HTMLParagraphElement: 'readonly',
|
|
HTMLHeadingElement: 'readonly',
|
|
HTMLTextAreaElement: 'readonly',
|
|
HTMLSelectElement: 'readonly',
|
|
HTMLImageElement: 'readonly',
|
|
HTMLAudioElement: 'readonly',
|
|
Element: 'readonly',
|
|
Node: 'readonly',
|
|
MouseEvent: 'readonly',
|
|
Blob: 'readonly',
|
|
FileReader: 'readonly',
|
|
Image: 'readonly',
|
|
global: 'readonly',
|
|
NodeJS: 'readonly',
|
|
Buffer: 'readonly',
|
|
crypto: 'readonly',
|
|
performance: 'readonly',
|
|
require: 'readonly',
|
|
process: 'readonly',
|
|
// URL API globals
|
|
URL: 'readonly',
|
|
URLSearchParams: 'readonly',
|
|
// DOM API globals
|
|
DOMRect: 'readonly',
|
|
DOMRectReadOnly: 'readonly',
|
|
Headers: 'readonly',
|
|
navigator: 'readonly',
|
|
WindowEventMap: 'readonly',
|
|
requestAnimationFrame: 'readonly',
|
|
cancelAnimationFrame: 'readonly',
|
|
Notification: 'readonly',
|
|
NotificationOptions: 'readonly',
|
|
NotificationPermission: 'readonly',
|
|
IntersectionObserver: 'readonly',
|
|
IntersectionObserverInit: 'readonly',
|
|
MessageChannel: 'readonly',
|
|
confirm: 'readonly',
|
|
// Service Worker globals
|
|
self: 'readonly',
|
|
caches: 'readonly',
|
|
ServiceWorkerRegistration: 'readonly',
|
|
Cache: 'readonly',
|
|
CacheStorage: 'readonly',
|
|
Response: 'readonly',
|
|
Request: 'readonly',
|
|
clients: 'readonly',
|
|
// React globals
|
|
React: 'readonly',
|
|
// Test globals
|
|
beforeAll: 'readonly',
|
|
afterAll: 'readonly',
|
|
afterEach: 'readonly',
|
|
beforeEach: 'readonly',
|
|
describe: 'readonly',
|
|
it: 'readonly',
|
|
test: 'readonly',
|
|
expect: 'readonly',
|
|
vi: 'readonly',
|
|
vitest: 'readonly',
|
|
waitFor: 'readonly',
|
|
jest: 'readonly',
|
|
AbortController: 'readonly',
|
|
AbortSignal: 'readonly',
|
|
BroadcastChannel: 'readonly',
|
|
DOMException: 'readonly',
|
|
atob: 'readonly',
|
|
PerformanceNavigationTiming: 'readonly',
|
|
PerformanceObserver: 'readonly',
|
|
HTMLFormElement: 'readonly',
|
|
HTMLTableElement: 'readonly',
|
|
HTMLTableSectionElement: 'readonly',
|
|
HTMLTableRowElement: 'readonly',
|
|
HTMLTableCellElement: 'readonly',
|
|
HTMLTableCaptionElement: 'readonly',
|
|
HTMLSpanElement: 'readonly',
|
|
HTMLCanvasElement: 'readonly',
|
|
HTMLLabelElement: 'readonly',
|
|
FileList: 'readonly',
|
|
MediaQueryListEvent: 'readonly',
|
|
IntersectionObserver: 'readonly',
|
|
IntersectionObserverEntry: 'readonly',
|
|
IntersectionObserverCallback: 'readonly',
|
|
ResizeObserver: 'readonly',
|
|
ResizeObserverEntry: 'readonly',
|
|
HeadersInit: 'readonly',
|
|
EventListener: 'readonly',
|
|
},
|
|
},
|
|
plugins: {
|
|
'@typescript-eslint': typescript,
|
|
'react': react,
|
|
'react-hooks': reactHooks,
|
|
'react-refresh': reactRefresh,
|
|
'jsx-a11y': jsxA11y,
|
|
},
|
|
rules: {
|
|
// TypeScript
|
|
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
|
'@typescript-eslint/no-explicit-any': 'off',
|
|
'@typescript-eslint/no-non-null-assertion': 'warn',
|
|
|
|
// React
|
|
'react/react-in-jsx-scope': 'off',
|
|
'react/prop-types': 'off',
|
|
'react-hooks/rules-of-hooks': 'error',
|
|
'react-hooks/exhaustive-deps': 'warn',
|
|
'react-refresh/only-export-components': [
|
|
'warn',
|
|
{ allowConstantExport: true }
|
|
],
|
|
|
|
// General
|
|
'no-console': 'off',
|
|
'no-debugger': 'error',
|
|
'prefer-const': 'error',
|
|
'no-var': 'error',
|
|
'object-shorthand': 'error',
|
|
'prefer-template': 'error',
|
|
'no-unused-vars': 'off', // Handled by @typescript-eslint/no-unused-vars
|
|
'no-useless-escape': 'error',
|
|
'no-prototype-builtins': 'warn',
|
|
|
|
// Typography: Enforce type scale usage
|
|
// Warn on arbitrary text sizes in className strings (e.g., text-[10px], text-[9px])
|
|
// Note: SVG chart text (text-[2px], text-[1.5px]) may need exceptions - review case by case
|
|
'no-restricted-syntax': [
|
|
'warn',
|
|
{
|
|
selector:
|
|
"Literal[value=/text-\\[\\d+(\\.\\d+)?(px|rem)\\]/], TemplateElement[value.raw=/text-\\[\\d+(\\.\\d+)?(px|rem)\\]/]",
|
|
message:
|
|
'Use type scale classes (text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl) instead of arbitrary sizes. SVG chart text (text-[2px], text-[1.5px]) may be an exception - add eslint-disable comment if needed.',
|
|
},
|
|
// Spacing: Enforce spacing scale usage
|
|
// Warn on arbitrary spacing values that don't follow 4px base scale
|
|
// Valid scale values: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
|
|
// Arbitrary values like gap-[7px], p-[9px], etc. should use scale values instead
|
|
{
|
|
selector:
|
|
"Literal[value=/(gap-|p-|m-|px-|py-|mx-|my-|space-[xy]-)\\[\\d+(\\.\\d+)?(px|rem)\\]/], TemplateElement[value.raw=/(gap-|p-|m-|px-|py-|mx-|my-|space-[xy]-)\\[\\d+(\\.\\d+)?(px|rem)\\]/]",
|
|
message:
|
|
'Use spacing scale classes (gap-0 through gap-24, p-0 through p-24, etc.) instead of arbitrary sizes. Valid scale values follow 4px base: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24. For exceptions, add eslint-disable comment.',
|
|
},
|
|
// Colors: Prevent Tailwind default colors (use Kodo design system colors instead)
|
|
// Warn on default Tailwind color classes: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
|
|
// Allow: kodo-* colors, arbitrary values like text-[#fff], and color utilities without shades
|
|
{
|
|
selector:
|
|
"Literal[value=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/], TemplateElement[value.raw=/(text-|bg-|border-|ring-|outline-|divide-|placeholder-|from-|via-|to-|accent-|caret-|fill-|stroke-)(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)/]",
|
|
message:
|
|
'Use Kodo design system colors (kodo-cyan, kodo-red, kodo-lime, kodo-steel, etc.) instead of Tailwind default colors. See apps/web/src/styles/COLOR_USAGE.md for color mapping. For exceptions (e.g., test files), add eslint-disable comment.',
|
|
},
|
|
// Components: Enforce Button component usage (prevent native button elements)
|
|
// Warn on native <button> elements - use <Button> component from @/components/ui/button instead
|
|
{
|
|
selector: 'JSXOpeningElement[name.name="button"]',
|
|
message:
|
|
'Use the Button component from @/components/ui/button instead of native <button> elements. This ensures consistent styling, accessibility, and design system compliance. For exceptions (e.g., test files, third-party components), add eslint-disable comment.',
|
|
},
|
|
// Width: Avoid arbitrary width classes — use layout tokens or scale (w-4, max-w-layout-content, etc.)
|
|
{
|
|
selector:
|
|
"Literal[value=/.*(w-|min-w-|max-w-)\\[[^]]+\\].*/], TemplateElement[value.raw=/.*(w-|min-w-|max-w-)\\[[^]]+\\].*/]",
|
|
message:
|
|
'Avoid arbitrary width classes (w-[...], min-w-[...], max-w-[...]). Use scale (w-4, min-w-80) or layout tokens (max-w-layout-content). See docs/DESIGN_TOKENS.md. For exceptions (e.g. SVG), add eslint-disable.',
|
|
},
|
|
// Height: Avoid arbitrary height classes
|
|
{
|
|
selector:
|
|
"Literal[value=/.*(h-|min-h-|max-h-)\\[[^]]+\\].*/], TemplateElement[value.raw=/.*(h-|min-h-|max-h-)\\[[^]]+\\].*/]",
|
|
message:
|
|
'Avoid arbitrary height classes (h-[...], min-h-[...], max-h-[...]). Use scale (h-4, min-h-8) or layout tokens. See docs/DESIGN_TOKENS.md. For exceptions, add eslint-disable.',
|
|
},
|
|
// Rounded: Avoid arbitrary rounded — use rounded, rounded-lg, rounded-xl, rounded-full or var(--radius-xl)
|
|
{
|
|
selector:
|
|
"Literal[value=/.*rounded-\\[[^]]+\\].*/], TemplateElement[value.raw=/.*rounded-\\[[^]]+\\].*/]",
|
|
message:
|
|
'Avoid arbitrary rounded classes (rounded-[...]). Use rounded, rounded-lg, rounded-xl, rounded-full or rounded-[var(--radius-xl)]. See docs/DESIGN_TOKENS.md.',
|
|
},
|
|
// Shadow: Avoid arbitrary shadow — use tokens (shadow-card, shadow-modal, shadow-lg, etc.)
|
|
{
|
|
selector:
|
|
"Literal[value=/.*shadow-\\[[^]]+\\].*/], TemplateElement[value.raw=/.*shadow-\\[[^]]+\\].*/]",
|
|
message:
|
|
'Avoid arbitrary shadow classes (shadow-[...]). Use design tokens (shadow-card, shadow-modal, shadow-button-primary-glow) or Tailwind shadow-lg, shadow-xl. See docs/DESIGN_TOKENS.md. For exceptions, add eslint-disable.',
|
|
},
|
|
],
|
|
},
|
|
settings: {
|
|
react: {
|
|
version: 'detect',
|
|
},
|
|
},
|
|
}, {
|
|
ignores: [
|
|
'node_modules/',
|
|
'dist/',
|
|
'build/',
|
|
'target/',
|
|
'_archive/',
|
|
'archive/',
|
|
'*.config.js',
|
|
'*.config.ts',
|
|
'*.config.cjs',
|
|
'**/ui.backup/**',
|
|
],
|
|
}, ...storybook.configs["flat/recommended"]];
|