Addon essentials

.eslintignore

@@ -15,8 +15,9 @@ scripts/storage
 examples/ember-cli/.storybook/preview-head.html
 examples/official-storybook/tests/addon-jest.test.js
 examples/cra-ts-kitchen-sink/*.json
-examples/cra-ts-kitchen-sink/public/*.json
-examples/cra-ts-kitchen-sink/public/*.html
+examples/cra-ts-kitchen-sink/public/*
+examples/cra-ts-essentials/*.json
+examples/cra-ts-essentials/public/*
 
 !.remarkrc.js
 !.babelrc.js

addons/essentials/README.md

@@ -0,0 +1,54 @@
+# Storybook Essentials
+
+Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
+
+Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) for all of the officially supported frameworks.
+
+## Contents
+
+Storybook essentials includes the following addons. Addons can be disabled and re-configured as [described below](#configuration):
+
+- [Actions](https://github.com/storybookjs/storybook/tree/next/addons/actions)
+- [Backgrounds](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds)
+- [Knobs](https://github.com/storybookjs/storybook/tree/next/addons/knobs)
+- [Links](https://github.com/storybookjs/storybook/tree/next/addons/links)
+- [Viewport](https://github.com/storybookjs/storybook/tree/next/addons/viewport)
+
+## Installation
+
+You can add Essentials to your project with:
+
+```
+npm install --save-dev @storybook/addon-essentials
+```
+
+And then add the following line to your `.storybook/main.js`:
+
+```js
+module.exports = {
+  presets: ['@storybook/addon-essentials'],
+};
+```
+
+## Configuration
+
+Essentials is "zero config." That means that comes with a recommended configuration out of the box.
+
+If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's `package.json` on startup and if detects one of its addons is already installed, it will skip that addon's configuration entirely.
+
+## Disabling addons
+
+Yuu can disable any of Essential's addons using the following configuration scheme in `.storybook/main.js`:
+
+```js
+module.exports = {
+  presets: [{
+    name: '@storybook/addon-essentials'],
+    options: {
+      <addon-key>: false,
+    }
+  }]
+};
+```
+
+Valid addon keys include: `actions`, `backgrounds`, `knobs`, `links`, `viewport`

addons/essentials/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@storybook/addon-essentials",
+  "version": "5.3.0-beta.16",
+  "description": "Curated addons to bring out the best of Storybook",
+  "keywords": [
+    "addon",
+    "essentials",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/essentials",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/essentials"
+  },
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "README.md"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addon-actions": "5.3.0-beta.16",
+    "@storybook/addon-backgrounds": "5.3.0-beta.16",
+    "@storybook/addon-docs": "5.3.0-beta.16",
+    "@storybook/addon-knobs": "5.3.0-beta.16",
+    "@storybook/addon-links": "5.3.0-beta.16",
+    "@storybook/addon-viewport": "5.3.0-beta.16",
+    "@storybook/addons": "5.3.0-beta.16",
+    "@storybook/api": "5.3.0-beta.16",
+    "@storybook/node-logger": "5.3.0-beta.16",
+    "ts-dedent": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.11"
+  },
+  "peerDependencies": {
+    "babel-loader": "^8.0.0",
+    "react": "^16.8.0",
+    "react-is": "^16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

addons/essentials/src/index.ts

@@ -0,0 +1,45 @@
+import fs from 'fs';
+import { logger } from '@storybook/node-logger';
+
+type PresetOptions = {
+  actions?: any;
+  backgrounds?: any;
+  docs?: any;
+  knobs?: any;
+  links?: any;
+  viewport?: any;
+};
+
+let packageJson: any = {};
+if (fs.existsSync('./package.json')) {
+  try {
+    packageJson = JSON.parse(fs.readFileSync('./package.json').toString());
+  } catch (err) {
+    logger.error(`Error reading package.json: ${err.message}`);
+  }
+}
+
+const isInstalled = (addon: string) => {
+  const { dependencies, devDependencies } = packageJson;
+  return (dependencies && dependencies[addon]) || (devDependencies && devDependencies[addon]);
+};
+
+const makeAddon = (key: string) => `@storybook/addon-${key}`;
+
+export function presets(options: PresetOptions = {}) {
+  const presetAddons = ['docs', 'knobs']
+    .filter(key => (options as any)[key] !== false)
+    .map(key => makeAddon(key))
+    .filter(addon => !isInstalled(addon))
+    .map(addon => `${addon}/preset`);
+  return presetAddons;
+}
+
+export function addons(entry: any[] = [], options: PresetOptions = {}) {
+  const registerAddons = ['actions', 'backgrounds', 'links', 'viewport']
+    .filter(key => (options as any)[key] !== false)
+    .map(key => makeAddon(key))
+    .filter(addon => !isInstalled(addon))
+    .map(addon => `${addon}/register`);
+  return [...entry, ...registerAddons];
+}

addons/essentials/src/typings.d.ts

@@ -0,0 +1 @@
+declare module 'fs';

addons/essentials/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env", "jest"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**.test.ts"]
+}

addons/knobs/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

addons/knobs/src/preset/addDecorator.ts

@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/client-api';
+import { withKnobs } from '../index';
+
+addDecorator(withKnobs);

addons/knobs/src/preset/index.ts

@@ -0,0 +1,15 @@
+type KnobsOptions = {
+  addDecorator?: boolean;
+};
+
+export function addons(entry: any[] = [], options: any) {
+  return [...entry, require.resolve('../register')];
+}
+
+export function config(entry: any[] = [], { addDecorator = true }: KnobsOptions = {}) {
+  const knobsConfig = [];
+  if (addDecorator) {
+    knobsConfig.push(require.resolve('./addDecorator'));
+  }
+  return [...entry, ...knobsConfig];
+}

examples/cra-ts-essentials/.storybook/config.ts

@@ -0,0 +1,4 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.(tsx|jsx)
+configure(require.context('../src/stories', true, /\.stories\.[tj]sx?$/), module);

examples/cra-ts-essentials/.storybook/presets.js

@@ -0,0 +1,9 @@
+module.exports = [
+  '@storybook/preset-create-react-app',
+  {
+    name: '@storybook/addon-essentials',
+    options: {
+      backgrounds: false,
+    },
+  },
+];

examples/cra-ts-essentials/README.md

@@ -0,0 +1 @@
+Demonstrate `@storybook/addon-essentials` default configuration with CRA / Typescript.

examples/cra-ts-essentials/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "cra-ts-essentials",
+  "version": "5.3.0-beta.16",
+  "private": true,
+  "scripts": {
+    "build": "react-scripts build",
+    "build-storybook": "build-storybook -s public",
+    "eject": "react-scripts eject",
+    "start": "react-scripts start",
+    "storybook": "start-storybook -p 9009 -s public",
+    "test": "react-scripts test"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "dependencies": {
+    "@types/jest": "24.0.22",
+    "@types/node": "12.12.6",
+    "@types/react": "16.9.11",
+    "@types/react-dom": "16.9.4",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-scripts": "3.2.0",
+    "typescript": "3.7.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "5.3.0-beta.16",
+    "@storybook/addons": "5.3.0-beta.16",
+    "@storybook/preset-create-react-app": "^1.2.0",
+    "@storybook/react": "5.3.0-beta.16"
+  }
+}

examples/cra-ts-essentials/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

examples/cra-ts-essentials/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

examples/cra-ts-essentials/public/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *

examples/cra-ts-essentials/src/App.css

@@ -0,0 +1,22 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #09d3ac;
+}

examples/cra-ts-essentials/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

examples/cra-ts-essentials/src/App.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+const App: React.FC = () => {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;