Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: consolidate components and docs into one Storybook #494

Merged
merged 15 commits into from
Jul 16, 2024
Merged

chore: consolidate components and docs into one Storybook #494

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
11bd284
wip migrating all explorer-1 storybook docs to vue
stephiescastle Jul 16, 2024
46b552e
changing all primary story names to default to prep for docs migration
stephiescastle Jul 16, 2024
10181c4
adding overview pages in storybook
stephiescastle Jul 16, 2024
9604a11
changing name of Default story to BaseStory
stephiescastle Jul 16, 2024
3735d7b
adding form components
stephiescastle Jul 16, 2024
c72187a
reorganizing some stories
stephiescastle Jul 16, 2024
9b2aa23
fixing heroes overview
stephiescastle Jul 16, 2024
dbc17dc
finish sorting stray stories
stephiescastle Jul 16, 2024
dbf7815
updating storybook to v8.2.4
stephiescastle Jul 16, 2024
2c075b6
Revert "updating storybook to v8.2.4" as I accidentally updated all d…
stephiescastle Jul 16, 2024
e148efb
reverting name change of story in html components
stephiescastle Jul 16, 2024
393b639
upgrading storybook to 8.2.4
stephiescastle Jul 16, 2024
cbcec17
reverting more accidental changes to the html storybook
stephiescastle Jul 16, 2024
aaddf4b
fixing vue build errors
stephiescastle Jul 16, 2024
c5ec20f
fixing storybook errors
stephiescastle Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions apps/html-storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,44 +26,45 @@
"lint:fix": "eslint .storybook --fix",
"build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
"percy": "percy storybook http://localhost:7007",
"percy:dry-run": "percy storybook http://localhost:7007 --dry-run"
"percy:dry-run": "percy storybook http://localhost:7007 --dry-run",
"update": "npx storybook@latest upgrade --package-manager pnpm"
},
"dependencies": {
"@fancyapps/ui": "^4.0.26",
"@fancyapps/ui": "^4.0.31",
"@tailwindcss/forms": "^0.5.7",
"swiper": "^11.1.3"
"swiper": "^11.1.5"
},
"devDependencies": {
"@explorer-1/common-storybook": "workspace:*",
"@explorer-1/html": "workspace:*",
"@explorer-1/prettier-config": "workspace:*",
"@explorer-1/tsconfig": "workspace:*",
"@percy/cli": "^1.28.6",
"@percy/cli": "^1.28.9",
"@percy/storybook": "^6.0.0",
"@rushstack/eslint-patch": "^1.2.0",
"@storybook/addon-a11y": "^8.2.1",
"@storybook/addon-docs": "^8.2.1",
"@storybook/addon-essentials": "^8.2.1",
"@storybook/addon-links": "^8.2.1",
"@storybook/addon-viewport": "^8.2.1",
"@storybook/html": "^8.2.1",
"@storybook/html-vite": "^8.2.1",
"@storybook/manager-api": "^8.2.1",
"@storybook/preview-api": "^8.2.1",
"@storybook/theming": "^8.2.1",
"@rushstack/eslint-patch": "^1.10.3",
"@storybook/addon-a11y": "^8.2.4",
"@storybook/addon-docs": "^8.2.4",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/addon-links": "^8.2.4",
"@storybook/addon-viewport": "^8.2.4",
"@storybook/html": "^8.2.4",
"@storybook/html-vite": "^8.2.4",
"@storybook/manager-api": "^8.2.4",
"@storybook/preview-api": "^8.2.4",
"@storybook/theming": "^8.2.4",
"@whitespace/storybook-addon-html": "^6.1.1",
"autoprefixer": "^10.4.19",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.38",
"postcss": "^8.4.39",
"postcss-import": "^16.1.0",
"remark-gfm": "^4.0.0",
"rimraf": "^5.0.5",
"storybook": "^8.2.1",
"tailwindcss": "^3.4.3",
"rimraf": "^5.0.9",
"storybook": "^8.2.4",
"tailwindcss": "^3.4.6",
"ts-node": "^10.9.2",
"tslib": "^2.6.2",
"typescript": "^5.4.5",
"vite": "^5.3.1"
"tslib": "^2.6.3",
"typescript": "^5.5.3",
"vite": "^5.3.4"
},
"overrides": {
"react-remove-scroll": {
Expand Down
6 changes: 0 additions & 6 deletions apps/vue-storybook/.storybook/manager-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,7 @@
color: inherit !important;
}

/* www should be in uppercase */
.sidebar-item#www {
text-transform: uppercase;
}

