enjanga-components-library 1.0.4 → 1.0.12
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 +48 -6
- package/dist/index.js +2901 -91
- package/dist/index.mjs +2837 -53
- package/package.json +46 -118
- package/dist/styles.css +0 -1
package/README.md
CHANGED
|
@@ -6,6 +6,22 @@ A reusable React component library built for Next.js 13+ applications, implement
|
|
|
6
6
|
|
|
7
7
|
> ⚠️ **Important:** This library is built on top of the [IBM Carbon Design System](https://carbondesignsystem.com/). To function correctly, **Carbon must be installed and configured** in the consuming project.
|
|
8
8
|
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## 🔗 Dependency on enjanga-core-setup
|
|
12
|
+
|
|
13
|
+
This library depends on **[enjanga-core-setup](https://github.com/ericnjanga/enjanga-core-setup)** for design tokens, Carbon utilities, and shared SASS configuration.
|
|
14
|
+
- `enjanga-core-setup` bundles Carbon’s design tokens (spacing, type, colors, motion, grid, etc.) and forwards them through a single entry point:
|
|
15
|
+
|
|
16
|
+
```scss
|
|
17
|
+
@use 'enjanga-core-setup/styles' as core;
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
- Components in this library rely on these tokens to ensure **consistent theming, spacing, and typography** across all consuming projects.
|
|
21
|
+
- This separation keeps **core design tokens/utilities** (in `enjanga-core-setup`) independent from **components** (in `enjanga-components-library`).
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
9
25
|
## 📚 Live Storybook
|
|
10
26
|
|
|
11
27
|
Explore the interactive documentation and try all components in Storybook, hosted on Chromatic:
|
|
@@ -16,7 +32,7 @@ Explore the interactive documentation and try all components in Storybook, hoste
|
|
|
16
32
|
- **Framework:** Next.js 13+ (App Router), React 18+
|
|
17
33
|
- **Language:** TypeScript
|
|
18
34
|
- **Design System:** IBM Carbon Design System
|
|
19
|
-
- **Styling:** SASS
|
|
35
|
+
- **Styling:** SASS (+ enjanga-core-setup)
|
|
20
36
|
- **Development & Testing:** Storybook, Chromatic, React Testing Library, Vitest
|
|
21
37
|
- **Build Tool:** Tsup
|
|
22
38
|
|
|
@@ -30,14 +46,14 @@ Explore the interactive documentation and try all components in Storybook, hoste
|
|
|
30
46
|
yarn add enjanga-components-library next@^15.0.0 react@^18.0.0 react-dom@^18.0.0
|
|
31
47
|
```
|
|
32
48
|
|
|
33
|
-
2. **Install and configure IBM Carbon:**
|
|
34
|
-
Follow the [official Carbon React setup guide](https://carbondesignsystem.com/developing/frameworks/react#install).
|
|
49
|
+
2. **Install and configure IBM Carbon and core setup:**
|
|
35
50
|
```bash
|
|
36
|
-
npm install @carbon/react @carbon/styles
|
|
51
|
+
npm install @carbon/react @carbon/styles enjanga-core-setup
|
|
37
52
|
# or
|
|
38
|
-
yarn add @carbon/react @carbon/styles
|
|
53
|
+
yarn add @carbon/react @carbon/styles enjanga-core-setup
|
|
39
54
|
```
|
|
40
|
-
|
|
55
|
+
|
|
56
|
+
Import Carbon’s global styles (e.g., in `app/layout.tsx`):
|
|
41
57
|
```tsx
|
|
42
58
|
import '@carbon/styles/css/index.css';
|
|
43
59
|
```
|
|
@@ -57,6 +73,32 @@ export default function MyPage() {
|
|
|
57
73
|
|
|
58
74
|
✅ **Note:** Component CSS is automatically included — no manual CSS imports needed.
|
|
59
75
|
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## 🎨 Styling Structure
|
|
79
|
+
|
|
80
|
+
This library’s styles follow a **three-tier structure** for clarity and maintainability:
|
|
81
|
+
|
|
82
|
+
1. **Core (via `enjanga-core-setup`)**
|
|
83
|
+
- Provides Carbon design tokens, utilities, and mixins.
|
|
84
|
+
- Always imported with:
|
|
85
|
+
```scss
|
|
86
|
+
@use 'enjanga-core-setup/styles' as core;
|
|
87
|
+
```
|
|
88
|
+
- Example usage: `core.$spacing-03`, `core.type-style('heading-02')`.
|
|
89
|
+
|
|
90
|
+
2. **Global (library-wide styles in `src/styles/global/`)**
|
|
91
|
+
- Apply across components (e.g., typography, skeleton loading animation, utilities).
|
|
92
|
+
- Imported into the main stylesheet (`src/styles/index.scss`).
|
|
93
|
+
|
|
94
|
+
3. **Component-level (scoped styles in `src/components/*/_Component.scss`)**
|
|
95
|
+
- Define structure, layout, and visuals for individual components.
|
|
96
|
+
- Can extend/override global styles when necessary.
|
|
97
|
+
|
|
98
|
+
This separation ensures **consistent design foundations (core)**, **predictable global rules**, and **flexible, isolated component styles**.
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
60
102
|
## 🧪 Testing
|
|
61
103
|
|
|
62
104
|
This library is tested for quality and reliability:
|