Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/designsystemsinternational/mechanic
Mechanic is a framework to build assets built on web code.
https://github.com/designsystemsinternational/mechanic
design web
Last synced: about 2 months ago
JSON representation
Mechanic is a framework to build assets built on web code.
- Host: GitHub
- URL: https://github.com/designsystemsinternational/mechanic
- Owner: designsystemsinternational
- License: mit
- Created: 2020-07-22T16:22:58.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T13:57:18.000Z (6 months ago)
- Last Synced: 2024-10-14T10:01:43.386Z (2 months ago)
- Topics: design, web
- Language: JavaScript
- Homepage: https://mechanic.design
- Size: 14.3 MB
- Stars: 253
- Watchers: 8
- Forks: 11
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-repos - designsystemsinternational/mechanic - Mechanic is a framework to build assets built on web code. (JavaScript)
README
Built with ❤️ by
[](https://www.npmjs.com/package/@mechanic-design/core) [](https://mechanic.design/) [](https://github.com/designsystemsinternational/mechanic/pulls)
[Mechanic](https://mechanic.design/) 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!
## Get Started
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.
## Documentation
Check out [v1.2.0 documentation](https://mechanic.design/docs/v1.2.0).
## Monorepo Content
The repo is managed via [lerna](https://github.com/lerna/lerna).
| Repository | Description |
| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [create-mechanic](packages/create-mechanic) | Mechanic project skeleton creator. |
| [@mechanic-design/cli](packages/cli) | Command-line tool to generate new Mechanic projects, design functions and build app. |
| [@mechanic-design/core](packages/core) | Core Mechanic functionalities. Used by Mechanic's design tools and defines `Mechanic` class to be extended as **Engines**. |
| [@mechanic-design/ui-components](packages/ui-components) | React component library intended to be used as inputs for design function inputs. |
| [@mechanic-design/engine-canvas](packages/engine-canvas) | Engine function that extends base `Mechanic` class, intended to render static assets or animations built using the [HTML Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). |
| [@mechanic-design/engine-p5](packages/engine-p5) | Engine function that extends base `Mechanic` class, intended to render static assets or animations built using [p5.js](https://p5js.org/). |
| [@mechanic-design/engine-react](packages/engine-react) | Engine function that extends base `Mechanic` class, intended to render static assets or animations built using [React](https://reactjs.org/) components that renders [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG). |
| [@mechanic-design/engine-svg](packages/engine-svg) | Engine function that extends base `Mechanic` class, indended to render static assets or animations built using through [SVG](https://developer.mozilla.org/en-US/docs/Glossary/SVG) strings. |
| [@mechanic-design/utils](packages/utils) | General purpose CLI definitions to be used by other Mechanic packages. |
| [@mechanic-design/dsi-logo-maker](packages/dsi-logo-maker) | A design tool project made with Mechanic to build assets and animations that follows [DSI's identity logo](https://designsystems.international/). |
## Development
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`](https://github.com/wclr/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](https://github.com/wclr/yalc).
## Publish
Run `npm run publish`