Module '"styles-engine/patterns"' has no exported member 'getAspectRatioStyle'.ts(2305)

[omarkhatibco]

Description

In order to support the as prop locally, I have to duplicate the generated components inside my own design system, so I'm trying to use the same logic used inside the components.

the problem it seems that getAspectRatioStyle is exported but the types for that function is not, could you please export the types as well?

Problem Statement/Justification

Since the function is exported. it make more sense to make it type safe and allow up to replicate the same logic

Proposed Solution or API

adding inside the packages/generator/src/artifacts/js/pattern.ts#L62 line 62

export declare function get${upperName}Style(props?: ${upperName}Properties): SystemStyleObject

Alternatives

No response

Additional Information

No response

[segunadebayo]

Hey @omarkhatibco,

We're not exposing some artifact types to allow for API feasibility in the future. The internal JS pattern is one of those. Sorry.

I'd recommend moving away from the as prop as much as possible. It's challenging to get the typings working in practice, even though they look like a good fit.

[omarkhatibco]

Hi @segunadebayo,

One of the key reasons why I love chakra was the as props and styles props pattern 🥲

however, how would deal with removing as prop in Chakra? what do you suggest as an alternative for Heading component? h1,h2 and so on?

Thanks

[anubra266]

@omarkhatibco the tags h1, h2 etc are basically just for semantics, you can give them an accompanying textStyle. I don't see the need for as there, unless I'm misunderstanding something

[omarkhatibco]

Hi @anubra266,

you are correct if I use the css function like this

<h1 className={css({textStyle:''})}>Text</h1>

but I'm building an internal design system such as Chakra where the users can use both as prop and style props togther same in Chakra Heading component.

I really love this syntax

<Heading as='h1'  textStyle='' />

[anubra266]

So basically you prefer jsx. You can do this then:

<styled.h1 textStyle='' />

[omarkhatibco]

@anubra266,

yes and no, what I did is what is in Chakra codebase something like this

const Heading = (props) => {
  return <styled.h1 {...props} />
}

and then the user can use the component like this

<Heading as='h2'  textStyle='' />

and yet I'm aware of the problem that typescript gets confused about which tag needs to be used from this issue

This example is still Chakra component, now back to my question, how the new API without as would look like? I'm seeking for you advise to know how to deal removing the as prop