@fvc/drawer 1.1.0 → 1.1.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 +188 -0
- package/dist/lib/index.js +2 -2
- package/package.json +19 -3
package/README.md
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# @fvc/drawer
|
|
2
|
+
|
|
3
|
+
`@fvc/drawer` provides a FE-VIS styled drawer primitive on top of Ant Design Drawer. It keeps the Ant Design Drawer API familiar while adding structured layout slots — `Drawer.Header`, `Drawer.Content`, and `Drawer.Footer` — a push animation default, and sensible dimension defaults for enterprise form panels.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @fvc/drawer
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
bun add react antd
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Drawer } from '@fvc/drawer';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Drawer } from '@fvc/drawer';
|
|
27
|
+
|
|
28
|
+
export function RecordDrawer({ open, onClose }) {
|
|
29
|
+
return (
|
|
30
|
+
<Drawer open={open} onClose={onClose} title="Record details">
|
|
31
|
+
<Drawer.Content>
|
|
32
|
+
<p>Form fields go here.</p>
|
|
33
|
+
</Drawer.Content>
|
|
34
|
+
</Drawer>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
| Component | Use case |
|
|
42
|
+
| --- | --- |
|
|
43
|
+
| `Drawer` | Root drawer container. |
|
|
44
|
+
| `Drawer.Header` | Header slot — sits at the top of the drawer body. |
|
|
45
|
+
| `Drawer.Content` | Main content slot — scrollable area between header and footer. |
|
|
46
|
+
| `Drawer.Footer` | Footer slot — sits at the bottom of the drawer body, typically holds action buttons. |
|
|
47
|
+
|
|
48
|
+
## Common Usage
|
|
49
|
+
|
|
50
|
+
### With Header, Content and Footer
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<Drawer open={open} onClose={onClose} title="Edit record">
|
|
54
|
+
<Drawer.Header>
|
|
55
|
+
<Tabs items={tabs} />
|
|
56
|
+
</Drawer.Header>
|
|
57
|
+
|
|
58
|
+
<Drawer.Content>
|
|
59
|
+
<Form layout="vertical">
|
|
60
|
+
<Input name="name" label="Name" />
|
|
61
|
+
<Input name="email" label="Email" />
|
|
62
|
+
</Form>
|
|
63
|
+
</Drawer.Content>
|
|
64
|
+
|
|
65
|
+
<Drawer.Footer>
|
|
66
|
+
<Button type="secondary" onClick={onClose}>Cancel</Button>
|
|
67
|
+
<Button type="primary" onClick={handleSave}>Save</Button>
|
|
68
|
+
</Drawer.Footer>
|
|
69
|
+
</Drawer>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Placement
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Drawer open={open} placement="left" onClose={onClose}>
|
|
76
|
+
<Drawer.Content>Navigation</Drawer.Content>
|
|
77
|
+
</Drawer>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Custom Width
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
<Drawer open={open} width={480} onClose={onClose}>
|
|
84
|
+
<Drawer.Content>Wide panel</Drawer.Content>
|
|
85
|
+
</Drawer>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Without Mask
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
<Drawer open={open} mask={false} onClose={onClose}>
|
|
92
|
+
<Drawer.Content>Inline panel</Drawer.Content>
|
|
93
|
+
</Drawer>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Non-maskClosable
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<Drawer open={open} maskClosable={false} onClose={onClose}>
|
|
100
|
+
<Drawer.Content>Must use close button</Drawer.Content>
|
|
101
|
+
</Drawer>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Props
|
|
105
|
+
|
|
106
|
+
### Drawer
|
|
107
|
+
|
|
108
|
+
| Prop | Type | Description |
|
|
109
|
+
| --- | --- | --- |
|
|
110
|
+
| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | Side to open from. Defaults to `'right'`. |
|
|
111
|
+
| `width` | `number` | Drawer width in pixels. Defaults to `256`. |
|
|
112
|
+
| `height` | `number` | Drawer height in pixels (for top/bottom placement). Defaults to `256`. |
|
|
113
|
+
| `maskClosable` | `boolean` | Close on mask click. Defaults to `true`. |
|
|
114
|
+
| `mask` | `boolean` | Show overlay mask. Defaults to `true`. |
|
|
115
|
+
| `push` | `{ distance: number }` | Push content when drawer opens. Defaults to `{ distance: 180 }`. |
|
|
116
|
+
| `testId` | `string` | Maps to `data-testid`. Defaults to `'drawer'`. |
|
|
117
|
+
| *All `DrawerProps`* | — | All Ant Design Drawer props (`open`, `onClose`, `title`, `extra`, `footer`, `closable`, etc.). |
|
|
118
|
+
|
|
119
|
+
### Drawer.Header / Drawer.Content / Drawer.Footer
|
|
120
|
+
|
|
121
|
+
| Prop | Type | Description |
|
|
122
|
+
| --- | --- | --- |
|
|
123
|
+
| `children` | `ReactNode` | Slot content. |
|
|
124
|
+
| `style` | `CSSProperties` | Inline styles. |
|
|
125
|
+
| `testId` | `string` | Maps to `data-testid` (auto-prefixed: `header`, `content`, `footer`). |
|
|
126
|
+
| `testIdPostfix` | `string` | Override the testId postfix. |
|
|
127
|
+
|
|
128
|
+
## Consumer Example
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import { Drawer } from '@fvc/drawer';
|
|
132
|
+
import { Button } from '@fvc/button';
|
|
133
|
+
|
|
134
|
+
export function ContractDrawer({ contractId, open, onClose, onSave }) {
|
|
135
|
+
return (
|
|
136
|
+
<Drawer
|
|
137
|
+
open={open}
|
|
138
|
+
onClose={onClose}
|
|
139
|
+
title="Contract details"
|
|
140
|
+
width={640}
|
|
141
|
+
testId="contract-drawer"
|
|
142
|
+
>
|
|
143
|
+
<Drawer.Content testId="contract-drawer-content">
|
|
144
|
+
<ContractForm contractId={contractId} />
|
|
145
|
+
</Drawer.Content>
|
|
146
|
+
|
|
147
|
+
<Drawer.Footer>
|
|
148
|
+
<Button type="secondary" onClick={onClose}>Cancel</Button>
|
|
149
|
+
<Button type="primary" onClick={onSave}>Save changes</Button>
|
|
150
|
+
</Drawer.Footer>
|
|
151
|
+
</Drawer>
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## Testing
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
<Drawer open testId="edit-drawer" onClose={() => {}}>
|
|
160
|
+
<Drawer.Content>Content</Drawer.Content>
|
|
161
|
+
</Drawer>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
screen.getByTestId('edit-drawer');
|
|
166
|
+
screen.getByTestId('edit-drawer-content');
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
## CSS Customisation
|
|
170
|
+
|
|
171
|
+
```css
|
|
172
|
+
:root {
|
|
173
|
+
/* Drawer background */
|
|
174
|
+
--card-bg-color-20: #f5f7fa;
|
|
175
|
+
|
|
176
|
+
/* Close button icon */
|
|
177
|
+
--white-icon-color-0: #ffffff;
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## Development
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
bun run lint
|
|
185
|
+
bun run type-check
|
|
186
|
+
bun run test
|
|
187
|
+
bun run build
|
|
188
|
+
```
|
package/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Drawer as e}from"antd";import r from"react";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}"function"==typeof SuppressedError&&SuppressedError;var n,o={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
|
|
6
|
+
*/var a,d=(n||(n=1,a=o,function(){var e={}.hasOwnProperty;function r(){for(var e="",r=0;r<arguments.length;r++){var o=arguments[r];o&&(e=n(e,t(o)))}return e}function t(t){if("string"==typeof t||"number"==typeof t)return t;if("object"!=typeof t)return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var o="";for(var a in t)e.call(t,a)&&t[a]&&(o=n(o,a));return o}function n(e,r){return r?e?e+" "+r:e+r:e}a.exports?(r.default=r,a.exports=r):window.classNames=r}()),o.exports),i=t(d);function c({children:e,testId:t,testIdPostfix:n}){return r.createElement("div",{"data-testid":t?`${t}-${n}`:void 0},e)}const l=e=>{const t=t=>r.createElement(c,Object.assign({},t,{testIdPostfix:null==e?void 0:e.toLowerCase()}));return t.displayName=e,t},s=(e,t)=>r.Children.toArray(e).find(e=>!!(e=>r.isValidElement(e)&&"function"==typeof e.type&&"displayName"in e.type)(e)&&e.type.displayName===t);!function(e,r){void 0===r&&(r={});var t=r.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".fvc-drawer-content-wrapper > .fvc-drawer-content {\n z-index: 1;\n overflow: auto;\n background-clip: padding-box;\n background: var(--card-bg-color-20);\n border: 0;\n}\n.fvc-drawer-content > .fvc-drawer-footer {\n border-top: none;\n}\n.fvc-drawer-content > .fvc-drawer-body {\n word-wrap: break-word;\n flex-grow: 1;\n padding: 0 16px;\n font-size: 14px;\n line-height: 1.5715;\n overflow: auto;\n}\n.fvc-drawer-placement-right .fvc-drawer-close {\n left: -50px;\n}\n.fvc-drawer-placement-left .fvc-drawer-close {\n right: -40px;\n}\n.fvc-drawer .fvc-drawer-header {\n padding: 16px 32px;\n border-bottom: none;\n}\n.fvc-drawer .fvc-drawer-header-title {\n margin: 0;\n font-size: 16px;\n font-weight: 500;\n line-height: 22px;\n}\n.fvc-drawer .fvc-drawer-close {\n position: absolute;\n display: block;\n top: 0;\n padding: 20px;\n font-weight: 700;\n color: var(--white-icon-color-0);\n background: transparent;\n border: 0;\n outline: 0;\n cursor: pointer;\n}\n.fvc-drawer .fvc-drawer-close svg {\n width: 20px;\n height: 20px;\n}\n.fvc-drawer .fvc-drawer-close:focus, .fvc-drawer .fvc-drawer-close:hover {\n color: var(--white-icon-color-0);\n background: transparent;\n}\n.fvc-drawer-header-no-title .fvc-drawer .fvc-drawer-close {\n margin-right: 5px;\n padding-right: 22px;\n}");const p="fvc-drawer",f=t=>{var{children:n,placement:o="right",width:a=256,height:d=256,maskClosable:c=!0,mask:l=!0,push:f={distance:180},testId:u="drawer"}=t,v=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(t,["children","placement","width","height","maskClosable","mask","push","testId"]);const w=s(n,"Footer"),h=s(n,"Header"),g=s(n,"Content"),m=i(p,{[`${p}-placement-${o}`]:o});return r.createElement(e,Object.assign({"data-testid":u,prefixCls:p,title:h,footer:w,placement:o,width:a,height:d,maskClosable:c,mask:l,push:f,rootClassName:m,styles:{header:null==h?void 0:h.props.style,footer:null==w?void 0:w.props.style,content:null==g?void 0:g.props.style}},v),g)};f.Header=l("Header"),f.Footer=l("Footer"),f.Content=l("Content");export{f as Drawer};
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/drawer",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"react",
|
|
6
|
+
"react-component",
|
|
7
|
+
"fvc",
|
|
8
|
+
"fe-vis-core",
|
|
9
|
+
"ui",
|
|
10
|
+
"drawer",
|
|
11
|
+
"design-system",
|
|
12
|
+
"antd"
|
|
13
|
+
],
|
|
4
14
|
"main": "./dist/lib/index.js",
|
|
5
15
|
"types": "./dist/lib/drawer/src/index.d.ts",
|
|
6
16
|
"files": [
|
|
@@ -16,9 +26,15 @@
|
|
|
16
26
|
"./types/*": "./dist/lib/drawer/src/types/*"
|
|
17
27
|
},
|
|
18
28
|
"scripts": {
|
|
19
|
-
"build": "
|
|
29
|
+
"build": "rollup -c ./rollup.config.mjs",
|
|
30
|
+
"clean": "rm -rf dist && rm -rf .rollup.cache && rm -rf .turbo",
|
|
31
|
+
"lint": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\"",
|
|
32
|
+
"lint:fix": "eslint --config ../../eslint.config.js \"src/**/*.{ts,tsx}\" --fix",
|
|
33
|
+
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
|
|
34
|
+
"type-check": "tsc --noEmit",
|
|
35
|
+
"test": "bun test --preload ../../tests/happydom.ts --preload ../../tests/testing-library.tsx"
|
|
20
36
|
},
|
|
21
|
-
"
|
|
37
|
+
"peerDependencies": {
|
|
22
38
|
"react": "^18.0.0",
|
|
23
39
|
"antd": "^5.0.0"
|
|
24
40
|
}
|