Comments (1)
There should be types for extracting the variants of a styled component and another type for extracting all the props of the styled-components.
// This is similar to the Variant generic props used in stitches
type VariantProps<T> = ...;
type StyledProps<T, P = {}> = ...;
const Button = styled("button", {
base: `
appearance-none border-none bg-transparent
rounded-full px-2.5
`,
variants: {
size: {
sm: `text-sm h-6`,
md: `text-base h-9`,
},
variant: {
gray: `
bg-gray-500
hover:bg-gray-600
`,
primary: `
text-white bg-purple-500
hover:bg-purple-600
`,
},
outlined: {
true: `bg-transparent ring-1`,
},
},
defaults: {
variant: "gray",
size: "sm",
},
matches: [
{
variant: "gray",
outlined: true,
use: `ring-gray-500`,
},
{
variant: "primary",
outlined: true,
use: `text-purple-500 ring-gray-500 hover:text-white`,
},
],
})
type ButtonVariants = VariantProps<typeof Button>;
/*
should return the type
type B = {
size?: "sm" | "md";
variant?: "gray" | "primary";
outlined: boolean
},
}
The defaults decide if the given property should be optional
*/
type StyledComponent<typeof Button, { myOwnProp: string; }> = ...;
/*
Should return the type:
type A = <T extends keyof JSX.IntrinsicElements = "button">(props: PropsWithChildren<{
size?: "sm" | "md";
variant?: "gray" | "primary";
outlined: boolean;
css?: CSS;
tw?: string;
as?: T;
myOwnProp: string;
} & JSX.IntrinsicElements[T]>) => JSX.Elements;
The css and tw prop is the same found in the styled-components. The as prop decides which element is used and it is given props, and it should be defaulted to "button". The rest of the props are taken from the VariantProps;
*/
// StyledComponent usage
const Button2: StyledProps<typeof Button> = ({ myOwnProp, children, ...props }) => {
return (
<Button
css={{
backgroundColor: myOwnProp
}}
{...props}>
{children}
</Button/>
);
}
from twind-react.
Related Issues (7)
- React.ComponentProps on a StyledComponent is not working properly HOT 2
- Important (!) does not apply with styled() HOT 1
- Should `twind-react` be moved to the `use-twind-with` monorepo? HOT 2
- Classname not applying on next siblings on styled components HOT 2
- Production ready (/ still under active development?)
- Add support for mixin with twind/style, the same as in stitches
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twind-react.