@snacky/ui 0.2.4 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/NOTICE ADDED
@@ -0,0 +1,41 @@
1
+ Snacky App Design System
2
+ ========================
3
+
4
+ The LICENSE file (MIT) covers the source code of this repository: the
5
+ components, design tokens, generators, and the documentation site.
6
+
7
+ Some bundled ASSETS are third-party work under their own licenses and are
8
+ NOT covered by the MIT license. They are listed below. Downstream users who
9
+ redistribute these assets must keep this attribution intact.
10
+
11
+
12
+ UIcons by Flaticon
13
+ ------------------
14
+
15
+ Applies to:
16
+ - assets/icons/icons.json
17
+ - packages/react-ui/src/icons/outline.tsx
18
+ - packages/react-ui/src/icons/solid.tsx
19
+ - packages/compose-ui/src/commonMain/kotlin/com/snacky/ui/components/icon/SnackyIcons.kt
20
+ - the `ICONS` registry embedded in index.html
21
+ - the compiled output of the above (e.g. @snacky/ui's dist/, the compose-ui
22
+ JAR published via JitPack)
23
+
24
+ Creator: Flaticon
25
+ Source: https://www.flaticon.com/uicons
26
+ Figma: https://www.figma.com/community/file/952131925958384905/uicons-by-flaticon-free-interface-icons
27
+ License: Creative Commons Attribution 4.0 International (CC BY 4.0)
28
+ https://creativecommons.org/licenses/by/4.0/
29
+
30
+ Modifications: yes. The icons were exported from the Figma Community file
31
+ above and transformed for this design system. Specifically: the SVG path
32
+ geometry was extracted from the component sets, renamed from the Figma
33
+ property values to semantic English names (for example Flaticon's `cod`
34
+ became `truck`, `list` became `chevronRight`, and the Indonesian labels
35
+ `riwayat`/`akun`/`Saldo`/`poin` became `history`/`account`/`balance`/
36
+ `points`), and re-emitted as React components and Kotlin/Compose
37
+ declarations. The drawn artwork itself is unchanged.
38
+
39
+ Disclaimer of warranties: the licensed material is provided as-is and
40
+ as-available, and the licensor makes no representations or warranties of any
41
+ kind concerning it, as set out in Section 5 of CC BY 4.0.
package/README.md CHANGED
@@ -15,7 +15,8 @@ npm install @snacky/ui
15
15
  ```
16
16
 
17
17
  Published at [npmjs.com/package/@snacky/ui](https://www.npmjs.com/package/@snacky/ui).
18
- To build from source instead (e.g. to work on the components themselves):
18
+ To build from source instead (e.g. to work on the components themselves), clone
19
+ [the repo](https://github.com/rezatresnas/snacky-design-system) and, from its root:
19
20
 
20
21
  ```bash
21
22
  cd packages/react-ui
@@ -26,7 +27,7 @@ npm run build
26
27
  ## Usage
27
28
 
28
29
  ```tsx
29
- import '@snacky/ui'; // pulls in theme/tokens.css as a side effect
30
+ import '@snacky/ui/styles.css'; // required - the compiled bundle does not inject this for you
30
31
  import { Button, TextField, Checkbox } from '@snacky/ui';
31
32
 
32
33
  function SignupForm() {
@@ -102,16 +103,62 @@ per item - because that demo is only ever shown at a fixed 360px frame. A
102
103
  production nav bar needs to fill whatever width the real device is, so the
103
104
  flexible layout was kept on purpose.
104
105
 
106
+ ## Artwork credit and licensing
107
+
108
+ The code in this package is MIT. The **icon artwork is not**: it is
109
+ [UIcons by Flaticon](https://www.flaticon.com/uicons), used under
110
+ [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) and modified
111
+ (exported from the Figma Community file and renamed to semantic English
112
+ names).
113
+
114
+ CC BY 4.0 allows redistribution, including inside this package, but the
115
+ attribution has to travel with the artwork. It is embedded in
116
+ `src/icons/*.tsx` and survives into the published bundle, and the full
117
+ statement ships as `NOTICE`. **If you redistribute these icons - vendoring
118
+ them, re-exporting them, publishing your own package built on them - keep
119
+ that credit.** Using them in an app you ship needs no visible credit beyond
120
+ what is already in the bundle.
121
+
105
122
  ## Known gaps - read before relying on these
106
123
 
107
- - **Icons** (`SnackyIcons.outline.*` / `SnackyIcons.solid.*`): only a starter
108
- set is included (~30 outline, 3 solid), covering what's needed for a typical
109
- form. The full documented set (41 outline + 10 solid) needs to be exported
110
- from Figma's real icon components - the same way this whole design system
111
- was built (`get_screenshot`/`download_assets` via the `figma-use` skill) -
112
- and dropped into `src/icons/`. The starter set was hand-drawn as generic,
113
- conventional UI glyphs; it does **not** claim pixel-fidelity to Figma.
114
- - **Illustration** ships no artwork - pass your own hosted `src`.
124
+ - **Icons** (`SnackyIcons.outline.*` / `SnackyIcons.solid.*`): no longer a
125
+ gap. The hand-drawn starter set has been replaced by the real thing - all
126
+ 42 Outline + 10 Solid icons exported from Figma's own `Icon-outline` (node
127
+ `55:2062`) and `Icon-solid` (`8772:5851`) component sets. `src/icons/outline.tsx` and
128
+ `solid.tsx` are generated from `../../assets/icons/icons.json` by
129
+ `../../scripts/generate-icons.js` (never hand-edit them), the same source
130
+ that generates compose-ui's `SnackyIcons.kt`.
131
+
132
+ Two things changed versus the old hand-drawn placeholder: the icons are
133
+ **filled outline shapes**, not stroked paths (the weight is baked into each
134
+ shape, there is no `strokeWidth` to set), and the set is **not uniform** -
135
+ icons are authored at 16, 20 or 24px depending on use, so each carries its
136
+ own viewBox and defaults to that natural size.
137
+ - **Illustration** ships no artwork - you supply the image. This is
138
+ deliberate and normal (Material, Radix and Chakra ship none either); the
139
+ component owns the documented canvas size for each variant, which is the
140
+ part that belongs in a design system. The Snacky artwork itself is modified
141
+ stock and is not ours to redistribute.
142
+
143
+ ```tsx
144
+ import { Illustration } from '@snacky/ui';
145
+
146
+ <Illustration variant="empty" src="/img/empty.svg" alt="No products found" />
147
+ ```
148
+
149
+ Variant sizes are fixed: `empty` 268x200, `createAccount` 360x240,
150
+ `welcome` 200x200, `success` 200x200, `discountReferral` 268x200. Export
151
+ your artwork at those ratios (SVG preferred) and host it wherever your app
152
+ already serves static assets.
153
+
154
+ **Where to get artwork that fits:** [Open Peeps](https://www.openpeeps.com/)
155
+ is CC0 (public domain - no attribution, no restrictions), so it is the
156
+ easiest drop-in. [unDraw](https://undraw.co/) needs no attribution and
157
+ allows commercial use, but its licence forbids redistributing the assets
158
+ "in packs", so use it in your own app rather than re-publishing it inside a
159
+ library of your own. Either way, check the licence yourself before shipping
160
+ - it is the one part of this that a component library cannot decide for you.
161
+
115
162
  - **Modal/Section**: the design system documents ~9 Modal "variants" and ~13
116
163
  Section "variants", but each is really the *same* shell component
117
164
  (`BottomSheet` / `Section`) with different `children` - so that's what's