{"id":22220615,"url":"https://github.com/drawbotics/drylus","last_synced_at":"2025-07-27T15:33:12.877Z","repository":{"id":66194821,"uuid":"178231228","full_name":"Drawbotics/drylus","owner":"Drawbotics","description":"It's like a stylus, but dry. Drawbotics Design System.","archived":false,"fork":false,"pushed_at":"2022-12-07T07:46:39.000Z","size":68297,"stargazers_count":3,"open_issues_count":4,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-01T04:35:39.705Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://drawbotics.github.io/drylus/","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/Drawbotics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2019-03-28T15:25:09.000Z","updated_at":"2022-12-14T22:59:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"bfd4185a-3c29-4580-ad66-b59df04d2d89","html_url":"https://github.com/Drawbotics/drylus","commit_stats":{"total_commits":2562,"total_committers":10,"mean_commits":256.2,"dds":0.602263856362217,"last_synced_commit":"84f13d62b65f1026a71ac8bd5b5bef9c79e873cc"},"previous_names":[],"tags_count":477,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fdrylus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fdrylus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fdrylus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fdrylus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Drawbotics","download_url":"https://codeload.github.com/Drawbotics/drylus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227817177,"owners_count":17824199,"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":[],"created_at":"2024-12-02T23:09:21.157Z","updated_at":"2024-12-02T23:09:21.872Z","avatar_url":"https://github.com/Drawbotics.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drylus - Drawbotics Styles Library\n\n__NOTE__: this is a monorepo, meaning all the code is divided into packages (`/packages`). All packages are dependencies of each other meaning the code can be shared between them. To manage the packages we use [Lerna](https://github.com/lerna/lerna).\n```\nnpm install\n```\n\n### Deprecation plugin\nIn the `react-drylus` package, which is written in Typescript, we define component props within interfaces. Interface properties are documented through JSDoc comments, which are mainly used to generate the documentation in the styleguide. However, through JSDoc we also mark props as deprecated throught the `@deprecated` tag.\n\nBefore, we used to use `prop-types`, and were able to show deprecation warnings in the console at _run time_. Now, through JSDoc and and an ESLint plugin (see below) we can achieve the same effect, but at compile time, which is a clear benefit.\n\n[**eslint-plugin-deprecated-props**](https://github.com/Drawbotics/eslint-plugin-deprecated-props) is the plugin to enable this feature; warnings/errors will be shown in the terminal if you have eslint in the pipeline, and in VSCode if you set it up as explained. Either way, it is important that you install it if you want to avoid using deprecated features in the library.\n\n---\nThere are 7 total packages:\n- [![npm version](https://badge.fury.io/js/%40drawbotics%2Fdrylus-style-vars.svg)](https://badge.fury.io/js/%40drawbotics%2Fdrylus-style-vars) [drylus-style-vars](/packages/drylus-style-vars):\n This package holds all the variables used in the Drawbotics styles. Exports js, less and css vars.\n- [![npm version](https://badge.fury.io/js/%40drawbotics%2Ficons.svg)](https://badge.fury.io/js/%40drawbotics%2Ficons) [icons](/packages/icons): This package holds all the icons used throughout the Drawbotics design system\n- [![npm version](https://badge.fury.io/js/%40drawbotics%2Freact-drylus.svg)](https://badge.fury.io/js/%40drawbotics%2Freact-drylus) [react-drylus](/packages/react-drylus): This is basically the source of all the components for the library; it uses React\n- [![npm version](https://badge.fury.io/js/%40drawbotics%2Fvanilla-drylus.svg)](https://badge.fury.io/js/%40drawbotics%2Fvanilla-drylus) [vanilla-drylus](/packages/vanilla-drylus): The vanilla JS version of the library. The styles (CSS) is extracted from `react-drylus` using `extract-emotion` (see next point) and bundled to be used in non-react apps. Since we can't extract JS logic from React, the component logic is re-written in non-react code and bundled separately as well\n- [![npm version](https://badge.fury.io/js/%40drawbotics%2Fextract-emotion.svg)](https://badge.fury.io/js/%40drawbotics%2Fextract-emotion) [extract-emotion](/packages/extract-emotion): A small CLI tool to extract the CSS from React components that use [emotion](https://github.com/emotion-js/emotion) for styling (see [readme](/packages/extract-emotion/README.md))\n- [drylus-web-components](/packages/drylus-web-components): __WIP__ Auto generated from `react-drylus`\n- [styleguide](/packages/styleguide): This is where we write all the documentation and code examples for the library; examples are written in React and the equivalent HTML and web-components version are auto generated\n\n### How do these work together?\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/graph.svg\" width=\"200\" style=\"margin: auto\" /\u003e\n\u003c/p\u003e\n\nThe basic flow is the following:\n- `icons` is an independent package that only deals with icons and generating the icon fonts\n- `drylus-style-vars` is independent and generates the variables for colors, font sizes, margins etc\n- `react-drylus` feeds from the two above and is the core of the design system. It's from here that nearly all of the styles and components are created\n- `extract-emotion` feeds from `react-drylus` to get the components and extracts the CSS\n- `vanilla-drylus` gets the CSS from `extract-emotion`, it then also outputs its own JS bundle for vanilla JS interactions with components\n- `styleguide` simply uses the packages that output bundles/components to showcase them\n\n## Development\nAll commands should be run from the root of the project. If you want to have everything compiling and hot-reload while developing, then run all the `npm run watch:[package]` commands in separate terminal processes.\n\n__NOTE__ While each package's readme describes the commands to run the code (dev or production) it is better to use the root commands to avoid having to navigate between folders.\n\n__style-vars__\n```\nnpm run build:vars\n```\n\n__icons__\n```\nnpm run build:icons\nnpm run dev:icons\n```\n\n__react-drylus__\n```\nnpm run watch:react\nnpm run test:react\nnpm run build:react\n```\n\n__extract-emotion__\n```\nnpm run test:extract-emotion\nnpm run build:extract-emotion\n```\n\n__vanilla-drylus__\n```\nnpm run watch:vanilla\nnpm run build:vanilla\n```\n\n__styleguide__\n```\nnpm run watch:styleguide\nnpm run build:styleguide\n```\n\nTo add a new npm library/package to a package's dependencies:\n```\nnpx lerna add [npm-package-name] --scope=@drawbotics/[package]\n```\n\nTo add a new library as a dev dependency:\n```\nnpx lerna add [npm-package-name] --scope=@drawbotics/[package] --dev\nnpx lerna link convert\n(and sometimes)\nnpm install\n```\n\n## Getting started\nThe packages have been moved to the Github Packages registry, which means you should login to your github account before installing with `npm` or installation for those packages will fail. You can read more about it [here](https://help.github.com/en/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages).\n\nYou should also have a `.env` file with the following variables:\n```\nAWS_SECRET_KEY=\nAWS_ACCESS_KEY=\nGITHUB_TOKEN=\nGH_TOKEN=\nNPM_TOKEN=\n```\nWhere `GITHUB_TOKEN` and `GH_TOKEN` are the same value, but each is used for a different purpose. You can ask the maintainer for each of these or how to acquire them. The `styleguide` package also requires additional vars, you can check which ones in the readme for that one.\n\n### Requirements\nSome package require extra configuration to be used (this is also mentioned in each package's readme).\n- `icons` requires you to set some environment variables at the root of the monorepo to sync the code with the Drawbotics CDN\n\n\n## Publishing\nWe use Lerna's `publish` command to automate the correct versioning and tagging of packages. All packages in this repo are published, with the exception of `styleguide` since it is only used to build the web app for the styleguide.\n\nWe've started to use [Github Actions](https://github.com/features/actions) to enable continuous deployment for the different packages, including the styleguide. The set up for this is found in the `.github/workflows` folder.\n\nIn order to enable automatic versioning we use [auto](https://github.com/intuit/auto) which uses the labels added to PRs to know what version to publish.\n\n### Key points\nAny push to master is automatically recognised as a bug fix (patch). You can look at the workflow configuration for more details.\n\nWhen you create a PR to master you should choose the next release version [`major`, `minor`, `patch`].\n\nWe don't trigger auomatic releases on any other scenario other than pushing to master or PR to master. For pre-releases you should manually run the command\n```\nnpm run pre-release\n```\nWhich will automatically create a release for the next `beta` version i.e. MISSING - need to try with params\n\n## Issues\nHere are some issues you may ecounter when trying to develop/publish:\n- If you try to publish with node version \u003e= 12, it will fail because of an old dependency of `s3`. For now use node version 10 or lower for that. A fix is coming.\n\n\n## License\n\nSee the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawbotics%2Fdrylus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawbotics%2Fdrylus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawbotics%2Fdrylus/lists"}