/* create illusion of hrs between sidebar sections */
.sidebar-item#www,
.sidebar-item#appendix {
border-radius: 0;
border-top: 2px solid rgba(0, 0, 0, 0.1);
Expand Down
18 changes: 15 additions & 3 deletions apps/vue-storybook/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,16 +104,26 @@ const preview: Preview = {
'Getting Started',
['Developer'],
'Guides',
'Foundation',
'Foundations',
[
'Colors',
'Typography',
'Icons',
'Logos',
'Themes',
'Grid and Layout',
['Docs'],
'Responsive Design'
],
'Navigation',
[
'Overview',
'Headers',
['Overview', 'WWW'],
'Footers',
['Overview', 'WWW'],
'Secondary Navigation'
],
'Global Layout',
[
'Overview',
Expand All @@ -139,7 +149,7 @@ const preview: Preview = {
'Blocks',
['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
'Heroes',
['*', 'HeroMedia', 'HeroListingIndex'],
['Overview', 'HeroSmall', 'HeroMedium', 'HeroLarge', 'HeroMedia', 'HeroListingIndex'],
'Forms',
['Overview', 'TextInput', 'TextArea'],
'Search',
Expand All @@ -149,7 +159,9 @@ const preview: Preview = {
'Utilities',
['Overview', '*'],
'EDU'
]
],
'Mixins',
['Overview']
]
}
}
Expand Down
49 changes: 25 additions & 24 deletions apps/vue-storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,53 +29,54 @@
"start": "http-server storybook_compiled -p 6006 -c-1 -s",
"test": "test-storybook --stories-json --maxWorkers=4",
"test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox",
"test:ci": "test-storybook --stories-json --maxWorkers=4"
"test:ci": "test-storybook --stories-json --maxWorkers=4",
"update": "npx storybook@latest upgrade --package-manager pnpm"
},
"dependencies": {
"@explorer-1/common": "workspace:*",
"@explorer-1/common-storybook": "workspace:*",
"@explorer-1/vue": "workspace:*",
"@fancyapps/ui": "^4.0.26",
"@fancyapps/ui": "^4.0.31",
"@tailwindcss/forms": "^0.5.7",
"click-outside-vue3": "^4.0.1",
"dayjs": "^1.11.11",
"swiper": "^11.1.3",
"vue": "^3.2.47",
"swiper": "^11.1.5",
"vue": "^3.4.31",
"vue3-compare-image": "^1.2.5"
},
"devDependencies": {
"@chromatic-com/storybook": "^1",
"@chromatic-com/storybook": "^1.6.1",
"@explorer-1/html": "workspace:*",
"@explorer-1/prettier-config": "workspace:*",
"@explorer-1/tsconfig": "workspace:*",
"@rushstack/eslint-patch": "^1.2.0",
"@storybook/addon-a11y": "^8.2.1",
"@storybook/addon-essentials": "^8.2.1",
"@storybook/blocks": "^8.2.1",
"@storybook/test-runner": "^0.19.0",
"@storybook/theming": "^8.2.1",
"@storybook/vue3": "^8.2.1",
"@storybook/vue3-vite": "^8.2.1",
"@vitejs/plugin-vue": "^5.0.4",
"@rushstack/eslint-patch": "^1.10.3",
"@storybook/addon-a11y": "^8.2.4",
"@storybook/addon-essentials": "^8.2.4",
"@storybook/blocks": "^8.2.4",
"@storybook/test-runner": "^0.19.1",
"@storybook/theming": "^8.2.4",
"@storybook/vue3": "^8.2.4",
"@storybook/vue3-vite": "^8.2.4",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^7.1.0",
"@whitespace/storybook-addon-html": "^6.1.1",
"autoprefixer": "^10.4.19",
"axe-playwright": "^2.0.1",
"chromatic": "^11.5.5",
"http-server": "^14.1.1",
"msw": "^2.3.0",
"msw-storybook-addon": "^2.0.2",
"msw": "^2.3.1",
"msw-storybook-addon": "^2.0.3",
"pinia": "^2.1.7",
"postcss": "^8.4.38",
"postcss": "^8.4.39",
"postcss-import": "^16.1.0",
"rimraf": "^5.0.5",
"storybook": "^8.2.1",
"rimraf": "^5.0.9",
"storybook": "^8.2.4",
"storybook-addon-vue-slots": "^0.9.29",
"tailwindcss": "^3.4.3",
"tailwindcss": "^3.4.6",
"ts-node": "^10.9.2",
"typescript": "^5.4.5",
"unplugin-vue-components": "^0.27.0",
"vite": "^5.3.1",
"vue-tsc": "^2.0.6"
"typescript": "^5.5.3",
"unplugin-vue-components": "^0.27.3",
"vite": "^5.3.4",
"vue-tsc": "^2.0.26"
}
}
8 changes: 4 additions & 4 deletions packages/html/src/components/AppBarInternal/AppBarInternal.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ export default {
}
}

