@resolve-components/theme 1.2.4 → 1.2.5
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 +168 -3
- package/package.json +2 -7
- package/schematics/ng-add/index.js +16 -27
- package/styles/resolve-components.scss +17 -0
package/README.md
CHANGED
|
@@ -1,7 +1,172 @@
|
|
|
1
1
|
# resolve-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Fully customizable Angular UI component library** – 40+ standalone, fully typed, OnPush components with a comprehensive theming system.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- 🎨 **40+ Components** — buttons, inputs, dialogs, tables, trees, virtual scroll, and more
|
|
6
|
+
- 🎭 **Design Tokens** — flat-map SCSS themes emit CSS custom properties at runtime
|
|
7
|
+
- 🌙 **Dark Mode** — built-in `default` and `dark` themes; create your own
|
|
8
|
+
- ✅ **Standalone** — every component is standalone with OnPush change detection
|
|
9
|
+
- 📦 **Zero Dependencies** — uses only Angular CDK overlay for dialogs
|
|
10
|
+
- 🚀 **ng add Schematic** — automatic setup with a single command
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
[📖 Documentation](https://resolve-components.web.app) | [🎨 Component Library](https://resolve-components.web.app/components) | [📦 npm](https://www.npmjs.com/package/@resolve-components/theme)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### Automatic Setup (Recommended)
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
ng add @resolve-components/theme
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The schematic will:
|
|
25
|
+
|
|
26
|
+
- ✅ Install the package
|
|
27
|
+
- ✅ Configure `angular.json`
|
|
28
|
+
- ✅ Update `app.config.ts`
|
|
29
|
+
- ✅ Add `@resolve-components` entry to styles
|
|
30
|
+
|
|
31
|
+
Then start building! 🎉
|
|
32
|
+
|
|
33
|
+
### Manual Setup
|
|
34
|
+
|
|
35
|
+
#### 1. Install the package & Angular CDK
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @resolve-components/theme @angular/cdk
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
#### 2. Configure `angular.json`
|
|
42
|
+
|
|
43
|
+
Add the CDK overlay stylesheet to your build `styles` and register the `styles/` folder as a Sass include path:
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"projects": {
|
|
48
|
+
"<your-project>": {
|
|
49
|
+
"architect": {
|
|
50
|
+
"build": {
|
|
51
|
+
"options": {
|
|
52
|
+
"styles": ["node_modules/@angular/cdk/overlay-prebuilt.css", "node_modules/@resolve-components/theme/styles/resolve-components.scss"],
|
|
53
|
+
"stylePreprocessorOptions": {
|
|
54
|
+
"includePaths": ["node_modules/@resolve-components/theme/styles"]
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
#### 3. Register the theme provider
|
|
65
|
+
|
|
66
|
+
Add `provideRcTheme()` to your application providers in `app.config.ts`:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { provideRcTheme } from '@resolve-components/theme';
|
|
70
|
+
|
|
71
|
+
export const appConfig: ApplicationConfig = {
|
|
72
|
+
providers: [
|
|
73
|
+
provideRcTheme({ name: 'default' }),
|
|
74
|
+
// ...other providers
|
|
75
|
+
],
|
|
76
|
+
};
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### 4. Wrap your root template with `<rc-layout>`
|
|
80
|
+
|
|
81
|
+
The layout component listens to theme changes and applies the correct CSS class to `<body>`:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!-- app.html -->
|
|
85
|
+
<rc-layout>
|
|
86
|
+
<rc-navbar position="fixed">...</rc-navbar>
|
|
87
|
+
<router-outlet />
|
|
88
|
+
</rc-layout>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Import `RcLayout` in your root component:
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { RcLayout } from '@resolve-components/theme';
|
|
95
|
+
|
|
96
|
+
@Component({
|
|
97
|
+
imports: [RcLayout /* , ... */],
|
|
98
|
+
})
|
|
99
|
+
export class AppComponent {}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## What's Included
|
|
105
|
+
|
|
106
|
+
### 40+ Components
|
|
107
|
+
|
|
108
|
+
All standalone, fully typed, with OnPush change detection:
|
|
109
|
+
|
|
110
|
+
- **Layout & Display**: Layout, Navbar, Sidenav, Card, Alert, Badge, Icon
|
|
111
|
+
- **Forms**: Input, Select, Checkbox, Radio, Toggle, Datepicker, File Upload
|
|
112
|
+
- **Content**: Table, Tree, Paginator, Infinite Scroll, Virtual Scroll
|
|
113
|
+
- **Feedback**: Toast, Dialog, Tooltip, Menu
|
|
114
|
+
- **Input Patterns**: Autocomplete, Slider, Tabs, Accordion
|
|
115
|
+
- **Progress**: Spinner, Progress Bar
|
|
116
|
+
- **And more!** → [Browse all components](https://resolve-components.web.app/components)
|
|
117
|
+
|
|
118
|
+
### Design Tokens
|
|
119
|
+
|
|
120
|
+
Flat-map SCSS theming system:
|
|
121
|
+
|
|
122
|
+
- Emit CSS custom properties at runtime
|
|
123
|
+
- Swap themes instantly with a single class change on `<body>`
|
|
124
|
+
- Fully customizable — extend the default theme or create your own
|
|
125
|
+
|
|
126
|
+
### Built-in Themes
|
|
127
|
+
|
|
128
|
+
- **Default** — light mode with professional neutral colors
|
|
129
|
+
- **Dark** — dark mode optimized for low-light environments
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Example Usage
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { RcButtonComponent } from '@resolve-components/theme';
|
|
137
|
+
|
|
138
|
+
@Component({
|
|
139
|
+
selector: 'app-example',
|
|
140
|
+
standalone: true,
|
|
141
|
+
imports: [RcButtonComponent],
|
|
142
|
+
template: `
|
|
143
|
+
<button rcButton variant="filled" status="primary">Click me</button>
|
|
144
|
+
<button rcButton variant="outline">Secondary</button>
|
|
145
|
+
<button rcButton variant="ghost">Ghost</button>
|
|
146
|
+
`,
|
|
147
|
+
})
|
|
148
|
+
export class ExampleComponent {}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Peer Dependencies
|
|
154
|
+
|
|
155
|
+
- `@angular/common` ≥ 17.0.0
|
|
156
|
+
- `@angular/core` ≥ 17.0.0
|
|
157
|
+
- `@angular/forms` ≥ 17.0.0
|
|
158
|
+
- `@angular/cdk` ≥ 17.0.0
|
|
159
|
+
- `@angular/platform-browser` ≥ 17.0.0
|
|
160
|
+
- `rxjs` ≥ 7.4.0
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Resources
|
|
165
|
+
|
|
166
|
+
- 📖 [Full Documentation](https://resolve-components.web.app)
|
|
167
|
+
- 🎨 [Component Showcase](https://resolve-components.web.app/components)
|
|
168
|
+
- 📦 [npm Package](https://www.npmjs.com/package/@resolve-components/theme)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
**Made with ❤️ using Angular, Angular CDK, and SCSS**
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@resolve-components/theme",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"schematics": "./collection.json",
|
|
5
|
-
"description": "ÃÃâ€Â
|
|
5
|
+
"description": "ðŸâ€ÂÂÂÂÂÂÂ¥ Fully customizable Angular UI components made with â¤︠using Angular CDK ðŸâ€ÂÂÂÂÂÂÂ¥",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/common": ">=17.0.0",
|
|
8
8
|
"@angular/core": ">=17.0.0",
|
|
@@ -13,11 +13,6 @@
|
|
|
13
13
|
"eva-icons": "^1.1.3",
|
|
14
14
|
"@angular-devkit/schematics": ">=17.0.0"
|
|
15
15
|
},
|
|
16
|
-
"peerDependenciesMeta": {
|
|
17
|
-
"eva-icons": {
|
|
18
|
-
"optional": true
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
16
|
"website": "https://resolve-components.web.app",
|
|
22
17
|
"keywords": [
|
|
23
18
|
"@resolve-components/theme",
|
|
@@ -207,12 +207,17 @@ function addBuildConfig(options) {
|
|
|
207
207
|
ctx.logger.warn('⚠ Could not find build target options — add them manually.');
|
|
208
208
|
return tree;
|
|
209
209
|
}
|
|
210
|
-
// ── styles: add CDK overlay CSS ──
|
|
211
|
-
const cdkStyle = 'node_modules/@angular/cdk/overlay-prebuilt.css';
|
|
210
|
+
// ── styles: add CDK overlay CSS + resolve-components entry ──
|
|
212
211
|
if (!Array.isArray(buildOptions['styles']))
|
|
213
212
|
buildOptions['styles'] = [];
|
|
214
|
-
|
|
215
|
-
|
|
213
|
+
const stylesToAdd = [
|
|
214
|
+
'node_modules/@angular/cdk/overlay-prebuilt.css',
|
|
215
|
+
'node_modules/@resolve-components/theme/styles/resolve-components.scss',
|
|
216
|
+
];
|
|
217
|
+
for (const s of stylesToAdd) {
|
|
218
|
+
if (!buildOptions['styles'].includes(s)) {
|
|
219
|
+
buildOptions['styles'].push(s);
|
|
220
|
+
}
|
|
216
221
|
}
|
|
217
222
|
// ── stylePreprocessorOptions: add includePath ──
|
|
218
223
|
const includePath = 'node_modules/@resolve-components/theme/styles';
|
|
@@ -260,30 +265,14 @@ function addProviderToConfig(options) {
|
|
|
260
265
|
};
|
|
261
266
|
}
|
|
262
267
|
// ---------------------------------------------------------------------------
|
|
263
|
-
// Rule:
|
|
268
|
+
// Rule: global styles — handled via styles array entry, no styles.scss changes
|
|
264
269
|
// ---------------------------------------------------------------------------
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
ctx.logger.warn(`⚠ ${stylesPath} not found.\n` +
|
|
272
|
-
` Add the following to your global stylesheet:\n` +
|
|
273
|
-
` @use 'all' as *;\n @include rc-install();`);
|
|
274
|
-
return tree;
|
|
275
|
-
}
|
|
276
|
-
let content = tree.read(stylesPath).toString('utf-8');
|
|
277
|
-
if (content.includes('@resolve-components/theme') ||
|
|
278
|
-
content.includes(`@use 'all'`)) {
|
|
279
|
-
return tree;
|
|
280
|
-
}
|
|
281
|
-
// Minimal two-line setup — rc-install() emits all global resets and CSS vars
|
|
282
|
-
const addition = `@use 'all' as *;\n\n// Emit CSS custom property blocks\n@include rc-install();\n\n`;
|
|
283
|
-
tree.overwrite(stylesPath, addition + content);
|
|
284
|
-
ctx.logger.info(` Updated ${stylesPath} with @use 'all' as * and @include rc-install()`);
|
|
285
|
-
return tree;
|
|
286
|
-
};
|
|
270
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
271
|
+
function addGlobalStyles(_options) {
|
|
272
|
+
// All styles are now emitted through the resolve-components.scss entry file
|
|
273
|
+
// added to the project's styles array in addBuildConfig — no modifications to
|
|
274
|
+
// the consumer's styles.scss are needed (mirrors the Nebular/Material approach).
|
|
275
|
+
return (tree) => tree;
|
|
287
276
|
}
|
|
288
277
|
// ---------------------------------------------------------------------------
|
|
289
278
|
// Rule: wrap app.html with <rc-layout>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Resolve Components — Prebuilt Entry Point
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Add this file to your project's styles array in angular.json / project.json:
|
|
5
|
+
//
|
|
6
|
+
// "styles": [
|
|
7
|
+
// "node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
8
|
+
// "node_modules/@resolve-components/theme/styles/resolve-components.scss"
|
|
9
|
+
// ]
|
|
10
|
+
//
|
|
11
|
+
// This single import loads all component styles and emits the CSS custom
|
|
12
|
+
// property blocks required for theming. No changes to your styles.scss needed.
|
|
13
|
+
// =============================================================================
|
|
14
|
+
|
|
15
|
+
@use 'all' as *;
|
|
16
|
+
|
|
17
|
+
@include rc-install();
|