Skip to content
This repository has been archived by the owner on Feb 1, 2024. It is now read-only.
/ ui Public archive

Components used within the Teamleader ecoystem

License

Notifications You must be signed in to change notification settings

teamleadercrm/ui

Repository files navigation

Warning

This package is deprecated. The content is moved to the @teamleader/ahoy package. The further development of the project will be closed-source but the package will be published under the new name.

Teamleader UI

Teamleader UI is a set of React components that implement the Teamleader design specification.

Installation

Teamleader UI can be installed as an npm package:

$ npm install --save @teamleader/ui

or

$ yarn install @teamleader/ui

Basic usage

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@teamleader/ui';

ReactDOM.render(<Button label="Hello World!" />, document.getElementById('app'));

Import the CSS into your project via JS or CSS.

JS

import '@teamleader/ui/es/index.css';

or CSS

@import url('@teamleader/ui/es/index.css');

Browser support

This library officially supports the last two versions of the major browsers. This is mainly because of dependencies and ease of mind.

Contributing

To work in the project you will need a node version supporting ES6 syntax. Although the project is built using the Babel compiler, we use some ES6 features on the development server. Consider using n or nvm to handle different node versions!

To start the spec site locally, follow these simple steps:

$ git clone https://github.com/teamleadercrm/ui
$ cd ui/
$ yarn install
$ yarn start

Open up a browser and the local spec will be available at http://localhost:3000/.

To start the project on another port, set the PORT variable when running the start command. As in this example for port 3001:

$ PORT=3001 yarn start

New component checklist

  • component is written in Typescript
  • [component].stories.tsx file is present
  • component is exported in index.ts

How we do a release

  1. Create PR with your desired changes

  2. Bump the version in package.json and commit with message Version bump. Semantic Versioning

  3. Update CHANGELOG.md

    • Place ## [new.version.number] - yyy-mm-dd above last release

    • Add heading that best fits your change:

      ### Added
      
      ### Changed
      
      ### Deprecated
      
      ### Removed
      
      ### Fixed
      
      ### Dependency updates
      
    • Add you change in format Component: short-description ([github-username](link-to-github-user)) in [#PR-ID](link-to-PR)

    • Commit with message Update changelog and push.

    • EXAMPLE:

      ## [16.4.3] - 2022-10-31
      ### Fixed
      - `Select`: Allow multiple selects being rendered at once ([@stefaandevylder](https://github.com/stefaandevylder)) in [#2422](https://github.com/teamleadercrm/ui/pull/2422)
      
  4. Once the pull request has the needed amount of approvals, merge it into the next-release branch.

  5. Github Actions will create a tag + release based on the version property in package.json

  6. In your console, pull the next-release branch.

  7. Publish to npm using the npm publish --access=public command.

  8. Merge the next-release branch into master and push to Github

License

This project is licensed under the terms of the MIT license.