lib-ts-react-components

aka react-components

Installation

npm install --save-dev @uphillhealth/react-components@latest

Below is the list of alll packages that the library needs in order to function properly, make sure to install all of them as devDependencies in your project.

| NPM Package | |-------------------------------| | @maskito/core | | @maskito/kit | | @maskito/react | | @radix-ui/react-accordion | | @radix-ui/react-avatar | | @radix-ui/react-collapsible | | @radix-ui/react-dialog | | @radix-ui/react-dropdown-menu | | @radix-ui/react-popover | | @radix-ui/react-select | | @radix-ui/react-switch | | @radix-ui/react-tabs | | @radix-ui/react-toast | | @radix-ui/react-toggle-group | | @radix-ui/react-tooltip | | @stitches/react | | @uphillhealth/i18n | | @uphillhealth/theme | | @uphillhealth/types | | country-data | | libphonenumber-js | | material-icons | | react | | react-dom | | uuid |

To install a package as a devDependency, add --save-dev or -D in the installation command.

npm install -D {package} or npm install --save-dev {package}

Install all needed packages (does not include react and react-dom):

npm install --save-dev @maskito/core @maskito/kit @maskito/react @radix-ui/react-accordion @radix-ui/react-avatar @radix-ui/react-collapsible @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toast @radix-ui/react-toggle-group @radix-ui/react-tooltip @stitches/react @uphillhealth/i18n @uphillhealth/theme @uphillhealth/types country-data libphonenumber-js material-icons uuid

Overview

The library utilises radix primitive components for complex components and stitches to stylize all components.

Z-index

The library utilises z-index above 40 to create a buffer to applications z-indexes.

Translations

The library provides translations files for English, Spanish and Portuguese including all texts used to be added at your application.

The current translations provided by the library, you can copy then and translate to additional languages if necessary.

import languages from './languages';

export default {
  ...languages,
  'Showing {{start}}-{{end}} of {{total}}': 'Showing {{start}}-{{end}} of {{total}}',
  'My Preferences': 'My Preferences',
  Profile: 'Profile',
  Help: 'Help',
  'Application version': 'Application version',
  Language: 'Language',
  Logout: 'Logout',
};

Components documentation

ComponentsProvider

Create instances of all necessary providers for some components to work properly, like TooltipProvider. Instance this component at the root of your application.

You can customize the providers options if necessary:

interface ComponentsProviderProps {
  children?: ReactNode | ReactNode[];
  toastOptions?: Omit<ToastProviderProps, 'children'>;
  tooltipOptions?: Omit<TooltipProviderProps, 'children'>;
}

Usage

import { ComponentsProvider } from '@uphillhealth/react-components'

export default () => {
  return (
    <ComponentsProvider>
      <div>
        rest of the app...
      </div>
    </ComponentsProvider>
  )
}

Icon

Usage

Include at the application root to have the font icons from the library:

import 'material-icons/iconfont/filled.css';

Then just use the Icon component, you can check which icons are available at https://marella.me/material-icons/demo/

import { Icon } from '@uphillhealth/react-components'

export default () => {
  return (
    <Icon>
      visibility
    </Icon>
  )
}