Batesville Global Component repository

Overview

The purpose of this project / repository is to maintain a Global React Component library that can be utilized across one or more React Apps

Build / Package Library

Build / Packaging Tool

The Vite build & packaging process utilizes a Library mode that provides a configurable set of tools to package a React Component Library

Library Packaging

1. Typescript Build

The code within the /lib directory is built using typescript tsc build process

2. Vite Build Process

The code is then packaged using the Vite packaging process which...

1. Read Vite Config

Vite build process reads the vite config file vite.config.js which is used to orchestrate the build & packaging process

2. Output es & umd files

The vite build process will generate es & umd files based on the exported members of lib/index.ts and output them in dist/

3. Compiles CSS

The vite build process will compile the library CSS using the index.css and the @storeront-ui tailwind configuration and output the following file /dist/styles.css

4. Asset packaging

The vite build process will copy the items from the /public directory to the /dist

IMPORTANT The nextjs compiled from end WILL NOT be able to read / process image from the /distdirectory. Please consult the section on Using the Component Library

5. Releasing / Publishing Library

Once the library has been compiled via the Batesville Azure Dev pipelines, the artifact(s) will be built and stored in the Batesville Artifact repository

Using Components from the Library

1. Installation

The component library package(s) will be downloaded / installed from the Batesville Artifact Repository and installed in the node_modules directory

2. Post Install Operation

A custom script is recommended to be run to copy anu custom image assets from the library's /dist/images, dist/icons and dist/data directories to the projecft 's public folder given NextJS applications will ONLY consider assets from the apps public folder

Postinstall script

• Cross Environment Support: Recommend using the shx package for cross env support so that a file copy process can be executed

3. Import the component file & CSS

Component Import

Import the desired component file(s) using a standard es6 import

import {LogoComponent} from '@batesville/react-component-library'

CSS Import

Import the CSS to inherit the component's CSS & styling

import '@batesville/react-component-library/dist/style.css'