paperclip-ui / paperclip Goto Github PK

The goal for this stage is to get Tandem to a state where it's accessible online, and starts moving more towards a UX that's friendly for designers.

• ability to connect GitHub account
  • "source of truth" code should be adaptable to any system
• ability to change branches in Tandem
• ability to commit changes in Tandem
• GitHub badge whenever a PC file changes - ability to open PRs online

Pseudocode

<style>
  @trigger mobile {
    @media and (max-width: 100px) {
      @content;
    }
    .mobile {
      @content;
    }
  }
</style>


<div>
  <style>
    font-family: red;
    @if mobile {
    }
  </style>
</div>

TODOs:

Basically a web component wrapper that enables anyone to embed custom component logic into the preview canvas. Compiling will also need to be a consideration here. Some options:

1. Additional information about web component that tells compiler how to transform into target framework
2. information specified in project config that tells how to transform custom components.

Deploy to:

• Hubspot
• Wordpress

A lot of companies are already invested in existing tech, so need to figure out how to build tools around these existing services.

Ideally there would be an i18n module that could be loaded in, and displayed visually in the editor (not just in the preview).

Though, I think that this may make it difficult to use the Rust engine. JS may be the best approach here (at least for MVP).

What if there are multiple layers with the same label? What if a designer re-organizes layers? I think it may make more sense to use explicit props

• coverage > 90%
• Jest tests for the designer

Similar to Framer, this would be useful in combination with Figma

... Or something similar. This could potentially be very expensive if we're loading the entire dependency graph into the editor.

Preferably using exported atoms defined in PC files using existing syntax. The PC file should also optionally be translatable to SCSS, JSON, JavaScript, and other formats. Immediate sense is that this should be doable if we pull exported code out of PC files.

Inspired by Spline

• use Immer for updating objects
• re-organize reducer code
• make Redux actions more type-safe
• redux state should contain virtual DOM, not actual DOM
• Delete SASS code
• change classes to React

Copy + paste functionality from Figma to Tandem. This should be similar to how Framer does it.

There should be an extension for Tandem that enables non-engineers to edit UIs on the spot

This will be used with:

• Quick search
• component navigator

We can throw all components in a single page and then take a snapshot of that

Environment should specify rules, like should it be possible for people to attach controllers? This should be specific to the target environment.

I think the synthetic DOM can be edited based on mutations that occur since there aren't any computed props. This should increase performance by an order of magnitude.

This could enable custom elements + plugins to be rendered in the preview. Will also need to be able to expose props that can be passed into these native elements.

https://a.singlediv.com/

E.g: necessary for external services like Hubspot

MVP for this is to combine Paperclip + Tandem.

TODOs:

• Clean up
  • Move Paperclip to this repository (packages/paperclip)
• Tandem
  • Support combination variants
  • update rendering engine to use Paperclip
  • Variant triggers should get an overhaul & use DSL 2.0 ideas (selectors = triggers)
  • Changes to JSON graph should be reflected in Paperclip (serialized form)
• Paperclip
  • Deprecate CSS selectors in favor of triggers
  • @trigger keyword
  • @if keyword
  • @target keyword
  • Update engine to emit JSON graph for Tandem

Later:

• Tandem
  • Refactor to new UI using new DSL features (combo variants)
  • Copy + paste functionality from Figma

Look at tailwind config and see how something like this can be used for atomic values

At a bare minimum, we just need to close the gap between Paperclip 1.5 and the visual editor. We can maintain a similar UX to the current VS Code extension.

• Get Tandem to work with Paperclip 1.5
  • Serializer - interim format should be used
• Update VS Code extension
  • Preview should be in browser vs embedded
• test suite

Integration:

• Refactor Hum UIs to use 1.5 format

Rationale for this is that native elements are interactive. What's keeping the designer from having custom components in the designer (Framer style)?

Right now all text nodes are wrapped in spans. This needs to change.

