fix(displayname): 🐛 bug with create composable hook

adaptui · Jan 4, 2022 · b59b20e · b59b20e
1 parent 2b59bda
commit b59b20e
Show file tree

Hide file tree

Showing 82 changed files with 179 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
   },
   "dependencies": {
     "@react-aria/live-announcer": "^3.0.1",
-    "@renderlesskit/react": "^0.9.2",
+    "@renderlesskit/react": "^0.10.1",
     "reakit": "^1.3.11",
     "reakit-system": "^0.15.2",
     "reakit-utils": "^0.15.2",

diff --git a/src/avatar-group/AvatarGroupWrapper.tsx b/src/avatar-group/AvatarGroupWrapper.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { GroupHTMLProps, GroupOptions, useGroup } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/avatar/AvatarIcon.tsx b/src/avatar/AvatarIcon.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/avatar/AvatarImage.tsx b/src/avatar/AvatarImage.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { UseImageProps } from "../hooks";

diff --git a/src/avatar/AvatarInitials.tsx b/src/avatar/AvatarInitials.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/avatar/AvatarStatusIndicator.tsx b/src/avatar/AvatarStatusIndicator.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/avatar/AvatarWrapper.tsx b/src/avatar/AvatarWrapper.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/box/Box.tsx b/src/box/Box.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RoleHTMLProps, RoleOptions, useRole } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { tcm } from "../utils";
 

diff --git a/src/button-group/ButtonGroup.tsx b/src/button-group/ButtonGroup.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { ButtonProps } from "../button";

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   ButtonHTMLProps as ReakitButtonHTMLProps,
   ButtonOptions as ReakitButtonOptions,
   useButton as useReakitButton,
 } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 import { announce } from "@react-aria/live-announcer";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";

diff --git a/src/button/CloseButton.tsx b/src/button/CloseButton.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { CloseIcon } from "../icons";
 

diff --git a/src/checkbox/CheckboxDescription.tsx b/src/checkbox/CheckboxDescription.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxIcon.tsx b/src/checkbox/CheckboxIcon.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxInput.tsx b/src/checkbox/CheckboxInput.tsx
@@ -1,7 +1,8 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   CheckboxHTMLProps,
   CheckboxOptions,
+  createComponent,
   useCheckbox,
 } from "@renderlesskit/react";
 

diff --git a/src/checkbox/CheckboxLabel.tsx b/src/checkbox/CheckboxLabel.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/checkbox/CheckboxText.tsx b/src/checkbox/CheckboxText.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressBar.tsx b/src/circular-progress/CircularProgressBar.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressBarWrapper.tsx b/src/circular-progress/CircularProgressBarWrapper.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressHint.ts b/src/circular-progress/CircularProgressHint.ts
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressTrack.tsx b/src/circular-progress/CircularProgressTrack.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/circular-progress/CircularProgressWrapper.tsx b/src/circular-progress/CircularProgressWrapper.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
+  createComponent,
   ProgressHTMLProps as ReakitProgressHTMLProps,
   ProgressOptions as ReakitProgressOptions,
   useProgress as useReakitProgress,

diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { SeparatorHTMLProps, SeparatorOptions, useSeparator } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/input/InputBase.tsx b/src/input/InputBase.tsx
@@ -1,6 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { InputHTMLProps, InputOptions, useInput } from "reakit";
-import { ariaAttr } from "@renderlesskit/react";
+import { ariaAttr, createComponent } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";
 import { cx } from "../utils";

diff --git a/src/input/InputPrefix.tsx b/src/input/InputPrefix.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/input/InputSuffix.tsx b/src/input/InputSuffix.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/input/InputWrapper.tsx b/src/input/InputWrapper.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterBar.tsx b/src/meter/MeterBar.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterBarWrapper.tsx b/src/meter/MeterBarWrapper.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterHint.tsx b/src/meter/MeterHint.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterLabel.tsx b/src/meter/MeterLabel.tsx
@@ -1,9 +1,10 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   unstable_IdHTMLProps,
   unstable_IdOptions,
   unstable_useId,
 } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterTrack.tsx b/src/meter/MeterTrack.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/meter/MeterWrapper.tsx b/src/meter/MeterWrapper.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
