@testlio/panthera

UI Components

With Testlio 3.0 we developed a scalable design system called Panthera. The name Panthera came from the Lion theme at Testlio. Lion has a scientific name “Panthera leo” and it belongs to a group of cats called Panthera which is a genus within the family of Felidae. It aligns well as a Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.

Usage

To use the library in your application, npm install @testlio/panthera. Import components with eg. import { Button, Card } from '@testlio/panthera'; Import component-specific types with import { TTableSortDirection } from 'panthera/primitives/Table';

Local development

Develop locally by running styleguide. There are two options:

• directly from this repo folder with npm run styleguide
• dockerized, running docker-compose up -d panthera in Compose folder. Styleguidist is served on port 6060 -> http://local.testlio:6060/.

Embedding local changes into an app without publishing

1. make sure you've ran npm install @testlio/panthera on the receiving end
2. run npm pack in Panthera
3. unzip the tarball in the receiving app, in the node_modules/@testlio/panthera folder
4. replace the contents of node_modules/@testlio/panthera folder with the contents of the new package folder
5. important! make sure you don't delete the node_modules folder in the folder mentioned above

Publishing a new version

1. making sure you're on a clean branch (all changes committed)
2. making sure that package build works by running npm pack
3. running npm version patch | minor | major, depending on the scope of changes since the last publish (bugfixes | new features | breaking changes). npm version prerelease --preid=YOUR_FEATURE_HERE if you'd like to publish a package for testing in staging.
4. push package.json change and tags with git push --follow-tags
5. check CircleCI and approve the approve publish npm package task once available

Deprecation

If the component needs to be deprecated please do the following:

1. Mark component as deprecated with a special notation

/**
 * @deprecated Please use NewComponentName component instead.
 */
 const ComponentName = () => {
   ...
 }

2. Please updated the Readme of the deprecated component with a note:

***Component is deprecated, please use [NewComponentName](#newcomponentname) component instead!***