InvestiFi Core UI

InvestiFi's library of React components and UI utilities.

Table of Contents

1. Getting Started
2. Deployment Environments
3. How to: Add a Component
4. How to: Style a Component
5. How to: Add Icons
6. How to: Use Icons
7. How to: Use the Breakpoint Debugger
8. How to: Use Unpublished Changes
9. Tech Stack: Tooling

Getting Started

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

Deployment Environments

• Storybook is deployed to Vercel 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: Add Icons

1. Export the SVG file(s) from Figma

2. Copy the SVG file(s) into the /svg-icons directory

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

   pnpm icons:gen

4. Check in the resulting changes

Note that all existing icon components will be updated when generating icons due to logic in the process that ensures all SVGs have unique ID attributes.

When adding new icons, SVGOMG can be used to optimize files and fix issues.

How to: Use Icons

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 pnpm publish:local to build and publish locally.
2. From the root of the other app run pnpm link:core-ui to install this package from the local registry.
3. Re-run pnpm 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