@guideveloper/design-assets 0.1.10 → 0.1.12
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/README.md +7 -11
- package/dist/index.d.mts +18 -7
- package/dist/index.d.ts +18 -7
- package/dist/index.js +8832 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +8829 -12
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -14
- package/src/components/animations/AnimationCardOrderSuccess.tsx +13360 -0
- package/src/components/animations/AnimationCardordersuccess.tsx +2 -2
- package/src/components/animations/AnimationCheckEmail.tsx +8817 -0
- package/src/components/animations/AnimationLoadingHourglassPurple.tsx +3491 -0
- package/src/components/animations/AnimationLoadinghourglasspurple.tsx +2 -2
- package/src/components/animations/AnimationPleasedToMeetYou.tsx +9940 -0
- package/src/components/animations/AnimationPleasedtomeetyou.tsx +2 -2
- package/src/components/index.ts +4 -3
- package/src/metadata/index.ts +9 -3
package/README.md
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
1
|
# Design Asset Library
|
|
2
2
|
|
|
3
|
-
Source of truth for icons, illustrations, and animations. Generates React components,
|
|
3
|
+
Source of truth for icons, illustrations, and animations. Generates React components, metadata exports, and publishes as `@guideveloper/design-assets`.
|
|
4
4
|
|
|
5
5
|
## Structure
|
|
6
6
|
- `assets/` raw assets + metadata
|
|
7
|
-
- `scripts/generateAssets.ts` scans assets and builds components
|
|
7
|
+
- `scripts/generateAssets.ts` scans assets and builds components + metadata
|
|
8
8
|
- `src/components` generated React components
|
|
9
9
|
- `src/metadata` generated metadata arrays
|
|
10
|
-
- `.storybook` Storybook config
|
|
11
10
|
|
|
12
11
|
## Commands
|
|
13
|
-
- `npm run generate-assets` – generate components/
|
|
14
|
-
- `npm run storybook` – run Storybook locally
|
|
15
|
-
- `npm run build-storybook` – build static Storybook
|
|
12
|
+
- `npm run generate-assets` – generate components/metadata from `assets`
|
|
16
13
|
- `npm run build` – bundle library via tsup (ESM + CJS)
|
|
17
14
|
|
|
18
15
|
## Workflow
|
|
19
16
|
1. Add/update files under `assets/icons|illustrations|animations` (with matching `.json` metadata files).
|
|
20
17
|
2. Run `npm install` then `npm run generate-assets`.
|
|
21
|
-
3.
|
|
22
|
-
4. When you want a release, manually trigger the workflow (`.github/workflows/codegen-and-publish.yml`) which runs codegen, bumps the version, builds Storybook, builds the package, publishes Storybook to `gh-pages`, publishes to npm, and pushes the tagged release back to `master`.
|
|
18
|
+
3. When you want a release, manually trigger the workflow (`.github/workflows/codegen-and-publish.yml`) which runs codegen, bumps the version, builds the package, publishes to npm, and pushes the tagged release back to `master`.
|
|
23
19
|
|
|
24
20
|
## Asset metadata format
|
|
21
|
+
- **Naming**: Use kebab-case file names (e.g. `pleased-to-meet-you`). Long multi-word names without separators will fail generation.
|
|
25
22
|
- **Icon**: `assets/icons/name.svg` + `assets/icons/name.json` `{ name, tags?, description? }`
|
|
26
23
|
- **Illustration**: `assets/illustrations/name.svg|png` + `assets/illustrations/name.json` `{ name, category?, tags?, description? }`
|
|
27
24
|
- **Animation**: `assets/animations/name.json` (Lottie) + `assets/animations/name.meta.json` `{ name, frameRate?, loop?, tags?, description? }`
|
|
@@ -29,10 +26,9 @@ Source of truth for icons, illustrations, and animations. Generates React compon
|
|
|
29
26
|
## Publishing
|
|
30
27
|
Set secrets:
|
|
31
28
|
- `NPM_TOKEN` for npm publish
|
|
32
|
-
- Use default `GITHUB_TOKEN` for Storybook deploy to `gh-pages`
|
|
33
29
|
|
|
34
30
|
Package name: `@guideveloper/design-assets`
|
|
35
31
|
|
|
36
32
|
### Manual release button
|
|
37
|
-
- GitHub Actions has a built-in “Run workflow” button for `Manual Codegen
|
|
38
|
-
- A lightweight front-end trigger lives at `scripts/run-manual-build.html` with a “Run workflow” button. Open the file in a browser, provide a GitHub token with `workflow` scope (and `repo`/`public_repo` as needed), choose the bump type, and
|
|
33
|
+
- GitHub Actions has a built-in “Run workflow” button for `Manual Codegen and Publish` (workflow dispatch only; no auto-runs on `master`).
|
|
34
|
+
- A lightweight front-end trigger lives at `scripts/run-manual-build.html` with a “Run workflow” button. Open the file in a browser, provide a GitHub token with `workflow` scope (and `repo`/`public_repo` as needed), choose the bump type, and dispatch the workflow on `master`.
|
package/dist/index.d.mts
CHANGED
|
@@ -28,19 +28,25 @@ declare const AnimationBounce: React.FC<{
|
|
|
28
28
|
className?: string;
|
|
29
29
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
30
30
|
|
|
31
|
-
declare const
|
|
31
|
+
declare const AnimationCardOrderSuccess: React.FC<{
|
|
32
32
|
loop?: boolean;
|
|
33
33
|
autoplay?: boolean;
|
|
34
34
|
className?: string;
|
|
35
35
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
36
36
|
|
|
37
|
-
declare const
|
|
37
|
+
declare const AnimationCheckEmail: React.FC<{
|
|
38
38
|
loop?: boolean;
|
|
39
39
|
autoplay?: boolean;
|
|
40
40
|
className?: string;
|
|
41
41
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
42
42
|
|
|
43
|
-
declare const
|
|
43
|
+
declare const AnimationLoadingHourglassPurple: React.FC<{
|
|
44
|
+
loop?: boolean;
|
|
45
|
+
autoplay?: boolean;
|
|
46
|
+
className?: string;
|
|
47
|
+
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
48
|
+
|
|
49
|
+
declare const AnimationPleasedToMeetYou: React.FC<{
|
|
44
50
|
loop?: boolean;
|
|
45
51
|
autoplay?: boolean;
|
|
46
52
|
className?: string;
|
|
@@ -102,17 +108,22 @@ declare const animations: readonly [{
|
|
|
102
108
|
readonly tags: readonly ["motion", "loop"];
|
|
103
109
|
readonly description: "Simple bouncing ball animation";
|
|
104
110
|
}, {
|
|
105
|
-
readonly name: "
|
|
111
|
+
readonly name: "card-order-success";
|
|
112
|
+
readonly frameRate: 30;
|
|
113
|
+
readonly loop: true;
|
|
114
|
+
readonly tags: readonly [];
|
|
115
|
+
}, {
|
|
116
|
+
readonly name: "check-email";
|
|
106
117
|
readonly frameRate: 30;
|
|
107
118
|
readonly loop: true;
|
|
108
119
|
readonly tags: readonly [];
|
|
109
120
|
}, {
|
|
110
|
-
readonly name: "
|
|
121
|
+
readonly name: "loading-hourglass-purple";
|
|
111
122
|
readonly frameRate: 30;
|
|
112
123
|
readonly loop: true;
|
|
113
124
|
readonly tags: readonly [];
|
|
114
125
|
}, {
|
|
115
|
-
readonly name: "
|
|
126
|
+
readonly name: "pleased-to-meet-you";
|
|
116
127
|
readonly frameRate: 30;
|
|
117
128
|
readonly loop: true;
|
|
118
129
|
readonly tags: readonly [];
|
|
@@ -126,4 +137,4 @@ type IconMetadata = typeof icons[number];
|
|
|
126
137
|
type IllustrationMetadata = typeof illustrations[number];
|
|
127
138
|
type AnimationMetadata = typeof animations[number];
|
|
128
139
|
|
|
129
|
-
export { AnimationBounce,
|
|
140
|
+
export { AnimationBounce, AnimationCardOrderSuccess, AnimationCheckEmail, AnimationLoadingHourglassPurple, AnimationMetadata, AnimationPleasedToMeetYou, AnimationPulse, IconAmbulance, IconAtom, IconCableCar, IconCheeseIcon, IconCheeseIcon2, IconHeartActivity, IconMetadata, IconSearch, IllustrationMetadata, IllustrationRoosterHead, IllustrationSunrise, IllustrationSvgIcon, animations, icons, illustrations };
|
package/dist/index.d.ts
CHANGED
|
@@ -28,19 +28,25 @@ declare const AnimationBounce: React.FC<{
|
|
|
28
28
|
className?: string;
|
|
29
29
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
30
30
|
|
|
31
|
-
declare const
|
|
31
|
+
declare const AnimationCardOrderSuccess: React.FC<{
|
|
32
32
|
loop?: boolean;
|
|
33
33
|
autoplay?: boolean;
|
|
34
34
|
className?: string;
|
|
35
35
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
36
36
|
|
|
37
|
-
declare const
|
|
37
|
+
declare const AnimationCheckEmail: React.FC<{
|
|
38
38
|
loop?: boolean;
|
|
39
39
|
autoplay?: boolean;
|
|
40
40
|
className?: string;
|
|
41
41
|
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
42
42
|
|
|
43
|
-
declare const
|
|
43
|
+
declare const AnimationLoadingHourglassPurple: React.FC<{
|
|
44
|
+
loop?: boolean;
|
|
45
|
+
autoplay?: boolean;
|
|
46
|
+
className?: string;
|
|
47
|
+
} & Partial<React.ComponentProps<typeof Lottie>>>;
|
|
48
|
+
|
|
49
|
+
declare const AnimationPleasedToMeetYou: React.FC<{
|
|
44
50
|
loop?: boolean;
|
|
45
51
|
autoplay?: boolean;
|
|
46
52
|
className?: string;
|
|
@@ -102,17 +108,22 @@ declare const animations: readonly [{
|
|
|
102
108
|
readonly tags: readonly ["motion", "loop"];
|
|
103
109
|
readonly description: "Simple bouncing ball animation";
|
|
104
110
|
}, {
|
|
105
|
-
readonly name: "
|
|
111
|
+
readonly name: "card-order-success";
|
|
112
|
+
readonly frameRate: 30;
|
|
113
|
+
readonly loop: true;
|
|
114
|
+
readonly tags: readonly [];
|
|
115
|
+
}, {
|
|
116
|
+
readonly name: "check-email";
|
|
106
117
|
readonly frameRate: 30;
|
|
107
118
|
readonly loop: true;
|
|
108
119
|
readonly tags: readonly [];
|
|
109
120
|
}, {
|
|
110
|
-
readonly name: "
|
|
121
|
+
readonly name: "loading-hourglass-purple";
|
|
111
122
|
readonly frameRate: 30;
|
|
112
123
|
readonly loop: true;
|
|
113
124
|
readonly tags: readonly [];
|
|
114
125
|
}, {
|
|
115
|
-
readonly name: "
|
|
126
|
+
readonly name: "pleased-to-meet-you";
|
|
116
127
|
readonly frameRate: 30;
|
|
117
128
|
readonly loop: true;
|
|
118
129
|
readonly tags: readonly [];
|
|
@@ -126,4 +137,4 @@ type IconMetadata = typeof icons[number];
|
|
|
126
137
|
type IllustrationMetadata = typeof illustrations[number];
|
|
127
138
|
type AnimationMetadata = typeof animations[number];
|
|
128
139
|
|
|
129
|
-
export { AnimationBounce,
|
|
140
|
+
export { AnimationBounce, AnimationCardOrderSuccess, AnimationCheckEmail, AnimationLoadingHourglassPurple, AnimationMetadata, AnimationPleasedToMeetYou, AnimationPulse, IconAmbulance, IconAtom, IconCableCar, IconCheeseIcon, IconCheeseIcon2, IconHeartActivity, IconMetadata, IconSearch, IllustrationMetadata, IllustrationRoosterHead, IllustrationSunrise, IllustrationSvgIcon, animations, icons, illustrations };
|