{"_id":"@ademaydemir/ad-design","_rev":"2-1f8479befbd6123e5d87904b9d04ad1c","name":"@ademaydemir/ad-design","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@ademaydemir/ad-design","version":"0.2.0","license":"MIT","_id":"@ademaydemir/ad-design@0.2.0","maintainers":[{"name":"ademaydemir","email":"aydemir.adem@icloud.com"}],"dist":{"shasum":"eae5b8164e0f2a24be83a4d81f0cff8c9659e3cc","tarball":"https://registry.npmjs.org/@ademaydemir/ad-design/-/ad-design-0.2.0.tgz","fileCount":6,"integrity":"sha512-4BLmfDfSTj1VLWZ6G+So5BZCnbo7dIEsLFSS44jPNvQiTqjT3qhSjVQpcfRuYKqJ0cEQBz8iMRD4Cm4S+3nGqA==","signatures":[{"sig":"MEUCIQDPHZmgot2pyLH2iQpNnVi9ciZmNU0Og72Ok8vxB/9U+gIgCjsa70Xy2G/s0XmD/VDiJeDs8N/OLSoCgz4xFOe0UY8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31082},"style":"dist/ad.css","scripts":{"dev":"npm run build-tokens && vite","demo":"npx serve .","build":"npm run build-tokens && vite build","preview":"vite preview","storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook storybook dev -p 6006 -c .storybook","build-tokens":"node build-tokens.js","prepublishOnly":"npm run build","test-storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook vitest run -c vitest.storybook.config.js","build-storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook storybook build -c .storybook"},"_npmUser":{"name":"ademaydemir","email":"aydemir.adem@icloud.com"},"_npmVersion":"11.11.1","description":"Reusable and extensible vanilla CSS UI framework starter","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.9","vitest":"^4.1.4","postcss":"^8.5.6","storybook":"^10.3.5","playwright":"^1.59.1","tailwindcss":"^3.4.18","autoprefixer":"^10.4.21","@vitest/coverage-v8":"^4.1.4","@storybook/html-vite":"^10.3.5","@storybook/addon-a11y":"^10.3.5","@storybook/addon-docs":"^10.3.5","@storybook/addon-vitest":"^10.3.5","@chromatic-com/storybook":"^5.1.1","@vitest/browser-playwright":"^4.1.4"},"_npmOperationalInternal":{"tmp":"tmp/ad-design_0.2.0_1775918177397_0.39915764316432534","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@ademaydemir/ad-design","version":"0.2.1","description":"Reusable and extensible vanilla CSS UI framework starter","style":"dist/ad.css","scripts":{"build-tokens":"node build-tokens.js","dev":"npm run build-tokens && vite","build":"npm run build-tokens && vite build && node scripts/prepare-dist-css.cjs","prepublishOnly":"npm run build","preview":"vite preview","demo":"npx serve .","storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook storybook dev -p 6006 -c .storybook","build-storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook storybook build -c .storybook","test-storybook":"npm run build-tokens && CACHE_DIR=$PWD/.cache/storybook vitest run -c vitest.storybook.config.js"},"license":"MIT","devDependencies":{"@chromatic-com/storybook":"^5.1.1","@storybook/addon-a11y":"^10.3.5","@storybook/addon-docs":"^10.3.5","@storybook/addon-vitest":"^10.3.5","@storybook/html-vite":"^10.3.5","@vitest/browser-playwright":"^4.1.4","@vitest/coverage-v8":"^4.1.4","autoprefixer":"^10.4.21","playwright":"^1.59.1","postcss":"^8.5.6","storybook":"^10.3.5","tailwindcss":"^3.4.18","vite":"^7.1.9","vitest":"^4.1.4"},"_id":"@ademaydemir/ad-design@0.2.1","_nodeVersion":"24.13.0","_npmVersion":"11.11.1","dist":{"integrity":"sha512-TXPgQizZBNtiq6lF7uTcm1yncmb2TMJDQqJbVmtm//67lUf3LHJ4J7Vif1cb4YIDvFZHatwOWMDmfF/qPagPHg==","shasum":"64aeb7eb4f827247ace41f68aec4accd22ee2664","tarball":"https://registry.npmjs.org/@ademaydemir/ad-design/-/ad-design-0.2.1.tgz","fileCount":7,"unpackedSize":53568,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDk3DA+iuxANi9Y0mTvzT75C3477HsdN1fHrvzMXq/w7gIgQfO31YzTtjp9KGGG0Z+2ECkUehHxCD5t9VRJ4Qxtfp0="}]},"_npmUser":{"name":"ademaydemir","email":"aydemir.adem@icloud.com"},"directories":{},"maintainers":[{"name":"ademaydemir","email":"aydemir.adem@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ad-design_0.2.1_1775918649554_0.777193289858761"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-11T14:36:17.252Z","modified":"2026-04-11T14:44:09.858Z","0.2.0":"2026-04-11T14:36:17.568Z","0.2.1":"2026-04-11T14:44:09.757Z"},"license":"MIT","description":"Reusable and extensible vanilla CSS UI framework starter","maintainers":[{"name":"ademaydemir","email":"aydemir.adem@icloud.com"}],"readme":"# ad-desing\n\n`ad-desing`, farklı projelerde tekrar kullanılabilen, modüler ve ölçeklenebilir bir **vanilla CSS UI framework / design system** altyapısıdır.\n\n## Hedef\n\n- Semantic component class'ları (`.btn`, `.card`, `.alert`)\n- Utility class yaklaşımı (`.d-flex`, `.mt-4`, `.text-center`)\n- Token tabanlı theme yönetimi\n- Framework bağımsız kullanım (React, Vue, ASP.NET Core MVC, plain HTML)\n- Storybook ile yaşayan dokümantasyon\n\n## Kurulum\n\n```bash\nnpm install\nnpm run build-tokens\n```\n\n## NPM Paketi Olarak Kullanım\n\nPaket başka bir projeye eklendiğinde (React, Vue, Blazor, Jinja tabanlı sunucu render vb.) tek bir derlenmiş CSS dosyası import edilir:\n\n```bash\nnpm i @ademaydemir/ad-design\n```\n\nBundler kullanan projelerde:\n\n```js\nimport \"@ademaydemir/ad-design/dist/ad.css\";\n```\n\nBundler kullanmayan projelerde:\n- `node_modules/@ademaydemir/ad-design/dist/ad.css` dosyasını kendi statik klasörüne kopyalayın\n- layout dosyanızda `<link rel=\"stylesheet\" href=\"/css/ad.css\">` olarak ekleyin\n\nStorybook:\n\n```bash\nnpm run storybook\n```\n\nRoot playground (Vite):\n\n```bash\nnpm run dev\n```\n\n## Storybook Bilgi Mimarisi\n\n- `Foundations`\n  - `Colors`\n  - `Typography`\n  - `Spacing`\n  - `Radius`\n  - `Shadows`\n- `Components`\n  - `Alert`\n  - `Badge`\n  - `Button`\n  - `Card`\n  - `Input`\n  - `Select`\n  - `Textarea`\n- `Utilities`\n  - `Display`\n  - `Flex`\n  - `Spacing`\n  - `Text`\n  - `Radius`\n  - `Shadow`\n\n## Proje Yapısı\n\n```text\nad-desing/\n  .github/workflows/\n  .storybook/\n    main.js\n    preview.js\n    preview-head.html\n    static/logos/{en,tr}/\n  tokens/\n    colors.json\n  src/\n    assets/logos/{en,tr}/\n    base/\n    css/\n      ad.css\n      utilities.css\n    styles/\n      tokens.css (build ile üretilir)\n    components/\n      *.css\n      *.js\n      *.stories.js\n      STORY_STANDARD.md\n      StoryTemplate.js\n      storyHelpers.js\n    utilities/\n    index.css\n  build-tokens.js\n  tailwind.config.js\n  tailwind-preset.js\n  postcss.config.js\n  vite.config.js\n  index.html\n```\n\n## Token ve Theme Hattı\n\n- Tek kaynak: `tokens/colors.json`\n- Üretici script: `build-tokens.js`\n- Çıktı: `src/styles/tokens.css`\n\n`tokens.css` içinde:\n- light varsayılan palette (`:root`)\n- dark override (`[data-theme=\"dark\"]`)\n- semantic alias tokenlar (`--ui-color-*`)\n- typography / spacing / radius / shadow / breakpoint tokenları\n\n## Tailwind Entegrasyonu\n\nTailwind aktif olarak projeye entegredir:\n- `tailwind.config.js`\n- `tailwind-preset.js`\n- `postcss.config.js`\n\nNotlar:\n- `corePlugins.preflight = false` (mevcut component görünümünü korumak için)\n- Tailwind tasarım tokenları `var(--ui-*)` üzerinden consume eder\n\n## Component Story Standardı\n\nHer yeni component için `src/components` altında:\n- `<Component>.js`\n- `<Component>.stories.js`\n\nÖnerilen story başlıkları:\n- `Overview`\n- `Variants`\n- `Sizes`\n- `States`\n- `Usage`\n- `Playground`\n\nForm bileşenlerinde `States` sırası:\n1. default\n2. focus\n3. disabled\n4. invalid/error\n5. placeholder\n\nDetaylı standart için:\n- `src/components/STORY_STANDARD.md`\n\n## Dark Theme Hazırlığı\n\nStorybook toolbar üzerinden `Light / Dark` seçimi yapılır.\n\nUygulama:\n- `preview.js` global theme toolbar\n- root element üstünde `data-theme` set edilmesi\n- token değerlerinin otomatik değişmesi\n\n## Test ve Build\n\n```bash\nnpm run build-tokens\nnpm run build-storybook\nnpm run test-storybook\n```\n\n## Kısa Kullanım Örnekleri\n\n```html\n<button class=\"btn btn-primary\">Kaydet</button>\n<input class=\"input\" placeholder=\"Ad Soyad\" />\n<select class=\"select\"><option>Seçim yapın</option></select>\n<textarea class=\"textarea\" placeholder=\"Mesaj\"></textarea>\n<div class=\"alert alert-info\">Bilgilendirme</div>\n<span class=\"badge badge-success\">Aktif</span>\n```\n","readmeFilename":"README.md"}