@activatestudio/spritz-ui-components v0.1.3

Spritz UI Components

This package provides shareable, small UI components designed for Spritz partners. These components aim to enhance user experience by offering easy-to-integrate, visually appealing elements for your applications. Use this package to streamline your development process, ensuring a consistent and polished interface across your projects.

The Primary Benefits of This Package

1. Enhanced User Experience: The package offers visually appealing and user-friendly UI components, ensuring a better user interface for your applications.

2. Easy Integration: Designed for simplicity, these components can be seamlessly integrated into your projects, saving you time and effort.

3. Consistency: Achieve a uniform look and feel across your applications with standardized components, enhancing brand consistency.

4. Efficiency: Streamline your development process by utilizing pre-built components, allowing you to focus on core functionality.

5. Customization: Easily customizable components to fit the specific needs of your project, providing flexibility without compromising on quality.

Compatibility

react.js: >= 18.x.x,
node: >= 18.x.x,
next.js: >= 13.x.x

Installation

To install this package use:

 npm install @activatestudio/spritz-ui-components

Quick start

You can read the section below to learn how to use these components in your project.

Documentation

Alert

Custom alert component to display alert message

import {Alert} from "@activatestudio/spritz-ui-components"

<Alert type="success"> I am success alter message </Alert>

Props

Badge

Custom badge component to display badge

import {Badge} from "@activatestudio/spritz-ui-components"

<Badge type="success"> I am success alter message </Alert>

Props

Box Shadow

Custom shadow component to display box with shadow

import {BoxShadow} from "@activatestudio/spritz-ui-components"

<BoxShadow> I am success alter message </BoxShadow>

Props

Brand

Logo with brand name

import {Brand} from "@activatestudio/spritz-ui-components"

<Brand svg="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/acid.svg" />

Props

Button

React button

import {Button} from "@activatestudio/spritz-ui-components"

<Button type="button"> Click me </Button>

Props

DaySelector

React Day selector button

import {DaySelector} from "@activatestudio/spritz-ui-components"

<DaySelector letter="M" selected={true} onClick={()=>{console.log("clicked")}} />

Props

React-redux Form Elements

Checkbox

React redux form checkbox element

import { Field, reduxForm } from 'redux-form';
import {Checkbox} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={Checkbox}
        label="Checkbox 01"
        name="checkbox"
        type="checkbox"
        className=""
        onChange={(ele: any)=>{console.log(ele.target)}}
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'checkboxForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

DropDown

React redux form Dropdown element

import { Field, reduxForm } from 'redux-form';
import {DropDown} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={DropDown}
        label="Dropdown 01"
        className=""
        input = {}
        options = ['one', 'two', 'three']
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'dropdownForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

FloatingInput

React redux form FloatingInput element

import { Field, reduxForm } from 'redux-form';
import {FloatingInput} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={FloatingInput}
        placeholder="FloatingInput"
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'FloatingInputForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

MultiSelect

React redux form MultiSelect element

import { Field, reduxForm } from 'redux-form';
import {MultiSelect} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={MultiSelect}
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'MultiSelectForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

RadioButton

React redux form RadioButton element

import { Field, reduxForm } from 'redux-form';
import {RadioButton} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={RadioButton}
        label='Radio Button'
        labelClass=''
        className=''
        input={'Input of radio'}
        dataType="radio"     
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'MultiSelectForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

SearchInput

React redux form SearchInput element

import { Field, reduxForm } from 'redux-form';
import {SearchInput} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={SearchInput}
        options={[ value: '',
                    label: 'Select an agent',
                    color: '#0C0F13']}
        onChange={(ele: any)=>{console.log(ele.target)}}

      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'SearchInputForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

SelectFilter

React redux form SelectFilter element

import { Field, reduxForm } from 'redux-form';
import {SelectFilter} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={SelectFilter}
        options={[
          {
            value: 'completed',
            label: 'Complete'
          },
          { value: 'failed', label: 'Failed' }
        ]}
        applyFilter={{(ele: any)=>{console.log(ele.target)}}}
        selectedFilter={'selectedFilter'}
        buttonClass={'w-36 font-semibold '}
        setSelectedFilter={(ele: any)=>{console.log(ele.target)}}
        setClassName={(ele: any)=>{console.log(ele.target)}}
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'SelectFilterForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

SelectInput

React redux form SelectInput element

import { Field, reduxForm } from 'redux-form';
import {SelectInput} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={SelectInput}
        options={[
          {
            value: 'completed',
            label: 'Complete'
          },
          { value: 'failed', label: 'Failed' }
        ]}
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'SelectInputForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

SelectOption

React redux form SelectOption element

import { Field, reduxForm } from 'redux-form';
import {SelectOption} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field
        component={SelectOption}
        options={[
          {
            value: 'completed',
            label: 'Complete'
            color: '#0000';
            name: 'Option1';
            logo: 'brandLogo';
            type: 'string';
            icon: './brand.svg';
          },
          { value: 'failed', label: 'Failed' }
        ]}
      />
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'SelectOptionForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

Select

React redux form Select element

import { Field, reduxForm } from 'redux-form';
import {Select} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field component={Select}/>
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'SelectForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

TextArea

React redux form TextArea element

