@activate-spritz-components/spritz-ui-components

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

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

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

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

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

• 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 "@activate-spritz-components/spritz-ui-components"

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

Props

Name	Type	Value	Description
type (required)	String	"success", "warning" and "error"	Pass message type for color and bg color
message (required)	String	"Message"	Content for display in alert

Badge

Custom badge component to display badge

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

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

Props

Name	Type	Value	Description
badgeText (required)	String	"Message"	Pass text to display in badge
className (optional)	String	"overwrite design with your class"	To modify badge design according to your need

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

Name	Type	Value	Description
children (required)	ReactNode	"React components"	Pass react node to display in box
className (optional)	String	"overwrite design with your class"	Pass class to modify design according to your need

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

Name	Type	Value	Description
svg (required)	String	"Svg url"	Pass svg url for brand logo
clickHandler (optional)	Function	clickHandler={(e)=>{console.log(e)}}	On element click handler

Button

React button

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

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

Props

Name	Type	Value	Description
type (require)	String	"button, submit, and reset"	Button type
id (optional)	String	"Element id"	Pass svg url for brand logo
children (optional)	ReactNode	"Html and string"	Display content
className (optional)	String	"Css class"	Pass class to modify design
disabled (optional)	Boolean	"true/false"	Is disabled button
leftIcon (optional)	String	"svg icon path"	Pass icon to display icon on left side of button
rightIcon (optional)	String	"svg icon path"	Pass icon to display icon on right side of button
iconColor (optional)	Hex code	"Icon color code"	Pass color for icon
onClick (optional)	Function	"onClick={()=>{console.log('clicked')}}"	Handle button on click

DaySelector

React Day selector button

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

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

Props

Name	Type	Value	Description
letter (require)	String	"Week first latter"	Week first name with badge
selected (required)	Boolean	"true/false"	Is selected
className (optional)	String	"Css class"	Pass class to modify design
onClick (required)	Function	"onClick={()=>{console.log('clicked')}}"	Handle button on click

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

Name	Type	Value	Description
label (require)	String	"Checkbox display label"	Label of check box
type (require)	String	"checkbox"	Type of checkbox
name (require)	String	"checkbox"	Name of checkbox
id (optional)	String	"id"	Id of checkbox
className (optional)	String	"Css class"	Pass class to modify design
onChange (required)	Function	"onChange={(ele: any)=>{console.log(ele.target)}}"	Handle checkbox on change

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

Name	Type	Value	Description
label (require)	String	"Dropdown display label"	Label of dropdown
classname (require)	String	"Css class"	Pass class to modify design
input (require)	String	"input"	input for dropdown
id (optional)	String	"id"	Id of dropdown
className (optionsal)	String	"Css class"	Pass class to modify design
options (required)	Array	"['one', 'two', 'three']"	Options for dropdown

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

Name	Type	Value	Description
placeholder (required)	String	"FloatingInput"	Placeholder of FloatingInput
input (optional)	String	"input"	input for FloatingInput
step (optional)	String	"input"	input for FloatingInput
label (optional)	String	"Checkbox display label"	Label of FloatingInput
type (optional)	String	"FloatingInput"	Type of FloatingInput
initianlValue (optional)	String	"FloatingInput"	initianlValue of FloatingInput
id (optional)	String	"id"	Id of FloatingInput
className (optional)	String	"Css class"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for floating input
metaError (optional)	String	"{touched:false}"	Meta Error for floating input
min (optional)	Number	"input"	Minimun number for FloatingInput

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

Name	Type	Value	Description
input (optional)	String	"input"	input for MultiSelect
dataType (optional)	String	"MultiSelect"	Data Type of MultiSelect
id (optional)	String	"id"	Id of MultiSelect
className (optional)	String	"Css class"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for floating input
metaError (optional)	String	"{touched:false}"	Meta Error for floating input
options (optional)	Array	"['one', 'two', 'three']"	Options for MultiSelect

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

Name	Type	Value	Description
input (required)	String	"input"	input for RadioButton
dataType (required)	String	"RadioButton"	Data Type of RadioButton
id (optional)	String	"id"	Id of RadioButton
className (required)	String	"Css class"	Pass class to modify design
labelClass (required)	String	"Css class"	Pass class to modify design
label (optional)	String	"RadioButton display label"	RadioButton of FloatingInput
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for floating input
metaError (optional)	String	"{touched:false}"	Meta Error for floating input

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

