Skip to content

Commit 6900d82

Browse files
rafalwolakrafalwolak
authored
Merge pull request #18 from design4pro/develop
Develop
2 parents 8600702 + 632a67b commit 6900d82

20 files changed

Lines changed: 403 additions & 896 deletions

‎LICENSE.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 DESIGN4 ᴾ ᴿ ᴼ
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,108 @@
11

2-
# AngularJss
2+
# Angular JSS
3+
4+
<img width="20%" height="20%" src="./logo.svg">
5+
6+
> [JSS](https://cssinjs.org/) integration with Angular
7+
8+
[![Version](https://img.shields.io/npm/v/@design4pro/angular-jss.svg?style=flat-square)](https://npmjs.org/package/@design4pro/angular-jss)
9+
[![License](https://img.shields.io/npm/l/@design4pro/angular-jss.svg?style=flat-square)](https://github.com/design4pro/angular-jss/jss/blob/master/LICENSE.md)
10+
[![Downloads](https://img.shields.io/npm/dm/@design4pro/angular-jss.svg?style=flat-square)](https://npmjs.org/package/@design4pro/angular-jss)
11+
[![Size](https://img.shields.io/bundlephobia/minzip/@design4pro/angular-jss.svg?style=flat-square)](https://npmjs.org/package/@design4pro/angular-jss)
12+
[![design4pro](https://img.shields.io/badge/@-design4pro-383636?style=flat-square&labelColor=8f68d4)](https://github.com/design4pro/)
13+
14+
## Features
15+
16+
## Table of Contents
17+
18+
- [Installation](#installation)
19+
- [Usage](#usage)
20+
21+
## Installation
22+
23+
Using `npm`:
24+
25+
```sh
26+
npm install @design4pro/angular-jss
27+
```
28+
29+
or using `yarn`:
30+
31+
```sh
32+
yarn add @design4pro/angular-jss
33+
```
34+
35+
## Usage
36+
37+
Inject the `AngularJssModule` module into your root module:
38+
39+
```ts
40+
import { NgModule } from '@angular/core';
41+
import { BrowserModule } from '@angular/platform-browser';
42+
import { AngularJssModule } from '@design4pro/angular-jss';
43+
import { AppComponent } from './app.component';
44+
45+
@NgModule({
46+
declarations: [AppComponent],
47+
imports: [BrowserModule, AngularJssModule.forRoot()],
48+
providers: [],
49+
bootstrap: [AppComponent],
50+
})
51+
export class AppModule {}
52+
```
53+
54+
Use class decorator `Styled` to add styles to your component:
55+
56+
```ts
57+
import { Component } from '@angular/core';
58+
import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
59+
60+
@Component({
61+
selector: 'angular-jss-root',
62+
templateUrl: './app.component.html',
63+
styleUrls: ['./app.component.css'],
64+
})
65+
@Styled(({ css, injectGlobal }) => {
66+
// global styles
67+
injectGlobal({
68+
'@global': {
69+
':root': {
70+
'--background-color': (data: { backgroundColor: string }) => data.backgroundColor,
71+
},
72+
},
73+
});
74+
75+
// element styles
76+
return css(
77+
(theme: Theme) => ({
78+
root: {
79+
color: '#fff',
80+
backgroundColor: 'var(--background-color)',
81+
padding: '20px',
82+
direction: theme.direction,
83+
},
84+
}),
85+
{ name: 'first' }
86+
);
87+
})
88+
export class AppComponent {
89+
classes: any; // required to use `[ngClass]="classes.root"` in html template
90+
91+
@StyledProp() // mark property as styled property
92+
backgroundColor = 'red';
93+
94+
click() {
95+
this.backgroundColor = this.backgroundColor === 'red' ? 'green' : 'red';
96+
}
97+
}
98+
```
99+
100+
```html
101+
<div [ngClass]="classes.root"></div>
102+
```
103+
104+
## Config options
105+
106+
## License
107+
108+
[MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ

‎apps/webpage/src/app/app.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<angular-jss-nx-welcome></angular-jss-nx-welcome>
1+
<div [ngClass]="classes.root"></div>
2+
3+
<button (click)="click()">Change color</button>

‎apps/webpage/src/app/app.component.spec.ts‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { TestBed } from '@angular/core/testing';
22
import { AppComponent } from './app.component';
3-
import { NxWelcomeComponent } from './nx-welcome.component';
43

54
describe('AppComponent', () => {
65
beforeEach(async () => {
76
await TestBed.configureTestingModule({
8-
declarations: [AppComponent, NxWelcomeComponent],
7+
declarations: [AppComponent],
98
}).compileComponents();
109
});
1110

@@ -14,19 +13,4 @@ describe('AppComponent', () => {
1413
const app = fixture.componentInstance;
1514
expect(app).toBeTruthy();
1615
});
17-
18-
it(`should have as title 'angular-jss'`, () => {
19-
const fixture = TestBed.createComponent(AppComponent);
20-
const app = fixture.componentInstance;
21-
expect(app.title).toEqual('angular-jss');
22-
});
23-
24-
it('should render title', () => {
25-
const fixture = TestBed.createComponent(AppComponent);
26-
fixture.detectChanges();
27-
const compiled = fixture.nativeElement as HTMLElement;
28-
expect(compiled.querySelector('h1')?.textContent).toContain(
29-
'Welcome angular-jss'
30-
);
31-
});
3216
});

‎apps/webpage/src/app/app.component.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,42 @@
11
import { Component } from '@angular/core';
2+
import { Styled, StyledProp, Theme } from '@design4pro/angular-jss';
23

34
@Component({
45
selector: 'angular-jss-root',
56
templateUrl: './app.component.html',
67
styleUrls: ['./app.component.css'],
78
})
9+
@Styled(({ css, injectGlobal }) => {
10+
injectGlobal({
11+
'@global': {
12+
':root': {
13+
'--background-color': (data: { color: string }) => data.color,
14+
},
15+
},
16+
});
17+
18+
return css(
19+
(theme: Theme) => ({
20+
root: {
21+
color: '#fff',
22+
backgroundColor: 'var(--background-color)',
23+
padding: '20px',
24+
direction: theme.direction,
25+
},
26+
}),
27+
{ name: 'first' }
28+
);
29+
})
830
export class AppComponent {
931
title = 'angular-jss';
32+
classes: any;
33+
name?: string;
34+
35+
@StyledProp()
36+
color = 'red';
37+
38+
click() {
39+
this.color = this.color === 'red' ? 'green' : 'red';
40+
this.name = this.color;
41+
}
1042
}

‎apps/webpage/src/app/app.module.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
3+
import { AngularJssModule } from '@design4pro/angular-jss';
44
import { AppComponent } from './app.component';
5-
import { NxWelcomeComponent } from './nx-welcome.component';
65

76
@NgModule({
8-
declarations: [AppComponent, NxWelcomeComponent],
9-
imports: [BrowserModule],
7+
declarations: [AppComponent],
8+
imports: [BrowserModule, AngularJssModule.forRoot()],
109
providers: [],
1110
bootstrap: [AppComponent],
1211
})

0 commit comments

Comments
 (0)