{"id":13622638,"url":"https://github.com/designsystemsinternational/mechanic","last_synced_at":"2025-04-15T09:33:26.886Z","repository":{"id":37739149,"uuid":"281727576","full_name":"designsystemsinternational/mechanic","owner":"designsystemsinternational","description":"Mechanic is a framework to build assets built on web code.","archived":false,"fork":false,"pushed_at":"2024-06-21T13:57:18.000Z","size":14971,"stargazers_count":253,"open_issues_count":36,"forks_count":11,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-10-14T10:01:43.386Z","etag":null,"topics":["design","web"],"latest_commit_sha":null,"homepage":"https://mechanic.design","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/designsystemsinternational.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-22T16:22:58.000Z","updated_at":"2024-10-10T02:35:12.000Z","dependencies_parsed_at":"2024-09-26T15:57:05.803Z","dependency_job_id":"244f95d1-76eb-42a1-8983-ae7b515332f6","html_url":"https://github.com/designsystemsinternational/mechanic","commit_stats":{"total_commits":638,"total_committers":7,"mean_commits":91.14285714285714,"dds":"0.18652037617554862","last_synced_commit":"d74cbf0f87c82c528114d78bc65b1f70b571825d"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designsystemsinternational%2Fmechanic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designsystemsinternational%2Fmechanic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designsystemsinternational%2Fmechanic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/designsystemsinternational%2Fmechanic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/designsystemsinternational","download_url":"https://codeload.github.com/designsystemsinternational/mechanic/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223668270,"owners_count":17182901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","web"],"created_at":"2024-08-01T21:01:22.132Z","updated_at":"2024-11-08T10:30:46.748Z","avatar_url":"https://github.com/designsystemsinternational.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://mechanic.design/\"\u003e\n    \u003cimg alt=\"Mechanic Logo\" src=\"https://raw.githubusercontent.com/designsystemsinternational/mechanic/main/doc/logo.gif\" width=\"600\"\n    \u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eBuilt with ❤️ by \u003cbr/\u003e\u003ca href=\"https://designsystems.international/\"\u003e\n  \u003cimg width=\"150\" alt=\"logo\" src=\"https://raw.githubusercontent.com/designsystemsinternational/mechanic/main/doc/dsi_logo.png\"\u003e\n\u003c/a\u003e\u003c/p\u003e\u003cbr/\u003e\u003cbr/\u003e\n\n\n\n[![npm version](https://img.shields.io/npm/v/@mechanic-design/core.svg?style=for-the-badge\u0026color=201ed2\u0026labelColor=ed4600)](https://www.npmjs.com/package/@mechanic-design/core) [![Documentation](https://img.shields.io/badge/docs-v2.0.0.beta.9-red.svg?style=for-the-badge\u0026color=201ed2\u0026labelColor=ed4600)](https://mechanic.design/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-red.svg?style=for-the-badge\u0026color=201ed2\u0026labelColor=ed4600)](https://github.com/designsystemsinternational/mechanic/pulls)\n\n[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. \n\n**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!\n\n\n\n## Get Started\n\nTo start using right away and create a new Mechanic project, run the following:\n\n```\nnpm init mechanic@latest\n```\n\nThis will build a new base Mechanic project, with one **design function**! Follow the CLI instructions to customize, install and start running.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Mechanic App Screenshot\" src=\"https://raw.githubusercontent.com/designsystemsinternational/mechanic/master/doc/screenshot.png\" width=\"600\"\u003e\n\u003c/p\u003e\n\n## Documentation\n\nCheck out [v1.2.0 documentation](https://mechanic.design/docs/v1.2.0).\n\n## Monorepo Content\n\nThe repo is managed via [lerna](https://github.com/lerna/lerna).\n\n| Repository                                                 | Description                                                                                                                                                                                                                        |\n| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [create-mechanic](packages/create-mechanic)                | Mechanic project skeleton creator.                                                                                                                                                                                                 |\n| [@mechanic-design/cli](packages/cli)                       | Command-line tool to generate new Mechanic projects, design functions and build app.                                                                                                                                               |\n| [@mechanic-design/core](packages/core)                     | Core Mechanic functionalities. Used by Mechanic's design tools and defines `Mechanic` class to be extended as **Engines**.                                                                                                         |\n| [@mechanic-design/ui-components](packages/ui-components)   | React component library intended to be used as inputs for design function inputs.                                                                                                                                                  |\n| [@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).                                 |\n| [@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/).                                                                                         |\n| [@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). |\n| [@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.                                       |\n| [@mechanic-design/utils](packages/utils)                   | General purpose CLI definitions to be used by other Mechanic packages.                                                                                                                                                             |\n| [@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/).                                                                                  |\n\n## Development\n\nTo get started, clone this repo.\n\nThen 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.\n\nThat 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).\n\n`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.\n\nTo do this, first install `yalc` globally.\nTo 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.\n\nThen 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`.\n\nFor any other needs, check [`yalc`'s documentation](https://github.com/wclr/yalc).\n\n## Publish\n\nRun `npm run publish`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignsystemsinternational%2Fmechanic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdesignsystemsinternational%2Fmechanic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdesignsystemsinternational%2Fmechanic/lists"}