@fvc/checkbox 1.0.0 → 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.
- package/README.md +201 -0
- package/dist/lib/checkbox/src/types/Checkbox.types.d.ts +1 -1
- package/dist/lib/index.js +2 -2
- package/package.json +19 -3
package/README.md
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
# @fvc/checkbox
|
|
2
|
+
|
|
3
|
+
`@fvc/checkbox` provides FE-VIS styled checkbox primitives on top of Ant Design Checkbox. It keeps the Ant Design Checkbox API familiar while adding size variants, visibility control, full-width layout, white-space wrapping, and a grouped layout mode.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @fvc/checkbox
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
bun add react antd
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Import
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Checkbox } from '@fvc/checkbox';
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Quick Start
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Checkbox } from '@fvc/checkbox';
|
|
27
|
+
|
|
28
|
+
export function AgreeField() {
|
|
29
|
+
return (
|
|
30
|
+
<Checkbox onChange={(e) => setAgreed(e.target.checked)}>
|
|
31
|
+
I agree to the terms and conditions
|
|
32
|
+
</Checkbox>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Components
|
|
38
|
+
|
|
39
|
+
| Component | Use case |
|
|
40
|
+
| --- | --- |
|
|
41
|
+
| `Checkbox` | Single checkbox. |
|
|
42
|
+
| `Checkbox.Group` | Group of checkboxes with optional block layout. |
|
|
43
|
+
|
|
44
|
+
## Common Usage
|
|
45
|
+
|
|
46
|
+
### Controlled
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<Checkbox
|
|
50
|
+
checked={agreed}
|
|
51
|
+
onChange={(e) => setAgreed(e.target.checked)}
|
|
52
|
+
>
|
|
53
|
+
I agree to the terms
|
|
54
|
+
</Checkbox>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Sizes
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Checkbox size="medium">Medium (default)</Checkbox>
|
|
61
|
+
<Checkbox size="small">Small</Checkbox>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Indeterminate
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
<Checkbox indeterminate={someChecked} checked={allChecked} onChange={handleAll}>
|
|
68
|
+
Select all
|
|
69
|
+
</Checkbox>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Disabled
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<Checkbox disabled>Unavailable option</Checkbox>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Full Width
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<Checkbox fullWidth>Full-width checkbox label</Checkbox>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Wrapping Long Labels
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Checkbox whiteSpaceWrapped>
|
|
88
|
+
This is a very long checkbox label that should wrap onto the next line without being truncated.
|
|
89
|
+
</Checkbox>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Hidden
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
<Checkbox visible={false}>Hidden but rendered</Checkbox>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Group
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
<Checkbox.Group
|
|
102
|
+
options={[
|
|
103
|
+
{ label: 'Option A', value: 'a' },
|
|
104
|
+
{ label: 'Option B', value: 'b' },
|
|
105
|
+
{ label: 'Option C', value: 'c' },
|
|
106
|
+
]}
|
|
107
|
+
value={selected}
|
|
108
|
+
onChange={setSelected}
|
|
109
|
+
/>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Group Block Layout
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<Checkbox.Group
|
|
116
|
+
block
|
|
117
|
+
options={[
|
|
118
|
+
{ label: 'Read', value: 'read' },
|
|
119
|
+
{ label: 'Write', value: 'write' },
|
|
120
|
+
{ label: 'Delete', value: 'delete' },
|
|
121
|
+
]}
|
|
122
|
+
value={permissions}
|
|
123
|
+
onChange={setPermissions}
|
|
124
|
+
/>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Props
|
|
128
|
+
|
|
129
|
+
### Checkbox
|
|
130
|
+
|
|
131
|
+
| Prop | Type | Description |
|
|
132
|
+
| --- | --- | --- |
|
|
133
|
+
| `size` | `'medium' \| 'small'` | Checkbox size. Defaults to `'medium'`. |
|
|
134
|
+
| `visible` | `boolean` | Controls visibility without removing from DOM. Defaults to `true`. |
|
|
135
|
+
| `fullWidth` | `boolean` | Stretches the checkbox to full container width. |
|
|
136
|
+
| `whiteSpaceWrapped` | `boolean` | Allows the label text to wrap onto multiple lines. |
|
|
137
|
+
| `testId` | `string` | Maps to `data-testid`. |
|
|
138
|
+
| *All `CheckboxProps`* | — | All Ant Design Checkbox props (`checked`, `defaultChecked`, `indeterminate`, `disabled`, `onChange`, etc.). |
|
|
139
|
+
|
|
140
|
+
### Checkbox.Group
|
|
141
|
+
|
|
142
|
+
| Prop | Type | Description |
|
|
143
|
+
| --- | --- | --- |
|
|
144
|
+
| `block` | `boolean` | Displays each checkbox as a full-width block item. |
|
|
145
|
+
| *All `CheckboxGroupProps`* | — | All Ant Design CheckboxGroup props (`options`, `value`, `defaultValue`, `disabled`, `onChange`, etc.). |
|
|
146
|
+
|
|
147
|
+
## Consumer Example
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import { Checkbox } from '@fvc/checkbox';
|
|
151
|
+
|
|
152
|
+
export function PermissionsField({ value, onChange }) {
|
|
153
|
+
return (
|
|
154
|
+
<Checkbox.Group
|
|
155
|
+
block
|
|
156
|
+
options={[
|
|
157
|
+
{ label: 'View records', value: 'view' },
|
|
158
|
+
{ label: 'Create records', value: 'create' },
|
|
159
|
+
{ label: 'Edit records', value: 'edit' },
|
|
160
|
+
{ label: 'Delete records', value: 'delete' },
|
|
161
|
+
]}
|
|
162
|
+
value={value}
|
|
163
|
+
onChange={onChange}
|
|
164
|
+
/>
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
## Testing
|
|
170
|
+
|
|
171
|
+
```tsx
|
|
172
|
+
<Checkbox testId="agree-checkbox">I agree</Checkbox>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
screen.getByTestId('agree-checkbox');
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
## CSS Customisation
|
|
180
|
+
|
|
181
|
+
```css
|
|
182
|
+
:root {
|
|
183
|
+
/* Primary checkbox colour */
|
|
184
|
+
--blue-500: #1677ff;
|
|
185
|
+
|
|
186
|
+
/* Hover and disabled state */
|
|
187
|
+
--blue-300: #69b1ff;
|
|
188
|
+
|
|
189
|
+
/* Checkbox background */
|
|
190
|
+
--neutral-0: #ffffff;
|
|
191
|
+
}
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
## Development
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
bun run lint
|
|
198
|
+
bun run type-check
|
|
199
|
+
bun run test
|
|
200
|
+
bun run build
|
|
201
|
+
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type CheckboxProps as DefaultCheckboxProps } from 'antd';
|
|
2
|
-
import { CheckboxGroupProps } from
|
|
2
|
+
import { CheckboxGroupProps } from 'antd/es/checkbox';
|
|
3
3
|
export type CheckboxProps = DefaultCheckboxProps & {
|
|
4
4
|
visible?: boolean;
|
|
5
5
|
fullWidth?: boolean;
|
package/dist/lib/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
1
|
+
import{Checkbox as e}from"antd";import c from"react";function n(e,c){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&c.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)c.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function r(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
|
|
6
|
+
*/var t,l=(o||(o=1,t=a,function(){var e={}.hasOwnProperty;function c(){for(var e="",c=0;c<arguments.length;c++){var o=arguments[c];o&&(e=r(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 c.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=r(o,a));return o}function r(e,c){return c?e?e+" "+c:e+c:e}t.exports?(c.default=c,t.exports=c):window.classNames=c}()),a.exports),b=r(l);!function(e,c){void 0===c&&(c={});var n=c.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("/* Variables */\n/* Base Checkbox Styles */\nlabel.fvc-checkbox span.fvc-checkbox-inner {\n border: 2px solid var(--blue-500);\n border-radius: 2px;\n width: 18px;\n height: 18px;\n}\nlabel.fvc-checkbox {\n /* Hover States */\n}\nlabel.fvc-checkbox:hover span.fvc-checkbox-disabled span.fvc-checkbox-inner {\n border-color: var(--blue-300);\n}\nlabel.fvc-checkbox:hover span.fvc-checkbox-disabled:has([checked]) span.fvc-checkbox-inner {\n background-color: var(--blue-300);\n}\nlabel.fvc-checkbox:hover .fvc-checkbox-indeterminate span.fvc-checkbox-inner {\n border-color: var(--blue-500);\n background-color: var(--neutral-0);\n}\nlabel.fvc-checkbox:not(.fvc-checkbox-wrapper-disabled):hover:not(:has(.fvc-checkbox-indeterminate)) span.fvc-checkbox span.fvc-checkbox-inner {\n border-color: var(--blue-500);\n}\nlabel.fvc-checkbox:not(.fvc-checkbox-wrapper-disabled):hover:not(:has(.fvc-checkbox-indeterminate)) span.fvc-checkbox-checked span.fvc-checkbox-inner {\n background-color: var(--blue-500);\n}\nlabel.fvc-checkbox {\n /* Disabled State */\n}\nlabel.fvc-checkbox span.fvc-checkbox-disabled span.fvc-checkbox-inner {\n border-color: var(--blue-300) !important; /* Overrides default antd styles */\n background-color: var(--neutral-0) !important; /* Overrides default antd styles */\n}\nlabel.fvc-checkbox span.fvc-checkbox-disabled:has([checked]) span.fvc-checkbox-inner {\n background-color: var(--blue-300);\n}\nlabel.fvc-checkbox span.fvc-checkbox-disabled + .fvc-checkbox-label {\n color: initial;\n}\nlabel.fvc-checkbox {\n /* Intermediate State */\n}\nlabel.fvc-checkbox .fvc-checkbox-indeterminate span.fvc-checkbox-inner {\n border-color: var(--blue-500) !important; /* Overrides default antd styles */\n}\nlabel.fvc-checkbox .fvc-checkbox-indeterminate span.fvc-checkbox-inner::after {\n transition: none;\n visibility: hidden;\n}\nlabel.fvc-checkbox {\n /* Checked State */\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked span.fvc-checkbox-inner {\n background-color: var(--blue-500);\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked span.fvc-checkbox-inner::after {\n width: 6px;\n height: 12px;\n top: 45%;\n border-color: var(--neutral-0);\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked {\n /* Checked + Intermediate State */\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked.fvc-checkbox-indeterminate span.fvc-checkbox-inner {\n border-color: var(--blue-500);\n background-color: var(--neutral-0);\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked.fvc-checkbox-indeterminate span.fvc-checkbox-inner::after {\n width: 10px;\n height: 2px;\n top: 50%;\n visibility: visible;\n}\nlabel.fvc-checkbox span.fvc-checkbox-checked.fvc-checkbox-indeterminate:not(:has([disabled])) span.fvc-checkbox-inner::after {\n background-color: var(--blue-500);\n}\nlabel.fvc-checkbox {\n /* Size Variations */\n}\nlabel.fvc-checkbox-small span.fvc-checkbox-inner {\n width: 14px;\n height: 14px;\n}\nlabel.fvc-checkbox-small span.fvc-checkbox-checked span.fvc-checkbox-inner::after {\n width: 5px;\n height: 8px;\n}\nlabel.fvc-checkbox-small span.fvc-checkbox-checked.fvc-checkbox-indeterminate span.fvc-checkbox-inner::after {\n width: 8px;\n height: 2px;\n}\nlabel.fvc-checkbox {\n /* Utility Classes */\n}\nlabel.fvc-checkbox-white-space-wrapped {\n white-space: normal;\n}\nlabel.fvc-checkbox-full-width {\n min-width: 100%;\n}\nlabel.fvc-checkbox-invisible span.fvc-checkbox-inner {\n display: none;\n}\n/* Grouped Checkbox Styles */\n.fvc-checkbox-group-block {\n width: 100%;\n}\n.fvc-checkbox-group-block .fvc-checkbox-wrapper {\n width: calc(100% - 22px);\n}");const i="fvc-checkbox",h="fvc-checkbox",s=r=>{var{indeterminate:o=!1,visible:a=!0,size:t="medium",fullWidth:l=!1,whiteSpaceWrapped:i=!1,testId:s}=r,f=n(r,["indeterminate","visible","size","fullWidth","whiteSpaceWrapped","testId"]);const v=b(h,{[`${h}-${t}`]:t,[`${h}-invisible`]:!1===a,[`${h}-full-width`]:!!l,[`${h}-white-space-wrapped`]:!!i});return c.createElement(e,Object.assign({"data-testid":s,prefixCls:h,className:v,indeterminate:o},f))};s.Group=r=>{var{block:o,className:a}=r,t=n(r,["block","className"]);const l=b({[`${i}-group-block`]:!!o},a);return c.createElement(e.Group,Object.assign({prefixCls:i},t,{className:l}))};export{s as Checkbox};
|
package/package.json
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fvc/checkbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2-next-ec65dfb844e6183b3d7f417eee613cfe5ecfd997",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"react",
|
|
6
|
+
"react-component",
|
|
7
|
+
"fvc",
|
|
8
|
+
"fe-vis-core",
|
|
9
|
+
"ui",
|
|
10
|
+
"checkbox",
|
|
11
|
+
"design-system",
|
|
12
|
+
"antd"
|
|
13
|
+
],
|
|
4
14
|
"main": "./dist/lib/index.js",
|
|
5
15
|
"types": "./dist/lib/checkbox/src/index.d.ts",
|
|
6
16
|
"files": [
|
|
@@ -18,9 +28,15 @@
|
|
|
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": {
|
|
24
40
|
"react": "^18.0.0",
|
|
25
41
|
"antd": "^5.0.0"
|
|
26
42
|
}
|