react-sf-themes

> This packages contains the global Superflows configuration including the default UI theme.

  

Documentation

Read 📖

On This Page

- Introduction
- How It Works
- Theme
- Quickstart
- Customization
- Tests

Introduction

Use the react-sf-themes package to access the global configuration and the default theme provided by Superflows. If needed you can customize it as you want by changing the default values to suit your UI.

How It Works

Customization works as follows:
- Access the default configuration and theme values using this package
- Modify them as per your requirement
- Pass the modified object to your Superflows components

Theme

This package provides default values for:
- Variants
- Types
- Colors
- Spaces
- Dimensions
- Modes
- InputTypes
- Breakpoints

$3

Superflows provides the following variants:
- Primary
- Secondary
- Danger
- Success
- Warning
- Info
- Light
- Dark

$3

Types are as followed:
- Filled
- Outlined

$3

Following colors are provided:

| Variant | Background Color | Text Color |
|--------------|-------------------|--------------------|
| Primary | #0d6efd | #ffffff |
| Secondary | #6c757d | #ffffff |
| Danger | #dc3545 | #ffffff |
| Success | #198754 | #ffffff |
| Warning | #ffc107 | #000000 |
| Info | #0dcaf0 | #000000 |
| Light | #f8f9fa | #000000 |
| Dark | #212529 | #ffffff |

$3

Spaces are dimensions, which are intended to be used for spacings, paddings, margins, etc.

| Space | Value
|------------|-------------------
| min | 5
| ltl | 10
| mod | 15
| big | 20
| lrg | 25
| xlg | 30
| max | 35

$3

Dimensions are default dimensions for certain Superflows components

| Dimension | Value
|---------------------------|-------------------
| navHeight | 60
| navBannerHeight | 30
| menuWidth | 120
| notificationListWidth | 200
| notificationListMaxWidth | 200

$3

Modes are:

| Mode | Value
|------------|-------------------
| Day | day
| Night | night

$3

Input types are types of input accepted from the users in the input field.

| InputType | Value
|-----------------|-------------------
| Name | name
| Email | email
| Mobile | mobile
| Date | date
| DateOfBirth | dateOfBirth
| Gender | gender

$3

Breakpoints are widths, that are used in responsive design.

| Breakpoint | Value
|-----------------|-------------------
| mobile | 480
| tablet | 768
| laptop | 1024
| desktop | 1200

Quickstart

$3

``bash
npm install --save react-sf-themes
`

$3

`tsx
import React from 'react'
import Themes from 'react-sf-themes'

const App = () => {

console.log('Themes', Themes.getTheme());

return

`

Tests

$3

To run tests locally:

`bash
npm test
``

$3

PASS src/index.test.tsx
- Themes
- ✓ Render (3ms)

-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.tsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.445s

License

MIT © superflows-dev