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

Variants

Superflows provides the following variants:

• Primary
• Secondary
• Danger
• Success
• Warning
• Info
• Light
• Dark

Types

Types are as followed:

• Filled
• Outlined

Colors

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 |

Spaces

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

Dimensions

Dimensions are default dimensions for certain Superflows components

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

Modes

Modes are:

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

InputTypes

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

Breakpoints

Breakpoints are widths, that are used in responsive design.

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

Quickstart

Installation

npm install --save react-sf-themes

Usage

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

const App = () => {

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

  return <div></div>
}

export default App

Tests

How To Run

To run tests locally:

npm test

Results

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