Name	Type	Value	Description
options (required)	Array	"[value:'one', label:'two', color:'#0000']"	Options for search-input
className (optional)	String	"Css class"	Pass class to modify design
optionClass (optional)	String	"Css class"	Pass class to modify design
panelClass (optional)	String	"Css class"	Pass class to modify design
selectedOption (optional)	Array	"[value:'one', label:'two', color:'#0000']"	Selected options for search-input
color (optional)	String	"#0000"	Pass color to modify design
setAgentForInput (optional)	Function	"setAgentForInput={(ele: any)=>{console.log(ele.target)}}"	Handle agent for input on change
onChange (optional)	Function	"onChange={(ele: any)=>{console.log(ele.target)}}"	Handle search-input on change

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

Name	Type	Value	Description
options (required)	Array	"[value:'one', label:'two', color:'#0000']"	Options for select-filter
className (optional)	String	"Css class"	Pass class to modify design
optionClass (optional)	String	"Css class"	Pass class to modify design
panelClass (optional)	String	"Css class"	Pass class to modify design
defaultOption (optional)	String	"[value:'one']"	Pass default option for select-filter
buttonClass (required)	String	"Css class"	Pass class to modify design
selectedFilter (required)	String	"Select-filter"	Pass selected filter for select-filter
setSelectedFilter (required)	Function	"setSelectedFilter={(ele: any)=>{console.log(ele.target)}}"	Handle selected filter
applyFilter (required)	Function	"applyFilter={(ele: any)=>{console.log(ele.target)}}"	Handle filter on applied Filter
setClassName (required)	Function	"setClassName={(ele: any)=>{console.log(ele.target)}}"	Handle class for select-filter

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

Name	Type	Value	Description
options (required)	Array	"[value:'one', label:'two', color:'#0000']"	Options for select-input
className (optional)	String	"Css class"	Pass class to modify design
optionClass (optional)	String	"Css class"	Pass class to modify design
panelClass (optional)	String	"Css class"	Pass class to modify design
selectedOption (optional)	String	"Select-input"	Pass selected option for select-input
setAgentForInput (optional)	Function	"setAgentForInput={(ele: any)=>{console.log(ele.target)}}"	Handle agent for input
onChange (optional)	Function	"onChange={(ele: any)=>{console.log(ele.target)}}"	Handle select-input on change
color (optional)	String	"#0000"	Pass color to modify design

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

Name	Type	Value	Description
options (required)	Array	"[value:'one', label:'two', color:'#0000']"	Options for select-input
optionClass (optional)	String	"Css class"	Pass class to modify design
panelClass (optional)	String	"Css class"	Pass class to modify design
onSelect (optional)	Function	"onSelect={(ele: any)=>{console.log(ele.target)}}"	Handle select-option on select

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

Name	Type	Value	Description
input (optional)	String	"input"	input for Select
options (optional)	Array	"[value:'one', label:'two', color:'#0000']"	Options for select
label (optional)	String	"Select display label"	Label of Select
dataType (optional)	String	"Select"	Data Type of Select
id (optional)	String	"id"	Id of Select
className (optional)	String	"Css class"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for select
metaError (optional)	String	"{touched:false}"	Meta Error for select

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

Name	Type	Value	Description
input (optional)	String	"input"	input for Select
label (optional)	String	"Select display label"	Label of Select
dataType (optional)	String	"Select"	Data Type of Select
id (optional)	String	"id"	Id of Select
className (optional)	String	"Css class"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for select
metaError (optional)	String	"{touched:false}"	Meta Error for select
placeholder (optional)	String	"TextArea"	Placeholder of TextArea
row (optional)	Number	"1"	Number of rows for TextArea
cols (optional)	Number	"1"	Number of cols forTextArea

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

Name	Type	Value	Description
input (optional)	String	"input"	input for Text-Input
label (optional)	String	"Text-Input display label"	Label of Text-Input
dataType (optional)	String	"Text-Input"	Data Type of Text-Input
id (optional)	String	"id"	Id of Text-Input
className (optional)	String	"Css class"	Pass class to modify design
labelClass (optional)	String	"Css class"	Pass class to modify design
disabled (optional)	Boolean	False	Pass boolean to show if text-input disabled or not
leftIconClass (optional)	String	"Css class"	Pass class to modify design
rightIconClass (optional)	String	"Css class"	Pass class to modify design
rightIcon (optional)	String	"/rightIcon.svg"	Pass class to modify design
leftIcon (optional)	String	"/leftIcon.svg"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for select
placeholder (optional)	String	"TextInput"	Placeholder of TextInput

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

