@getgrover/ui
TypeScript icon, indicating that this package has built-in type declarations

5.0.2 • Public • Published

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://main.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
    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:



Readme

Keywords

none

Package Sidebar

Install

npm i @getgrover/ui

Weekly Downloads

652

Version

5.0.2

License

MIT

Unpacked Size

1.21 MB

Total Files

496

Last publish

Collaborators

  • getgrover