Typescript support for `as` prop about panda

[segunadebayo]

Hi @WDeenik,

This is by design; the as prop is notoriously known for being very challenging to type, and we don't intend to add types for this prop.

The as prop might be deprecated in the next major release. You can implement this in their userland.

const Text = ({ as, ...rest }) => {
   const Element = useMemo(() => styled(as, textRecipe), [as])
   return <Element { ...rest }/>
}

Thanks for understanding

[segunadebayo]

Just a heads up, we intend to remove the as prop implementation in the styled factory before v1. Would recommend using the approach I suggested above.

[subvertallchris]

Would it be any easier to implement this if the user was required to define a list of approved elements, perhaps via recipe? For instance, I don't need my Typography to act like a table or a button, so I could just list the header, span, div, h1, h2, etc,...

[subvertallchris]

Here's another example implementation that uses forwardRef and avoids hooks useMemo. It connects some simple variants to defined text layers. It's not all necessary just to get the as, of course, but here it is for completeness.

import * as React from 'react';

import { cva } from '@/styled-system/css';
import { styled } from '@/styled-system/jsx';

const typographyRecipe = cva({
  variants: {
    size: {
      body: {
        textStyle: 'ampBody',
      },
      h1: {
        textStyle: 'ampH1',
      },
      h2: {
        textStyle: 'ampH2',
      },
      h3: {
        textStyle: 'ampH3',
      },
      h4: {
        textStyle: 'ampH4',
      },
      h5: {
        textStyle: 'ampH5',
      },
      h6: {
        textStyle: 'ampH6',
      },
      caption: {
        textStyle: 'ampCaption',
      },
      overline: {
        textStyle: 'ampOverline',
      },
      link: {
        textStyle: 'inlineLink',
      },
    },
  },
  defaultVariants: {
    size: 'body',
  },
});

type TypographyHtmlElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'a' | 'div';

interface ComponentProps {
  as?: TypographyHtmlElement;
}

const AsableTypography = <T extends TypographyHtmlElement>(
  { as = 'div', ...rest }: ComponentProps & React.JSX.IntrinsicElements[T],
  ref: React.ForwardedRef<T>,
) => {
  const testing = true;
  if (testing) {
    return React.createElement(as || 'div', { ref, ...rest });
  }
};

const ForwardableTypography = React.forwardRef(
  AsableTypography as <T extends TypographyHtmlElement>(
    props: ComponentProps & React.JSX.IntrinsicElements[T],
    ref: React.ForwardedRef<T>,
  ) => ReturnType<typeof AsableTypography>,
);

const Typography = styled(ForwardableTypography, typographyRecipe);

export default Typography;