Giters

Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.

Home Page:https://shopify.github.io/restyle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

composeRestyleFunctions not accepting `border`

vivex opened this issue · comments

commented

Current behavior

I am creating custom component using composeRestyleFunctions i am using the example provided in doc https://shopify.github.io/restyle/fundamentals/components/custom-components/

Code i am using:

const restyleFunctions = composeRestyleFunctions<Theme, RestyleProps>([
  spacing,
  border,
  backgroundColor,
  createVariant({ themeKey: 'buttonVariants' }),
]);

In above code i am getting following typescript error:

@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(26,3): error TS2322: Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:   Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:     Type '{ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:       Type '{ property: "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius"; themeKey: "borderRadii" | undefined; variant: boolean; func: RestyleFunction<...>; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:         Types of property 'themeKey' are incompatible.
@acme/ui:dev:           Type '"borderRadii" | undefined' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev:             Type '"borderRadii"' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(26,3): error TS2322: Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:   Type '({ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; })[]' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:     Type '{ property: "borderStyle" | "borderBottomWidth" | "borderEndWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStartWidth" | "borderTopWidth" | "borderWidth"; themeKey: undefined; variant: boolean; func: RestyleFunction<...>; } | { ...; } | { ...; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:       Type '{ property: "borderBottomEndRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStartRadius" | "borderRadius" | "borderTopEndRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStartRadius"; themeKey: "borderRadii" | undefined; variant: boolean; func: RestyleFunction<...>; }' is not assignable to type 'RestyleFunctionContainer<RestyleProps, { colors: { mainBackground: string; cardPrimaryBackground: string; primary: string; }; spacing: { xs: number; s: number; m: number; l: number; xl: number; }; textVariants: { ...; }; cardVariants: { ...; }; buttonVariants: { ...; }; }, "marginVertical" | ... 45 more ... | "varia...'.
@acme/ui:dev:         Types of property 'themeKey' are incompatible.
@acme/ui:dev:           Type '"borderRadii" | undefined' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev:             Type '"borderRadii"' is not assignable to type '"textVariants" | "spacing" | "colors" | "cardVariants" | "buttonVariants" | undefined'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)
@acme/ui:dev:     at /Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:24176:40
@acme/ui:dev: src/Button.tsx(4,3): error TS2305: Module '"@shopify/restyle"' has no exported member 'borderRadius'.
@acme/ui:dev: 
@acme/ui:dev: DTS Build failed
@acme/ui:dev: RollupError: Failed to compile. Check the logs above.
@acme/ui:dev:     at error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:210:30)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23975:20)
@acme/ui:dev:     at Object.error (/Users/vivex/expo-monorepo-example/node_modules/rollup/dist/shared/rollup.js:23220:42)
@acme/ui:dev:     at Object.transform (/Users/vivex/expo-monorepo-example/node_modules/tsup/dist/rollup.js:7287:20)```


## Expected behavior


## To Reproduce
Following example from https://shopify.github.io/restyle/fundamentals/components/custom-components/

## Platform:

- [ ] iOS

## Environment
^2.4.4
commented

Did you define borderRadii in your theme?