Replace Storybook with documentation site (Phase 1)

.github/workflows/release.yml

@@ -24,11 +24,10 @@ jobs:
       - name: Install dependencies 🔧
         run: yarn install --immutable --check-cache
 
-      - name: Set git user and get git into the right state
+      - name: Set git user
         run: |
           git config --global user.email "[email protected]"
           git config --global user.name "carbon-bot"
-          git checkout master
 
       - name: Create version and change logs 
         env:

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

package.json

@@ -25,10 +25,10 @@
   "engines": {
     "node": "^18.19.0"
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.1.0",
   "prettier": "./prettier.config.mjs",
   "devDependencies": {
-    "@nrwl/devkit": "^18.0.3",
+    "@nrwl/devkit": "^18.0.4",
     "@storybook/addon-essentials": "~7.6.13",
     "@storybook/addon-interactions": "~7.6.13",
     "@storybook/addon-links": "~7.6.13",
@@ -65,8 +65,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "~7.6.13",
-    "vite": "^5.1.0",
-    "vue": "^3.4.16"
+    "vite": "^5.1.1",
+    "vue": "^3.4.18"
   },
   "husky": {
     "hooks": {

packages/angular/package.json

@@ -35,7 +35,7 @@
 	},
 	"dependencies": {
 		"@carbon/charts": "workspace:*",
-		"@ibm/telemetry-js": "1.2.0",
+		"@ibm/telemetry-js": "1.2.1",
 		"tslib": "^2.6.2"
 	},
 	"devDependencies": {
@@ -55,7 +55,7 @@
 		"@angular/platform-browser": "^16.2.12",
 		"@angular/platform-browser-dynamic": "^16.2.12",
 		"@carbon/icon-helpers": "~10.45.1",
-		"@carbon/icons": "^11.35.0",
+		"@carbon/icons": "^11.36.0",
 		"@stackblitz/sdk": "^1.9.0",
 		"@storybook/angular": "^7.6.13",
 		"@types/carbon__icon-helpers": "^10.7.4",

packages/core/package.json

@@ -82,7 +82,7 @@
 	"dependencies": {
 		"@carbon/colors": "^11.20.1",
 		"@carbon/utils-position": "^1.1.4",
-		"@ibm/telemetry-js": "1.2.0",
+		"@ibm/telemetry-js": "1.2.1",
 		"carbon-components": "^10.58.13",
 		"d3": "^7.8.5",
 		"d3-cloud": "^1.2.7",
@@ -110,8 +110,8 @@
 	"devDependencies": {
 		"@carbon/import-once": "^10.7.0",
 		"@carbon/layout": "^11.20.1",
-		"@carbon/styles": "1.49.0",
-		"@carbon/themes": "^11.30.0",
+		"@carbon/styles": "1.50.0",
+		"@carbon/themes": "^11.31.0",
 		"@rollup/plugin-replace": "^5.0.5",
 		"@stackblitz/sdk": "^1.9.0",
 		"@types/d3": "^7.4.3",
@@ -126,9 +126,9 @@
 		"resize-observer-polyfill": "^1.5.1",
 		"sass": "^1.70.0",
 		"storybook": "~7.6.13",
-		"typedoc": "^0.25.7",
+		"typedoc": "^0.25.8",
 		"typescript": "^5.3.3",
-		"vite": "^5.1.0",
+		"vite": "^5.1.1",
 		"vite-plugin-dts": "^3.7.2",
 		"vitest": "^1.2.2"
 	},

packages/docs/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

packages/docs/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

packages/docs/README.md

@@ -0,0 +1,23 @@
+# Carbon Charts Documentation Website
+
+Future replacement for Storybook to be deployed to GitHub Pages.
+
+## Testing
+
+```bash
+yarn install
+yarn dev
+
+# or start the server and open the app in a new browser tab
+yarn dev -- --open
+```
+
+## Building
+
+To create a production version of this website (then look in build folder):
+
+```bash
+yarn build
+```
+
+You can preview the production build with `npm run preview`.

packages/docs/eslint.config.js

@@ -0,0 +1,32 @@
+export default {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier',
+		'plugin:storybook/recommended'
+	],
+	plugins: ['@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+}

packages/docs/package.json

@@ -0,0 +1,59 @@
+{
+	"name": "@carbon/charts-docs",
+	"version": "1.11.17",
+	"description": "Carbon Charts Documentation",
+	"private": true,
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"pub:api": "typedoc --tsconfig ../core/tsconfig.json ../core/src/index.ts --out ../../pages/api",
+		"build:package": "vite build && yarn pub:api",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . --ignore-path ../../.eslintignore && eslint .  --ignore-path ../../.eslintignore",
+		"format": "prettier --plugin-search-dir . --write .",
+		"clean": "rm -rf ../../pages/docs"
+	},
+	"devDependencies": {
+		"@carbon/charts-svelte": "workspace:*",
+		"@carbon/styles": "^1.50.0",
+		"@stackblitz/sdk": "1.9.0",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"carbon-components-svelte": "^0.82.9",
+		"carbon-icons-svelte": "^12.4.2",
+		"d3": "^7.8.5",
+		"d3-cloud": "^1.2.7",
+		"d3-sankey": "^0.12.3",
+		"eslint": "^8.56.0",
+		"highlight.js": "^11.9.0",
+		"sass": "^1.70.0",
+		"svelte": "^4.2.10",
+		"svelte-check": "^3.6.4",
+		"tslib": "^2.6.2",
+		"typedoc": "^0.25.8",
+		"typescript": "^5.3.3",
+		"vite": "^5.1.1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "[email protected]:carbon-design-system/carbon-charts.git",
+		"homepage": "https://carbon-design-system.github.io/carbon-charts/svelte/"
+	},
+	"bugs": {
+		"url": "https://github.com/carbon-design-system/carbon-charts/issues"
+	},
+	"author": "IBM",
+	"license": "Apache-2.0",
+	"maintainers": [
+		{
+			"name": "Eliad Moosavi",
+			"email": "[email protected]"
+		}
+	]
+}

packages/docs/src/app.d.ts

@@ -0,0 +1,28 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+
+	interface ChartTypes {
+		vanilla: string
+		svelte: string
+		react: string
+		vue: string
+		angular: string
+	}
+
+	interface Example {
+		name: string
+		data: ChartTabularData
+		options: ChartOptions
+	}
+
+	type Framework = 'vanilla' | 'svelte' | 'react' | 'vue' | 'angular' | 'html'
+}
+
+export {}

packages/docs/src/app.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com" />
+	<link
+		href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400|IBM+Plex+Sans:400,600&display=swap"
+		rel="stylesheet" crossorigin="anonymous" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>

packages/docs/src/lib/ChartTypeButton.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { base } from '$app/paths'
+  import { Button } from 'carbon-components-svelte'
+  export let title = ''
+  export let svg = ''
+  export let alt = ''
+  export let href = ''
+</script>
+
+<span class="thin-margin">
+  <Button kind="ghost" {href}>
+    <div class="container">
+      <span class="title">{title}</span>
+      <img class="icon" src="{base}/images/{svg}.svg" {alt}/>
+    </div>
+  </Button>
+</span>
+
+<style lang="scss">
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .title {
+    font-size: 0.75rem;
+    color: black;
+  }
+
+  .icon {
+    height: 15rem;
+    width: 15rem;
+  }
+
+  .thin-margin {
+    margin-right: 1px;
+    margin-bottom: 1px;
+  }
+</style>

packages/docs/src/lib/CodeSample.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { EmbedOptions } from '@stackblitz/sdk'
+  import type { ChartOptions, ChartTabularData } from '@carbon/charts-svelte'
+  import sdk from '@stackblitz/sdk'
+	import { onMount } from 'svelte'
+  import { getProject } from './stackblitz'
+
+  export let framework: Framework
+  export let chartType: string = ''
+  export let data: ChartTabularData
+  export let options: ChartOptions
+  let ref: HTMLDivElement
+
+  const embedOptions: EmbedOptions = { height: 600, view: 'default', showSidebar: true }
+
+  onMount(() => {
+    sdk.embedProject(ref, getProject[framework](chartType, data, options), embedOptions)
+  })
+</script>
+
+<div bind:this={ref}></div>

packages/docs/src/lib/PageTitle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  export let title = ''
+</script>
+
+<h1 class="page-title">{title}</h1>
+
+<style lang="scss">
+  .page-title {
+    color: white;
+    background: black;
+    padding: 4rem 0 3rem 4.5rem;
+    margin: -2rem -4.5rem 3rem -4.5rem;
+    font-size: 3rem;
+  }
+</style>

packages/docs/src/lib/StackBlitzLauncher.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import sdk from '@stackblitz/sdk'
+  import { Button } from 'carbon-components-svelte'
+  import Launch from "carbon-icons-svelte/lib/Launch.svelte"
+  import { getProject } from './stackblitz'
+
+  export let example: Example
+  export let chartTypes: ChartTypes
+
+  const openStackBlitz = (framework: Framework, chartType: string) => {
+		sdk.openProject(getProject[framework](chartType, example.data, example.options), { newWindow: true })
+	}
+</script>
+
+<div class="launch-buttons">
+  <Button on:click={() => openStackBlitz('vanilla', chartTypes.vanilla)} icon={Launch} iconDescription="StackBlitz" size="field" kind="secondary">JavaScript</Button>
+  <Button on:click={() => openStackBlitz('svelte', chartTypes.svelte)} icon={Launch} iconDescription="StackBlitz" size="field" kind="secondary">Svelte</Button>
+  <Button on:click={() => openStackBlitz('react', chartTypes.react)} icon={Launch} iconDescription="StackBlitz" size="field" kind="secondary">React</Button>
+  <Button on:click={() => openStackBlitz('vue', chartTypes.vue)} icon={Launch} iconDescription="StackBlitz" size="field" kind="secondary">Vue.js</Button>
+  <Button on:click={() => openStackBlitz('angular', chartTypes.angular)} icon={Launch} iconDescription="StackBlitz" size="field" kind="secondary">Angular</Button>
+</div>
+
+<style lang="scss">
+.launch-buttons {
+  margin-top: .25rem;
+}
+</style>

packages/docs/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.