Built with ❤️ by
Mechanic is a powerful design toolchain that helps forward-looking organizations move away from a manual design workflow by automating their design operations.
CURRENT STATUS: v1.2.0 is out now! Try it and tell us what you think! v2.0.0-beta.9 is also out and we're testing it! Feel free to test it out too!
To start using right away and create a new Mechanic project, run the following:
npm init mechanic@latest
This will build a new base Mechanic project, with one design function! Follow the CLI instructions to customize, install and start running.
Check out v1.2.0 documentation.
The repo is managed via lerna.
| Repository | Description |
|---|---|
| create-mechanic | Mechanic project skeleton creator. |
| @mechanic-design/cli | Command-line tool to generate new Mechanic projects, design functions and build app. |
| @mechanic-design/core | Core Mechanic functionalities. Used by Mechanic's design tools and defines Mechanic class to be extended as Engines. |
| @mechanic-design/ui-components | React component library intended to be used as inputs for design function inputs. |
| @mechanic-design/engine-canvas | Engine function that extends base Mechanic class, intended to render static assets or animations built using the HTML Canvas API. |
| @mechanic-design/engine-p5 | Engine function that extends base Mechanic class, intended to render static assets or animations built using p5.js. |
| @mechanic-design/engine-react | Engine function that extends base Mechanic class, intended to render static assets or animations built using React components that renders SVG. |
| @mechanic-design/engine-svg | Engine function that extends base Mechanic class, indended to render static assets or animations built using through SVG strings. |
| @mechanic-design/utils | General purpose CLI definitions to be used by other Mechanic packages. |
| @mechanic-design/dsi-logo-maker | A design tool project made with Mechanic to build assets and animations that follows DSI's identity logo. |
To get started, clone this repo.
Then run, npm run bootstrap. This will symlink all the dependencies together and run npm i inside each package. Running npm i inside a package folder will not work.
That should be enough to test certain individual package functionality, but to test mechanic projects with local package versions, we use yalc.
npm link falls short to reproduce package dependencies resolution as projects would by installing from the npm registry. yalc can locally publish packages as it would to the npm registry, to then use in local projects.
To do this, first install yalc globally.
To publish all packages in the repo, run npm run publish:local. To publish an individual package, run yalc push from its directory or yalc push ./packages/[package]. Run any of these commands when you wish to update the published content.
Then in the project to test the package(s), before installing dependencies run yalc add [package] for all packages you wish to test. Then install normally with npm i.
For any other needs, check yalc's documentation.
Run npm run publish