From 635d59de5ebeec0888af4aa5a0e0099caad9e6b0 Mon Sep 17 00:00:00 2001 From: John Otander Date: Wed, 10 Aug 2022 17:43:11 -0600 Subject: [PATCH 001/128] Fix palette picker z index --- .changeset/flat-dolls-vanish.md | 5 +++++ .../src/components/primitives/ColorPicker/PalettePicker.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/flat-dolls-vanish.md diff --git a/.changeset/flat-dolls-vanish.md b/.changeset/flat-dolls-vanish.md new file mode 100644 index 00000000..faee8f18 --- /dev/null +++ b/.changeset/flat-dolls-vanish.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Fix palette picker z index diff --git a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx index 7ce1d389..2873e40e 100644 --- a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx +++ b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx @@ -55,6 +55,7 @@ export default function PalettePopover({ border: '1px solid', borderColor: 'border', borderRadius: '0.5rem', + zIndex: 99999, }} > From b26c09599249ae5b1b3e2fd3a6862f5cc42f1e56 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Aug 2022 23:44:07 +0000 Subject: [PATCH 002/128] Version Packages --- .changeset/flat-dolls-vanish.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/flat-dolls-vanish.md diff --git a/.changeset/flat-dolls-vanish.md b/.changeset/flat-dolls-vanish.md deleted file mode 100644 index faee8f18..00000000 --- a/.changeset/flat-dolls-vanish.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Fix palette picker z index diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 59cf2474..a1d599b4 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.205 + +### Patch Changes + +- 635d59de: Fix palette picker z index + ## 0.0.204 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 9d93bf6d..7ae54c1d 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.204", + "version": "0.0.205", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From a2746b54a90a2b6a091f0b96a9067968c5278622 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 11 Aug 2022 13:44:22 -0600 Subject: [PATCH 003/128] Spike out basic top-level slot support for attributes --- apps/docs/data/initial-html-editor-data.ts | 22 ++++++++++++++++--- .../src/components/html/Component/Editor.tsx | 13 +++++++---- packages/gui/src/components/html/types.ts | 6 ++--- .../gui/src/lib/codegen/to-react-props.ts | 5 +++-- packages/gui/src/lib/codegen/util.ts | 13 ++++++++++- 5 files changed, 46 insertions(+), 13 deletions(-) diff --git a/apps/docs/data/initial-html-editor-data.ts b/apps/docs/data/initial-html-editor-data.ts index e26a0b81..0730fa52 100644 --- a/apps/docs/data/initial-html-editor-data.ts +++ b/apps/docs/data/initial-html-editor-data.ts @@ -1494,7 +1494,13 @@ export const initialComponents: any = [ tagName: 'Heading', value: { tagName: 'h1', - attributes: {}, + attributes: { + title: { + type: 'slot', + name: 'title', + value: 'THE TITLE FOR 1!!!!', + }, + }, style: { color: '#4e4fec', fontSize: { @@ -1539,7 +1545,13 @@ export const initialComponents: any = [ tagName: 'Heading2', value: { tagName: 'h1', - attributes: {}, + attributes: { + title: { + type: 'slot', + name: 'title', + value: 'THE TITLE FOR 2!!!', + }, + }, style: { color: 'tomato', fontSize: { @@ -1586,7 +1598,11 @@ export const initialComponents: any = [ tagName: 'a', attributes: { href: '#!', - title: 'A navigation link', + title: { + type: 'slot', + name: 'title', + value: 'THE TITLE FOR NAV LINK!!!', + }, }, style: { color: 'tomato', diff --git a/packages/gui/src/components/html/Component/Editor.tsx b/packages/gui/src/components/html/Component/Editor.tsx index cb55d380..99f65788 100644 --- a/packages/gui/src/components/html/Component/Editor.tsx +++ b/packages/gui/src/components/html/Component/Editor.tsx @@ -1,9 +1,9 @@ import { ChangeEvent } from 'react' import fuzzysort from 'fuzzysort' import { Label, Combobox } from '../../primitives' -import { ComponentData } from '../types' +import { ComponentData, Slot } from '../types' import { useHtmlEditor } from '../Provider' -import { getSlots } from '../../../lib/codegen/util' +import { getSlots, isSlot } from '../../../lib/codegen/util' import { mergeComponentAttributes } from './util' interface ComponentEditorProps { @@ -101,7 +101,12 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => { {attributeEntries.length ? ( <> {attributeEntries.map((entry) => { - const [key, val] = entry + const [key, rawValue] = entry + + const val = isSlot(rawValue as Slot) + ? (rawValue as Slot).value + : rawValue + return (
diff --git a/packages/gui/src/components/html/types.ts b/packages/gui/src/components/html/types.ts index 0962643e..61f41806 100644 --- a/packages/gui/src/components/html/types.ts +++ b/packages/gui/src/components/html/types.ts @@ -1,7 +1,7 @@ export interface ElementData { type: 'element' | 'text' tagName?: string - attributes?: Record + attributes?: Record // `style` is an attribute, but we treat it specially for CSS.gui style?: Record value?: string @@ -17,7 +17,7 @@ export interface Slot { name: string value?: string tagName?: string - attributes?: Record + attributes?: Record style?: Record children?: HtmlNode[] props?: Props @@ -28,7 +28,7 @@ export interface ComponentData { tagName: string props?: Props value: HtmlNode - attributes?: Record + attributes?: Record style?: Record children?: HtmlNode[] } diff --git a/packages/gui/src/lib/codegen/to-react-props.ts b/packages/gui/src/lib/codegen/to-react-props.ts index 8bf596bb..8d9a0015 100644 --- a/packages/gui/src/lib/codegen/to-react-props.ts +++ b/packages/gui/src/lib/codegen/to-react-props.ts @@ -1,4 +1,5 @@ import * as propInfo from 'property-information' +import { stringifySlotInProp } from './util' const SCHEMA = 'html' as unknown as propInfo.Schema @@ -15,12 +16,12 @@ export const toReactProps = (props: Props): Props => { const propName = info.property || key return { - [propName]: value, + [propName]: stringifySlotInProp(value), ...acc, } } catch (e) { return { - [key]: value, + [key]: stringifySlotInProp(value), ...acc, } } diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts index 42d2074f..6b308790 100644 --- a/packages/gui/src/lib/codegen/util.ts +++ b/packages/gui/src/lib/codegen/util.ts @@ -4,7 +4,7 @@ import { visit } from 'unist-util-visit' import { HtmlNode, Slot } from '../../components/html/types' export const getSlots = (value: HtmlNode) => { - if (value.type === 'text' || value.type === 'slot') { + if (isText(value) || isSlot(value)) { return [] } @@ -30,3 +30,14 @@ export const hasChildrenSlot = (value: HtmlNode) => { const slots = getSlots(value) return !!slots.find((slot) => slot.name === 'children') } + +export const stringifySlotInProp = (value: any) => { + if (isSlot(value)) { + return value.value ?? null + } + + return value +} + +export const isText = (value: HtmlNode) => value?.type === 'text' +export const isSlot = (value: HtmlNode) => value?.type === 'slot' From 603bf01d977eaf5403b5a2e431a3f3fd96689b6f Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 11 Aug 2022 15:20:30 -0600 Subject: [PATCH 004/128] Pass in, and leverage, outer props in case they map to slots --- apps/docs/data/initial-html-editor-data.ts | 11 +++++++++++ .../gui/src/components/html/CanvasProvider.tsx | 11 +++++++++-- .../gui/src/components/html/Renderer/Element.tsx | 3 ++- packages/gui/src/components/html/util.ts | 4 ++-- packages/gui/src/lib/codegen/to-react-props.ts | 6 +++--- packages/gui/src/lib/codegen/util.ts | 15 ++++++++++++++- 6 files changed, 41 insertions(+), 9 deletions(-) diff --git a/apps/docs/data/initial-html-editor-data.ts b/apps/docs/data/initial-html-editor-data.ts index 0730fa52..7c678c8c 100644 --- a/apps/docs/data/initial-html-editor-data.ts +++ b/apps/docs/data/initial-html-editor-data.ts @@ -1631,6 +1631,17 @@ export const initialComponents: any = [ style: {}, children: [{ type: 'text', value: 'A footer!!!!' }], }, + { + type: 'element', + tagName: 'img', + attributes: { + src: { + type: 'slot', + name: 'imgSrc', + value: 'https://source.unsplash.com/random', + }, + }, + }, ], }, }, diff --git a/packages/gui/src/components/html/CanvasProvider.tsx b/packages/gui/src/components/html/CanvasProvider.tsx index c0bc5a28..c9790142 100644 --- a/packages/gui/src/components/html/CanvasProvider.tsx +++ b/packages/gui/src/components/html/CanvasProvider.tsx @@ -3,7 +3,7 @@ import { toCSSObject } from '../../lib/codegen/to-css-object' import { toReactProps } from '../../lib/codegen/to-react-props' import { useTheme } from '../providers/ThemeContext' import { useHtmlEditor } from './Provider' -import { ElementPath, HtmlNode } from './types' +import { ComponentData, ElementPath, HtmlNode } from './types' import { cleanAttributesForCanvas, isSamePath } from './util' const DEFAULT_CANVAS_VALUE = {} @@ -18,6 +18,7 @@ type CanvasProviderType = { export type CanvasElementProps = { path: ElementPath value: HtmlNode + component?: ComponentData onClick?(e: MouseEvent): void } @@ -26,7 +27,12 @@ export function useCanvas() { return context } -export function useCanvasProps({ path, value, onClick }: CanvasElementProps) { +export function useCanvasProps({ + path, + value, + component, + onClick, +}: CanvasElementProps) { const { canvas } = useContext(CanvasContext) const { selected, setSelected } = useHtmlEditor() const theme = useTheme() @@ -66,6 +72,7 @@ export function useCanvasProps({ path, value, onClick }: CanvasElementProps) { ...(canvas ? cleanAttributesForCanvas(attributes) : attributes), ...(canvas ? { 'data-path': path.join('-') } : {}), sx, + outerProps: component?.props, onClick: handleSelect, }) diff --git a/packages/gui/src/components/html/Renderer/Element.tsx b/packages/gui/src/components/html/Renderer/Element.tsx index d0dc22f3..8b8b3a82 100644 --- a/packages/gui/src/components/html/Renderer/Element.tsx +++ b/packages/gui/src/components/html/Renderer/Element.tsx @@ -12,10 +12,11 @@ export function ElementRenderer({ path, ...canvasElementProps }: CanvasElementProps) { - const { selectComponent } = useComponent() + const { selectComponent, value: componentValue } = useComponent() const { onClick, ...props } = useCanvasProps({ value, path, + component: componentValue, ...canvasElementProps, }) diff --git a/packages/gui/src/components/html/util.ts b/packages/gui/src/components/html/util.ts index b75363d1..df5bb2b3 100644 --- a/packages/gui/src/components/html/util.ts +++ b/packages/gui/src/components/html/util.ts @@ -1,4 +1,4 @@ -import { HtmlNode, ElementPath } from './types' +import { HtmlNode, ElementPath, Slot } from './types' import { isNil } from 'lodash-es' export const isSamePath = ( @@ -19,7 +19,7 @@ export const removeTailFromPath = (path: ElementPath) => { } export const cleanAttributesForCanvas = ( - attributes: Record + attributes: Record ) => { const newAttributes = { ...attributes } diff --git a/packages/gui/src/lib/codegen/to-react-props.ts b/packages/gui/src/lib/codegen/to-react-props.ts index 8d9a0015..b62f3c55 100644 --- a/packages/gui/src/lib/codegen/to-react-props.ts +++ b/packages/gui/src/lib/codegen/to-react-props.ts @@ -4,7 +4,7 @@ import { stringifySlotInProp } from './util' const SCHEMA = 'html' as unknown as propInfo.Schema type Props = Record -export const toReactProps = (props: Props): Props => { +export const toReactProps = ({ outerProps, ...props }: Props): Props => { return Object.entries(props).reduce((acc, curr) => { const [key, value] = curr @@ -16,12 +16,12 @@ export const toReactProps = (props: Props): Props => { const propName = info.property || key return { - [propName]: stringifySlotInProp(value), + [propName]: stringifySlotInProp(value, outerProps), ...acc, } } catch (e) { return { - [key]: stringifySlotInProp(value), + [key]: stringifySlotInProp(value, outerProps), ...acc, } } diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts index 6b308790..990d2d2a 100644 --- a/packages/gui/src/lib/codegen/util.ts +++ b/packages/gui/src/lib/codegen/util.ts @@ -14,6 +14,14 @@ export const getSlots = (value: HtmlNode) => { visit(tree, 'slot', (node: any) => { slots.push(node) }) + visit(tree, 'element', (node: any) => { + const attributes = node.attributes || {} + Object.values(attributes).forEach((val: any) => { + if (isSlot(val)) { + slots.push(val) + } + }) + }) }) .runSync(value) @@ -31,8 +39,13 @@ export const hasChildrenSlot = (value: HtmlNode) => { return !!slots.find((slot) => slot.name === 'children') } -export const stringifySlotInProp = (value: any) => { +export const stringifySlotInProp = (value: any, outerProps: any) => { if (isSlot(value)) { + const slotName = value.name + if (outerProps && outerProps[slotName]) { + return outerProps[slotName] + } + return value.value ?? null } From 2bc50a50903144585a4e327505b37766bd5764ce Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 11 Aug 2022 16:01:29 -0600 Subject: [PATCH 005/128] Allow for slot creation when defining attributes --- .../html/Editors/AttributeEditor.tsx | 151 +++++++++++++++--- 1 file changed, 132 insertions(+), 19 deletions(-) diff --git a/packages/gui/src/components/html/Editors/AttributeEditor.tsx b/packages/gui/src/components/html/Editors/AttributeEditor.tsx index ef7beefd..295254be 100644 --- a/packages/gui/src/components/html/Editors/AttributeEditor.tsx +++ b/packages/gui/src/components/html/Editors/AttributeEditor.tsx @@ -1,13 +1,15 @@ import { X } from 'react-feather' import { Label } from '../../primitives' import IconButton from '../../ui/IconButton' -import { useEffect } from 'react' +import { ChangeEvent, useEffect } from 'react' import { Combobox } from '../../primitives' import { ATTRIBUTE_MAP } from '../../../data/attributes' +import { isSlot } from '../../../lib/codegen/util' +import { Slot } from '../types' interface AttributeEditorProps { - value: Record - onChange(value: Record): void + value: Record + onChange(value: Record): void element: string } @@ -49,6 +51,27 @@ export const AttributeEditor = ({ onChange(newValue) } + const handleSlotToggle = (key: string) => { + const val = value[key] + const slotValue = val as unknown as Slot + + if (isSlot(slotValue)) { + onChange({ + ...value, + [key]: slotValue.value as string, + }) + } else { + onChange({ + ...value, + [key]: { + type: 'slot', + name: key, + value: val as string, + }, + }) + } + } + return (
@@ -62,25 +85,115 @@ export const AttributeEditor = ({
{/* @ts-ignore */} {Object.entries(value).map(([key, attrValue]) => { + if (isSlot(attrValue as unknown as Slot)) { + return ( + + onChange({ ...value, [key]: newValue }) + } + onRemove={() => handleItemRemoved(key)} + onSlot={() => handleSlotToggle(key)} + /> + ) + } + return ( -
- -
+ onChange({ ...value, [key]: e.target.value })} + onRemove={() => handleItemRemoved(key)} + onSlot={() => handleSlotToggle(key)} + /> ) })}
) } + +interface StringAttributeEditorProps { + name: string + value: string + onChange(e: ChangeEvent): void + onRemove(): void + onSlot(): void +} +const StringAttributeEditor = ({ + name, + value, + onChange, + onRemove, + onSlot, +}: StringAttributeEditorProps) => { + return ( +
+ +
+ ) +} + +interface SlotAttributeEditorProps { + name: string + value: Slot + onChange(newValue: Slot): void + onRemove(): void + onSlot(): void +} +const SlotAttributeEditor = ({ + name, + value, + onChange, + onRemove, + onSlot, +}: SlotAttributeEditorProps) => { + return ( +
+ {name} + + +
+ ) +} From 406fc8becd94f3bd22c220c3a9aa6e7471c9b475 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 11 Aug 2022 16:08:35 -0600 Subject: [PATCH 006/128] Tweak title slot data --- apps/docs/data/initial-html-editor-data.ts | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/apps/docs/data/initial-html-editor-data.ts b/apps/docs/data/initial-html-editor-data.ts index 7c678c8c..8c8b2b45 100644 --- a/apps/docs/data/initial-html-editor-data.ts +++ b/apps/docs/data/initial-html-editor-data.ts @@ -1498,7 +1498,7 @@ export const initialComponents: any = [ title: { type: 'slot', name: 'title', - value: 'THE TITLE FOR 1!!!!', + value: 'The title for heading 1', }, }, style: { @@ -1549,7 +1549,7 @@ export const initialComponents: any = [ title: { type: 'slot', name: 'title', - value: 'THE TITLE FOR 2!!!', + value: 'The title for heading 2', }, }, style: { @@ -1601,7 +1601,7 @@ export const initialComponents: any = [ title: { type: 'slot', name: 'title', - value: 'THE TITLE FOR NAV LINK!!!', + value: 'A nav link', }, }, style: { @@ -1631,17 +1631,6 @@ export const initialComponents: any = [ style: {}, children: [{ type: 'text', value: 'A footer!!!!' }], }, - { - type: 'element', - tagName: 'img', - attributes: { - src: { - type: 'slot', - name: 'imgSrc', - value: 'https://source.unsplash.com/random', - }, - }, - }, ], }, }, From 2908cba5576189903cf8f2c97bd7a2eb20f009a7 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 11 Aug 2022 20:59:09 -0600 Subject: [PATCH 007/128] Make sure default value is passed to base schema --- .changeset/cold-ties-fly.md | 5 +++++ packages/gui/src/data/properties.ts | 5 ++--- 2 files changed, 7 insertions(+), 3 deletions(-) create mode 100644 .changeset/cold-ties-fly.md diff --git a/.changeset/cold-ties-fly.md b/.changeset/cold-ties-fly.md new file mode 100644 index 00000000..95397fbc --- /dev/null +++ b/.changeset/cold-ties-fly.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Make sure default value is passed to base schema diff --git a/packages/gui/src/data/properties.ts b/packages/gui/src/data/properties.ts index 29f2b1fd..0216be7f 100644 --- a/packages/gui/src/data/properties.ts +++ b/packages/gui/src/data/properties.ts @@ -119,18 +119,17 @@ function normalizeSchema(propertyData: PropertyData): DataTypeSchema { stringify: (value) => String(value), } } else { - const { defaultValue, ...basePropertyData } = propertyData // TODO: Figure out how to make this use Ranges rather than UnitRanges // so there's proper support for `range: 'nonnegative'` // @ts-ignore - let schema = primitiveMap[input](basePropertyData) as any + let schema = primitiveMap[input](propertyData) as any return joinSchemas( compact([ schema, keywords && keyword(keywords), themeProperty && themeSchema(themeProperty), ]), - { defaultValue } + { defaultValue: propertyData.defaultValue } ) } } From 8541ae7c72838f22b637730ef1fe6ba8c03f634b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 12 Aug 2022 02:59:55 +0000 Subject: [PATCH 008/128] Version Packages --- .changeset/cold-ties-fly.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/cold-ties-fly.md diff --git a/.changeset/cold-ties-fly.md b/.changeset/cold-ties-fly.md deleted file mode 100644 index 95397fbc..00000000 --- a/.changeset/cold-ties-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Make sure default value is passed to base schema diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index a1d599b4..50ff987f 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.206 + +### Patch Changes + +- 2908cba5: Make sure default value is passed to base schema + ## 0.0.205 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 7ae54c1d..697ac1d4 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.205", + "version": "0.0.206", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From c53ca4bb2eb5140411da71c1b72697c9e3107f93 Mon Sep 17 00:00:00 2001 From: John Otander Date: Fri, 12 Aug 2022 08:11:47 -0600 Subject: [PATCH 009/128] Improve enter handling for combobox --- .changeset/brown-steaks-sit.md | 5 +++ .../src/components/primitives/Combobox.tsx | 34 +++++++++++++++++-- 2 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 .changeset/brown-steaks-sit.md diff --git a/.changeset/brown-steaks-sit.md b/.changeset/brown-steaks-sit.md new file mode 100644 index 00000000..2790d220 --- /dev/null +++ b/.changeset/brown-steaks-sit.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Improve enter handling for combobox diff --git a/packages/gui/src/components/primitives/Combobox.tsx b/packages/gui/src/components/primitives/Combobox.tsx index 651edb91..f23f7755 100644 --- a/packages/gui/src/components/primitives/Combobox.tsx +++ b/packages/gui/src/components/primitives/Combobox.tsx @@ -1,5 +1,12 @@ import { useCombobox } from 'downshift' -import { useEffect, useId, useRef, useState } from 'react' +import { + ChangeEvent, + KeyboardEvent, + useEffect, + useId, + useRef, + useState, +} from 'react' interface ComboboxInterface { onFilterItems: (filterValue: string) => string[] @@ -59,13 +66,27 @@ export function Combobox({ setFilterValue(clearOnSelect ? '' : selectedItem) } + const handleEnter = () => { + if (items.includes(filterValue)) { + handleItemSelected(filterValue) + toggleMenu() + } + } + return (
setFilterValue(e.target.value), + onChange: (e: ChangeEvent) => { + setFilterValue(e.target.value) + }, + onKeyDown: (e: KeyboardEvent) => { + if (e.key === 'Enter') { + handleEnter() + } + }, })} onFocus={() => { if (!isOpen) { @@ -73,7 +94,14 @@ export function Combobox({ handleFilterItems('') } }} - sx={{ WebkitAppearance: 'none', appearance: 'none', width: '100%', border: '1px solid', borderRadius: '6px', p: 1 }} + sx={{ + WebkitAppearance: 'none', + appearance: 'none', + width: '100%', + border: '1px solid', + borderRadius: '6px', + p: 1, + }} />
Date: Fri, 12 Aug 2022 14:14:00 +0000 Subject: [PATCH 010/128] Version Packages --- .changeset/brown-steaks-sit.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/brown-steaks-sit.md diff --git a/.changeset/brown-steaks-sit.md b/.changeset/brown-steaks-sit.md deleted file mode 100644 index 2790d220..00000000 --- a/.changeset/brown-steaks-sit.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Improve enter handling for combobox diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 50ff987f..121055d2 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.207 + +### Patch Changes + +- c53ca4bb: Improve enter handling for combobox + ## 0.0.206 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 697ac1d4..3d02b398 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.206", + "version": "0.0.207", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From b5dc91a77360c4ad681d96fa490e0d562d87a801 Mon Sep 17 00:00:00 2001 From: John Otander Date: Fri, 12 Aug 2022 09:19:59 -0600 Subject: [PATCH 011/128] Make sure tag combobox syncs --- .changeset/modern-ads-explode.md | 5 +++++ packages/gui/src/components/html/Editors/NodeEditor.tsx | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/modern-ads-explode.md diff --git a/.changeset/modern-ads-explode.md b/.changeset/modern-ads-explode.md new file mode 100644 index 00000000..3acfb2dc --- /dev/null +++ b/.changeset/modern-ads-explode.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Make sure tag name combobox syncs diff --git a/packages/gui/src/components/html/Editors/NodeEditor.tsx b/packages/gui/src/components/html/Editors/NodeEditor.tsx index 2e266e6f..9c2f738b 100644 --- a/packages/gui/src/components/html/Editors/NodeEditor.tsx +++ b/packages/gui/src/components/html/Editors/NodeEditor.tsx @@ -166,6 +166,8 @@ function NodeSwitch({ value, onChange }: EditorProps) { return } + const tagKey = [...(selected || []), value.tagName || ''].join('-') + return (
{' '} { if (!filterValue) { return HTML_TAGS From 20f3e30c4627aa27b6a2c1fb4cba36be66062996 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 12 Aug 2022 15:21:06 +0000 Subject: [PATCH 012/128] Version Packages --- .changeset/modern-ads-explode.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/modern-ads-explode.md diff --git a/.changeset/modern-ads-explode.md b/.changeset/modern-ads-explode.md deleted file mode 100644 index 3acfb2dc..00000000 --- a/.changeset/modern-ads-explode.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Make sure tag name combobox syncs diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 121055d2..724fb905 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.208 + +### Patch Changes + +- b5dc91a7: Make sure tag name combobox syncs + ## 0.0.207 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 3d02b398..319e3676 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.207", + "version": "0.0.208", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 30c41f20918a30d02695b387c22c2686b7096760 Mon Sep 17 00:00:00 2001 From: mrmrs Date: Sun, 14 Aug 2022 00:37:57 -0700 Subject: [PATCH 013/128] Adds more elements and attributes, specifically for SVG --- packages/gui/src/data/attributes.ts | 48 +++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/packages/gui/src/data/attributes.ts b/packages/gui/src/data/attributes.ts index 80bfeb29..876ca6c1 100644 --- a/packages/gui/src/data/attributes.ts +++ b/packages/gui/src/data/attributes.ts @@ -12,6 +12,7 @@ export const ATTRIBUTE_MAP: Record = { ], abbr: GLOBAL_ATTRIBUTES, address: GLOBAL_ATTRIBUTES, + area: [...GLOBAL_ATTRIBUTES, 'shape', 'coords', 'href', 'alt', ], article: GLOBAL_ATTRIBUTES, aside: GLOBAL_ATTRIBUTES, audio: [ @@ -140,6 +141,7 @@ export const ATTRIBUTE_MAP: Record = { legend: GLOBAL_ATTRIBUTES, li: [...GLOBAL_ATTRIBUTES, 'value', 'type'], main: GLOBAL_ATTRIBUTES, + map: [...GLOBAL_ATTRIBUTES, 'name', ], mark: GLOBAL_ATTRIBUTES, menu: GLOBAL_ATTRIBUTES, menuitem: GLOBAL_ATTRIBUTES, @@ -235,10 +237,44 @@ export const ATTRIBUTE_MAP: Record = { 'crossorigin', ], wbr: GLOBAL_ATTRIBUTES, - svg: [...GLOBAL_ATTRIBUTES, 'version', 'xmlns', 'viewBox'], - circle: [...GLOBAL_ATTRIBUTES, 'cx', 'cy', 'r'], - rect: [...GLOBAL_ATTRIBUTES, 'width', 'height', 'x', 'y', 'rx', 'ry'], - line: [...GLOBAL_ATTRIBUTES, 'x1', 'y1', 'x2', 'y2'], - path: [...GLOBAL_ATTRIBUTES, 'd'], - polyline: [...GLOBAL_ATTRIBUTES, 'points'], + svg: [...GLOBAL_ATTRIBUTES, + 'viewBox', + 'width', + 'height', + 'fill-rule', + 'fill-opacity', + 'clip-path', + 'clip-rule', + 'version', + 'xmlns', + 'preserveAspectRatio', + ], + circle: [...GLOBAL_ATTRIBUTES, 'cx', 'cy', 'r', 'stroke'], + ellipse: [...GLOBAL_ATTRIBUTES, 'cx', 'cy', 'rx', 'ry', 'pathLength', 'stroke'], + rect: [...GLOBAL_ATTRIBUTES, 'width', 'height', 'x', 'y', 'rx', 'ry', 'stroke'], + line: [...GLOBAL_ATTRIBUTES, 'x1', 'y1', 'x2', 'y2', 'stroke',], + mask: [ + ...GLOBAL_ATTRIBUTES, + 'width', 'height', + 'x', 'y', + 'maskUnits', + 'maskContentUnits', + ], + path: [...GLOBAL_ATTRIBUTES, 'd', 'stroke',], + pattern: [ + ...GLOBAL_ATTRIBUTES, + 'width', 'height', + 'patternContentUnits', + 'patternTransform', + 'patternUnits', + 'viewBox', + 'x', + 'y', + ], + polyline: [...GLOBAL_ATTRIBUTES, 'points', 'stroke',], + polygon: [...GLOBAL_ATTRIBUTES, 'points', 'pathLength', 'stroke',], + symbol: [...GLOBAL_ATTRIBUTES, 'width', 'height', 'viewBox', 'x', 'y', 'refX', 'refY'], + use: [...GLOBAL_ATTRIBUTES, 'href', 'x', 'y', 'clip-path'], + defs: [...GLOBAL_ATTRIBUTES], + g: [...GLOBAL_ATTRIBUTES ], } From 50d060daf9013019eaedc5aa8763b2252d94f13f Mon Sep 17 00:00:00 2001 From: mrmrs Date: Sun, 14 Aug 2022 00:43:57 -0700 Subject: [PATCH 014/128] Adds changeset --- .changeset/chatty-pets-wash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chatty-pets-wash.md diff --git a/.changeset/chatty-pets-wash.md b/.changeset/chatty-pets-wash.md new file mode 100644 index 00000000..599f884f --- /dev/null +++ b/.changeset/chatty-pets-wash.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Adds new properties and svg elements From 27d731769641ee675838832877710a2b70ff96c5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 14 Aug 2022 07:45:12 +0000 Subject: [PATCH 015/128] Version Packages --- .changeset/chatty-pets-wash.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/chatty-pets-wash.md diff --git a/.changeset/chatty-pets-wash.md b/.changeset/chatty-pets-wash.md deleted file mode 100644 index 599f884f..00000000 --- a/.changeset/chatty-pets-wash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Adds new properties and svg elements diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 724fb905..28bf2f8d 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.209 + +### Patch Changes + +- 50d060da: Adds new properties and svg elements + ## 0.0.208 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 319e3676..a93e3900 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.208", + "version": "0.0.209", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 9628acc5e7eb75aafca1a3b8d05dc80d3deca7bf Mon Sep 17 00:00:00 2001 From: John Otander Date: Mon, 15 Aug 2022 12:32:00 -0600 Subject: [PATCH 016/128] Keep props around when swapping between components --- .changeset/dull-keys-appear.md | 5 +++++ packages/gui/src/components/html/Component/Editor.tsx | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 .changeset/dull-keys-appear.md diff --git a/.changeset/dull-keys-appear.md b/.changeset/dull-keys-appear.md new file mode 100644 index 00000000..1bc8496d --- /dev/null +++ b/.changeset/dull-keys-appear.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Keep props around when swapping between components diff --git a/packages/gui/src/components/html/Component/Editor.tsx b/packages/gui/src/components/html/Component/Editor.tsx index 99f65788..b8a15600 100644 --- a/packages/gui/src/components/html/Component/Editor.tsx +++ b/packages/gui/src/components/html/Component/Editor.tsx @@ -34,8 +34,9 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => { const handleComponentSelected = (selectedItem: string) => { const component = components.find((c) => c.id === selectedItem) + if (component) { - onChange(component) + onChange({ ...component, props: value.props }) } } From 0498d1422c1b71d42b9bfad2a37bd8f10d24f0ce Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 15 Aug 2022 18:33:45 +0000 Subject: [PATCH 017/128] Version Packages --- .changeset/dull-keys-appear.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/dull-keys-appear.md diff --git a/.changeset/dull-keys-appear.md b/.changeset/dull-keys-appear.md deleted file mode 100644 index 1bc8496d..00000000 --- a/.changeset/dull-keys-appear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Keep props around when swapping between components diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 28bf2f8d..91095413 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.210 + +### Patch Changes + +- 9628acc5: Keep props around when swapping between components + ## 0.0.209 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index a93e3900..60e7bfb1 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.209", + "version": "0.0.210", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 790afdba13097ee680e4d0781d24282311b9ec3a Mon Sep 17 00:00:00 2001 From: John Otander Date: Mon, 15 Aug 2022 14:00:01 -0600 Subject: [PATCH 018/128] Keep component name in combobox when selected --- .changeset/few-teachers-mix.md | 5 +++++ packages/gui/src/components/html/Component/Editor.tsx | 1 - packages/gui/src/components/primitives/Combobox.tsx | 5 ++++- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/few-teachers-mix.md diff --git a/.changeset/few-teachers-mix.md b/.changeset/few-teachers-mix.md new file mode 100644 index 00000000..89cb4041 --- /dev/null +++ b/.changeset/few-teachers-mix.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Keep component name in combobox when selected diff --git a/packages/gui/src/components/html/Component/Editor.tsx b/packages/gui/src/components/html/Component/Editor.tsx index b8a15600..3ee36c5b 100644 --- a/packages/gui/src/components/html/Component/Editor.tsx +++ b/packages/gui/src/components/html/Component/Editor.tsx @@ -82,7 +82,6 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => { return components.find((c) => c.id === id)?.tagName ?? id }} items={componentIds} - clearOnSelect />
diff --git a/packages/gui/src/components/primitives/Combobox.tsx b/packages/gui/src/components/primitives/Combobox.tsx index f23f7755..7a5a1b2f 100644 --- a/packages/gui/src/components/primitives/Combobox.tsx +++ b/packages/gui/src/components/primitives/Combobox.tsx @@ -63,7 +63,10 @@ export function Combobox({ const handleItemSelected = (selectedItem: string) => { onItemSelected(selectedItem) - setFilterValue(clearOnSelect ? '' : selectedItem) + const selectedItemText = decorateItemText + ? decorateItemText(selectedItem) + : selectedItem + setFilterValue(clearOnSelect ? '' : selectedItemText) } const handleEnter = () => { From 51ebecf6fa8a2cb20b777f532c0b38679d794148 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 15 Aug 2022 20:01:05 +0000 Subject: [PATCH 019/128] Version Packages --- .changeset/few-teachers-mix.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/few-teachers-mix.md diff --git a/.changeset/few-teachers-mix.md b/.changeset/few-teachers-mix.md deleted file mode 100644 index 89cb4041..00000000 --- a/.changeset/few-teachers-mix.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Keep component name in combobox when selected diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 91095413..4ccd14f6 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.211 + +### Patch Changes + +- 790afdba: Keep component name in combobox when selected + ## 0.0.210 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 60e7bfb1..c65fc044 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.210", + "version": "0.0.211", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 3f04e7ac834addb9d6f45d4ae2f87f0206ae338c Mon Sep 17 00:00:00 2001 From: John Otander Date: Mon, 15 Aug 2022 15:31:51 -0600 Subject: [PATCH 020/128] Only wrap imports when there's more than one top level element --- .changeset/chatty-feet-compare.md | 5 +++++ packages/gui/src/lib/parsers/html.ts | 5 +---- packages/gui/src/lib/transformers/html-to-editor-schema.ts | 5 +++++ 3 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 .changeset/chatty-feet-compare.md diff --git a/.changeset/chatty-feet-compare.md b/.changeset/chatty-feet-compare.md new file mode 100644 index 00000000..a17d4146 --- /dev/null +++ b/.changeset/chatty-feet-compare.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Only wrap imports when there's more than one top level element diff --git a/packages/gui/src/lib/parsers/html.ts b/packages/gui/src/lib/parsers/html.ts index 8ebdcafe..bea8b1b6 100644 --- a/packages/gui/src/lib/parsers/html.ts +++ b/packages/gui/src/lib/parsers/html.ts @@ -2,10 +2,7 @@ import { htmlToEditorSchema } from '../transformers' export const html = (htmlString: string) => { // TODO: Use unified to wrap and remove doctype - const fullString = `
${htmlString.replace( - '', - '' - )}
` + const fullString = `
${htmlString.replace('', '')}
` const data = htmlToEditorSchema(fullString) return data } diff --git a/packages/gui/src/lib/transformers/html-to-editor-schema.ts b/packages/gui/src/lib/transformers/html-to-editor-schema.ts index aa609079..2b76e131 100644 --- a/packages/gui/src/lib/transformers/html-to-editor-schema.ts +++ b/packages/gui/src/lib/transformers/html-to-editor-schema.ts @@ -5,6 +5,11 @@ import { hastToEditorSchema } from './hast-to-editor-schema' export const htmlToEditorSchema = (text: string) => { const tree = unified().use(rehypeParse, { fragment: true }).parse(text) const processedTree = hastToEditorSchema(tree) + + if (processedTree.children.length > 1) { + return processedTree + } + const htmlBody = processedTree.children[0] return htmlBody } From 1e605db50d8e093825dacae7a1f5c53680951e37 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 15 Aug 2022 21:45:40 +0000 Subject: [PATCH 021/128] Version Packages --- .changeset/chatty-feet-compare.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/chatty-feet-compare.md diff --git a/.changeset/chatty-feet-compare.md b/.changeset/chatty-feet-compare.md deleted file mode 100644 index a17d4146..00000000 --- a/.changeset/chatty-feet-compare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Only wrap imports when there's more than one top level element diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 4ccd14f6..65922c28 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.212 + +### Patch Changes + +- 3f04e7ac: Only wrap imports when there's more than one top level element + ## 0.0.211 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index c65fc044..4ae54de0 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.211", + "version": "0.0.212", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From d2b2ead625ec9a3fdfbe942df1ee8d7e5569d074 Mon Sep 17 00:00:00 2001 From: John Otander Date: Tue, 16 Aug 2022 09:28:14 -0600 Subject: [PATCH 022/128] Update readme, most breaking changes have occurred at this point --- readme.md | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index 02701b14..fd03eafa 100644 --- a/readme.md +++ b/readme.md @@ -24,18 +24,6 @@ It's theme-aware, performant, and can be composed into any React app. - Scrubbable number inputs - Smart default ranges -## ⚠️ Under active development - -This project is a work in (rapid) progress. - -Over the next few weeks the API will be stabilizing as more functionality is added. -CSS GUI only [supports a portion](https://components.ai/open-source/css-gui/unsupported) -of the CSS spec currently, but the intention is to support it all. - -[We welcome any and all contributions](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md). -We'd love it if you try to experiment with CSS GUI. Please feel free to report bugs -or make feature requests. - ## Why? We want to improve creative coding and web development workflows by making @@ -53,10 +41,17 @@ These controls are specifically built for CSS and will adhere to the CSS spec. This builds on the web platform itself, allowing the expressiveness of CSS/HTML/SVG to create endless outputs. -It's our goal and intention to support the entire CSS spec beginning with the more +It's our [goal and intention](https://components.ai/open-source/css-gui/unsupported) +to support the entire CSS spec beginning with the more common controls like Length, Color, Keywords and expanding over time to more complex stacks and grammars (think gradients, background-image, box shadow, etc.). +## How can you help? + +[We welcome any and all contributions](https://github.com/components-ai/css.gui/blob/main/.github/contributing.md). +We'd love it if you try to experiment with CSS GUI and let us know how it goes. Please feel free to +[report bugs or make feature requests](https://github.com/components-ai/css.gui/issues/new). + ## Installation ```sh From 0c2668a059645ee824434e035a715d5a73ca61bd Mon Sep 17 00:00:00 2001 From: John Otander Date: Tue, 16 Aug 2022 09:29:16 -0600 Subject: [PATCH 023/128] Improve wording --- readme.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/readme.md b/readme.md index fd03eafa..9234d77c 100644 --- a/readme.md +++ b/readme.md @@ -82,8 +82,7 @@ export const MyEditor = () => { } ``` -For more customization, you can compose together your own controls and style -pseudo-elements. +For more customization, you can compose your own controls and style pseudo-elements. ```js import { useState } from 'react' From 8114b4c4623afe6835732d55c1069e261b12187b Mon Sep 17 00:00:00 2001 From: John Otander Date: Tue, 16 Aug 2022 14:59:43 -0600 Subject: [PATCH 024/128] Improve color display --- .changeset/curvy-wombats-perform.md | 5 +++++ .../primitives/ColorPicker/PalettePicker.tsx | 19 ++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 .changeset/curvy-wombats-perform.md diff --git a/.changeset/curvy-wombats-perform.md b/.changeset/curvy-wombats-perform.md new file mode 100644 index 00000000..0ab30d06 --- /dev/null +++ b/.changeset/curvy-wombats-perform.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Improve color display diff --git a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx index 2873e40e..01c14a22 100644 --- a/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx +++ b/packages/gui/src/components/primitives/ColorPicker/PalettePicker.tsx @@ -1,6 +1,7 @@ import * as Popover from '@radix-ui/react-popover' import { themeGet } from '../../../lib' import { useTheme } from '../../providers/ThemeContext' +import { joinPath } from '../../providers/util' import Checkerboard from './Checkerboard' import { hasAlpha, withFallback } from './util' @@ -20,6 +21,15 @@ export default function PalettePopover({ // swatch, ...props }: Props) { + const theme = useTheme() + const rawValue = themeGet({ + property: 'color', + path: value.path, + theme, + }) + + const labelMeta = value.path === rawValue ? null : `(${rawValue})` + return ( {} {value.path} + {labelMeta}
{(colorGroup as any).map((color: any, i: number) => { + const colorPath = `${name}.${i}` const selected = valueColor === color + const rawColor = themeGet({ + theme, + property: 'color', + path: colorPath, + }) return (
-
+
{ return !!pseudoClasses.filter((value) => value === str).length @@ -9,8 +10,12 @@ export const isPseudoElement = (str: string): boolean => { return !!pseudoElements.filter((value) => value === str).length } +export const isSelectorFunction = (str: string): boolean => { + return !!selectorFunctions.filter((value) => str.startsWith(value)).length +} + export const isPseudo = (str: string): boolean => { - return isPseudoClass(str) || isPseudoElement(str) + return isPseudoClass(str) || isPseudoElement(str) || isSelectorFunction(str) } export const hasPseudoSyntax = (str: string): boolean => { @@ -21,8 +26,23 @@ export const removePseudoSyntax = (str: string): string => { return str.replace(/^:+/, '') } +export const getSelectorFunctionArgument = (str: string): string => { + return str.match(/\(([^)]+)\)/)?.[1] ?? '' +} + +export const getSelectorFunctionName = (str: string): string => { + return str.split('(')[0] +} + +export const stringifySelectorFunction = ( + functionName: string, + argument: string +): string => { + return `${addPseudoSyntax(functionName)}(${argument})` +} + export const addPseudoSyntax = (str: string): string => { - if (isPseudoClass(str)) { + if (isPseudoClass(str) || isSelectorFunction(str)) { return ':' + str } else if (isPseudoElement(str)) { return '::' + str diff --git a/packages/gui/src/lib/util.ts b/packages/gui/src/lib/util.ts index bfa36a00..7a3c0f5d 100644 --- a/packages/gui/src/lib/util.ts +++ b/packages/gui/src/lib/util.ts @@ -1,4 +1,4 @@ -import { isPseudoClass, isPseudoElement } from './pseudos' +import { isPseudoClass, isPseudoElement, isSelectorFunction } from './pseudos' import { isElement } from './elements' import { lowerCase, startCase, upperFirst } from 'lodash-es' import { EditorProps, EditorPropsWithLabel } from '../types/editor' @@ -31,6 +31,7 @@ export function isNestedSelector(selector: string): boolean { isElement(selector) || isPseudoClass(selector) || isPseudoElement(selector) || + isSelectorFunction(selector) || isInternalCSSClass(selector) || false ) From 8cf2fcef1b657e9defa3e7ec347d881e04082411 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 9 Sep 2022 20:45:22 +0000 Subject: [PATCH 082/128] Version Packages --- .changeset/modern-zebras-fry.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/modern-zebras-fry.md diff --git a/.changeset/modern-zebras-fry.md b/.changeset/modern-zebras-fry.md deleted file mode 100644 index e949948c..00000000 --- a/.changeset/modern-zebras-fry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Add initial support for selector functions diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index c64609a0..58110ec3 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.234 + +### Patch Changes + +- 63cc6ff4: Add initial support for selector functions + ## 0.0.233 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 0b8a1b51..414ded1d 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.233", + "version": "0.0.234", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From b0c58514dc8de979deea090d2e60ccd5df524518 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 15 Sep 2022 03:37:26 -0600 Subject: [PATCH 083/128] Implement first pass of enhance output --- .changeset/early-lamps-tie.md | 5 ++ packages/gui/src/lib/codegen/emotion.ts | 2 +- packages/gui/src/lib/codegen/enhance-sfc.ts | 46 +++++++++++++ packages/gui/src/lib/codegen/index.ts | 1 + packages/gui/src/lib/codegen/react.ts | 2 +- .../codegen/stringify-hast-node-as-html.ts | 65 +++++++++++++++++++ ...-node.ts => stringify-hast-node-as-jsx.ts} | 0 packages/gui/src/lib/codegen/styled-jsx.ts | 2 +- packages/gui/src/lib/codegen/theme-ui.ts | 2 +- packages/gui/src/lib/codegen/util.ts | 2 +- .../lib/transformers/editor-schema-to-hast.ts | 7 ++ 11 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 .changeset/early-lamps-tie.md create mode 100644 packages/gui/src/lib/codegen/enhance-sfc.ts create mode 100644 packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts rename packages/gui/src/lib/codegen/{stringify-hast-node.ts => stringify-hast-node-as-jsx.ts} (100%) diff --git a/.changeset/early-lamps-tie.md b/.changeset/early-lamps-tie.md new file mode 100644 index 00000000..ed938fe2 --- /dev/null +++ b/.changeset/early-lamps-tie.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Implement first pass of enhance output diff --git a/packages/gui/src/lib/codegen/emotion.ts b/packages/gui/src/lib/codegen/emotion.ts index cbedb3fe..93422862 100644 --- a/packages/gui/src/lib/codegen/emotion.ts +++ b/packages/gui/src/lib/codegen/emotion.ts @@ -2,7 +2,7 @@ import { toH } from 'hast-to-hyperscript' import { HtmlNode } from '../../components/html/types' import { editorSchemaToHast } from '../transformers/editor-schema-to-hast' import { toCSSObject } from './to-css-object' -import { stringifyHastNode } from './stringify-hast-node' +import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' import { format } from './format' import { getPropSyntax } from './util' diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts new file mode 100644 index 00000000..a465c786 --- /dev/null +++ b/packages/gui/src/lib/codegen/enhance-sfc.ts @@ -0,0 +1,46 @@ +import { toH } from 'hast-to-hyperscript' +import { HtmlNode } from '../../components/html/types' +import { editorSchemaToHast } from '../transformers/editor-schema-to-hast' +import { toCSSObject } from './to-css-object' +import { stringifyHastNode } from './stringify-hast-node-as-html' +import { toReactProps } from './to-react-props' +import { format } from './format' +import { getSlots } from './util' +import { kebabCase } from 'lodash-es' + +const h = (tagName: string, props: any, children?: any[]) => { + const newProps = toReactProps(props) + + if (newProps.style) { + const style = newProps.style + delete newProps.style + newProps.sx = toCSSObject(style) + } + + return { tagName, props: newProps, children } +} + +export const enhanceSFC = async (node: HtmlNode) => { + const root = editorSchemaToHast(node, { addSlotTagSyntax: true }) + const functionBody = stringifyHastNode(toH(h, root)) + + const output = ` + export default function Component({ html }) { + return html\` + ${functionBody} + \` + } + ` + + return format('js', output) +} + +export const getAttrSyntax = (value: HtmlNode) => { + const slots = getSlots(value) + const props = slots.map((slot) => kebabCase(slot.name)).join(', ') + const attrString = props.length ? `{ ${props} }` : '' + return ` + const { attrs } = state + const ${attrString} = attrs + ` +} diff --git a/packages/gui/src/lib/codegen/index.ts b/packages/gui/src/lib/codegen/index.ts index 88ca0926..c28c000f 100644 --- a/packages/gui/src/lib/codegen/index.ts +++ b/packages/gui/src/lib/codegen/index.ts @@ -5,3 +5,4 @@ export * from './vue' export * from './theme-ui' export * from './emotion' export * from './styled-jsx' +export * from './enhance-sfc' diff --git a/packages/gui/src/lib/codegen/react.ts b/packages/gui/src/lib/codegen/react.ts index 365124d4..1c215676 100644 --- a/packages/gui/src/lib/codegen/react.ts +++ b/packages/gui/src/lib/codegen/react.ts @@ -3,7 +3,7 @@ import { HtmlNode } from '../../components/html/types' import { extractStyles } from './extract-styles' import { format } from './format' import { html as toHtml } from './html' -import { stringifyHastNode } from './stringify-hast-node' +import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' const h = (tagName: string, props: any, children?: any[]) => { diff --git a/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts new file mode 100644 index 00000000..77b4273b --- /dev/null +++ b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts @@ -0,0 +1,65 @@ +import { isArray, isNumber, isObject, kebabCase } from 'lodash-es' +import escapeHtml from 'escape-html' +import { isElement, isVoidElement } from '../elements' +import { getSlots, isSlot } from './util' + +// TODO: This can, and should, be done at the AST level in the future +export const formatTagName = (node: any) => { + if (isElement(node.tagName)) { + return node.tagName + } + + const formatted = kebabCase(node.tagName) + + if (!formatted.includes('-')) { + return `my-${formatted}` + } + + return formatted +} + +export const stringifyHastNode = (node: any) => { + if (typeof node === 'string' || isSlot(node)) { + return node.value || node + } + + if (isVoidElement(node.tagName)) { + return `<${formatTagName(node)} ${stringifyProps(node.props)} />` + } + + let children = node.children?.map(stringifyHastNode).join('\n') || '' + + // TODO: This can, and should, be done at the AST level in the future + if (!children?.length && node.type) { + const childSlot = getSlots(node.value).find( + (slot) => slot.name === 'children' + ) + children = childSlot ? stringifyHastNode(childSlot) : '' + children = `${children}` + } + + return ` + <${formatTagName(node)} ${stringifyProps(node.props)}> + ${children} + ` +} +export const stringifyProps = (props: any): string => { + if (!props) { + return '' + } + + return Object.entries(props) + .map(([key, value]): any => { + if (isArray(value) || isObject(value)) { + return `${key}={${JSON.stringify(value)}}` + } + + if (isNumber(value)) { + return `${key}={${value}}` + } + + const fullValue = escapeHtml(value as string) + return `${key}="${fullValue}"` + }) + .join(' ') +} diff --git a/packages/gui/src/lib/codegen/stringify-hast-node.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts similarity index 100% rename from packages/gui/src/lib/codegen/stringify-hast-node.ts rename to packages/gui/src/lib/codegen/stringify-hast-node-as-jsx.ts diff --git a/packages/gui/src/lib/codegen/styled-jsx.ts b/packages/gui/src/lib/codegen/styled-jsx.ts index 500716bd..0a048a4e 100644 --- a/packages/gui/src/lib/codegen/styled-jsx.ts +++ b/packages/gui/src/lib/codegen/styled-jsx.ts @@ -3,7 +3,7 @@ import { HtmlNode } from '../../components/html/types' import { extractStyles } from './extract-styles' import { format } from './format' import { html as toHtml } from './html' -import { stringifyHastNode } from './stringify-hast-node' +import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' const h = (tagName: string, props: any, children?: any[]) => { diff --git a/packages/gui/src/lib/codegen/theme-ui.ts b/packages/gui/src/lib/codegen/theme-ui.ts index 14848977..8c7b357c 100644 --- a/packages/gui/src/lib/codegen/theme-ui.ts +++ b/packages/gui/src/lib/codegen/theme-ui.ts @@ -2,7 +2,7 @@ import { toH } from 'hast-to-hyperscript' import { HtmlNode } from '../../components/html/types' import { editorSchemaToHast } from '../transformers/editor-schema-to-hast' import { toCSSObject } from './to-css-object' -import { stringifyHastNode } from './stringify-hast-node' +import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' import { format } from './format' import { getPropSyntax } from './util' diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts index 990d2d2a..55073671 100644 --- a/packages/gui/src/lib/codegen/util.ts +++ b/packages/gui/src/lib/codegen/util.ts @@ -1,4 +1,4 @@ -import { camelCase } from 'lodash-es' +import { camelCase, kebabCase } from 'lodash-es' import { unified } from 'unified' import { visit } from 'unist-util-visit' import { HtmlNode, Slot } from '../../components/html/types' diff --git a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts index 9b95f143..dcdab615 100644 --- a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts +++ b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts @@ -9,6 +9,7 @@ import { removeProperties } from './plugins/remove-properties' type Options = { removeStyleProperty?: boolean addSlotSyntax?: boolean + addSlotTagSyntax?: boolean } export const editorSchemaToHast = (node: any, options?: Options) => { const propertiesToRemove: string[] = [] @@ -29,6 +30,12 @@ export const editorSchemaToHast = (node: any, options?: Options) => { node.value = `{${camelCase(node.name)}}` }) } + if (options?.addSlotTagSyntax) { + visit(tree, 'slot', (node) => { + node.type = 'text' + node.value = `` + }) + } }) .runSync(cloneDeep(node)) return processedTree From 8b1b92427cb434c5232173537b83a2367348f162 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 15 Sep 2022 20:19:42 +0000 Subject: [PATCH 084/128] Version Packages --- .changeset/early-lamps-tie.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/early-lamps-tie.md diff --git a/.changeset/early-lamps-tie.md b/.changeset/early-lamps-tie.md deleted file mode 100644 index ed938fe2..00000000 --- a/.changeset/early-lamps-tie.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Implement first pass of enhance output diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 58110ec3..b2a2f8e8 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.235 + +### Patch Changes + +- b0c58514: Implement first pass of enhance output + ## 0.0.234 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 414ded1d..26e3e4c8 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.234", + "version": "0.0.235", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 38996b16c4c051ecdd9273f0917a783dc9cb4d66 Mon Sep 17 00:00:00 2001 From: John Otander Date: Thu, 15 Sep 2022 15:28:43 -0600 Subject: [PATCH 085/128] Add attributes to enhance export --- .changeset/silly-dots-love.md | 5 +++++ packages/gui/src/lib/codegen/enhance-sfc.ts | 11 +++++++++-- .../gui/src/lib/transformers/editor-schema-to-hast.ts | 4 +++- .../plugins/convert-components-to-hast.ts | 4 ++++ 4 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 .changeset/silly-dots-love.md diff --git a/.changeset/silly-dots-love.md b/.changeset/silly-dots-love.md new file mode 100644 index 00000000..88b91f79 --- /dev/null +++ b/.changeset/silly-dots-love.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Include attributes in enhance export diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts index a465c786..44a805e2 100644 --- a/packages/gui/src/lib/codegen/enhance-sfc.ts +++ b/packages/gui/src/lib/codegen/enhance-sfc.ts @@ -14,7 +14,7 @@ const h = (tagName: string, props: any, children?: any[]) => { if (newProps.style) { const style = newProps.style delete newProps.style - newProps.sx = toCSSObject(style) + newProps.style = toCSSObject(style) } return { tagName, props: newProps, children } @@ -25,7 +25,8 @@ export const enhanceSFC = async (node: HtmlNode) => { const functionBody = stringifyHastNode(toH(h, root)) const output = ` - export default function Component({ html }) { + export default function Component({ html, state = {} }) { + ${getAttrSyntax(node)} return html\` ${functionBody} \` @@ -37,8 +38,14 @@ export const enhanceSFC = async (node: HtmlNode) => { export const getAttrSyntax = (value: HtmlNode) => { const slots = getSlots(value) + + if (!slots.length) { + return '' + } + const props = slots.map((slot) => kebabCase(slot.name)).join(', ') const attrString = props.length ? `{ ${props} }` : '' + return ` const { attrs } = state const ${attrString} = attrs diff --git a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts index dcdab615..9ffe5256 100644 --- a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts +++ b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts @@ -19,10 +19,12 @@ export const editorSchemaToHast = (node: any, options?: Options) => { } const processedTree = unified() + .use(convertComponentsToHast) + // @ts-ignore .use(attributesToProperties) .use(moveStyleToProperties as any) + // @ts-ignore .use(removeProperties, { propertiesToRemove }) - .use(convertComponentsToHast) .use(() => (tree) => { if (options?.addSlotSyntax) { visit(tree, 'slot', (node) => { diff --git a/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts b/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts index d370b4f6..01f8f6d1 100644 --- a/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts +++ b/packages/gui/src/lib/transformers/plugins/convert-components-to-hast.ts @@ -4,5 +4,9 @@ export const convertComponentsToHast = () => (tree: any) => { visit(tree, 'component', (node) => { node.type = 'element' node.component = true + node.attributes = { + ...node.attributes, + ...node.value.attributes, + } }) } From 8e75f0c4a2c4460032f89be884be3247d0097e31 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 15 Sep 2022 21:30:15 +0000 Subject: [PATCH 086/128] Version Packages --- .changeset/silly-dots-love.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/silly-dots-love.md diff --git a/.changeset/silly-dots-love.md b/.changeset/silly-dots-love.md deleted file mode 100644 index 88b91f79..00000000 --- a/.changeset/silly-dots-love.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Include attributes in enhance export diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index b2a2f8e8..bd7ec3be 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.236 + +### Patch Changes + +- 38996b16: Include attributes in enhance export + ## 0.0.235 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index 26e3e4c8..b31f3fe4 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.235", + "version": "0.0.236", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 263b9b23cd2227993619627bdc670121ff754654 Mon Sep 17 00:00:00 2001 From: John Otander Date: Fri, 16 Sep 2022 15:57:17 -0600 Subject: [PATCH 087/128] Move getAttrSyntax to util --- .changeset/selfish-apricots-stare.md | 5 +++++ packages/gui/src/lib/codegen/enhance-sfc.ts | 19 +------------------ packages/gui/src/lib/codegen/util.ts | 16 ++++++++++++++++ 3 files changed, 22 insertions(+), 18 deletions(-) create mode 100644 .changeset/selfish-apricots-stare.md diff --git a/.changeset/selfish-apricots-stare.md b/.changeset/selfish-apricots-stare.md new file mode 100644 index 00000000..d973afdd --- /dev/null +++ b/.changeset/selfish-apricots-stare.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Move getAttrSyntax to util diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts index 44a805e2..068145b8 100644 --- a/packages/gui/src/lib/codegen/enhance-sfc.ts +++ b/packages/gui/src/lib/codegen/enhance-sfc.ts @@ -5,8 +5,7 @@ import { toCSSObject } from './to-css-object' import { stringifyHastNode } from './stringify-hast-node-as-html' import { toReactProps } from './to-react-props' import { format } from './format' -import { getSlots } from './util' -import { kebabCase } from 'lodash-es' +import { getAttrSyntax } from './util' const h = (tagName: string, props: any, children?: any[]) => { const newProps = toReactProps(props) @@ -35,19 +34,3 @@ export const enhanceSFC = async (node: HtmlNode) => { return format('js', output) } - -export const getAttrSyntax = (value: HtmlNode) => { - const slots = getSlots(value) - - if (!slots.length) { - return '' - } - - const props = slots.map((slot) => kebabCase(slot.name)).join(', ') - const attrString = props.length ? `{ ${props} }` : '' - - return ` - const { attrs } = state - const ${attrString} = attrs - ` -} diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts index 55073671..d9ac9a46 100644 --- a/packages/gui/src/lib/codegen/util.ts +++ b/packages/gui/src/lib/codegen/util.ts @@ -54,3 +54,19 @@ export const stringifySlotInProp = (value: any, outerProps: any) => { export const isText = (value: HtmlNode) => value?.type === 'text' export const isSlot = (value: HtmlNode) => value?.type === 'slot' + +export const getAttrSyntax = (value: HtmlNode) => { + const slots = getSlots(value) + + if (!slots.length) { + return '' + } + + const props = slots.map((slot) => kebabCase(slot.name)).join(', ') + const attrString = props.length ? `{ ${props} }` : '' + + return ` + const { attrs } = state + const ${attrString} = attrs + ` +} From f0d931d2947b6a3db947a577c34aade964ec1cd8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 16 Sep 2022 21:58:04 +0000 Subject: [PATCH 088/128] Version Packages --- .changeset/selfish-apricots-stare.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/selfish-apricots-stare.md diff --git a/.changeset/selfish-apricots-stare.md b/.changeset/selfish-apricots-stare.md deleted file mode 100644 index d973afdd..00000000 --- a/.changeset/selfish-apricots-stare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Move getAttrSyntax to util diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index bd7ec3be..462d529a 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.237 + +### Patch Changes + +- 263b9b23: Move getAttrSyntax to util + ## 0.0.236 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index b31f3fe4..dd797838 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.236", + "version": "0.0.237", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 700259d1dc28e2f42909639d0dc02f6df23ab8e4 Mon Sep 17 00:00:00 2001 From: John Otander Date: Mon, 19 Sep 2022 15:54:54 -0600 Subject: [PATCH 089/128] Make sure all code generators are passed theme in export Related to #616 --- .changeset/cold-kids-refuse.md | 5 ++++ packages/gui/src/lib/codegen/emotion.ts | 5 ++-- packages/gui/src/lib/codegen/enhance-sfc.ts | 10 ++++--- packages/gui/src/lib/codegen/html.ts | 7 ++--- packages/gui/src/lib/codegen/react.ts | 8 ++++-- packages/gui/src/lib/codegen/styled-jsx.ts | 8 ++++-- packages/gui/src/lib/codegen/theme-ui.ts | 28 +++++++++++-------- packages/gui/src/lib/codegen/to-css-object.ts | 26 +++++++++-------- packages/gui/src/lib/codegen/types.ts | 4 +++ packages/gui/src/lib/codegen/vue.ts | 5 ++-- 10 files changed, 67 insertions(+), 39 deletions(-) create mode 100644 .changeset/cold-kids-refuse.md create mode 100644 packages/gui/src/lib/codegen/types.ts diff --git a/.changeset/cold-kids-refuse.md b/.changeset/cold-kids-refuse.md new file mode 100644 index 00000000..fc36fee4 --- /dev/null +++ b/.changeset/cold-kids-refuse.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Make sure all code generators are passed theme in export diff --git a/packages/gui/src/lib/codegen/emotion.ts b/packages/gui/src/lib/codegen/emotion.ts index 93422862..6e1cbcbf 100644 --- a/packages/gui/src/lib/codegen/emotion.ts +++ b/packages/gui/src/lib/codegen/emotion.ts @@ -7,6 +7,7 @@ import { toReactProps } from './to-react-props' import { format } from './format' import { getPropSyntax } from './util' import { Theme } from '../../types/theme' +import { CodegenOptions } from './types' const h = (theme?: Theme) => (tagName: string, props: any, children?: any[]) => { @@ -21,9 +22,9 @@ const h = return { tagName, props: newProps, children } } -export const emotion = async (node: HtmlNode, options: any) => { +export const emotion = async (node: HtmlNode, options: CodegenOptions) => { const root = editorSchemaToHast(node, { addSlotSyntax: true }) - const functionBody = stringifyHastNode(toH(h(options.theme), root)) + const functionBody = stringifyHastNode(toH(h(options?.theme), root)) const output = ` /** @jsxImportSource @emotion/react */ diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts index 068145b8..28e242ff 100644 --- a/packages/gui/src/lib/codegen/enhance-sfc.ts +++ b/packages/gui/src/lib/codegen/enhance-sfc.ts @@ -6,22 +6,24 @@ import { stringifyHastNode } from './stringify-hast-node-as-html' import { toReactProps } from './to-react-props' import { format } from './format' import { getAttrSyntax } from './util' +import { CodegenOptions } from './types' +import { Theme } from '../../types/theme' -const h = (tagName: string, props: any, children?: any[]) => { +const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => { const newProps = toReactProps(props) if (newProps.style) { const style = newProps.style delete newProps.style - newProps.style = toCSSObject(style) + newProps.style = toCSSObject(style, theme) } return { tagName, props: newProps, children } } -export const enhanceSFC = async (node: HtmlNode) => { +export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => { const root = editorSchemaToHast(node, { addSlotTagSyntax: true }) - const functionBody = stringifyHastNode(toH(h, root)) + const functionBody = stringifyHastNode(toH(h(options?.theme), root)) const output = ` export default function Component({ html, state = {} }) { diff --git a/packages/gui/src/lib/codegen/html.ts b/packages/gui/src/lib/codegen/html.ts index 9ea22375..10dd729c 100644 --- a/packages/gui/src/lib/codegen/html.ts +++ b/packages/gui/src/lib/codegen/html.ts @@ -3,6 +3,7 @@ import rehypeStringify from 'rehype-stringify' import { HtmlNode } from '../../components/html/types' import { editorSchemaToHast } from '../transformers/editor-schema-to-hast' import { format } from './format' +import { CodegenOptions } from './types' export const unstyledHtml = async (node: HtmlNode) => { const root = editorSchemaToHast(node, { @@ -12,11 +13,7 @@ export const unstyledHtml = async (node: HtmlNode) => { return format('html', output) } -type HTMLOptions = { - selector?: string - theme?: any -} -export const html = async (node: HtmlNode, { theme }: HTMLOptions = {}) => { +export const html = async (node: HtmlNode, { theme }: CodegenOptions = {}) => { const res = await fetch('https://components.ai/api/v1/gui/export/html', { method: 'POST', headers: { diff --git a/packages/gui/src/lib/codegen/react.ts b/packages/gui/src/lib/codegen/react.ts index 1c215676..c7aebd5e 100644 --- a/packages/gui/src/lib/codegen/react.ts +++ b/packages/gui/src/lib/codegen/react.ts @@ -5,6 +5,7 @@ import { format } from './format' import { html as toHtml } from './html' import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' +import { CodegenOptions } from './types' const h = (tagName: string, props: any, children?: any[]) => { const newProps = toReactProps(props) @@ -12,8 +13,11 @@ const h = (tagName: string, props: any, children?: any[]) => { return { tagName, props: newProps, children } } -export const react = async (node: HtmlNode): Promise => { - const html = await toHtml(node) +export const react = async ( + node: HtmlNode, + options: CodegenOptions +): Promise => { + const html = await toHtml(node, options) const { styles } = await extractStyles(html) const jsx = stringifyHastNode(toH(h, node as any)) diff --git a/packages/gui/src/lib/codegen/styled-jsx.ts b/packages/gui/src/lib/codegen/styled-jsx.ts index 0a048a4e..f80d064a 100644 --- a/packages/gui/src/lib/codegen/styled-jsx.ts +++ b/packages/gui/src/lib/codegen/styled-jsx.ts @@ -5,6 +5,7 @@ import { format } from './format' import { html as toHtml } from './html' import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' +import { CodegenOptions } from './types' const h = (tagName: string, props: any, children?: any[]) => { const newProps = toReactProps(props) @@ -12,8 +13,11 @@ const h = (tagName: string, props: any, children?: any[]) => { return { tagName, props: newProps, children } } -export const styledJsx = async (node: HtmlNode): Promise => { - const html = await toHtml(node) +export const styledJsx = async ( + node: HtmlNode, + options: CodegenOptions +): Promise => { + const html = await toHtml(node, options) const { styles } = await extractStyles(html) const jsx = stringifyHastNode(toH(h, node as any)) diff --git a/packages/gui/src/lib/codegen/theme-ui.ts b/packages/gui/src/lib/codegen/theme-ui.ts index 8c7b357c..375973ab 100644 --- a/packages/gui/src/lib/codegen/theme-ui.ts +++ b/packages/gui/src/lib/codegen/theme-ui.ts @@ -6,22 +6,28 @@ import { stringifyHastNode } from './stringify-hast-node-as-jsx' import { toReactProps } from './to-react-props' import { format } from './format' import { getPropSyntax } from './util' +import { CodegenOptions } from './types' +import { Theme } from '../../types/theme' -const h = (tagName: string, props: any, children?: any[]) => { - const newProps = toReactProps(props) +const h = + (theme?: Theme) => (tagName: string, props: any, children?: any[]) => { + const newProps = toReactProps(props) - if (newProps.style) { - const style = newProps.style - delete newProps.style - newProps.sx = toCSSObject(style) - } + if (newProps.style) { + const style = newProps.style + delete newProps.style + newProps.sx = toCSSObject(style, theme) + } - return { tagName, props: newProps, children } -} + return { tagName, props: newProps, children } + } -export const themeUI = async (node: HtmlNode) => { +export const themeUI = async ( + node: HtmlNode, + { theme }: CodegenOptions = {} +) => { const root = editorSchemaToHast(node, { addSlotSyntax: true }) - const functionBody = stringifyHastNode(toH(h, root)) + const functionBody = stringifyHastNode(toH(h(theme), root)) const output = ` /** @jsxImportSource theme-ui */ diff --git a/packages/gui/src/lib/codegen/to-css-object.ts b/packages/gui/src/lib/codegen/to-css-object.ts index 9482ea0c..2d8fe635 100644 --- a/packages/gui/src/lib/codegen/to-css-object.ts +++ b/packages/gui/src/lib/codegen/to-css-object.ts @@ -23,18 +23,22 @@ export const stringifyProperty = ( type StyleEntry = [string, Length | string | null | undefined] export const toCSSObject = (providedStyles: Styles, theme?: Theme): any => { const styles = stylesToEditorSchema(providedStyles) - // @ts-ignore - return Object.entries(styles).reduce((acc: Styles, curr: StyleEntry) => { - const [property, value] = curr - if (isNestedSelector(property.replace(/^:+/, ''))) { + const cssObject = Object.entries(styles).reduce( + // @ts-ignore + (acc: Styles, curr: StyleEntry) => { + const [property, value] = curr + if (isNestedSelector(property.replace(/^:+/, ''))) { + return { + ...acc, + [stringifySelector(property)]: toCSSObject(value as Styles, theme), + } + } return { ...acc, - [stringifySelector(property)]: toCSSObject(value as Styles, theme), + [property]: stringifyProperty(property, value, theme), } - } - return { - ...acc, - [property]: stringifyProperty(property, value, theme), - } - }, {}) + }, + {} + ) + return cssObject } diff --git a/packages/gui/src/lib/codegen/types.ts b/packages/gui/src/lib/codegen/types.ts new file mode 100644 index 00000000..0f36468c --- /dev/null +++ b/packages/gui/src/lib/codegen/types.ts @@ -0,0 +1,4 @@ +export type CodegenOptions = { + selector?: string + theme?: any +} diff --git a/packages/gui/src/lib/codegen/vue.ts b/packages/gui/src/lib/codegen/vue.ts index b5ecc698..8ea08440 100644 --- a/packages/gui/src/lib/codegen/vue.ts +++ b/packages/gui/src/lib/codegen/vue.ts @@ -2,9 +2,10 @@ import { HtmlNode } from '../../components/html/types' import { extractStyles } from './extract-styles' import { format } from './format' import { html as toHtml } from './html' +import { CodegenOptions } from './types' -export const vue = async (node: HtmlNode) => { - const src = await toHtml(node) +export const vue = async (node: HtmlNode, options: CodegenOptions) => { + const src = await toHtml(node, options) const { html, styles } = await extractStyles(src) const output = ` From 91a072619e6656359c9d14df35eb75f489e5f405 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 19 Sep 2022 21:58:18 +0000 Subject: [PATCH 090/128] Version Packages --- .changeset/cold-kids-refuse.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/cold-kids-refuse.md diff --git a/.changeset/cold-kids-refuse.md b/.changeset/cold-kids-refuse.md deleted file mode 100644 index fc36fee4..00000000 --- a/.changeset/cold-kids-refuse.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Make sure all code generators are passed theme in export diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 462d529a..86faf81f 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.238 + +### Patch Changes + +- 700259d1: Make sure all code generators are passed theme in export + ## 0.0.237 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index dd797838..b49be98c 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.237", + "version": "0.0.238", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 8db98565264f3dce151853c55ac1d6eb34f77c8f Mon Sep 17 00:00:00 2001 From: John Otander Date: Wed, 21 Sep 2022 12:28:12 -0600 Subject: [PATCH 091/128] Use a style string rather than object Related to #616 and #617 Note: The style string will be replaced with a style element and proper CSS string in a PR later today. --- .changeset/strong-cheetahs-tap.md | 5 +++++ packages/gui/src/lib/codegen/stringify-css-object.ts | 2 +- packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts | 5 +++++ packages/gui/src/lib/codegen/util.ts | 2 ++ 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 .changeset/strong-cheetahs-tap.md diff --git a/.changeset/strong-cheetahs-tap.md b/.changeset/strong-cheetahs-tap.md new file mode 100644 index 00000000..f1afe217 --- /dev/null +++ b/.changeset/strong-cheetahs-tap.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Use style string and don't destructure slots as attrs diff --git a/packages/gui/src/lib/codegen/stringify-css-object.ts b/packages/gui/src/lib/codegen/stringify-css-object.ts index a7e0f63b..c17dad12 100644 --- a/packages/gui/src/lib/codegen/stringify-css-object.ts +++ b/packages/gui/src/lib/codegen/stringify-css-object.ts @@ -3,7 +3,7 @@ import { isCSSClass } from '../classes' import { isElement } from '../elements' import { isPseudo } from '../pseudos' -const objectToDecls = (obj: any): string => { +export const objectToDecls = (obj: any): string => { return Object.entries(obj) .map(([key, value]: [string, any]) => { return ` ${kebabCase(key)}: ${value};` diff --git a/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts index 77b4273b..5163f078 100644 --- a/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts +++ b/packages/gui/src/lib/codegen/stringify-hast-node-as-html.ts @@ -2,6 +2,7 @@ import { isArray, isNumber, isObject, kebabCase } from 'lodash-es' import escapeHtml from 'escape-html' import { isElement, isVoidElement } from '../elements' import { getSlots, isSlot } from './util' +import { objectToDecls } from './stringify-css-object' // TODO: This can, and should, be done at the AST level in the future export const formatTagName = (node: any) => { @@ -23,6 +24,10 @@ export const stringifyHastNode = (node: any) => { return node.value || node } + if (node.props.style) { + node.props.style = objectToDecls(node.props.style).trim() + } + if (isVoidElement(node.tagName)) { return `<${formatTagName(node)} ${stringifyProps(node.props)} />` } diff --git a/packages/gui/src/lib/codegen/util.ts b/packages/gui/src/lib/codegen/util.ts index d9ac9a46..3271aae6 100644 --- a/packages/gui/src/lib/codegen/util.ts +++ b/packages/gui/src/lib/codegen/util.ts @@ -55,7 +55,9 @@ export const stringifySlotInProp = (value: any, outerProps: any) => { export const isText = (value: HtmlNode) => value?.type === 'text' export const isSlot = (value: HtmlNode) => value?.type === 'slot' +// TODO: This should find attr slots only export const getAttrSyntax = (value: HtmlNode) => { + return '' const slots = getSlots(value) if (!slots.length) { From 7dc4f8e665f2df0719a8f5afe64c6e9693ed547e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 21 Sep 2022 18:30:49 +0000 Subject: [PATCH 092/128] Version Packages --- .changeset/strong-cheetahs-tap.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/strong-cheetahs-tap.md diff --git a/.changeset/strong-cheetahs-tap.md b/.changeset/strong-cheetahs-tap.md deleted file mode 100644 index f1afe217..00000000 --- a/.changeset/strong-cheetahs-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Use style string and don't destructure slots as attrs diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 86faf81f..5ef61e9e 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.239 + +### Patch Changes + +- 8db98565: Use style string and don't destructure slots as attrs + ## 0.0.238 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index b49be98c..54089b54 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.238", + "version": "0.0.239", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From 3d312157f0bc6ec9d11950623d3626beac7f10c8 Mon Sep 17 00:00:00 2001 From: John Otander Date: Wed, 21 Sep 2022 13:01:07 -0600 Subject: [PATCH 093/128] Add style element to enhance export Related to #616 and #617 --- .changeset/long-camels-study.md | 5 +++ packages/gui/package.json | 1 + packages/gui/src/lib/codegen/enhance-sfc.ts | 12 +++++- .../lib/transformers/editor-schema-to-hast.ts | 1 + .../inline-styles-to-style-element.ts | 42 +++++++++++++++++++ yarn.lock | 5 +++ 6 files changed, 64 insertions(+), 2 deletions(-) create mode 100644 .changeset/long-camels-study.md create mode 100644 packages/gui/src/lib/transformers/inline-styles-to-style-element.ts diff --git a/.changeset/long-camels-study.md b/.changeset/long-camels-study.md new file mode 100644 index 00000000..f4b11662 --- /dev/null +++ b/.changeset/long-camels-study.md @@ -0,0 +1,5 @@ +--- +'@compai/css-gui': patch +--- + +Add style element to enhance export diff --git a/packages/gui/package.json b/packages/gui/package.json index b49be98c..cea32bbb 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -41,6 +41,7 @@ "typescript": "^4.6.4" }, "dependencies": { + "@emotion/hash": "^0.9.0", "@emotion/react": "^11.9.0", "@mdx-js/react": "^1.6.22", "@radix-ui/react-accordion": "^0.1.6", diff --git a/packages/gui/src/lib/codegen/enhance-sfc.ts b/packages/gui/src/lib/codegen/enhance-sfc.ts index 28e242ff..373f40c3 100644 --- a/packages/gui/src/lib/codegen/enhance-sfc.ts +++ b/packages/gui/src/lib/codegen/enhance-sfc.ts @@ -8,6 +8,7 @@ import { format } from './format' import { getAttrSyntax } from './util' import { CodegenOptions } from './types' import { Theme } from '../../types/theme' +import { inlineStylesToStyleElement } from '../transformers/inline-styles-to-style-element' const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => { const newProps = toReactProps(props) @@ -23,13 +24,20 @@ const h = (theme: Theme) => (tagName: string, props: any, children?: any[]) => { export const enhanceSFC = async (node: HtmlNode, options: CodegenOptions) => { const root = editorSchemaToHast(node, { addSlotTagSyntax: true }) - const functionBody = stringifyHastNode(toH(h(options?.theme), root)) + const { node: htmlNode, styles } = inlineStylesToStyleElement(root) + // @ts-ignore + const functionBody = stringifyHastNode(toH(h(options?.theme), htmlNode)) + + const htmlString = ` + + ${functionBody}` + const formattedHtmlString = await format('html', htmlString) const output = ` export default function Component({ html, state = {} }) { ${getAttrSyntax(node)} return html\` - ${functionBody} + ${formattedHtmlString} \` } ` diff --git a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts index 9ffe5256..7bea0fe0 100644 --- a/packages/gui/src/lib/transformers/editor-schema-to-hast.ts +++ b/packages/gui/src/lib/transformers/editor-schema-to-hast.ts @@ -40,5 +40,6 @@ export const editorSchemaToHast = (node: any, options?: Options) => { } }) .runSync(cloneDeep(node)) + return processedTree } diff --git a/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts b/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts new file mode 100644 index 00000000..b38676ce --- /dev/null +++ b/packages/gui/src/lib/transformers/inline-styles-to-style-element.ts @@ -0,0 +1,42 @@ +import { cloneDeep } from 'lodash-es' +import { unified } from 'unified' +import { visit } from 'unist-util-visit' +import hash from '@emotion/hash' +import { stringifyCSSObject } from '../codegen/stringify-css-object' +import { toCSSObject } from '../codegen/to-css-object' +import { addCSSClassSyntax } from '../classes' + +export const inlineStylesToStyleElement = (node: any) => { + const styleMap: Record = {} + const processedTree = unified() + .use(() => (tree) => { + visit(tree, 'element', (node: any) => { + if (!node.properties.style) { + return + } + + const style = node.properties.style + // @ts-ignore + const selector = 'css-' + hash.default(JSON.stringify(style)) + + if (!node.properties.class) { + node.properties.class = selector + } else { + node.properties.class = node.properties.class + ' ' + selector + } + + delete node.properties.style + + styleMap[selector] = stringifyCSSObject( + toCSSObject(style), + addCSSClassSyntax(selector) + ) + }) + }) + .runSync(cloneDeep(node)) + + return { + node: processedTree, + styles: Object.values(styleMap).join('\n'), + } +} diff --git a/yarn.lock b/yarn.lock index 502416a6..c90a2ba6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -565,6 +565,11 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== +"@emotion/hash@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" + integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== + "@emotion/is-prop-valid@^0.8.1": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" From fdc25a42c236b02df7954b3e8e933b04e75660f2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 21 Sep 2022 19:03:33 +0000 Subject: [PATCH 094/128] Version Packages --- .changeset/long-camels-study.md | 5 ----- packages/gui/CHANGELOG.md | 6 ++++++ packages/gui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/long-camels-study.md diff --git a/.changeset/long-camels-study.md b/.changeset/long-camels-study.md deleted file mode 100644 index f4b11662..00000000 --- a/.changeset/long-camels-study.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@compai/css-gui': patch ---- - -Add style element to enhance export diff --git a/packages/gui/CHANGELOG.md b/packages/gui/CHANGELOG.md index 5ef61e9e..8614a9ee 100644 --- a/packages/gui/CHANGELOG.md +++ b/packages/gui/CHANGELOG.md @@ -1,5 +1,11 @@ # @compai/css-gui +## 0.0.240 + +### Patch Changes + +- 3d312157: Add style element to enhance export + ## 0.0.239 ### Patch Changes diff --git a/packages/gui/package.json b/packages/gui/package.json index e8cce204..9f73d1ca 100644 --- a/packages/gui/package.json +++ b/packages/gui/package.json @@ -1,6 +1,6 @@ { "name": "@compai/css-gui", - "version": "0.0.239", + "version": "0.0.240", "type": "module", "module": "./dist/index.js", "types": "./dist/index.d.ts", From ffdba21aa71ef6cb12d88d771c232b414afd2a71 Mon Sep 17 00:00:00 2001 From: mrmrs Date: Thu, 22 Sep 2022 13:28:45 -0700 Subject: [PATCH 095/128] Change http to https for video file Fixes #624 --- apps/docs/data/initial-html-editor-data.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/data/initial-html-editor-data.ts b/apps/docs/data/initial-html-editor-data.ts index d6ddd1ca..3064c830 100644 --- a/apps/docs/data/initial-html-editor-data.ts +++ b/apps/docs/data/initial-html-editor-data.ts @@ -164,7 +164,7 @@ export const initialValue: any = { tagName: 'video', attributes: { title: 'Video -