uimix-editor / uimix Goto Github PK

View Code? Open in Web Editor NEW

424.0 4.0 17.0 14.04 MB

A WYSIWYG React component builder 🚧 Very work-in-progress

Home Page: https://uimix-editor.vercel.app/

License: MIT License

HTML 0.23% TypeScript 97.98% JavaScript 1.35% CSS 0.43%

css design-to-code html javascript low-code no-code ui-components react

uimix's Introduction

UIMix

Macaron is rebranding to UIMix and is under active development. The old version is still available at the links below.

Old Branch

Old Website

UIMix is a WYSIWYG editor for React components that offers a Figma or Framer-like experience for creating and maintaining React components.

It aims to bridge the gap between modern design tools / no-code web builders and modern front-end development, by combining their strengths.

🚧 Very work-in-progress, do not use in production!

Roadmap

Freehand editing equivalent to Figma / Framer
Launch the locally-running editor from CLI
Emit React components with types that can be easily overridden
Import React components directly into the editor

Potential plans

Sync with Figma files
Collaborative editing
Support other frameworks and Web Components
Publish as a cloud service, enabling non-developers to utilize the platform
Managed website hosting that offers a complete no-code starting point for new projects, with the ability to gradually integrate code as needed
Publish as a WYSIWYG editor library

Build Figma plugin and VSCode extension

git clone --recursive [email protected]:uimix-editor/uimix.git
cd uimix
pnpm install
pnpm build
pnpm package

Figma plugin: packages/figma/uimix-figma-plugin.zip
VSCode extension: packages/vscode/uimix-vscode-{version}.vsix

uimix's People

Stargazers

Watchers

Forkers

linrstudio natsuhikok primekobodevlopement armenr keyzf cgb-lowcode2022 aprilnic zthomas cleverveil ae9is linhtutkyawdev garaujo-edumobi cavaco-inaki abaso007 deokgyuhan 12888950s floryvibla

uimix's Issues

Add min-content/max-content/fit-content to dimension dropdown

Key bindings for tools

Implement Figma-like key bindings

F: Frame
T: Text
...

Description

Import other files' components and CSS variables

<!-- prepend this to a .macaron file -->
<script type="module" src="./other.macaron"></script>

Motivation

Split a large file to smaller ones
Reuse common CSS variables (color palettes etc) across files

Description

Add "auto-export" mode to the editor

The editor will automatically emits JavaScript when a .macaron file is changed or opened.

Motivation

Make it easier to start using Macaron
- You won't need to install @macaron-elements/compiler
Improve experience for those who just want to create static HTML pages with Macaron (without setting up build systems)

Description

Copy & paste styles of an element (not an element itself) to another element

Same as Figma's "Copy Properties (Command+Alt+C)" and "Paste Properties (Command+Alt+V)"

Motivation

Make it more effortless to refactor DOM structure

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/node.js.yml

actions/checkout v2

actions/setup-node v2

GabrielBB/xvfb-action v1

npm

package.json

lerna 5.1.1

wsrun 5.2.4

packages/compiler/package.json

chokidar ^3.5.3

prettier ^2.6.2

slash ^4.0.0

@types/chokidar 2.1.3

@types/glob 7.2.0

@types/hast 2.3.4

@types/minimatch 3.0.5

@types/prettier 2.6.3

@types/shelljs 0.8.11

commander 9.3.0

dedent 0.7.0

glob 8.0.3

hast-util-from-parse5 7.1.0

hast-util-to-html 8.0.3

lodash-es 4.17.21

minimatch 5.1.0

parse5 7.0.0

prettier 2.6.2

replace-css-url 1.2.6

shelljs 0.8.5

tmp-promise 3.0.3

vitest 0.13.1

packages/docs/package.json

@macaron-elements/compiler *

codemirror 5.65.5

iconify-icon 0.0.6

monaco-editor 0.33.0

ua-parser-js 1.0.2

