storybookjs · mucsi96 · Dec 12, 2018 · Dec 12, 2018 · Dec 13, 2018 · Dec 16, 2018
diff --git a/examples/cra-ts-kitchen-sink/.env b/examples/cra-ts-kitchen-sink/.env
@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+NODE_PATH=src
diff --git a/examples/cra-ts-kitchen-sink/.storybook/addons.js b/examples/cra-ts-kitchen-sink/.storybook/addons.js
@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-options/register';
diff --git a/examples/cra-ts-kitchen-sink/.storybook/config.js b/examples/cra-ts-kitchen-sink/.storybook/config.js
@@ -0,0 +1,19 @@
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
+import { withInfo } from '@storybook/addon-info';
+
+addDecorator(
+  withOptions({
+    name: 'CRA Kitchen Sink',
+    url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-ts-kitchen-sink',
+  })
+);
+addDecorator(withInfo());
+
+function loadStories() {
+  // automatically import all story js files that end with *.stories.tsx
+  const req = require.context('../src', true, /\.stories\.tsx$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);
diff --git a/examples/cra-ts-kitchen-sink/.storybook/webpack.config.js b/examples/cra-ts-kitchen-sink/.storybook/webpack.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+module.exports = (_baseCnig, _env, config) => ({
+  ...config,
+  module: {
+    rules: [
+      ...config.module.rules,
+      {
+        test: /\.tsx?$/,
+        include: path.resolve(__dirname, '../src'),
+        use: [require.resolve('react-docgen-typescript-loader')],
+      },
+    ],
+  },
+  plugins: [...config.plugins, new ForkTsCheckerWebpackPlugin()],
+});
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "cra-ts-kitchen-sink",
+  "version": "4.2.0-alpha.4",
+  "private": true,
+  "scripts": {
+    "build:storybook": "build-storybook -s public",
+    "start": "start-storybook -p 9010 -s public",
+    "test": "react-scripts test --env=jsdom",
+    "lint": "tslint src/**/*.ts{,x}"
+  },
+  "dependencies": {
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "4.2.0-alpha.4",
+    "@storybook/addon-info": "4.2.0-alpha.4",
+    "@storybook/addon-options": "4.2.0-alpha.4",
+    "@storybook/addons": "4.2.0-alpha.4",
+    "@storybook/react": "4.2.0-alpha.4",
+    "@types/enzyme": "^3.1.15",
+    "@types/react": "^16.7.17",
+    "@types/react-dom": "^16.0.11",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__addon-info": "^3.4.2",
+    "@types/storybook__react": "^4.0.0",
+    "enzyme": "^3.8.0",
+    "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
+    "react-docgen-typescript-loader": "^3.0.0",
+    "react-scripts": "^2.1.0",
+    "tslint": "^5.11.0",
+    "tslint-config-airbnb": "^5.11.1",
+    "fork-ts-checker-webpack-plugin": "^0.5.2",
+    "typescript": "^3.2.2"
+  },
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
+}
diff --git a/examples/cra-ts-kitchen-sink/public/favicon.ico b/examples/cra-ts-kitchen-sink/public/favicon.ico
diff --git a/examples/cra-ts-kitchen-sink/public/index.html b/examples/cra-ts-kitchen-sink/public/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag 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>
+    <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`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Button from './Button';
+
+storiesOf('Button', module).add(
+  'simple button',
+  () => <Button onClick={action('button clicked')}>OK</Button>,
+  {
+    info: { inline: true },
+  },
+);
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.test.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.test.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Button from './Button';
+import { shallow } from 'enzyme';
+
+describe('Button', () => {
+  it('renders', () => {
+    const wrapper = shallow(<Button>OK</Button>);
+    expect(wrapper).toMatchInlineSnapshot(`
+<button
+  type="button"
+>
+  OK
+</button>
+`);
+  });
+
+  it('calls onClick on button click', () => {
+    const handleClick = jest.fn();
+    const wrapper = shallow(<Button onClick={handleClick}>OK</Button>);
+    wrapper.find('button').simulate('click');
+    expect(handleClick).toBeCalled();
+  });
+});
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface Props {
+  /**
+   * Click event handler
+   * @default null
+   */
+  onClick?: () => void;
+}
+
+const Button: React.SFC<Props> = ({ children, onClick }) => (
+  <button type="button" onClick={onClick}>
+    {children}
+  </button>
+);
+
+export default Button;
diff --git a/examples/cra-ts-kitchen-sink/src/react-app-env.d.ts b/examples/cra-ts-kitchen-sink/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/examples/cra-ts-kitchen-sink/src/setupTests.js b/examples/cra-ts-kitchen-sink/src/setupTests.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/examples/cra-ts-kitchen-sink/tsconfig.json b/examples/cra-ts-kitchen-sink/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "lib" : ["esnext", "dom"],
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowJs": true,
+    "skipLibCheck": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/examples/cra-ts-kitchen-sink/tslint.json b/examples/cra-ts-kitchen-sink/tslint.json
@@ -0,0 +1,6 @@
+{
+  "extends": "tslint-config-airbnb",
+  "rules": {
+    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
+  }
+}