enjanga-components-library 1.0.11 → 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.
Files changed (2) hide show
  1. package/README.md +48 -6
  2. package/package.json +4 -6
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
- Import Carbon’s global styles (e.g., in `app/layout.tsx`):
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:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "enjanga-components-library",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "Reusable component library for Next.js 13+ projects with Carbon design system.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -20,9 +20,7 @@
20
20
  "types": "./dist/index.d.ts",
21
21
  "default": "./dist/index.mjs"
22
22
  },
23
- "./styles.css": {
24
- "default": "./dist/styles.css"
25
- }
23
+ "./styles.css": "./dist/styles.css"
26
24
  },
27
25
  "sideEffects": [
28
26
  "**/*.css",
@@ -34,7 +32,7 @@
34
32
  "scripts": {
35
33
  "prepare": "yarn build",
36
34
  "build": "yarn build:css && tsup src/index.ts --dts --format esm,cjs --out-dir dist --external react --external react-dom --external @carbon/react --external clsx",
37
- "build:css": "sass --load-path=node_modules --load-path=node_modules/enjanga-core-setup/src/styles --no-source-map --style=compressed src/styles/index.scss dist/styles.css",
35
+ "build:css": "mkdir -p dist && sass --load-path=node_modules --no-source-map --style=compressed src/styles/index.scss dist/styles.css",
38
36
  "watch": "concurrently \"yarn watch:ts\" \"yarn watch:css\"",
39
37
  "watch:ts": "tsup src/index.ts --dts --format esm,cjs --out-dir dist --watch --external react --external react-dom --external @carbon/react --external clsx",
40
38
  "watch:css": "sass -I node_modules --no-source-map --watch src/styles/index.scss dist/styles.css",
@@ -73,7 +71,7 @@
73
71
  "react": "^18.1.1",
74
72
  "react-docgen-typescript": "^2.4.0",
75
73
  "react-dom": "^18.1.1",
76
- "sass": "^1.92.1",
74
+ "sass": "^1.93.0",
77
75
  "sass-loader": "^16.0.5",
78
76
  "storybook": "^8.6.14",
79
77
  "style-loader": "^4.0.0",