@getgrover/ui

Reusable UI components for grover web apps

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@getgrover/ui
4.23.2a month ago5 years agoMinified + gzip package size for @getgrover/ui in KB

Readme

Grover UI react components
---

Installation:

yarn add @getgrover/ui

Usage:

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.

Storybook

The storybook deployment for the UI library can be found here: https://master.ui-storybook-dev.eu-staging.grover.com/

Development:

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.
  1. Create new component in /packages folder
  2. Import new component through init. file /index.js
  3. Create new story in the component folder packages/NewComponent/NewComponent.stories.jsx
  4. Type yarn start to run the development server
  5. Storybook started on => http://localhost:6006/
  6. Repeat 1-4 ("Hot Module Replacement" is running)

Customization

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 the Input component).

Deploy:

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
```bash
APPLICATION: ui
GIT_REFERENCE: vNEW_RELEASE_VERSION
ENVIRONMENT: production
```
  • Once the build is done, you can find it here https://ui.grover.com

Release process

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:

---