@tealca/core-components 1.0.8 → 1.0.10

package/README.md

@@ -1,4 +1,4 @@
-# tealca-core-components
+# 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.
 
@@ -17,19 +17,54 @@ This repository contains reusable components developed for TEALCA, enabling inte
 ## Installation
 
 ```bash
-npm install tealca-core-components
+npm i @tealca/core-components
 ```
 
 ## Usage
 
 ```tsx
-import { PrimaryButton } from "tealca-core-components";
+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`:**
+
+```javascript
+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.
@@ -40,15 +75,70 @@ function App() {
 ## Project Structure
 
 ```
-├── src/            # Main components
-├── public/         # Public assets
-├── index.html      # Main entry point
-├── package.json    # Dependencies and scripts
-├── tsconfig.json   # TypeScript configuration
-├── vite.config.ts  # Vite configuration
+.
 ├── .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.
+
+    ```bash
+    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.
+
+    ```bash
+    # 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.
+
+    ```bash
+    npm login
+    ```
+
+4.  **Publish the package:** This command uploads the package to the NPM registry.
+    ```bash
+    npm publish
+    ```
+
 ## Contributing
 
 Contributions are welcome! Please follow best development practices and ensure consistency with existing components.