@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):

import React from 'react';

import "@openbricksandbraces/designsystem/lib/styles/dist/index.css"
// import right below the designsystem styles
import "@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 styles
import "@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"

function App() {
  // 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.