Repository Purpose

This package is to be used for UI applications utilizing the React.JS Library in conjunction with the Chakra-UI Library. Effectifely this packages exports an object to be passed into a function provided by the Chakra-UI library. This object holds the agreed upon styles for the VitaCare brand, in addition to application specific icons.

Consume in Application

In order to use, run the command below on the React UI application.

npm install vitacare-uibrand

Ensure that the version installed in consuming application is the lastet version of this package (check Master branch package.json)

The package exports an object VITACARE_THEME. This object gets passed to a Chakra-Ui function and then passed as a prop to the <ChakraUiProvider /> component. See Example below

Examples

VitaCare Theme passed to Chakra-UI Example

import { extendTheme } from '@chakra-ui/react'
import VITACARE_THEME from 'vitacare-uibrand'

const BRAND_THEME = extendTheme(VITACARE_THEME)

export default BRAND_THEME

import { ChakraProvider } from '@chakra-ui/react';
import BRAND_THEME from './styles/brandTheme';

const Root = () => {
    return (
        <ChakraProvider resetCSS theme={BRAND_THEME}>
            <App />
        </ChakraProvider>
    )
}

Icon Example

import { EllipsesIcon } from "vitacare-uibrand"

export const Example = () => {
    // Custom styles can be passed to the Chakra-UI Icon Component
    // and will be consumed by the Vitacare UI Library Icons
    const customStyle = { color: 'red' }
    return (
        <EllipsesIcon />
    )
}

Updates to Package

1. Create a feature branch from Master. Master should have latest versioned component code and be tagged with that version number
2. Changes can be tested by doing an npm link (hot-reloading) or by installing the relative path npm install ..\vps.coracare.uibrand. Note this works by running npm run build on this directory while having the consuming directory running as well.
3. Once all feature work has been completed. Make sure to bump version in package.json Run npm run build then commit all changed files and push changes. Once changes have been pushed. Run an npm run publish.
4. Note consuming applications need to install the latest version of this package npm run install vitacare-uibrand@latest
5. Merge feature change into master branch and tag the commit with the version number, push changes upstream.