Skip to content
This repository was archived by the owner on Jan 22, 2019. It is now read-only.

Commit 3e579b3

Browse files
ijsnowijsnow
authored
chore: add storybooks (#240)
1 parent 3e736ad commit 3e579b3

13 files changed

+2509
-170
lines changed

‎package.json

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
"clean": "rm -rf build/ dist/ *.zip *.xpi .checksum",
1616
"cypress:open": "yarn run build && cypress open",
1717
"test:e2e": "yarn run build && cypress run --browser chrome",
18-
"prettier": "prettier '**/{*.{js?(on),ts?(x),graphql,md,scss},.*.js?(on)}' --write --list-different --config prettier.config.js"
18+
"prettier": "prettier '**/{*.{js?(on),ts?(x),graphql,md,scss},.*.js?(on)}' --write --list-different --config prettier.config.js",
19+
"storybook": "start-storybook -c ./storybook -p 6006",
20+
"build-storybook": "build-storybook -c ./storybook"
1921
},
2022
"husky": {
2123
"hooks": {
@@ -35,12 +37,17 @@
3537
"@babel/core": "^7.0.1",
3638
"@babel/polyfill": "^7.0.0",
3739
"@babel/preset-env": "^7.0.0",
40+
"@babel/runtime": "^7.0.0",
3841
"@commitlint/cli": "^7.0.0",
3942
"@commitlint/config-conventional": "^7.0.1",
4043
"@semantic-release/exec": "^3.1.0",
4144
"@sourcegraph/prettierrc": "^2.2.0",
4245
"@sourcegraph/stylelint-config": "^1.0.1",
4346
"@sourcegraph/tslint-config": "^12.0.0",
47+
"@storybook/addon-actions": "4.0.0-alpha.21",
48+
"@storybook/addon-links": "4.0.0-alpha.21",
49+
"@storybook/addons": "4.0.0-alpha.21",
50+
"@storybook/react": "4.0.0-alpha.21",
4451
"@types/bluebird": "3.5.24",
4552
"@types/chalk": "2.2.0",
4653
"@types/cypress": "1.1.3",
@@ -60,20 +67,25 @@
6067
"@types/signale": "1.2.0",
6168
"@types/socket.io": "1.4.38",
6269
"@types/socket.io-client": "1.4.32",
70+
"@types/storybook__addon-actions": "^3.4.1",
71+
"@types/storybook__react": "3.0.9",
6372
"@types/textarea-caret": "3.0.0",
6473
"@types/uuid": "3.4.4",
6574
"@types/webpack": "4.4.14",
6675
"autoprefixer": "^9.0.0",
76+
"babel-core": "^6.26.3",
6777
"babel-loader": "^8.0.2",
78+
"babel-runtime": "^6.26.0",
6879
"css-loader": "^1.0.0",
6980
"cypress": "^3.1.0",
7081
"extract-text-webpack-plugin": "^4.0.0-beta.0",
7182
"get-graphql-schema": "^2.1.1",
7283
"gql2ts": "^1.2.1",
7384
"husky": "^1.1.0",
7485
"node-sass": "^4.9.0",
75-
"postcss-loader": "^2.0.8",
86+
"postcss-loader": "^3.0.0",
7687
"prettier": "1.14.0",
88+
"raw-loader": "^0.5.1",
7789
"sass-loader": "^6.0.6",
7890
"semantic-release": "^15.9.9",
7991
"semantic-release-chrome": "^1.1.0",

‎src/shared/app.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import 'node_modules/open-color/open-color.scss';
1+
@import 'open-color/open-color.scss';
22
@import './global-styles/colors';
33

44
// Bootstrap configuration before Bootstrap is imported
@@ -69,14 +69,14 @@ $theme-colors-light: (
6969
background-color: rgba(255, 192, 120, 0.5);
7070
}
7171

72-
@import 'node_modules/bootstrap/scss/functions';
73-
@import 'node_modules/bootstrap/scss/variables';
74-
@import 'node_modules/bootstrap/scss/mixins';
75-
@import 'node_modules/bootstrap/scss/alert';
76-
@import 'node_modules/bootstrap/scss/card';
77-
@import 'node_modules/bootstrap/scss/utilities/text';
78-
@import 'node_modules/bootstrap/scss/nav';
79-
@import 'node_modules/bootstrap/scss/popover';
72+
@import 'bootstrap/scss/functions';
73+
@import 'bootstrap/scss/variables';
74+
@import 'bootstrap/scss/mixins';
75+
@import 'bootstrap/scss/alert';
76+
@import 'bootstrap/scss/card';
77+
@import 'bootstrap/scss/utilities/text';
78+
@import 'bootstrap/scss/nav';
79+
@import 'bootstrap/scss/popover';
8080
@import './global-styles/card';
8181
@import './global-styles/icons';
8282
@import './repo/tooltips';
@@ -88,9 +88,9 @@ $theme-colors-light: (
8888
@import './components/alerts';
8989
@import './components/symbols';
9090
@import './components/codeIntelStatusIndicator';
91-
@import 'node_modules/@sourcegraph/codeintellify/lib/HoverOverlay.scss';
91+
@import '@sourcegraph/codeintellify/lib/HoverOverlay.scss';
9292
@import '../libs/code_intelligence/HoverOverlay.scss';
93-
@import 'node_modules/@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';
93+
@import '@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';
9494
@import './extensions-client-common';
9595

9696
#sourcegraph-options-menu {

‎src/shared/extensions-client-common.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/PopoverButton.css';
2-
@import 'node_modules/@sourcegraph/extensions-client-common/lib/ui/generic/Toggle.css';
3-
@import 'node_modules/@sourcegraph/extensions-client-common/lib/app/CommandList';
4-
@import 'node_modules/@sourcegraph/extensions-client-common/lib/app/ExtensionStatus';
5-
@import 'node_modules/@sourcegraph/extensions-client-common/lib/extensions/manager/ExtensionCard.css';
1+
@import '@sourcegraph/extensions-client-common/lib/ui/generic/PopoverButton.css';
2+
@import '@sourcegraph/extensions-client-common/lib/ui/generic/Toggle.css';
3+
@import '@sourcegraph/extensions-client-common/lib/app/CommandList';
4+
@import '@sourcegraph/extensions-client-common/lib/app/ExtensionStatus';
5+
@import '@sourcegraph/extensions-client-common/lib/extensions/manager/ExtensionCard.css';
66

77
$body-color-light: #2b3750;
88
$body-color-dark: #f2f4f8;
@@ -29,9 +29,9 @@ $body-color-dark: #f2f4f8;
2929
}
3030

3131
.command-list {
32-
@import 'node_modules/bootstrap/scss/list-group';
33-
@import 'node_modules/bootstrap/scss/forms';
34-
@import 'node_modules/bootstrap/scss/input-group';
32+
@import 'bootstrap/scss/list-group';
33+
@import 'bootstrap/scss/forms';
34+
@import 'bootstrap/scss/input-group';
3535

3636
a {
3737
cursor: pointer;

‎src/shared/global-styles/card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ $card-bg: var(--body-bg);
44
$card-border-color: #{$color-light-border};
55
$card-cap-bg: #{rgba($color-light-bg-2, 0.75)};
66

7-
@import 'node_modules/bootstrap/scss/card';
7+
@import 'bootstrap/scss/card';
88

99
.card-header {
1010
font-weight: bold;

‎stories/global.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import '../src/shared/app.scss';

‎stories/options/ConfigWarning.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react'
2+
3+
import { storiesOf } from '@storybook/react'
4+
5+
import '../global.scss'
6+
7+
import { ConfigWarning } from '../../src/shared/components/options/ConfigWarning'
8+
9+
storiesOf('ConnectionCard', module).add('Default', () => <ConfigWarning />)

‎storybook/addons.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '@storybook/addon-actions/register'
2+
import '@storybook/addon-links/register'

‎storybook/config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@storybook/react'
2+
3+
// automatically import all files ending in *.stories.js
4+
const req = require.context('../stories', true, /\.tsx?$/)
5+
function loadStories() {
6+
req.keys().forEach(filename => req(filename))
7+
}
8+
9+
configure(loadStories, module)

‎storybook/preview-head.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<link rel="stylesheet"
2+
href="https://maxcdn.bootstr
3+
apcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
4+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
5+
crossorigin="anonymous">

‎storybook/tsconfig.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"rootDirs": ["src", "stories"]
5+
}
6+
}

‎storybook/webpack.config.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const path = require('path')
2+
const sassImportOnce = require('node-sass-import-once')
3+
4+
module.exports = (baseConfig, env, config) => {
5+
config.module.rules.push({
6+
test: /\.tsx?$/,
7+
use: [
8+
{
9+
loader: 'babel-loader',
10+
options: {
11+
cacheDirectory: true,
12+
},
13+
},
14+
{
15+
loader: 'ts-loader',
16+
options: {
17+
compilerOptions: {
18+
target: 'es6',
19+
module: 'esnext',
20+
noEmit: false, // tsconfig.json sets this to true to avoid output when running tsc manually
21+
},
22+
transpileOnly: process.env.DISABLE_TYPECHECKING === 'true',
23+
},
24+
},
25+
],
26+
})
27+
28+
config.module.rules.push({
29+
test: /\.jsx?$/,
30+
loader: {
31+
loader: 'babel-loader',
32+
options: {
33+
cacheDirectory: true,
34+
},
35+
},
36+
})
37+
38+
config.module.rules.unshift({
39+
test: /\.(css|sass|scss)$/,
40+
use: [
41+
'style-loader',
42+
{
43+
loader: 'css-loader',
44+
options: {
45+
minimize: process.env.NODE_ENV === 'production',
46+
},
47+
},
48+
'postcss-loader',
49+
{
50+
loader: 'sass-loader',
51+
options: {
52+
includePaths: [path.resolve(__dirname, '..', 'node_modules')],
53+
importer: sassImportOnce,
54+
importOnce: {
55+
css: true,
56+
},
57+
},
58+
},
59+
],
60+
})
61+
62+
config.resolve.extensions.push('.ts', '.tsx')
63+
return config
64+
}

‎webpack/base.config.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,20 @@ export default {
6868
loader: babelLoader,
6969
},
7070
{
71-
// sass / scss loader for webpack
71+
// SCSS rule for our own styles and Bootstrap
7272
test: /\.(css|sass|scss)$/,
73-
loader: ExtractTextPlugin.extract([
74-
'css-loader',
73+
use: ExtractTextPlugin.extract([
74+
{
75+
loader: 'css-loader',
76+
options: {
77+
minimize: process.env.NODE_ENV === 'production',
78+
},
79+
},
7580
'postcss-loader',
7681
{
7782
loader: 'sass-loader',
7883
options: {
79-
includePaths: [path.resolve(__dirname, '..', '/node_modules')],
84+
includePaths: [path.resolve(__dirname, '..', 'node_modules')],
8085
importer: sassImportOnce,
8186
importOnce: {
8287
css: true,

0 commit comments

Comments
 (0)