dripsy: Basic usage of variants broken?

Following the most basic example from the docs site. Screenshot 2023-04-25 at 10 05 58 AM Screenshot 2023-04-25 at 10 06 38 AM

Nets this error:

Type 'string' is not assignable to type 'undefined'.ts(2322)
types.d.ts(85, 5): The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & (StyledProps<"text"> & ((TextProps & RefAttributes<Component<TextProps, any, any>>) | (TextProps & { ...; })))'
(property) variant: string

I am using the suggested mono repo with all the original configs unchanged.

Am I missing something?

About this issue

Original URL
State: closed
Created a year ago
Comments: 31 (14 by maintainers)

Most upvoted comments

Also, apologies if that came off as harsh. Just wanted to clarify.

nandorojo on May 15, 2023

Also for future reference: if your example in the original post had the full theme file, I would have been able to find it more easily. The screenshots weren’t enough to find it, full code samples are usually easier to debug. Thanks.

nandorojo on May 15, 2023

Would be useful to add this declaration merging to the Solito monorepo for future users to avoid this. I’d accept a PR on the Solito repo for that, or I’ll try to get to it soon.

nandorojo on May 15, 2023

Works fine after doing that.

nandorojo on May 15, 2023

PS, see in this file, you need to add the type declaration merging for it to work: https://github.com/jeffscottward/triplecheck/blob/80823fbc7c929cda42e5b81481569cb9516172ea/packages/app/theme.ts

type Theme = typeof theme

declare module 'dripsy' {
  interface DripsyCustomTheme extends Theme {}
}

nandorojo on May 15, 2023

Please keep in mind that this is open source and you could investigate yourself and PR. This isn’t my job, I’m helping for free, and you aren’t sponsoring me or the project. I’ll look into it today and address it, but please be mindful of that before pinging.

Second, your reproduction you shared doesn’t seem to follow what you want. The theme is this:

const theme = makeTheme({
  // https://www.dripsy.xyz/usage/theming/create
  text: {
    p: {
      fontSize: 16,
    },
  },
})

Where is the thick variant there? Also, there is no type declaration merging set up. I added both of these and it works right away, just as I mentioned in the docs.

Everything works exactly as expected for me in your reproduction after I followed the docs for TypeScript, so I’m going to close this for now.

nandorojo on May 15, 2023