Name	Type	Value	Description
input (optional)	String	"input"	input for Text-Input
label (optional)	String	"Text-Input display label"	Label of Text-Input
dataType (optional)	String	"Text-Input"	Data Type of Text-Input
className (optional)	String	"Css class"	Pass class to modify design
meta (optional)	Object	"{touched?: boolean; error?: string;}	Handle meta tags for toggle
metaError (optional)	String	"{touched:false}"	Meta Error for toggle

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

Name	Type	Value	Description
loader (require)	ReactNode	" Loading... "	Pass loading context
children (required)	ReactNode	"React components"	Pass react node to display in box
fetchData (require)	Function	"fetchData={(ele: any)=>{console.log(ele.target)}}"	Handle fetching data for infinite scroll on change
hasmore (optional)	Boolean	"True"	Boolean value for data
endMessage (optional)	ReactNode	" End Message "	Pass end message context
className (optional)	String	"Css class"	Pass class to modify design

InlineSvg

React Inline Svg Component

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

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

Props

Name	Type	Value	Description
src (require)	String	"/assets/svg/brand"	Pass source file of svg
height (optional)	Number	200	Pass height of the svg
width (optional)	Number	300	Pass width of the svg
className (optional)	String	"Css class"	Pass class to modify design
onClick (optional)	Function	"onClick={()=>{console.log('clicked')}}"	Handle svg on click

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

Name	Type	Value	Description
color (optional)	String	"#0000"	Pass color for SVG
toggleShowMore (optional)	Boolean	True	Pass boolean value for toggling
itemsLeft (optional)	Number	1	Pass number of items are left
className (optional)	String	"Css class"	Pass class to modify design

Tabs

React Tabs Component

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

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

Props

Name	Type	Value	Description
label (require)	String	"Tabs display label"	Label of Tabs
children (required)	ReactNode	"React components"	Pass react node to display in box

Tooltip

React Tooltip Component

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

<Tooltip>{children}</Tabs>

Props

Name	Type	Value	Description
title (optional)	String	"Tootltip"	Title of Tooltip
children (required)	ReactNode	"React components"	Pass react node to display in box
className (optional)	String	"Css class"	Pass class to modify design

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

Name	Type	Value	Description
children (required)	ReactNode	"React components"	Pass react node to display in box
className (optional)	String	"Css class"	Pass class to modify design

PreParagraph

React PreParagraph component

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

<PreParagraph>{content}</PreParagraph>

Props

Name	Type	Value	Description
content (required)	ReactNode	"React components"	Pass react node to display in box

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

Name	Type	Value	Description
modalTitle (required)	String	"AppTourConfirmModal"	Pass modal title for app tour confirm modal
modalDescription (required)	String	"Add To AppTourConfirmModal"	Pass modal description for app tour confirm modal
successBtnText (required)	String	"Success"	Pass text for success button
cancelBtnText (required)	String	"Cancel"	Pass text for cancel button
onClickSuccess (required)	Function	"onClickSuccess={() => console.log('clicked success')}"	Pass function to handle success button
onClickCancel (required)	Function	"onClickCancel={() => console.log('clicked cancel')}"	Pass function to handle cancel button
closeSvg (required)	String	"/assets/svg/closeSmall.svg"	Pass close icon svg url
modalInstructionText (optional)	String	"Instruction message"	modal instruction message for app tour confirm modal
className (optional)	String	"Css class"	Pass class to modify design

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

Name	Type	Value	Description
heading (required)	String	"Base Modal"	Pass heading for base-modal
body (required)	ReactNode	"React components"	Pass react node to display in box
show (required)	Boolean	"True"	Pass boolean value to show/hide base modal
onCancel (required)	Function	"onCancel={() => console.log('clicked cancel')}"	Pass function to handle cancel button
closeSvg (required)	String	"/assets/svg/closeSmall.svg"	Pass close icon svg url
isModalLoading (required)	Boolean	"True"	Pass boolean value to determine if modal loading
className (optional)	String	"Css class"	Pass class to modify design
bodyClass (optional)	String	"Css class"	Pass class to modify design

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

