Tender React Components

This package contains the base components for the Tender app. The package is published as @ayrwellness/tender-react-components on npm.

Files Included

• index.js - The main component library
• style.css - Required CSS styles
• react_example.jsx - Example React component showing basic usage
• form_example.jsx - Comprehensive form example with all components

Installation

npm install @ayrwellness/tender-react-components

Quick Start

import React from 'react'
import { Button, Dropdown, LayoutProvider } from '@ayrwellness/tender-react-components'
import '@ayrwellness/tender-react-components/style.css'

function App() {
  return (
    <LayoutProvider>
      <Button text="Click me!" type={0} onClick={() => console.log('Clicked!')} />
    </LayoutProvider>
  )
}

export default App

Available Components

• Button - Various button types and styles
• Dropdown - Selection dropdown component
• SegmentedControl - Multi-option selection control
• KeyValueTable - Data display in key-value pairs
• BarChart - Interactive bar chart for data visualization
• ProgressBar - Visual progress indicator with different states
• QuestionnaireBlock - Interactive questionnaire component
• Loader - Loading states and animations
• LineInput - Text input component
• LayoutProvider - Design system provider (optional)

Styling

The components require the included CSS file for proper styling:

import '@ayrwellness/tender-react-components/style.css'

For the complete design system, wrap your app with LayoutProvider:

import { LayoutProvider } from '@ayrwellness/tender-react-components'

function App() {
  return (
    <LayoutProvider>
      {/* Your app content */}
    </LayoutProvider>
  )
}

Examples

• react_example.jsx - Basic component examples and interactions
• form_example.jsx - Comprehensive form demonstrating all components working together