feat(docs): Creation of new documentation website (PLEASE SQUASH COMM…

…ITS) (#1798)

* fix(wordcloudoptions): across packages

* fix(docs): dupe property

* chore(deps): minor bumps for dependencies

* feat(diagrams): add elbox and bezier examples

* chore(deps): minor bumps

* chore(images): put in subfolders, fix indentation

* fix(typescript): missing properties on options in core

* chore(test data): consolidate examples for use by tests

* chore(cleanup): remove unused imports, blank lines

* fix(typescript): another type issue identified in core

* test(docs): publish test data for other packages in the monorepo (in pure TypeScript)

* fix(svelte): bar chart names for svelte are normalized

* chore(types): provide all enums instead of just a limited set

* feat(svelte): create test page for when storybook is dropped

* feat(test): harness for Vue.js

* feat(vue,vanilla js): test harnesses

* chore(angular): add charts dependency

* chore(deps): bump @ibm/telemetry-js, @stackblitz/sdk, storybook, carbon-components, sass, svelte, vue

* feat(test): for react

* chore(deps): bump @carbon/colors, layout, styles, themes, react, icons-react

* chore(deps): bump yarn, dompurify, react-router-dom, @types/react, sass, vue-tsc, install missing Angular test packages

* chore(angular): add schematics to angular.json

* fix(docs): typescript issues

* fix(core): typescript issues exposed by type checking the demos

* feat(angular): extremely large number of files needed by angular to do what svelte did in 15 lines of code

* cleanup(docs): remove commented lines

* fix(type): more typescript issues uncovered by demos

* feat(angular): test page

* refactor(docs): Change anatomy, axes and dashboards to links to the Carbon Design System website

* fix(yarn): update

* fix(deps): circular ref

* fix(types): explicitly import types for better exports (get rid of ambient)

* feat(test): add titles

* feat(test): build capability for test pages for angular, core, react

* feat(test): package.json scripts for svelte, vue

* feat(test): build test sites for svelte and vue

* chore(netlify): adjustments for new test pages

* chore(netlify): change preview to test pages

* fix(test): test pages on netlify are root

* fix(react test): typescript warning

* docs(netlify): improve comments

* chore(deps): bump @nrwl/devkit, @typescript-eslint, svelte

* chore(storybook): remove files, deps, update read me files

* docs(comments): fix for jsdoc (typedoc)

* chore(yarn): update

* docs(carbon.yml): angular

* docs(carbon.yml): updates

* chore(dco): bump action

* chore(cleanup): remove unused items

* chore(deps): bump vue-tsc

* chore(thumbnails): move to docs package

* chore(deps): bump @nrwl/devkit, @carbon/utils-position, vue-tsc

* fix(stackblitz): angular examples didn't load

* chore(deps): bump sass, zone.js

* fix(types): dts change caused .d.ts files to be in wrong place

* fix(styles): adjust width of paragraphs and other elements

* docs(jsdocs): add

* fix(scss): make it easier for old bundlers to discover the SCSS

* chore(deps): bump @sveltejs/kit, eslint, publint

* chore(yml): improve

* chore(eslint): bring config files up to 9.x

* chore(eslint): move angular eslint from deprecated format to mjs

* chore(eslint): add jsdoc

* chore(lint): small items

* fix(vue): vue components should be two or more words

* chore(lint): docs site

* fix(types): eliminate typescript errors

* chore(prettier): config changes

* chore(prettier): ignore .nx directory

* chore(prettier): update scss files

* chore(prettier): remove deprecated params

* fix(types): fix eslint warning

* fix(prettier): carbon.yml warnings

* chore(eslint): centralize config

* fix(lint): issues

* fix(storybook): remove ref

* chore(lint): resolve lint issues

* chore(deps): cleanup unused deps, add eslint and prettier where missing

* chore(deps): bump globals, add stackblitz

* chore(eslint): setup for react packages

* chore(svelte): use recommended tsconfig

* chore(lint): format issues

* chore(lint): vite files

* chore(deps): typescript-eslint replaces @typescript-eslint/*

* chore(tsconfig): optimize

* chore(lint): updates

* chore(lint): extend

* chore(eslint): update config

* chore(eslint): update config

* chore(deps): bump dompurify, eslint-plugin-react-hooks, add @eslint/compat

* fix(eslint): compatibility setup for react

* fix(CodeSample): follow best practice

* chore(lint): react project

* fix(lint): for angular

* chore(lint): top-level eslint config must ignore angular so angular ng lint will take precedence

* chore(core): add esModuleInterop for D3

* chore(vite): changes

* chore(lint): core

* chore(tsconfig): make stricter

* chore(jsdoc): add

* chore(deps): bump typescript-eslint

* fix(type): import issues raised typescript errors

* fix(angular): tsconfig and eslint

* chore(angular): tsconfig

* chore(tsconfig): fine-tuning

* fix(examples): switch to core

* chore(deps): bump eslint for angular

* fix(no-shadow): lint identified issues

* chore(deps): bump sveltekit, @ibm/telemetry-js, @carbon/react, @carbon/icons-react, @carbon/styles, @carbon/themes

* chore(node): bump to 22.2.0 for tooling

* fix(lint): small issues

* chore(lint,publint): setup

* chore(deps): bump @nrwl/devkit, @vitejs/plugin-react-swc, @vitejs/plugin-react

* chore(deps): simplify

* chore(deps): set node to LTS, bump @types/react

* chore(lint): format all files

* fix(husky): make compatible with v9

* chore(husky): run prettier everywhere

* fix(demo data): change dates to ISO-8601 and extend object-to-string to add hours, minutes and seconds

* chore(deps): remove object-inspect

* chore(docs): add info about tags

* docs(comments): cleanup

* docs(contributing): update

* chore(bug_report): encourage reporter to share framework version

* chore(deps): add lint-staged

* chore(precommit): setup

* chore(precommit): husky update

* chore(lint-staged): cleanup

* chore(prettier): github yaml files

* chore(prettierr): carbon.yml for angular

* fix(carbon.yml): indentation issue

* chore(github): allow eslint to operate on yaml files

* chore(netlify): speed up preview builds

* chore(netlify): prevent go, php, python, and ruby from installing

* chore(netlify): simplify

* chore(netlify): add node version

* chore(prettier): release.yml

* chore(deps): bump jsdom

* fix(svelte): types and enable default imports

* fix(svelte): type issues

* chore(test): base setup for svelte

* chore(test): setup

* feat(svelte): implement generics in BaseChart.svelte

* docs(svelte): improve comments

* chore(deps): bump vite, @typescript-eslint

* chore(deps): install @types/topojson-specification in docs, set dev servers to run on port 3000

* fix(test): adjust charts to make visual regression tests work consistently

* test(visual): setup package.json files

* chore(test): setup playwright.config.ts per package

* fix(test): clear errors

* chore(test): updates

* feat(playwright): add

* fix(vue): add test to tsconfig

* feat(visual test): parallel execution

* chore(visual test): setup env

* test(rebase): images after adjusting test harness's look and feel

* chore(deps,scripts): bump @types/node, sass, @sveltejs/vite-plugin-svelte and add test scripts

* chore(test): build

* chore(test): cleanup

* chore(test): dom based

* chore(test): dom based

* chore(test): angular

* chore(test): dom based

* chore(test): add prettier

* chore(test): react baseline

* chore(test): updates

* chore(test): react working

* chore(test): core

* chore(test): angular

* chore(test): svelte

* chore(test): vue

* chore(test): svelte

* chore(deps): bump @eslint/compat

* chore(test): update baselines

* chore(test): update baselines

* chore(deps): bump sass

* chore(deps): bump dompurify, @vitejs/plugin-vue

* chore(test): rebase react

* chore(playwright): switch to list

* chore(test): rebase react

* chore(test): rebase core

* chore(test): rebase for chrome and firefox

* chore(deps): bump @types/node, @eslint/js, eslint, vue-eslint-parser,

* docs(data): described acceptable date formats

* chore(deps): bump prettier, update eslint for angular

* fix(test app angular): minor tweaks

* fix(angular): eslint

* chore(deps): drop older @typescript-eslint for angular

* chore(angular): add angular 18, drop unused test.ts and dependencies

* chore(commits): replace unmaintained commitizen with modern @commitlint

* chore(commitlint): setup

* chore(commitlint): use default

* chore(deps): remove pinst

* chore(test): add property

* chore(test): limit list of charts we want to test and rebase

* fix(config): package.json and .gitignore

* chore(config): adjustments

* fix(combo demo): bad date

* chore(vs code): remove superfluous settings

* chore(templates): corrections

* chore(deps): remove @types/carbon__icon-helps, bump deps

* chore(angular): only top-level needs the exports

* chore(eslint): add comments

* chore(eslint): disable no-unused-vars for render

* docs(comments): keep for eslint

* test(core): add prefix

* test(core): centralize prefix setting

* chore(d3): remove as peer

* fix(geoData): implementation expected prop at top-level

* chore(experimental): remove

* chore(deps): bump eslint-plugin-svelte, globals

* fix(svelte): correct import and rebase tests

* fix(angular test): bubble not boxplot

* fix(circlepack): underlying implementation expected depth not hierarchyLevel

* fix(deps): should have been devDependencies

* chore(vscode): omit folders for search

* docs(comments): fix 12 jsdoc warnings

* chore(deps): bump and remove unused deps

* chore(yarn): bump

* tests(rebase): based on latest version

* fix(stackblitz/angular): stackblitz changed their template for Angular to 18

* fix(stackblitz/angular): remove unneeded common module

* fix(docs): prevent 404 errors and make react router work better

* chore(deps): fix yarn / bump dependencies

* chore(dp): for docs

* Update netlify.sh

* Update netlify.sh

* Update netlify.sh

* Update netlify.sh

* fix(docs): tweaks based on feedback

* fix(docs): sidenav padding

* fix(docs): stackblitz launcher styling

* fix(docs): demo background

* fix(docs): stackblitz launcher style

* fix(docs): diagram notices

* qa

* qa

---------

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

.github/CONTRIBUTING.md

@@ -46,10 +46,9 @@ To get charts running locally on your machine:
 3. Run `yarn install`
 4. Run `yarn build` to build all packages and the documentation website
 
-All packages use Storybook for demos:
-
 ```sh
-yarn storybook
+cd packages/docs
+yarn dev
 ```
 
 ## Issue guidelines

.gitignore

@@ -11,10 +11,10 @@ pages/
 **/.DS_Store
 **/.svelte-kit
 **/dist
+**/demo
 
 # Playwright
 **/test-results/
 **/playwright-report/
 **/blob-report/
-**/playwright/.cache/
-**/demo/
+**/playwright/.cache/

.vscode/settings.json

@@ -1,3 +1,11 @@
 {
-	"editor.defaultFormatter": "esbenp.prettier-vscode"
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"search.exclude": {
+		"**/node_modules": true,
+		"**/pages": true,
+		"**/demo": true,
+		"**/dist": true,
+		"**/.angular": true,
+		"**/.svelte-kit": true
+	}
 }

.yarnrc.yml

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

README.md

@@ -1,6 +1,6 @@
 <p align="center">
 	<a href="https://charts.carbondesignsystem.com/">
-		<img src="packages/core/.storybook/assets/share.png" alt="Carbon Charts" />
+		<img src="./assets/hero.png" alt="Carbon Charts" />
 	</a>
 	<h3 align="center">Carbon Charts</h3>
 	<p align="center">
@@ -17,6 +17,14 @@
 	</p>
 </p>
 
+## Documentation
+
+Includes StackBlitz examples of each chart type for Vanilla JavaScript, Svelte, React, Angular and Vue.js.
+
+<a href="https://charts.carbondesignsystem.com/" target="_blank">
+  <img src="./assets/dashboard.png" width=700 />
+</a>
+
 ## Packages
 
 - [Vanilla JavaScript](./packages/core)
@@ -29,19 +37,6 @@
   <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" />
 </a>
 
-## Demos
-
-Visit [the demo website](https://charts.carbondesignsystem.com/?path=/story/docs--welcome)
-
-## Design specifications
-
-<a href="https://www.carbondesignsystem.com/data-visualization/getting-started" target="_blank">
-  <img src="./assets/dv_dark_theme.png" width=700 />
-</a>
-
-Carbon data visualization design specifications can be found
-[here](https://www.carbondesignsystem.com/data-visualization/getting-started).
-
 ## CHANGELOG
 
 Read the release change logs [here](https://github.com/carbon-design-system/carbon-charts/releases)