Botalist component library

Built on React 18-19 with Tailwind v3 (peer dependencies)

Installation in downstream repos

• Install dev peer dependencies: yarn add -D tailwindcss@3 postcss autoprefixer
• Install prod peer deps: yarn add @radix-ui/react-slot tailwindcss-animate lucide-react
• npx tailwindcss init -p # creates 2 config files for tailwind and postcss
• Rename tailwind.config.js to ts and amend inspired from here
  • !! VERY IMPORTANT !! make sure to have in your "content": "./node_modules/@botalist/component-library/**/*.{js,ts,jsx,tsx}"
    • otherwise CSS that is not referenced directly in your code will be tree-shaken
• Copy index.css to your index.css or globals.css and amend as required for your theme
• yarn add -D @botalist/component-library
• yarn add -D all other peer dependencies (in the warnings)

Usage

For a complete list of exports, check lib-index.ts

CSS

• Colors
  • NB: Define colors as CSS variables without the color space, see here
• Fonts for heading & main, landing & app

Atoms

• Typography: , <h...>,
• Various components

Molecules

• NavBar
  • Conditionally includes a FeedbackWidget
  • !! Make sure to pass FeedbackWidget from downstream users, otherwise the one from the whitelabel will be used with generic text.
• Footer
• ConsentBanner, needs GA4 measurement id
• and more

Utils

• utils
• analytics
• queryClient for API calls
• sseClient to process SSE
  • Works with common types that are included

Types

• Common types

Services

• ConsentService
• Generic ApiService to make API calls
  • Downstream users should initialize on their own, see App.tsx

Store

• Generic Store
  • Internally uses chatService as well which is generic for the type of Suggestion but expects the structured output: introduction, spot_suggestions, followup_question from a backend.
  • Downstream users create your own, see business/chatStore.ts

Publishing

• Add new exports to client/src/lib-index.ts
  • If adding new folders, update vite.lib.config.ts as well

Versions

• Be exact in peer dependencies here.
  • Downstream users can be loose.