Shared components for Forcepoint Frontend Sites

React Shared Components Library System for Forcepoint. Built on Vite.

At a glance

Library bundler	Vite
Component visualization	Storybook
Storybook	8.0
Storybook instance	GitHub Pages
CSS Framework	TailwindCSS
Node	18

Library reference

This section provides a concise overview of the key classes and functions available in our library, aiding developers in understanding and utilizing the provided functionalities effectively.

Include the Tailwind preset

import type { Config } from 'tailwindcss';
import themePreset from './node_modules/forcepoint-shared-components/dist/tailwind-theme-preset.js';

export default {
  presets: [themePreset],
  content: ['./src/lib/**/*.{ts,tsx}'],
} satisfies Config;

Components API

• Branding
• Breadcrumb
• Button
• Callout
• CTA
• Card 380
• Card Nav Highlight
• Content Image Slider
• Featured Resource - Card
• Featured Resource - List Item
• Footer Menu
• Image
• Language Switcher
• Legal Menu
• Link
• Logo Grid
• Main Menu
• Secondary Menu
• Social Menu
• Typography

Development

This section is intended for developers who want to contribute to the project or explore its internals. If you're interested in enhancing our codebase, fixing bugs, or adding new features, follow the guidelines below to get started.

Setting Up the Development Environment

• Clone the repository
• Run nvm use or use a tool such as NVM to automatically switch to the correct Node version
• Run npm install
• Run npm run dev to start storybook and the Typescript compiler.

Publishing local development changes to your Application

This project uses Yalc for local package publishing and sharing.

• Publish local changes: yalc-publish

Coding Guidelines

Follow the coding style and guidelines specified in CONTRIBUTING.md to maintain a consistent codebase.

Feedback

We welcome your feedback! If you encounter any issues, have suggestions, or want to discuss improvements, open an issue or reach out to us.

Happy coding! 🚀