Name	Type	Value	Description
title (required)	String	"Confirmation Modal"	Pass title for confirmation-modal
subTitle (required)	String	"Add to confimation modal"	Pass subtitle of confirmation-modal
successBtnText (required)	String	"Success"	Pass text for success button
cancelBtnText (required)	String	"Cancel"	Pass text for cancel button
onClickSuccess (required)	Function	"onClickSuccess={() => console.log('clicked success')}"	Pass function to handle success button
onClickCancel (required)	Function	"onClickCancel={() => console.log('clicked cancel')}"	Pass function to handle cancel button
closeSvg (required)	String	"/assets/svg/closeSmall.svg"	Pass close icon svg url
height (optional)	Number	"400"	Pass height for the confirmation modal
className (optional)	String	"Css class"	Pass class to modify design

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

Name	Type	Value	Description
token (required)	String	"user token"	Pass user token
router (required)	String	"Router path"	Pass router path
selectedOrgId (required)	String	"Home"	Pass selected Org for Header
activeItem (required)	String	"Home"	Pass active header item
menuClickHandler (required)	Function	"menuClickHandler={() => console.log('')}"	Pass function to handle menu click
logoClickHandler (required)	Function	"logoClickHandler={() => console.log('')}"	Pass function to handle logo click
afterLoginMenu (required)	Array	"['Home', 'Login']"	Pass array of item after user login for header menu
beforeLoginMenu (required)	Array	"[ 'Login']"	Pass array of item before user login for header menu
individualLoginMenu (required)	String	"['Home' , 'Settings']"	Pass array of item for individual login menu
brandSvg (required)	String	"/assets/svg/brandSvg.svg"	Pass brand icon svg url
barsSvg (required)	String	"/assets/svg/barsSvg.svg"	Pass close bars svg url
xMarkSvg (required)	String	"/assets/svg/xMarkSvg.svg"	Pass close xMark svg url
arrowSvg (required)	String	"/assets/svg/arrowSvg.svg"	Pass close arrow svg url
withRouter (required)	String	"withRouter from redux"	Associated with redux router
SETTING_HEADING (optional)	String	"Setting Heading"	Pass setting heading

ResponsiveNavbar

A comprehensive, responsive navbar component with built-in hamburger menu functionality. Supports both navigation and action items, with customizable styling and behavior for mobile and desktop views.

import { ResponsiveNavbar } from "@activate-spritz-components/spritz-ui-components"

const navigationItems = [
  { 
    id: 'spritz', 
    label: 'Spritz', 
    href: '/spritz',
    type: 'navigation'
  },
  { 
    id: 'logout', 
    label: 'Log out', 
    type: 'action',
    onClick: () => {
      console.log('Logout clicked!');
      // Handle logout logic
    }
  }
];

<ResponsiveNavbar
  logo={<YourLogo />}
  rightContent={<UserMenu />}
  navigationItems={navigationItems}
  onNavigationItemClick={(item) => console.log('Clicked:', item)}
  onLogoClick={() => window.location.href = '/'}
  height={64}
  mobileHeight={56}
  backgroundColor="bg-white"
  borderColor="border-gray-200"
  shadow={false}
  showHeader={false}
  mobileOpenInNewTab={true}
  desktopOpenInNewTab={false}
  menuItemTextColor="text-gray-900"
  menuItemHoverColor="hover:bg-gray-50"
  menuItemActiveColor="bg-blue-100 text-blue-900"
/>

Props

Name	Type	Default	Description
id	string	-	Unique identifier for the navbar
className	string	-	Additional CSS classes for the navbar
height	number	64	Height of the navbar in pixels
mobileHeight	number	-	Height of the navbar on mobile devices
logo	ReactNode	-	Logo component to display on the left
leftContent	ReactNode	-	Additional content to display on the left
rightContent	ReactNode	-	Additional content to display on the right
children	ReactNode	-	Content to display in the center
navigationItems	NavItem[]	[]	Array of navigation items for the hamburger menu
backgroundColor	string	'bg-white'	Background color class for the navbar
borderColor	string	'border-gray-200'	Border color class for the navbar
shadow	boolean	false	Whether to show shadow on the navbar
hamburgerIcon	ReactNode	-	Custom hamburger icon component
showHeader	boolean	false	Whether to show header in the dropdown/sidebar
menuTitle	string	'Menu'	Title for the menu header
menuPosition	'left' | 'right'	'right'	Position of the hamburger menu
menuVariant	'dropdown' | 'sidebar'	'dropdown'	Type of menu (dropdown for desktop, sidebar for mobile)
defaultOpenInNewTab	boolean	false	Default behavior for opening links in new tab
mobileOpenInNewTab	boolean	-	Whether to open links in new tab on mobile
desktopOpenInNewTab	boolean	-	Whether to open links in new tab on desktop
menuBackgroundColor	string	'bg-white'	Background color for the menu
menuBorderColor	string	'border-gray-200'	Border color for the menu
menuShadow	boolean	true	Whether to show shadow on the menu
menuItemTextColor	string	'text-gray-900'	Text color for menu items
menuItemHoverColor	string	'hover:bg-gray-50'	Hover color for menu items
menuItemActiveColor	string	'bg-gray-100 text-gray-900'	Active state color for menu items
onNavigationItemClick	(item: NavItem) => void	-	Callback when a navigation item is clicked
onMenuOpenChange	(isOpen: boolean) => void	-	Callback when menu open state changes
onLogoClick	() => void	-	Callback when logo is clicked

