Picasso

Overview:

The lerna#-frontend-exp-core repository is the central location for Toptal’s reusable UI components. These components are divided into separate packages and distributed through NPM. Some of the key packages include @toptal/picasso for core UI building blocks, @toptal/picasso-charts for reusable charts, and @toptal/picasso-forms for a form solution based on react-final-form. There are also shared utilities available in the @toptal/picasso-shared package.

Features:

• @toptal/picasso: core UI building blocks
• @toptal/picasso-charts: reusable charts based on recharts
• @toptal/picasso-forms: a form solution based on react-final-form
• @toptal/picasso-codemod: scripts to help developers migrate to the latest version
• @toptal/picasso-shared: shared utilities between the packages

Installation:

To install the theme, follow these steps:

1. Execute the command yarn start to spin up the storybook server on http://localhost:9001.
2. Use the following commands to perform specific actions:
   • build:package: Build the packages
   • build:storybook: Build Storybook as a static website
   • generate:component: Generate a new component template
   • generate:example: Generate a new component code example
   • generate:svg-components: Generate JSX components from SVGs
   • generate:icons: Generate JSX components from SVGs (only icons)
   • generate:pictograms: Generate JSX components from SVGs (only pictograms)
   • happo: Run Happo locally and generate a report on happo.io
   • happo:storybook: Run Happo for Storybook on CI
   • lint: Lint all files
   • start: Start the Storybook instance and inspect components
   • test: Run Jest and Cypress tests
   • test:integration: Run Cypress tests
   • test:integration:open: Run Cypress in development mode
   • test:unit: Run unit tests
   • test:unit -u: Update Jest snapshots
   • test:unit:watch: Run unit tests in watch mode
   • typecheck: Validate TypeScript compilation

Summary:

The lerna#-frontend-exp-core repository houses Toptal’s reusable UI components, which are organized into separate packages and distributed through NPM. The core packages including building blocks, charts, forms, and shared utilities. Installing the theme involves running the necessary commands to build packages, generate components and examples, and run tests.