@fvc/skeleton 1.0.1 → 1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997

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.
Files changed (2) hide show
  1. package/README.md +180 -0
  2. package/package.json +13 -1
package/README.md ADDED
@@ -0,0 +1,180 @@
1
+ # @fvc/skeleton
2
+
3
+ `@fvc/skeleton` provides loading placeholder primitives on top of Ant Design's `Skeleton` component. It applies the FE-VIS class prefix and exposes the full Ant Design API alongside a `testId` prop for test targeting. Sub-components cover the most common placeholder shapes: paragraphs, avatars, buttons, inputs, and images.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @fvc/skeleton
9
+ ```
10
+
11
+ ## Peer Dependencies
12
+
13
+ The package expects these dependencies to be available in the consuming application:
14
+
15
+ ```bash
16
+ bun add react antd
17
+ ```
18
+
19
+ ## Import
20
+
21
+ ```tsx
22
+ import { Skeleton } from '@fvc/skeleton';
23
+ ```
24
+
25
+ ## Quick Start
26
+
27
+ ```tsx
28
+ import { Skeleton } from '@fvc/skeleton';
29
+
30
+ export function ArticleCard({ loading }) {
31
+ return (
32
+ <Skeleton loading={loading} active>
33
+ <div>Article content</div>
34
+ </Skeleton>
35
+ );
36
+ }
37
+ ```
38
+
39
+ ## Common Usage
40
+
41
+ ### Paragraph Skeleton
42
+
43
+ ```tsx
44
+ <Skeleton active />
45
+ ```
46
+
47
+ ### Avatar with Paragraph
48
+
49
+ ```tsx
50
+ <Skeleton avatar active />
51
+ ```
52
+
53
+ ### Specific Number of Lines
54
+
55
+ ```tsx
56
+ <Skeleton active paragraph={{ rows: 4 }} />
57
+ ```
58
+
59
+ ### Button Placeholder
60
+
61
+ ```tsx
62
+ <Skeleton.Button active />
63
+ ```
64
+
65
+ ### Avatar Placeholder
66
+
67
+ ```tsx
68
+ <Skeleton.Avatar active />
69
+ ```
70
+
71
+ ### Input Placeholder
72
+
73
+ ```tsx
74
+ <Skeleton.Input active />
75
+ ```
76
+
77
+ ### Image Placeholder
78
+
79
+ ```tsx
80
+ <Skeleton.Image active />
81
+ ```
82
+
83
+ ### Wrap Real Content
84
+
85
+ The `loading` prop conditionally shows the skeleton or the wrapped children.
86
+
87
+ ```tsx
88
+ <Skeleton loading={isLoading} active avatar>
89
+ <UserCard user={user} />
90
+ </Skeleton>
91
+ ```
92
+
93
+ ## Props
94
+
95
+ ### `<Skeleton>`
96
+
97
+ Extends all [Ant Design `SkeletonProps`](https://ant-design.antgroup.com/components/skeleton#api).
98
+
99
+ | Prop | Type | Description |
100
+ | ----------- | ------------------ | ---------------------------------------------- |
101
+ | `loading` | `boolean` | Shows the skeleton when true. |
102
+ | `active` | `boolean` | Applies animated shimmer. |
103
+ | `avatar` | `boolean` | Includes an avatar placeholder. |
104
+ | `paragraph` | `object` | Configures the paragraph rows count and width. |
105
+ | `title` | `boolean` | Includes a title placeholder. |
106
+ | `testId` | `string` | Maps to `data-testid` on the root element. |
107
+
108
+ ### `<Skeleton.Button>`
109
+
110
+ | Prop | Type | Description |
111
+ | -------- | ------------------ | ---------------------------------------- |
112
+ | `active` | `boolean` | Applies animated shimmer. |
113
+ | `size` | `string` | `'large'`, `'small'`, `'default'` |
114
+ | `shape` | `string` | `'default'`, `'round'`, `'circle'` |
115
+
116
+ ### `<Skeleton.Avatar>`
117
+
118
+ | Prop | Type | Description |
119
+ | -------- | ------------------ | ---------------------------------------- |
120
+ | `active` | `boolean` | Applies animated shimmer. |
121
+ | `size` | `string \| number` | Avatar size. |
122
+ | `shape` | `string` | `'circle'`, `'square'` |
123
+
124
+ ### `<Skeleton.Input>`
125
+
126
+ | Prop | Type | Description |
127
+ | -------- | ------------------ | ---------------------------------------- |
128
+ | `active` | `boolean` | Applies animated shimmer. |
129
+ | `size` | `string` | `'large'`, `'small'`, `'default'` |
130
+
131
+ ### `<Skeleton.Image>`
132
+
133
+ | Prop | Type | Description |
134
+ | -------- | --------- | ------------------------- |
135
+ | `active` | `boolean` | Applies animated shimmer. |
136
+
137
+ ## TypeScript
138
+
139
+ The package ships with type definitions. No `@types/` install needed.
140
+
141
+ ```ts
142
+ import type { SkeletonProps } from '@fvc/skeleton/types';
143
+ ```
144
+
145
+ ## Consumer Example
146
+
147
+ ```tsx
148
+ import { Skeleton } from '@fvc/skeleton';
149
+
150
+ export function ProfilePage({ loading, user }) {
151
+ return (
152
+ <Skeleton loading={loading} active avatar paragraph={{ rows: 3 }}>
153
+ <div>
154
+ <img src={user.avatar} alt={user.name} />
155
+ <h2>{user.name}</h2>
156
+ <p>{user.bio}</p>
157
+ </div>
158
+ </Skeleton>
159
+ );
160
+ }
161
+ ```
162
+
163
+ ## Testing
164
+
165
+ ```tsx
166
+ <Skeleton testId="profile-skeleton" loading={loading} active />
167
+ ```
168
+
169
+ ```tsx
170
+ screen.getByTestId('profile-skeleton');
171
+ ```
172
+
173
+ ## Development
174
+
175
+ ```bash
176
+ bun run lint
177
+ bun run type-check
178
+ bun run test
179
+ bun run build
180
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fvc/skeleton",
3
- "version": "1.0.1",
3
+ "version": "1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
4
4
  "main": "./dist/lib/index.js",
5
5
  "types": "./dist/lib/skeleton/src/index.d.ts",
6
6
  "files": [
@@ -26,6 +26,18 @@
26
26
  "type-check": "tsc --noEmit",
27
27
  "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
28
28
  },
29
+ "keywords": [
30
+ "react",
31
+ "react-component",
32
+ "fvc",
33
+ "fe-vis-core",
34
+ "ui",
35
+ "skeleton",
36
+ "loading",
37
+ "placeholder",
38
+ "design-system",
39
+ "antd"
40
+ ],
29
41
  "peerDependencies": {
30
42
  "react": "^18.0.0",
31
43
  "antd": "^5.0.0"