Overview:

This guide provides instructions for setting up and installing the Braid library in a project. It is optimized for usage with sku but can be configured for custom build setups with additional guidance from project contributors. The guide covers installation, importing necessary components, and customizing the technical implementation of certain components. It also provides information on style guide migration and local development using pnpm. Additionally, it mentions the use of Chromatic for component screenshot testing and the project’s MIT license.

Features:

• Easy installation process
• Support for sku and custom build setups
• Import and use of reset styles and required Braid theme
• Optional customization of Link and TextLink components
• Style guide migration guide
• Local development using pnpm
• Component screenshot testing with Chromatic
• MIT license

Installation:

To install the Braid library, first, make sure you have a sku project. Then, follow these steps:

1. Install the library by running:

npm install <library-name>

2. Import the reset styles, required theme, and BraidProvider component at the top of your application:

import { reset, requiredTheme, BraidProvider } from '<library-name>';

Note: Import the reset styles first to avoid CSS ordering issues.

3. Render the BraidProvider component and provide the imported theme via the theme prop:

<BraidProvider theme={requiredTheme}>
  // Your application code here
</BraidProvider>

(Optional) If you want to opt-out of the provided body styles when rendering within the context of another application, use the following code snippet:

<BraidProvider theme={requiredTheme} suppressClassNameWarning>
  // Your application code here
</BraidProvider>

(Optional) To customize the technical implementation of all Link and TextLink components from Braid, pass a custom component to the linkComponent prop on BraidProvider. For example, if you want to use React Router links for all relative links:

import { Link as ReactRouterLink } from 'react-router-dom';

<BraidProvider theme={requiredTheme} linkComponent={ReactRouterLink}>
  // Your application code here
</BraidProvider>

Summary:

This guide provides a step-by-step installation process and usage instructions for the Braid library. It covers importing necessary components, customizing component implementations, and provides additional guides for style guide migration and local development. The Braid library offers easy integration into projects with support for both sku and custom build setups. Component screenshot testing with Chromatic is also mentioned as a feature of the library. The project is licensed under MIT.