feat(monorepo): Carbon v11 migration (#1345)

* feat(monorepo): carbon v11 migration

BREAKING CHANGE: node-sass => sass, theming

.nvmrc

@@ -1 +1 @@
-12
+14

README.md

@@ -26,6 +26,7 @@
 </a>
 
 ## Design specifications
+
 <a href="https://www.carbondesignsystem.com/data-visualization/getting-started" target="_blank">
   <img src="./assets/dv_dark_theme.png" width=700 />
 </a>

package.json

@@ -19,6 +19,7 @@
 		"lint": "lerna run lint",
 		"build": "yarn build-all",
 		"build-all": "bash scripts/build-packages-and-demos.sh",
+		"build-packages": "bash scripts/build-packages.sh",
 		"build-all-demos": "bash scripts/build-demos.sh",
 		"deploy": "bash scripts/deploy.sh"
 	},

packages/angular/.storybook/config.js

@@ -1,14 +1,12 @@
 import { configure } from '@storybook/angular';
 import { setOptions } from '@storybook/addon-options';
-import theme from './theme';
 
 setOptions({
 	name: 'Carbon Charts - Angular',
 	showAddonPanel: true,
 	sortStoriesByKind: true,
 	panelPosition: 'bottom',
 	showDownPanel: true,
-	theme,
 });
 
 // load global styles

packages/angular/.storybook/tsconfig.json

@@ -2,9 +2,9 @@
 	"extends": "../tsconfig.json",
 	"exclude": [
 		"../src/test.ts",
-		"../src/**/*.spec.ts"
+		"../src/**/*.spec.ts",
+		"./node_modules",
+		"../../node_modules"
 	],
-	"include": [
-		"../src/**/*"
-	]
+	"include": ["../src/**/*"]
 }

packages/angular/README.md

@@ -1,4 +1,8 @@
-# `@carbon/charts-angular`
+# Notice
+
+### This version is in beta & relies on **Carbon v11**. If you're using Carbon v10, [see the legacy demo site](https://carbon-charts-0x.netlify.app)
+
+## `@carbon/charts-angular`
 
 > Carbon Charting Angular Wrappers
 
