Feature/refactor paths (#283)

* refactor(chlorophyll): update structure and use relative paths

closes #281

* build(charts): output scss and compiled css

closes #280

* chore(deps): update

* chore(extract): add build and release config

.storybook/scss-loader.scss

@@ -1,5 +1,5 @@
 // load global styles used by storybook
-@use '../libs/chlorophyll/src/lib/index.scss' with ($font-path: '../dist/fonts');
+@use '../libs/chlorophyll/scss' with ($font-path: '../dist/fonts');
 
 // styling for storybook
 body {

apps/angular-lib-dev/src/app/app-routing.module.ts

@@ -1,17 +1,37 @@
-import { NgModule } from '@angular/core';
-import { ExtraOptions, RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core'
+import { ExtraOptions, RouterModule, Routes } from '@angular/router'
 
 const routes: Routes = [
   { path: '', redirectTo: 'segmented-control', pathMatch: 'full' },
-  { path: 'segmented-control', data: {name: 'Segmented control'}, loadChildren: () => import('./segmented-control/segmented-control.module').then(m => m.SegmentedControlModule) },
-  { path: 'dropdown', data: {name: 'Dropdown'}, loadChildren: () => import('./dropdown/dropdown.module').then(m => m.DropdownModule) },
+  {
+    path: 'segmented-control',
+    data: { name: 'Segmented control' },
+    loadChildren: () =>
+      import('./segmented-control/segmented-control.module').then(
+        (m) => m.SegmentedControlModule
+      ),
+  },
+  {
+    path: 'dropdown',
+    data: { name: 'Dropdown' },
+    loadChildren: () =>
+      import('./dropdown/dropdown.module').then((m) => m.DropdownModule),
+  },
+  {
+    path: 'charts',
+    data: { name: 'Charts' },
+    loadChildren: () =>
+      import('./green-charts/green-charts.module').then(
+        (m) => m.GreenChartsModule
+      ),
+  },
   { path: '**', redirectTo: 'buttons' },
-];
+]
 
 const routerOptions: ExtraOptions = {
   anchorScrolling: 'enabled',
-  relativeLinkResolution: 'legacy'
-};
+  relativeLinkResolution: 'legacy',
+}
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, routerOptions)],

