components-ai / css.gui Goto Github PK

If a value has a direct mapping to a theme value, like a font size for example, we should set the unit select to "theme" and show the theme controls.

Pattern seen in styled components or framer motion

import { styled } from 'css-gui'

<styled.p styles={styles} />

go to shadows example
open text shadow
drag on first empty input

expected: empty = 0 and go from there

actual: nan error

Improve the linkability

Steps to reproduce

Click arrow in scrubber input.

Attempts

• Configure next-transpile-modules to hardcode alias for react (didn't work)
• Move package build to tsup with react set as an external (didn't work)

Related

• vercel/turbo#338

I've been told to keep the requests coming, so I am doing that :)

I tried out the BackgroundImage input. It doesn't seem to work for initializing a new gradient (maybe needs default stops to start?)

Additionally it seems like being able to remove a background image in the list would be helpful.

Maybe it's already on your list, but I get:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'type')

Call Stack
getInputComponent
node_modules/@compai/css-gui/dist/index.js (6172:0)

when trying to use borderStyle. borderWidth and borderColor work fine.

The step interval for the line-height control is set to 1 (believe this is html default). As line-height values generally range from 1-2 with values like 1.25 being common, we should increase the granularity so it's a bit smoother to scrub through possible values.

Perhaps something like the following?

import { useState } from 'react'
import { Editor, RenderElement } from 'css-gui'

export const MyEditor = () => {
  const [styles, setStyles] = useState({})
  const inlineStyles = useInlineStyles(styles)

  return (
    <>
      <Editor element="p" value={styles} onChange={setStyles} />
      <RenderElement tagName="p" styles={styles}>Hello, world!</p>
    </>
  )
}

Ran into this issue trying to install and use Editor with an existing app -- the error seems to come up once I start specifying state in the initial editor state. Any tips on how I track down what is going on here?

Unhandled Runtime Error
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.useId) is not a function

Call Stack
ColorInput
node_modules/@compai/css-gui/dist/index.js (2120:18)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js (17811:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19049:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23964:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22776:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22707:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (22293:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (11327:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (468:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js (11309:0)
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js (21893:0)
dispatchAction
node_modules/react-dom/cjs/react-dom.development.js (16139:0)
eval
node_modules/@liveblocks/react/lib/index.js (306:0)
step
node_modules/@liveblocks/react/lib/index.js (53:0)
Object.eval [as next]
node_modules/@liveblocks/react/lib/index.js (34:45)
fulfilled
node_modules/@liveblocks/react/lib/index.js (24:42)

Forces you to input a number first.

It should be aware of what pseudo classes and elements can be edited based on the element that the editor is associated with. For example, links have pseudos that other elements don't have.

<PseudoEditor name="after">
  <FontSize />
  <BackgroundColor />
  <Content />
</PseudoEditor>
<PseudoEditor name="before">
  <FontSize />
  <BackgroundColor />
  <Content />
</PseudoEditor>

Continuation of #27

• readme
• getting started
• introduction
• landing page

I'd like an easy way to set some preset colors for the color picker input. This may be possible through the theme option but I didn't get it to work on my naive try of feeding { colors: { red: "red", blue: "blue" } } into the theme prop of the editor.

I've only half thought through this but thought it might be helpful for you all as a possible use-case:

There's a good chance we'll use css.gui to let users style their own blocks, something like this:

I think it will make sense to pre-define some commonly used styles for them to edit. Working on that now.

Someday I'd also love to let them add any CSS property to that styling block -- maybe something like a combobox where it suggests valid style properties as you start typing....

I think (as you cover more and more of the spec) css.gui could be a good fit for this -- a user adding a style would just mean setting in the style state, then the editor component should pick it up automatically.

Another piece would be that combobox -- I guess it would need to be powered by a list of valid style properties, I'm sure I could put that together but there also might be a way for css.gui to expose that? Or provide the combobox "add a style property" functionality out of the box?

Radix has great accessible components (e.g. for a Toolbar, Radio, Select, Popover) and I'd love to use it with css.gui — some examples would be great on how to mix match with that (and also how to integrate w a styling library like Stitches or emotion)

Is there an easy way for me to convert the style object into a CSS string? I want to stick css.gui styles directly into a style element.

• margin
• marginX/marginY
• marginTop/marginLeft/marginBottom/marginRight
• padding
• paddingX/paddingY
• paddingTop/paddingLeft/paddingBottom/paddingRight

We have an internal props API for our generated Controls. We should also expose this to the inputs so folks can customize their controls:

<Inputs.LineHeight steps={{ number: 0.0123 }} />

We should also document the props API.

Pointer locking doesn't work well across browsers and causes nagging modals in some browsers like FF.

I imagine custom styling of inputs is a possible rabbithole, at the moment my top request is a way to align the color swatch inputs -- I think in my specific case right aligning them (with 'justify-content: space-between') would work, though I'm open to other ideas as well. If they had a consistent classname I could do it myself (though I can imagine you might want to approach it a different way).

Currently enums render as a <select> which is all fine and good, but I'd love an ability to render them as a radio group, too, which can be handy for a webflow style flex/grid layout widget

It would also be nice to have a way to set the default value in the editor, particularly for color values. Although maybe that gets weird in terms of telling whether that default value is applied...

I'm pretty much able to do what I want by adding in my own button that only appears when a property is set -- but possibly there's a cleaner/more general way to do it on your end.