export const Default = AppBarInternalTemplate.bind({})
Default.storyName = 'AppBar'
Default.args = AppBarInternalTemplate.stories.Default.args
export const BaseStory = AppBarInternalTemplate.bind({})
BaseStory.storyName = 'AppBar'
BaseStory.args = AppBarInternalTemplate.stories.BaseStory.args

export const AppBarInternalStoryMeta = {
stories: {
Default: {
BaseStory: {
storyName: 'AppBar',
args: {
orgNumber: '18x',
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BackToTop/BackToTop.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,6 @@ export default {
}
}

export const Default = BackToTopTemplate.bind({})
Default.storyName = 'BackToTop'
Default.args = { alwaysVisible: true, threshold: 300, scrollTo: 0 }
export const BaseStory = BackToTopTemplate.bind({})
BaseStory.storyName = 'BackToTop'
BaseStory.args = { alwaysVisible: true, threshold: 300, scrollTo: 0 }
6 changes: 3 additions & 3 deletions packages/html/src/components/BaseButton/BaseButton.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,9 @@ export default {
}
}

export const Default = BaseButtonTemplate.bind({})
Default.storyName = 'Primary Button'
Default.args = {
export const BaseStory = BaseButtonTemplate.bind({})
BaseStory.storyName = 'Primary Button'
BaseStory.args = {
label: 'Explore',
variant: 'primary',
link: '#',
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BaseHeading/BaseHeading.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ export default {
}
}

export const Default = BaseHeadingTemplate.bind({})
Default.storyName = 'H1'
Default.args = { text: 'Heading 1', size: 'h1', tag: 'h1' }
export const BaseStory = BaseHeadingTemplate.bind({})
BaseStory.storyName = 'H1'
BaseStory.args = { text: 'Heading 1', size: 'h1', tag: 'h1' }

export const H2 = BaseHeadingTemplate.bind({})
H2.storyName = 'H2'
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BaseIframe/BaseIframe.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,6 @@ const BaseIframeData = {
height: 400
}

export const Default = BaseIframeTemplate.bind({})
Default.storyName = 'BaseIframe'
Default.args = BaseIframeData
export const BaseStory = BaseIframeTemplate.bind({})
BaseStory.storyName = 'BaseIframe'
BaseStory.args = BaseIframeData
4 changes: 2 additions & 2 deletions packages/html/src/components/BaseImage/BaseImage.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ export const BaseImageData = {
imageClass: '',
objectFitClass: 'object-contain'
}
export const Default = BaseImageTemplate.bind({})
Default.args = BaseImageData
export const BaseStory = BaseImageTemplate.bind({})
BaseStory.args = BaseImageData

export const LazyLoading = BaseImageTemplate.bind({})
LazyLoading.args = BaseImageData
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BaseImageCaption/BaseImageCaption.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,6 @@ export const BaseImageCaptionData = {
linkText: 'Full Image Details'
}

export const Default = BaseImageCaptionTemplate.bind({})
Default.storyName = 'BaseImageCaption'
Default.args = BaseImageCaptionData
export const BaseStory = BaseImageCaptionTemplate.bind({})
BaseStory.storyName = 'BaseImageCaption'
BaseStory.args = BaseImageCaptionData
4 changes: 2 additions & 2 deletions packages/html/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ Basic.args = {
noLogo: false,
...BaseImageData
}
export const Default = BaseImagePlaceholderTemplate.bind({})
Default.args = {
export const BaseStory = BaseImagePlaceholderTemplate.bind({})
BaseStory.args = {
aspectRatio: 'aspect-ratio-two-one',
noLogo: false
}
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BaseLink/BaseLink.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ export default {
}
}

export const Default = BaseLinkTemplate.bind({})
Default.storyName = 'Primary'
Default.args = {
export const BaseStory = BaseLinkTemplate.bind({})
BaseStory.storyName = 'Primary'
BaseStory.args = {
text: 'Explore',
variant: 'primary',
link: '#',
Expand Down
4 changes: 2 additions & 2 deletions packages/html/src/components/BasePlaceholder/BasePlaceholder.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ export default {
}
}

export const Default = BasePlaceholderTemplate.bind()
Default.storyName = 'BasePlaceholder'
export const BaseStory = BasePlaceholderTemplate.bind()
BaseStory.storyName = 'BasePlaceholder'
6 changes: 3 additions & 3 deletions packages/html/src/components/BlockAccordion/BlockAccordion.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,6 @@ export const BlockAccordionData = {
]
}

export const Default = BlockAccordionTemplate.bind({})
Default.storyName = 'BlockAccordion'
Default.args = BlockAccordionData
export const BaseStory = BlockAccordionTemplate.bind({})
BaseStory.storyName = 'BlockAccordion'
BaseStory.args = BlockAccordionData
6 changes: 3 additions & 3 deletions packages/html/src/components/BlockCard/BlockCard.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export default {
}
}

export const Default = BlockCardTemplate.bind({})
Default.storyName = 'BlockCard'
Default.args = {
export const BaseStory = BlockCardTemplate.bind({})
BaseStory.storyName = 'BlockCard'
BaseStory.args = {
type: 'Factoid',
title: 'Nimble Limbs',
text: 'The robot has four limbs, each with seven degrees of freedom.',
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BlockCardGroup/BlockCardGroup.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ const BlockCardGroupData = [
}
]

export const Default = BlockCardGroupTemplate.bind({})
Default.storyName = 'BlockCardGroup'
Default.args = {
export const BaseStory = BlockCardGroupTemplate.bind({})
BaseStory.storyName = 'BlockCardGroup'
BaseStory.args = {
items: BlockCardGroupData
}
6 changes: 3 additions & 3 deletions packages/html/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export default {
}
}

export const Default = BlockCircleImageCardTemplate.bind({})
Default.storyName = 'BlockCircleImageCard'
Default.args = {
export const BaseStory = BlockCircleImageCardTemplate.bind({})
BaseStory.storyName = 'BlockCircleImageCard'
BaseStory.args = {
imageOnRight: false,
title: 'First Flight of Technology for Returning Warheads from Space',
label: 'September 20, 1956',
Expand Down
6 changes: 3 additions & 3 deletions packages/html/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ const BlockIframeEmbedData = {
'<p>Click (or touch) and drag to interact with this 3D model of the Mars 2020 Perseverance Rover. Learn more about the mission at <a href="mars.nasa.gov/mars2020/">mars.nasa.gov/mars2020/</a>.</p>'
}

export const Default = BlockIframeEmbedTemplate.bind({})
Default.args = BlockIframeEmbedData
Default.decorators = [(Story) => `<div id="storyRoot" class="mx-auto container">${Story()}</div>`]
export const BaseStory = BlockIframeEmbedTemplate.bind({})
BaseStory.args = BlockIframeEmbedData
BaseStory.decorators = [(Story) => `<div id="storyRoot" class="mx-auto container">${Story()}</div>`]

export const CustomHeight = BlockIframeEmbedTemplate.bind({})
CustomHeight.args = { ...BlockIframeEmbedData, height: 400 }
Expand Down
Loading
Loading