Skip to content

Commit

Permalink
docs(checkbox): ✨ add choice props & finish checkbox component
Browse files Browse the repository at this point in the history
  • Loading branch information
@navin-moorthy
navin-moorthy committed Feb 11, 2022
1 parent 09a7130 commit 8b162e8
Show file tree
Hide file tree
Showing 3 changed files with 730 additions and 565 deletions.
26 changes: 13 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@
]
},
"dependencies": {
"@chakra-ui/hooks": "1.7.2",
"@chakra-ui/hooks": "1.8.2",
"@renderlesskit/react-tailwind": "0.0.1-alpha.37",
"lodash": "4.17.21",
"next": "12.0.10",
"nextra": "2.0.0-alpha.23",
"nextra": "2.0.0-alpha.24",
"nextra-renderlesskit-theme-docs": "link:.yalc/nextra-renderlesskit-theme-docs",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand All @@ -76,39 +76,39 @@
"twind": "^0.16.16"
},
"devDependencies": {
"@babel/core": "7.16.12",
"@babel/core": "7.17.2",
"@commitlint/cli": "16.1.0",
"@commitlint/config-conventional": "16.0.0",
"@next/eslint-plugin-next": "12.0.10",
"@release-it/conventional-changelog": "4.1.0",
"@testing-library/dom": "8.11.3",
"@testing-library/jest-dom": "5.16.1",
"@testing-library/jest-dom": "5.16.2",
"@testing-library/react": "12.1.2",
"@testing-library/user-event": "13.5.0",
"@types/jest": "27.4.0",
"@types/lodash": "4.14.178",
"@types/node": "17.0.14",
"@types/react": "17.0.38",
"@types/node": "17.0.17",
"@types/react": "17.0.39",
"@types/react-dom": "17.0.11",
"all-contributors-cli": "6.20.0",
"autoprefixer": "10.4.2",
"babel-jest": "27.4.6",
"babel-jest": "27.5.1",
"eslint": "8.8.0",
"eslint-config-prettier": "8.3.0",
"eslint-config-react-app": "7.0.0",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-simple-import-sort": "7.0.0",
"gacp": "2.10.2",
"husky": "7.0.4",
"jest": "27.4.7",
"lint-staged": "12.3.2",
"postcss": "8.4.5",
"jest": "27.5.1",
"lint-staged": "12.3.3",
"postcss": "8.4.6",
"prettier": "2.5.1",
"prettier-plugin-tailwindcss": "0.1.4",
"prettier-plugin-tailwindcss": "0.1.7",
"react-icons": "4.3.1",
"release-it": "14.12.4",
"sort-package-json": "1.53.1",
"tailwindcss": "3.0.18",
"sort-package-json": "1.54.0",
"tailwindcss": "3.0.21",
"typescript": "4.5.5"
},
"gacp": {
Expand Down
252 changes: 121 additions & 131 deletions pages/docs/components/forms/checkbox.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Callout } from "@/components/index";

import { ComponentLinks } from "@/components/index";
import {
ComponentLinks,
InteractiveCodeblock,
PropsTable,
Codeblock,
} from "@/components/index";

# Checkbox

Expand All @@ -15,19 +18,16 @@ several options. Checkbox composes
```js
import {
Checkbox,
CheckboxInput,
CheckboxLabel,
CheckboxDescription,
CheckboxIcon,
CheckboxInput
CheckboxLabel,
useCheckboxProps,
useCheckboxState,
CheckboxText,
} from "@renderlesskit/react-tailwind";
```

- **Checkbox** - main checkbox component
- **CheckboxInput** - checkbox's input component
- **CheckboxLabel** - label for checkbox
- **CheckboxIcon** - renders checkbox's icon
- **FormHelperText** - text for the checkbox label

## Usage

All the form elements of renderlesskit are compatible with `FormField`, thus you
Expand All @@ -36,127 +36,117 @@ automatically handle all the accessibility & props.

Basic usage.

<InteractiveCodeblock
children={({ spreadProps }) =>
`<Checkbox${spreadProps}>Label text</Checkbox>`
}
booleanProps={["disabled"]}
themeProps={{ size: "checkbox.icon.size" }}
choiceProps={{ defaultState: ["true", "false", "'indeterminate'"] }}
/>

## Checkbox sizes

Checkbox comes with 3 sizes `sm` `md` `lg`

```jsx live
<Checkbox size="sm">Label text</Checkbox>
```

## Controlled Checkbox

```jsx noInline live
const ControlledCheckbox = () => {
const [state, onStateChange] = React.useState(false);

return (
<>
<Checkbox state={state} onStateChange={onStateChange}>
Checkbox
</Checkbox>
<div>{`Checked: ${state}`}</div>
</>
);
};

export default ControlledCheckbox;
```

## Checkbox Groups

We can keep track of multiple checkbox states and use them as a group.

