Tealca Core Components

A set of reusable and accessible React components, built with TypeScript. This library centralizes all of Tealca's UI components, ensuring a consistent user experience and a unified brand identity across all our web applications.

Description

This repository contains reusable components developed for TEALCA, enabling integration and visual consistency across all our applications. The project is built with Vite, React, TypeScript, SWC, and Storybook, providing a modern, fast, and scalable environment.

Main Technologies

• Vite: Ultra-fast bundler for development and production.
• React: Library for building user interfaces.
• TypeScript: Static typing for robustness and maintainability.
• SWC: Modern compiler for JavaScript and TypeScript.
• Storybook: Tool for developing, testing, and documenting UI components in isolation.

Installation

npm i @tealca/core-components

Usage

import { PrimaryButton } from "@tealca/core-components";

function App() {
  return <PrimaryButton>Click Me</PrimaryButton>;
}

Theming and Customization

The primary color theme of this component library is based on the indigo color palette from Tailwind CSS. Components like PrimaryButton, Link, and others use shades of indigo by default.

If you wish to customize the main theme in your own project, you can override the indigo colors in your tailwind.config.js file. By replacing the indigo palette, you can change the primary color of the components to match your application's brand.

Example tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        indigo: {
          50: "#eef2ff",
          100: "#e0e7ff",
          200: "#c7d2fe",
          300: "#a5b4fc",
          400: "#818cf8",
          500: "#6366f1", // Your brand's primary color
          600: "#4f46e5", // A darker shade
          700: "#4338ca",
          800: "#3730a3",
          900: "#312e81",
          950: "#1e1b4b",
        },
      },
    },
  },
  plugins: [],
};

By replacing the hex codes with your own brand's colors, you can easily adapt the component library's theme.

Available Scripts

• npm run dev: Starts the development environment.
• npm run build: Builds the components for production.
• npm run preview: Previews the production build.
• npm run storybook: Starts Storybook for component development and documentation.

Project Structure

.
├── .storybook/     # Storybook configuration
├── src/
│   ├── assets/
│   ├── components/
│   ├── contexts/
│   ├── objects/
│   ├── providers/
│   ├── services/
│   └── utils/
├── .gitignore
├── package.json
├── tsconfig.json
└── vite.config.ts

How to create a component

To create a new component, follow these steps:

1. Create a directory for the component: Inside src/components/{category} create a new directory with the name of the component in PascalCase. For example, if you are creating a new component called MyComponent in the base category, you should create the directory src/components/base/MyComponent.

2. Create the component file: Inside the directory you just created, create a new file called MyComponent.tsx. This file will contain the logic and structure of the component.

3. Create the story file: Inside the same directory, create a new file called MyComponent.stories.tsx. This file will contain the Storybook stories for the component, which will allow you to visualize and test the component in isolation.

4. Export the component: You must export the component in the index.ts file of the corresponding category. For example, in src/components/base/index.ts. Then, you must also export it in the main index.ts of the components, src/components/index.ts.

Publishing to NPM

To publish a new version of the package to NPM, follow these steps:

1. Build the project: This command compiles the code and prepares it for distribution.

   npm run build

2. Update the version: Before publishing, you must update the package version in package.json. You can do this manually or by using the npm version command, which also creates a commit and a git tag.

   # Example for a patch update (e.g., 1.0.0 -> 1.0.1)
   npm version patch
   
   # Example for a minor update (e.g., 1.0.0 -> 1.1.0)
   npm version minor
   
   # Example for a major update (e.g., 1.0.0 -> 2.0.0)
   npm version major

   Note: The npm version command requires a clean working directory (no uncommitted changes). Make sure to commit your changes before running it.

3. Login to NPM: You need to be authenticated with your NPM account.

   npm login

4. Publish the package: This command uploads the package to the NPM registry.

   npm publish

Contributing

Contributions are welcome! Please follow best development practices and ensure consistency with existing components.

License

This project is property of TEALCA. Internal and collaborative use only.