InvestiFi Core UI

InvestiFi's library of React components and UI utilities.

Getting Started

1. Run yarn to install dependencies.
2. Run yarn dev to launch Storybook.

Deployment Environments

• Storybook is deployed to https://cryptofi-core-ui.vercel.app/ when changes are merged into the main branch.
  • Refer to Vercel project settings for more info.
• The Core UI library is available on NPM at https://www.npmjs.com/package/@cryptofi/core-ui.
  • Refer to PUBLISH.md for publishing instructions.

How to: Add a Component

1. Create a new directory in the components directory using the following structure. Note that a component can consist of only a React component file (tsx) or a theme files (ts) depending on how it is structured.

components/
├─ Button/
|  ├─ Button.tsx
|  ├─ buttonTheme.ts

2. Setup the basic component structure. This simplified example demonstrates wrapping a Chakra component:

import { Button } from '@chakra-ui/react';

const CFButton = ({ children }: { children: React.reactNode }) => {
  return <Button>{children}</Button>;
};

3. Add the component file to the root index.ts, using the Cf prefix as a namespace to differentiate between similarly named Chakra components:

export { default as CfButton } from './Button/Button'

4. Add the component theme to the corresponding section of the src/theme.ts file under the components key.

How to: Style a Component

The reusable components exported from this library generally use separate theme files to simplify implementation of variants, sizes, etc., but simple components can also be styled directly in the component file using Chakra style props.

Guidelines:

• Prefer responsive units like rem over pixel values
• Use Chakra's unitless spacing values for spacing and positioning when possible
• Refer to documentation for the corresponding Chakra UI component when styling base components

How to: Use Icons

Run the command below to (re)generate React components from SVG files located in the svg-icons directory.

yarn icons:gen

When adding a new icon, place the SVG file in the svg-icons directory, then regenerate icons and check-in the resulting changes. When adding new icons, SVGOMG can be used to optimize files and fix issues.

Following is an example of using an icon component in application code. Note that icons are named with the prefix Icon during generation and can be styled using Chakra style props.

import { IconBank } from '@cryptofi/core-ui';

const SomeComponent = () => {
  return (
    <>
      <IconBank height="10" width="10" __css={{ path: { fill: 'orange' } }} />
    </>
  );
};

How to: Use the Breakpoint Debugger

https://www.loom.com/share/c8326757734f424993f857bf7881b02e

How to: Use Unpublished Changes

To use unpublished changes to this package in another local application, follow these steps:

1. Run yarn publish:local to build and publish locally.
2. From the root of the other app run yarn dlx yalc link @cryptofi/core-ui to install this package from the local registry.
3. Re-run yarn publish:local as needed to update consumers with the latest changes to this project.

See yalc docs for more info.

Tech Stack: Tooling

This project uses Rollup to build an optimized JavaScript bundle, and consumers are expected to provide necessary peer dependencies for Chakra UI and React as outlined in this project's package.json.

Vite is used in conjunction with Storybook for local development. Based on the following Vite / React template: https://github.com/The24thDS/vite-reactts18-chakra-jest-husky