8000 Infer types automatically based on HTML element or React component by irangarcia · Pull Request #51 · gregberge/twc · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Infer types automatically based on HTML element or React component #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Infer types automatically based on HTML element or React component #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions src/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,17 @@ describe("twc", () => {
expect(title.dataset.foo).toBe("bar");
});

test("allows to pass extra props", () => {
const Title = twc.div<{ $isHidden?: boolean }>(props => `
${props.$isHidden && "hidden"}
`);
render(<Title $isHidden aria-hidden="true">Title</Title>);
const title = screen.getByText("Title");
expect(title).toBeDefined();
expect(title.classList.contains("hidden")).toBe(true);
expect(title.getAttribute("aria-hidden")).toBe("true");
});

test("supports attrs", () => {
const Checkbox = twc.input.attrs({ type: "checkbox" })`text-xl`;
render(<Checkbox data-testid="checkbox" />);
Expand Down Expand Up @@ -57,7 +68,7 @@ describe("twc", () => {
});

test("complex attrs support", () => {
type LinkProps = TwcComponentProps<"a"> & { $external?: boolean };
type LinkProps = { $external?: boolean };

// Accept an $external prop that adds `target` and `rel` attributes if present
const Link = twc.a.attrs<LinkProps>((props) =>
Expand Down Expand Up @@ -94,10 +105,8 @@ describe("twc", () => {
});

test("accepts custom props", () => {
type TitleProps = { children: React.ReactNode; className?: string };
const Title = twc.h1<TitleProps>`text-xl`;
const Title = twc.h1`text-xl`;
render(
// @ts-expect-error `title` is not a valid prop
<Title className="font-medium" title="x">
Title
</Title>,
Expand All @@ -111,7 +120,7 @@ describe("twc", () => {
test("accepts custom components", () => {
const CustomTitle = React.forwardRef(
(
props: { className?: string },
props,
ref: React.ForwardedRef<HTMLHeadingElement>,
) => (
<h1 ref={ref} {...props}>
Expand All @@ -129,16 +138,28 @@ describe("twc", () => {
expect(title.classList.contains("font-medium")).toBe(true);
});

test("accepts custom components with extra props", () => {
const Link: React.FC<React.ComponentProps<"a">> = (props) => <a {...props}>Custom Link</a>;

const StyledLink = twc(Link)<{ $isActive?: boolean }>((props) => `text-xl ${props.$isActive ? "underlined" : ""}`);
render(<StyledLink href="https://example.com" $isActive className="font-medium" />);
const link = screen.getByText("Custom Link");
expect(link).toBeDefined();
expect(link.tagName).toBe("A");
expect(link.classList.contains("text-xl")).toBe(true);
expect(link.classList.contains("font-medium")).toBe(true);
expect(link.classList.contains("underlined")).toBe(true);
});

test("accepts a function to define className", () => {
type Props = {
$size: "sm" | "lg";
children: React.ReactNode;
};
const Title = twc.h1<Props>((props) => ({
"text-xl": props.$size === "lg",
"text-sm": props.$size === "sm",
}));
render(<Title $size="sm">Title</Title>);
render(<Title role="heading" $size="sm">Title</Title>);
const title = screen.getByText("Title");
expect(title).toBeDefined();
expect(title.getAttribute("$size")).toBe(null);
Expand All @@ -149,7 +170,6 @@ describe("twc", () => {
test("allows to customize transient props using array", () => {
type Props = {
xsize: "sm" | "lg";
children: React.ReactNode;
};
const Title = twc.h1.transientProps(["xsize"])<Props>((props) => ({
"text-xl": props.xsize === "lg",
Expand All @@ -166,7 +186,6 @@ describe("twc", () => {
test("allows to customize transient props using function", () => {
type Props = {
xsize: "sm" | "lg";
children: React.ReactNode;
};
const Title = twc.h1.transientProps((prop) => prop === "xsize")<Props>(
(props) => ({
Expand Down Expand Up @@ -195,8 +214,7 @@ describe("twc", () => {
},
});

type ButtonProps = React.ComponentProps<"button"> &
VariantProps<typeof button>;
type ButtonProps = VariantProps<typeof button>;

const Button = twc.button<ButtonProps>(({ $intent }) =>
button({ $intent }),
Expand Down
45 changes: 29 additions & 16 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import * as React from "react";
import { clsx } from "clsx";
import { Slot } from "@radix-ui/react-slot";
Expand All @@ -20,25 +19,34 @@ type ResultProps<
: Omit<React.ComponentProps<TComponent>, "className"> & {
className?: Parameters<TCompose>[0];
} & TExtraProps
: TProps;
: TProps & Omit<React.ComponentProps<TComponent>, keyof TProps>;

type StyleValue<
TComponent extends React.ElementType,
TProps,
TExtraProps,
TCompose extends AbstractCompose
> =
| TemplateStringsArray
| string
| Record<string, boolean>
| ((props: ResultProps<TComponent, TProps, TExtraProps, TCompose>) =>
| string
| Record<string, boolean>
| ((renderProps: any) => string | Record<string, boolean>));

type Template<
TComponent extends React.ElementType,
TCompose extends AbstractCompose,
TExtraProps,
TParentProps = undefined,
> = <TProps = TParentProps>(
strings:
| TemplateStringsArray
| ((
props: ResultProps<TComponent, TProps, TExtraProps, TCompose>,
) => "className" extends keyof TProps
? TProps["className"]
: Parameters<TCompose>[0]),
...values: any[]
) => React.ForwardRefExoticComponent<
ResultProps<TComponent, TProps, TExtraProps, TCompose>
>;
> = {
<TProps = TParentProps>(
strings: StyleValue<TComponent, TProps, TExtraProps, TCompose>,
): React.ForwardRefExoticComponent<
ResultProps<TComponent, TProps, TExtraProps, TCompose>
>;
};

type ElementTagName = Exclude<
keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap,
Expand All @@ -49,7 +57,13 @@ type FirstLevelTemplate<
TComponent extends React.ElementType,
TCompose extends AbstractCompose,
TExtraProps,
> = Template<TComponent, TCompose, TExtraProps> & {
> = {
<TProps = undefined>(
strings: StyleValue<TComponent, TProps, TExtraProps, TCompose>,
): React.ForwardRefExoticComponent<
ResultProps<TComponent, TProps, TExtraProps, TCompose>
>;
} & {
/**
* Add additional props to the component.
*/
Expand All @@ -61,7 +75,6 @@ type FirstLevelTemplate<
props: ResultProps<TComponent, TProps, TExtraProps, TCompose>,
) => Record<string, any>),
) => Template<TComponent, TCompose, TExtraProps, TProps>;
} & {
/**
* Prevent props from being forwarded to the component.
*/
Expand Down
0