From 6bf834b1b239d7936a66b10378ef4901de096031 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= <dev@grizzly.codes>
Date: Mon, 15 Jul 2024 20:54:48 +0200
Subject: [PATCH] feat(solid): simplfy typography

---
 .../src/components/ui/primitives/heading.tsx  | 32 +++++--------------
 .../src/components/ui/primitives/text.tsx     | 30 ++++-------------
 .../latest/solid/components/heading.json      |  2 +-
 .../latest/solid/components/text.json         |  2 +-
 4 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/components/solid/src/components/ui/primitives/heading.tsx b/components/solid/src/components/ui/primitives/heading.tsx
index 061475907..ecc7a3250 100644
--- a/components/solid/src/components/ui/primitives/heading.tsx
+++ b/components/solid/src/components/ui/primitives/heading.tsx
@@ -1,27 +1,11 @@
-import { mergeProps, splitProps } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { css, cx } from 'styled-system/css'
-import { type HTMLStyledProps, splitCssProps } from 'styled-system/jsx'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
 import { type TextVariantProps, text } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
 
-type As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+type TextProps = TextVariantProps & { as?: React.ElementType }
 
-export type HeadingProps = TextVariantProps & {
-  as?: As
-} & HTMLStyledProps<As>
-
-export const Heading = (props: HeadingProps) => {
-  const mergedProps = mergeProps({ as: 'h2' }, props)
-  const [variantProps, headingProps] = splitProps(mergedProps, ['size'])
-  const [cssProps, elementProps] = splitCssProps(headingProps)
-  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
-  const className = text({ variant: 'heading', size: variantProps.size })
-
-  return (
-    <Dynamic
-      component={localProps.as}
-      class={cx(className, css(cssProps), localProps.class)}
-      {...rootProps}
-    />
-  )
-}
+export type HeadingProps = ComponentProps<typeof Heading>
+export const Heading = styled('h2', text, {
+  defaultProps: { variant: 'heading' },
+}) as StyledComponent<'h2', TextProps>
diff --git a/components/solid/src/components/ui/primitives/text.tsx b/components/solid/src/components/ui/primitives/text.tsx
index e7195091d..0ddc7ad65 100644
--- a/components/solid/src/components/ui/primitives/text.tsx
+++ b/components/solid/src/components/ui/primitives/text.tsx
@@ -1,27 +1,9 @@
-import type { Assign, HTMLArkProps } from '@ark-ui/solid'
-import { mergeProps, splitProps } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { css, cx } from 'styled-system/css'
-import { splitCssProps } from 'styled-system/jsx'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
 import { type TextVariantProps, text } from 'styled-system/recipes'
-import type { JsxStyleProps } from 'styled-system/types'
+import type { StyledComponent } from 'styled-system/types'
 
-export interface TextProps extends Assign<JsxStyleProps, HTMLArkProps<'p'>>, TextVariantProps {
-  as?: 'p' | 'label' | 'div' | 'span'
-}
+type ParagraphProps = TextVariantProps & { as?: JSX.ElementType }
 
-export const Text = (props: TextProps) => {
-  const mergedProps = mergeProps({ as: 'p' }, props)
-  const [variantProps, textProps] = splitProps(mergedProps, ['size', 'variant'])
-  const [cssProps, elementProps] = splitCssProps(textProps)
-  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])
-  const className = text(variantProps)
-
-  return (
-    <Dynamic
-      component={localProps.as}
-      class={cx(className, css(cssProps), localProps.class)}
-      {...rootProps}
-    />
-  )
-}
+export type TextProps = ComponentProps<typeof Text>
+export const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>
diff --git a/website/public/registry/latest/solid/components/heading.json b/website/public/registry/latest/solid/components/heading.json
index f08740da1..0e18a4ff9 100644
--- a/website/public/registry/latest/solid/components/heading.json
+++ b/website/public/registry/latest/solid/components/heading.json
@@ -4,7 +4,7 @@
   "variants": [
     {
       "file": "primitives/heading.tsx",
-      "content": "import { mergeProps, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { css, cx } from 'styled-system/css'\nimport { type HTMLStyledProps, splitCssProps } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\n\ntype As = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport type HeadingProps = TextVariantProps & {\n  as?: As\n} & HTMLStyledProps<As>\n\nexport const Heading = (props: HeadingProps) => {\n  const mergedProps = mergeProps({ as: 'h2' }, props)\n  const [variantProps, headingProps] = splitProps(mergedProps, ['size'])\n  const [cssProps, elementProps] = splitCssProps(headingProps)\n  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])\n  const className = text({ variant: 'heading', size: variantProps.size })\n\n  return (\n    <Dynamic\n      component={localProps.as}\n      class={cx(className, css(cssProps), localProps.class)}\n      {...rootProps}\n    />\n  )\n}\n",
+      "content": "import type { ComponentProps } from 'solid-js'\nimport { styled } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { StyledComponent } from 'styled-system/types'\n\ntype TextProps = TextVariantProps & { as?: React.ElementType }\n\nexport type HeadingProps = ComponentProps<typeof Heading>\nexport const Heading = styled('h2', text, {\n  defaultProps: { variant: 'heading' },\n}) as StyledComponent<'h2', TextProps>\n",
       "exports": "export { Heading, type HeadingProps } from './heading'"
     }
   ]
diff --git a/website/public/registry/latest/solid/components/text.json b/website/public/registry/latest/solid/components/text.json
index 0bb9f275c..d4e611ad0 100644
--- a/website/public/registry/latest/solid/components/text.json
+++ b/website/public/registry/latest/solid/components/text.json
@@ -4,7 +4,7 @@
   "variants": [
     {
       "file": "primitives/text.tsx",
-      "content": "import type { Assign, HTMLArkProps } from '@ark-ui/solid'\nimport { mergeProps, splitProps } from 'solid-js'\nimport { Dynamic } from 'solid-js/web'\nimport { css, cx } from 'styled-system/css'\nimport { splitCssProps } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { JsxStyleProps } from 'styled-system/types'\n\nexport interface TextProps extends Assign<JsxStyleProps, HTMLArkProps<'p'>>, TextVariantProps {\n  as?: 'p' | 'label' | 'div' | 'span'\n}\n\nexport const Text = (props: TextProps) => {\n  const mergedProps = mergeProps({ as: 'p' }, props)\n  const [variantProps, textProps] = splitProps(mergedProps, ['size', 'variant'])\n  const [cssProps, elementProps] = splitCssProps(textProps)\n  const [localProps, rootProps] = splitProps(elementProps, ['as', 'class'])\n  const className = text(variantProps)\n\n  return (\n    <Dynamic\n      component={localProps.as}\n      class={cx(className, css(cssProps), localProps.class)}\n      {...rootProps}\n    />\n  )\n}\n",
+      "content": "import type { ComponentProps } from 'solid-js'\nimport { styled } from 'styled-system/jsx'\nimport { type TextVariantProps, text } from 'styled-system/recipes'\nimport type { StyledComponent } from 'styled-system/types'\n\ntype ParagraphProps = TextVariantProps & { as?: JSX.ElementType }\n\nexport type TextProps = ComponentProps<typeof Text>\nexport const Text = styled('p', text) as StyledComponent<'p', ParagraphProps>\n",
       "exports": "export { Text, type TextProps } from './text'"
     }
   ]