```jsx noInline live
const GroupedCheckbox = () => {
const [state, onStateChange] = React.useState([]);

return (
<>
<div className="mb-4">Choices: {state.join(", ")}</div>
<div className="space-x-2">
<Checkbox state={state} onStateChange={onStateChange} value="apple">
Apple
</Checkbox>
<Checkbox state={state} onStateChange={onStateChange} value="orange">
Orange
</Checkbox>
<Checkbox state={state} onStateChange={onStateChange} value="mango">
Mango
</Checkbox>
</div>
</>
);
};

export default GroupedCheckbox;
```

## Indeterminate checkboxes

```jsx noInline live
const IndeterminateExample = () => {
const [checkedItems, setCheckedItems] = React.useState([false, false]);

const allChecked = checkedItems.every(Boolean);
const isIndeterminate = checkedItems.some(Boolean) && !allChecked;

return (
<>
<Checkbox
state={isIndeterminate ? "indeterminate" : allChecked}
onStateChange={value => setCheckedItems([value, value])}
>
Parent Checkbox
</Checkbox>
<div className="flex flex-col pl-6 mt-1">
<Checkbox
state={checkedItems[0]}
onStateChange={value => setCheckedItems([value, checkedItems[1]])}
>
Child Checkbox 1
</Checkbox>
<Checkbox
state={checkedItems[1]}
onStateChange={value => setCheckedItems([checkedItems[0], value])}
>
Child Checkbox 2
</Checkbox>
</div>
</>
);
};

export default IndeterminateExample;
```

<Callout>
Checkout our storybook source code to [see more
examples](https://github.com/timelessco/renderlesskit-react-tailwind/blob/main/src/checkbox/stories/Checkbox.stories.tsx#L136)
</Callout>

## Customizing Checkboxes

To customize the checkbox we can use render props api to access the internal
state of the checkbox & change it's appearance as we like with composing
`CheckboxInput`, `CheckboxLabel` etc etc components like so:

```jsx noInline live
const CustomCheckbox = () => {
return (
<Checkbox size="lg">
{({ state }) => (
<CheckboxLabel>
<CheckboxInput />
<CheckboxIcon className="bg-transparent border-none">
{state ? "😃" : "😢"}
</CheckboxIcon>
<CheckboxText>Checkbox</CheckboxText>
</CheckboxLabel>
)}
</Checkbox>
);
};

export default CustomCheckbox;
```
<Codeblock
live
children={`
<div className="flex flex-col space-y-2">
<Checkbox size="sm" defaultState={false} />
<Checkbox size="md" defaultState={false} />
<Checkbox size="lg" defaultState={false} />
</div>
`}
/>

## Checkbox Uncontrolled

Uncontrolled checkbox can be used with `defaultState` prop.

<Codeblock
live
children={`
<div className="flex flex-col space-y-2">
<Checkbox size="md" defaultState={true} />
<Checkbox size="md" defaultState={false} />
<Checkbox size="md" defaultState="indeterminate" />
</div>
`}
/>

## Checkbox UI states

<Codeblock
live
children={`
<div className="flex flex-col space-y-2">
<Checkbox size="md" defaultState={false} label="Checkbox" className="w-72" />
<Checkbox size="md" defaultState={false} label="Multilined label Checkbox, just for demonstration" className="w-72" />
<Checkbox size="md" defaultState={false} label="Checkbox" description="Used when the checkbox is selected and will use its value for the form submission." className="w-72"/>
</div>
`}
/>

## Checkbox Disabled states

<Codeblock
live
children={`
<div className="flex flex-col space-y-2">
<Checkbox size="md" disabled defaultState={false} />
<Checkbox size="md" disabled defaultState={false} label="Checkboxs" />
<Checkbox size="md" disabled defaultState={false} label="Used when the checkbox is selected and will use its value for the form submission." className="w-72" />
<Checkbox size="md" disabled defaultState={false} label="Checkboxs" description="Used when the checkbox is selected and will use its value for the form submission."/>
</div>
`}
/>

## API Reference

### Checkbox

<PropsTable
data={[
{ name: "size", themeKey: "checkbox.icon.size", default: "md" },
{
name: "disabled",
type: "boolean",
description: "If `true`, the `Checkbox` will be disabled.",
default: "false",
},
{
name: "isChecked",
type: "boolean",
description: "If `true`, Checkbox is checked.",
default: "false",
},
{
name: "isUnchecked",
type: "boolean",
description: "If `true`, Checkbox is unchecked.",
default: "false",
},
{
name: "isIndeterminate",
type: "boolean",
description: "If `true`, Checkbox is indeterminate.",
default: "false",
},
{
name: "label",
type: "React.ReactNode",
description: "Label for the Checkbox.",
},
{
name: "desctioption",
type: "React.ReactNode",
description: "Description for the Checkbox.",
},
{
name: "icon",
type: "React.ReactNode",
description: "Provide custom icons as a replacement for the default ones.",
},

]} />
Loading

0 comments on commit 8b162e8

Please sign in to comment.