@@ -23,18 +27,29 @@ instead:
 yarn add @carbon/charts @carbon/charts-angular d3
 ```
 
-**Note:** you'd also need to install `carbon-components` if you're not using a bundled version of the library.
+**Note:** you'd also need to install `carbon-components` if you're not using a
+bundled version of the library.
 
 ## Step-by-step instructions
-Read [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)
+
+Read
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-getting-started--angular)
 
 ## Charting data & options
-Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components.
 
-For instance in the case of a donut chart you're able to pass in an additional field called `center` in your options configuring the donut center.
+Although we will definitely introduce new models in the future as we start
+shipping new components such as maps, Data and options follow the same model in
+all charts, with minor exceptions and differences in specific components.
+
+For instance in the case of a donut chart you're able to pass in an additional
+field called `center` in your options configuring the donut center.
 
-For instructions on using the **tabular data format**, see [here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
+For instructions on using the **tabular data format**, see
+[here](https://carbon-design-system.github.io/carbon-charts/?path=/story/docs-tutorials--tabular-data-format)
 
-There are also additional options available depending on the chart type being used, [see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
+There are also additional options available depending on the chart type being
+used,
+[see our demo examples here](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/core/demo/data).
 
-Customizable options (specific to chart type) can be found [here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)
+Customizable options (specific to chart type) can be found
+[here](https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html)

packages/angular/angular.json

@@ -27,13 +27,8 @@
 				"lint": {
 					"builder": "@angular-devkit/build-angular:tslint",
 					"options": {
-						"tsConfig": [
-							"./tsconfig.json",
-							"./tsconfig.spec.json"
-						],
-						"exclude": [
-							"**/node_modules/**"
-						]
+						"tsConfig": ["./tsconfig.json", "./tsconfig.spec.json"],
+						"exclude": ["./node_modules", "../../node_modules"]
 					}
 				}
 			}
@@ -53,12 +48,8 @@
 				"lint": {
 					"builder": "@angular-devkit/build-angular:tslint",
 					"options": {
-						"tsConfig": [
-							"e2e/tsconfig.e2e.json"
-						],
-						"exclude": [
-							"**/node_modules/**/*"
-						]
+						"tsConfig": ["e2e/tsconfig.e2e.json"],
+						"exclude": ["./node_modules", "../../node_modules"]
 					}
 				}
 			}

packages/angular/src/diagrams/card-node/card-node-column.component.ts

@@ -1,7 +1,5 @@
 import { Component, Input, HostBinding } from '@angular/core';
-import settings from 'carbon-components/src/globals/js/settings';
-
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: 'ibm-diagram-card-node-column',
@@ -16,9 +14,9 @@ export class CardNodeColumnComponent {
 
 	@HostBinding('class') get class() {
 		const farsideClassName = this.farsideColumn
-			? `${prefix}--cc--card-node__column--farside`
+			? `${carbonPrefix}--cc--card-node__column--farside`
 			: '';
 
-		return `${prefix}--cc--card-node__column ${farsideClassName}`;
+		return `${carbonPrefix}--cc--card-node__column ${farsideClassName}`;
 	}
 }

packages/angular/src/diagrams/card-node/card-node-label.component.ts

@@ -1,7 +1,5 @@
 import { Component } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
-
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: "ibm-diagram-card-node-label",
@@ -13,5 +11,5 @@ const { prefix } = settings;
 })
 
 export class CardNodeLabelComponent {
-	namespace = `${prefix}--cc--card-node__label`;
+	namespace = `${carbonPrefix}--cc--card-node__label`;
 }

packages/angular/src/diagrams/card-node/card-node-subtitle.component.ts

@@ -1,7 +1,5 @@
 import { Component } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
-
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: "ibm-diagram-card-node-subtitle",
@@ -13,5 +11,5 @@ const { prefix } = settings;
 })
 
 export class CardNodeSubtitleComponent {
-	namespace = `${prefix}--cc--card-node__subtitle`;
+	namespace = `${carbonPrefix}--cc--card-node__subtitle`;
 }

packages/angular/src/diagrams/card-node/card-node-title.component.ts

@@ -1,7 +1,5 @@
 import { Component } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
-
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: "ibm-diagram-card-node-title",
@@ -13,5 +11,5 @@ const { prefix } = settings;
 })
 
 export class CardNodeTitleComponent {
-	namespace = `${prefix}--cc--card-node__title`;
+	namespace = `${carbonPrefix}--cc--card-node__title`;
 }

packages/angular/src/diagrams/card-node/card-node.component.ts

@@ -1,7 +1,5 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import settings from 'carbon-components/src/globals/js/settings';
-
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: 'ibm-diagram-card-node',
@@ -88,7 +86,7 @@ export class CardNodeComponent implements OnInit {
 	@Output() mouseLeave: EventEmitter<any> = new EventEmitter<any>();
 	@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();
 
-	namespace = `${prefix}--cc--card-node`;
+	namespace = `${carbonPrefix}--cc--card-node`;
 
 	component = 'div';
 

packages/angular/src/diagrams/configs.ts

@@ -0,0 +1 @@
+export const carbonPrefix = 'cds';

packages/angular/src/diagrams/edge/edge.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
 import { buildStraightPathString } from "@carbon/charts/components/diagrams/buildPaths";
 
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
+
 interface Coordinates {
 	x: number;
 	y: number;
@@ -40,6 +40,6 @@ export class EdgeComponent {
 	@Input() path: string;
 
 	pathClasses;
-	namespace = `${prefix}--cc--edge`;
+	namespace = `${carbonPrefix}--cc--edge`;
 	straight = buildStraightPathString;
 }

packages/angular/src/diagrams/marker/marker.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
 import {
 	arrowLeft,
 	arrowRight,
@@ -9,7 +8,7 @@ import {
 	tee,
 } from "@carbon/charts/components/diagrams/markerDefinitions";
 
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 const template = `
 <svg:marker
