0.2.10 • Published 9 months ago
@parc3l/components v0.2.10
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:
- Run
yarn
inside thecomponent-library
directory. - Run
yarn dev
to start a Storybook instance.
Create a New Theme
- Navigate to
src/themes
. - Duplicate
darkTheme
orlightTheme
. - Replace existing color codes with your own design system.
Modifying spacing
- Navigate to
src/themes
. - Duplicate
commonTheme
. - Replace
space
variables with your desired spacing system.
Adding a New Theme to the Storybook Toolbar
- Create a new theme (see above).
- In
.storybook/preview.js
, add your theme name toglobalTypes.theme.toolbar.items
. - In
.storybook/useTheme.js
: a. Import your new theme:import { ..., yourTheme } from ../src/themes
. b. Add the following lineconst YourTheme = createTheme(yourTheme);
. - Add
yourThemeName
class name to the logic inuseTheme.js
. - In
styles/styles.css
, include your desired background color for the[data-theme='yourThemeName']
tag.
Example:
[data-theme='light'] {
background-color: #ffffff;
}
0.2.10
9 months ago
0.2.9
9 months ago
0.2.8
9 months ago
0.2.7
9 months ago
0.2.6
9 months ago
0.2.5
9 months ago
0.2.4
9 months ago
0.2.3
9 months ago
0.2.2
9 months ago
0.2.1
9 months ago
0.2.0
10 months ago
0.1.4
11 months ago
0.1.3
11 months ago
0.1.2
11 months ago
0.1.1
11 months ago
0.1.0
11 months ago
0.0.9
11 months ago
0.0.8
11 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.5
11 months ago
0.0.4
11 months ago
0.0.3
11 months ago
0.0.2
11 months ago
0.0.1
11 months ago