apps/angular-lib-dev/src/app/green-charts/green-charts-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { GreenChartsComponent } from './green-charts.component';
+
+const routes: Routes = [{ path: '', component: GreenChartsComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GreenChartsRoutingModule { }

apps/angular-lib-dev/src/app/green-charts/green-charts.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core'
+import { ChartSettings } from '@sebgroup/green-charts'
+
+@Component({
+  selector: 'green-green-charts',
+  template: `<ngg-chart [settings]="settings"></ngg-chart>`,
+  styleUrls: ['./green-charts.component.css'],
+})
+export class GreenChartsComponent {
+  settings: ChartSettings = {
+    data: [
+      {
+        name: 'Antal',
+        type: 'bar',
+        values: [234, 197, 97, 12],
+      },
+    ],
+    categories: [
+      'Signerade avtal (SEB)',
+      'Påbörjade trials (Oxceed)',
+      'Aktiverade prenumerationer',
+      'Avslutade prenumerationer (endast efter avslutad ordinarie pren.)',
+    ],
+  }
+}

apps/angular-lib-dev/src/app/green-charts/green-charts.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+import { GreenChartsRoutingModule } from './green-charts-routing.module'
+import { GreenChartsComponent } from './green-charts.component'
+import { NggChartsModule } from '@sebgroup/green-angular-charts'
+
+@NgModule({
+  declarations: [GreenChartsComponent],
+  imports: [CommonModule, NggChartsModule, GreenChartsRoutingModule],
+})
+export class GreenChartsModule {}

apps/angular-lib-dev/src/styles.scss

@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
-@use './libs/chlorophyll/src/lib' with (
-  $font-path: '../fonts'
-);
+@use './libs/chlorophyll/scss' with ($font-path: '../fonts');
+
+@use './libs/charts/scss' as charts;

libs/angular-charts/.storybook/scss-loader.scss

@@ -1,7 +1,7 @@
 // load global styles used by storybook
-@use '../../chlorophyll/src/lib/index.scss' with ($font-path: '../dist/fonts');
+@use '../../chlorophyll/scss' with ($font-path: '../dist/fonts');
 
-@use '../../charts/src/scss/index.scss' as charts;
+@use '../../charts/scss' as charts;
 
 // styling for storybook
 body {

libs/angular-charts/package.json

@@ -2,13 +2,13 @@
   "name": "@sebgroup/green-angular-charts",
   "version": "0.0.0-semantically-released",
   "peerDependencies": {
-    "@angular/common": "^12.1.0",
-    "@angular/core": "^12.1.0",
+    "@angular/common": "^13.0.3",
+    "@angular/core": "^13.0.3",
     "@sebgroup/chlorophyll": "^1.0.0-alpha.1"
   },
   "dependencies": {
     "@sebgroup/green-charts": "*",
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.1"
   },
   "description": "Angular charts built on top of @sebgroup/green-charts.",
   "repository": {

libs/angular-charts/src/lib/chart/Get-started.stories.mdx

@@ -0,0 +1,80 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Get started" />
+
+# Install
+
+```
+npm install @sebgroup/green-angular-charts --save
+```
+
+# Import chart module
+We recommend import `NggChartsModule` into a shared module eg. `SharedModule` that can be imported into other, preferably lazy loaded modules when needed.
+```ts
+import { NggChartsModule } from '@sebgroup/green-angular-charts'
+
+@NgModule({
+  declarations: [...],
+  imports: [
+    ...
+    NggChartsModule
+  ],
+  exports: [
+    NggChartsModule
+  ]
+})
+export class SharedModule {}
+```
+
+# Import styling
+We recommend setting up your Angular project to use scss (SASS) for css preprocessing.
+
+Once configured to use scss, it's just a matter of including the scss to your main styles file, typically it would be `styles.scss` located at the root of the `src` folder unless you've changed it.
+Don't forget to add the base styles for green as they're needed too (example with minimal dependencies will be added later).
+
+### Add scss
+`{project}/src/styles.scss`
+
+```css
+// import base styles from green/chlorophyll
+@use '~@sebgroup/chlorophyll/scss' with ($font-path: '../fonts');
+
+// import chart styles from green-charts
+@use "~@sebgroup/green-charts/scss" as charts;
+```
+
+# Add and use component
+`{project}/src/app/ex-bar-chart/ex-bar-chart.component.ts`
+
+```ts
+import { Component } from '@angular/core'
+import { ChartSettings } from '@sebgroup/green-charts'
+
+@Component({
+  selector: 'ex-bar-chart',
+  template: `<ngg-chart [settings]="settings"></ngg-chart>`,
+  styleUrls: ['./green-charts.component.css'],
+})
+export class BarChartsComponent {
+  settings: ChartSettings = {
+    data: [
+      {
+        name: 'Antal',
+        type: 'bar',
+        values: [234, 197, 97, 12],
+      },
+    ],
+    categories: [
+      'Signerade avtal (SEB)',
+      'Påbörjade trials (Oxceed)',
+      'Aktiverade prenumerationer',
+      'Avslutade prenumerationer (endast efter avslutad ordinarie pren.)',
+    ],
+  }
+}
+```
+
+### Have other needs?
+More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/sebgroup/green/issues)
+
+

libs/angular/.storybook/scss-loader.scss

@@ -1,5 +1,5 @@
 // load global styles used by storybook
-@use '../../chlorophyll/src/lib/index.scss' with ($font-path: '../dist/fonts');
+@use '../../chlorophyll/scss' with ($font-path: '../dist/fonts');
 
 // styling for storybook
 body {

libs/angular/package.json

@@ -2,13 +2,13 @@
   "name": "@sebgroup/green-angular",
   "version": "0.0.0-semantically-released",
   "peerDependencies": {
-    "@angular/common": "^12.1.0",
-    "@angular/core": "^12.1.0"
+    "@angular/common": "^13.0.3",
+    "@angular/core": "^13.0.3"
   },
   "dependencies": {
     "@sebgroup/chlorophyll": "^1.0.0-alpha.1",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.1"
   },
   "description": "Angular components built on top of @sebgroup/chlorophyll.",
   "repository": {

libs/angular/src/lib/Get-started.stories.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Get started" />
+
+# Install
+
+```
+npm install @sebgroup/green-angular --save
+```
+
+# Import module
+We recommend import `NggModule` (or just the module you need for Angular Green) into a shared module eg. `SharedModule` that can be imported into other, preferably lazy loaded modules when needed.
+```ts
+import { NggModule } from '@sebgroup/green-angular'
+
+@NgModule({
+  declarations: [...],
+  imports: [
+    ...
+    NggModule
+  ],
+  exports: [
+    NggModule
+  ]
+})
+export class SharedModule {}
+```
+
+# Import styling
+We recommend setting up your Angular project to use scss (SASS) for css preprocessing.
+
+Once configured to use scss, it's just a matter of including the scss to your main styles file, typically it would be `styles.scss` located at the root of the `src` folder unless you've changed it.
+
+### Add scss
+`{project}/src/styles.scss`
+
+```css
+// import base styles from green/chlorophyll
+@use '~@sebgroup/chlorophyll/scss' with ($font-path: '../fonts');
+```
+
+### Have other needs?
+More examples and use cases coming soon! In the meantime create an [issue over at github](https://github.com/sebgroup/green/issues)
+
+

libs/charts/src/scss/index.scss → libs/charts/scss/index.scss

@@ -1,6 +1,6 @@
-@use '../../../chlorophyll/src/lib/tokens/color';
-@use '../../../chlorophyll/src/lib/tokens';
-@use '../../../chlorophyll/src/lib/tokens/shame' as newTokens;
+@use '../../chlorophyll/scss/tokens/color';
+@use '../../chlorophyll/scss/tokens';
+@use '../../chlorophyll/scss/tokens/shame' as newTokens;
 @use 'sass:map';
 @use 'shame';
 // @use 'node_modules/billboard.js/src/scss/billboard';

libs/charts/src/scss/shame.scss → libs/charts/scss/shame.scss

@@ -1,5 +1,5 @@
-@use '../../../chlorophyll/src/lib/tokens';
-@use '../../../chlorophyll/src/lib/common/spacing' as common;
+@use '../../chlorophyll/scss/tokens';
+@use '../../chlorophyll/scss/common/spacing' as common;
 @mixin chart-series-list-item() {
   @include common.margin-top(3);
   align-items: center;

libs/charts/src/index.ts

@@ -1,2 +1 @@
-import './scss/index.scss'
 export * from './lib'

libs/chlorophyll/.storybook/main.js

@@ -5,12 +5,10 @@ module.exports = {
 
   stories: [
     ...rootMain.stories,
-    '../src/lib/**/*.stories.mdx',
-    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    ...rootMain.addons,
+    '../**/*.stories.mdx',
+    '../**/*.stories.@(js|jsx|ts|tsx)',
   ],
+  addons: [...rootMain.addons],
   webpackFinal: async (config, { configType }) => {
     // apply any global webpack configs that might have been specified in .storybook/main.js
     if (rootMain.webpackFinal) {

libs/chlorophyll/src/lib/components/list/_index.scss → libs/chlorophyll/scss/components/list/_index.scss

@@ -2,7 +2,6 @@
 @use '../../common';
 @use 'mixins';
 @use 'sass:map';
-@forward 'mixins';
 
 ul:not(.legend) {
   @include mixins.base-list();