diff --git a/scripts/create-preview-tabs.ts b/.storybook/utils.ts similarity index 79% rename from scripts/create-preview-tabs.ts rename to .storybook/utils.ts index d6c7ede95..c5e2e2898 100644 --- a/scripts/create-preview-tabs.ts +++ b/.storybook/utils.ts @@ -1,6 +1,34 @@ /* eslint-disable no-new-func */ import { CodeSandboxTemplate } from "storybook-addon-preview"; +type CreateControlsOptions = { + unions?: string[]; + ignore?: string[]; + allow?: string[]; +}; + +export const createControls = (options?: CreateControlsOptions) => { + try { + const ignoredControls = (options?.ignore || []).reduce((cur, key) => { + return { + ...cur, + [key]: { table: { disable: true } }, + }; + }, {}); + + const allowedControls = (options?.allow || []).reduce((cur, key) => { + return { + ...cur, + [key]: { table: { disable: true } }, + }; + }, {}); + + return { ...ignoredControls, ...allowedControls }; + } catch (error) { + console.log(error); + } +}; + interface Props { js?: string; ts?: string; diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index e7edbe293..000000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require("path"); - -module.exports = ({ config }) => { - config.resolve.alias = { - ...config.resolve.alias, - "@renderlesskit/react": path.resolve(__dirname, "../src"), - }; - - return config; -}; diff --git a/jest.config.ts b/jest.config.ts index dd80eb9fb..b35f620da 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -15,7 +15,6 @@ export default { moduleNameMapper: { "\\.(css|less|sass|scss)$": "/src/__mocks__/styleMock.js", "^@shared(.*)$": "/shared$1", - "^@renderlesskit/react$": "/src", }, coveragePathIgnorePatterns: [ "node_modules", diff --git a/scripts/utils/index.js b/scripts/utils/index.js index c8fa7f279..85f41e402 100644 --- a/scripts/utils/index.js +++ b/scripts/utils/index.js @@ -132,6 +132,17 @@ function isStateReturnDeclaration(node) { ); } +/** + * @param {import("ts-morph").Node} node + */ +function isInitialStateDeclaration(node) { + const kindName = node.getKindName(); + const escapedName = getEscapedName(node); + return ( + kindName === "TypeAliasDeclaration" && /.+InitialState$/.test(escapedName) + ); +} + /** * @param {import("ts-morph").Node} node */ @@ -296,10 +307,7 @@ function reduceKeys(acc, [moduleName, array]) { const finalString = `${declaration} = ${value};\n`; - if (!moduleName.endsWith("State")) { - return `${acc}export ${finalString}`; - } - return `${acc}${finalString}`; + return `${acc}export ${finalString}`; } /** @@ -339,6 +347,13 @@ function makeKeys(rootPath) { keys[getModuleName(node)] = [...stateKeys, ...props]; } } + if (isInitialStateDeclaration(node)) { + const literalNode = isOptionsDeclaration(node) + ? getLiteralNode(node) + : node; + const props = literalNode ? getPropsNames(literalNode, true) : []; + keys[getModuleName(node)] = props; + } }); }); diff --git a/src/accordion/__keys.ts b/src/accordion/__keys.ts index cfd060487..e82d0f306 100644 --- a/src/accordion/__keys.ts +++ b/src/accordion/__keys.ts @@ -1,19 +1,22 @@ // Automatically generated -const ACCORDION_BASE_STATE_KEYS = [ +export const USE_ACCORDION_BASE_STATE_KEYS = [ "baseId", - "unstable_idCountRef", "unstable_virtual", "rtl", "orientation", - "items", - "groups", "currentId", "loop", "wrap", "shift", + "unstable_includesBaseElement", +] as const; +export const ACCORDION_BASE_STATE_KEYS = [ + ...USE_ACCORDION_BASE_STATE_KEYS, + "unstable_idCountRef", + "items", + "groups", "unstable_moves", "unstable_hasActiveWidget", - "unstable_includesBaseElement", "panels", "setBaseId", "registerItem", @@ -41,7 +44,15 @@ const ACCORDION_BASE_STATE_KEYS = [ "registerPanel", "unregisterPanel", ] as const; -const ACCORDION_MULTI_STATE_KEYS = [ +export const USE_ACCORDION_MULTI_STATE_KEYS = [ + ...USE_ACCORDION_BASE_STATE_KEYS, + "manual", + "selectedIds", + "defaultSelectedIds", + "onSelectedIdsChange", + "shouldUpdate", +] as const; +export const ACCORDION_MULTI_STATE_KEYS = [ ...ACCORDION_BASE_STATE_KEYS, "selectedIds", "allowToggle", @@ -50,7 +61,16 @@ const ACCORDION_MULTI_STATE_KEYS = [ "setSelectedIds", "select", ] as const; -const ACCORDION_STATE_KEYS = [ +export const USE_ACCORDION_STATE_KEYS = [ + ...USE_ACCORDION_BASE_STATE_KEYS, + "selectedId", + "manual", + "allowToggle", + "defaultSelectedId", + "onSelectedIdChange", + "shouldUpdate", +] as const; +export const ACCORDION_STATE_KEYS = [ ...ACCORDION_BASE_STATE_KEYS, "selectedId", "allowToggle", diff --git a/src/accordion/index.ts b/src/accordion/index.ts index 9bcf62fc3..d685a847e 100644 --- a/src/accordion/index.ts +++ b/src/accordion/index.ts @@ -5,3 +5,4 @@ export * from "./AccordionBaseState"; export * from "./Accordion"; export * from "./AccordionTrigger"; export * from "./AccordionPanel"; +export * from "./__keys"; diff --git a/src/accordion/stories/AccordionBasic.component.tsx b/src/accordion/stories/AccordionBasic.component.tsx index 11d930399..f21452f4a 100644 --- a/src/accordion/stories/AccordionBasic.component.tsx +++ b/src/accordion/stories/AccordionBasic.component.tsx @@ -5,7 +5,7 @@ import { AccordionPanel, AccordionTrigger, useAccordionState, -} from "@renderlesskit/react"; +} from "../index"; export function App(props: any) { const state = useAccordionState(props); diff --git a/src/accordion/stories/AccordionBasic.stories.tsx b/src/accordion/stories/AccordionBasic.stories.tsx index 8f38faade..f8d47ba4d 100644 --- a/src/accordion/stories/AccordionBasic.stories.tsx +++ b/src/accordion/stories/AccordionBasic.stories.tsx @@ -4,7 +4,7 @@ import { CompositeState } from "reakit/ts"; import { AccordionInitialState } from "../AccordionState"; import { App as Accordion } from "./AccordionBasic.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { accordionBasicTemplate, accordionBasicTemplateJs } from "./templates"; export const Default: React.FC< diff --git a/src/accordion/stories/AccordionMulti.component.tsx b/src/accordion/stories/AccordionMulti.component.tsx index 0aa8a38f5..21e005519 100644 --- a/src/accordion/stories/AccordionMulti.component.tsx +++ b/src/accordion/stories/AccordionMulti.component.tsx @@ -5,7 +5,7 @@ import { AccordionPanel, AccordionTrigger, useAccordionMultiState, -} from "@renderlesskit/react"; +} from "../index"; export function App(props: any) { const state = useAccordionMultiState(props); diff --git a/src/accordion/stories/AccordionMulti.stories.tsx b/src/accordion/stories/AccordionMulti.stories.tsx index fc940a951..93489554b 100644 --- a/src/accordion/stories/AccordionMulti.stories.tsx +++ b/src/accordion/stories/AccordionMulti.stories.tsx @@ -4,7 +4,7 @@ import { CompositeState } from "reakit/ts"; import { AccordionInitialState } from "../AccordionState"; import { App as Accordion } from "./AccordionMulti.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { accordionMultiTemplate, accordionMultiTemplateJs } from "./templates"; export const Default: React.FC< diff --git a/src/accordion/stories/AccordionStyled.component.tsx b/src/accordion/stories/AccordionStyled.component.tsx index acf6a746f..3280f519e 100644 --- a/src/accordion/stories/AccordionStyled.component.tsx +++ b/src/accordion/stories/AccordionStyled.component.tsx @@ -6,7 +6,7 @@ import { AccordionTrigger, useAccordionState, AccordionInitialState, -} from "@renderlesskit/react"; +} from "../index"; // Styled based on https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html export const App: React.FC = props => { diff --git a/src/accordion/stories/AccordionStyled.stories.tsx b/src/accordion/stories/AccordionStyled.stories.tsx index e82408baf..152c3201c 100644 --- a/src/accordion/stories/AccordionStyled.stories.tsx +++ b/src/accordion/stories/AccordionStyled.stories.tsx @@ -10,7 +10,7 @@ import { import "./AccordionStyled.css"; import { AccordionInitialState } from "../AccordionState"; import { App as Accordion } from "./AccordionStyled.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export const Default: React.FC< Omit, keyof CompositeState> diff --git a/src/accordion/stories/AccordionZAuto.component.tsx b/src/accordion/stories/AccordionZAuto.component.tsx index f16a3193a..bd81d904c 100644 --- a/src/accordion/stories/AccordionZAuto.component.tsx +++ b/src/accordion/stories/AccordionZAuto.component.tsx @@ -5,7 +5,7 @@ import { AccordionPanel, AccordionTrigger, useAccordionState, -} from "@renderlesskit/react"; +} from "../index"; export function App(props: any) { const initialProps = { diff --git a/src/accordion/stories/AccordionZAuto.stories.tsx b/src/accordion/stories/AccordionZAuto.stories.tsx index a0055ea18..a5af80fda 100644 --- a/src/accordion/stories/AccordionZAuto.stories.tsx +++ b/src/accordion/stories/AccordionZAuto.stories.tsx @@ -4,7 +4,7 @@ import { CompositeState } from "reakit/ts"; import { AccordionInitialState } from "../AccordionState"; import { App as Accordion } from "./AccordionZAuto.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { accordionZAutoTemplate, accordionZAutoTemplateJs } from "./templates"; export const Default: React.FC< diff --git a/src/breadcrumbs/index.ts b/src/breadcrumbs/index.ts index 1115766bd..87fce4ae3 100644 --- a/src/breadcrumbs/index.ts +++ b/src/breadcrumbs/index.ts @@ -1,2 +1,3 @@ export * from "./Breadcrumbs"; export * from "./BreadcrumbLink"; +export * from "./__keys"; diff --git a/src/breadcrumbs/stories/Breadcrumbs.component.tsx b/src/breadcrumbs/stories/Breadcrumbs.component.tsx index b985a9ebf..4561dd967 100644 --- a/src/breadcrumbs/stories/Breadcrumbs.component.tsx +++ b/src/breadcrumbs/stories/Breadcrumbs.component.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { Breadcrumbs, BreadcrumbLink } from "@renderlesskit/react"; +import { Breadcrumbs, BreadcrumbLink } from "../index"; export const App: React.FC = props => { return ( diff --git a/src/breadcrumbs/stories/Breadcrumbs.stories.tsx b/src/breadcrumbs/stories/Breadcrumbs.stories.tsx index d85fe2664..5fe085627 100644 --- a/src/breadcrumbs/stories/Breadcrumbs.stories.tsx +++ b/src/breadcrumbs/stories/Breadcrumbs.stories.tsx @@ -8,7 +8,7 @@ import { breadcrumbsTemplateJs, breadcrumbsCssTemplate, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Breadcrumbs, diff --git a/src/calendar/__keys.ts b/src/calendar/__keys.ts index 100441cc6..8f8fee853 100644 --- a/src/calendar/__keys.ts +++ b/src/calendar/__keys.ts @@ -1,5 +1,16 @@ // Automatically generated -const CALENDAR_STATE_KEYS = [ +export const USE_CALENDAR_STATE_KEYS = [ + "value", + "defaultValue", + "onChange", + "minValue", + "maxValue", + "isDisabled", + "isReadOnly", + "autoFocus", + "id", +] as const; +export const CALENDAR_STATE_KEYS = [ "calendarId", "dateValue", "minDate", @@ -33,7 +44,8 @@ const CALENDAR_STATE_KEYS = [ "selectFocusedDate", "selectDate", ] as const; -const RANGE_CALENDAR_STATE_KEYS = [ +export const USE_RANGE_CALENDAR_STATE_KEYS = USE_CALENDAR_STATE_KEYS; +export const RANGE_CALENDAR_STATE_KEYS = [ ...CALENDAR_STATE_KEYS, "dateRangeValue", "anchorDate", diff --git a/src/calendar/index.ts b/src/calendar/index.ts index 79ede13ab..ec03eebfe 100644 --- a/src/calendar/index.ts +++ b/src/calendar/index.ts @@ -7,3 +7,4 @@ export * from "./CalendarButton"; export * from "./CalendarGrid"; export * from "./CalendarHeader"; export * from "./CalendarWeekTitle"; +export * from "./__keys"; diff --git a/src/calendar/stories/CalendarBase.component.tsx b/src/calendar/stories/CalendarBase.component.tsx index 26dbde0f2..206479a99 100644 --- a/src/calendar/stories/CalendarBase.component.tsx +++ b/src/calendar/stories/CalendarBase.component.tsx @@ -10,7 +10,7 @@ import { CalendarHeader, CalendarWeekTitle, CalendarInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { ChevronLeft, diff --git a/src/calendar/stories/CalendarBase.stories.tsx b/src/calendar/stories/CalendarBase.stories.tsx index 3b5bea4ce..cbc501be5 100644 --- a/src/calendar/stories/CalendarBase.stories.tsx +++ b/src/calendar/stories/CalendarBase.stories.tsx @@ -11,9 +11,9 @@ import { utilsTemplate, } from "./templates"; import { App as Calendar } from "./CalendarBase.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { format } from "util"; -import { addWeeks } from "@renderlesskit/react/utils"; +import { addWeeks } from "../../utils/index"; export default { component: Calendar, diff --git a/src/calendar/stories/CalendarRange.component.tsx b/src/calendar/stories/CalendarRange.component.tsx index a450eb516..ae5859485 100644 --- a/src/calendar/stories/CalendarRange.component.tsx +++ b/src/calendar/stories/CalendarRange.component.tsx @@ -10,7 +10,7 @@ import { CalendarWeekTitle, useRangeCalendarState, RangeCalendarInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { ChevronLeft, diff --git a/src/calendar/stories/CalendarRange.stories.tsx b/src/calendar/stories/CalendarRange.stories.tsx index 814c78cc0..22e8b09ef 100644 --- a/src/calendar/stories/CalendarRange.stories.tsx +++ b/src/calendar/stories/CalendarRange.stories.tsx @@ -11,14 +11,14 @@ import { utilsTemplate, } from "./templates"; import { App as RangeCalendar } from "./CalendarRange.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { addDays, addWeeks, format, subDays, subWeeks, -} from "@renderlesskit/react/utils"; +} from "../../utils/index"; export default { title: "Calendar/Range", diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx index c671ee2cf..bcc9ff9a4 100644 --- a/src/checkbox/Checkbox.tsx +++ b/src/checkbox/Checkbox.tsx @@ -81,12 +81,12 @@ export const useCheckbox = createHook({ const onChange = React.useCallback( (event: React.ChangeEvent) => { - console.log("%cevent", "color: #1d5673", event); const element = event.currentTarget; if (disabled) { event.stopPropagation(); event.preventDefault(); + return; } @@ -103,7 +103,6 @@ export const useCheckbox = createHook({ if (!setState) return; if (typeof value === "undefined") { - console.log("%cchecked", "color: #731d1d", checked); setState(!checked); } else { const stateProp = Array.isArray(state) ? state : []; diff --git a/src/checkbox/CheckboxState.tsx b/src/checkbox/CheckboxState.tsx index 7d6bf1e75..4ca481e9a 100644 --- a/src/checkbox/CheckboxState.tsx +++ b/src/checkbox/CheckboxState.tsx @@ -1,4 +1,4 @@ -import { useControllableState } from "@renderlesskit/react"; +import { useControllableState } from "../utils/index"; export type CheckboxState = { /** @@ -11,7 +11,7 @@ export type CheckboxState = { export type CheckboxActions = { /** - * Sets `state`. + * Sets `state` for the checkbox. */ setState: React.Dispatch>; }; @@ -47,14 +47,11 @@ export function useCheckboxState( onStateChange, } = props; - console.log("%cstateProp", "color: #00b300", stateProp); - const [state, setState] = useControllableState({ defaultValue: defaultState, value: stateProp, onChange: onStateChange, }); - console.log("%cstate", "color: #d90000", state); return { state, setState }; } diff --git a/src/checkbox/__keys.ts b/src/checkbox/__keys.ts index 7114b71d2..372208d29 100644 --- a/src/checkbox/__keys.ts +++ b/src/checkbox/__keys.ts @@ -1,5 +1,10 @@ // Automatically generated -const CHECKBOX_STATE_KEYS = ["state", "setState"] as const; +export const USE_CHECKBOX_STATE_KEYS = [ + "defaultState", + "state", + "onStateChange", +] as const; +export const CHECKBOX_STATE_KEYS = ["state", "setState"] as const; export const CHECKBOX_KEYS = [ ...CHECKBOX_STATE_KEYS, "value", diff --git a/src/checkbox/index.ts b/src/checkbox/index.ts index ea24b7665..1704b00ca 100644 --- a/src/checkbox/index.ts +++ b/src/checkbox/index.ts @@ -1,2 +1,3 @@ export * from "./Checkbox"; export * from "./CheckboxState"; +export * from "./__keys"; diff --git a/src/checkbox/stories/Checkbox.component.tsx b/src/checkbox/stories/Checkbox.component.tsx index bef1bb87f..7776248a9 100644 --- a/src/checkbox/stories/Checkbox.component.tsx +++ b/src/checkbox/stories/Checkbox.component.tsx @@ -1,17 +1,25 @@ import * as React from "react"; import { - Checkbox, - CheckboxProps, + Checkbox as RenderlesskitCheckbox, + CheckboxProps as RenderlesskitCheckboxProps, useCheckboxState, -} from "@renderlesskit/react"; + CheckboxInitialState, +} from "../index"; +import { splitStateProps } from "../../utils/index"; +import { USE_CHECKBOX_STATE_KEYS } from "../__keys"; -export interface AppProps extends CheckboxProps {} +export type CheckboxProps = RenderlesskitCheckboxProps & + CheckboxInitialState & {}; -export const App: React.FC = props => { - const state = useCheckboxState(props); +export const Checkbox: React.FC = props => { + const [stateProps, checkboxProps] = splitStateProps< + CheckboxInitialState, + CheckboxProps + >(props, USE_CHECKBOX_STATE_KEYS); + const state = useCheckboxState(stateProps); - return ; + return ; }; -export default App; +export default Checkbox; diff --git a/src/checkbox/stories/Checkbox.stories.tsx b/src/checkbox/stories/Checkbox.stories.tsx index 0bbe5f656..5e6bec9e6 100644 --- a/src/checkbox/stories/Checkbox.stories.tsx +++ b/src/checkbox/stories/Checkbox.stories.tsx @@ -1,12 +1,9 @@ import * as React from "react"; import { Meta, Story } from "@storybook/react"; -import { - App as Checkbox, - AppProps as CheckboxProps, -} from "./Checkbox.component"; +import { createControls, createPreviewTabs } from "../../../.storybook/utils"; +import { Checkbox, CheckboxProps } from "./Checkbox.component"; import { checkboxTemplate, checkboxTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; export default { component: Checkbox, @@ -18,6 +15,21 @@ export default { ts: checkboxTemplate, }), }, + argTypes: createControls({ + ignore: [ + "unstable_system", + "unstable_clickOnEnter", + "unstable_clickOnSpace", + "wrapElement", + "focusable", + "as", + "checked", + "state", + "setState", + "onStateChange", + "value", + ], + }), } as Meta; const Base: Story = args => ; diff --git a/src/checkbox/stories/CheckboxState.component.tsx b/src/checkbox/stories/CheckboxState.component.tsx deleted file mode 100644 index 066df0adf..000000000 --- a/src/checkbox/stories/CheckboxState.component.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from "react"; - -import { Checkbox, CheckboxProps } from "@renderlesskit/react"; - -export interface AppProps extends CheckboxProps {} - -export const App: React.FC = props => { - const [checked, setChecked] = React.useState(false); - const toggle = () => setChecked(!checked); - - return ; -}; - -export default App; diff --git a/src/datepicker/__keys.ts b/src/datepicker/__keys.ts index 3f107c781..0cd428b9f 100644 --- a/src/datepicker/__keys.ts +++ b/src/datepicker/__keys.ts @@ -1,5 +1,32 @@ // Automatically generated -const DATE_PICKER_STATE_KEYS = [ +export const USE_DATE_PICKER_STATE_KEYS = [ + "value", + "defaultValue", + "onChange", + "minValue", + "maxValue", + "validationState", + "isRequired", + "baseId", + "visible", + "animated", + "modal", + "placement", + "unstable_fixed", + "unstable_flip", + "unstable_offset", + "gutter", + "unstable_preventOverflow", + "isDisabled", + "isReadOnly", + "pickerId", + "dialogId", + "segmentFocus", + "formatOptions", + "placeholderDate", + "autoFocus", +] as const; +export const DATE_PICKER_STATE_KEYS = [ "calendar", "isDateRangePicker", "fieldValue", @@ -83,7 +110,8 @@ const DATE_PICKER_STATE_KEYS = [ "maxValue", "isRequired", ] as const; -const DATE_RANGE_PICKER_STATE_KEYS = [ +export const USE_DATE_RANGE_PICKER_STATE_KEYS = USE_DATE_PICKER_STATE_KEYS; +export const DATE_RANGE_PICKER_STATE_KEYS = [ "startSegmentState", "endSegmentState", "calendar", diff --git a/src/datepicker/index.ts b/src/datepicker/index.ts index 39d1c23f8..83780e6aa 100644 --- a/src/datepicker/index.ts +++ b/src/datepicker/index.ts @@ -5,3 +5,4 @@ export * from "./DatePickerSegmentField"; export * from "./DatePickerTrigger"; export * from "./DatePickerContent"; export * from "./DateRangePickerState"; +export * from "./__keys"; diff --git a/src/datepicker/stories/DatePickerBase.component.tsx b/src/datepicker/stories/DatePickerBase.component.tsx index 925627d05..58cab404e 100644 --- a/src/datepicker/stories/DatePickerBase.component.tsx +++ b/src/datepicker/stories/DatePickerBase.component.tsx @@ -7,6 +7,9 @@ import { DatePickerTrigger, useDatePickerState, DatePickerSegmentField, + DatePickerInitialState, +} from "../index"; +import { Calendar as CalendarWrapper, CalendarButton, CalendarCell, @@ -15,8 +18,7 @@ import { CalendarHeader, CalendarWeekTitle, CalendarStateReturn, - DatePickerInitialState, -} from "@renderlesskit/react"; +} from "../../calendar/index"; import { CalendarIcon, diff --git a/src/datepicker/stories/DatePickerBase.stories.tsx b/src/datepicker/stories/DatePickerBase.stories.tsx index 824343f23..f23fffc6d 100644 --- a/src/datepicker/stories/DatePickerBase.stories.tsx +++ b/src/datepicker/stories/DatePickerBase.stories.tsx @@ -11,13 +11,8 @@ import { } from "./templates"; import "./DatePickerBase.css"; import { App as DatePicker } from "./DatePickerBase.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; -import { - addDays, - addWeeks, - format, - subWeeks, -} from "@renderlesskit/react/utils"; +import { createPreviewTabs } from "../../../.storybook/utils"; +import { addDays, addWeeks, format, subWeeks } from "../../utils/index"; export default { component: DatePicker, diff --git a/src/datepicker/stories/DatePickerRange.component.tsx b/src/datepicker/stories/DatePickerRange.component.tsx index 098fb4ba1..1c40dda00 100644 --- a/src/datepicker/stories/DatePickerRange.component.tsx +++ b/src/datepicker/stories/DatePickerRange.component.tsx @@ -7,6 +7,9 @@ import { DatePickerTrigger, DatePickerSegmentField, useDateRangePickerState, + DateRangePickerInitialState, +} from "../index"; +import { Calendar, CalendarCell, CalendarGrid, @@ -15,8 +18,7 @@ import { CalendarWeekTitle, CalendarCellButton, RangeCalendarStateReturn, - DateRangePickerInitialState, -} from "@renderlesskit/react"; +} from "../../calendar/index"; import { CalendarIcon, diff --git a/src/datepicker/stories/DatePickerRange.stories.tsx b/src/datepicker/stories/DatePickerRange.stories.tsx index 9d7724141..abc2329a0 100644 --- a/src/datepicker/stories/DatePickerRange.stories.tsx +++ b/src/datepicker/stories/DatePickerRange.stories.tsx @@ -11,14 +11,14 @@ import { } from "./templates"; import "./DatePickerRange.css"; import { App as DateRangePicker } from "./DatePickerRange.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { addDays, addWeeks, format, subDays, subWeeks, -} from "@renderlesskit/react/utils"; +} from "../../utils/index"; export default { title: "DatePicker/Range", diff --git a/src/datepicker/stories/DateRangePickerStyled.stories.tsx b/src/datepicker/stories/DateRangePickerStyled.stories.tsx index 62551367b..ecfab9ac5 100644 --- a/src/datepicker/stories/DateRangePickerStyled.stories.tsx +++ b/src/datepicker/stories/DateRangePickerStyled.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import "./tailwind/index.css"; import { RangeDatePicker } from "./styled/RangeDatePicker.component"; -import { addWeeks } from "@renderlesskit/react/utils"; +import { addWeeks } from "../../utils/index"; export default { component: RangeDatePicker, diff --git a/src/datepicker/stories/styled/Calendar.tsx b/src/datepicker/stories/styled/Calendar.tsx index aee84830a..ce38d6130 100644 --- a/src/datepicker/stories/styled/Calendar.tsx +++ b/src/datepicker/stories/styled/Calendar.tsx @@ -8,7 +8,7 @@ import { CalendarCellButton, CalendarStateReturn, Calendar as CalendarWrapper, -} from "@renderlesskit/react"; +} from "../../../calendar/index"; import { ChevronLeft, diff --git a/src/datepicker/stories/styled/DatePicker.component.tsx b/src/datepicker/stories/styled/DatePicker.component.tsx index a70760ac1..2b0c8547b 100644 --- a/src/datepicker/stories/styled/DatePicker.component.tsx +++ b/src/datepicker/stories/styled/DatePicker.component.tsx @@ -8,7 +8,7 @@ import { DatePickerSegmentField, DatePickerInitialState, DatePicker as DatePickerWrapper, -} from "@renderlesskit/react"; +} from "../../index"; import { Calendar, CalendarIcon } from "./Calendar"; export const DatePicker: React.FC = props => { diff --git a/src/datepicker/stories/styled/RangeDatePicker.component.tsx b/src/datepicker/stories/styled/RangeDatePicker.component.tsx index 1105cba26..1398404f0 100644 --- a/src/datepicker/stories/styled/RangeDatePicker.component.tsx +++ b/src/datepicker/stories/styled/RangeDatePicker.component.tsx @@ -8,7 +8,7 @@ import { DatePicker as DatePickerWrapper, useDateRangePickerState, DateRangePickerInitialState, -} from "@renderlesskit/react"; +} from "../../index"; import { Calendar, CalendarIcon } from "./Calendar"; export const RangeDatePicker: React.FC = props => { diff --git a/src/drawer/index.ts b/src/drawer/index.ts index e10ae0883..e21aa1f74 100644 --- a/src/drawer/index.ts +++ b/src/drawer/index.ts @@ -7,3 +7,4 @@ export { DialogDisclosure as DrawerDisclosure, useDialogDisclosure as useDrawerDisclosure, } from "reakit/Dialog"; +export * from "./__keys"; diff --git a/src/drawer/stories/Drawer.component.tsx b/src/drawer/stories/Drawer.component.tsx index 628177b20..8eb696967 100644 --- a/src/drawer/stories/Drawer.component.tsx +++ b/src/drawer/stories/Drawer.component.tsx @@ -8,7 +8,7 @@ import { DrawerBackdrop, DrawerCloseButton, DrawerDisclosure, -} from "@renderlesskit/react"; +} from "../index"; export const App = () => { const dialog = useDrawerState({ animated: true }); diff --git a/src/drawer/stories/Drawer.stories.tsx b/src/drawer/stories/Drawer.stories.tsx index 7707f9476..7b2ffd219 100644 --- a/src/drawer/stories/Drawer.stories.tsx +++ b/src/drawer/stories/Drawer.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { App as Drawer } from "./Drawer.component"; import { drawerTemplate, drawerTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { title: "Drawer", diff --git a/src/link/index.ts b/src/link/index.ts index 3b40a46d8..ce9726001 100644 --- a/src/link/index.ts +++ b/src/link/index.ts @@ -1 +1,2 @@ export * from "./Link"; +export * from "./__keys"; diff --git a/src/link/stories/Link.component.tsx b/src/link/stories/Link.component.tsx index 5daef8ec1..4ded71a2a 100644 --- a/src/link/stories/Link.component.tsx +++ b/src/link/stories/Link.component.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { Link } from "@renderlesskit/react"; +import { Link } from "../index"; export interface AppProps { /** diff --git a/src/link/stories/Link.stories.tsx b/src/link/stories/Link.stories.tsx index 8e6912f27..c57814e6b 100644 --- a/src/link/stories/Link.stories.tsx +++ b/src/link/stories/Link.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { App as Link } from "./Link.component"; import { linkTemplate, linkTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Link, diff --git a/src/meter/__keys.ts b/src/meter/__keys.ts index e59ca46b5..56c0112d0 100644 --- a/src/meter/__keys.ts +++ b/src/meter/__keys.ts @@ -1,11 +1,14 @@ // Automatically generated -const METER_STATE_KEYS = [ +export const USE_METER_STATE_KEYS = [ "value", "min", "max", "low", - "high", "optimum", + "high", +] as const; +export const METER_STATE_KEYS = [ + ...USE_METER_STATE_KEYS, "percent", "status", ] as const; diff --git a/src/meter/index.ts b/src/meter/index.ts index cbae20612..13befe48b 100644 --- a/src/meter/index.ts +++ b/src/meter/index.ts @@ -1,2 +1,3 @@ export * from "./MeterState"; export * from "./Meter"; +export * from "./__keys"; diff --git a/src/meter/stories/MeterBasic.component.tsx b/src/meter/stories/MeterBasic.component.tsx index 59a28fa11..17cd22615 100644 --- a/src/meter/stories/MeterBasic.component.tsx +++ b/src/meter/stories/MeterBasic.component.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { Meter, useMeterState, MeterInitialState } from "@renderlesskit/react"; +import { Meter, useMeterState, MeterInitialState } from "../index"; export const App: React.FC = props => { const state = useMeterState(props); diff --git a/src/meter/stories/MeterBasic.stories.tsx b/src/meter/stories/MeterBasic.stories.tsx index d4252e37b..8f5731fe7 100644 --- a/src/meter/stories/MeterBasic.stories.tsx +++ b/src/meter/stories/MeterBasic.stories.tsx @@ -8,7 +8,7 @@ import { } from "./templates"; import "./MeterBasic.css"; import { App as Meter } from "./MeterBasic.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Meter, diff --git a/src/meter/stories/MeterStyled.component.tsx b/src/meter/stories/MeterStyled.component.tsx index a1de28980..30260101d 100644 --- a/src/meter/stories/MeterStyled.component.tsx +++ b/src/meter/stories/MeterStyled.component.tsx @@ -6,7 +6,7 @@ import { useMeterState, MeterStateReturn, MeterInitialState, -} from "@renderlesskit/react"; +} from "../index"; export interface AppProps extends MeterInitialState { /** diff --git a/src/meter/stories/MeterStyled.stories.tsx b/src/meter/stories/MeterStyled.stories.tsx index 68777180b..bf49bc05a 100644 --- a/src/meter/stories/MeterStyled.stories.tsx +++ b/src/meter/stories/MeterStyled.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { App as Meter } from "./MeterStyled.component"; import { meterStyledTemplate, meterStyledTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Meter, diff --git a/src/number-input/__keys.ts b/src/number-input/__keys.ts index e7393a56d..ffdd1c8fe 100644 --- a/src/number-input/__keys.ts +++ b/src/number-input/__keys.ts @@ -1,5 +1,20 @@ // Automatically generated -const NUMBER_INPUT_STATE_KEYS = [ +export const USE_NUMBERINPUT_STATE_KEYS = [ + "isDisabled", + "isReadOnly", + "value", + "min", + "max", + "step", + "keepWithinRange", + "precision", + "isInvalid", + "isRequired", + "defaultValue", + "onChange", + "focusInputOnChange", +] as const; +export const NUMBER_INPUT_STATE_KEYS = [ "value", "min", "max", diff --git a/src/number-input/index.ts b/src/number-input/index.ts index 14e5c486c..66c0e15f1 100644 --- a/src/number-input/index.ts +++ b/src/number-input/index.ts @@ -1,4 +1,5 @@ -export * from "./NumberInputState"; export * from "./NumberInput"; -export * from "./NumberInputIncrementButton"; export * from "./NumberInputDecrementButton"; +export * from "./NumberInputIncrementButton"; +export * from "./NumberInputState"; +export * from "./__keys"; diff --git a/src/number-input/stories/NumberInput.component.tsx b/src/number-input/stories/NumberInput.component.tsx index 186fe5ed4..0ef06a937 100644 --- a/src/number-input/stories/NumberInput.component.tsx +++ b/src/number-input/stories/NumberInput.component.tsx @@ -6,7 +6,7 @@ import { NumberinputInitialState, NumberInputDecrementButton, NumberInputIncrementButton, -} from "@renderlesskit/react"; +} from "../index"; export interface AppProps extends NumberinputInitialState { /** diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx index 528da974b..27ae5be03 100644 --- a/src/number-input/stories/NumberInput.stories.tsx +++ b/src/number-input/stories/NumberInput.stories.tsx @@ -10,7 +10,7 @@ import { } from "../index"; import { App as NumberInput } from "./NumberInput.component"; import { numberInputTemplate, numberInputTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: NumberInput, diff --git a/src/pagination/__keys.ts b/src/pagination/__keys.ts index 7142f051c..2697a1804 100644 --- a/src/pagination/__keys.ts +++ b/src/pagination/__keys.ts @@ -1,5 +1,13 @@ // Automatically generated -const PAGINATION_STATE_KEYS = [ +export const USE_PAGINATION_STATE_KEYS = [ + "defaultPage", + "page", + "onChange", + "count", + "boundaryCount", + "siblingCount", +] as const; +export const PAGINATION_STATE_KEYS = [ "currentPage", "pages", "isAtFirstPage", diff --git a/src/pagination/index.ts b/src/pagination/index.ts index affc9915a..b847af1b1 100644 --- a/src/pagination/index.ts +++ b/src/pagination/index.ts @@ -1,3 +1,4 @@ export * from "./PaginationState"; export * from "./Pagination"; export * from "./PaginationButton"; +export * from "./__keys"; diff --git a/src/pagination/stories/Pagination.component.tsx b/src/pagination/stories/Pagination.component.tsx index fe294df57..1ae7b812a 100644 --- a/src/pagination/stories/Pagination.component.tsx +++ b/src/pagination/stories/Pagination.component.tsx @@ -6,7 +6,7 @@ import { usePaginationState, PaginationInitialState, TGoto, -} from "@renderlesskit/react"; +} from "../index"; export const App: React.FC = props => { const state = usePaginationState({ count: 10, ...props }); diff --git a/src/pagination/stories/Pagination.stories.tsx b/src/pagination/stories/Pagination.stories.tsx index 7eb8b7a8b..617bb2e7d 100644 --- a/src/pagination/stories/Pagination.stories.tsx +++ b/src/pagination/stories/Pagination.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { paginationTemplate, paginationTemplateJs } from "./templates"; import { App as Pagination } from "./Pagination.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Pagination, diff --git a/src/picker-base/__keys.ts b/src/picker-base/__keys.ts index 852a8087b..c73e84774 100644 --- a/src/picker-base/__keys.ts +++ b/src/picker-base/__keys.ts @@ -1,5 +1,22 @@ // Automatically generated -const PICKER_BASE_STATE_KEYS = [ +export const USE_PICKER_BASE_STATE_KEYS = [ + "baseId", + "visible", + "animated", + "modal", + "placement", + "unstable_fixed", + "unstable_flip", + "unstable_offset", + "gutter", + "unstable_preventOverflow", + "isDisabled", + "isReadOnly", + "pickerId", + "dialogId", + "segmentFocus", +] as const; +export const PICKER_BASE_STATE_KEYS = [ "baseId", "unstable_idCountRef", "visible", diff --git a/src/picker-base/index.ts b/src/picker-base/index.ts index b3815161e..0a57f74a5 100644 --- a/src/picker-base/index.ts +++ b/src/picker-base/index.ts @@ -2,3 +2,4 @@ export * from "./PickerBaseState"; export * from "./PickerBase"; export * from "./PickerBaseTrigger"; export * from "./PickerBaseContent"; +export * from "./__keys"; diff --git a/src/picker-base/stories/PickerBase.component.tsx b/src/picker-base/stories/PickerBase.component.tsx index 05b1878fe..5769fbcaa 100644 --- a/src/picker-base/stories/PickerBase.component.tsx +++ b/src/picker-base/stories/PickerBase.component.tsx @@ -6,7 +6,7 @@ import { PickerBaseContent, usePickerBaseState, PickerBaseInitialState, -} from "@renderlesskit/react"; +} from "../index"; export const App: React.FC = props => { const state = usePickerBaseState(props); diff --git a/src/picker-base/stories/PickerBase.stories.tsx b/src/picker-base/stories/PickerBase.stories.tsx index cdba237a9..6d7d8d1c0 100644 --- a/src/picker-base/stories/PickerBase.stories.tsx +++ b/src/picker-base/stories/PickerBase.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { App as PickerBase } from "./PickerBase.component"; import { pickerBaseTemplate, pickerBaseTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: PickerBase, diff --git a/src/progress/__keys.ts b/src/progress/__keys.ts index a406091bf..6407e48cc 100644 --- a/src/progress/__keys.ts +++ b/src/progress/__keys.ts @@ -1,8 +1,7 @@ // Automatically generated -const PROGRESS_STATE_KEYS = [ - "value", - "min", - "max", +export const USE_PROGRESS_STATE_KEYS = ["value", "min", "max"] as const; +export const PROGRESS_STATE_KEYS = [ + ...USE_PROGRESS_STATE_KEYS, "isIndeterminate", "percent", ] as const; diff --git a/src/progress/index.ts b/src/progress/index.ts index cff4d2a0b..d774369bd 100644 --- a/src/progress/index.ts +++ b/src/progress/index.ts @@ -1,2 +1,3 @@ export * from "./ProgressState"; export * from "./Progress"; +export * from "./__keys"; diff --git a/src/progress/stories/CircularProgress.component.tsx b/src/progress/stories/CircularProgress.component.tsx index 6e8d18d7a..0baeb1c8a 100644 --- a/src/progress/stories/CircularProgress.component.tsx +++ b/src/progress/stories/CircularProgress.component.tsx @@ -3,12 +3,12 @@ import { Button } from "reakit"; import { css, keyframes } from "@emotion/css"; import { - isNull, Progress, ProgressState, useProgressState, ProgressInitialState, -} from "@renderlesskit/react"; +} from "../index"; +import { isNull } from "../../utils/index"; export interface AppProps extends ProgressInitialState { /** diff --git a/src/progress/stories/CircularProgress.stories.tsx b/src/progress/stories/CircularProgress.stories.tsx index 042445323..e014de3a4 100644 --- a/src/progress/stories/CircularProgress.stories.tsx +++ b/src/progress/stories/CircularProgress.stories.tsx @@ -6,7 +6,7 @@ import { circularProgressTemplate, circularProgressTemplateJs, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Progress, diff --git a/src/progress/stories/LinearProgress.component.tsx b/src/progress/stories/LinearProgress.component.tsx index 3f73e1d5b..8d21694cf 100644 --- a/src/progress/stories/LinearProgress.component.tsx +++ b/src/progress/stories/LinearProgress.component.tsx @@ -3,13 +3,12 @@ import { Button } from "reakit"; import { css, keyframes } from "@emotion/css"; import { - cx, - isNull, Progress, ProgressState, useProgressState, ProgressInitialState, -} from "@renderlesskit/react"; +} from "../index"; +import { cx, isNull } from "../../utils/index"; export interface AppProps extends ProgressInitialState { withLabel?: boolean; diff --git a/src/progress/stories/LinearProgress.stories.tsx b/src/progress/stories/LinearProgress.stories.tsx index 6cc392d42..03332d293 100644 --- a/src/progress/stories/LinearProgress.stories.tsx +++ b/src/progress/stories/LinearProgress.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from "@storybook/react"; import { App as Progress } from "./LinearProgress.component"; import { linearProgressTemplate, linearProgressTemplateJs } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Progress, diff --git a/src/progress/stories/ProgressBasic.component.tsx b/src/progress/stories/ProgressBasic.component.tsx index 91d0b56a7..39d8d565f 100644 --- a/src/progress/stories/ProgressBasic.component.tsx +++ b/src/progress/stories/ProgressBasic.component.tsx @@ -1,10 +1,6 @@ import * as React from "react"; -import { - Progress, - useProgressState, - ProgressInitialState, -} from "@renderlesskit/react"; +import { Progress, useProgressState, ProgressInitialState } from "../index"; export const App: React.FC = props => { const state = useProgressState(props); diff --git a/src/progress/stories/ProgressBasic.stories.tsx b/src/progress/stories/ProgressBasic.stories.tsx index 0ad3de131..b34f211b0 100644 --- a/src/progress/stories/ProgressBasic.stories.tsx +++ b/src/progress/stories/ProgressBasic.stories.tsx @@ -8,7 +8,7 @@ import { } from "./templates"; import "./ProgressBasic.css"; import { App as Progress } from "./ProgressBasic.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Progress, diff --git a/src/segment/__keys.ts b/src/segment/__keys.ts index 58cd7268e..b86af557d 100644 --- a/src/segment/__keys.ts +++ b/src/segment/__keys.ts @@ -1,5 +1,12 @@ // Automatically generated -const SEGMENT_STATE_KEYS = [ +export const USE_SEGMENT_STATE_KEYS = [ + "defaultValue", + "value", + "onChange", + "formatOptions", + "placeholderDate", +] as const; +export const SEGMENT_STATE_KEYS = [ "fieldValue", "setFieldValue", "segments", diff --git a/src/segment/index.ts b/src/segment/index.ts index eccfb3420..5d3e9df8f 100644 --- a/src/segment/index.ts +++ b/src/segment/index.ts @@ -1,3 +1,4 @@ export * from "./SegmentState"; export * from "./Segment"; export * from "./SegmentField"; +export * from "./__keys"; diff --git a/src/segment/stories/Segment.component.tsx b/src/segment/stories/Segment.component.tsx index f94abaf1c..12c2ecee2 100644 --- a/src/segment/stories/Segment.component.tsx +++ b/src/segment/stories/Segment.component.tsx @@ -5,7 +5,7 @@ import { SegmentField, useSegmentState, SegmentInitialState, -} from "@renderlesskit/react"; +} from "../index"; export const App: React.FC = props => { const state = useSegmentState(props); diff --git a/src/segment/stories/Segment.stories.tsx b/src/segment/stories/Segment.stories.tsx index f8edba64e..6fa63a45d 100644 --- a/src/segment/stories/Segment.stories.tsx +++ b/src/segment/stories/Segment.stories.tsx @@ -8,7 +8,7 @@ import { } from "./templates"; import "./Segment.css"; import { App as Segment } from "./Segment.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Segment, diff --git a/src/select/__keys.ts b/src/select/__keys.ts index fc03d3000..a6e0c9cdb 100644 --- a/src/select/__keys.ts +++ b/src/select/__keys.ts @@ -1,8 +1,8 @@ // Automatically generated -const SELECT_LIST_STATE_KEYS = [ +export const USE_SELECT_BASE_STATE_KEYS = ["values", "selectedValue"] as const; +export const USE_SELECT_LIST_STATE_KEYS = [ + ...USE_SELECT_BASE_STATE_KEYS, "baseId", - "unstable_idCountRef", - "unstable_virtual", "rtl", "orientation", "currentId", @@ -10,14 +10,17 @@ const SELECT_LIST_STATE_KEYS = [ "wrap", "shift", "unstable_includesBaseElement", +] as const; +export const SELECT_LIST_STATE_KEYS = [ + ...USE_SELECT_LIST_STATE_KEYS, + "unstable_idCountRef", + "unstable_virtual", "unstable_hasActiveWidget", "groups", "unstable_moves", "menuRole", "items", - "values", "valuesById", - "selectedValue", "currentValue", "selectedId", "setBaseId", @@ -45,8 +48,20 @@ const SELECT_LIST_STATE_KEYS = [ "registerItem", "setSelectedValue", ] as const; -const SELECT_BASE_STATE_KEYS = SELECT_LIST_STATE_KEYS; -const SELECT_POPOVER_STATE_KEYS = [ +export const SELECT_BASE_STATE_KEYS = SELECT_LIST_STATE_KEYS; +export const USE_SELECT_POPOVER_STATE_KEYS = [ + "baseId", + "visible", + "animated", + "modal", + "placement", + "unstable_fixed", + "unstable_flip", + "unstable_offset", + "gutter", + "unstable_preventOverflow", +] as const; +export const SELECT_POPOVER_STATE_KEYS = [ "baseId", "unstable_idCountRef", "visible", @@ -72,9 +87,59 @@ const SELECT_POPOVER_STATE_KEYS = [ "setModal", "place", ] as const; -const SELECT_STATE_KEYS = [ - ...SELECT_BASE_STATE_KEYS, +export const USE_SELECT_STATE_KEYS = [ + ...USE_SELECT_BASE_STATE_KEYS, + ...USE_SELECT_POPOVER_STATE_KEYS, + "rtl", + "orientation", + "currentId", + "loop", + "wrap", + "shift", + "unstable_includesBaseElement", +] as const; +export const SELECT_STATE_KEYS = [ + ...USE_SELECT_BASE_STATE_KEYS, ...SELECT_POPOVER_STATE_KEYS, + "unstable_virtual", + "rtl", + "orientation", + "currentId", + "loop", + "wrap", + "shift", + "unstable_includesBaseElement", + "unstable_hasActiveWidget", + "groups", + "unstable_moves", + "menuRole", + "items", + "valuesById", + "currentValue", + "selectedId", + "unregisterItem", + "registerGroup", + "unregisterGroup", + "move", + "next", + "previous", + "up", + "down", + "first", + "last", + "sort", + "unstable_setVirtual", + "setRTL", + "setOrientation", + "setCurrentId", + "setLoop", + "setWrap", + "setShift", + "reset", + "unstable_setIncludesBaseElement", + "unstable_setHasActiveWidget", + "registerItem", + "setSelectedValue", ] as const; export const SELECT_KEYS = [...SELECT_STATE_KEYS, "hideOnEsc"] as const; export const SELECT_ITEM_KEYS = [...SELECT_STATE_KEYS, "value"] as const; diff --git a/src/select/index.ts b/src/select/index.ts index 74e7117ce..14b65a904 100644 --- a/src/select/index.ts +++ b/src/select/index.ts @@ -2,3 +2,4 @@ export * from "./Select"; export * from "./SelectState"; export * from "./SelectPopover"; export * from "./SelectOption"; +export * from "./__keys"; diff --git a/src/select/stories/Select.component.tsx b/src/select/stories/Select.component.tsx index 439f05a6d..7d3f974d6 100644 --- a/src/select/stories/Select.component.tsx +++ b/src/select/stories/Select.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; export const App: React.FC = props => { const select = useSelectState({ gutter: 8, ...props }); diff --git a/src/select/stories/Select.stories.tsx b/src/select/stories/Select.stories.tsx index e097be826..c16d9488e 100644 --- a/src/select/stories/Select.stories.tsx +++ b/src/select/stories/Select.stories.tsx @@ -8,7 +8,7 @@ import { selectCssTemplate, } from "./templates"; import { App as Select } from "./Select.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Select, diff --git a/src/select/stories/SelectControlled.component.tsx b/src/select/stories/SelectControlled.component.tsx index 2e5e9f0bd..aced8146f 100644 --- a/src/select/stories/SelectControlled.component.tsx +++ b/src/select/stories/SelectControlled.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = () => { diff --git a/src/select/stories/SelectControlled.stories.tsx b/src/select/stories/SelectControlled.stories.tsx index 7caea49d6..7aab16050 100644 --- a/src/select/stories/SelectControlled.stories.tsx +++ b/src/select/stories/SelectControlled.stories.tsx @@ -10,7 +10,7 @@ import { selectControlledTemplateJs, } from "./templates"; import { App as SelectControlled } from "./SelectControlled.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectControlled, diff --git a/src/select/stories/SelectCustom.component.tsx b/src/select/stories/SelectCustom.component.tsx index 5420c4888..332cc2e3d 100644 --- a/src/select/stories/SelectCustom.component.tsx +++ b/src/select/stories/SelectCustom.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = props => { diff --git a/src/select/stories/SelectCustom.stories.tsx b/src/select/stories/SelectCustom.stories.tsx index 76c0e49d9..cd0e788ce 100644 --- a/src/select/stories/SelectCustom.stories.tsx +++ b/src/select/stories/SelectCustom.stories.tsx @@ -10,7 +10,7 @@ import { selectCustomTemplateJs, } from "./templates"; import { App as SelectCustom } from "./SelectCustom.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectCustom, diff --git a/src/select/stories/SelectDynamic.component.tsx b/src/select/stories/SelectDynamic.component.tsx index 7c80dc226..a58c45d64 100644 --- a/src/select/stories/SelectDynamic.component.tsx +++ b/src/select/stories/SelectDynamic.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = props => { diff --git a/src/select/stories/SelectDynamic.stories.tsx b/src/select/stories/SelectDynamic.stories.tsx index 988e76f14..52745e5ac 100644 --- a/src/select/stories/SelectDynamic.stories.tsx +++ b/src/select/stories/SelectDynamic.stories.tsx @@ -10,7 +10,7 @@ import { selectDynamicTemplateJs, } from "./templates"; import { App as SelectDynamic } from "./SelectDynamic.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectDynamic, diff --git a/src/select/stories/SelectFetch.component.tsx b/src/select/stories/SelectFetch.component.tsx index f29da875e..1b410ddfa 100644 --- a/src/select/stories/SelectFetch.component.tsx +++ b/src/select/stories/SelectFetch.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; type User = { value: string; label: string }; diff --git a/src/select/stories/SelectFetch.stories.tsx b/src/select/stories/SelectFetch.stories.tsx index f6324b827..7ec0db8d2 100644 --- a/src/select/stories/SelectFetch.stories.tsx +++ b/src/select/stories/SelectFetch.stories.tsx @@ -8,7 +8,7 @@ import { selectFetchTemplateJs, } from "./templates"; import { App as SelectFetch } from "./SelectFetch.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectFetch, diff --git a/src/select/stories/SelectMultiple.component.tsx b/src/select/stories/SelectMultiple.component.tsx index 2ad629c8a..f41f13d71 100644 --- a/src/select/stories/SelectMultiple.component.tsx +++ b/src/select/stories/SelectMultiple.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = props => { diff --git a/src/select/stories/SelectMultiple.stories.tsx b/src/select/stories/SelectMultiple.stories.tsx index 77a3052e1..3893c8bd3 100644 --- a/src/select/stories/SelectMultiple.stories.tsx +++ b/src/select/stories/SelectMultiple.stories.tsx @@ -10,7 +10,7 @@ import { selectMultipleTemplateJs, } from "./templates"; import { App as SelectMultiple } from "./SelectMultiple.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectMultiple, diff --git a/src/select/stories/SelectStyled.component.tsx b/src/select/stories/SelectStyled.component.tsx index 8ba2c1e4e..9ad6baaf9 100644 --- a/src/select/stories/SelectStyled.component.tsx +++ b/src/select/stories/SelectStyled.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; const people = [ "Wade Cooper", diff --git a/src/select/stories/SelectStyled.stories.tsx b/src/select/stories/SelectStyled.stories.tsx index b2a9c1b13..8da0a16f9 100644 --- a/src/select/stories/SelectStyled.stories.tsx +++ b/src/select/stories/SelectStyled.stories.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Meta, Story } from "@storybook/react"; import { App as Select } from "./SelectStyled.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { selectStyledTemplate, selectStyledTemplateJs } from "./templates"; export default { diff --git a/src/select/stories/SelectVirtual.component.tsx b/src/select/stories/SelectVirtual.component.tsx index 148593ae0..a105039d8 100644 --- a/src/select/stories/SelectVirtual.component.tsx +++ b/src/select/stories/SelectVirtual.component.tsx @@ -7,7 +7,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = props => { diff --git a/src/select/stories/SelectVirtual.stories.tsx b/src/select/stories/SelectVirtual.stories.tsx index 9a904c6c9..6dfb7a818 100644 --- a/src/select/stories/SelectVirtual.stories.tsx +++ b/src/select/stories/SelectVirtual.stories.tsx @@ -10,7 +10,7 @@ // selectVirtualTemplateJs, // } from "./templates"; // import { App as SelectVirtual } from "./SelectVirtual.component"; -// import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +// import { createPreviewTabs } from "../../../.storybook/utils"; // export default { // component: SelectVirtual, diff --git a/src/select/stories/SelectWindows.component.tsx b/src/select/stories/SelectWindows.component.tsx index d4bd2aa43..2f6255b60 100644 --- a/src/select/stories/SelectWindows.component.tsx +++ b/src/select/stories/SelectWindows.component.tsx @@ -6,7 +6,7 @@ import { SelectPopover, useSelectState, SelectInitialState, -} from "@renderlesskit/react"; +} from "../index"; import { fruits } from "./Utils.component"; export const App: React.FC = props => { diff --git a/src/select/stories/SelectWindows.stories.tsx b/src/select/stories/SelectWindows.stories.tsx index 53148db4e..289317874 100644 --- a/src/select/stories/SelectWindows.stories.tsx +++ b/src/select/stories/SelectWindows.stories.tsx @@ -10,7 +10,7 @@ import { selectWindowsTemplateJs, } from "./templates"; import { App as SelectWindows } from "./SelectWindows.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SelectWindows, diff --git a/src/slider/__keys.ts b/src/slider/__keys.ts index d8d334368..9c5451624 100644 --- a/src/slider/__keys.ts +++ b/src/slider/__keys.ts @@ -1,5 +1,19 @@ // Automatically generated -const SLIDER_STATE_KEYS = [ +export const USE_SLIDER_STATE_KEYS = [ + "isDisabled", + "orientation", + "values", + "min", + "max", + "step", + "reversed", + "defaultValues", + "onChange", + "onChangeEnd", + "onChangeStart", + "formatOptions", +] as const; +export const SLIDER_STATE_KEYS = [ "values", "min", "max", diff --git a/src/slider/index.ts b/src/slider/index.ts index ddc99005d..570892ef8 100644 --- a/src/slider/index.ts +++ b/src/slider/index.ts @@ -2,3 +2,4 @@ export * from "./SliderState"; export * from "./SliderThumb"; export * from "./SliderTrack"; export * from "./SliderInput"; +export * from "./__keys"; diff --git a/src/slider/stories/MultiSlider.stories.tsx b/src/slider/stories/MultiSlider.stories.tsx index daf89456c..c5d2e0909 100644 --- a/src/slider/stories/MultiSlider.stories.tsx +++ b/src/slider/stories/MultiSlider.stories.tsx @@ -8,7 +8,7 @@ import { sliderCssTemplate, } from "./templates"; import { App as MultiSlider } from "./components/MultiSlider.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: MultiSlider, diff --git a/src/slider/stories/RangeSlider.stories.tsx b/src/slider/stories/RangeSlider.stories.tsx index f6d039900..86c2c2220 100644 --- a/src/slider/stories/RangeSlider.stories.tsx +++ b/src/slider/stories/RangeSlider.stories.tsx @@ -8,7 +8,7 @@ import { } from "./templates"; import "./Slider.css"; import { App as RangeSlider } from "./components/RangeSlider.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: RangeSlider, diff --git a/src/slider/stories/SingleOriginSlider.stories.tsx b/src/slider/stories/SingleOriginSlider.stories.tsx index cf85bdcb3..15e8338f6 100644 --- a/src/slider/stories/SingleOriginSlider.stories.tsx +++ b/src/slider/stories/SingleOriginSlider.stories.tsx @@ -7,7 +7,7 @@ import { singleSliderTemplateJs, sliderCssTemplate, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { App as SingleOriginSlider } from "./components/SingleOriginSlider.component"; export default { diff --git a/src/slider/stories/SingleReversedSlider.stories.tsx b/src/slider/stories/SingleReversedSlider.stories.tsx index 9576c949d..8a054f89b 100644 --- a/src/slider/stories/SingleReversedSlider.stories.tsx +++ b/src/slider/stories/SingleReversedSlider.stories.tsx @@ -7,7 +7,7 @@ import { singleReversedSliderTemplateJs, sliderCssTemplate, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { App as SingleReversedSlider } from "./components/SingleReversedSlider.component"; export default { diff --git a/src/slider/stories/SingleSlider.stories.tsx b/src/slider/stories/SingleSlider.stories.tsx index 48ef2fdfe..e088fd653 100644 --- a/src/slider/stories/SingleSlider.stories.tsx +++ b/src/slider/stories/SingleSlider.stories.tsx @@ -8,7 +8,7 @@ import { sliderCssTemplate, } from "./templates"; import { App as SingleSlider } from "./components/SingleSlider.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: SingleSlider, diff --git a/src/slider/stories/SingleVerticalSlider.stories.tsx b/src/slider/stories/SingleVerticalSlider.stories.tsx index 5102164e2..10bba1a1b 100644 --- a/src/slider/stories/SingleVerticalSlider.stories.tsx +++ b/src/slider/stories/SingleVerticalSlider.stories.tsx @@ -7,7 +7,7 @@ import { singleVerticalSliderTemplateJs, sliderCssTemplate, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; import { App as SingleVerticalSlider } from "./components/SingleVerticalSlider.component"; export default { diff --git a/src/slider/stories/Slider.stories.tsx b/src/slider/stories/Slider.stories.tsx index 4cab96753..66f4c82be 100644 --- a/src/slider/stories/Slider.stories.tsx +++ b/src/slider/stories/Slider.stories.tsx @@ -8,7 +8,7 @@ import { sliderTemplateJs, sliderCssTemplate, } from "./templates"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Slider, diff --git a/src/slider/stories/components/MultiSlider.component.tsx b/src/slider/stories/components/MultiSlider.component.tsx index 232106ca6..c867e7687 100644 --- a/src/slider/stories/components/MultiSlider.component.tsx +++ b/src/slider/stories/components/MultiSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/RangeSlider.component.tsx b/src/slider/stories/components/RangeSlider.component.tsx index 589802988..686cc3bc8 100644 --- a/src/slider/stories/components/RangeSlider.component.tsx +++ b/src/slider/stories/components/RangeSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/SingleOriginSlider.component.tsx b/src/slider/stories/components/SingleOriginSlider.component.tsx index 918c0f0fb..8e12c9660 100644 --- a/src/slider/stories/components/SingleOriginSlider.component.tsx +++ b/src/slider/stories/components/SingleOriginSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/SingleReversedSlider.component.tsx b/src/slider/stories/components/SingleReversedSlider.component.tsx index adef7cc5d..fa10be251 100644 --- a/src/slider/stories/components/SingleReversedSlider.component.tsx +++ b/src/slider/stories/components/SingleReversedSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/SingleSlider.component.tsx b/src/slider/stories/components/SingleSlider.component.tsx index 82a3e1650..6550448eb 100644 --- a/src/slider/stories/components/SingleSlider.component.tsx +++ b/src/slider/stories/components/SingleSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/SingleVerticalSlider.component.tsx b/src/slider/stories/components/SingleVerticalSlider.component.tsx index 22ff48acc..8ea045772 100644 --- a/src/slider/stories/components/SingleVerticalSlider.component.tsx +++ b/src/slider/stories/components/SingleVerticalSlider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/slider/stories/components/Slider.component.tsx b/src/slider/stories/components/Slider.component.tsx index cd91f64fd..f5340d8e2 100644 --- a/src/slider/stories/components/Slider.component.tsx +++ b/src/slider/stories/components/Slider.component.tsx @@ -7,7 +7,7 @@ import { SliderInput, useSliderState, SliderInitialState, -} from "@renderlesskit/react"; +} from "../../index"; interface AppProps extends SliderInitialState { /** diff --git a/src/timepicker/__keys.ts b/src/timepicker/__keys.ts index aeca42a21..3470dbc33 100644 --- a/src/timepicker/__keys.ts +++ b/src/timepicker/__keys.ts @@ -1,5 +1,5 @@ // Automatically generated -const TIME_PICKER_COLUMN_STATE_KEYS = [ +export const TIME_PICKER_COLUMN_STATE_KEYS = [ "up", "down", "baseId", @@ -46,7 +46,30 @@ const TIME_PICKER_COLUMN_STATE_KEYS = [ "restoreOldTime", "updateOldTime", ] as const; -const TIME_PICKER_STATE_KEYS = [ +export const USE_TIME_PICKER_STATE_KEYS = [ + "baseId", + "visible", + "animated", + "modal", + "placement", + "unstable_fixed", + "unstable_flip", + "unstable_offset", + "gutter", + "unstable_preventOverflow", + "isDisabled", + "isReadOnly", + "pickerId", + "dialogId", + "segmentFocus", + "value", + "defaultValue", + "onChange", + "formatOptions", + "placeholderDate", + "autoFocus", +] as const; +export const TIME_PICKER_STATE_KEYS = [ "fieldValue", "setFieldValue", "segments", diff --git a/src/timepicker/index.ts b/src/timepicker/index.ts index e9dfced5c..20c80868e 100644 --- a/src/timepicker/index.ts +++ b/src/timepicker/index.ts @@ -7,3 +7,4 @@ export * from "./TimePickerSegmentField"; export * from "./TimePickerColumnState"; export * from "./TimePickerColumn"; export * from "./TimePickerColumnValue"; +export * from "./__keys"; diff --git a/src/timepicker/stories/TimePicker.component.tsx b/src/timepicker/stories/TimePicker.component.tsx index 0959ee785..4130a0abd 100644 --- a/src/timepicker/stories/TimePicker.component.tsx +++ b/src/timepicker/stories/TimePicker.component.tsx @@ -10,7 +10,7 @@ import { TimePickerColumnValue, TimePickerSegmentField, TimePickerStateProps, -} from "@renderlesskit/react"; +} from "../index"; import { CalendarIcon } from "./Utils.component"; diff --git a/src/timepicker/stories/TimePicker.stories.tsx b/src/timepicker/stories/TimePicker.stories.tsx index 616aee04e..456eb6af0 100644 --- a/src/timepicker/stories/TimePicker.stories.tsx +++ b/src/timepicker/stories/TimePicker.stories.tsx @@ -10,7 +10,7 @@ import { timePickerCssTemplate, } from "./templates"; import { App as TimePicker } from "./TimePicker.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: TimePicker, diff --git a/src/toast/index.ts b/src/toast/index.ts index 94c6675d3..c5192de12 100644 --- a/src/toast/index.ts +++ b/src/toast/index.ts @@ -4,3 +4,4 @@ export * from "./ToastTypes"; export * from "./useToastTimer"; export * from "./CreateToastContext"; export * from "./CreateToastContext.types"; +export * from "./__keys"; diff --git a/src/toast/stories/ToastBasic.stories.tsx b/src/toast/stories/ToastBasic.stories.tsx index 2a2137f5f..86aba2701 100644 --- a/src/toast/stories/ToastBasic.stories.tsx +++ b/src/toast/stories/ToastBasic.stories.tsx @@ -10,7 +10,7 @@ import { } from "./templates"; import "./Toast.css"; import { App as Toast } from "./ToastBasic.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Toast, diff --git a/src/toast/stories/ToastCSSAnimated.stories.tsx b/src/toast/stories/ToastCSSAnimated.stories.tsx index 32ed85d91..5697fc71b 100644 --- a/src/toast/stories/ToastCSSAnimated.stories.tsx +++ b/src/toast/stories/ToastCSSAnimated.stories.tsx @@ -10,7 +10,7 @@ import { } from "./templates"; import "./Toast.css"; import { App as Toast } from "./ToastCSSAnimated.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Toast, diff --git a/src/toast/stories/ToastCSSTransition.stories.tsx b/src/toast/stories/ToastCSSTransition.stories.tsx index cf37a5bf7..503027f25 100644 --- a/src/toast/stories/ToastCSSTransition.stories.tsx +++ b/src/toast/stories/ToastCSSTransition.stories.tsx @@ -10,7 +10,7 @@ import { } from "./templates"; import "./Toast.css"; import { App as Toast } from "./ToastCSSTransition.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Toast, diff --git a/src/toast/stories/ToastReactSpring.stories.tsx b/src/toast/stories/ToastReactSpring.stories.tsx index ac11c67bf..57b59c28c 100644 --- a/src/toast/stories/ToastReactSpring.stories.tsx +++ b/src/toast/stories/ToastReactSpring.stories.tsx @@ -10,7 +10,7 @@ import { } from "./templates"; import "./Toast.css"; import { App as Toast } from "./ToastReactSpring.component"; -import { createPreviewTabs } from "../../../scripts/create-preview-tabs"; +import { createPreviewTabs } from "../../../.storybook/utils"; export default { component: Toast, diff --git a/src/toast/stories/Utils.component.tsx b/src/toast/stories/Utils.component.tsx index 1cf60a21c..60eddf3da 100644 --- a/src/toast/stories/Utils.component.tsx +++ b/src/toast/stories/Utils.component.tsx @@ -6,7 +6,7 @@ import { createToastStore, DefaultToastOptions, useToastTimer, -} from "@renderlesskit/react"; +} from "../index"; export interface Toast extends TimerToast { content?: Content; diff --git a/src/utils/index.ts b/src/utils/index.ts index d256a97f3..2c1116af9 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,5 @@ import { warn } from "@chakra-ui/utils"; +import { splitProps } from "reakit-utils"; import { Booleanish } from "./types"; @@ -76,5 +77,12 @@ export function kebabCase(string: string) { return string.toLowerCase().replace(/[^a-z0-9]/g, "-"); } +// Split state props +export function splitStateProps(props: any, keys: readonly any[]) { + const [stateProps, otherProps] = splitProps(props, keys); + + return [stateProps, otherProps] as [T, P]; +} + export * from "./date"; export * from "./useControllableState"; diff --git a/tsconfig.json b/tsconfig.json index c4b067ab9..750847141 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,10 +21,6 @@ "types": ["node", "jest", "@testing-library/jest-dom"], "sourceMap": true, "declaration": true, - "declarationDir": "dist/types", - "paths": { - "@renderlesskit/react": ["src"], - "@renderlesskit/react/*": ["src/*"] - } + "declarationDir": "dist/types" } }