Skip to content

Commit

Permalink
fix(otherVersions link), bump(storybook) (#1624)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nstuyvesant
nstuyvesant committed Jul 19, 2023
1 parent 64cb44f commit 19b0494
Show file tree
Hide file tree
Showing 10 changed files with 1,363 additions and 1,377 deletions.
16 changes: 8 additions & 8 deletions packages/angular/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,14 @@
"@babel/core": "^7.22.9",
"@carbon/icons-angular": "^11.2.2",
"@stackblitz/sdk": "^1.9.0",
"@storybook/addon-essentials": "^7.0.27",
"@storybook/addon-interactions": "^7.0.27",
"@storybook/addon-links": "^7.0.27",
"@storybook/angular": "^7.0.27",
"@storybook/blocks": "^7.0.27",
"@storybook/manager-api": "^7.0.27",
"@storybook/addon-essentials": "^7.1.0",
"@storybook/addon-interactions": "^7.1.0",
"@storybook/addon-links": "^7.1.0",
"@storybook/angular": "^7.1.0",
"@storybook/blocks": "^7.1.0",
"@storybook/manager-api": "^7.1.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.0.27",
"@storybook/theming": "^7.1.0",
"@typescript-eslint/eslint-plugin": "^6.1.0",
"@typescript-eslint/parser": "^6.1.0",
"concurrently": "^8.2.0",
Expand All @@ -79,7 +79,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rxjs": "~7.8.1",
"storybook": "^7.0.27",
"storybook": "^7.1.0",
"style-loader": "^3.3.3",
"typescript": "~5.1.6",
"zone.js": "~0.13.1"
Expand Down
18 changes: 9 additions & 9 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,15 @@
"@carbon/themes": "^11.21.1",
"@rushstack/eslint-patch": "^1.3.2",
"@stackblitz/sdk": "^1.9.0",
"@storybook/addon-essentials": "^7.0.27",
"@storybook/addon-interactions": "^7.0.27",
"@storybook/addon-links": "^7.0.27",
"@storybook/blocks": "^7.0.27",
"@storybook/html": "^7.0.27",
"@storybook/html-vite": "^7.0.27",
"@storybook/manager-api": "^7.0.27",
"@storybook/addon-essentials": "^7.1.0",
"@storybook/addon-interactions": "^7.1.0",
"@storybook/addon-links": "^7.1.0",
"@storybook/blocks": "^7.1.0",
"@storybook/html": "^7.1.0",
"@storybook/html-vite": "^7.1.0",
"@storybook/manager-api": "^7.1.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.0.27",
"@storybook/theming": "^7.1.0",
"@types/d3": "^7.4.0",
"@types/d3-cloud": "^1.2.5",
"@types/d3-sankey": "^0.12.1",
Expand All @@ -142,7 +142,7 @@
"react-dom": "^18.2.0",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.63.6",
"storybook": "^7.0.27",
"storybook": "^7.1.0",
"typedoc": "^0.24.8",
"typescript": "^5.1.6",
"vite": "^4.4.4",
Expand Down
42 changes: 15 additions & 27 deletions packages/core/src/demo/charts/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,26 +82,24 @@ export interface Demo {
options: BaseChartOptions & { geoData?: object }
code: {
vanilla: Project
angular?: Project
react?: Project
svelte?: Project
vue?: Project
angular: Project
react: Project
svelte: Project
vue: Project
}
}

export interface DemoGroup {
storyGroupTitle: string
storyGroupTitle: 'Complex charts' | 'Simple charts' | 'Utility'
title: string
demos: Demo[]
configs?: {
excludeColorPaletteControl?: boolean
includeProjectionControl?: boolean
}
}

enum DemoGroupTypes {
UTILITY = 'utility',
SIMPLE_CHART = 'simple-chart',
COMPLEX_CHART = 'complex-chart'
}

const utilityDemoGroups = [
const utilityDemoGroups: DemoGroup[] = [
{
title: 'Axes',
demos: [
Expand Down Expand Up @@ -423,12 +421,11 @@ const utilityDemoGroups = [
]
}
].map((demoGroup: any) => {
demoGroup.type = DemoGroupTypes.UTILITY

demoGroup.storyGroupTitle = 'Utility'
return demoGroup
})

const simpleChartDemos = [
const simpleChartDemos: DemoGroup[] = [
{
title: 'Area (simple)',
description:
Expand Down Expand Up @@ -1122,8 +1119,7 @@ const simpleChartDemos = [
]
}
].map((demoGroup: any) => {
demoGroup.type = DemoGroupTypes.SIMPLE_CHART

demoGroup.storyGroupTitle = 'Simple charts'
return demoGroup
})

Expand Down Expand Up @@ -1276,12 +1272,11 @@ const complexChartDemos = [
]
}
].map((demoGroup: any) => {
demoGroup.type = DemoGroupTypes.COMPLEX_CHART

demoGroup.storyGroupTitle = 'Complex charts'
return demoGroup
})

let allDemoGroups = utilityDemoGroups.concat(simpleChartDemos).concat(complexChartDemos)
let allDemoGroups: DemoGroup[] = [ ...utilityDemoGroups, ...simpleChartDemos, ...complexChartDemos]

const formatTitleString = (str: string) =>
str
Expand All @@ -1294,13 +1289,6 @@ const mapDemoGroups = (demoGroups: any) =>
demoGroups
.sort((a: any, b: any) => b.title - a.title)
.map((demoGroup: any) => {
if (demoGroup.type === DemoGroupTypes.SIMPLE_CHART) {
demoGroup.storyGroupTitle = 'Simple charts'
} else if (demoGroup.type === DemoGroupTypes.COMPLEX_CHART) {
demoGroup.storyGroupTitle = 'Complex charts'
} else {
demoGroup.storyGroupTitle = 'Utility'
}

demoGroup.demos = demoGroup.demos.map((demo: any) => {
demo.title = demo.options.title
Expand Down
98 changes: 38 additions & 60 deletions packages/core/src/demo/utils/story-widgets.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { DemoGroup } from '@/demo'

const generateThemePickerHTML = (container: HTMLDivElement) => {
const div = document.createElement('div')
div.id = 'theme-picker'
Expand Down Expand Up @@ -137,19 +139,19 @@ const generateColorPalettePickerHTML = (
: 0
let optionsHTML = `<optgroup class="cds--select-optgroup" label="${colorGroup} groups">`
const numberOfVariants = parseInt(colorGroup)
const numVariants = parseInt(colorGroup)
if (numberOfVariants !== 14) {
if (numVariants !== 14) {
for (let i = 1; i <= optionsCount; i++) {
optionsHTML += `
<option class="cds--select-option" ${
onlyCategoricalPaletteIsApplicable || numberOfVariants < numberOfChartDataGroups
onlyCategoricalPaletteIsApplicable || numVariants < numberOfChartDataGroups
? 'disabled'
: ''
} value="${colorGroup}-option-${i}" ${
selectedColorPalette === `${numberOfVariants}-${i}` ? 'selected' : ''
selectedColorPalette === `${numVariants}-${i}` ? 'selected' : ''
}>
${numberOfVariants}-color groups, option ${i}
${numVariants}-color groups, option ${i}
</option>`
}
} else {
Expand All @@ -176,9 +178,9 @@ const generateColorPalettePickerHTML = (

div?.querySelector('#color-palette-select')?.addEventListener('change', (e: any) => {
const { value } = e.target
const [numberOfVariants, pairingOption] = value.split('-color-option-')
const [numVariants, pairingOption] = value.split('-color-option-')

chartOptions.color.pairing.numberOfVariants = numberOfVariants
chartOptions.color.pairing.numberOfVariants = numVariants
chartOptions.color.pairing.option = pairingOption
chart.model.setOptions(chartOptions)
})
Expand All @@ -188,7 +190,7 @@ const generateColorPalettePickerHTML = (

export const addControls = (
container: HTMLDivElement,
demoGroup: any,
demoGroup: DemoGroup,
chart: any,
configs: { colorPairingOptions: any } = { colorPairingOptions: null }
) => {
Expand Down Expand Up @@ -231,63 +233,39 @@ export const addRadioButtonEventListeners = (container: HTMLDivElement, chart: a
})
}

export const addOtherVersions = (
container: HTMLElement,
demoGroup: any,
demo: any,
configs = { currentVersion: 'vanilla' }
) => {
const { currentVersion } = configs

const demoGroupClassification = (demoGroup.type || '').replace('-chart', '')
const getLink = (name: string) => `https://carbon-design-system.github.io/carbon-charts/${ name !== 'vanilla' ? `${name}/`: ''}${window.parent.location.search}`

export const addOtherVersions = (container: HTMLElement, framework: string) => {

let otherVersions = [
{
name: 'Vanilla JavaScript',
link: getLink('vanilla')
},
{
name: 'Angular',
link: getLink('angular')
},
{
name: 'React',
link: getLink('react')
},
{
name: 'Svelte',
link: getLink('svelte')
},
{
name: 'Vue',
link: getLink('vue')
}
]
otherVersions = otherVersions.filter((item) => item.name !== framework)

const div = document.createElement('div')
div.setAttribute('class', 'cds--row resource-card-group')

let htmlContent = ''
const otherVersions = [
...(currentVersion !== 'vanilla'
? [
{
name: 'Vanilla JavaScript',
link: `https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroupClassification}-charts-${demo.id}`
}
]
: []),
...(currentVersion !== 'react'
? [
{
name: 'React',
link: `https://carbon-design-system.github.io/carbon-charts/react/?path=/story/${demoGroupClassification}-charts-${demo.id}`
}
]
: []),
...(currentVersion !== 'angular'
? [
{
name: 'Angular',
link: `https://carbon-design-system.github.io/carbon-charts/angular/?path=/story/${demoGroupClassification}-charts-${demo.id}`
}
]
: []),
...(currentVersion !== 'vue'
? [
{
name: 'Vue',
link: `https://carbon-design-system.github.io/carbon-charts/vue/?path=/story/${demoGroupClassification}-charts-${demo.id}`
}
]
: []),
...(currentVersion !== 'svelte'
? [
{
name: 'Svelte',
link: `https://carbon-design-system.github.io/carbon-charts/svelte/?path=/story/${demoGroupClassification}-charts-${demo.id}`
}
]
: [])
]


otherVersions.forEach((otherVersion) => {
htmlContent += `<div class="cds--no-gutter-sm cds--col-md-6 cds--col-lg-6">
<div class="cds--resource-card">
Expand Down
6 changes: 2 additions & 4 deletions packages/core/src/stories/all.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ storybookDemoGroups.forEach((demoGroup: DemoGroup) => {
</main>`

const sandboxButton = container.querySelector('#sandbox')
sandboxButton.addEventListener('click', () => {
sandboxButton?.addEventListener('click', () => {
sdk.openProject(demo.code.vanilla, { newWindow: true })
})

Expand All @@ -124,9 +124,7 @@ storybookDemoGroups.forEach((demoGroup: DemoGroup) => {
colorPairingOptions
})

addOtherVersions(container, demoGroup, demo, {
currentVersion: 'vanilla'
})
addOtherVersions(container, 'Vanilla JavaScript')

return container
},
Expand Down
22 changes: 11 additions & 11 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,16 @@
"@babel/preset-typescript": "^7.22.5",
"@rushstack/eslint-patch": "^1.3.2",
"@stackblitz/sdk": "1.9.0",
"@storybook/addon-essentials": "^7.0.27",
"@storybook/addon-interactions": "^7.0.27",
"@storybook/addon-links": "^7.0.27",
"@storybook/blocks": "^7.0.27",
"@storybook/manager-api": "^7.0.27",
"@storybook/react": "^7.0.27",
"@storybook/react-vite": "^7.0.27",
"@storybook/react-webpack5": "^7.0.27",
"@storybook/addon-essentials": "^7.1.0",
"@storybook/addon-interactions": "^7.1.0",
"@storybook/addon-links": "^7.1.0",
"@storybook/blocks": "^7.1.0",
"@storybook/manager-api": "^7.1.0",
"@storybook/react": "^7.1.0",
"@storybook/react-vite": "^7.1.0",
"@storybook/react-webpack5": "^7.1.0",
"@storybook/testing-library": "^0.2.0",
"@storybook/theming": "^7.0.27",
"@storybook/theming": "^7.1.0",
"@types/carbon__icons-react": "^11.20.0",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
Expand All @@ -90,12 +90,12 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.63.6",
"storybook": "^7.0.27",
"storybook": "^7.1.0",
"style-loader": "^3.3.3",
"typescript": "^5.1.6",
"vite": "^4.4.4",
"vite-plugin-dts": "^3.3.1",
"webpack": "5.88.1"
"webpack": "5.88.2"
},
"publishConfig": {
"access": "public"
Expand Down
4 changes: 1 addition & 3 deletions packages/react/src/stories/1-charts.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@ storybookDemoGroups.forEach((demoGroup: DemoGroup) => {
colorPairingOptions
})

addOtherVersions(container, demoGroup, demo, {
currentVersion: 'react'
})
addOtherVersions(container, 'React')
}
}, [demoRef.current, chartRef.current])

Expand Down
Loading

0 comments on commit 19b0494

Please sign in to comment.