@macaron-elements/editor *

@macaron-elements/loader-vite *

macaron-vscode *

vitepress 1.0.0-alpha.1

packages/editor/package.json

@iconify-icons/ic 1.2.5

@iconify/json 2.1.56

@iconify/react 3.2.2

@iconify/types 1.1.0

@seanchas116/paintkit *

@timohausmann/quadtree-ts 2.0.0-beta.1

@tippyjs/react 4.2.6

@types/codemirror 5.60.5

@types/hast 2.3.4

@types/lodash-es 4.17.6

@types/vscode-webview 1.57.0

codemirror 5.65.5

comlink 4.3.1

css-what 6.1.0

dedent 0.7.0

hast-util-from-parse5 7.1.0

hast-util-to-html 8.0.3

hastscript 7.0.2

html-tags 3.2.0

lodash-es 4.17.21

mobx 6.6.0

mobx-react-lite 3.4.0

paintvec 0.4.0

parse5 7.0.0

postcss 8.4.14

prettier 2.6.2

property-information 6.1.1

react 18.1.0

react-dom 18.1.0

rehype-minify-whitespace 5.0.1

remote-methods 1.0.1

replace-css-url 1.2.6

scroll-into-view-if-needed 2.2.29

short-uuid 4.2.0

styled-components 5.3.5

tiny-typed-emitter 2.1.0

tippy.js 6.3.7

unified 10.1.2

unist-util-inspect 7.0.0

validate-element-name 3.0.0

@esbuild-plugins/node-globals-polyfill 0.1.1

@esbuild-plugins/node-modules-polyfill 0.1.4

@types/react 18.0.10

@types/react-dom 18.0.5

@types/styled-components 5.1.25

@types/wicg-file-system-access 2020.9.5

@vitejs/plugin-react 1.3.2

css-loader 6.7.1

rollup-plugin-node-polyfills 0.2.1

style-loader 3.3.1

ts-loader 9.3.0

typescript 4.7.2

vite 2.9.9

vitest 0.13.1

packages/figma/package.json

@types/hast 2.3.4

buffer 6.0.3

csstype 3.1.0

hastscript 7.0.2

svg-parser 2.0.4

@figma/plugin-typings *

@macaron-elements/loader-vite *

concurrently 7.2.1

esbuild 0.14.42

prettier 2.6.2

typescript 4.7.2

vite 2.9.9

vite-plugin-singlefile 0.9.0

vite-svg-loader 3.3.0

packages/loader-vite/package.json

@macaron-elements/compiler ^0.1.1

packages/test-project/package.json

@macaron-elements/compiler *

serve 13.0.2

npm-run-all 4.1.5

packages/vscode/package.json

@types/lodash 4.14.182

@types/serve-handler 6.1.1

comlink 4.3.1

globby 13.1.1

lodash 4.17.21

remote-methods 1.0.1

serve-handler 6.1.3

@macaron-elements/editor *

@types/glob 7.2.0

@types/mocha 9.1.1

@types/node 17.0.38

@types/vscode 1.67.0

@typescript-eslint/eslint-plugin 5.27.0

@typescript-eslint/parser 5.27.0

@vscode/test-electron 2.1.3

esbuild 0.14.42

eslint 8.16.0

glob 8.0.3

mocha 10.0.0

typescript 4.7.2

vsce 2.9.1

vscode ^1.67.0

Check this box to trigger a request for Renovate to run again on this repository

Add icons to cursor select

Cursor icons in Material Design Icons look good:

https://icon-sets.iconify.design/mdi/cursor-default/

Tailwind overrides border values in `:host` of Macaron components

Description

Tailwind Preflight overrides border values of Macaron components

Save separate image files when pasting from Figma

Description

The Macaron Figma plugin embeds image data into data: URLs when copying Figma layers.
In the Macaron editor they should be extracted out to separate image files.

Copy from component browser

Right-click the component thumbnail
Choose Copy
Paste in the editor