+  createComponent,
   MeterHTMLProps as ReakitMeterHTMLProps,
   MeterOptions as ReakitMeterOptions,
   useMeter as useReakitMeter,

diff --git a/src/progress/ProgressBar.tsx b/src/progress/ProgressBar.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/progress/ProgressHint.tsx b/src/progress/ProgressHint.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/progress/ProgressLabel.tsx b/src/progress/ProgressLabel.tsx
@@ -1,9 +1,10 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
   unstable_IdHTMLProps,
   unstable_IdOptions,
   unstable_useId,
 } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/progress/ProgressTrack.tsx b/src/progress/ProgressTrack.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/progress/ProgressWrapper.tsx b/src/progress/ProgressWrapper.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
+  createComponent,
   ProgressHTMLProps as ReakitProgressHTMLProps,
   ProgressOptions as ReakitProgressOptions,
   useProgress as useReakitProgress,

diff --git a/src/radio-group/RadioGroupWrapper.tsx b/src/radio-group/RadioGroupWrapper.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { RadioGroupHTMLProps, RadioGroupOptions, useRadioGroup } from "reakit";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/radio/RadioDescription.tsx b/src/radio/RadioDescription.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/radio/RadioIcon.tsx b/src/radio/RadioIcon.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/radio/RadioInput.tsx b/src/radio/RadioInput.tsx
@@ -1,5 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import {
+  createComponent,
   cx,
   RadioHTMLProps,
   RadioOptions,

diff --git a/src/radio/RadioLabel.tsx b/src/radio/RadioLabel.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/radio/RadioText.tsx b/src/radio/RadioText.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/select/SelectBase.tsx b/src/select/SelectBase.tsx
@@ -1,6 +1,6 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
 import { TabbableHTMLProps, TabbableOptions, useTabbable } from "reakit";
-import { ariaAttr } from "@renderlesskit/react";
+import { ariaAttr, createComponent } from "@renderlesskit/react";
 
 import { useTheme } from "../theme";
 import { cx } from "../utils";

diff --git a/src/select/SelectPrefix.tsx b/src/select/SelectPrefix.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/select/SelectSuffix.tsx b/src/select/SelectSuffix.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/select/SelectWrapper.tsx b/src/select/SelectWrapper.tsx
@@ -1,4 +1,5 @@
-import { createComponent, createHook } from "reakit-system";
+import { createHook } from "reakit-system";
+import { createComponent } from "@renderlesskit/react";
 
 import { BoxHTMLProps, BoxOptions, useBox } from "../box";
 import { useTheme } from "../theme";

diff --git a/src/show-more/ShowMoreButton.tsx b/src/show-more/ShowMoreButton.tsx
@@ -1,5 +1,5 @@
-import { createComponent } from "reakit-system";
 import {
+  createComponent,
   disclosureComposableButton,
   DisclosureHTMLProps,
   DisclosureOptions,
@@ -15,15 +15,14 @@ export type ShowMoreButtonHTMLProps = ButtonHTMLProps & DisclosureHTMLProps;
 export type ShowMoreButtonProps = ShowMoreButtonOptions &
   ShowMoreButtonHTMLProps;
 
-export const useShowMoreButton = disclosureComposableButton(useButton) as Hook<
-  ShowMoreButtonOptions,
-  ShowMoreButtonHTMLProps
->;
+export const useShowMoreButton = disclosureComposableButton({
+  name: "ShowMoreButton",
+  compose: useButton,
+}) as Hook<ShowMoreButtonOptions, ShowMoreButtonHTMLProps>;
 
 export const ShowMoreButton = createComponent({
   as: "button",
   memo: true,
   useHook: useShowMoreButton,
 });
-
-ShowMoreButton.displayName = "ShowMoreButton";
+console.log("%cShowMoreButton", "color: #ff6600", ShowMoreButton);