├── .gitignore ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── circle.yml ├── package.json ├── src ├── declarations.d.ts ├── index.js └── widget.tsx ├── stories └── index.tsx ├── test ├── __snapshots__ │ ├── stories.ts.snap │ ├── sum.ts.snap │ └── ui.tsx.snap ├── stories.ts ├── sum.ts └── ui.tsx ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | *.log 4 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ 2 | 3 | import '@storybook/addon-actions/register'; 4 | import '@storybook/addon-links/register'; 5 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ 2 | 3 | import { configure } from '@storybook/react'; 4 | 5 | function loadStories() { 6 | require('../stories'); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | // load the default config generator. 2 | const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); 3 | 4 | module.exports = (baseConfig, env) => { 5 | const config = genDefaultConfig(baseConfig, env); 6 | 7 | // Extend it as you need. 8 | 9 | // For example, add typescript loader: 10 | config.module.rules.push({ 11 | test: /\.(ts|tsx)$/, 12 | loader: require.resolve('awesome-typescript-loader') 13 | }); 14 | config.resolve.extensions.push('.ts', '.tsx'); 15 | 16 | return config; 17 | }; -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | dependencies: 2 | override: 3 | - yarn install --ignore-scripts 4 | machine: 5 | node: 6 | version: v6.10.2 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "typescript-storyshots", 3 | "version": "1.0.0", 4 | "description": "Sample project using StoryShots, Jest and TypeScript", 5 | "main": "lib/src/index.js", 6 | "typings": "lib/src/index.d.ts", 7 | "scripts": { 8 | "compile": "tsc", 9 | "test": "jest", 10 | "storybook": "start-storybook -p 6006", 11 | "build-storybook": "build-storybook" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/xogeny/typescript-storyshots.git" 16 | }, 17 | "keywords": [ 18 | "Jest", 19 | "TypeScript", 20 | "Storybook", 21 | "StoryShots", 22 | "React" 23 | ], 24 | "author": "Michael M. Tiller", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/xogeny/typescript-storyshots/issues" 28 | }, 29 | "homepage": "https://github.com/xogeny/typescript-storyshots#readme", 30 | "dependencies": { 31 | "react": "^15.6.1" 32 | }, 33 | "devDependencies": { 34 | "@storybook/addon-storyshots": "^3.2.8", 35 | "@storybook/react": "^3.2.8", 36 | "@types/jest": "^20.0.2", 37 | "@types/react": "^15.0.33", 38 | "@types/react-dom": "^15.5.1", 39 | "@types/react-test-renderer": "^15.5.1", 40 | "@types/storybook__react": "^3.0.1", 41 | "awesome-typescript-loader": "^3.2.1", 42 | "jest": "^20.0.4", 43 | "react-dom": "^15.6.1", 44 | "react-test-renderer": "^15.6.1", 45 | "ts-jest": "^20.0.6", 46 | "typescript": "^2.4.1" 47 | }, 48 | "jest": { 49 | "transform": { 50 | "\\.(jsx?|tsx?)$": "/node_modules/ts-jest/preprocessor.js" 51 | }, 52 | "testPathIgnorePatterns": [ 53 | "/node_modules/", 54 | "/lib/" 55 | ], 56 | "testRegex": "(/test/.*|\\.(test|spec))\\.(jsx?|tsx?)$", 57 | "moduleFileExtensions": [ 58 | "ts", 59 | "tsx", 60 | "js", 61 | "jsx", 62 | "json" 63 | ] 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@storybook/addon-storyshots'; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export * from './widget'; -------------------------------------------------------------------------------- /src/widget.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export interface SampleWidgetProps { 4 | name: string; 5 | } 6 | 7 | export class SampleWidget extends React.Component { 8 | render() { 9 | return

Hello {this.props.name}

; 10 | } 11 | } -------------------------------------------------------------------------------- /stories/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { SampleWidget } from '../src'; 3 | 4 | import { storiesOf } from '@storybook/react'; 5 | 6 | storiesOf("TypeScript and Storybook", module) 7 | .add('Sample Widget', () => ); 8 | -------------------------------------------------------------------------------- /test/__snapshots__/stories.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Storyshots TypeScript and Storybook Sample Widget 1`] = ` 4 |
5 |

6 | Hello 7 | Michael 8 |

9 |
10 | `; 11 | -------------------------------------------------------------------------------- /test/__snapshots__/sum.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Snapshot sum 1`] = `6085`; 4 | -------------------------------------------------------------------------------- /test/__snapshots__/ui.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Say my name, say my name... 1`] = ` 4 |
5 |

6 | Hello 7 | Michael 8 |

9 |
10 | `; 11 | -------------------------------------------------------------------------------- /test/stories.ts: -------------------------------------------------------------------------------- 1 | 2 | import initStoryshots from '@storybook/addon-storyshots'; 3 | initStoryshots(); -------------------------------------------------------------------------------- /test/sum.ts: -------------------------------------------------------------------------------- 1 | test("Simple sum", () => { 2 | expect(3 + 5).toBe(8); 3 | }) 4 | 5 | test("Snapshot sum", () => { 6 | // I'm too lazy to figure out what this should equal... 7 | expect(3492 + 2593).toMatchSnapshot(); 8 | }) -------------------------------------------------------------------------------- /test/ui.tsx: -------------------------------------------------------------------------------- 1 | import React = require('react'); 2 | import { create } from 'react-test-renderer'; 3 | import { SampleWidget } from '../src'; 4 | 5 | test("Say my name, say my name...", () => { 6 | const tree1 = create( 7 | 8 | ).toJSON(); 9 | expect(tree1).toMatchSnapshot(); 10 | }) -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation: */ 7 | "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 12 | //"outFile": "./lib", /* Concatenate and emit output to single file. */ 13 | "outDir": "./lib", /* Redirect output structure to the directory. */ 14 | "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 15 | // "removeComments": true, /* Do not emit comments to output. */ 16 | // "noEmit": true, /* Do not emit outputs. */ 17 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 18 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 19 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 20 | /* Strict Type-Checking Options */ 21 | "strict": true, /* Enable all strict type-checking options. */ 22 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 23 | // "strictNullChecks": true, /* Enable strict null checks. */ 24 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 25 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 26 | /* Additional Checks */ 27 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 28 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 29 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 30 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 31 | /* Module Resolution Options */ 32 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 33 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 34 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 35 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 36 | // "typeRoots": [], /* List of folders to include type definitions from. */ 37 | // "types": [], /* Type declaration files to be included in compilation. */ 38 | "allowSyntheticDefaultImports": false /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 39 | /* Source Map Options */ 40 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 41 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 42 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 43 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 44 | /* Experimental Options */ 45 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 46 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 47 | } 48 | } --------------------------------------------------------------------------------