@openbricksandbraces/webcomponents

Awesome webcomponents as a designsystem extension for the Bricks & Braces brand.

How to use

At first, install the dependencies:

yarn add @openbricksandbraces/webcomponents

Then, import the styles from your main / application component (App.tsx on create-react-app):

importReactfrom'react';import"@openbricksandbraces/designsystem/lib/styles/dist/index.css"// import right below the designsystem stylesimport"@openbricksandbraces/webcomponents/lib/styles/dist/index.css"import'./App.css';
...

Instead of importing already processed styles you could also import

import"@openbricksandbraces/designsystem/lib/styles/postcss/index.css";// import right below the designsystem stylesimport"@openbricksandbraces/webcomponents/lib/styles/postcss/index.css";

for easy customisation reasons. Please note, that you need a postcss-loader for this. Make yourself common with the configuration by looking at the designsystem repo.

Last but not least, use a webcomponent from the library:

...
import{Leadspace}from"@openbricksandbraces/webcomponents"functionApp(){// see the designystem repo for why you need to initialize it via javascript.useInitialize();return(
...
<Leadspace/>...);}

Aaaand you are done!

Tech Stack

• Typescript
• React
• PostCSS

Dev

• Storybook
• Prettier, ESlint, Stylelint
• Husky
• Jest, Enzyme

Contribute

At first, install husky using yarn husky install.

To start storybook and show all components, simply run:

yarn storybook

Other commands

yarn test
yarn format:check
yarn format:fix
yarn build:package
yarn build:storybook
yarn start:storybook

Publishing and dealing with yarn berry

Disclaimer: Because we are using yarn berry options from .yarnrc and .npmrc will be IGNORED. Please look into the offical documentation for the new file structure.

1. Insert yarn npm login --publish and authenticate using the npm account of openbricksandbraces.
2. Make sure you've installed the dependencies and built the package yarn && yarn build:package.
3. Using yarn npm publish --tag latest you will be able to publish a new version of the package! 🎉

License

Bricks & Braces Internal Property. No License given.