🌟 Toga-Blox 🌟 Toga-Blox is a comprehensive and reusable React component library tailored for accelerating the development of web applications within our company. Crafted with React, TypeScript, and Tailwind CSS, this library encompasses a suite of customizable and ready-to-deploy components, ensuring a harmonious and efficient development experience.

🚀 Features 🔩 Reusable Components: A curated set of UI components for rapid integration into diverse React applications. 🔐 TypeScript Support: Robustly typed components to enhance development reliability. 🎨 Customizable Styling: Integrating Tailwind CSS for effortless and flexible component styling. ⚡ Vite Compatible: Seamlessly optimized for projects utilizing Vite. 📦 Installation To integrate Toga-Blox into your project, execute the following command:

bash

npm install @your-company/toga-blox

🔧 Customization Our components are engineered for extensive customization via props. For comprehensive guidance on customizing each component, consult the specific component documentation.

To run test coverage report: npx vitest run src/components/{COMPONENT NAME HERE} --coverage

📚 Dependencies Toga-Blox is built using:

React TypeScript Tailwind CSS

🤝 Contributing We value contributions to Toga-Blox, whether they involve documentation enhancements, feature developments, or bug rectifications. Please follow our contribution guidelines.

⚡ Vite Compatibility Though toga-blox is developed and optimized using Vite, it's designed to be universally compatible with any React project regardless of the build tool used. This ensures seamless integration whether your project uses Vite, Create React App, or other build setups.

📚 Storybook For an interactive exploration of toga-blox components, check out our Storybook. It provides live examples, usage scenarios, and customizable props for each component.

To Deploy Changes In Blox

1. up the version number in package.json
2. in terminal, execute 'npm run build'
3. in terminal, execute 'npm publish'
4. login to registry.npmjs.org to check that new version number reflects on profile (credentials in One Password)

To Check Changes Before Deploying New Version

*Note: you may need to run separate VS code windows/instances (one for both blox and the consuming app)

To Link:

1. in blox: execute 'npm link' in terminal
2. in consuming application: execute 'npm link @agilant/toga-blox' in terminal
3. to check that applications are link, execute: 'ls -l node_modules/@agilant' in either repo terminals

To Unlink:

1. in blox: execute 'npm unlink @agilant/toga-blox' in terminal
2. in consuming application: execute 'npm unlink @agilant/toga-blox' in terminal
3. to check that applications are link, execute: 'ls -l node_modules/@agilant' (should return empty list) in terminal

FontAwesome Icons

This library uses FontAwesome icons from the free icon sets. If you have a FontAwesome Pro subscription, the Pro icons will be used if they are installed in your project. Ensure you follow the setup instructions from FontAwesome for Pro icons.

For users without a Pro subscription, the free icons will be used. Make sure to install the required FontAwesome packages in your project:

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Peer Dependencies (DEPRECATED)

This library requires react-router-dom to be installed in your project. Please ensure that you have react-router-dom installed to avoid any issues with missing modules.

To install react-router-dom, run:

npm install react-router-dom