America Transparente React Component Library

This is a React component library with custom InstantSearch components used by the America Transparente Foundation to build UI for their MeiliSearch search engines.

Getting Started

• Add Tailwind CSS to your React project

• npm install @america-transparente/ui,

• Add "./node_modules/@america-transparente/ui/dist/**/*.js" to your content array in your tailwind.config.js

• Extend colors in tailwind.config.js with our color set (see colors)

For components related to InstantSearch use module @america-transparente/ui/search, the rest can be found in @america-transparente/ui/core

Dependencies

• React on Webpack, using Tailwind CSS for Styling, Headless UI for unstyled components and InstantSearch Hooks for custom components for our search engines.
• tsup: bundles typescript npm run build
• Storybook: visualize components npm run storybook
• ESLint: linting npm run lint
• Semantic Release: to publish to NPM and auto generate releases to GitHub npm run semantic-release

Colors

Primary

the "primary" color should be unique for every project, to easily identify them

• Reguleque: #34911F
• Duenos Directos: #a21caf

Tailwind Config

This is how theme in tailwind.config.js would look like for Reguleque

  theme: {
    extend: {
      colors: {
        primary: "#34911F",
        light: {
          neutral: {
            100: "#D1D1D1",
            200: "#F9F9F9",
            300: "#E7E5E4",
          },
          text: {
            100: "#000000",
            200: "#525252",
          },
        },
        dark: {
          neutral: {
            100: "#484848",
            200: "#2F2F2F",
            300: "#242424",
          },
          text: {
            100: "#E4E4E4",
            200: "#A0A0A0",
          },
        },
      },
    },
  },

Spacing

Gaps and padding are often 1rem, or p-4, gap-4 in Tailwind, let's stick with that :)