{"id":30347206,"url":"https://github.com/magicbell/darkmagic","last_synced_at":"2025-08-18T16:09:22.663Z","repository":{"id":64826147,"uuid":"576401694","full_name":"magicbell/darkmagic","owner":"magicbell","description":"Open source design system for modern B2B apps","archived":false,"fork":false,"pushed_at":"2025-08-11T21:08:48.000Z","size":3534,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-11T23:24:18.504Z","etag":null,"topics":["design-system","hacktoberfest","magicbell","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/magicbell.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2022-12-09T19:05:18.000Z","updated_at":"2025-08-04T03:56:25.000Z","dependencies_parsed_at":"2023-09-24T21:24:06.452Z","dependency_job_id":"2faa91c0-ba11-4303-b762-d10572aec299","html_url":"https://github.com/magicbell/darkmagic","commit_stats":{"total_commits":84,"total_committers":2,"mean_commits":42.0,"dds":0.0357142857142857,"last_synced_commit":"5242a0b1513516f6666859e61e79fe76a1dc6f94"},"previous_names":["magicbell/darkmagic","magicbell-io/darkmagic"],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/magicbell/darkmagic","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fdarkmagic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fdarkmagic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fdarkmagic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fdarkmagic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magicbell","download_url":"https://codeload.github.com/magicbell/darkmagic/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magicbell%2Fdarkmagic/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271020058,"owners_count":24685798,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-system","hacktoberfest","magicbell","react"],"created_at":"2025-08-18T16:09:21.964Z","updated_at":"2025-08-18T16:09:22.654Z","avatar_url":"https://github.com/magicbell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DarkMagic\n\nThis monorepo contains the design system of [MagicBell](https://magicbell.com).\n\n\u003e **Warning:**\n\u003e\n\u003e The packages in this repo aren't ready. We're actively working on them, and breaking changes are still to be expected\n\u003e while we iron out the look \u0026 feel of their visual appearance, as well as code signatures.\n\u003e\n\u003e Expect breaking changes on every release until we reach `v1.0.0`.\n\n## Requirements\n\nThe development environment for this repo supports `node:v18` and up. We use `yarn` as package manager.\n\n## Setup\n\nRun the following commands in your terminal to get a copy of this repo, and install required dependencies.\n\n```\ngit clone git@github.com:magicbell/darkmagic.git\ncd darkmagic\nyarn\n```\n\n### Packages\n\nWhen working on the packages, you'll want to run the builder in watch mode. You can do so by:\n\n```\nyarn start\n```\n\nThis builds the packages, and recompiles all affected ones when you make changes in the `packages` folder.\n\n### Storybook\n\nWe have a single [storybook](https://storybook.js.org/) instance available for stories in all packages. Run it with:\n\n```\nyarn start:storybook\n```\n\nAfter that, visit http://localhost:6006. Storybook will hot-reload on any change that you make in `/packages`. Make sure that you're running `yarn start` in another terminal, when you have the feeling that you're dealing with stale data.\n\n### Playroom\n\nWe have a [playroom](https://github.com/seek-oss/playroom) instance available for quick prototyping. Run it with:\n\n```\nyarn start:playroom\n```\n\nAfter that, visit http://localhost:9000. Playroom will hot-reload on any change that you make in `/packages`. Make sure that you're running `yarn start` in another terminal, when you have the feeling that you're dealing with stale data.\n\n### Example\n\nThere is a vite based example application located in the /example folder. This gives one the opportunity to try out use cases in a production like environment. Run it with:\n\n```\nyarn start:example\n```\n\nAfter that, visit http://localhost:3000. The example app will hot-reload on any change that you make in `/packages`. Make sure that you're running `yarn start` in another terminal, when you have the feeling that you're dealing with stale data.\n\n## Contribute\n\nCode quality is set up for you with `eslint`, `prettier`, `husky`, and `lint-staged`. Please keep the pre-commit hooks enabled.\n\n## Optimizations\n\nYou can take advantage of [invariant](https://npmjs.com/tiny-invariant), [warning](https://npmjs.com/tiny-warning) and `__DEV__` to add development-only warnings which won't end up in our production bundles.\n\n```js\nimport invariant from 'tiny-invariant';\nimport warning from 'tiny-warning';\n\ninvariant(truthyValue, 'This should not throw!');\ninvariant(falsyValue, 'This will throw!');\n\nwarning(truthyValue, 'This should not log a warning');\nwarning(falsyValue, 'This should log a warning');\n\nif (__DEV__) {\n  // this is excluded from the production bundle\n}\n```\n\n### Tests\n\nTests are setup using [vitest](https://npmjs.com/vitest). They can be run once with coverage with `yarn test` or use `yarn test:watch` to run them in watch mode.\n\n```\nyarn test:watch\n```\n\n### Pull Requests\n\nWhen contributing changes, make sure to document them in a changeset. You'll usually do this when you're ready to push the changes and create a pull-request. To do so, run:\n\n```\nyarn changeset\n```\n\n`Changeset` will ask you for a change description, and how different packages are affected. Your answers help us determine if packages should be bumped in version, and if it should be a `patch`, `minor`, or `major` version bump. The description you provide may end up in our changelogs.\n\nPlease review, polish, and commit the files after completing the steps.\n\n## Publish\n\nPublishing new package versions is an automated process managed via the `release` workflow. To trigger a release, push a commit containing changesets (`yarn changeset`) to `main`. This will trigger the bot to open or update a pull-request named `next release`. Once that pull request gets merged, the bot will publish the new versions to npm and create the release notes on GitHub.\n\n### Manual publishing\n\nManual publishing is done in two steps:\n\n```\nyarn changeset:version\n```\n\nThis command consumes the changesets as collected in [.changeset](.changeset), and proposes changelogs and version bumps. Please review the proposed changes, and polish the changelogs. Make sure that breaking changes result in major version bumps.\n\nCommit the change with `git add . \u0026\u0026 git commit -m 'version packages'`, and move on to the next step to publish.\n\n```\nyarn changeset:release\n```\n\nThis will publish all changed packages to npm, and tag the last commit. Please don't commit anything between the release commit, and the publish action. These command are separate to enable you to check if the release commit is accurate.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicbell%2Fdarkmagic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagicbell%2Fdarkmagic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagicbell%2Fdarkmagic/lists"}