@konstructio/ui 0.0.3 → 0.0.4
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 +53 -4
- package/dist/package.json +5 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
> 🚧🚨 **Work in Progress** 🚨🚧
|
|
2
|
+
>
|
|
3
|
+
> ⚠️ This library is currently under construction. Features may change and documentation is incomplete. ⚠️
|
|
4
|
+
|
|
1
5
|
# Konstruct React Component Library
|
|
2
6
|
|
|
3
7
|
This repository contains a set of reusable and customizable React components built for **Konstruct**'s infrastructure and Kubernetes products. These components aim to streamline the development process, ensuring consistency and high-quality UI for **Kubefirst**, **Colony**, and other future projects.
|
|
@@ -10,10 +14,55 @@ This repository contains a set of reusable and customizable React components bui
|
|
|
10
14
|
- **Accessible**: Built with accessibility in mind, following best practices to ensure compatibility with all users.
|
|
11
15
|
- **Tailwind CSS Integration**: Seamlessly integrated with Tailwind CSS for rapid UI development and easy theming.
|
|
12
16
|
|
|
13
|
-
## Installation
|
|
17
|
+
## **Installation Guide**
|
|
18
|
+
|
|
19
|
+
Follow these steps to integrate `@konstructio/ui` into your project:
|
|
20
|
+
|
|
21
|
+
### Step 1: Install the Library
|
|
22
|
+
|
|
23
|
+
Run the following command to install the package:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @konstructio/ui
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### Step 2: Install Tailwind CSS
|
|
32
|
+
|
|
33
|
+
If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
### Step 3: Import and Configure the Plugin
|
|
38
|
+
|
|
39
|
+
To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
|
|
40
|
+
|
|
41
|
+
Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
import { konstructPlugin } from '@konstructio/ui';
|
|
45
|
+
|
|
46
|
+
const config: Config = {
|
|
47
|
+
plugins: [konstructPlugin],
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
### Step 4: Include `@konstructio/ui` in Tailwind Content
|
|
54
|
+
|
|
55
|
+
To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
|
|
14
56
|
|
|
15
|
-
|
|
57
|
+
```ts
|
|
58
|
+
const config: Config = {
|
|
59
|
+
content: [
|
|
60
|
+
// Other content paths
|
|
61
|
+
'./node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
|
|
62
|
+
],
|
|
63
|
+
};
|
|
64
|
+
```
|
|
16
65
|
|
|
17
|
-
##
|
|
66
|
+
## Final Steps
|
|
18
67
|
|
|
19
|
-
|
|
68
|
+
After completing the above steps, you can now use `@konstructio/ui` components in your project. Restart your development server to apply the changes.
|
package/dist/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@konstructio/ui",
|
|
3
3
|
"description": "A set of reusable and customizable React components built for konstruct.io",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.3",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"main": "dist/index.js",
|
|
@@ -34,6 +34,9 @@
|
|
|
34
34
|
"sideEffects": [
|
|
35
35
|
"**/*.css"
|
|
36
36
|
],
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"registry": "https://registry.npmjs.org/"
|
|
39
|
+
},
|
|
37
40
|
"homepage": "https://konstructio.github.io/konstruct-ui",
|
|
38
41
|
"scripts": {
|
|
39
42
|
"build": "rimraf ./dist & tsc --p ./tsconfig.build.json && vite build && cp ./package.json ./dist/package.json",
|
|
@@ -74,6 +77,7 @@
|
|
|
74
77
|
},
|
|
75
78
|
"devDependencies": {
|
|
76
79
|
"@arethetypeswrong/cli": "^0.17.1",
|
|
80
|
+
"@storybook/addon-docs": "^8.4.7",
|
|
77
81
|
"@storybook/addon-essentials": "^8.4.7",
|
|
78
82
|
"@storybook/addon-interactions": "^8.4.7",
|
|
79
83
|
"@storybook/addon-links": "^8.4.7",
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@konstructio/ui",
|
|
3
3
|
"description": "A set of reusable and customizable React components built for konstruct.io",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "0.0.
|
|
5
|
+
"version": "0.0.4",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"main": "dist/index.js",
|
|
@@ -34,6 +34,9 @@
|
|
|
34
34
|
"sideEffects": [
|
|
35
35
|
"**/*.css"
|
|
36
36
|
],
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"registry": "https://registry.npmjs.org/"
|
|
39
|
+
},
|
|
37
40
|
"homepage": "https://konstructio.github.io/konstruct-ui",
|
|
38
41
|
"scripts": {
|
|
39
42
|
"build": "rimraf ./dist & tsc --p ./tsconfig.build.json && vite build && cp ./package.json ./dist/package.json",
|
|
@@ -74,6 +77,7 @@
|
|
|
74
77
|
},
|
|
75
78
|
"devDependencies": {
|
|
76
79
|
"@arethetypeswrong/cli": "^0.17.1",
|
|
80
|
+
"@storybook/addon-docs": "^8.4.7",
|
|
77
81
|
"@storybook/addon-essentials": "^8.4.7",
|
|
78
82
|
"@storybook/addon-interactions": "^8.4.7",
|
|
79
83
|
"@storybook/addon-links": "^8.4.7",
|