Devsinc UI Library

Devsinc UI Library, is a specialized user interface (UI) library that has been developed by RAPP Team for internal use within all Devsinc's products. By utilizing this custom react based library, Devsinc is able to enhance the functionality and aesthetic appeal of their products while maintaining a high level of consistency and efficiency in their development process.

Table of Contents

• Installation
• Status
• Website Hosting
• Components
• Code Examples
• Bugs and Feature Requests
• Frameworks

Installation

Please use the following command to use this package in your project

npm i devsinc-lib

Status

Website Hosting

You can access the live version of the Devsinc Ui Library at Vercel.

Components

Following are the components that can be used from this library to enhance the functionality and aesthetic appeal while maintaining a high level of consistency in all products.

• Button
• Typography
• CheckBox
• TextField
• ToggleSwitch
• Counter
• SearchInput
• TextArea
• DropDownComponent
• PopUp
• Color

Code Examples

Following are the examples of devsinc-lib componenets usage

Button Component

import { Button } from 'devsinc-lib'

const App = () => (
  <Button
    label='Primary Button'
    type='primary'
    variant='success'
    postPosition
    onClick={() => console.log('Button clicked!')}
    style={{ width: '250px' }}
  />
)

ToggleSwitch Component

import { ToggleSwitch } from 'devsinc-lib'

const App = () => (
  <>
    <h1>ToggleSwitch Example</h1>
    <ToggleSwitch
      onToggle={() => console.log('ToggleSwitch clicked!')}
      textLabel='Toggle Switch Label'
    />
  </>
)

TextField Component

import { useState } from 'react'
import { TextField } from 'devsinc-lib'

const App = () => {
  const [name, setName] = useState('')

  const handleNameChange = updatedName => {
    setName(updatedName)
  }

  return (
    <>
      <h1>TextField Example</h1>
      <TextField 
        TextLabel='Enter your name:' 
        value={name} 
        onChange={handleNameChange} />
    </>
  )
}

TextArea Component

import { useState } from 'react'
import { TextArea } from 'devsinc-lib'

const App = () => {
  const [feedback, setFeedback] = useState('')

  const handleFeedbackChange = e => {
    setFeedback(e.target.value)
  }
  
  return (
    <>
      <h1>TextArea Example </h1>
      <TextArea 
        textLabel='Feedback:'
        placeHolder='Enter your feedback here' 
        value={feedback} 
        onChange={handleFeedbackChange} />
    </>
  )
}

Typography Component

import { Typography } from 'devsinc-lib'

const App = () => (
  <>
    <h1>Typography Example</h1>
    <Typography children='My text' size='h1' />
    <Typography children='My text' size='h2' />
    <Typography children='My text' size='h3' />
    <Typography children='My text' size='h4' />
    <Typography children='My text' size='h5' />
    <Typography children='My text' size='h6' />
  </>
)

CheckBox Component

import { useState } from 'react'
import { CheckBox } from 'devsinc-lib'

const App = () => {
  const [isChecked, setIsChecked] = useState(false)
 
  const handleCheckBoxChange = checked => {
    setIsChecked(checked)
  }

  return (
    <>
      <h1>CheckBox Example</h1>
      <CheckBox 
       onClick={handleCheckBoxChange} 
       textLabel='Female' />
      <p>{isChecked ? 'The checkbox is clicked' : 'The checkbox is not clicked'}</p>
    </>
  )
}

Counter Component

import { useState } from 'react'
import { Counter } from 'devsinc-lib'

const App = () => {
  const [value,setValue]=useState(0)

  return (
    <>
      <h1>Counter Example</h1>
      <Counter
        textLable='Quantity'
        placeHolder='Enter quantity'
        value={value}
        onChange={value => setValue(value)}
        disabled={false}
        labelClasses='myLabelClasses'
        className='myInputClasses'
        style={{ backgroundColor: '#F5F5F5' }}
        labelStyle={{ fontWeight: 'bold' }}
      />
    </>
  )
}

SearchInput Component

import { useState } from 'react'
import { SearchInput } from 'devsinc-lib'

const App = () => {
  const [product, setProduct] = useState('')

  return (
    <>
      <h1>SearchInput Example</h1>
      <SearchInput
       placeholder='Search Product'
       value={value}
       onChange={productName => setValue(productName)}
      />
    </>
  )
}

PopUp Component

import { PopUp } from 'devsinc-lib'

const App = () => {
  return (
    <>
      <h1>PopUp Example</h1>
      <PopUp
        title='Warning!'
        message='Do you want to delete this file?'
        leftButtonLabel='No'
        rightButtonLable='Yes'
        onClickRight={() => console.log('Right button clicked')}
        onClickLeft={() => console.log('Left button clicked')}
      />
    </>
  )
}

Bugs and Feature Requests

Have a bug or a feature request? Contact Us

Frameworks

Devsinc Ui Library supports these frameworks.

• React.js
• Next.js
• Ruby
• Vue.js