Description

Make use of custom-elements.json, which is defined in custom-elements-manifest

Emit custom-elements.json
Generate metadata from custom-elements.json of external component libraries

Support CSS variables that are not included in output

Description

Support adding CSS variables that are not included in the exported code

Use cases

Theme colors that come from outside
- This repository already has a lot of potential use cases: VitePress / Figma plugin / VS Code extension etc
Implementing light/dark mode toggle outside Macaron

Description

Allows editing of custom CSS properties that are not yet supported by the inspector UI

Paste text as HTML/SVG snippet

Detect if text is HTML/SVG and paste as nodes
- https://github.com/sindresorhus/is-svg
- https://github.com/sindresorhus/is-html
Copy nodes as HTML/SVG?

installation error

when i try install : pnpm install; i get this error:

\uimix-main\uimix-main\packages\dashboard:
ERR_PNPM_WORKSPACE_PKG_NOT_FOUND In packages\dashboard: "paintvec@workspace:*" is in the dependencies but no package named "paintvec" is present in the workspace

Disallow setting IDs that differ only in casing

Macaron currently allows setting IDs that differ only in casing for elements in the same component.

This causes styling problems because CSS IDs are case-insensitive.

Per-element pseudoclass effects (`:hover` etc)

The default `position:` of the component root should be `relative`

Reduce confusion when you add an element with an absolute position to a newly created component

(Currently you need to manually set the position of the root style to absolute to place the element correctly)

Drop image files onto editor

VS Code now supports dropping files onto custom editors

Specify default font for document

Description

Make it able to specify a default font family for a document (.macaron file)
The sepcified font family is not exported.

Why

Per-component font family declarations are often unneccesary
Set font family outside Macaron (probably in body or in an ancestor element)

Add Discord badge to the readme

https://shields.io/

Import Web Components to editor from Vite (or other devservers)

Description

Add ability to import Web Components from Vite devserver

Motivation

Import Web Components created in the same project
This would be convenient especially if you are using Vue or Svelte to implement Web Components

Implement Eyedropper in color picker

Use Eyedropper API

Select all (Ctrl/Command + A)

Add a functionality to select all elements/components

What to select?
- Select all siblings of the currently selected nodes (what Figma does)

Activate media query variants in component instances based on variant artboard width

Motivation

Better experience of designing nested responsive components:

my-card (has responsive design)
my-page (has responsive design)
- my-card is used inside

Standalone loader like @babel/standalone

Description

Import .macaron files directly without setting up Vite
Simliar to @babel/standalone

How to use

Add index.html
Add the following:

<script type="module" src="cdn/to/@macaron-elements/standalone"></script>

<!-- import .macaron -->
<script type="text/macaron" src="./components.macaron"></script>

<!-- use component -->
<my-component></my-component>

Launch a server (e.g., VS Code Live Server)

Hoist text styles

Description

Simplify styles by hoisting same text styles to the root

Editor feature to do hoisting
Auto hoisting in Figma plugin

Description

Expose attributes and events of inner elements

(For forms etc)

Example (React)

<my-form name--value={name} onname--change={setName} onsubmit--click={submit} />

https://codesandbox.io/s/sweet-sound-8goyrf?file=/src/App.tsx

(React 19 will support decrative syntax for subscribing custom element events)

Use cases

Change the cursor of a button to cursor: pointer

uimix-editor / uimix Goto Github PK

uimix's Introduction

UIMix

Roadmap

Potential plans

Build Figma plugin and VSCode extension

uimix's People

Stargazers

Watchers

Forkers

uimix's Issues

Description

Motivation

Description

Motivation

Description

Motivation

Rate Limited

Open

Detected dependencies

Description

Description

Description

Description

Use cases

Description

Description

Why

Description

Motivation

Motivation

Description

How to use

Description

Description

Example (React)

Use cases

Recommend Projects

Recommend Topics

Recommend Org