Merge pull request #350 from mikqi/feat/storybook-integration

Storybook Integration

package.json

@@ -6,7 +6,9 @@
     "build": "lerna run build",
     "test": "cross-env CI=true lerna run test -- --coverage",
     "create-plugin": "backstage-cli create-plugin",
-    "lint": "lerna run lint"
+    "lint": "lerna run lint",
+    "storybook": "yarn workspace @spotify-backstage/core storybook",
+    "build-storybook": "yarn workspace @spotify-backstage/core build-storybook"
   },
   "workspaces": {
     "packages": [

packages/core/.storybook/main.js

@@ -0,0 +1,22 @@
+module.exports = {
+  stories: [
+    '../src/layout/**/*.stories.tsx',
+    '../src/components/**/*.stories.tsx',
+  ],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true
+          }
+        },
+      ],
+    });
+    config.resolve.extensions.push('.ts', '.tsx');
+    return config;
+  },
+};

packages/core/package.json

@@ -8,7 +8,9 @@
   "scripts": {
     "build": "tsc --outDir dist/cjs --noEmit false --module CommonJS",
     "lint": "backstage-cli lint",
-    "test": "backstage-cli test"
+    "test": "backstage-cli test",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@material-ui/core": "^4.9.1",
@@ -26,10 +28,17 @@
     "recompose": "0.30.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.9.0",
     "@spotify-backstage/cli": "^0.1.0",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addons": "^5.3.17",
+    "@storybook/react": "^5.3.17",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "prop-types": "^15.7.2"
+    "babel-loader": "^8.1.0",
+    "prop-types": "^15.7.2",
+    "ts-loader": "^6.2.1"
   }
 }

packages/core/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import Progress from '.';
+
+export default {
+  title: 'Progress',
+  component: Progress,
+};
+
+export const progress = () => <Progress />;