@lamimed/pantheon v15.12.0

About The Project

Pantheon is the Lami's UI Design System library, built with react, typescript and storybook. It's meant to be published at npmjs and to be distributed in Lami's React products.

This library uses TSDX as a template. To learn more about TSDX, checkout TSDX's docs

Built With

The Project comes with a complete set of modern tools and libraries, including:

• TSDX
• TypeScript
• Styled Components
• Jest
• React Testing Library
• Storybook
• Eslint
• Prettier
• Husky
• PLOP
• Nuka Carousel
• Size Limit

Getting Started

Some information for a quick installation of the project

Prerequisites

• yarn

  npm install --global yarn

Installation

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

1. Clone the repo using SSH

   git clone git@github.com:lami-health/pantheon.git

2. Install Yarn packages

   yarn install

3. Running the project

   yarn storybook

This loads the stories from each components folder.

NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

Building components

This library uses plop to generate components automatically.

yarn generate

Don't forget to export the component in the src/index.tsx file, with it's meant to be distributed.

Publishing the library

To update the package, after beign assure that the build has been done, change de version in package.json, login in npm and publish the package.

npm login

Write the username and the password. And then:

npm publish

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visulize it with npm run analyze.

Usage

The folders for this project should be organized according to the following example:

• Components: All components of our design system are centralized in this folder.
• Hooks: All logics that are reused in a large variation of the design.
• Shared: There are cases where some data is always shared between all the adapters.
• Styles: All global styling of the project and its styling settings.
• Utils: Utility functions that is used across the project

Project structure:

├── components
│   ├── CallToAction
│   │   └── __snapshots__
│   │   └── index.tsx
│   │   └── stories.mdx
│   │   └── styles.ts
│   │   └── test.tsx
├── hooks
│   ├── useViewport
│   │   └── index.tsx
├── shared
│   ├── interfaces
│   │    └── DataAttributes.ts
├── styles
│   └── glabal.tsx
├── utils
│   └── setup-tests.ts

Continuous Integration

GitHub Actions

Two actions are added by default:

• main which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
• size which comments cost comparison of your library on every pull request using size-limit

Contributing

We use the tag generated in Jira, so it links the commit to the jira card.

1. Create your Feature Branch (git checkout -b feature/TEC-2-Amazing-Feature)
2. Commit your Changes (git commit -m 'feat: add some amazing feature')
3. Push to the Branch (git push origin feature/TEC-2-Amazing-Feature)
4. Open a Pull Request

Semantic commit messages

Screenshot: