yarn add @getgrover/ui
Import fonts:
Every consumer of this library is expected to add the required fonts on its own. This can be done by adding the following snippet to the <head>
of your applications html
:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700;800&display=swap"
rel="stylesheet"
/>
Every component is a named export. You can import any component as follows:
import { Button } from '@getgrover/ui';
The UI library currently offers two different build outputs: umd (main) and esm (module). Depending on your build setup your bundler will prefer the tree-shakable esm.
The storybook deployment for the UI library can be found here: https://main.ui-storybook-dev.eu-staging.grover.com/
This repository is maintained by @devsbb/web-platform but everyone is welcome to contribute. For contributing guidelines, please see contributing.
Local development process implemented through @storybook/react
. Please read this documentation before staring developing new components.
- Create new component in
/packages
folder - Import new component through init. file
/index.js
- Create new story in the component folder
packages/NewComponent/NewComponent.stories.jsx
- Type
yarn start
to run the development server - Storybook started on => http://localhost:6006/
- Repeat 1-4 ("Hot Module Replacement" is running)
We want consumers to be able to customize UI components according to their needs. Since we build all new components via styled-components
, there are have two ways for a single component to allow it's customization:
- if we want the consumer to slightly alter the component look, we export its settings via the theme.
- if we want to allow any customization to build new components on top of the current one, we go with the
classNames
+styled.attrs
approach (take a look at theInput
component).
Deployment can be done using Jenkins, here is the instruction.
- Create new release in Github
- Open Deploy Docker Project and select
Build with Parameters
- Fill the needed parameters
APPLICATION: ui GIT_REFERENCE: vNEW_RELEASE_VERSION ENVIRONMENT: production
- Once the build is done, you can find it here https://ui.grover.com
The detailed instructions could be found here: https://byebuyglobaloperations.atlassian.net/wiki/spaces/TECH/pages/877757054/Release+process
IMPORTANT: PR name MUST follow Angular Commit Message Conventions; otherwise, it won’t trigger a release nor include the commit in the changelog or the release note, e.g. feat: fix: docs: