@fvc/drawer 1.1.1 → 1.1.2-rc.0

package/README.md

@@ -0,0 +1,188 @@
+# @fvc/drawer
+
+`@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.
+
+## Installation
+
+```bash
+bun add @fvc/drawer
+```
+
+## Peer Dependencies
+
+```bash
+bun add react antd
+```
+
+## Import
+
+```tsx
+import { Drawer } from '@fvc/drawer';
+```
+
+## Quick Start
+
+```tsx
+import { Drawer } from '@fvc/drawer';
+
+export function RecordDrawer({ open, onClose }) {
+  return (
+    <Drawer open={open} onClose={onClose} title="Record details">
+      <Drawer.Content>
+        <p>Form fields go here.</p>
+      </Drawer.Content>
+    </Drawer>
+  );
+}
+```
+
+## Components
+
+| Component | Use case |
+| --- | --- |
+| `Drawer` | Root drawer container. |
+| `Drawer.Header` | Header slot — sits at the top of the drawer body. |
+| `Drawer.Content` | Main content slot — scrollable area between header and footer. |
+| `Drawer.Footer` | Footer slot — sits at the bottom of the drawer body, typically holds action buttons. |
+
+## Common Usage
+
+### With Header, Content and Footer
+
+```tsx
+<Drawer open={open} onClose={onClose} title="Edit record">
+  <Drawer.Header>
+    <Tabs items={tabs} />
+  </Drawer.Header>
+
+  <Drawer.Content>
+    <Form layout="vertical">
+      <Input name="name" label="Name" />
+      <Input name="email" label="Email" />
+    </Form>
+  </Drawer.Content>
+
+  <Drawer.Footer>
+    <Button type="secondary" onClick={onClose}>Cancel</Button>
+    <Button type="primary" onClick={handleSave}>Save</Button>
+  </Drawer.Footer>
+</Drawer>
+```
+
+### Placement
+
+```tsx
+<Drawer open={open} placement="left" onClose={onClose}>
+  <Drawer.Content>Navigation</Drawer.Content>
+</Drawer>
+```
+
+### Custom Width
+
+```tsx
+<Drawer open={open} width={480} onClose={onClose}>
+  <Drawer.Content>Wide panel</Drawer.Content>
+</Drawer>
+```
+
+### Without Mask
+
+```tsx
+<Drawer open={open} mask={false} onClose={onClose}>
+  <Drawer.Content>Inline panel</Drawer.Content>
+</Drawer>
+```
+
+### Non-maskClosable
+
+```tsx
+<Drawer open={open} maskClosable={false} onClose={onClose}>
+  <Drawer.Content>Must use close button</Drawer.Content>
+</Drawer>
+```
+
+## Props
+
+### Drawer
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `placement` | `'left' \| 'right' \| 'top' \| 'bottom'` | Side to open from. Defaults to `'right'`. |
+| `width` | `number` | Drawer width in pixels. Defaults to `256`. |
+| `height` | `number` | Drawer height in pixels (for top/bottom placement). Defaults to `256`. |
+| `maskClosable` | `boolean` | Close on mask click. Defaults to `true`. |
+| `mask` | `boolean` | Show overlay mask. Defaults to `true`. |
+| `push` | `{ distance: number }` | Push content when drawer opens. Defaults to `{ distance: 180 }`. |
+| `testId` | `string` | Maps to `data-testid`. Defaults to `'drawer'`. |
+| *All `DrawerProps`* | — | All Ant Design Drawer props (`open`, `onClose`, `title`, `extra`, `footer`, `closable`, etc.). |
+
+### Drawer.Header / Drawer.Content / Drawer.Footer
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `children` | `ReactNode` | Slot content. |
+| `style` | `CSSProperties` | Inline styles. |
+| `testId` | `string` | Maps to `data-testid` (auto-prefixed: `header`, `content`, `footer`). |
+| `testIdPostfix` | `string` | Override the testId postfix. |
+
+## Consumer Example
+
+```tsx
+import { Drawer } from '@fvc/drawer';
+import { Button } from '@fvc/button';
+
+export function ContractDrawer({ contractId, open, onClose, onSave }) {
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      title="Contract details"
+      width={640}
+      testId="contract-drawer"
+    >
+      <Drawer.Content testId="contract-drawer-content">
+        <ContractForm contractId={contractId} />
+      </Drawer.Content>
+
+      <Drawer.Footer>
+        <Button type="secondary" onClick={onClose}>Cancel</Button>
+        <Button type="primary" onClick={onSave}>Save changes</Button>
+      </Drawer.Footer>
+    </Drawer>
+  );
+}
+```
+
+## Testing
+
+```tsx
+<Drawer open testId="edit-drawer" onClose={() => {}}>
+  <Drawer.Content>Content</Drawer.Content>
+</Drawer>
+```
+
+```tsx
+screen.getByTestId('edit-drawer');
+screen.getByTestId('edit-drawer-content');
+```
+
+## CSS Customisation
+
+```css
+:root {
+  /* Drawer background */
+  --card-bg-color-20: #f5f7fa;
+
+  /* Close button icon */
+  --white-icon-color-0: #ffffff;
+}
+```
+
+## Development
+
+```bash
+bun run lint
+bun run type-check
+bun run test
+bun run build
+```

package/package.json

@@ -1,6 +1,16 @@
 {
   "name": "@fvc/drawer",
-  "version": "1.1.1",
+  "version": "1.1.2-rc.0",
+  "keywords": [
+    "react",
+    "react-component",
+    "fvc",
+    "fe-vis-core",
+    "ui",
+    "drawer",
+    "design-system",
+    "antd"
+  ],
   "main": "./dist/lib/index.js",
   "types": "./dist/lib/drawer/src/index.d.ts",
   "files": [