NavItem Interface

interface NavItem {
  id: string;
  label: string;
  href?: string;
  icon?: ReactNode;
  onClick?: () => void;
  isActive?: boolean;
  isDisabled?: boolean;
  openInNewTab?: boolean;
  type?: 'navigation' | 'action' | 'separator';
}

Property	Type	Description
id	string	Unique identifier for the item
label	string	Display text for the item
href	string	URL for navigation items
icon	ReactNode	Optional icon for the item
onClick	() => void	Function to call for action items
isActive	boolean	Whether the item is currently active
isDisabled	boolean	Whether the item is disabled
openInNewTab	boolean	Whether to open link in new tab
type	'navigation' | 'action' | 'separator'	Type of item (navigation for links, action for functions, separator for visual dividers)
separatorElement	ReactNode	Custom separator element (alternative to type: 'separator')
separatorStyle	{ height?: string, borderColor?: string, backgroundColor?: string, margin?: string }	Custom styling for default separators

Features

• Responsive Design: Automatically adapts to mobile and desktop views
• Flexible Navigation: Supports both URL navigation and function calls
• Customizable Styling: Extensive styling options for all elements
• Logo Integration: Custom logo with click handler support
• Hamburger Menu: Built-in responsive hamburger menu with dropdown/sidebar variants
• Environment Variables: Support for environment-based navigation URLs
• Height Management: Responsive height with mobile-specific sizing
• Border Consistency: Consistent border styling across mobile and desktop
• Action Items: Support for function-based items like logout
• Separator Support: Visual dividers to organize menu items
• Accessibility: Proper ARIA labels and keyboard navigation

Examples

Basic Navigation:

const navigationItems = [
  { id: 'home', label: 'Home', href: '/', type: 'navigation' },
  { id: 'about', label: 'About', href: '/about', type: 'navigation' },
  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }
];

<ResponsiveNavbar
  logo={<Logo />}
  navigationItems={navigationItems}
  onNavigationItemClick={handleItemClick}
/>

With Environment Variables:

const navigationItems = [
  { 
    id: 'spritz', 
    label: 'Spritz', 
    href: CONFIG.SpritzNavigationUrl || '/spritz',
    type: 'navigation'
  },
  { 
    id: 'logout', 
    label: 'Log out', 
    type: 'action',
    onClick: () => {
      // Handle logout logic
      clearTokens();
      redirectToLogin();
    }
  }
];

With Separators (Type-based):

const navigationItems = [
  { id: 'home', label: 'Home', href: '/', type: 'navigation' },
  { id: 'about', label: 'About', href: '/about', type: 'navigation' },
  { id: 'separator1', label: '', type: 'separator' },
  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },
  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },
  { id: 'separator2', label: '', type: 'separator' },
  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }
];

With Custom Separator Elements:

const navigationItems = [
  { id: 'home', label: 'Home', href: '/', type: 'navigation' },
  { id: 'about', label: 'About', href: '/about', type: 'navigation' },
  { 
    id: 'separator1', 
    label: '', 
    separatorElement: <div className="w-full h-px bg-blue-300 my-3" />
  },
  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },
  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },
  { 
    id: 'separator2', 
    label: '',
    separatorElement: (
        <div 
          style={{
            width: '100%',
            height: '1px',
            backgroundColor: 'red',
            margin: '10px 0',
            borderBottom: '1px solid grey'
          }}
        />
      )
  },
  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }
];

With Custom Separator Styling:

