pair-team-app / design-engine-playground

Design Engine NPM Package

design-engine-playground

A CLI for syncing code components to design components in Adobe XD, Figma, & Sketch. Design Engine mirrors code components with design components for teams to consume & re-use keeping design systems intact.

Install

$ npm install design-engine-playground
$ npm link design-engine-playground

Add postbuild script to your package.json:

"postbuild": "design-engine-playground"

Usage

Design engine playground will automatically start after npm run build completes successfully.

A new playground will be created on its first run. Additionally, a new browser tab will open to the playground URL on first run.

Future builds will only display execution logs and your link to the playground URL

design-engine-playground's Issues

Determine minimal specs required from json to draw accurately & display metadata

functionality: render source files from scan in local headless chrome

Discard default / irrelevant CSS attributes from styles [NPM Module]

Check surrounding div structure, search for hidden elements

Cleanup git repos (gitignore / etc)

documentation: github readme page

Confirm we are capturing full pages and individual elements at mobile; desktop; tablet sizes

https://github.com/de-ai/design-engine-playground/issues/url

Encrypt Json object before sending from NPM module

functionality: when a new playground is created open a url with playground next to the local builds tab

Add support for checking if the user is paid or free [NPM Module]

Investigate: Node JS solution versus zipping where you run a local node server like puppetron or rendertron and extract the JSON locally before sending to server api

documentation: npm details page

functionality: scan local project for uncompiled local source files

NPM Module [EPIC]

Below are all the tasks to complete 1.0 of our NPM Module for XD submission.

• Component support for nested / multiple elements (DB / Plugin / NPM) https://github.com/de-ai/design-engine-playground/issues/26

• Run through 5 common screen sizes / device types. https://github.com/de-ai/design-engine-playground/issues/33

• Capture and crawl all available urls from entry page https://github.com/de-ai/design-engine-playground/issues/34

• Check surrounding div structure, search for hidden elements https://github.com/de-ai/design-engine-playground/issues/35

• Calculate paddings / margins / box model values https://github.com/de-ai/design-engine-playground/issues/29

• Parsing flexbox elements https://github.com/de-ai/design-engine-playground/issues/30

npm - source mapping

Source mapping webpack to component name associations, trim out non components, duplicate components

npm - log out command

Nested objects 2 levels

Parsing flexbox elements

functionality: package local uncompiled source files as zip for processing

Run through 5 common screen sizes / device types.

Capture and crawl all available urls from entry page

Update NPM description with new details and commands

Trimming duplicate objects and components from JSON before delivering to Plugin or Web

save accessibility tree

Component support for nested / multiple elements (DB / Plugin / NPM)

Figure out how to link + add postbuild to `package.json` on install [NPM Module]

npm command

npm comment for new build; command for update

/run pairurl

Figure out how to create a playground sub module that's imported from npm & url node parser

Update Design-Engine-Playground Github Readme

• Add npm banner + badges

npm individual events

Capture individual elements event states for Mouse events (15), Network events (2)

https://developer.mozilla.org/en-US/docs/Web/Events

npm: react projects

Locate 10 popular react applications and push from module to playground for testing + to see where we are breaking.

npm login flow

if the user is logged out every time they run the /pairurl command they will get a message to type /pairurllogin to login & to sign up by going to pairurl.com/signup

/pairurllogin
Enter Email Address
Enter Password
Error

Accessibility tree exposed into json object

Read / Investigate this code to design component read: https://www.designsystems.com/stack-mirroring-designing-for-code-and-coding-for-design/

Breakup single main.js file to more logical files / functions

npm module

Ability to connect Module to DE Account (sign in) [NPM Module]

Enter Website URL UI/UX Flow

Ability to remove URL with command [NPM Module]

Display accurate parsing results in output when module is finished

Shorthand CSS attribues (border / margin / etc) [NPM Module]

functionality: local data for projects to check if project is new or updating existing playground url

DB API Scheme

API Call should look like...

1. Loads main page default to "Pages": https://getobit.com/domain/hash/project-name
2. Loads entire section: https://getobit.com/domain/hash/project-name/section-name
3. Loads exact element: https://getobit.com/domain/hash/project-name/type-name/element-name
4. Loads exact element event: https://getobit.com/domain/hash/project-name/type-name/element-name/event-name
5. Loads exact element event: https://getobit.com/domain/hash/project-name/type-name/element-name/event-name/mode-type

Calculate paddings / margins / box model values

describe how the module will work in < 2 paragraphs in the NPM Module [EPIC]

https://github.com/de-ai/design-engine-playground/issues/13

deploy: host package on npm

If the users account is free and their signed in domain has more than 10 users add message to the output to pay

Finalize supported elements

npm: if my project is not official logged in prompt the user to do so. based on build

Investigate: how we are going to keep their code intact from when the NPM module delivers results