Vibe Design System - Core

monday.com React components library - Storybook

| Firefox | Chrome | Safari | iOS Safari | Samsung | Opera | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | last 4 versions | last 4 versions | 14+ | last 2 versions | last 2 versions | last 2 versions |

Usage

Components are imported from the library's root entry:

import { Button } from "monday-ui-react-core";

In order to load all the relevant CSS tokens, you should import the tokens file at the root of your application file

import "monday-ui-react-core/tokens";

If your project (or it's Storybook) is importing files differently - read more here.

Font installation

We don't import fonts ourselves, we work best with the following fonts - Poppins, Figtree and Roboto, we recommend adding the following link import to your application

<link
  href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
  rel="stylesheet"
/>

Peer dependencies

We are reliant on React and React DOM, we are using them as externals, and we don't package them to the package, so you must have them in your project

Storybook

We are using storybook in order to develop the components independently of any consumer. run this to build & run the storybook locally:

yarn storybook

the storybook will be served on http://localhost:7007

Developing locally with your consumer application

When developing locally, we are using a npm functionality called npm link, this allows us to work locally on our package and use it in a different project without publishing. This functionality basically overrides the npm mapping between package name to its repo, and points it to where the package is located locally.

Troubleshooting local development

• If you are using NVM, make sure both packages are using the same version.
• Because we are using react hooks and having react as a peerDependency - if you want to develop locally and encounter issues with "invalid hook call" see this github thread. The quick fix is in your webpack config file alias react to resolve the node_modules path

Go to the project's directory and run:

nvm use
npm unlink
npm link
npm start

Themes

Theming is supported using CSS variables - for more info on theming please read the theme guidelines file

SSR (Server Side Rendering)

Components are using style injection on the client side (into element) This is not usable on the server side. In order to get the required styles on the server side, you should initialize

globalThis.injectedStyles = {};

in order to have each server side render component css inserted into the injectedStyles object each component will insert its css string under a unique key. Then you can join all the values into one string and add it under a element