wri-design-systems

wri-design-systems

WRI UI Library

Requirements

Node: 20.16.0

React: 18.3.1

Installation

yarn add wri-design-systems

or

npm i wri-design-systems

Other dependecies

yarn add @chakra-ui/react @emotion/react @emotion/styled

or

npm i @chakra-ui/react @emotion/react @emotion/styled

Usage

Create the Project Theme

With this custom theme you can change the color scheme according to your Project Theme

import { createSystem, defaultConfig } from '@chakra-ui/react'

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      colors: {
        neutral: {
          300: { value: '#ff5252' },
          500: { value: '#ff0000' },
        },
        primary: {
          200: { value: '#93ff93' },
          500: { value: '#d80a5d' },
          600: { value: '#16b816' },
          700: { value: '#006100' },
        },
        secondary: {
          ...
        },
        success: {
          ...
        },
      },
    },
  },
})

Wrap ChakraProvider at the root of your app

import React from 'react'
import { ChakraProvider, defaultSystem } from '@chakra-ui/react'
import { system } from './lib/theme'

function App() {
  return (
    {/* if you want to use the default WRI Theme colors */}
    {/* <ChakraProvider value={defaultSystem}> */}

    {/* if you want to use your custom system Theme colors */}
    <ChakraProvider value={system}>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}

Components

General

• Inline Message
• Navigation Rail
• Slider
• Tab Bar
• Tag

Buttons

• Button
• Close Button
• Icon Button

Controls

• Checkbox
• Radio Button
• Switch

Inputs

• Text Input
• Text Area

Layers

• Layer Group
• Layer Item
• Layer Panel
• Layer Sidebar

Legend

• Layer Parameters
• Legend Item
• Legend Panel
• Qualitative Attributes
• Scale Legend