Refactor to use parameters

Template based server side rendering
Added a bunch of stories to the example app

app/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "5.3.0-rc.3",
+  "version": "5.3.0-rc.4",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -33,12 +33,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.3.0-rc.3",
-    "@storybook/core": "5.3.0-rc.3",
+    "@storybook/addons": "5.3.0-rc.4",
+    "@storybook/core": "5.3.0-rc.4",
     "@types/webpack-env": "^1.13.9",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
-    "html-loader": "^0.5.5",
     "regenerator-runtime": "^0.13.3",
     "ts-dedent": "^1.1.0"
   },

app/server/src/client/preview/render.ts

@@ -14,10 +14,27 @@ export default async function renderMain({
   showMain,
   showError,
   forceRender,
+  parameters,
 }: RenderMainArgs) {
   const params = storyFn();
 
-  const element = await fetchStoryHtml(id, params);
+  const {
+    server: { url, id: storyId },
+  } = parameters;
+
+  if (fetchStoryHtml === undefined) {
+    showError({
+      title: `Expecting fetchStoryHtml to be configured for @storybook/server.`,
+      description: dedent`
+        Did you forget to pass a fetchStoryHtml function to configure?
+        Use "configure(() => stories, module, { fetchStoryHtml: yourFetchHtmlFunction });".
+      `,
+    });
+    return;
+  }
+
+  const fetchId = storyId || id;
+  const element = await fetchStoryHtml(url, fetchId, params);
 
   showMain();
   if (typeof element === 'string') {

app/server/src/client/preview/types.ts

@@ -2,7 +2,7 @@ import { StoryFn } from '@storybook/addons';
 
 export type StoryFnServerReturnType = any;
 
-export type FetchStoryHtmlType = (id: string, params: any) => Promise<string | Node>;
+export type FetchStoryHtmlType = (url: string, id: string, params: any) => Promise<string | Node>;
 
 export interface IStorybookStory {
   name: string;
@@ -31,4 +31,5 @@ export interface RenderMainArgs {
   showMain: () => void;
   showError: (args: ShowErrorArgs) => void;
   forceRender: boolean;
+  parameters: any;
 }

app/server/src/server/framework-preset-server.ts

@@ -2,21 +2,5 @@
 import { Configuration } from 'webpack';
 
 export function webpack(config: Configuration) {
-  return {
-    ...config,
-    module: {
-      ...config.module,
-      rules: [
-        ...config.module.rules,
-        {
-          test: /\.html$/,
-          use: [
-            {
-              loader: require.resolve('html-loader'),
-            },
-          ],
-        },
-      ],
-    },
-  };
+  return config;
 }

examples/server-kitchen-sink/client/.eslintrc

@@ -0,0 +1,8 @@
+{
+  "env": {
+    "browser": true
+  },
+    "globals": {
+      "fetch": true
+  }
+}

examples/server-kitchen-sink/client/stories.json

@@ -0,0 +1,42 @@
+[
+  {
+    "title": "Demo Examples",
+    "decorators": ["a11y", "knobs"],
+    "parameters": {
+      "options": { "selectedPanel": "storybook/a11y/panel" },
+      "backgrounds": [
+        { "name": "light", "value": "#eeeeee" },
+        { "name": "dark", "value": "#222222", "default": true }
+      ]
+    },
+    "stories": [
+      {
+        "name": "Heading" 
+      },
+      {
+        "name": "With Knobs",
+        "parameters": {
+          "knobs": [
+            {"name": "name", "type": "text", "default": "John Smith"},
+            {"name": "age", "type": "number", "default": "42"}
+          ]
+        } 
+      },
+      {
+        "name": "Simple note",
+        "parameters": {
+          "notes": "My notes on some bold text"
+        }
+      },
+      {
+        "name": "With Actions",
+        "parameters": {
+          "actions": [
+            { "click": "clicked", "contextmenu": "right clicked" },
+            { "clearOnStoryChange": false }
+          ]
+        } 
+      }
+    ]
+  }
+]

examples/server-kitchen-sink/client/stories/addon-a11y.stories.js

@@ -0,0 +1,37 @@
+import { withA11y } from '@storybook/addon-a11y';
+
+export default {
+  title: 'Addons/a11y',
+  decorators: [withA11y],
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => {};
+Default.story = {
+  parameters: {
+    server: { id: 'addons/a11y/default' },
+  },
+};
+export const Label = () => {};
+Label.story = {
+  parameters: {
+    server: { id: 'addons/a11y/label' },
+  },
+};
+
+export const Disabled = () => {};
+Disabled.story = {
+  parameters: {
+    server: { id: 'addons/a11y/disabled' },
+  },
+};
+
+export const Contrast = () => {};
+Contrast.story = {
+  name: 'Invalid contrast',
+  parameters: {
+    server: { id: 'addons/a11y/contrast' },
+  },
+};

examples/server-kitchen-sink/client/stories/addon-actions.stories.js

@@ -0,0 +1,80 @@
+import { withActions, decorate } from '@storybook/addon-actions';
+
+const pickTarget = decorate([args => [args[0].target]]);
+
+const button = () => {};
+
+export default {
+  title: 'Addons/Actions',
+};
+
+export const Story1 = () => withActions('click')(button);
+Story1.story = {
+  name: 'Hello World',
+  parameters: {
+    server: { id: 'addons/actions/story1' },
+  },
+};
+export const Story2 = () => withActions('click', 'contextmenu')(button);
+Story2.story = {
+  name: 'Multiple actions',
+  parameters: {
+    server: { id: 'addons/actions/story2' },
+  },
+};
+
+export const Story3 = () =>
+  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+Story3.story = {
+  name: 'Multiple actions + config',
+  parameters: {
+    server: { id: 'addons/actions/story3' },
+  },
+};
+
+export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+Story4.story = {
+  name: 'Multiple actions, object',
+  parameters: {
+    server: { id: 'addons/actions/story4' },
+  },
+};
+
+export const Story5 = () =>
+  withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(button);
+
+Story5.story = {
+  name: 'Multiple actions, selector',
+  parameters: {
+    server: { id: 'addons/actions/story5' },
+  },
+};
+
+export const Story6 = () =>
+  withActions(
+    { click: 'clicked', contextmenu: 'right clicked' },
+    { clearOnStoryChange: false }
+  )(button);
+Story6.story = {
+  name: 'Multiple actions, object + config',
+  parameters: {
+    server: { id: 'addons/actions/story6' },
+  },
+};
+
+export const Story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+Story7.story = {
+  name: 'Decorated actions',
+  parameters: {
+    server: { id: 'addons/actions/story7' },
+  },
+};
+
+export const Story8 = () =>
+  pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+Story8.story = {
+  name: 'Decorated actions + config',
+  parameters: {
+    server: { id: 'addons/actions/story8' },
+  },
+};

examples/server-kitchen-sink/client/stories/addon-backgrounds.stories.js

@@ -0,0 +1,25 @@
+export default {
+  title: 'Addons/Backgrounds',
+  parameters: {
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  },
+};
+
+export const Story1 = () => {};
+Story1.story = {
+  name: 'story 1',
+  parameters: {
+    server: { id: 'addons/backgrounds/story1' },
+  },
+};
+
+export const Story2 = () => {};
+Story2.story = {
+  name: 'story 2',
+  parameters: {
+    server: { id: 'addons/backgrounds/story2' },
+  },
+};

examples/server-kitchen-sink/client/stories/addon-knobs.stories.js

@@ -0,0 +1,96 @@
+import {
+  array,
+  boolean,
+  color,
+  date,
+  select,
+  withKnobs,
+  text,
+  number,
+} from '@storybook/addon-knobs';
+
+export default {
+  title: 'Addons/Knobs',
+  decorators: [withKnobs],
+};
+
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
+  return { content };
+};
+Simple.story = {
+  parameters: {
+    server: { id: 'addons/knobs/simple' },
+  },
+};
+
+export const Story3 = () => {
+  const name = text('Name', 'John Doe');
+  const textColor = color('Text color', 'orangered');
+  return { name, textColor };
+};
+Story3.story = {
+  name: 'CSS transitions',
+  parameters: {
+    server: { id: 'addons/knobs/story3' },
+  },
+};
+
+export const Story4 = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
+
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+
+  return {
+    style,
+    name,
+    today,
+    dateOptions: JSON.stringify(dateOptions),
+    stockMessage,
+    items: JSON.stringify(items),
+    salutation,
+  };
+};
+Story4.story = {
+  name: 'All knobs',
+  parameters: {
+    server: { id: 'addons/knobs/story4' },
+  },
+};
+
+export const Story5 = () => {
+  const content = text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
+  return { content };
+};
+Story5.story = {
+  name: 'XSS safety',
+  parameters: {
+    server: { id: 'addons/knobs/story5' },
+  },
+};

examples/server-kitchen-sink/client/stories/addon-notes.stories.js

@@ -0,0 +1,12 @@
+export default {
+  title: 'Addons/Notes',
+};
+
+export const Story1 = () => {};
+Story1.story = {
+  name: 'Simple note',
+  parameters: {
+    notes: 'My notes on some bold text',
+    server: { id: 'addons/notes/story1' },
+  },
+};

examples/server-kitchen-sink/client/stories/demo.stories.js

@@ -0,0 +1,36 @@
+export default {
+  title: 'Demo',
+  parameters: {
+    componentSubtitle: 'Handy status label',
+  },
+};
+
+export const Heading = () => {};
+Heading.story = {
+  parameters: {
+    server: { id: 'demo/heading' },
+  },
+};
+
+export const Headings = () => {};
+Headings.story = {
+  parameters: {
+    server: { id: 'demo/headings' },
+  },
+};
+
+export const Button = () => {};
+Button.story = {
+  parameters: {
+    docs: { component: 'hi there docs' },
+    server: { id: 'demo/button' },
+  },
+};
+export const Params = () => {
+  return { message: 'Hi World!' };
+};
+Params.story = {
+  parameters: {
+    server: { id: 'demo/params' },
+  },
+};

examples/server-kitchen-sink/client/stories/welcome.stories.js

@@ -0,0 +1,13 @@
+import { withLinks } from '@storybook/addon-links';
+
+export default {
+  title: 'Welcome',
+  decorators: [withLinks],
+};
+
+export const Welcome = () => {};
+Welcome.story = {
+  parameters: {
+    server: { id: 'welcome/welcome' },
+  },
+};

examples/server-kitchen-sink/client/storybook.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title></title>
+    <style>
+      h1 { color: #639; }
+    </style>
   </head>
   <body>
     <div id="root"></div>

examples/server-kitchen-sink/client/storybook.js

@@ -1,19 +1,37 @@
-import camelcase from 'camelcase';
-import { configure } from '@storybook/server';
+import { configure, addParameters } from '@storybook/server';
 
-import stories from './storybook.stories';
+import * as a11yStories from './stories/addon-a11y.stories';
+import * as actionsStories from './stories/addon-actions.stories';
+import * as backgroundStories from './stories/addon-backgrounds.stories';
+import * as knobsStories from './stories/addon-knobs.stories';
+import * as notesStories from './stories/addon-notes.stories';
+import * as welcomeStories from './stories/welcome.stories';
+import * as demoStories from './stories/demo.stories';
 
 const port = process.env.PORT || 8080;
 
-const fetchHtml = async (id, params) => {
-  const [component, story] = id.split('--').map(s => camelcase(s));
+addParameters({ server: { url: `http://localhost:${port}/storybook_preview` } });
 
-  const url = new URL(`http://localhost:${port}/storybook_preview/${component}/${story}`);
-  url.search = new URLSearchParams(params).toString();
+const fetchHtml = async (url, id, params) => {
+  const fetchUrl = new URL(`${url}/${id}`);
+  fetchUrl.search = new URLSearchParams(params).toString();
 
-  // eslint-disable-next-line no-undef
-  const response = await fetch(url);
+  const response = await fetch(fetchUrl);
   return response.text();
 };
 
-configure(() => stories, module, { fetchStoryHtml: fetchHtml });
+configure(
+  () => [
+    a11yStories,
+    actionsStories,
+    backgroundStories,
+    knobsStories,
+    notesStories,
+    welcomeStories,
+    demoStories,
+  ],
+  module,
+  {
+    fetchStoryHtml: fetchHtml,
+  }
+);

examples/server-kitchen-sink/client/storybook.stories.js

@@ -1,33 +0,0 @@
-import { text, withKnobs } from '@storybook/addon-knobs';
-import { titleCase } from 'title-case';
-
-import stories from '../server/stories';
-
-const storyBookStories = Object.keys(stories).map(component => {
-  const storybookDescription = {
-    default: {
-      title: component,
-      decorators: [withKnobs],
-    },
-  };
-  const componentStories = stories[component];
-  Object.keys(componentStories).forEach(storyName => {
-    const componentStory = componentStories[storyName];
-
-    storybookDescription[storyName] = () => {
-      // Build the list of knobs from the stroy arguments. Assume that all arguments are text.
-      // More sophisticated server backends could have DSLs to provide other types.
-      const knobs = {};
-      Object.keys(componentStory).forEach(argument => {
-        const name = titleCase(argument);
-        const defaultValue = componentStory[argument];
-        knobs[argument] = text(name, defaultValue);
-      });
-      return knobs;
-    };
-  });
-
-  return storybookDescription;
-});
-
-export default storyBookStories;

examples/server-kitchen-sink/package.json

@@ -1,20 +1,27 @@
 {
   "name": "server-kitchen-sink",
-  "version": "0.0.0",
+  "version": "5.3.0-rc.4",
   "private": true,
   "scripts": {
     "dev": "PORT=1337 nodemon server/app.js",
     "start": "PORT=1337 node server/app.js"
   },
+  "dependencies": {
+    "pug": "^2.0.4"
+  },
   "devDependencies": {
-    "@storybook/addon-knobs": "5.3.0-rc.3",
-    "@storybook/server": "5.3.0-rc.3",
-    "camelcase": "^5.3.1",
-    "concurrently": "^5.0.0",
+    "@storybook/addon-a11y": "5.3.0-rc.4",
+    "@storybook/addon-actions": "5.3.0-rc.4",
+    "@storybook/addon-backgrounds": "5.3.0-rc.4",
+    "@storybook/addon-centered": "5.3.0-rc.4",
+    "@storybook/addon-knobs": "5.3.0-rc.4",
+    "@storybook/addon-links": "5.3.0-rc.4",
+    "@storybook/addon-notes": "5.3.0-rc.4",
+    "@storybook/csf": "0.0.1",
+    "@storybook/server": "5.3.0-rc.4",
     "express": "~4.16.4",
     "morgan": "^1.9.1",
     "nodemon": "^2.0.2",
-    "parcel-bundler": "^1.12.4",
-    "title-case": "^3.0.2"
+    "parcel-bundler": "^1.12.4"
   }
 }

examples/server-kitchen-sink/server/app.js

@@ -3,18 +3,18 @@ const morgan = require('morgan');
 const Bundler = require('parcel-bundler');
 const Path = require('path');
 
-const renderStory = require('./renderStory');
-
 const port = process.env.PORT || 8080;
 
 const app = express();
 
-app.use(morgan('tiny'));
+app.use(morgan('dev'));
+app.set('views', Path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
 
 app.get('/', (req, res) => res.send('Hello World!'));
 
-app.get('/storybook_preview/:component/:story', (req, res) => {
-  res.send(renderStory(req.params.component, req.params.story, req.query));
+app.get(/storybook_preview\/(.*)/, (req, res) => {
+  res.render(req.params[0], req.query);
 });
 
 const storybookFile = Path.join(__dirname, '../client/storybook.html');

examples/server-kitchen-sink/server/renderStory.js

@@ -1,11 +0,0 @@
-const stories = require('./stories');
-const templates = require('./templates');
-
-const renderStory = (component, story, params) => {
-  const template = templates[component];
-  const defaultParams = stories[component][story];
-
-  return template({ ...defaultParams, ...params });
-};
-
-module.exports = renderStory;

examples/server-kitchen-sink/server/stories.js

@@ -1,12 +0,0 @@
-module.exports = {
-  button: {
-    withShortText: { text: 'OK' },
-    withLongText: { text: 'Push Me Please!' },
-    withReallyLongText: { text: 'Push Me Please! You know you want to!!' },
-  },
-  message: {
-    hello: { message: 'Hello World!', color: 'black' },
-    red: { message: 'Hello World!', color: 'red' },
-    goodbye: { message: 'Bye!', color: 'green' },
-  },
-};

examples/server-kitchen-sink/server/templates.js

@@ -1,4 +0,0 @@
-module.exports = {
-  button: params => `<button>${params.text}</button>`,
-  message: params => `<div style="color: ${params.color}">${params.message}</div>`,
-};

examples/server-kitchen-sink/server/views/addons/a11y/contrast.pug

@@ -0,0 +1 @@
+button(style='color: black; background-color: brown;') Testing the a11y addon

examples/server-kitchen-sink/server/views/addons/a11y/default.pug

@@ -0,0 +1 @@
+button

examples/server-kitchen-sink/server/views/addons/a11y/disabled.pug

@@ -0,0 +1 @@
+button(disabled) Testing the a11y addon

examples/server-kitchen-sink/server/views/addons/a11y/label.pug

@@ -0,0 +1 @@
+button Testing the a11y addon

examples/server-kitchen-sink/server/views/addons/actions/button.pug

@@ -0,0 +1 @@
+button(type="button") Hello World

examples/server-kitchen-sink/server/views/addons/actions/story1.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story2.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story3.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story4.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story5.pug

@@ -0,0 +1,3 @@
+div
+  | Clicks on this button will be logged:
+  button(class="btn" type="button") Button

examples/server-kitchen-sink/server/views/addons/actions/story6.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story7.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/actions/story8.pug

@@ -0,0 +1 @@
+include button.pug

examples/server-kitchen-sink/server/views/addons/backgrounds/story1.pug

@@ -0,0 +1 @@
+span(style="color: white") You should be able to switch backgrounds for this story

examples/server-kitchen-sink/server/views/addons/backgrounds/story2.pug

@@ -0,0 +1 @@
+span(style="color: white") This one too!

examples/server-kitchen-sink/server/views/addons/knobs/simple.pug

@@ -0,0 +1 @@
+div= content

examples/server-kitchen-sink/server/views/addons/knobs/story3.pug

@@ -0,0 +1 @@
+p(style=`transition: color 0.5s ease-out; color: ${textColor}`)= name

examples/server-kitchen-sink/server/views/addons/knobs/story4.pug

@@ -0,0 +1,13 @@
+- today = new Date(parseInt(today, 10));
+- dateOptions = JSON.parse(dateOptions);
+- items = JSON.parse(items);
+
+div(style='#{style}')
+  h1 My name is #{name},
+  h3 today is #{today.toLocaleDateString('en-US', dateOptions)}
+  p !{stockMessage}
+  p Also, I have:
+  ul 
+    each item in items
+      li= item
+  p #{salutation}

examples/server-kitchen-sink/server/views/addons/knobs/story5.pug

@@ -0,0 +1 @@
+ !{content}

examples/server-kitchen-sink/server/views/addons/notes/story1.pug

@@ -0,0 +1,2 @@
+p
+  strong This is a fragment of HTML

examples/server-kitchen-sink/server/views/demo/button.pug

@@ -0,0 +1 @@
+button Hello Button

examples/server-kitchen-sink/server/views/demo/heading.pug

@@ -0,0 +1 @@
+h1 Hello World

examples/server-kitchen-sink/server/views/demo/headings.pug

@@ -0,0 +1,4 @@
+h1 Hellow World
+h2 Hellow World
+h3 Hellow World
+h4 Hellow World

examples/server-kitchen-sink/server/views/demo/params.pug

@@ -0,0 +1 @@
+h1= message 

examples/server-kitchen-sink/server/views/welcome/welcome.pug

@@ -0,0 +1,36 @@
+.main
+  h1 Welcome to Storybook for Server
+  p This is a UI component dev environment for your plain HTML snippets.
+  p.
+    We've added some basic stories inside the #[code.code stories] directory.
+    #[br]
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    #[br]
+    (Basically a story is like a visual test case.)
+  p.
+    See these sample #[a.link(href='#' data-sb-kind='Demo Card' data-sb-story='Front') stories]
+  p.
+    Just like that, you can add your own snippets as stories.
+    #[br]
+    You can also edit those snippets and see changes right away.
+    #[br]
+  p.
+    Usually we create stories with smaller UI components in the app.
+    #[br]
+    Have a look at the #[a.link(href='https://storybook.js.org/basics/writing-stories' target='_blank') Writing Stories] section in our documentation.
+style.
+  .main {
+    padding: 15px;
+    line-height: 1.4;
+    font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+    background-color: #ffffff;
+  }
+  .code {
+    font-size: 15px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border: 1px solid #eae9e9;
+    border-radius: 4px;
+    background-color: #f3f2f2;
+    color: #3a3a3a;
+  }

yarn.lock

@@ -25034,7 +25034,7 @@ pug-walk@^1.1.8:
   resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.8.tgz#b408f67f27912f8c21da2f45b7230c4bd2a5ea7a"
   integrity sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==
 
-pug@^2.0.3:
+pug@^2.0.3, pug@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
   integrity sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==
@@ -30466,13 +30466,6 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
-title-case@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/title-case/-/title-case-3.0.2.tgz#9f926a0a42071366f85470572f312c4b647773ab"
-  integrity sha512-1P5hyjEhJ9Ab0AT8Xbm0z1avwPSgRR6XtFSNCdfo6B7111TTTja+456UZ2ZPkbTbzqBwIpQxp/tazh5UvpJ+fA==
-  dependencies:
-    tslib "^1.10.0"
-
 tmp@0.0.28:
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
@@ -30878,7 +30871,7 @@ tsconfig-paths@^3.4.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@1.10.0, tslib@^1.10.0, tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@1.10.0, tslib@^1.7.1, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==