const navigationItems = [
  { id: 'home', label: 'Home', href: '/', type: 'navigation' },
  { id: 'about', label: 'About', href: '/about', type: 'navigation' },
  { 
    id: 'separator1', 
    label: '', 
    type: 'separator',
    separatorStyle: {
      height: '2px',
      backgroundColor: '#3b82f6',
      margin: '12px 0'
    }
  },
  { id: 'settings', label: 'Settings', href: '/settings', type: 'navigation' },
  { id: 'profile', label: 'Profile', href: '/profile', type: 'navigation' },
  { 
    id: 'separator2', 
    label: '', 
    type: 'separator',
    separatorStyle: {
      height: '1px',
      backgroundColor: '#ef4444',
      margin: '8px 0'
    }
  },
  { id: 'logout', label: 'Logout', type: 'action', onClick: handleLogout }
];

Troubleshooting Separators:

If separators are not showing up, ensure:

• The type is set to 'separator' or separatorElement is provided
• For type-based separators, the component will render a default gray line
• For custom styling, use separatorStyle properties
• For complex separators, use separatorElement with custom JSX

Advanced Separator Examples:

// Gradient separator
{ 
  id: 'gradient-separator', 
  label: '', 
  type: 'separator',
  separatorStyle: {
    height: '3px',
    background: 'linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899)',
    margin: '16px 0'
  }
}

// Dashed border separator
{ 
  id: 'dashed-separator', 
  label: '', 
  separatorElement: <div className="w-full h-px border-t-2 border-dashed border-gray-400 my-4" />
}

// Text separator with line
{ 
  id: 'text-separator', 
  label: '', 
  separatorElement: (
    <div className="flex items-center w-full my-4">
      <div className="flex-1 h-px bg-gray-300"></div>
      <span className="px-3 text-xs text-gray-500">OR</span>
      <div className="flex-1 h-px bg-gray-300"></div>
    </div>
  )
}

Custom Styling:

<ResponsiveNavbar
  logo={<CustomLogo />}
  rightContent={<UserMenu />}
  navigationItems={navigationItems}
  height={80}
  mobileHeight={60}
  backgroundColor="bg-blue-50"
  borderColor="border-blue-200"
  shadow={true}
  menuItemTextColor="text-blue-900"
  menuItemHoverColor="hover:bg-blue-100"
  menuItemActiveColor="bg-blue-200 text-blue-900"
/>

CustomCalendar

React Custom Calendar component built on top of react-calendar with enhanced styling, formatting, and customization options.

import CustomCalendar from './CustomCalendar';

<CustomCalendar
  value={new Date()}
  containerClassName="rounded-md shadow-md"
  todayClassName="bg-green-500 text-white"
  dayStyle={(date) => ({ borderRadius: '4px' })}
  tileContent={({ date }) => <span>{date.getDate()}</span>}
/>

✅ Props

Name	Type	Example	Description
value	Date | Date[]	new Date()	Selected date or range
onChange	(value: Date | Date[]) => void	(date) => console.log(date)	Callback when date is changed
containerClassName	string	"rounded shadow bg-white"	Custom class for the outer container
containerStyle	React.CSSProperties	{ backgroundColor: 'white' }	Inline styles for the outer container
tileClassName	string | (props) => string	({ date }) => 'bg-gray-100'	Class(es) applied to each date tile
tileContent	(props) => React.ReactNode	({ date }) => <span>{date.getDate()}</span>	Custom content for each date tile
dayFormat	(locale, date) => string	(locale, date) => date.toLocaleDateString(locale, { weekday: 'narrow' })	Custom formatter for weekday labels (defaults to 1-letter)
dayStyle	(date, view) => CSSProperties	(date, view) => ({ color: 'red' })	Custom inline styles for individual date tiles
todayClassName	string	"bg-blue-500 text-white"	Extra classes added to today's date tile
...rest	ReactCalendarProps	minDate={new Date()}	All other props supported by react-calendar

...rest ReactCalendarProps All other props from react-calendar You can pass anything supported by react-calendar

🔧 Example

<CustomCalendar
  value={new Date()}
  onChange={(val) => console.log(val)}
  todayClassName="bg-indigo-500 text-white"
  dayStyle={(date) => ({ padding: '5px', borderRadius: '6px' })}
  tileContent={({ date }) => {
    if (date.getDate() === 1) return <span className="text-red-600">*</span>;
    return null;
  }}
/>

📦 Dependencies react-calendar

CSS: import 'react-calendar/dist/Calendar.css';