@windstream/react-shared-components 0.0.1 โ 0.0.2
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 +14 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @windstream/react-shared-components
|
|
2
2
|
|
|
3
3
|
A comprehensive React component library built with TypeScript and Tailwind CSS, designed for Kinetic applications.
|
|
4
4
|
|
|
@@ -14,11 +14,11 @@ A comprehensive React component library built with TypeScript and Tailwind CSS,
|
|
|
14
14
|
## ๐ฆ Installation
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
npm install @
|
|
17
|
+
npm install @windstream/react-shared-components
|
|
18
18
|
# or
|
|
19
|
-
yarn add @
|
|
19
|
+
yarn add @windstream/react-shared-components
|
|
20
20
|
# or
|
|
21
|
-
pnpm add @
|
|
21
|
+
pnpm add @windstream/react-shared-components
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
## ๐ง Setup
|
|
@@ -39,13 +39,13 @@ npx tailwindcss init -p
|
|
|
39
39
|
Import the library styles in your main CSS file (recommended approach):
|
|
40
40
|
|
|
41
41
|
```css
|
|
42
|
-
@import '@
|
|
42
|
+
@import '@windstream/react-shared-components/dist/styles.css';
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
Or import it directly in your JavaScript/TypeScript entry file:
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
import '@
|
|
48
|
+
import '@windstream/react-shared-components/dist/styles.css';
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
**CSS Import Order**: The order in which you import styles matters:
|
|
@@ -57,7 +57,7 @@ Example with CSS import order control:
|
|
|
57
57
|
```css
|
|
58
58
|
/* In your main CSS file (e.g., globals.css) */
|
|
59
59
|
/* Import package styles first */
|
|
60
|
-
@import '@
|
|
60
|
+
@import '@windstream/react-shared-components/dist/styles.css';
|
|
61
61
|
|
|
62
62
|
/* Then your app-specific overrides */
|
|
63
63
|
@tailwind base;
|
|
@@ -75,7 +75,7 @@ Example with CSS import order control:
|
|
|
75
75
|
### Basic Usage
|
|
76
76
|
|
|
77
77
|
```tsx
|
|
78
|
-
import { Button, Input, Text } from '@
|
|
78
|
+
import { Button, Input, Text } from '@windstream/react-shared-components/core';
|
|
79
79
|
|
|
80
80
|
function MyComponent() {
|
|
81
81
|
return (
|
|
@@ -93,7 +93,7 @@ function MyComponent() {
|
|
|
93
93
|
#### Button
|
|
94
94
|
|
|
95
95
|
```tsx
|
|
96
|
-
import { Button } from '@
|
|
96
|
+
import { Button } from '@windstream/react-shared-components/core';
|
|
97
97
|
|
|
98
98
|
// Different variants
|
|
99
99
|
<Button variant="primary">Primary Button</Button>
|
|
@@ -115,7 +115,7 @@ import { Button } from '@kinetic/react-shared-components/core';
|
|
|
115
115
|
#### Input
|
|
116
116
|
|
|
117
117
|
```tsx
|
|
118
|
-
import { Input } from '@
|
|
118
|
+
import { Input } from '@windstream/react-shared-components/core';
|
|
119
119
|
|
|
120
120
|
<Input
|
|
121
121
|
placeholder="Enter text"
|
|
@@ -128,7 +128,7 @@ import { Input } from '@kinetic/react-shared-components/core';
|
|
|
128
128
|
#### Text
|
|
129
129
|
|
|
130
130
|
```tsx
|
|
131
|
-
import { Text } from '@
|
|
131
|
+
import { Text } from '@windstream/react-shared-components/core';
|
|
132
132
|
|
|
133
133
|
<Text className="heading1">Heading 1</Text>
|
|
134
134
|
<Text className="body1">Body text</Text>
|
|
@@ -138,7 +138,7 @@ import { Text } from '@kinetic/react-shared-components/core';
|
|
|
138
138
|
### Utilities
|
|
139
139
|
|
|
140
140
|
```tsx
|
|
141
|
-
import { cx, clsx } from '@
|
|
141
|
+
import { cx, clsx } from '@windstream/react-shared-components/utils';
|
|
142
142
|
|
|
143
143
|
const classes = cx('btn', condition && 'btn-primary');
|
|
144
144
|
```
|
|
@@ -172,7 +172,7 @@ import {
|
|
|
172
172
|
Skeleton,
|
|
173
173
|
Tooltip,
|
|
174
174
|
ViewCartButton
|
|
175
|
-
} from '@
|
|
175
|
+
} from '@windstream/react-shared-components/core';
|
|
176
176
|
```
|
|
177
177
|
|
|
178
178
|
### Core Components
|
|
@@ -296,7 +296,7 @@ The library is built using Rollup with the following outputs:
|
|
|
296
296
|
|
|
297
297
|
All components are exported from a single entry point (`src/index.ts`), which allows for:
|
|
298
298
|
- Simplified build process
|
|
299
|
-
- Consistent import path: `@
|
|
299
|
+
- Consistent import path: `@windstream/react-shared-components/core`
|
|
300
300
|
- Tree-shaking support for optimal bundle sizes
|
|
301
301
|
|
|
302
302
|
## ๐งช Testing
|