cameleer/design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(assets): replace named exports with wildcard ./assets/* export
All checks were successful
Build & Publish / publish (push) Successful in 1m10s
Details

Browse Source 
Consumers now import via @cameleer/design-system/assets/<filename> instead
of named aliases like /logo-32. Simpler, more flexible, and supports any
future assets without adding new export entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-06 22:43:01 +02:00
parent 32a49690fa
commit 4841a7ad7c
4 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
CLAUDE.md
View File

@@ -119,13 +119,11 @@ import type { ChartSeries, DataPoint } from '@cameleer/design-system'
// Styles (once, at app root) // Styles (once, at app root)
import '@cameleer/design-system/style.css' import '@cameleer/design-system/style.css'
// Brand assets (static files — logo variants and favicon sizes) // Brand assets (static files via ./assets/* export)
import logo from '@cameleer/design-system/logo' // full resolution PNG import logo from '@cameleer/design-system/assets/cameleer3-logo.png' // full resolution
import logo16 from '@cameleer/design-system/logo-16' // 16×16 favicon import logo32 from '@cameleer/design-system/assets/cameleer3-32.png' // 32×32 favicon
import logo32 from '@cameleer/design-system/logo-32' // 32×32 favicon import logo180 from '@cameleer/design-system/assets/cameleer3-180.png' // Apple touch icon
import logo48 from '@cameleer/design-system/logo-48' // 48×48 taskbar import logo192 from '@cameleer/design-system/assets/cameleer3-192.png' // Android/PWA icon
import logo180 from '@cameleer/design-system/logo-180' // Apple touch icon import logo512 from '@cameleer/design-system/assets/cameleer3-512.png' // PWA splash, og:image
import logo192 from '@cameleer/design-system/logo-192' // Android/PWA icon import logoSvg from '@cameleer/design-system/assets/camel-logo.svg' // SVG vector logo
import logo512 from '@cameleer/design-system/logo-512' // PWA splash, og:image
import logoSvg from '@cameleer/design-system/logo-svg' // SVG vector logo
``` ```

24
COMPONENT_GUIDE.md
View File

@@ -336,23 +336,23 @@ See `CLAUDE.md` "Using This Design System in Other Apps" for full setup instruct
## Brand Assets ## Brand Assets
The design system ships logo assets as static files via package exports. These are not React components — they resolve to file URLs when imported via a bundler. The design system ships logo assets as static files via the `./assets/*` package export. These are not React components — they resolve to file URLs when imported via a bundler. All PNGs have transparent backgrounds.
| Export | Size | Use case | | File | Size | Use case |
|--------|------|----------| |------|------|----------|
| `@cameleer/design-system/logo` | Original | Full resolution for print/marketing | | `cameleer3-logo.png` | Original | Full resolution for print/marketing |
| `@cameleer/design-system/logo-16` | 16×16 | Browser tab favicon | | `cameleer3-16.png` | 16×16 | Browser tab favicon |
| `@cameleer/design-system/logo-32` | 32×32 | Standard favicon, bookmarks | | `cameleer3-32.png` | 32×32 | Standard favicon, bookmarks |
| `@cameleer/design-system/logo-48` | 48×48 | Windows taskbar | | `cameleer3-48.png` | 48×48 | Windows taskbar |
| `@cameleer/design-system/logo-180` | 180×180 | Apple touch icon | | `cameleer3-180.png` | 180×180 | Apple touch icon |
| `@cameleer/design-system/logo-192` | 192×192 | Android/PWA icon | | `cameleer3-192.png` | 192×192 | Android/PWA icon |
| `@cameleer/design-system/logo-512` | 512×512 | PWA splash, og:image | | `cameleer3-512.png` | 512×512 | PWA splash, og:image |
| `@cameleer/design-system/logo-svg` | Vector | SVG logo for scalable usage | | `camel-logo.svg` | Vector | SVG logo for scalable usage |
### Usage ### Usage
```tsx ```tsx
import logo from '@cameleer/design-system/logo-512' import logo from '@cameleer/design-system/assets/cameleer3-512.png'
<img src={logo} alt="Cameleer3" /> <img src={logo} alt="Cameleer3" />
``` ```

9
package.json
View File

@@ -11,14 +11,7 @@
"import": "./dist/index.es.js" "import": "./dist/index.es.js"
}, },
"./style.css": "./dist/style.css", "./style.css": "./dist/style.css",
"./logo": "./assets/cameleer3-logo.png", "./assets/*": "./assets/*"
"./logo-16": "./assets/cameleer3-16.png",
"./logo-32": "./assets/cameleer3-32.png",
"./logo-48": "./assets/cameleer3-48.png",
"./logo-180": "./assets/cameleer3-180.png",
"./logo-192": "./assets/cameleer3-192.png",
"./logo-512": "./assets/cameleer3-512.png",
"./logo-svg": "./assets/camel-logo.svg"
}, },
"files": [ "files": [
"dist", "dist",

8
src/pages/Inventory/sections/BrandAssetsSection.tsx
View File

@@ -13,7 +13,7 @@ export function BrandAssetsSection() {
<h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3> <h3 className={styles.componentTitle}>Cameleer3 Logo (PNG)</h3>
<p className={styles.componentDesc}> <p className={styles.componentDesc}>
Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images. Full-resolution logo and pre-generated size variants for favicons, PWA icons, and social images.
Shipped as static assets via package exports. Shipped as static assets via <code>@cameleer/design-system/assets/*</code> export.
</p> </p>
<div className={styles.demoArea}> <div className={styles.demoArea}>
<div className={styles.logoGrid}> <div className={styles.logoGrid}>
@@ -28,7 +28,7 @@ export function BrandAssetsSection() {
/> />
</div> </div>
<span className={styles.logoLabel}>{size}×{size}</span> <span className={styles.logoLabel}>{size}×{size}</span>
<code className={styles.logoExport}>@cameleer/design-system/logo-{size}</code> <code className={styles.logoExport}>assets/cameleer3-{size}.png</code>
</div> </div>
))} ))}
<div className={styles.logoItem}> <div className={styles.logoItem}>
@@ -41,7 +41,7 @@ export function BrandAssetsSection() {
/> />
</div> </div>
<span className={styles.logoLabel}>Original</span> <span className={styles.logoLabel}>Original</span>
<code className={styles.logoExport}>@cameleer/design-system/logo</code> <code className={styles.logoExport}>assets/cameleer3-logo.png</code>
</div> </div>
</div> </div>
</div> </div>
@@ -59,7 +59,7 @@ export function BrandAssetsSection() {
<img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} /> <img src={camelLogoSvg} alt="Camel SVG logo" width={96} height={96} />
</div> </div>
<span className={styles.logoLabel}>SVG</span> <span className={styles.logoLabel}>SVG</span>
<code className={styles.logoExport}>@cameleer/design-system/logo-svg</code> <code className={styles.logoExport}>assets/camel-logo.svg</code>
</div> </div>
</div> </div>
</div> </div>