@@ -40,7 +39,7 @@ export class MarkerComponent {
 	@Input() refY: string | number;
 	@Input() position: "start" | "end" = "end";
 
-	namespace = `${prefix}--cc--marker`;
+	namespace = `${carbonPrefix}--cc--marker`;
 
 	setAttributes = ({d, id, height, width}) => {
 		const xPos = (this.position === "end") ? (width / 2) + 0.5 : 0.5;

packages/angular/src/diagrams/shape-node/shape-node.component.ts

@@ -6,9 +6,8 @@ import {
 	TemplateRef,
 	OnInit,
 } from '@angular/core';
-import settings from 'carbon-components/src/globals/js/settings';
 
-const { prefix } = settings;
+import { carbonPrefix } from '../configs';
 
 @Component({
 	selector: 'ibm-diagram-shape-node',
@@ -121,7 +120,7 @@ export class ShapeNodeComponent implements OnInit {
 	@Output() mouseLeave: EventEmitter<any> = new EventEmitter<any>();
 	@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();
 
-	namespace = `${prefix}--cc--shape-node`;
+	namespace = `${carbonPrefix}--cc--shape-node`;
 	component = 'div';
 
 	ngOnInit() {

packages/angular/stories/all.stories.ts

@@ -7,13 +7,17 @@ import { storybookDemoGroups } from '@carbon/charts/demo/data';
 
 const getTemplate = (demo) => `
 	<div class="container theme--white">
+		<div class="v10-banner">
+			This version is in beta & relies on <b>Carbon v11</b>. If you're using Carbon v10, <a href="https://carbon-charts-0x.netlify.app" target="_blank" rel="noreferrer">see the legacy demo site</a>
+		</div>
+
 		<h3>
 			<b>Component:</b>
-			<span class="bx--tag bx--tag--green component-name">${demo.chartType.angular}</span>
+			<span class="cds--tag cds--tag--green component-name">${demo.chartType.angular}</span>
 		</h3>
 		<p class="props"><b>Props:</b> data, <a href="https://carbon-design-system.github.io/carbon-charts/documentation/modules/_interfaces_charts_.html" target="_blank">options</a></p>
 
-		<div class="marginTop-30">
+		<div class="marginTop-30" id="chart-demo">
 			<${demo.chartType.angular}
 				class="n-chart"
 				[data]="data"
@@ -28,8 +32,8 @@ const getTemplate = (demo) => `
 		<div class="marginTop-30" *ngFor="let codeFile of codeFiles;">
 			<h5>{{codeFile}}</h5>
 
-			<div class="bx--snippet bx--snippet--multi bx--snippet--expand marginTop-15" data-code-snippet>
-				<div class="bx--snippet-container" aria-label="Code Snippet Text">
+			<div class="cds--snippet cds--snippet--multi cds--snippet--expand marginTop-15" data-code-snippet>
+				<div class="cds--snippet-container" aria-label="Code Snippet Text">
 					<pre><code>{{code[codeFile]}}</code></pre>
 				</div>
 			</div>

packages/angular/tsconfig.json

@@ -14,17 +14,11 @@
 		"downlevelIteration": true,
 		"importHelpers": true,
 		"target": "es2015",
-		"typeRoots": [
-			"./node_modules/@types"
-		],
-		"lib": [
-			"es2017",
-			"dom"
-		]
+		"typeRoots": ["./node_modules/@types"],
+		"lib": ["es2017", "dom"]
 	},
-	"include": [
-		"src/**/*"
-	],
+	"include": ["src/**/*"],
+	"exclude": ["./node_modules", "../../node_modules"],
 	"angularCompilerOptions": {
 		"annotateForClosureCompiler": true,
 		"skipTemplateCodegen": true,