From 2186fb43af43d95b6f8954939a97adb00e957e89 Mon Sep 17 00:00:00 2001 From: Navin Moorthy Date: Thu, 23 Sep 2021 13:05:31 +0530 Subject: [PATCH] =?UTF-8?q?docs(all):=20=F0=9F=93=9D=20update=20radio=20ch?= =?UTF-8?q?eckbox=20ex=20with=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/breadcrumb.md | 4 +- docs/calendar.md | 7 +- docs/checkbox.md | 6 +- docs/datepicker.md | 33 +++++----- docs/drawer.md | 4 +- docs/number-input.md | 4 +- docs/picker-base.md | 4 +- docs/radio.md | 8 +-- docs/select.md | 12 ++-- docs/slider.md | 16 ++--- docs/timepicker.md | 11 ++-- docs/toast.md | 16 ++--- package.json | 6 +- .../stories/CheckboxBasic.component.tsx | 5 +- .../stories/CheckboxBasic.stories.tsx | 8 +++ src/radio/stories/RadioBasic.component.tsx | 4 +- src/radio/stories/RadioBasic.stories.tsx | 7 ++ yarn.lock | 66 +++++++------------ 18 files changed, 108 insertions(+), 113 deletions(-) diff --git a/docs/breadcrumb.md b/docs/breadcrumb.md index 1e6aa8217..5b77fe5e4 100644 --- a/docs/breadcrumb.md +++ b/docs/breadcrumb.md @@ -21,8 +21,8 @@ for its import * as React from "react"; import { - Breadcrumbs as RenderlesskitBreadcrumbs, BreadcrumbLink, + Breadcrumbs as RenderlesskitBreadcrumbs, } from "@renderlesskit/react"; export const Breadcrumbs = () => { @@ -60,7 +60,7 @@ export const Breadcrumbs = () => { export default Breadcrumbs; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/40ezi) +[![Edit CodeSandbox](https://img.shields.io/badge/Breadcrumbs-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/z16je) ## Accessibility Requirement diff --git a/docs/calendar.md b/docs/calendar.md index 04a928a4c..2593478a2 100644 --- a/docs/calendar.md +++ b/docs/calendar.md @@ -31,7 +31,6 @@ keyboard navigaiton & focus management. import * as React from "react"; import { - useCalendarState, Calendar as CalendarWrapper, CalendarButton, CalendarCell, @@ -39,7 +38,9 @@ import { CalendarGrid, CalendarHeader, CalendarWeekTitle, + useCalendarState, } from "@renderlesskit/react"; + import { ChevronLeft, ChevronRight, @@ -140,9 +141,9 @@ Also we can customize and style the ranges with CSS attribute selectors } ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/emwe0) +[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qojzs) -[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wypyx) +[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/rdtk7) ## Composition diff --git a/docs/checkbox.md b/docs/checkbox.md index fe1c82004..0953711bd 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -22,10 +22,10 @@ By default, it renders the native ``. import * as React from "react"; import { - useCheckboxState, Checkbox as RenderlesskitCheckbox, - USE_CHECKBOX_STATE_KEYS, splitStateProps, + USE_CHECKBOX_STATE_KEYS, + useCheckboxState, } from "@renderlesskit/react"; export const Checkbox = props => { @@ -42,7 +42,7 @@ export const Checkbox = props => { export default Checkbox; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Checkbox%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/y9yts) +[![Edit CodeSandbox](https://img.shields.io/badge/Checkbox%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vwt44) ## Accessibility Requirement diff --git a/docs/datepicker.md b/docs/datepicker.md index 8623b39ba..3e80b7adb 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -28,12 +28,6 @@ for the keyboard navigation & accessibility features. import * as React from "react"; import { - DatePicker, - DatePickerSegment, - DatePickerContent, - DatePickerTrigger, - useDatePickerState, - DatePickerSegmentField, Calendar as CalendarWrapper, CalendarButton, CalendarCell, @@ -41,7 +35,14 @@ import { CalendarGrid, CalendarHeader, CalendarWeekTitle, + DatePicker, + DatePickerContent, + DatePickerSegment, + DatePickerSegmentField, + DatePickerTrigger, + useDatePickerState, } from "@renderlesskit/react"; + import { CalendarIcon, ChevronLeft, @@ -139,7 +140,7 @@ const Calendar = state => { }; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5hx47) +[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/kzk3i) ### Range DatePicker @@ -147,19 +148,19 @@ const Calendar = state => { import React from "react"; import { - DatePicker, - DatePickerContent, - DatePickerSegment, - DatePickerTrigger, - DatePickerSegmentField, - useDateRangePickerState, Calendar, + CalendarButton, CalendarCell, + CalendarCellButton, CalendarGrid, CalendarHeader, - CalendarButton, CalendarWeekTitle, - CalendarCellButton, + DatePicker, + DatePickerContent, + DatePickerSegment, + DatePickerSegmentField, + DatePickerTrigger, + useDateRangePickerState, } from "@renderlesskit/react"; import { @@ -279,7 +280,7 @@ const RangeCalendar = state => { }; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/prvgx) +[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/181vj) ## Composition diff --git a/docs/drawer.md b/docs/drawer.md index bfc3936f9..6f5ce08f0 100644 --- a/docs/drawer.md +++ b/docs/drawer.md @@ -20,10 +20,10 @@ import { css } from "@emotion/css"; import { Drawer as RenderlesskitDrawer, - useDrawerState, DrawerBackdrop, DrawerCloseButton, DrawerDisclosure, + useDrawerState, } from "@renderlesskit/react"; export const Drawer = props => { @@ -95,7 +95,7 @@ const cssTransforms = { }; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/fyqw3) +[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/o99mb) ## Composition diff --git a/docs/number-input.md b/docs/number-input.md index 7b9d28200..c6507fc10 100644 --- a/docs/number-input.md +++ b/docs/number-input.md @@ -25,9 +25,9 @@ import * as React from "react"; import { NumberInput as RenderlesskitNumberInput, - useNumberInputState, NumberInputDecrementButton, NumberInputIncrementButton, + useNumberInputState, } from "@renderlesskit/react"; export const NumberInput = props => { @@ -53,7 +53,7 @@ export const NumberInput = props => { export default NumberInput; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/NumberInput-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yko82) +[![Edit CodeSandbox](https://img.shields.io/badge/NumberInput-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/up5vw) ## Accessibility Requirement diff --git a/docs/picker-base.md b/docs/picker-base.md index 220238817..3133fa4a6 100644 --- a/docs/picker-base.md +++ b/docs/picker-base.md @@ -21,8 +21,8 @@ import * as React from "react"; import { PickerBase as RenderlesskitPickerBase, - PickerBaseTrigger, PickerBaseContent, + PickerBaseTrigger, usePickerBaseState, } from "@renderlesskit/react"; @@ -42,7 +42,7 @@ export const PickerBase = props => { export default PickerBase; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Picker%20Base-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yighd) +[![Edit CodeSandbox](https://img.shields.io/badge/Picker%20Base-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/m1o69) ## Composition diff --git a/docs/radio.md b/docs/radio.md index 0e7e9575d..405bca836 100644 --- a/docs/radio.md +++ b/docs/radio.md @@ -22,11 +22,11 @@ By default, it renders the native ``. import * as React from "react"; import { - useRadioState, Radio as RenderlesskitRadio, - USE_RADIO_STATE_KEYS, - splitStateProps, RadioGroup, + splitStateProps, + USE_RADIO_STATE_KEYS, + useRadioState, } from "@renderlesskit/react"; export const Radio = props => { @@ -52,7 +52,7 @@ export const Radio = props => { export default Radio; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Radio%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/juzxw) +[![Edit CodeSandbox](https://img.shields.io/badge/Radio%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/u62dy) ## Accessibility Requirement diff --git a/docs/select.md b/docs/select.md index c8de941d7..fbfbba876 100644 --- a/docs/select.md +++ b/docs/select.md @@ -56,19 +56,19 @@ export default Select; [![Edit CodeSandbox](https://img.shields.io/badge/Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/surso) -[![Edit CodeSandbox](https://img.shields.io/badge/Dynamic%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/l50wh) +[![Edit CodeSandbox](https://img.shields.io/badge/Dynamic%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/7pd7i) -[![Edit CodeSandbox](https://img.shields.io/badge/Multiple%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/quwfv) +[![Edit CodeSandbox](https://img.shields.io/badge/Multiple%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/kdlji) [![Edit CodeSandbox](https://img.shields.io/badge/Fetch%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8irr5) -[![Edit CodeSandbox](https://img.shields.io/badge/Windows%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/osmtv) +[![Edit CodeSandbox](https://img.shields.io/badge/Windows%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/yso1f) -[![Edit CodeSandbox](https://img.shields.io/badge/Custom%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/mbn6n) +[![Edit CodeSandbox](https://img.shields.io/badge/Custom%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/243ku) -[![Edit CodeSandbox](https://img.shields.io/badge/Controlled%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/b4w5q) +[![Edit CodeSandbox](https://img.shields.io/badge/Controlled%20Select-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/tnzwu) -[![Edit CodeSandbox](https://img.shields.io/badge/Virtual%20Select%20Options-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/l9z28) +[![Edit CodeSandbox](https://img.shields.io/badge/Virtual%20Select%20Options-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qqrjd) ## Composition diff --git a/docs/slider.md b/docs/slider.md index c16f206fc..17feaef26 100644 --- a/docs/slider.md +++ b/docs/slider.md @@ -26,9 +26,9 @@ import * as React from "react"; import { VisuallyHidden } from "reakit"; import { - SliderTrack, - SliderThumb, SliderInput, + SliderThumb, + SliderTrack, useSliderState, } from "@renderlesskit/react"; @@ -86,17 +86,17 @@ export const Slider = args => { export default Slider; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/oii0e) +[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wqe8x) -[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Origin%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0i333) +[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Origin%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/myoqv) -[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Reversed%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/rcn4d) +[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Reversed%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/jv5dw) -[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Vertical%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/wl1jp) +[![Edit CodeSandbox](https://img.shields.io/badge/Single%20Vertical%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/gph2l) -[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/bibgn) +[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/d02dk) -[![Edit CodeSandbox](https://img.shields.io/badge/Multi%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/tgseh) +[![Edit CodeSandbox](https://img.shields.io/badge/Multi%20Slider-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0rvot) ## Accessibility Requirement diff --git a/docs/timepicker.md b/docs/timepicker.md index daeebff43..db34b75eb 100644 --- a/docs/timepicker.md +++ b/docs/timepicker.md @@ -27,13 +27,14 @@ import * as React from "react"; import { TimePicker as RenderlesskitTimePicker, TimePickerColumn, + TimePickerColumnValue, + TimePickerContent, TimePickerSegment, + TimePickerSegmentField, TimePickerTrigger, - TimePickerContent, useTimePickerState, - TimePickerColumnValue, - TimePickerSegmentField, } from "@renderlesskit/react"; + import { CalendarIcon } from "./Utils.component"; export const TimePicker = props => { @@ -112,7 +113,7 @@ export const TimePicker = props => { export default TimePicker; ``` -[![Edit CodeSandbox](https://img.shields.io/badge/TimePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/3d78z) +[![Edit CodeSandbox](https://img.shields.io/badge/TimePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/70ft0) ## Composition @@ -232,10 +233,10 @@ export default TimePicker; | **`columnType`** | "hour" \| "minute" \| "meridian" | | | **`restoreOldTime`** | (() => Date) \| undefined | | | **`updateOldTime`** | (() => void) \| undefined | | -| **`date`** | Date | | | **`move`** | (id: string \| null) => void | Moves focus to a given item ID. | | **`selected`** | number | | | **`setSelected`** | (value: number, close?: boolean \| undefined) =>... | | +| **`date`** | Date | | diff --git a/docs/toast.md b/docs/toast.md index 08ff964cb..21efb5223 100644 --- a/docs/toast.md +++ b/docs/toast.md @@ -13,14 +13,14 @@ import * as React from "react"; import { Alert, + AlertIndicator, + getRandomContent, + getRandomPlacement, + getRandomType, ToastBar, ToastProvider, TriggerButton, - getRandomType, - AlertIndicator, - getRandomContent, useToastHandlers, - getRandomPlacement, } from "./Utils.component"; export const Toast = () => { @@ -231,13 +231,13 @@ function ToastTriggers() { } ``` -[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/os0ei) +[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0zrue) -[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Animated-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/dg27l) +[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Animated-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/ohi1e) -[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Transition-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/j20bg) +[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Transition-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/g6mc8) -[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20React%20Spring-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/qx2ok) +[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20React%20Spring-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/z762p) ## Props diff --git a/package.json b/package.json index 3487702ef..40e5aab5d 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,7 @@ "@storybook/builder-webpack5": "^6.3.8", "@storybook/manager-webpack5": "^6.3.8", "@storybook/react": "^6.3.8", - "@testing-library/dom": "^8.5.0", + "@testing-library/dom": "^8.6.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.1.0", "@testing-library/react-hooks": "^7.0.2", @@ -165,7 +165,7 @@ "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-testing-library": "^4.12.3", "gacp": "^2.10.2", - "glob": "^7.1.7", + "glob": "^7.2.0", "glob-fs": "^0.1.7", "husky": "^7.0.2", "jest": "^27.2.1", @@ -178,7 +178,7 @@ "markdown-toc": "^1.2.0", "md-node-inject": "^1.0.1", "mockdate": "^3.0.5", - "node-fetch": "3.0.0", + "node-fetch": "2.6.1", "outdent": "^0.8.0", "patch-package": "^6.4.7", "pinst": "^2.1.6", diff --git a/src/checkbox/stories/CheckboxBasic.component.tsx b/src/checkbox/stories/CheckboxBasic.component.tsx index 6322e0c6c..f4e398794 100644 --- a/src/checkbox/stories/CheckboxBasic.component.tsx +++ b/src/checkbox/stories/CheckboxBasic.component.tsx @@ -2,15 +2,14 @@ import * as React from "react"; import { Checkbox as RenderlesskitCheckbox, + CheckboxHTMLProps, CheckboxInitialState, - CheckboxProps as RenderlesskitCheckboxProps, splitStateProps, USE_CHECKBOX_STATE_KEYS, useCheckboxState, } from "../../index"; -export type CheckboxProps = RenderlesskitCheckboxProps & - CheckboxInitialState & {}; +export type CheckboxProps = CheckboxHTMLProps & CheckboxInitialState & {}; export const Checkbox: React.FC = props => { const [stateProps, checkboxProps] = splitStateProps< diff --git a/src/checkbox/stories/CheckboxBasic.stories.tsx b/src/checkbox/stories/CheckboxBasic.stories.tsx index 17c302c1f..a6d84f96a 100644 --- a/src/checkbox/stories/CheckboxBasic.stories.tsx +++ b/src/checkbox/stories/CheckboxBasic.stories.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Meta, Story } from "@storybook/react"; import { createControls, createPreviewTabs } from "../../../.storybook/utils"; +import { CheckboxState } from "../CheckboxState"; import js from "./templates/CheckboxBasicJsx"; import ts from "./templates/CheckboxBasicTsx"; @@ -32,3 +33,10 @@ export default { } as Meta; export const Default: Story = args => ; + +export const Controlled = () => { + const [value, setValue] = React.useState(true); + console.log("%cvalue", "color: #997326", value); + + return ; +}; diff --git a/src/radio/stories/RadioBasic.component.tsx b/src/radio/stories/RadioBasic.component.tsx index b1fb422b6..4fc063c22 100644 --- a/src/radio/stories/RadioBasic.component.tsx +++ b/src/radio/stories/RadioBasic.component.tsx @@ -3,14 +3,14 @@ import * as React from "react"; import { Radio as RenderlesskitRadio, RadioGroup, + RadioGroupHTMLProps, RadioInitialState, - RadioProps as RenderlesskitRadioProps, splitStateProps, USE_RADIO_STATE_KEYS, useRadioState, } from "../../index"; -export type RadioProps = RenderlesskitRadioProps & RadioInitialState & {}; +export type RadioProps = RadioInitialState & RadioGroupHTMLProps & {}; export const Radio: React.FC = props => { const [stateProps, radioProps] = splitStateProps< diff --git a/src/radio/stories/RadioBasic.stories.tsx b/src/radio/stories/RadioBasic.stories.tsx index 9e68cf60d..3fddf6e9b 100644 --- a/src/radio/stories/RadioBasic.stories.tsx +++ b/src/radio/stories/RadioBasic.stories.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { Meta, Story } from "@storybook/react"; import { createControls, createPreviewTabs } from "../../../.storybook/utils"; +import { RadioState } from "../RadioState"; import js from "./templates/RadioBasicJsx"; import ts from "./templates/RadioBasicTsx"; @@ -32,3 +33,9 @@ export default { } as Meta; export const Default: Story = args => ; + +export const Controlled = () => { + const [value, setValue] = React.useState("orange"); + + return ; +}; diff --git a/yarn.lock b/yarn.lock index a0ee6237a..5cdb397c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -135,15 +135,6 @@ semver "^6.3.0" source-map "^0.5.0" -"@babel/eslint-parser@^7.15.7": - version "7.15.7" - resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.15.7.tgz#2dc3d0ff0ea22bb1e08d93b4eeb1149bf1c75f2d" - integrity sha512-yJkHyomClm6A2Xzb8pdAo4HzYMSXFn1O5zrCYvbFP0yQFvHueLedV8WiEno8yJOKStjUXzBZzJFeWQ7b3YMsqQ== - dependencies: - eslint-scope "^5.1.1" - eslint-visitor-keys "^2.1.0" - semver "^6.3.0" - "@babel/generator@^7.12.1", "@babel/generator@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.15.4.tgz#85acb159a267ca6324f9793986991ee2022a05b0" @@ -4251,10 +4242,10 @@ lz-string "^1.4.4" pretty-format "^27.0.2" -"@testing-library/dom@^8.5.0": - version "8.5.0" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.5.0.tgz#56e31331015f943a68c6ec27e259fdf16c69ab7d" - integrity sha512-O0fmHFaPlqaYCpa/cBL0cvroMridb9vZsMLacgIqrlxj+fd+bGF8UfAgwsLCHRF84KLBafWlm9CuOvxeNTlodw== +"@testing-library/dom@^8.6.0": + version "8.6.0" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.6.0.tgz#c92ba5b714882eabfd7f25d8f5c59d4a4b0bfcac" + integrity sha512-EDBMEWK8IVpNF7B7C1knb0lLB4Si9RWte/YTEi6CqmqUK5CYCoecwOOG9pEijU/H6s3u0drUxH5sKT07FCgFIg== dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" @@ -8033,11 +8024,6 @@ dargs@^7.0.0: resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc" integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg== -data-uri-to-buffer@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636" - integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og== - data-urls@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b" @@ -9045,7 +9031,7 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3 resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e" integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ== -eslint-visitor-keys@^2.0.0, eslint-visitor-keys@^2.1.0: +eslint-visitor-keys@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== @@ -9465,13 +9451,6 @@ fbjs@^0.8.4: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fetch-blob@^3.1.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.1.2.tgz#6bc438675f3851ecea51758ac91f6a1cd1bacabd" - integrity sha512-hunJbvy/6OLjCD0uuhLdp0mMPzP/yd2ssd1t2FCJsaA7wkWhpbp9xfuNVpv7Ll4jFhzp6T4LAupSiV9uOeg0VQ== - dependencies: - web-streams-polyfill "^3.0.3" - figgy-pudding@^3.5.1: version "3.5.2" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e" @@ -10299,7 +10278,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.1.7: +glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6: version "7.1.7" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90" integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== @@ -10311,6 +10290,18 @@ glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, gl once "^1.3.0" path-is-absolute "^1.0.0" +glob@^7.2.0: + version "7.2.0" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023" + integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + global-dirs@^0.1.0, global-dirs@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445" @@ -13943,13 +13934,10 @@ node-fetch-npm@^2.0.2: json-parse-better-errors "^1.0.0" safe-buffer "^5.1.1" -node-fetch@3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.0.0.tgz#79da7146a520036f2c5f644e4a26095f17e411ea" - integrity sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q== - dependencies: - data-uri-to-buffer "^3.0.1" - fetch-blob "^3.1.2" +node-fetch@2.6.1, node-fetch@^2.6.0, node-fetch@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== node-fetch@^1.0.1: version "1.7.3" @@ -13959,11 +13947,6 @@ node-fetch@^1.0.1: encoding "^0.1.11" is-stream "^1.0.1" -node-fetch@^2.6.0, node-fetch@^2.6.1: - version "2.6.1" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" - integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== - node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" @@ -18783,11 +18766,6 @@ web-namespaces@^1.0.0: resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec" integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw== -web-streams-polyfill@^3.0.3: - version "3.1.1" - resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.1.1.tgz#1516f2d4ea8f1bdbfed15eb65cb2df87098c8364" - integrity sha512-Czi3fG883e96T4DLEPRvufrF2ydhOOW1+1a6c3gNjH2aIh50DNFBdfwh2AKoOf1rXvpvavAoA11Qdq9+BKjE0Q== - webidl-conversions@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"