docs(checkbox): 📝 refactor stories with better types handling

scripts/create-preview-tabs.ts → .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;

jest.config.ts

@@ -15,7 +15,6 @@ export default {
   moduleNameMapper: {
     "\\.(css|less|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js",
     "^@shared(.*)$": "<rootDir>/shared$1",
-    "^@renderlesskit/react$": "<rootDir>/src",
   },
   coveragePathIgnorePatterns: [
     "node_modules",

scripts/utils/index.js

@@ -132,6 +132,17 @@ function isStateReturnDeclaration(node) {
   );
 }
 
+/**
+ * @param {import("ts-morph").Node<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>} 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;
+        }
       });
     });
 

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",

src/accordion/index.ts

@@ -5,3 +5,4 @@ export * from "./AccordionBaseState";
 export * from "./Accordion";
 export * from "./AccordionTrigger";
 export * from "./AccordionPanel";
+export * from "./__keys";

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);

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<

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);

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<

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<AccordionInitialState> = props => {

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<Partial<AccordionInitialState>, keyof CompositeState>

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 = {

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<

src/breadcrumbs/index.ts

@@ -1,2 +1,3 @@
 export * from "./Breadcrumbs";
 export * from "./BreadcrumbLink";
+export * from "./__keys";

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 (

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,

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",

src/calendar/index.ts

@@ -7,3 +7,4 @@ export * from "./CalendarButton";
 export * from "./CalendarGrid";
 export * from "./CalendarHeader";
 export * from "./CalendarWeekTitle";
+export * from "./__keys";

src/calendar/stories/CalendarBase.component.tsx

@@ -10,7 +10,7 @@ import {
   CalendarHeader,
   CalendarWeekTitle,
   CalendarInitialState,
-} from "@renderlesskit/react";
+} from "../index";
 
 import {
   ChevronLeft,

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,

src/calendar/stories/CalendarRange.component.tsx

@@ -10,7 +10,7 @@ import {
   CalendarWeekTitle,
   useRangeCalendarState,
   RangeCalendarInitialState,
-} from "@renderlesskit/react";
+} from "../index";
 
 import {
   ChevronLeft,

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",

src/checkbox/Checkbox.tsx

@@ -81,12 +81,12 @@ export const useCheckbox = createHook<CheckboxOptions, CheckboxHTMLProps>({
 
     const onChange = React.useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
-        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<CheckboxOptions, CheckboxHTMLProps>({
         if (!setState) return;
 
         if (typeof value === "undefined") {
-          console.log("%cchecked", "color: #731d1d", checked);
           setState(!checked);
         } else {
           const stateProp = Array.isArray(state) ? state : [];

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<React.SetStateAction<CheckboxState["state"]>>;
 };
@@ -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 };
 }