{"id":28521161,"url":"https://github.com/rentalutions/elements","last_synced_at":"2025-07-03T17:31:47.589Z","repository":{"id":39579514,"uuid":"98571756","full_name":"rentalutions/elements","owner":"rentalutions","description":"Design kit for Avail rental management software","archived":false,"fork":false,"pushed_at":"2025-02-14T16:51:27.000Z","size":11133,"stargazers_count":10,"open_issues_count":28,"forks_count":3,"subscribers_count":23,"default_branch":"release","last_synced_at":"2025-06-09T07:56:03.193Z","etag":null,"topics":["design-system","lerna","monorepo","react","styled-components","styled-system","ui-components","ui-kit"],"latest_commit_sha":null,"homepage":"https://design.avail.co","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rentalutions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"docs/roadmap.stories.mdx","authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-07-27T19:12:09.000Z","updated_at":"2025-02-14T16:51:27.000Z","dependencies_parsed_at":"2023-11-30T17:57:37.808Z","dependency_job_id":"b9c76532-b3dc-4c89-a2a8-52e86de1f922","html_url":"https://github.com/rentalutions/elements","commit_stats":{"total_commits":1081,"total_committers":17,"mean_commits":"63.588235294117645","dds":"0.18223866790009247","last_synced_commit":"d94255c5f48cbb329f2fda4f1a32979cea7d3fb2"},"previous_names":[],"tags_count":549,"template":false,"template_full_name":null,"purl":"pkg:github/rentalutions/elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rentalutions%2Felements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rentalutions%2Felements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rentalutions%2Felements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rentalutions%2Felements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rentalutions","download_url":"https://codeload.github.com/rentalutions/elements/tar.gz/refs/heads/release","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rentalutions%2Felements/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263369594,"owners_count":23456327,"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-system","lerna","monorepo","react","styled-components","styled-system","ui-components","ui-kit"],"created_at":"2025-06-09T07:32:52.412Z","updated_at":"2025-07-03T17:31:47.581Z","avatar_url":"https://github.com/rentalutions.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Avail Design Kit](./docs/public/design-kit-cover.png)\n\n# Avail Design Kit\n\nA set of components built to be `composable`, `extendable`, and `usable`\n\n## [Documentation](https://design.avail.co)\n\n## Setup\n\n1. Clone the repo with `gh repo clone rentalutions/elements`.\n2. Install dependencies with `yarn install`.\n3. Start a storybook container that builds all the packages and watches for changes with:\n    * `yarn build:storybook`\n    * `yarn dev:storybook`\n\n## Project Structure\n\nThis project is structured as a monorepo managed by [lerna](https://github.com/lerna/lerna) and yarn workspaces.\n\n```\n.storybook\ndocs\n└── pages\n|   └── packages\n|   |   └── [package-documentation].mdx\n└── next.config.js\npackages\n└── [package]\n│   └── dist\n│   └── src\n│   └── __tests__\n│   └── [package].stories.js\n│   └── package.json\n│   └── CHANGELOG.md\n@testing.js\n```\n\n## Getting Started\n\nThe best way to contribute to this library is to look at open issues or file an issue yourself if one doesn't already exist.\n\nTo suggest a component be added to the library open an issue and spec out the component with it's API. No component will be added without proper documentation. You can tag [@pkrawc](https://github.com/pkrawc) or [@wade00](https://github.com/wade00) with reviewing the issue and weighing in when necessary.\n\nTo finish, create a pull request that solves the issue. At least one commit in the PR should be `resolves #[ISSUE_NUMER]`, this will auto-close the issue when the PR is merged into master.\n\n## Development\n\nThis system uses [storybook](https://storybook.js.org) to maintain documentation. Use `yarn dev` to run a development enviroment. While creating or updating a component, check your work using the story files in the same package. Updating stories will build and publish a new dev build to vercel on every commit thats part of a PR.\n\n### Conventional Commits\n\nThis system uses [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to tag and track updates. This method automatically creates and updates change logs for each package based on the name of a commit. The basis of this is that the commit message should contain the following structure.\n\n```bash\n\u003ctype\u003e([optional scope]): \u003cdescription\u003e\n\n[optional body]\n\n[optional footers]\n```\n\n**Commit Types**\n\n`build`, `ci`, `chore`, `docs`, `feat`, `fix`, `perf`, `refactor`, `revert`, `style`, `test`\n\n## Releases\n\nCurrent release process, it's kind of involved, but github actions does most of the heavy lifting and it creates a nice release cadence. These scripts assume you're already on the `release` branch. If you're on a feature branch, create a pull request to merge your code.\ncreate a release in confluence and attach the fix version to stories worked on as part of elements repo\n\nrun the below commands to release a new version\n\n```bash\ngit checkout release\ngit pull\ngit checkout -b graduate-YYYY.MM.DD.ELEMENTS.PROD\n\n# run a build and make sure everything compiles, and run tests to make sure all are passing\nyarn build \u0026\u0026 yarn test\n# Create new versions of the packages worked on, git tag, and create a CHANGELOG for those package.\nyarn graduate\n```\n\ncreate a PR to release, this will kick off a test github action\nmerging the release will publish the package upgrade\n\n### Beta releases\n\nSometimes you'll want to release a beta version of a package before upgrading to production level. This process is slightly more manual but made pretty easy with lerna and yarn workspaces.\n\n```bash\n# Update the packages to a prerelease\nyarn workspace [package-name] version [--preminor | --premajor | --prepatch]\n\n# Publish the package on the npm registry\nyarn workspace [package-name] publish --tag [alpha | beta]\n```\n\n## Adding Packages\n\nUse the command `yarn create-package [package-name] [package description]`.\n\n```bash\nyarn create-package footer \"A footer package for the avail design system\"\n```\n\n## Code Preferences\n\n### Separate component logic from layout when possible.\n\n```jsx\n// Good\nfunction useComponent({ ref, ...props }) {\n  const innerRef = useRef()\n  const [bg, setBg] = useState(\"#000\")\n  useEffect(() =\u003e {\n    if (window.innerWidth \u003e 900) setBg(\"#FFF\")\n  }, [])\n  return {\n    ...props,\n    bg,\n    ref: mergeRefs(innerRef, ref),\n  }\n}\n\nfunction Component(props, ref) {\n  const { bg, ...htmlProps } = useComponent({ ...props, ref })\n  return \u003cBox {...htmlProps} sx={{ bg }} /\u003e\n}\n\n// Bad\nfunction Component(props, ref) {\n  const innerRef = useRef()\n  const [bg, setBg] = useState(\"#000\")\n  useEffect(() =\u003e {\n    if (window.innerWidth \u003e 900) setBg(\"#FFF\")\n  }, [])\n  return \u003cBox {...props} ref={mergeRefs(innerRef, ref)} sx={{ bg }} /\u003e\n}\n```\n\nYes it's more lines for a trivial example like this but in my experience it makes the component so much more refactorable.\n\n### Prefer function declarations over assignments for component definition.\n\n```jsx\n// Good\nfunction MyComponent(props) {\n  return \u003cdiv /\u003e\n}\n\n// Bad\nconst MyComponent = (props) =\u003e \u003cdiv /\u003e\n```\n\n### Prefer named exports.\n\n```js\n// Good\nexport function Section() {}\nexport function SectionItem() {}\n\n// Bad\nexport default function Section() {}\nexport function SectionItem() {}\n```\n\n## Naming Conventions\n\nName files in lowercase with hyphen seperation for spaces.\n\n```zsh\n# Good\ntouch components/file-upload.js\n\n# Bad\ntouch components/FileUpload.js\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frentalutions%2Felements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frentalutions%2Felements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frentalutions%2Felements/lists"}