Skuad Design System contains foundational React UI components, created using Mui components in it's core to provide a consistent look and feel across the Skuad product in terms of both design and functionality.

Installation

Make sure to also add other dependencies which is needed to run this library

yarn add @skuad/ui

Direct Dependencies needed to run this library

• "@emotion/react": "^11.10.5",
• "@emotion/styled": "^11.10.5",
• "@mui/icons-material": "^5.6.2",
• "@mui/lab": "^5.0.0-alpha.79",
• "@mui/material": "^5.11.7",
• "dayjs": "^1.11.5",
• "react": "^17.0.1",
• "react-phone-input-2": "^2.15.1",
• "react-router-dom": "^6.3.0"

Collaboration

We're very delighted to have you join the Skuad community. We're always looking for new collaborators to work together. Please follow the Skuad Git Contribution Guidelines to get started.

Documentation

This UI library consist of a number of components that are used to build the Skuad frontend applications.

It is divided in two main categories:

• core - These are the core components that are used to create UI, which is using Mui components in it's core. It includes all primary Mui components with addition of following new components too:-

  • CheckboxGroupInput
  • CurrencyInput
  • RadioGroupInput

• web - These are re-usable components responsible for giving consistent UI/UX.

  • CalloutData and CalloutDataSet
  • DetailedAvatar
  • HistoryCard
  • RouteLink
  • SkeletonProgress
  • SubmitButtonGroup
  • Table

• icon - These are custom icon for skuad application created with Mui's createSvgIcon and extends all default Mui-Icon functionalities. It also includes all the Mui inbuilt icons.

Core Components

import { Button, Alert, Select } from '@skuad/ui';
// or
import { Button, Alert, Select } from '@skuad/ui/core';

Web Components

import { DetailedAvatar, CalloutDataSet, Table } from '@skuad/ui';
// or
import { DetailedAvatar, CalloutDataSet, Table } from '@skuad/ui/web';

Icon

import { SettingIcon, DashboardIcon } from '@skuad/ui/icon';

Themes

This library also exposes default theme to be used across the Skuad product.

import { SkuadDefaultTheme } from '@skuad/ui';

Storybook

All the components in this library are available in the storybook with their dedicated stories.

Skuad UI Storybook can be found at http://skuad-ui.dev.internal.skuad.in/

Due to internal organization rules, this url is only accessible with skuad vpn access.

Steps to open above url with VPN -

1. Navigate to https://vpn.skuad.in and login using skuad email, and generate Profile URI.

2. Download client application and start the VPN after importing the profile in VPN client application.

3. Now you can access the URL