Or basically something that allows people to work out of the same file vs having two separate files. Maybe go in the direction of allowing scripts to be embedded in PC files, much like Vue.

This would be particularly useful for existing libraries for custom styling - individual components, and even design systems. Tandem could be used to add custom styles to these existing libraries.

Maybe this could be an extension for Tandem? Something that allows users to add custom props to any DIV element -- this could be something like a metadata field that takes a key/value pair. The editor could load plugins apply a schema to element metadata fields that could be editable in the behavior tab of any div element. A plugin like this could be paired with a compiler that takes these fields and compiles them down to the target language.

☝️ this is tricky behavior b/c plugin architectures are a shit-show to manage. Maybe something like this could be built-in for now? E.g: allow for people to define metadata, and then allow third-party libraries to use that info to compile PC templates.

Essentially { show && "show this" }. This is necessary to prevent unnecessary re-renders.

Similar to how Figma works, we should do-away with global variables that are stored in a single panel. This is for organization + making it easier to refactor.

Considerations:

• done in TypeScript, with Rust in the purview to ensure that it can be added at a later point
• need to consider how to use generalized imported functions as transformers for various languages
• Annotations for visual information. Ensure that designer-specific stuff is kept separate from langauge specific.
• Possibly use text rep as starting point, then just manipulating AST after that
• CRDTs as another considerations for synchronizing AST nodes
  • IDs may need special signature to ensure that they don't collide when incrementally generated. This could create obscure IDs.

Obvious parts:

• AST is at least obvious and can be worked on
• Translator is less obvious

Stress testing:

• need to translate designs

Just some things to keep in mind when building Tandem out

Some way to add logic to UIs visually. This would be particularly useful for areas of the application that are less complicated and can be built visually, such as an onboarding flow.

Not necessary right now, but at some point we'll want to use the Rust engine on the front-end instead of JavaScript. This would be a bit of a lift since the data model is a bit different.

Main TODOs here are:

• Update Rust engine to use JSON structure instead of source
  • Alternatively, we can serialize the JSON structure back to code & then run that. This might be a better option since we'll need to parse other things anyways (CSS mainly).

When dragging & dropping assets to the editor, or pasting from somewhere else like Figma, assets should be uploaded to a common directory pulled from the project config.

• https://nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/

I think there should be the ability to eject UIs to target libraries, like SASS, styled-components, emotion. This code could also be used to integrate with these other libraries.

Considerations

• PC changes how CSS behaves

Effort is high since this would require a central server (since CRDT ids would need to be maintained for a session)

Something worth exploring, but I think it may be important to allow apps to be built end-to-end within Tandem - not to the degree of actually coding, but giving people building blocks to build apps without needing to jump into code.

A simple example of this is being able to create a website and to be able to link to other pages without needing to wire anything up with code.

Another example is being able to bind data to elements in the canvas from an external source (CMS).

Goal for this ticket is to get PC closer to something that's compatible with Tandem. PC will still contain more features that are available in the UI -- that's not the goal here. Instead, we need to look at various UI features and build them into the language.

Considerations:

• Global variables, and triggers (media queries)
• style overrides
• slots
• toggling variants of nested instances?
• mixins
• CSS vars

PC Considerations:

• CSS files should still be loadable to ensure compatibility with frameworks.

Changes that can be imposed on the editor:

• ID props should be explicit
• All exported variables and such should be scanned and displayed in a global pane instead of having global variables

Changes imposed on Paperclip:

• PC file styles should use different parser, and only allow syntax that's compatible with Tandem?
  • perhaps allow CSS, but don't expose it to the editor (only runtime version of this).
    • This would enable developers to do special things to nested elements. E.g: & > :global(*) { flex: 1; }
      • This should display warning?
• @variant syntax

Exercises:

• Look at existing PC files and figure out how they can be translated to new syntax

Litmus test:

• New designer should load with changes, but not function

Some kind of online functionality for forking templates, and publishing websites really quickly. E.g: https://carrd.co