@carbon/charts-angular 1.8.0 → 1.9.0-rc.3

package/src/stories/diagrams/diagrams-nodes-card.stories.ts

@@ -0,0 +1,245 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular'
+import { CardNodeModule } from '../../'
+import { ScreenModule, ChevronDownModule } from '@carbon/icons-angular'
+
+const getTemplate = (content: string) => `
+	<div class="container theme--white" style="max-width: 400px;">
+		${content}
+	</div>
+`
+
+storiesOf('Diagrams/Nodes/Card', module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [CardNodeModule, ScreenModule, ChevronDownModule]
+		})
+	)
+	.add(
+		'Default',
+		() => ({
+			template: getTemplate(`
+		<ibm-diagram-card-node>
+			<ibm-diagram-card-node-column>
+				<ibm-diagram-card-node-title>
+					{{ title }}
+				</ibm-diagram-card-node-title>
+				<ibm-diagram-card-node-subtitle>
+					{{ description }}
+				</ibm-diagram-card-node-subtitle>
+			</ibm-diagram-card-node-column>
+		</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Stacked',
+		() => ({
+			template: getTemplate(`
+		<ibm-diagram-card-node [stacked]="stacked">
+			<ibm-diagram-card-node-column>
+				<ibm-diagram-card-node-title>
+					{{ title }}
+				</ibm-diagram-card-node-title>
+				<ibm-diagram-card-node-subtitle>
+					{{ description }}
+				</ibm-diagram-card-node-subtitle>
+			</ibm-diagram-card-node-column>
+		</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				stacked: true
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Color',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				color: '#8a3ffc'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'With icon',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'As button',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [as]="component">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				component: 'button'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'As link',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [href]="href">
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				href: '#'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'With label',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+			<ibm-diagram-card-node-label>
+				{{ label }}
+			</ibm-diagram-card-node-label>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				label: 'Label'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'With action',
+		() => ({
+			template: getTemplate(`
+	<ibm-diagram-card-node [color]="color">
+		<ibm-diagram-card-node-column>
+			<svg ibmIconScreen size="16"></svg>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column>
+			<ibm-diagram-card-node-title>
+				{{ title }}
+			</ibm-diagram-card-node-title>
+			<ibm-diagram-card-node-subtitle>
+				{{ description }}
+			</ibm-diagram-card-node-subtitle>
+		</ibm-diagram-card-node-column>
+		<ibm-diagram-card-node-column [farsideColumn]="farsideColumn">
+			<svg ibmIconChevronDown size="16"></svg>
+		</ibm-diagram-card-node-column>
+	</ibm-diagram-card-node>
+	`),
+			props: {
+				title: 'Title',
+				description: 'Description',
+				farsideColumn: true
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)

package/src/stories/diagrams/diagrams-nodes-shape.stories.ts

@@ -0,0 +1,141 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular'
+import { ScreenModule } from '@carbon/icons-angular'
+import { ShapeNodeModule } from '../../'
+import { getTemplate } from './utils'
+
+storiesOf('Diagrams/Nodes/Shape', module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [ShapeNodeModule, ScreenModule]
+		})
+	)
+	.add(
+		'Default',
+		() => ({
+			template: getTemplate(`
+		<div>
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Square',
+		() => ({
+			template: getTemplate(`
+		<div>
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [shape]="shape"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title',
+				shape: 'square'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Rounded square',
+		() => ({
+			template: getTemplate(`
+		<div>
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [shape]="shape"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title',
+				shape: 'rounded-square'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'As button',
+		() => ({
+			template: getTemplate(`
+		<div>
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [as]="component"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title',
+				component: 'button'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'As link',
+		() => ({
+			template: getTemplate(`
+		<div>
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [href]="href"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title',
+				href: '#'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)
+	.add(
+		'Inherited dimensions',
+		() => ({
+			template: getTemplate(`
+		<div style="height: 64px; width: 64px; position: relative;">
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [size]="'100%'" position="static"></ibm-diagram-shape-node>
+			<ng-template #iconTemplate>
+				<svg ibmIconScreen size="16"></svg>
+			</ng-template>
+		</div>
+	`),
+			props: {
+				title: 'Title'
+			}
+		}),
+		{
+			controls: {
+				hideNoControlsWarning: true
+			}
+		}
+	)

package/src/stories/diagrams/utils.ts

@@ -0,0 +1,5 @@
+export const getTemplate = (content: string) => `
+<div class="container theme--white">
+  ${content}
+</div>
+`

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js'
+import 'zone.js/testing'
+import { getTestBed } from '@angular/core/testing'
+import {
+	BrowserDynamicTestingModule,
+	platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing'
+
+declare const require: {
+	context(
+		path: string,
+		deep?: boolean,
+		filter?: RegExp
+	): {
+		<T>(id: string): T
+		keys(): string[]
+	}
+}
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting())
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/)
+// And load the modules.
+context.keys().forEach(context)

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    // Package-specific
+    "baseUrl": "./",
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "outDir": "./dist/out-tsc",
+    // "paths": {
+    //   "charts-angular": [
+    //     "dist"
+    //   ]
+    // },
+    "types": [
+      "vite/client" // for experimental builds `yarn build:package:vite` only
+    ],
+    "useDefineForClassFields": false
+  },
+  "include": [
+    "src",
+    "./package.json"
+  ],
+  "exclude": [
+    "src/test.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.vite.json"
+    }
+  ],
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false,
+    "sourceMap": true
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tsconfig.vite.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.vite.json",
+  "compilerOptions": {
+    // Package-specific
+    "types": [
+      "vite/client"
+    ]
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+	build: {
+		sourcemap: true,
+		chunkSizeWarningLimit: 600,
+		lib: {
+			entry: 'src/index.ts',
+			formats: ['es']
+		},
+		rollupOptions: {
+			external: ['@angular/common', '@angular/core']
+		}
+	},
+	optimizeDeps: {
+		include: ['@carbon/charts'],
+		exclude: ['@carbon/telemetry']
+	},
+	plugins: [dts()]
+})