The paperclip from paperclip-ui

E.g: necessary for external services like Hubspot

[MTI] MVP

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

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).

page flow chart

redesign

Inspired by Spline

quick template + publish functionality

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

TD project file should contain environment

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

[] MTI Paperclip DSL 2.0

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

Look into state charts

ability to compile to CSS class instead of DOM presentational components

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.

Upgrade to React 18

Need to be considerate of REM

[MTI] Alpha

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

Enable functioning components in preview

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

[MTI] MVP

MVP for this is to combine Paperclip + Tandem.

TODOs:

Later:

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

Replace SCSS variables file with PC

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.

ability to Eject Tandem

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

PC 1.5

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

stress-test functionality

https://a.singlediv.com/

Use web components as a way to embed custom components

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:

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

conditional rendering

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

user flows

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.

Deploy to specific services

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.

Philosophies

Just some things to keep in mind when building Tandem out

Ability to embed Paperclip templates in JSX code?

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.

Edit staging server UIs on the spot

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

i18n support

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).

`assetsDirectory` option for project config

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.

ability to register native elements for preview

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.

surgical edits to synthetic DOM

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.

Explicitly reference exported atoms from other files

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.

PC <> Tandem bridge

Collaboration

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

Figma plugin

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

previews of components should be screenshot

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

[MTI] Paperclip 1.5

Pseudocode

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


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

TODOs:

Include Paperclip runtime engine

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).