@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

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

Publishing a new version

• making sure you're on a clean branch (all changes committed)
• making sure that package build works by running npm pack
• 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.
• push package.json change and tags with git push --follow-tags
• check CircleCI and approve the approve publish npm package task once available

Deprecation

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

• Mark component as deprecated with a special notation

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

• Please updated the Readme of the deprecated component with a note:

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