import { Field, reduxForm } from 'redux-form';
import {TextArea} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field component={TextArea}/>
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'TextAreaForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

TextInput

React redux form TextInput element

import { Field, reduxForm } from 'redux-form';
import {TextInput} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field component={TextInput}/>
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'TextInputForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

Toggle

React redux form Toggle element

import { Field, reduxForm } from 'redux-form';
import {Toggle} from "@activatestudio/spritz-ui-components"

const ReduxForm: FunctionComponent<any> = (props)=>{
return (
   <form>
      <Field component={Toggle}/>
   </form>
   )
}

export default reduxForm<any, any, string>({
  form: 'TextInputForm',
  destroyOnUnmount: true,
  forceUnregisterOnUnmount: true
})(ReduxForm);

Props

Components

InfiniteScroll

React Infinite Scroll Component

import {InfiniteScroll} from "@activatestudio/spritz-ui-components"

<InfiniteScroll loader={<p className="text-center">Loading...</p>} fetchData={()=>{console.log("clicked")}} >{children} </InfiniteScroll>

Props

InlineSvg

React Inline Svg Component

import {InlineSvg} from "@activatestudio/spritz-ui-components"

<InlineSvg src={`/assets/svg/brand`} />

Props

Shimmer

React Shimmer Component

import {Shimmer} from "@activatestudio/spritz-ui-components"

<Shimmer/>

Document Shimmer

React Document Shimmer Component

import {DocumentShimmer} from "@activatestudio/spritz-ui-components"

<DocumentShimmer/>

Modal Shimmer

React Modal Shimmer Component

import {ModalShimmer} from "@activatestudio/spritz-ui-components"

<ModalShimmer/>

Queue Shimmer

React Queue Shimmer Component

import {QueueShimmer} from "@activatestudio/spritz-ui-components"

<QueueShimmer/>

SideBar Shimmer

React SideBar Shimmer Component

import {SideBarShimmer} from "@activatestudio/spritz-ui-components"

<SideBarShimmer/>

ShowMore

React ShowMore Component

import {ShowMore} from "@activatestudio/spritz-ui-components"

<ShowMore />

Props

Tabs

React Tabs Component

import {Tabs} from "@activatestudio/spritz-ui-components"

<Tabs label={'Tabs Label'}>{children}</Tabs>

Props

Tooltip

React Tooltip Component

import {Tooltip} from "@activatestudio/spritz-ui-components"

<Tooltip>{children}</Tabs>

Props

Typography

React Typography components

import {HeadingOne,HeadingTwo,HeadingThree,HeadingFour,
        HeadingFive,HeadingSix,Paragraph} from "@activatestudio/spritz-ui-components"

<HeadingOne>{children}</HeadingOne>
<HeadingTwo>{children}</HeadingTwo>
<HeadingThree>{children}</HeadingThree>
<HeadingFour>{children}</HeadingFour>
<HeadingFive>{children}</HeadingFive>
<HeadingSix>{children}</HeadingSix>
<Paragraph>{children}</Paragraph>

Props

PreParagraph

React PreParagraph component

import {PreParagraph} from "@activatestudio/spritz-ui-components"

<PreParagraph>{content}</PreParagraph>

Props

Modules

AppTourConfirmModal

React AppTourConfirmModal Module

import {AppTourConfirmModal} from "@activatestudio/spritz-ui-components"

<AppTourConfirmModal
  modalTilte="AppTourConfirmModal"
  modalDescription="Add To AppTourConfirmModal"
  successBtnText="Success"
  cancelBtnText="Cancecl"
  onClickSuccess={() => console.log('clicked success')}
  onClickCancel={() => console.log('clicked cancel')}
  closeSvg="/assets/svg/closeSmall.svg"
/>

Props

BaseModal

React BaseModal Module

import {BaseModal} from "@activatestudio/spritz-ui-components"

<BaseModal
  heading="Base Modal"
  body={<div><p>'Base modal body'</p></div>}
  onCancel={() => console.log('clicked cancel')}
  closeSvg="/assets/svg/closeSmall.svg"
  show={true}
/>

Props

ConfirmationModal

React ConfirmationModal Module

import {ConfirmationModal} from "@activatestudio/spritz-ui-components"

<ConfirmationModal
  title="Confirmation Modal"
  subTitle="Add to confimation modal"
  successBtnText="Success"
  cancelBtnText="Cancecl"
  onClickSuccess={() => console.log('clicked success')}
  onClickCancel={() => console.log('clicked cancel')}
  closeSvg="/assets/svg/closeSmall.svg"
/>

Props

Header

React Header Module

import {Header} from "@activatestudio/spritz-ui-components"

<Header
  token="1234"
  router="any"
  selectedOrgId="Home"
  activeItem="Home"
  menuClickHandler={() => console.log('clicked success')}
  logoClickHandler={() => console.log('clicked success')}
  afterLoginMenu={['Home', 'Login']}
  beforeLoginMenu={[ 'Login']}
  individualLoginMenu={['Home', 'Login']}
  brandSvg="/assets/svg/main-logo.svg"
  barsSvg="/assets/svg/bars3.svg"
  xMarkSvg="/assets/svg/closeSmall.svg"
  arrowSvg="/assets/svg/closeSmall.svg"
  withRouter="any"
/>

Props