Merge pull request #7588 from blink1073/storybook-ui-extensions

Add storybook to ui-components

packages/ui-components/.storybook/config.js

@@ -0,0 +1,5 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../stories', true, /.stories.tsx$/);
+
+configure(req, module);

packages/ui-components/.storybook/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../../tsconfigbase.json",
+  "compilerOptions": {
+    "lib": ["es6", "dom"],
+    "allowJs": false,
+    "rootDir": "../",
+    "outDir": "dist",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true
+  },
+  "include": ["../src/**/*"],
+  "exclude": ["node_modules"]
+}

packages/ui-components/.storybook/webpack.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+const SRC_PATH = path.join(__dirname, '../src');
+const STORIES_PATH = path.join(__dirname, '../stories');
+const STYLE_PATH = path.resolve(__dirname, '../style');
+
+//dont need stories path if you have your stories inside your src folder
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    include: [SRC_PATH, STORIES_PATH],
+    use: [
+      {
+        loader: require.resolve('awesome-typescript-loader'),
+        options: {
+          configFileName: './.storybook/tsconfig.json'
+        }
+      },
+      { loader: require.resolve('react-docgen-typescript-loader') }
+    ]
+  });
+
+  const fileLoaderRule = config.module.rules.find(rule =>
+    rule.test.test('.svg')
+  );
+  fileLoaderRule.exclude = STYLE_PATH;
+  config.module.rules.push({
+    test: /\.svg$/,
+    include: STYLE_PATH,
+    // issuer: { test: /\.ts$/ },
+    use: {
+      loader: 'raw-loader'
+    }
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

packages/ui-components/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+};

packages/ui-components/package.json

@@ -30,6 +30,7 @@
     "clean": "rimraf lib",
     "docs": "typedoc src",
     "prepublishOnly": "npm run build",
+    "storybook": "start-storybook -p 9001 -c .storybook",
     "watch": "tsc -b --watch"
   },
   "dependencies": {
@@ -44,8 +45,15 @@
     "typestyle": "^2.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/preset-env": "^7.4.3",
+    "@storybook/addon-actions": "^5.2.5",
+    "@storybook/react": "^5.2.5",
     "@types/react": "~16.9.15",
     "@types/webpack-env": "^1.13.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "react-docgen-typescript-loader": "^3.3.0",
     "rimraf": "~2.6.2",
     "typedoc": "^0.15.2",
     "typescript": "~3.7.2"

packages/ui-components/src/blueprint.tsx

@@ -46,7 +46,7 @@ export const Button = (props: IButtonProps & CommonProps<any>) => (
     {...props}
     className={combineClasses(
       props.className,
-      props.minimal && 'minimal',
+      props.minimal ? 'minimal' : '',
       'jp-Button'
     )}
   />

packages/ui-components/src/style/icon.ts

@@ -15,7 +15,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  * - splash: The icon used for the splash screen
  * - tabManager: The icons for the tabManager in the sidebar
  */
-export type IconKindType =
+export type IconKindTypeStr =
   | 'breadCrumb'
   | 'dockPanelBar'
   | 'launcherCard'
@@ -26,8 +26,9 @@ export type IconKindType =
   | 'splash'
   | 'statusBar'
   | 'tabManager'
-  | 'toolbarButton'
-  | 'unset';
+  | 'toolbarButton';
+
+export type IconKindType = IconKindTypeStr | undefined;
 
 export interface IIconStyle extends NestedCSSProperties {
   /**
@@ -133,7 +134,7 @@ const iconCSSToolbarButton: NestedCSSProperties = {
   width: '16px'
 };
 
-const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+const iconCSSKind: { [k in IconKindTypeStr]: NestedCSSProperties } = {
   breadCrumb: iconCSSBreadCrumb,
   dockPanelBar: iconCSSDockPanelBar,
   launcherCard: iconCSSLauncherCard,
@@ -144,8 +145,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   splash: iconCSSSplash,
   statusBar: iconCSSStatusBar,
   tabManager: iconCSSTabManager,
-  toolbarButton: iconCSSToolbarButton,
-  unset: {}
+  toolbarButton: iconCSSToolbarButton
 };
 
 /**
@@ -226,7 +226,7 @@ const containerCSSToolbarButton: NestedCSSProperties = {
   verticalAlign: 'middle'
 };
 
-const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+const containerCSSKind: { [k in IconKindTypeStr]: NestedCSSProperties } = {
   breadCrumb: {},
   dockPanelBar: containerCSSDockPanelBar,
   launcherCard: containerCSSLauncherCard,
@@ -237,8 +237,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   splash: containerCSSSplash,
   statusBar: {},
   tabManager: containerCSSTabManager,
-  toolbarButton: containerCSSToolbarButton,
-  unset: {}
+  toolbarButton: containerCSSToolbarButton
 };
 
 /**

packages/ui-components/stories/button.stories.tsx

@@ -0,0 +1,27 @@
+/**
+ * Example story for styling a button.
+ */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '../src';
+
+import '@jupyterlab/application/style/index.css';
+import '@jupyterlab/theme-light-extension/style/index.css';
+
+export default {
+  component: Button,
+  title: 'Button'
+};
+
+export const text = () => (
+  <Button onClick={action('clicked')}>Hello Button</Button>
+);
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);

packages/ui-components/stories/iconreact.stories.tsx

@@ -0,0 +1,24 @@
+/**
+ * Example story for styling an icon.
+ */
+// need this to avoid
+// TS2686: 'React' refers to a UMD global, but the current file is a module.
+import React from 'react';
+
+import { DefaultIconReact } from '../src';
+
+import '@jupyterlab/application/style/index.css';
+import '@jupyterlab/theme-light-extension/style/index.css';
+
+export default {
+  component: DefaultIconReact,
+  title: 'IconReact'
+};
+
+export const buildIcon = () => <DefaultIconReact name={'build'} />;
+
+export const html5Icon = () => (
+  <div className={'foobar'}>
+    <DefaultIconReact name={'html5'} kind={'launcherSection'} center={true} />
+  </div>
+);