@lamimed/pantheon

Pantheon

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Continuous Integration
5. Contributing

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

(back to top)

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

(back to top)

Getting Started

Some information for a quick installation of the project

⚠️ About "babel-jest": "25.5.1" in package.json: It was necessary in order to solve a typeError of cwd: TypeError: Cannot read properties of undefined (reading 'cwd').

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 [e-mail]: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.

(back to top)

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

(back to top)

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

(back to top)

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:

(back to top)