@parc3l/components
TypeScript icon, indicating that this package has built-in type declarations

0.2.10 • Public • Published

Parcel Logo

Twitter Follow

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;
}

Package Sidebar

Install

npm i @parc3l/components

Weekly Downloads

5

Version

0.2.10

License

UNLICENSED

Unpacked Size

351 kB

Total Files

319

Last publish

Collaborators

  • jgarcie
  • parcel-technology