@tealca/core-components 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,19 +17,54 @@ This repository contains reusable components developed for TEALCA, enabling inte
|
|
|
17
17
|
## Installation
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm
|
|
20
|
+
npm i @tealca/core-components
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
25
|
```tsx
|
|
26
|
-
import { PrimaryButton } from "tealca
|
|
26
|
+
import { PrimaryButton } from "@tealca/core-components";
|
|
27
27
|
|
|
28
28
|
function App() {
|
|
29
29
|
return <PrimaryButton>Click Me</PrimaryButton>;
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
+
## Theming and Customization
|
|
34
|
+
|
|
35
|
+
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.
|
|
36
|
+
|
|
37
|
+
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.
|
|
38
|
+
|
|
39
|
+
**Example `tailwind.config.js`:**
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
module.exports = {
|
|
43
|
+
theme: {
|
|
44
|
+
extend: {
|
|
45
|
+
colors: {
|
|
46
|
+
indigo: {
|
|
47
|
+
50: "#eef2ff",
|
|
48
|
+
100: "#e0e7ff",
|
|
49
|
+
200: "#c7d2fe",
|
|
50
|
+
300: "#a5b4fc",
|
|
51
|
+
400: "#818cf8",
|
|
52
|
+
500: "#6366f1", // Your brand's primary color
|
|
53
|
+
600: "#4f46e5", // A darker shade
|
|
54
|
+
700: "#4338ca",
|
|
55
|
+
800: "#3730a3",
|
|
56
|
+
900: "#312e81",
|
|
57
|
+
950: "#1e1b4b",
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
},
|
|
62
|
+
plugins: [],
|
|
63
|
+
};
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
> By replacing the hex codes with your own brand's colors, you can easily adapt the component library's theme.
|
|
67
|
+
|
|
33
68
|
## Available Scripts
|
|
34
69
|
|
|
35
70
|
- `npm run dev`: Starts the development environment.
|
|
@@ -79,6 +114,7 @@ To publish a new version of the package to NPM, follow these steps:
|
|
|
79
114
|
```
|
|
80
115
|
|
|
81
116
|
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.
|
|
117
|
+
|
|
82
118
|
```bash
|
|
83
119
|
# Example for a patch update (e.g., 1.0.0 -> 1.0.1)
|
|
84
120
|
npm version patch
|
|
@@ -89,6 +125,7 @@ To publish a new version of the package to NPM, follow these steps:
|
|
|
89
125
|
# Example for a major update (e.g., 1.0.0 -> 2.0.0)
|
|
90
126
|
npm version major
|
|
91
127
|
```
|
|
128
|
+
|
|
92
129
|
> **Note:** The `npm version` command requires a clean working directory (no uncommitted changes). Make sure to commit your changes before running it.
|
|
93
130
|
|
|
94
131
|
3. **Login to NPM:** You need to be authenticated with your NPM account.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tealca/core-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.10",
|
|
5
5
|
"description": "A collection of shared UI components for Tealca's applications.",
|
|
6
6
|
"main": "dist/tealca-core-components.cjs.js",
|
|
7
7
|
"module": "dist/tealca-core-components.es.js",
|