Skip to content

Commit

Permalink
refactor: upgrade storybook to 6.1.18
Browse files Browse the repository at this point in the history
  • Loading branch information
matyasf committed Feb 17, 2021
1 parent 29d7867 commit 6a6fef2
Show file tree
Hide file tree
Showing 8 changed files with 1,228 additions and 142 deletions.
27 changes: 27 additions & 0 deletions packages/__examples__/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* The MIT License (MIT)
*
* Copyright (c) 2015 - present Instructure, Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

module.exports = {
stories: ['../stories.js']
}
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,7 @@
import '@instructure/ui-polyfill-loader!'

import { create } from '@storybook/theming'
import {
getStorybook,
storiesOf,
configure,
addParameters
} from '@storybook/react'

import { theme } from '@instructure/canvas-theme'

import { renderExample } from './renderExample'
import { renderPage } from './renderPage'

// eslint-disable-next-line no-console
console.log('Generating component examples...')
import { addParameters } from '@storybook/react'

addParameters({
options: {
Expand All @@ -48,54 +35,9 @@ addParameters({
name: 'instructure-ui',
brandUrl: 'https://instructure.design',
brandImage:
'https://instructure.design/icons-bea652a7d0546b99c7cba9d3b4a538ee/favicon-32x32.png'
'https://instructure.design/icons-bea652a7d0546b99c7cba9d3b4a538ee/favicon-32x32.png' // TODO this URL is broken
}),
showPanel: false,
isFullscreen: false
}
})

configure(() => {
const examplesContext = require.context(
'../../',
true,
/^.*\/src\/.*\.examples\.js$/,
'lazy'
)
let numStories = 0

// eslint-disable-next-line no-console
console.log(
`Creating stories for ${examplesContext.keys().length} components...`
)

examplesContext.keys().map((requirePath) => {
examplesContext(requirePath).then(({ componentName, sections }) => {
if (sections && sections.length > 0) {
const stories = storiesOf(componentName, module)

sections.forEach(({ pages, sectionName }) => {
pages.forEach((page, i) => {
page.renderExample = renderExample
numStories++
stories.add(
`${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
renderPage.bind(null, page),
{
chromatic: {
...page.parameters,
viewports: [1200],
delay: 4000
}
}
)
})
})
}
})
})

console.log(`Created ${numStories} stories!`)
}, module)

export { getStorybook }
14 changes: 14 additions & 0 deletions packages/__examples__/.storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,20 @@ const merge = require('webpack-merge')

module.exports = ({ config, mode }) => {
const baseConfig = require('@instructure/ui-webpack-config')

// Storybook does not like thread-loader, see
// https://github.com/storybookjs/storybook/issues/12864
const rules = baseConfig.module.rules
for (const rule of rules) {
if (rule.use) {
for (let i = 0; i < rule.use.length; i++) {
if (rule.use[i].loader === 'thread-loader') {
rule.use.splice(i, 1)
}
}
}
}

config = merge(config, baseConfig)

// need to override this instead of merge for these...
Expand Down
6 changes: 3 additions & 3 deletions packages/__examples__/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@
"@instructure/ui-tooltip": "^7.4.0",
"@instructure/ui-view": "^7.4.0",
"@instructure/ui-webpack-config": "^7.4.0",
"@storybook/react": "^5.2.1",
"@storybook/theming": "^5.2.1",
"@storybook/react": "^6.1.18",
"@storybook/theming": "^6.1.18",
"react": "^16.8",
"react-dom": "^16.8",
"story2sketch": "^1.7.0",
"story2sketch": "^1.7.1",
"chromatic": "^5",
"webpack-merge": "^4.2.1"
}
Expand Down
File renamed without changes.
File renamed without changes.
71 changes: 71 additions & 0 deletions packages/__examples__/stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
* The MIT License (MIT)
*
* Copyright (c) 2015 - present Instructure, Inc.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

import { storiesOf } from '@storybook/react'

import { renderExample } from './renderExample.js'
import { renderPage } from './renderPage.js'
import React from 'react'

const examplesContext = require.context(
'../../',
true,
/^.*\/src\/.*\.examples\.js$/,
'sync'
)

let numStories = 0
// eslint-disable-next-line no-console
console.log(
`Creating stories for ${examplesContext.keys().length} components...`
)

examplesContext.keys().map((requirePath) => {
const ctx = examplesContext(requirePath)
if (ctx.sections && ctx.sections.length > 0) {
const stories = storiesOf(ctx.componentName, module)
ctx.sections.forEach(({ pages, sectionName }) => {
pages.forEach((page, i) => {
// eslint-disable-next-line no-param-reassign
page.renderExample = renderExample
numStories++
stories.add(
`${sectionName}${pages.length > 1 ? ` (page ${i + 1})` : ''}`,
renderPage.bind(null, page),
{
chromatic: {
...page.parameters,
viewports: [1200],
pauseAnimationAtEnd: true,
delay: 500
}
}
)
})
})
}
})

// eslint-disable-next-line no-console
console.log(`Created ${numStories} stories!`)
Loading

0 comments on commit 6a6fef2

Please sign in to comment.