Merge pull request #26 from gregberge/fix-types

fix: fix className type
gregberge · Dec 25, 2023 · c6e4022 · c6e4022
2 parents daaf1a6 + 1fb84db
commit c6e4022
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@ampproject/filesize": "^4.3.0",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@swc/core": "^1.3.101",
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.42",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.test.tsx b/src/index.test.tsx
@@ -8,6 +8,7 @@ import {
   Button as AriaButton,
   ButtonProps as AriaButtonProps,
 } from "react-aria-components";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
 describe("twc", () => {
   beforeEach(cleanup);
@@ -226,4 +227,11 @@ describe("twc", () => {
     expect(button.classList.contains("bg-gray-700")).toBe(true);
     expect(button.classList.contains("opacity-35")).toBe(true);
   });
+
+  test("props are correctly typed", () => {
+    const Accordion = twc(AccordionPrimitive.Root)<
+      React.ComponentProps<typeof AccordionPrimitive.Root>
+    >`py-2`;
+    render(<Accordion type="single" collapsible></Accordion>);
+  });
 });
diff --git a/src/index.tsx b/src/index.tsx
@@ -100,7 +100,7 @@ function filterProps(
 
 type Attributes = Record<string, any> | ((props: any) => Record<string, any>);
 
-export const createTwc = <TCompose extends AbstractCompose>(
+export const createTwc = <TCompose extends AbstractCompose = typeof clsx>(
   config: Config<TCompose> = {},
 ) => {
   const compose = config.compose || clsx;

diff --git a/website/pages/docs/getting-started.mdx b/website/pages/docs/getting-started.mdx
@@ -10,7 +10,6 @@ import { Steps } from "nextra/components";
 npm i react-twc
 ```
 
-
 ### Setup autocompletion in your editor
 
 You can enable Tailwind autocompletion inside `twc` using the steps below:
@@ -26,7 +25,7 @@ You can enable Tailwind autocompletion inside `twc` using the steps below:
     {
       "tailwindCSS.experimental.classRegex": [
         "twc\\.[^`]+`([^`]*)`",
-        "twc\\(.*?\\).*?`([^)]*)",
+        "twc\\(.*?\\).*?`([^`]*)",
         ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
         ["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
       ]
@@ -47,7 +46,7 @@ You can enable Tailwind autocompletion inside `twc` using the steps below:
           experimental = {
             classRegex = {
               "twc\\.[^`]+`([^`]*)`",
-              "twc\\(.*?\\).*?`([^)]*)",
+              "twc\\(.*?\\).*?`([^`]*)",
               { "twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" },
               { "twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" }
             },
@@ -71,7 +70,7 @@ You can enable Tailwind autocompletion inside `twc` using the steps below:
       "experimental": {
         "classRegex": [
           "twc\\.[^`]+`([^`]*)`",
-          "twc\\(.*?\\).*?`([^)]*)",
+          "twc\\(.*?\\).*?`([^`]*)",
           ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
           ["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
         ]

diff --git a/website/pages/docs/guides/styling-any-component.mdx b/website/pages/docs/guides/styling-any-component.mdx
@@ -33,3 +33,25 @@ const HoverCardContent = twc(HoverCard.Content).attrs({
   sideOffset: 5,
 })`data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] rounded-md bg-white p-5 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] data-[state=open]:transition-all`;
 ```
+
+## Specify props
+
+When you wrap a component with `twc`, it infers the component's props automatically. However, this can sometimes result in unpredictable behavior. In such scenarios, it's better to define the props manually.
+
+For example, with the [`@radix-ui/react-accordion`](https://www.radix-ui.com/primitives/docs/components/accordion#accordion) component, its complex props like `type` and `collapsible` might not be inferred correctly by twc. To prevent issues, explicitly declare these props when using `twc`. This explicit declaration ensures accurate prop handling, avoiding potential problems.
+
+```tsx
+import * as React from 'react'
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { twc } from "react-twc";
+
+const Accordion = twc(AccordionPrimitive.Root)<React.ComponentProps<typeof AccordionPrimitive.Root>>`py-2`;
+
+export default () => {
+  return (
+    {/* This work without any type error, `collapsible` is authorized when `type="single"` */}
+    <Accordion type="single" collapsible>
+    </Accordion>
+  );
+}
+```