Merge pull request #92 from components-ai/styled-component

Use a styled component with built-in tag names to render elements

Author: johno

.changeset/mighty-keys-mix.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Create a styled component with tag name members for rendering the canvas/element

apps/docs/components/examples/Demo.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { initialStyles } from '../../data/initial-styles'
 import { defaultTheme } from '../../data/default-theme'
 
@@ -47,7 +47,7 @@ export function Demo() {
           </Editor>
         </div>
         <div sx={{ flexGrow: 1 }}>
-          <RenderElement tagName="p" styles={styles}>
+          <styled.p styles={styles}>
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
             upward limit to size and certainly a downward one... Within these
@@ -64,7 +64,7 @@ export function Demo() {
               </Link>{' '}
               by Karl Gerstner
             </em>
-          </RenderElement>
+          </styled.p>
         </div>
       </div>
       <div className="full-bleed">

apps/docs/components/examples/Fieldset.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import {
   Editor,
-  RenderElement,
+  styled,
   Fieldset as FieldsetInput,
   Inputs,
   toCSSObject,
@@ -35,9 +35,9 @@ export const Fieldset = () => {
           </FieldsetInput>
         </>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
+      <styled.p styles={styles}>
         Hello, <b>world!</b>
-      </RenderElement>
+      </styled.p>
       <pre>{JSON.stringify(toCSSObject(styles), null, 2)}</pre>
     </>
   )

apps/docs/components/examples/FontFamily.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react'
-import { FontFamilyInput, RenderElement } from '@compai/css-gui'
+import { FontFamilyInput, styled } from '@compai/css-gui'
 
 export const FontFamilyExample = () => {
   const [fontFamily, setFontFamily] = useState('Abel')
 
   return (
     <>
-      <RenderElement tagName='p' styles={{ fontFamily, fontSize: '24px' }}>
+      <styled.p styles={{ fontFamily, fontSize: '24px' }}>
         Fun with fonts!
-      </RenderElement>
+      </styled.p>
       <FontFamilyInput value={fontFamily} onChange={setFontFamily} />
     </>
   )

apps/docs/pages/components/editor.mdx

@@ -14,7 +14,7 @@ on its contents.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -26,9 +26,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }
@@ -42,7 +40,7 @@ used. You can compose inputs yourselves in this scenario:
 ```js
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 
 export function Demo() {
   const [styles, setStyles] = useState({})
@@ -67,7 +65,7 @@ export function Demo() {
           <Inputs.Height />
         </div>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
+      <styled.p styles={styles}>
         “The parameters comprise sequences which are theoretically infinite but
         limits are, of course, set to them in practice. There is an upward limit
         to size and certainly a downward one... Within these sequences there are
@@ -82,7 +80,7 @@ export function Demo() {
             Designing Programmes
           </a> by Karl Gerstner
         </em>
-      </RenderElement>
+      </styled.p>
       <pre>{codegen.css(styles)}</pre>
     </>
   )

apps/docs/pages/components/fieldset.mdx

@@ -16,7 +16,7 @@ all pseudo-elements and pseudo-selectors so you can also target
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement, Fieldset, Inputs } from '@compai/css-gui'
+import { Editor, Fieldset, Inputs, styled } from '@compai/css-gui'
 
 const MyEditor = () => {
   const [styles, setStyles] = useState({})
@@ -34,9 +34,7 @@ const MyEditor = () => {
           </Fieldset>
         </>
       </Editor>
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }

apps/docs/pages/examples/border-images.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Link from 'next/link'
-import { Editor, Inputs, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, Inputs, styled, codegen } from '@compai/css-gui'
 import { defaultTheme } from '../../data/default-theme'
 
 const initialStyles = {
@@ -53,7 +53,7 @@ export default function BorderImage() {
           </Editor>
         </div>
         <div sx={{ flexGrow: 1, pr: 4 }}>
-          <RenderElement tagName="p" styles={styles}>
+          <styled.p styles={styles}>
             “The parameters comprise sequences which are theoretically infinite
             but limits are, of course, set to them in practice. There is an
             upward limit to size and certainly a downward one... Within these
@@ -70,7 +70,7 @@ export default function BorderImage() {
               </Link>{' '}
               by Karl Gerstner
             </em>
-          </RenderElement>
+          </styled.p>
         </div>
       </div>
       <div className="full-bleed">

apps/docs/pages/examples/filters.tsx

@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -17,8 +17,7 @@ export default function Filters() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '24rem',
             height: '24rem',
@@ -37,7 +36,7 @@ export default function Filters() {
           }}
         >
           Fun with filters
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )

apps/docs/pages/examples/shadows.tsx

@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -45,8 +45,7 @@ export default function Shadows() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '12rem',
             height: '12rem',
@@ -57,7 +56,7 @@ export default function Shadows() {
           }}
         >
           Fun with shadows
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )

apps/docs/pages/examples/transforms.tsx

@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -22,8 +22,7 @@ export default function Transforms() {
           justifyContent: 'center',
         }}
       >
-        <RenderElement
-          tagName="div"
+        <styled.div
           styles={{
             width: '24rem',
             height: '24rem',
@@ -37,7 +36,7 @@ export default function Transforms() {
           }}
         >
           Fun with transforms
-        </RenderElement>
+        </styled.div>
       </div>
     </div>
   )

apps/docs/pages/examples/transitions.tsx

@@ -1,4 +1,4 @@
-import { RenderElement, Editor } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 import { useState } from 'react'
 
 const initialStyles = {
@@ -22,7 +22,7 @@ export default function Transitions() {
   return (
     <div>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="div" styles={styles} />
+      <styled.div styles={styles} />
     </div>
   )
 }

apps/docs/pages/exports/css.mdx

@@ -57,7 +57,7 @@ the style object to CSS that's then displayed in a `pre` tag.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement, codegen } from '@compai/css-gui'
+import { Editor, styled, codegen } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({
@@ -67,9 +67,7 @@ export const MyEditor = () => {
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
       <pre>{codegen.css(styles)}</pre>
     </>
   )

apps/docs/pages/getting-started.mdx

@@ -24,22 +24,20 @@ yarn add @compai/css-gui
 
 ## Usage
 
-Import the `Editor` component and `RenderElement` to initialize controls
+Import the `Editor` and `styled` components to initialize controls
 and then render the element styles to your canvas.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({})
 
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }

apps/docs/pages/inputs/font-family.mdx

@@ -7,7 +7,7 @@ import { FontFamilyExample } from '../../components/examples/FontFamily'
 
 This input supports a growing set of typefaces, which currently includes all
 [Google Fonts](https://fonts.google.com) and system fonts. Style sheets links are
-generated automatically with `RenderElement`.
+generated automatically with `styled`.
 
 ### Example
 
@@ -17,16 +17,14 @@ generated automatically with `RenderElement`.
 
 ```js
 import { useState } from 'react'
-import { FontFamilyInput, RenderElement } from '@compai/css-gui'
+import { FontFamilyInput, styled } from '@compai/css-gui'
 
 const MyEditor = () => {
   const [fontFamily, setFontFamily] = useState('Abel')
 
   return (
     <>
-      <RenderElement tagName="p" styles={{ fontFamily }}>
-        Fun with fonts!
-      </RenderElement>
+      <styled.p styles={{ fontFamily }}>Fun with fonts!</styled.p>
       <FontFamilyInput value={fontFamily} onChange={setFontFamily} />
     </>
   )

apps/docs/pages/introduction.mdx

@@ -11,22 +11,20 @@ With CSS GUI you can quickly get up and running with parametric controls for sty
 You can use this to improve your creative coding workflow or build user interfaces
 where users get to control how their content looks.
 
-At its essence, CSS GUI exposes an `Editor` and a `RenderElement` component to display
+At its essence, CSS GUI exposes an `Editor` and a `styled` component to display
 your controls and canvas, respectively.
 
 ```js
 import { useState } from 'react'
-import { Editor, RenderElement } from '@compai/css-gui'
+import { Editor, styled } from '@compai/css-gui'
 
 export const MyEditor = () => {
   const [styles, setStyles] = useState({})
 
   return (
     <>
       <Editor styles={styles} onChange={setStyles} />
-      <RenderElement tagName="p" styles={styles}>
-        Hello, world!
-      </RenderElement>
+      <styled.p styles={styles}>Hello, world!</styled.p>
     </>
   )
 }

packages/gui/src/components/RenderElement.tsx

@@ -15,12 +15,11 @@ export const RenderElement = ({
 }: RenderElementProps) => {
   const Component = tagName
   const styleObject = toCSSObject(styles)
-  
-  
+
   return (
     // @ts-ignore
     <>
-      <FontTags fontFamily={styles.fontFamily}/>
+      <FontTags fontFamily={styles.fontFamily} />
       {/* @ts-ignore */}
       <Component {...props} sx={styleObject} />
     </>

packages/gui/src/components/Styled.tsx

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react'
+import { elements } from '../data/elements'
+import { RenderElement } from './RenderElement'
+
+type StyledProps = HTMLAttributes<HTMLBaseElement> & {
+  styles: any
+}
+export const styled: Record<string, any> = {}
+Object.keys(elements).forEach((field: string) => {
+  styled[field] = ({ styles, ...props }: StyledProps) => (
+    <RenderElement tagName={field} styles={styles} {...props} />
+  )
+})

packages/gui/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/Editor'
+export { styled } from './components/Styled'
 export { RenderElement } from './components/RenderElement'
 
 export { Number as NumberInput } from './components/primitives'