@fvc/alert 1.2.0 → 1.2.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.
- package/README.md +168 -0
- package/dist/lib/alert/src/types/Alert.types.d.ts +1 -1
- package/dist/lib/index.js +2 -2
- package/package.json +20 -6
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
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
1
|
import { type AlertProps as DefaultAlertProps } from 'antd';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
3
|
export type AlertProps = Omit<DefaultAlertProps, 'description' | 'banner'> & {
|
|
4
4
|
block?: boolean;
|
|
5
5
|
iconColor?: CSSProperties['color'];
|
package/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import e
|
|
1
|
+
import{Alert as e}from"antd";import r from"react";import{Icon as n}from"@fvc/icons";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}"function"==typeof SuppressedError&&SuppressedError;var o,a={exports:{}};
|
|
2
2
|
/*!
|
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
|
4
4
|
Licensed under the MIT License (MIT), see
|
|
5
5
|
http://jedwatson.github.io/classnames
|
|
6
|
-
*/var l,c=t((o||(o=1,l=a,function(){var e={}.hasOwnProperty;function r(){for(var e="",r=0;r<arguments.length;r++){var o=arguments[r];o&&(e=t(e,n(o)))}return e}function n(n){if("string"==typeof n||"number"==typeof n)return n;if("object"!=typeof n)return"";if(Array.isArray(n))return r.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var o="";for(var a in n)e.call(n,a)&&n[a]&&(o=t(o,a));return o}function t(e,r){return r?e?e+" "+r:e+r:e}l.exports?(r.default=r,l.exports=r):window.classNames=r}()),a.exports));!function(e,r){void 0===r&&(r={});var n=r.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".fvc-alert {\n position: relative;\n display: flex;\n align-items: flex-start;\n width: 336px;\n padding: 16px;\n border-radius: 8px;\n outline: none;\n border: none;\n background-color: var(--gray-50);\n gap: 16px;\n}\n.fvc-alert .fvc-alert-message {\n font-family: Roboto, Arial, sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n color: var(--body-text-color-1000);\n}\n.fvc-alert .fvc-alert-icon {\n margin-right: 0;\n}\n.fvc-alert-size-small {\n padding: 8px 16px 8px 8px;\n gap: 8px;\n}\n.fvc-alert-size-small .fvc-alert-message {\n font-size: 14px;\n line-height: 16px;\n color: var(--body-text-color-1000);\n}\n.fvc-alert-size-small .fvc-alert-icon {\n width: 20px;\n height: 20px;\n}\n.fvc-alert-block {\n width: 100%;\n}\n.fvc-alert-info {\n background-color: var(--gray-50);\n}\n.fvc-alert-info .fvc-alert-message {\n color: var(--body-text-color-1000);\n}\n.fvc-alert-success {\n background-color: var(--green-700);\n}\n.fvc-alert-success .fvc-alert-message {\n color: var(--white-text-color-0);\n}\n.fvc-alert-error {\n background-color: var(--red-800);\n}\n.fvc-alert-error .fvc-alert-message {\n color: var(--white-text-color-0);\n}\n.fvc-alert-warning {\n background-color: var(--orange-200);\n}\n.fvc-alert-warning .fvc-alert-message {\n color: var(--body-text-color-1000);\n}\n.fvc-alert .fvc-alert-close-icon {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 16px;\n height: 16px;\n background-color: var(--blue-gray-900);\n border-radius: 50%;\n margin: 0;\n padding: 0;\n}\n.fvc-alert .fvc-alert-close-icon > span {\n width: 7px;\n height: 7px;\n}\n.fvc-alert .fvc-alert-close-icon > span > svg {\n color: var(--white-text-color-0);\n}");const i="fvc-alert",s=(
|
|
6
|
+
*/var l,c=t((o||(o=1,l=a,function(){var e={}.hasOwnProperty;function r(){for(var e="",r=0;r<arguments.length;r++){var o=arguments[r];o&&(e=t(e,n(o)))}return e}function n(n){if("string"==typeof n||"number"==typeof n)return n;if("object"!=typeof n)return"";if(Array.isArray(n))return r.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var o="";for(var a in n)e.call(n,a)&&n[a]&&(o=t(o,a));return o}function t(e,r){return r?e?e+" "+r:e+r:e}l.exports?(r.default=r,l.exports=r):window.classNames=r}()),a.exports));!function(e,r){void 0===r&&(r={});var n=r.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".fvc-alert {\n position: relative;\n display: flex;\n align-items: flex-start;\n width: 336px;\n padding: 16px;\n border-radius: 8px;\n outline: none;\n border: none;\n background-color: var(--gray-50);\n gap: 16px;\n}\n.fvc-alert .fvc-alert-message {\n font-family: Roboto, Arial, sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n color: var(--body-text-color-1000);\n}\n.fvc-alert .fvc-alert-icon {\n margin-right: 0;\n}\n.fvc-alert-size-small {\n padding: 8px 16px 8px 8px;\n gap: 8px;\n}\n.fvc-alert-size-small .fvc-alert-message {\n font-size: 14px;\n line-height: 16px;\n color: var(--body-text-color-1000);\n}\n.fvc-alert-size-small .fvc-alert-icon {\n width: 20px;\n height: 20px;\n}\n.fvc-alert-block {\n width: 100%;\n}\n.fvc-alert-info {\n background-color: var(--gray-50);\n}\n.fvc-alert-info .fvc-alert-message {\n color: var(--body-text-color-1000);\n}\n.fvc-alert-success {\n background-color: var(--green-700);\n}\n.fvc-alert-success .fvc-alert-message {\n color: var(--white-text-color-0);\n}\n.fvc-alert-error {\n background-color: var(--red-800);\n}\n.fvc-alert-error .fvc-alert-message {\n color: var(--white-text-color-0);\n}\n.fvc-alert-warning {\n background-color: var(--orange-200);\n}\n.fvc-alert-warning .fvc-alert-message {\n color: var(--body-text-color-1000);\n}\n.fvc-alert .fvc-alert-close-icon {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 16px;\n height: 16px;\n background-color: var(--blue-gray-900);\n border-radius: 50%;\n margin: 0;\n padding: 0;\n}\n.fvc-alert .fvc-alert-close-icon > span {\n width: 7px;\n height: 7px;\n}\n.fvc-alert .fvc-alert-close-icon > span > svg {\n color: var(--white-text-color-0);\n}");const i="fvc-alert",s=(e,t)=>{if(t)return t;switch(e){case"info":return r.createElement(n.Info,{color:"var(--gray-900)","aria-label":"alert-info-icon"});case"warning":return r.createElement(n.InfoFilled,{color:"var(--gray-900)","aria-label":"alert-warning-icon"});case"success":return r.createElement(n.Done,{color:"var(--white-text-color-0)","aria-label":"alert-success-icon"});case"error":return r.createElement(n.WarningAmber,{color:"var(--white-text-color-0)","aria-label":"alert-error-icon"});default:return r.createElement(n.Info,{color:"var(--gray-900)","aria-label":"alert-default-icon"})}},f=n=>{var{block:t=!1,className:o,type:a,icon:l,size:f="medium"}=n,p=function(e,r){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(e);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(e,t[o])&&(n[t[o]]=e[t[o]])}return n}(n,["block","className","type","icon","size"]);const v=c(i,{[`${i}-block`]:!!t,[`${i}-size-${f}`]:!!f},o);return r.createElement(e,Object.assign({},p,{className:v,prefixCls:i,type:a,icon:s(a,l)}))};export{f as Alert};
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/alert",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
|
|
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": [
|
|
@@ -18,13 +28,17 @@
|
|
|
18
28
|
}
|
|
19
29
|
},
|
|
20
30
|
"scripts": {
|
|
21
|
-
"build": "
|
|
31
|
+
"build": "rollup -c ./rollup.config.mjs",
|
|
32
|
+
"clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf .turbo",
|
|
33
|
+
"lint": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\"",
|
|
34
|
+
"lint:fix": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\" --fix",
|
|
35
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
36
|
+
"type-check": "tsc --noEmit",
|
|
37
|
+
"test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
|
|
22
38
|
},
|
|
23
|
-
"
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"@fvc/icons": "1.1.4-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
|
|
24
41
|
"react": "^18.0.0",
|
|
25
42
|
"antd": "^5.0.0"
|
|
26
|
-
},
|
|
27
|
-
"peerDependencies": {
|
|
28
|
-
"@fvc/icons": "*"
|
|
29
43
|
}
|
|
30
44
|
}
|