Unverified Commit 3ce3f42f authored by Marcos Iglesias's avatar Marcos Iglesias Committed by GitHub

chore: Updates Storybook to version 6 (#712)

* Removing story.name
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Adding pre-push hook
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Updating Flag and Card
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Updating Storybook to version 6
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Updating betterer results
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Update eslint config
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Update eslint config
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>

* Removing pre-push hook as it runs on .src-custom
Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>
parent 9f5b34f7
......@@ -343,8 +343,8 @@ exports[`strict null compilation`] = {
"js/utils/navigationUtils.ts:1127210474": [
[19, 50, 21, "Type \'undefined\' cannot be used as an index type.", "602535635"]
],
"webpack.common.ts:368637609": [
[34, 24, 20, "No overload matches this call.\\n Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"]
"webpack.common.ts:1615757453": [
[42, 24, 20, "No overload matches this call.\\n Overload 1 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.\\n Overload 2 of 2, \'(...items: ConcatArray<never>[]): never[]\', gave the following error.\\n Argument of type \'string\' is not assignable to parameter of type \'ConcatArray<never>\'.", "806093104"]
]
}`
};
......@@ -9,3 +9,4 @@ stylesheets/*
vendor/*
docs/*
appbuilder/*
.src-custom/*
import merge from 'webpack-merge';
// Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0
import customWebpackConfig from './webpack.config.js';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import devWebpackConfig from '../webpack.dev';
module.exports = {
stories: ['../js/**/*.story.tsx'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-knobs'
],
webpackFinal: async (config) => {
return merge(devWebpackConfig, config);
webpackFinal: (config) => {
return {
...config,
module: {
...config.module,
rules: customWebpackConfig.module.rules,
},
resolve: {
...config.resolve,
...customWebpackConfig.resolve,
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
...config.plugins
]
};
},
};
......@@ -13,5 +13,5 @@ addons.setConfig({
theme: amundsenTheme,
selectedPanel: undefined,
initialActive: 'sidebar',
showRoots: false,
showRoots: true,
});
import anysort from 'anysort';
import { addParameters } from '@storybook/react';
// Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0
import '../css/styles.scss';
const categoriesOrder = [
'Overview/Introduction',
'Attributes/**',
'Components/**',
'Overview',
'Attributes',
'Components',
];
addParameters({
export const parameters = {
options: {
showRoots: true,
storySort: (previous, next) => {
const [previousStory, previousMeta] = previous;
const [nextStory, nextMeta] = next;
return anysort(previousMeta.kind, nextMeta.kind, categoriesOrder);
storySort: {
order: categoriesOrder,
},
},
});
};
// Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function resolve(dir) {
return path.join(__dirname, dir);
}
const TSX_PATTERN = /\.ts|\.tsx$/;
const JSX_PATTERN = /\.jsx?$/;
const CSS_PATTERN = /\.(sa|sc|c)ss$/;
const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
const RESOLVED_EXTENSIONS = ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'];
const PATHS = {
dist: resolve('../dist'),
pages: resolve('../js/pages'),
components: resolve('../js/components'),
config: resolve('../js/config'),
ducks: resolve('../js/ducks'),
interfaces: resolve('../js/interfaces'),
utils: resolve('../js/utils'),
css: resolve('../css/'),
};
module.exports = {
module: {
rules: [
{
test: TSX_PATTERN,
exclude: /node_modules/,
loader: 'ts-loader',
},
{
test: JSX_PATTERN,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: CSS_PATTERN,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [PATHS.css],
},
},
},
],
},
{
test: IMAGE_PATTERN,
use: 'file-loader',
},
{
test: FONT_PATTERN,
use: 'file-loader',
},
]
},
resolve: {
extensions: RESOLVED_EXTENSIONS,
alias: {
pages: PATHS.pages,
components: PATHS.components,
config: PATHS.config,
ducks: PATHS.ducks,
interfaces: PATHS.interfaces,
utils: PATHS.utils,
},
},
};
......@@ -2,14 +2,15 @@
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { storiesOf } from '@storybook/react';
import StorySection from '../StorySection';
import Card from '.';
const stories = storiesOf('Components/Cards', module);
export default {
title: 'Components/Cards',
};
stories.add('Cards', () => (
export const Cards = () => (
<>
<StorySection title="Loading Card">
<Card isLoading />
......@@ -28,4 +29,6 @@ stories.add('Cards', () => (
/>
</StorySection>
</>
));
);
Cards.storyName = 'Cards';
......@@ -2,15 +2,16 @@
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import { storiesOf } from '@storybook/react';
import { BadgeStyle } from 'config/config-types';
import StorySection from '../StorySection';
import Flag, { CaseType } from '.';
const stories = storiesOf('Components/Flags', module);
export default {
title: 'Components/Flags',
};
stories.add('Flags', () => (
export const Flags = () => (
<>
<StorySection title="Lower Case Flag">
<Flag caseType={CaseType.LOWER_CASE} text="Test Flag" />
......@@ -64,4 +65,6 @@ stories.add('Flags', () => (
/>
</StorySection>
</>
));
);
Flags.storyName = 'Flags';
......@@ -55,9 +55,7 @@ export const TypographyUpdated = () => {
);
};
TypographyUpdated.story = {
name: 'Typography',
};
TypographyUpdated.storyName = 'Typography';
export const Typography = () => {
return (
......@@ -102,6 +100,4 @@ export const Typography = () => {
);
};
Typography.story = {
name: 'Deprecated: Headings & Body',
};
Typography.storyName = 'Deprecated: Headings & Body';
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -56,12 +56,12 @@
"@babel/preset-react": "^7.10.4",
"@betterer/cli": "^3.0.3",
"@betterer/typescript": "^3.0.1",
"@storybook/addon-actions": "^6.0.21",
"@storybook/addon-info": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@storybook/theming": "^6.0.21",
"@storybook/addon-actions": "^6.0.26",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.0.26",
"@storybook/addons": "^6.0.26",
"@storybook/react": "^6.0.26",
"@storybook/theming": "^6.0.26",
"@types/enzyme": "^3.10.5",
"@types/jasmine-matchers": "^0.2.32",
"@types/jest": "^26.0.14",
......@@ -246,7 +246,8 @@
"stylesheets/*",
"vendor/*",
"docs/*",
"appbuilder/*"
"appbuilder/*",
".src-custom/*"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
......
// Copyright Contributors to the Amundsen project.
// SPDX-License-Identifier: Apache-2.0
import * as path from 'path';
import * as fs from 'fs';
import * as webpack from 'webpack';
......@@ -9,22 +12,27 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import appConfig from './js/config/config';
function resolve(dir) {
return path.join(__dirname, dir);
}
const TSX_PATTERN = /\.ts|\.tsx$/;
const JSX_PATTERN = /\.jsx?$/;
const CSS_PATTERN = /\.(sa|sc|c)ss$/;
const IMAGE_PATTERN = /\.(png|svg|jpg|gif)$/;
const VENDORS_PATTERN = /[\\/]node_modules[\\/](react|react-dom)[\\/]/;
const FONT_PATTERN = /\.(ttf|woff2|otf)$/;
const RESOLVED_EXTENSIONS = ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'];
const PATHS = {
dist: path.join(__dirname, '/dist'),
pages: path.join(__dirname, '/js/pages'),
components: path.join(__dirname, '/js/components'),
config: path.join(__dirname, '/js/config'),
ducks: path.join(__dirname, '/js/ducks'),
interfaces: path.join(__dirname, '/js/interfaces'),
utils: path.join(__dirname, '/js/utils'),
css: path.join(__dirname, '/css/'),
dist: resolve('/dist'),
pages: resolve('/js/pages'),
components: resolve('/js/components'),
config: resolve('/js/config'),
ducks: resolve('/js/ducks'),
interfaces: resolve('/js/interfaces'),
utils: resolve('/js/utils'),
css: resolve('/css/'),
};
// Process of Templates
......@@ -48,10 +56,7 @@ const htmlWebpackPluginConfig = templatesList.map((file) => {
const config: webpack.Configuration = {
entry: {
main: [
path.join(__dirname, '/css/styles.scss'),
path.join(__dirname, '/js/index.tsx'),
],
main: [resolve('/css/styles.scss'), resolve('/js/index.tsx')],
},
output: {
publicPath: '/static/dist/',
......@@ -68,7 +73,7 @@ const config: webpack.Configuration = {
interfaces: PATHS.interfaces,
utils: PATHS.utils,
},
extensions: ['.tsx', '.ts', '.js', '.jsx', '.css', '.scss'],
extensions: RESOLVED_EXTENSIONS,
},
module: {
rules: [
......
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