Commit b36f0adf authored by Tom Quirk's avatar Tom Quirk

Init storybook for vue_shared

Adds Storybook dependencies, config,
and a story for todo_button.vue.

Deploys to GitLab pages.
parent ed26027d
......@@ -89,6 +89,9 @@ rules:
group: internal
alphabetize:
order: asc
filenames/match-regex:
- error
- "^[a-z_]+(\\.stories|\\.config|\\.documentation|\\.[a-z_]+\\.example|\\.spec)?$"
overrides:
- files:
- '**/spec/**/*'
......
......@@ -344,3 +344,20 @@ startup-css-check as-if-foss:
needs:
- job: "compile-test-assets as-if-foss"
- job: "rspec frontend_fixture as-if-foss"
compile-storybook:
extends:
- .compile-assets-base
script:
- source scripts/utils.sh
- cd storybook/
- run_timed_command "retry yarn install --frozen-lockfile"
- yarn build
- mkdir public
- mv storybook-static/* public
artifacts:
name: storybook
expire_in: 31d
when: always
paths:
- public
pages:
extends:
- .default-retry
- .pages:rules
stage: pages
needs:
- rspec:coverage
- coverage-frontend
- karma
- compile-production-assets
- compile-storybook
script:
- mv public/ .public/
- mkdir public/
......@@ -16,7 +16,10 @@ pages:
- mv coverage-javascript/ public/coverage-javascript/ || true
- cp .public/assets/application-*.css public/application.css || true
- cp .public/assets/application-*.css.gz public/application.css.gz || true
- cp .public/storybook public/storybook || true
artifacts:
paths:
- public
expire_in: 31d
rules:
- when: manual
/* eslint-disable @gitlab/require-i18n-strings */
import TodoButton from './todo_button.vue';
export default {
component: TodoButton,
title: 'components/todo_button',
};
export const Primary = () => ({
components: { TodoButton },
template: '<todo-button />',
argTypes: {
isTodo: { description: 'True if to-do is unresolved (i.e. not "done")', control: 'boolean' },
},
});
......@@ -43,7 +43,8 @@
"stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
"webpack": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.config.js",
"webpack-vendor": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.vendor.config.js",
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js"
"webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js",
"storybook": "yarn --cwd ./storybook start"
},
"dependencies": {
"@babel/core": "^7.10.1",
......
node_modules/
storybook-static
\ No newline at end of file
/* eslint-disable import/no-commonjs */
module.exports = {
stories: ['../../app/assets/javascripts/**/*.stories.js'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
};
/* eslint-disable import/no-unresolved, import/no-commonjs */
const stylesheetsRequireCtx = require.context(
'../../app/assets/stylesheets',
true,
/application\.scss$/,
);
stylesheetsRequireCtx('./application.scss');
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
/* eslint-disable no-param-reassign */
const { statSync } = require('fs');
const sass = require('node-sass');
const { buildIncludePaths, resolveGlobUrl } = require('node-sass-magic-importer/dist/toolbox');
const path = require('path');
const webpack = require('webpack');
const gitlabWebpackConfig = require('../../config/webpack.config.js');
const TRANSPARENT_1X1_PNG =
'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==)';
function smartImporter(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 };
// }
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() {
return new sass.types.String(TRANSPARENT_1X1_PNG);
},
'asset_path($url)': function sassAssetPathStub() {
return new sass.types.String(TRANSPARENT_1X1_PNG);
},
'asset_url($url)': function sassAssetUrlStub() {
return new sass.types.String(TRANSPARENT_1X1_PNG);
},
'url($url)': function sassUrlStub() {
return new sass.types.String(TRANSPARENT_1X1_PNG);
},
},
includePaths: sassIncludePaths,
importer: smartImporter,
};
module.exports = ({ 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'];
config.module.rules = [
...config.module.rules.filter((r) => !r.test.test('.css')),
{
test: /\.s?css$/,
exclude: /typescale\/\w+_demo\.scss$/, // skip typescale demo stylesheets
loaders: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: sassLoaderOptions,
},
],
},
];
config.plugins.push(new webpack.IgnorePlugin(/moment/, /pikaday/));
return config;
};
{
"name": "gitlab-storybook",
"version": "1.0.0",
"description": "",
"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",
"node-sass": "^4.14.1",
"node-sass-magic-importer": "^5.3.2",
"postcss-loader": "3.0.0",
"sass-loader": "^7.1.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