Foci Design System

The Foci Design System repository contains reusable React UI components.

Deployments

• Storybook
  • GitHub Pages: https://focisolutions.github.io/FociDesignSystem
  • Chromatic Library: https://www.chromatic.com/library?appId=65fce1d50c6ea888bb95e9a0
• Node Module
  • NPM: https://www.npmjs.com/package/@foci-solutions/foci-design-system

Pre-Requisites

This package is intended to be used in a React app which has already been configured with Tailwind CSS. See the react / tailwind guide.

Install Peer-Dependencies

If these packages are not already installed, they will need to be included prior to installing the component library.

npm install react react-dom

For TypeScript projects, the types can also be added.

npm install --save-dev @types/react

Installation

The node module is published as a package on the public npm registry.

npm install @foci-solutions/foci-design-system

Initial Setup in Your Project

Tailwind Config

In the project's tailwind configuration file (e.g. tailwind.config.ts):

• Add the fociDesignSystem to the presets section.

  import { fociDesignSystem } from './src/tailwind-presets';

• Add the foci-design-system's .js files to the content section.

  './node_modules/@foci-solutions/foci-design-system/**/*.js'

Example Tailwind Config:

// tailwind.config.ts
import { fociDesignSystem } from './src/tailwind-presets';
import type { Config } from 'tailwindcss';

export default {
  presets: [fociDesignSystem],
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@foci-solutions/foci-design-system/**/*.js'],
  theme: { extend: {} },
} satisfies Config;

CSS

In the project's global style sheet (e.g. globals.css, index.css or styles.css), import the Foci Design System style sheet from the node_modules folder.

/* globals.css
 * The path is relative to the css file, so use as many `../` as is needed to go back to your
 * node_modules directory. Also, make sure your bundler includes this css file (this may be automatic). */
@import url('../../node_modules/@foci-solutions/foci-design-system/tailwind-presets/fociDesignSystem.css');

Usage

Importing a Component

The components can be imported from the root of the design system, or from the individual component folders. For ESM projects, it doesn't matter which is used, but for CJS projects, importing from the individual components may enable the bundler to perform tree-shaking. In both cases the component is a named export, there are no default exports.

Example

// Top-level 'root' import
import { TextInput } from '@foci-solutions/foci-design-system';
// Component-level import
import { TextInput } from '@foci-solutions/foci-design-system/Inputs/TextInput';

function App() {
  return (
    <main>
      <div>
        <TextInput label="Username" placeholder="Username or Email" />
        <TextInput label="Password" type="password" placeholder="Password" />
      </div>
    </main>
  );
}

export default App;

Attributions

This project utilizes:

• Storybook
  • Storybook Test Runner for automated interaction tests against a live browser
  • Chromatic for running local and CI visual regressions against existing Storybook components
• React
• Tailwind CSS
• shadcn/ui to speed up baseline component implementations
• React Testing Library for component testing and Vitest as the unit test runner/reporter
• FontAwesome icons