The Parcel Component Library is a collection of flexible, opinonated React components used as the basis for our SDK and White Label Theming System.

Features

• 🎨 Simple Theming – Configure a single JSON object and integrate your design system seamlessly throughout all components.
• ⚡️ Powerful Primitives – Every basic component you need to build a beautiful marketplace—Buttons, Cards, Modals, Toats, and more.
• 📖 Comprehensive Testing - Test isolated components with a pre-configured Storybook development server.

Local Development

Follow a few easy steps to start testing:

1. Run yarn inside the component-library directory.
2. Run yarn dev to start a Storybook instance.

Create a New Theme

1. Navigate to src/themes.
2. Duplicate darkTheme or lightTheme.
3. Replace existing color codes with your own design system.

Modifying spacing

1. Navigate to src/themes.
2. Duplicate commonTheme.
3. Replace space variables with your desired spacing system.

Adding a New Theme to the Storybook Toolbar

1. Create a new theme (see above).
2. In .storybook/preview.js, add your theme name to globalTypes.theme.toolbar.items.
3. In .storybook/useTheme.js: a. Import your new theme: import { ..., yourTheme } from ../src/themes. b. Add the following line const YourTheme = createTheme(yourTheme);.
4. Add yourThemeName class name to the logic in useTheme.js.
5. In styles/styles.css, include your desired background color for the [data-theme='yourThemeName'] tag.

Example:

[data-theme='light'] {
  background-color: #ffffff;
}