@fvc/alert 1.2.1 → 1.2.2-rc.0

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 +168 -0
  2. package/package.json +12 -2
package/README.md ADDED
@@ -0,0 +1,168 @@
1
+ # @fvc/alert
2
+
3
+ `@fvc/alert` provides FE-VIS styled alert primitives on top of Ant Design Alert. It keeps the Ant Design Alert API familiar while adding automatic type-based icon selection, size variants, full-width layout, and custom icon colour control.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @fvc/alert
9
+ ```
10
+
11
+ ## Peer Dependencies
12
+
13
+ ```bash
14
+ bun add react antd @fvc/icons
15
+ ```
16
+
17
+ ## Import
18
+
19
+ ```tsx
20
+ import { Alert } from '@fvc/alert';
21
+ ```
22
+
23
+ ## Quick Start
24
+
25
+ ```tsx
26
+ import { Alert } from '@fvc/alert';
27
+
28
+ export function SaveSuccess() {
29
+ return <Alert type="success" message="Record saved successfully" />;
30
+ }
31
+ ```
32
+
33
+ ## Variants
34
+
35
+ | Type | Use case |
36
+ | --- | --- |
37
+ | `'info'` | General information — gray background. |
38
+ | `'success'` | Successful operation — green background. |
39
+ | `'warning'` | Attention required — orange background. |
40
+ | `'error'` | Critical error — red background. |
41
+
42
+ ## Common Usage
43
+
44
+ ### Types
45
+
46
+ ```tsx
47
+ <Alert type="info" message="Your session expires in 10 minutes" />
48
+ <Alert type="success" message="Record saved successfully" />
49
+ <Alert type="warning" message="This action cannot be undone" />
50
+ <Alert type="error" message="Failed to load data. Please try again" />
51
+ ```
52
+
53
+ ### Sizes
54
+
55
+ ```tsx
56
+ <Alert type="info" message="Medium alert (default)" size="medium" />
57
+ <Alert type="info" message="Small alert" size="small" />
58
+ ```
59
+
60
+ ### With Icon
61
+
62
+ Icons are shown automatically per type. Use `showIcon` to enable them.
63
+
64
+ ```tsx
65
+ <Alert type="warning" message="Please review before submitting" showIcon />
66
+ ```
67
+
68
+ ### Custom Icon
69
+
70
+ ```tsx
71
+ import { Lock } from '@fvc/icons';
72
+
73
+ <Alert type="info" message="Authentication required" icon={<Lock />} showIcon />
74
+ ```
75
+
76
+ ### Closable
77
+
78
+ ```tsx
79
+ <Alert type="info" message="New version available" closable />
80
+ ```
81
+
82
+ ### Full Width
83
+
84
+ ```tsx
85
+ <Alert type="error" message="Service unavailable" block />
86
+ ```
87
+
88
+ ## Props
89
+
90
+ | Prop | Type | Description |
91
+ | --- | --- | --- |
92
+ | `type` | `'info' \| 'success' \| 'warning' \| 'error'` | Alert variant. Controls icon and background colour. |
93
+ | `message` | `ReactNode` | Main alert message. |
94
+ | `size` | `'medium' \| 'small'` | Alert size. Defaults to `'medium'`. |
95
+ | `block` | `boolean` | Stretches the alert to full container width. |
96
+ | `icon` | `ReactNode` | Custom icon, overrides the type-based default. |
97
+ | `iconColor` | `CSSProperties['color']` | Colour applied to the icon. |
98
+ | `showIcon` | `boolean` | Show the icon. |
99
+ | `closable` | `boolean` | Show a close button. |
100
+ | `testId` | `string` | Maps to `data-testid`. |
101
+ | *All `AlertProps`* | — | All Ant Design Alert props except `description` and `banner` which are not supported. |
102
+
103
+ ## Consumer Example
104
+
105
+ ```tsx
106
+ import { Alert } from '@fvc/alert';
107
+
108
+ export function FormFeedback({ status, message }) {
109
+ if (!message) return null;
110
+
111
+ return (
112
+ <Alert
113
+ type={status}
114
+ message={message}
115
+ size="small"
116
+ block
117
+ showIcon
118
+ closable
119
+ testId="form-feedback"
120
+ />
121
+ );
122
+ }
123
+ ```
124
+
125
+ ## Testing
126
+
127
+ ```tsx
128
+ <Alert type="error" message="Not found" testId="error-alert" />
129
+ ```
130
+
131
+ ```tsx
132
+ screen.getByTestId('error-alert');
133
+ ```
134
+
135
+ ## CSS Customisation
136
+
137
+ ```css
138
+ :root {
139
+ /* Info background */
140
+ --gray-50: #f5f5f5;
141
+
142
+ /* Success background */
143
+ --green-700: #388e3c;
144
+
145
+ /* Warning background */
146
+ --orange-200: #ffcc80;
147
+
148
+ /* Error background */
149
+ --red-800: #c62828;
150
+
151
+ /* Text on dark backgrounds */
152
+ --white-text-color-0: #ffffff;
153
+
154
+ /* Text on light backgrounds */
155
+ --body-text-color-1000: #1a1a1a;
156
+ }
157
+ ```
158
+
159
+ For the full style reference see [`src/Alert.scss`](./src/Alert.scss).
160
+
161
+ ## Development
162
+
163
+ ```bash
164
+ bun run lint
165
+ bun run type-check
166
+ bun run test
167
+ bun run build
168
+ ```
package/package.json CHANGED
@@ -1,6 +1,16 @@
1
1
  {
2
2
  "name": "@fvc/alert",
3
- "version": "1.2.1",
3
+ "version": "1.2.2-rc.0",
4
+ "keywords": [
5
+ "react",
6
+ "react-component",
7
+ "fvc",
8
+ "fe-vis-core",
9
+ "ui",
10
+ "alert",
11
+ "design-system",
12
+ "antd"
13
+ ],
4
14
  "main": "./dist/lib/index.js",
5
15
  "types": "./dist/lib/alert/src/index.d.ts",
6
16
  "files": [
@@ -27,7 +37,7 @@
27
37
  "test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
28
38
  },
29
39
  "peerDependencies": {
30
- "@fvc/icons": "*",
40
+ "@fvc/icons": "^1.1.4-rc.0",
31
41
  "react": "^18.0.0",
32
42
  "antd": "^5.0.0"
33
43
  }