Commit c8eed07c authored by Tom Quirk's avatar Tom Quirk

Clean up storybook config

- upgrade storybook packages
- add comments to webpack config
parent 633d5e0c
......@@ -89,9 +89,6 @@ rules:
group: internal
alphabetize:
order: asc
filenames/match-regex:
- error
- "^[a-z_]+(\\.stories|\\.config|\\.documentation|\\.[a-z_]+\\.example|\\.spec)?$"
overrides:
- files:
- '**/spec/**/*'
......@@ -110,3 +107,7 @@ overrides:
import/no-nodejs-modules: off
filenames/match-regex: off
no-console: off
- files:
- '*.stories.js'
rules:
filenames/match-regex: off
pages:
extends:
- .default-retry
- .pages:rules
stage: pages
needs:
- rspec:coverage
......@@ -21,5 +22,3 @@ pages:
paths:
- public
expire_in: 31d
rules:
- when: manual
......@@ -7,10 +7,17 @@ export default {
title: 'components/todo_button',
};
export const Primary = () => ({
const Template = (args, { argTypes }) => ({
components: { TodoButton },
template: '<todo-button />',
argTypes: {
isTodo: { description: 'True if to-do is unresolved (i.e. not "done")', control: 'boolean' },
},
props: Object.keys(argTypes),
template: '<todo-button v-bind="$props" v-on="$props" />',
});
export const Default = Template.bind({});
Default.argTypes = {
isTodo: {
description: 'True if to-do is unresolved (i.e. not "done")',
control: { type: 'boolean' },
},
click: { action: 'clicked' },
};
/* eslint-disable import/no-commonjs */
module.exports = {
stories: ['../../app/assets/javascripts/**/*.stories.js'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'],
};
......@@ -5,7 +5,3 @@ const stylesheetsRequireCtx = require.context(
);
stylesheetsRequireCtx('./application.scss');
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
......@@ -2,50 +2,51 @@
const { statSync } = require('fs');
const path = require('path');
const sass = require('node-sass');
const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox');
const sass = require('node-sass'); // eslint-disable-line import/no-unresolved
const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox'); // eslint-disable-line import/no-unresolved
const webpack = require('webpack');
const gitlabWebpackConfig = require('../../config/webpack.config.js');
const ROOT = path.resolve(__dirname, '../../');
const TRANSPARENT_1X1_PNG =
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
const SASS_INCLUDE_PATHS = [
'app/assets/stylesheets',
'ee/app/assets/stylesheets',
'ee/app/assets/stylesheets/_ee',
'node_modules',
].map((p) => path.resolve(ROOT, p));
function smartImporter(url, prev) {
/**
* Custom importer for node-sass, used when LibSass encounters the `@import` directive.
* Doc source: https://github.com/sass/node-sass#importer--v200---experimental
* @param {*} url the path in import as-is, which LibSass encountered.
* @param {*} prev the previously resolved path.
* @returns {Object | null} the new import string.
*/
function sassSmartImporter(url, prev) {
const nodeSassOptions = this.options;
const includePaths = buildIncludePaths(nodeSassOptions.includePaths, prev).filter(
(includePath) => !includePath.includes('node_modules'),
);
// if (url.startsWith('@gitlab/ui')) {
// return { file: resolveUrl(url.replace('@gitlab/ui/', ''), includePaths) };
// }
// if (url === 'framework/variables') {
// return { contents: patchedFrameworkVariables };
// }
// GitLab extensively uses glob-style import paths, but
// Sass doesn't support glob-style URLs out of the box.
// Here, we try and resolve the glob URL.
// If it resolves, we update the @import statement with the resolved path.
const filePaths = resolveGlobUrl(url, includePaths);
if (filePaths) {
const contents = filePaths
.filter((file) => statSync(file).isFile())
.map((x) => `@import '${x}';`)
.join(`\n`);
return { contents };
}
return null;
}
const ROOT = path.resolve(__dirname, '../../');
const sassIncludePaths = [
'app/assets/stylesheets',
'ee/app/assets/stylesheets',
'ee/app/assets/stylesheets/_ee',
'node_modules',
].map((p) => path.resolve(ROOT, p));
const sassLoaderOptions = {
functions: {
'image-url($url)': function sassImageUrlStub() {
......@@ -61,18 +62,17 @@ const sassLoaderOptions = {
return new sass.types.String(TRANSPARENT_1X1_PNG);
},
},
includePaths: sassIncludePaths,
importer: smartImporter,
includePaths: SASS_INCLUDE_PATHS,
importer: sassSmartImporter,
};
module.exports = ({ config }) => {
module.exports = function storybookWebpackConfig({ config }) {
// Add any missing extensions from the main GitLab webpack config
config.resolve.extensions = Array.from(
new Set([...config.resolve.extensions, ...gitlabWebpackConfig.resolve.extensions]),
);
Object.assign(config.resolve.alias, gitlabWebpackConfig.resolve.alias);
delete config.resolve.alias['@gitlab/svgs/dist/icons.svg'];
// Replace any Storybook-defined CSS loaders with our custom one.
config.module.rules = [
...config.module.rules.filter((r) => !r.test.test('.css')),
{
......@@ -89,7 +89,15 @@ module.exports = ({ config }) => {
},
];
// Silence webpack warnings about moment/pikaday not being able to resolve.
config.plugins.push(new webpack.IgnorePlugin(/moment/, /pikaday/));
// Add any missing aliases from the main GitLab webpack config
Object.assign(config.resolve.alias, gitlabWebpackConfig.resolve.alias);
// The main GitLab project aliases this `icons.svg` file to app/assets/javascripts/lib/utils/icons_path.js,
// which depends on the existence of a global `gon` variable.
// By deleting the alias, imports of this path will resolve as expected.
delete config.resolve.alias['@gitlab/svgs/dist/icons.svg'];
return config;
};
{
"name": "gitlab-storybook",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "start-storybook -p 6006 -c config",
"build": "build-storybook -c config"
},
"author": "",
"license": "ISC",
"dependencies": {
"@storybook/addon-controls": "^6.1.20",
"@storybook/addon-essentials": "^6.1.20",
"@storybook/addon-links": "^6.1.20",
"@storybook/vue": "^6.1.20",
"dependencies": {},
"devDependencies": {
"@storybook/addon-a11y": "^6.2.9",
"@storybook/addon-actions": "^6.2.9",
"@storybook/addon-controls": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/vue": "6.2.9",
"node-sass": "^4.14.1",
"node-sass-magic-importer": "^5.3.2",
"postcss-loader": "3.0.0",
......
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment