From 010917a05e70216e13902aa255ee247c3e1ffdfa Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Fri, 4 Jan 2019 12:16:14 +0100 Subject: move storybook to root + typescript TODO: fix modules --- .storybook/addons.ts | 2 + .storybook/config.ts | 15 ++ .storybook/preview-head.html | 7 + .storybook/webpack.config.js | 17 ++ .storybook/withTheme/index.tsx | 59 +++++ package-lock.json | 258 +++++++++++++++++++++ package.json | 11 +- packages/forms/.storybook/addons.js | 2 - packages/forms/.storybook/config.js | 15 -- packages/forms/.storybook/preview-head.html | 7 - packages/forms/.storybook/theme/index.js | 58 ----- packages/forms/misty.yml | 2 - packages/forms/package.json | 4 +- .../forms/src/typings/react-html-attributes.d.ts | 1 - packages/forms/stories/input.stories.js | 95 -------- packages/forms/typings/react-html-attributes.d.ts | 1 + packages/theme/src/index.ts | 6 +- packages/theme/yarn.lock | 258 --------------------- stories/input.stories.tsx | 97 ++++++++ tsconfig.json | 4 +- tsconfig.settings.json | 2 +- tsconfig.storybook.json | 7 + typings/react-html-attributes.d.ts | 1 + typings/storybook__addons.d.ts | 1 + 24 files changed, 483 insertions(+), 447 deletions(-) create mode 100644 .storybook/addons.ts create mode 100644 .storybook/config.ts create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/webpack.config.js create mode 100644 .storybook/withTheme/index.tsx delete mode 100644 packages/forms/.storybook/addons.js delete mode 100644 packages/forms/.storybook/config.js delete mode 100644 packages/forms/.storybook/preview-head.html delete mode 100644 packages/forms/.storybook/theme/index.js delete mode 100644 packages/forms/misty.yml delete mode 100644 packages/forms/src/typings/react-html-attributes.d.ts delete mode 100644 packages/forms/stories/input.stories.js create mode 100644 packages/forms/typings/react-html-attributes.d.ts delete mode 100644 packages/theme/yarn.lock create mode 100644 stories/input.stories.tsx create mode 100644 tsconfig.storybook.json create mode 100644 typings/react-html-attributes.d.ts create mode 100644 typings/storybook__addons.d.ts diff --git a/.storybook/addons.ts b/.storybook/addons.ts new file mode 100644 index 000000000..6aed412d0 --- /dev/null +++ b/.storybook/addons.ts @@ -0,0 +1,2 @@ +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; diff --git a/.storybook/config.ts b/.storybook/config.ts new file mode 100644 index 000000000..d1f3d3053 --- /dev/null +++ b/.storybook/config.ts @@ -0,0 +1,15 @@ +import { configure, addDecorator } from '@storybook/react'; +import { withInfo } from '@storybook/addon-info'; +import withTheme from '../.storybook/withTheme'; + +// automatically import all files ending in *.stories.js +const req = require.context('../stories', true, /.stories.tsx$/); + +addDecorator(withInfo()); +addDecorator(withTheme()); + +function loadStories() { + req.keys().forEach(filename => req(filename)); +} + +configure(loadStories, module); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..f5bf78b7a --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,7 @@ + + diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 000000000..e542f1387 --- /dev/null +++ b/.storybook/webpack.config.js @@ -0,0 +1,17 @@ +const path = require('path'); + +module.exports = (baseConfig, env, config) => { + config.module.rules.push({ + test: /\.(ts|tsx)$/, + use: [{ + loader: require.resolve('awesome-typescript-loader'), + options: { + configFileName: path.join(__dirname, '..', 'tsconfig.storybook.json'), + } + }, { + loader: require.resolve('react-docgen-typescript-loader'), + }] + }); + config.resolve.extensions.push('.ts', '.tsx'); + return config; +}; diff --git a/.storybook/withTheme/index.tsx b/.storybook/withTheme/index.tsx new file mode 100644 index 000000000..b357aa658 --- /dev/null +++ b/.storybook/withTheme/index.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Classes } from 'jss'; +import injectSheet, { ThemeProvider } from 'react-jss'; +import addons, { makeDecorator } from '@storybook/addons'; +import theme, { Theme, ThemeType } from '../../packages/theme/src'; + +const defaultTheme = { + name: 'Default', + variables: theme(ThemeType.default), +}; + +const darkTheme = { + name: 'Dark Mode', + variables: theme(ThemeType.dark), +}; + +const themes = [defaultTheme, darkTheme]; + +const styles = (theme: Theme) => ({ + title: { + fontSize: 14, + }, + container: { + border: theme.inputBorder, + borderRadius: theme.borderRadiusSmall, + marginBottom: 20, + padding: 20, + background: theme.colorContentBackground, + }, +}); + +const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => ( +
+

{name}

+
+ {story} +
+
+)); + +export default makeDecorator({ + name: 'withTheme', + parameterName: 'theme', + // This means don't run this decorator if the notes decorator is not set + // skipIfNoParametersOrOptions: true, + wrapper: (getStory: Function, context: any, { options }: any) => { + const channel = addons.getChannel(); + + return ( + <> + {themes.map(theme => ( + + + + ))} + + ); + } +}) diff --git a/package-lock.json b/package-lock.json index 4c05e19dc..78db99768 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4611,6 +4611,40 @@ "csstype": "^2.0.0" } }, + "@types/storybook__addon-actions": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@types/storybook__addon-actions/-/storybook__addon-actions-3.4.1.tgz", + "integrity": "sha512-An8pNb1/7QhkdOT8Ht5WjJsSxAh2mWti/J4eILwUHpXVZ1j3xlVaOzwTbg8twN4DjgOAggjEDOj6Bx8YOWh9Pg==", + "dev": true + }, + "@types/storybook__addon-info": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/@types/storybook__addon-info/-/storybook__addon-info-3.4.2.tgz", + "integrity": "sha512-1af9u42JAMbi54MOkfzZt2+RTbUnpVJCN6vkkcAEtlyML4tXpmW482d3TZNiYPk3ePHKkielNZUtfpijT/XJ+A==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, + "@types/storybook__addon-options": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/storybook__addon-options/-/storybook__addon-options-4.0.0.tgz", + "integrity": "sha512-toMfmqTdbh65jafemsy2+dVWjt3wjgHxbJF6V0jhfsyeZckc/1VYtjMqQZdR4vlFT+nBcOKQYt7+kw2nqYF91Q==", + "dev": true, + "requires": { + "@types/storybook__react": "*" + } + }, + "@types/storybook__react": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/storybook__react/-/storybook__react-4.0.0.tgz", + "integrity": "sha512-Iq3RX953fqZRwWN3jywm8pUx1/Atev+x/9tF7/2CNA+Ii55sGSJJRWMRthUKQXTa3zOexcvfksfVYdUaIZY91w==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/webpack-env": "*" + } + }, "@types/theming": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/theming/-/theming-1.3.2.tgz", @@ -4647,6 +4681,12 @@ "@types/unist": "*" } }, + "@types/webpack-env": { + "version": "1.13.6", + "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz", + "integrity": "sha512-5Th3OsZ4gTRdr9Mho83BQ23cex4sRhOR4XTG+m+cJc0FhtUBK9Vn62hBJ+pnQYnSxoPOsKoAPOx6FcphxBC8ng==", + "dev": true + }, "@webassemblyjs/ast": { "version": "1.7.11", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", @@ -4819,6 +4859,102 @@ "@xtuc/long": "4.2.1" } }, + "@webpack-contrib/schema-utils": { + "version": "1.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz", + "integrity": "sha512-LonryJP+FxQQHsjGBi6W786TQB1Oym+agTpY0c+Kj8alnIw+DLUJb6SI8Y1GHGhLCH1yPRrucjObUmxNICQ1pg==", + "dev": true, + "requires": { + "ajv": "^6.1.0", + "ajv-keywords": "^3.1.0", + "chalk": "^2.3.2", + "strip-ansi": "^4.0.0", + "text-table": "^0.2.0", + "webpack-log": "^1.1.2" + }, + "dependencies": { + "ajv": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.6.2.tgz", + "integrity": "sha512-FBHEW6Jf5TB9MGBgUUA9XHkTbjXYfAUjY43ACMfmdMRHniyoMHjHjzD50OK8LGDWQwp4rWEsIq5kEqq7rvIM1g==", + "dev": true, + "requires": { + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "dev": true + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "fast-deep-equal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "webpack-log": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz", + "integrity": "sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==", + "dev": true, + "requires": { + "chalk": "^2.1.0", + "log-symbols": "^2.1.0", + "loglevelnext": "^1.0.1", + "uuid": "^3.1.0" + } + } + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -5613,6 +5749,65 @@ } } }, + "awesome-typescript-loader": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz", + "integrity": "sha512-slv66OAJB8orL+UUaTI3pKlLorwIvS4ARZzYR9iJJyGsEgOqueMfOMdKySWzZ73vIkEe3fcwFgsKMg4d8zyb1g==", + "dev": true, + "requires": { + "chalk": "^2.4.1", + "enhanced-resolve": "^4.0.0", + "loader-utils": "^1.1.0", + "lodash": "^4.17.5", + "micromatch": "^3.1.9", + "mkdirp": "^0.5.1", + "source-map-support": "^0.5.3", + "webpack-log": "^1.2.0" + }, + "dependencies": { + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", + "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "webpack-log": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-1.2.0.tgz", + "integrity": "sha512-U9AnICnu50HXtiqiDxuli5gLB5PGBo7VvcHx36jRZHwK4vzOYLbImqT4lwWwoMHdQWwEKw736fCHEekokTEKHA==", + "dev": true, + "requires": { + "chalk": "^2.1.0", + "log-symbols": "^2.1.0", + "loglevelnext": "^1.0.1", + "uuid": "^3.1.0" + } + } + } + }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -16329,6 +16524,16 @@ } } }, + "loglevelnext": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/loglevelnext/-/loglevelnext-1.0.5.tgz", + "integrity": "sha512-V/73qkPuJmx4BcBF19xPBr+0ZRVBhc4POxvZTZdMeXpJ4NItXSJ/MSwuFT0kQJlCbXvdlZoQQ/418bS1y9Jh6A==", + "dev": true, + "requires": { + "es6-symbol": "^3.1.1", + "object.assign": "^4.1.0" + } + }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -19485,6 +19690,59 @@ } } }, + "react-docgen-typescript": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-1.12.2.tgz", + "integrity": "sha512-pcot0jGiMIyhmwNeSU83GvClNwk9NbcnYHcGf4pKMmw5J43d5OzYRcTzrZTGlIOWjYfYazYhvTxjujE625P3Mw==", + "dev": true + }, + "react-docgen-typescript-loader": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.0.0.tgz", + "integrity": "sha512-xtE4bZrU9+7grFFzs8v6gWc+Wl2FCCL59hldHoX2DuQAXOmJIilUm2uPmDmRNA8RpxU1Ax+9Gl0JfUcWgx2QPA==", + "dev": true, + "requires": { + "@webpack-contrib/schema-utils": "^1.0.0-beta.0", + "loader-utils": "^1.1.0", + "react-docgen-typescript": "^1.9.0" + } + }, + "react-docgen-typescript-webpack-plugin": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-docgen-typescript-webpack-plugin/-/react-docgen-typescript-webpack-plugin-1.1.0.tgz", + "integrity": "sha1-S/uMMxL85IcIOSSELPA/Zhd6ud8=", + "dev": true, + "requires": { + "ajv": "^6.1.1", + "react-docgen-typescript": "^1.2.3" + }, + "dependencies": { + "ajv": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.6.2.tgz", + "integrity": "sha512-FBHEW6Jf5TB9MGBgUUA9XHkTbjXYfAUjY43ACMfmdMRHniyoMHjHjzD50OK8LGDWQwp4rWEsIq5kEqq7rvIM1g==", + "dev": true, + "requires": { + "fast-deep-equal": "^2.0.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "fast-deep-equal": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", + "dev": true + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + } + } + }, "react-dom": { "version": "16.6.3", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz", diff --git a/package.json b/package.json index 8df268022..8b79a2cc2 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "commit": "git-cz", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s", "reformat-files": "./node_modules/.bin/prettier --ignore-path .eslintignore --write --require-pragma \"**/*.{js,jsx,scss}\"", - "packages": "npx lerna publish --no-git-tag-version" + "packages": "npx lerna publish --no-git-tag-version", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "keywords": [], "author": "Stefan Malzner ", @@ -109,6 +111,11 @@ "@types/lodash": "^4.14.119", "@types/react": "^16.7.18", "@types/react-jss": "^8.6.0", + "@types/storybook__addon-actions": "3.4.1", + "@types/storybook__addon-info": "3.4.2", + "@types/storybook__addon-options": "4.0.0", + "@types/storybook__react": "4.0.0", + "awesome-typescript-loader": "5.2.1", "babel-eslint": "10.0.1", "babel-loader": "^8.0.4", "cross-env": "^5.0.5", @@ -137,6 +144,8 @@ "mocha": "5.2.0", "node-sass": "^4.7.2", "prettier": "1.15.2", + "react-docgen-typescript-loader": "3.0.0", + "react-docgen-typescript-webpack-plugin": "1.1.0", "storybook-addon-jss-theme": "^1.0.2", "ts-loader": "5.3.2", "tslint": "5.12.0", diff --git a/packages/forms/.storybook/addons.js b/packages/forms/.storybook/addons.js deleted file mode 100644 index 6aed412d0..000000000 --- a/packages/forms/.storybook/addons.js +++ /dev/null @@ -1,2 +0,0 @@ -import '@storybook/addon-actions/register'; -import '@storybook/addon-links/register'; diff --git a/packages/forms/.storybook/config.js b/packages/forms/.storybook/config.js deleted file mode 100644 index d6a69e569..000000000 --- a/packages/forms/.storybook/config.js +++ /dev/null @@ -1,15 +0,0 @@ -import { configure, addDecorator } from '@storybook/react'; -import { withInfo } from '@storybook/addon-info'; -import withTheme from '../.storybook/theme'; - -// automatically import all files ending in *.stories.js -const req = require.context('../stories', true, /.stories.js$/); - -addDecorator(withInfo()); -addDecorator(withTheme()); - -function loadStories() { - req.keys().forEach(filename => req(filename)); -} - -configure(loadStories, module); diff --git a/packages/forms/.storybook/preview-head.html b/packages/forms/.storybook/preview-head.html deleted file mode 100644 index f5bf78b7a..000000000 --- a/packages/forms/.storybook/preview-head.html +++ /dev/null @@ -1,7 +0,0 @@ - - diff --git a/packages/forms/.storybook/theme/index.js b/packages/forms/.storybook/theme/index.js deleted file mode 100644 index f016f21eb..000000000 --- a/packages/forms/.storybook/theme/index.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import injectSheet, { ThemeProvider } from 'react-jss'; -import addons, { makeDecorator } from '@storybook/addons'; -import theme from '@meetfranz/theme'; - -const defaultTheme = { - name: 'Default', - variables: theme('default'), -}; - -const darkTheme = { - name: 'Dark Mode', - variables: theme('dark'), -}; - -const themes = [defaultTheme, darkTheme]; - -const styles = (theme) => ({ - title: { - fontSize: 14, - }, - container: { - border: theme.inputBorder, - borderRadius: theme.borderRadiusSmall, - marginBottom: 20, - padding: 20, - background: theme.colorContentBackground, - }, -}); - -const Container = injectSheet(styles)(({ name, classes, story }) => ( -
-

{name}

-
- {story} -
-
-)); - -export default makeDecorator({ - name: 'withTheme', - parameterName: 'theme', - // This means don't run this decorator if the notes decorator is not set - // skipIfNoParametersOrOptions: true, - wrapper: (getStory, context, { options }) => { - const channel = addons.getChannel(); - - return ( - <> - {themes.map(theme => ( - - - - ))} - - ); - } -}) diff --git a/packages/forms/misty.yml b/packages/forms/misty.yml deleted file mode 100644 index b34a861a7..000000000 --- a/packages/forms/misty.yml +++ /dev/null @@ -1,2 +0,0 @@ -forms: - cmd: diff --git a/packages/forms/package.json b/packages/forms/package.json index c75c11195..d7d88e7b6 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -5,9 +5,7 @@ "main": "lib/index.js", "scripts": { "dev": "tsc -w", - "prepare": "tsc", - "storybook": "start-storybook -p 6006", - "build-storybook": "build-storybook" + "prepare": "tsc" }, "publishConfig": { "access": "public" diff --git a/packages/forms/src/typings/react-html-attributes.d.ts b/packages/forms/src/typings/react-html-attributes.d.ts deleted file mode 100644 index 6f8f20fe4..000000000 --- a/packages/forms/src/typings/react-html-attributes.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'react-html-attributes'; diff --git a/packages/forms/stories/input.stories.js b/packages/forms/stories/input.stories.js deleted file mode 100644 index 2cc784209..000000000 --- a/packages/forms/stories/input.stories.js +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react'; - -import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; - -import { Input } from '../lib'; - -const defaultProps = { - label: 'Label', - id: 'test1', - name: 'test1', - onChange: action('changed'), - focus: true, -}; - -const defaultPasswordProps = { - label: 'Password', - type: 'password', - id: 'test1', - name: 'test1', - onChange: action('changed'), - focus: true, -}; - -storiesOf('Input', module) - .add('Basic', () => ( - - )) - .add('Without Label', () => ( - - )) - .add('Disabled', () => ( - - )) - .add('With prefix', () => ( - - )) - .add('With suffix', () => ( - - )) - .add('With pre-/suffix', () => ( - - )) - .add('With error', () => ( - - )); - -storiesOf('Password', module) - // .addDecorator(withThemesProvider(themes)) - .add('Basic', () => ( - - )) - .add('Show password toggle', () => ( - - )) - .add('Score password', () => ( - - )) - .add('Score password with error', () => ( - - )); diff --git a/packages/forms/typings/react-html-attributes.d.ts b/packages/forms/typings/react-html-attributes.d.ts new file mode 100644 index 000000000..6f8f20fe4 --- /dev/null +++ b/packages/forms/typings/react-html-attributes.d.ts @@ -0,0 +1 @@ +declare module 'react-html-attributes'; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index 35dad298c..ce077e817 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -1,4 +1,4 @@ -enum Themes { +export enum ThemeType { default = 'default', dark = 'dark', } @@ -6,8 +6,8 @@ enum Themes { import * as darkThemeConfig from './themes/dark'; import * as defaultThemeConfig from './themes/default'; -export default (themeId: Themes) => { - if (themeId === Themes.dark) { +export default (themeId: ThemeType) => { + if (themeId === ThemeType.dark) { return Object.assign({}, defaultThemeConfig, darkThemeConfig); } diff --git a/packages/theme/yarn.lock b/packages/theme/yarn.lock deleted file mode 100644 index f652784e2..000000000 --- a/packages/theme/yarn.lock +++ /dev/null @@ -1,258 +0,0 @@ -# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -# yarn lockfile v1 - - -"@babel/code-frame@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8" - integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA== - dependencies: - "@babel/highlight" "^7.0.0" - -"@babel/core@^7.2.2": - version "7.2.2" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.2.2.tgz#07adba6dde27bb5ad8d8672f15fde3e08184a687" - integrity sha512-59vB0RWt09cAct5EIe58+NzGP4TFSD3Bz//2/ELy3ZeTeKF6VTD1AXlH8BGGbCX0PuobZBsIzO7IAI9PH67eKw== - dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.2.2" - "@babel/helpers" "^7.2.0" - "@babel/parser" "^7.2.2" - "@babel/template" "^7.2.2" - "@babel/traverse" "^7.2.2" - "@babel/types" "^7.2.2" - convert-source-map "^1.1.0" - debug "^4.1.0" - json5 "^2.1.0" - lodash "^4.17.10" - resolve "^1.3.2" - semver "^5.4.1" - source-map "^0.5.0" - -"@babel/generator@^7.2.2": - version "7.2.2" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.2.2.tgz#18c816c70962640eab42fe8cae5f3947a5c65ccc" - integrity sha512-I4o675J/iS8k+P38dvJ3IBGqObLXyQLTxtrR4u9cSUJOURvafeEWb/pFMOTwtNrmq73mJzyF6ueTbO1BtN0Zeg== - dependencies: - "@babel/types" "^7.2.2" - jsesc "^2.5.1" - lodash "^4.17.10" - source-map "^0.5.0" - trim-right "^1.0.1" - -"@babel/helper-function-name@^7.1.0": - version "7.1.0" - resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53" - integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw== - dependencies: - "@babel/helper-get-function-arity" "^7.0.0" - "@babel/template" "^7.1.0" - "@babel/types" "^7.0.0" - -"@babel/helper-get-function-arity@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3" - integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ== - dependencies: - "@babel/types" "^7.0.0" - -"@babel/helper-split-export-declaration@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813" - integrity sha512-MXkOJqva62dfC0w85mEf/LucPPS/1+04nmmRMPEBUB++hiiThQ2zPtX/mEWQ3mtzCEjIJvPY8nuwxXtQeQwUag== - dependencies: - "@babel/types" "^7.0.0" - -"@babel/helpers@^7.2.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.2.0.tgz#8335f3140f3144270dc63c4732a4f8b0a50b7a21" - integrity sha512-Fr07N+ea0dMcMN8nFpuK6dUIT7/ivt9yKQdEEnjVS83tG2pHwPi03gYmk/tyuwONnZ+sY+GFFPlWGgCtW1hF9A== - dependencies: - "@babel/template" "^7.1.2" - "@babel/traverse" "^7.1.5" - "@babel/types" "^7.2.0" - -"@babel/highlight@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4" - integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw== - dependencies: - chalk "^2.0.0" - esutils "^2.0.2" - js-tokens "^4.0.0" - -"@babel/parser@^7.2.2", "@babel/parser@^7.2.3": - version "7.2.3" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.2.3.tgz#32f5df65744b70888d17872ec106b02434ba1489" - integrity sha512-0LyEcVlfCoFmci8mXx8A5oIkpkOgyo8dRHtxBnK9RRBwxO2+JZPNsqtVEZQ7mJFPxnXF9lfmU24mHOPI0qnlkA== - -"@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2": - version "7.2.2" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907" - integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g== - dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/parser" "^7.2.2" - "@babel/types" "^7.2.2" - -"@babel/traverse@^7.1.5", "@babel/traverse@^7.2.2": - version "7.2.3" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.2.3.tgz#7ff50cefa9c7c0bd2d81231fdac122f3957748d8" - integrity sha512-Z31oUD/fJvEWVR0lNZtfgvVt512ForCTNKYcJBGbPb1QZfve4WGH8Wsy7+Mev33/45fhP/hwQtvgusNdcCMgSw== - dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.2.2" - "@babel/helper-function-name" "^7.1.0" - "@babel/helper-split-export-declaration" "^7.0.0" - "@babel/parser" "^7.2.3" - "@babel/types" "^7.2.2" - debug "^4.1.0" - globals "^11.1.0" - lodash "^4.17.10" - -"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.2.2": - version "7.2.2" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.2.2.tgz#44e10fc24e33af524488b716cdaee5360ea8ed1e" - integrity sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg== - dependencies: - esutils "^2.0.2" - lodash "^4.17.10" - to-fast-properties "^2.0.0" - -ansi-styles@^3.2.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" - integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA== - dependencies: - color-convert "^1.9.0" - -chalk@^2.0.0: - version "2.4.1" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" - integrity sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ== - dependencies: - ansi-styles "^3.2.1" - escape-string-regexp "^1.0.5" - supports-color "^5.3.0" - -color-convert@^1.9.0: - version "1.9.3" - resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" - integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== - dependencies: - color-name "1.1.3" - -color-name@1.1.3: - version "1.1.3" - resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" - integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= - -convert-source-map@^1.1.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20" - integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A== - dependencies: - safe-buffer "~5.1.1" - -debug@^4.1.0: - version "4.1.1" - resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791" - integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw== - dependencies: - ms "^2.1.1" - -escape-string-regexp@^1.0.5: - version "1.0.5" - resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" - integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= - -esutils@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" - integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs= - -globals@^11.1.0: - version "11.9.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.9.0.tgz#bde236808e987f290768a93d065060d78e6ab249" - integrity sha512-5cJVtyXWH8PiJPVLZzzoIizXx944O4OmRro5MWKx5fT4MgcN7OfaMutPeaTdJCCURwbWdhhcCWcKIffPnmTzBg== - -has-flag@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" - integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= - -js-tokens@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" - integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== - -jsesc@^2.5.1: - version "2.5.2" - resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" - integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== - -json5@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850" - integrity sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ== - dependencies: - minimist "^1.2.0" - -lodash@^4.17.10: - version "4.17.11" - resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" - integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== - -minimist@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" - integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= - -ms@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a" - integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg== - -path-parse@^1.0.6: - version "1.0.6" - resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" - integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== - -resolve@^1.3.2: - version "1.9.0" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.9.0.tgz#a14c6fdfa8f92a7df1d996cb7105fa744658ea06" - integrity sha512-TZNye00tI67lwYvzxCxHGjwTNlUV70io54/Ed4j6PscB8xVfuBJpRenI/o6dVk0cY0PYTY27AgCoGGxRnYuItQ== - dependencies: - path-parse "^1.0.6" - -safe-buffer@~5.1.1: - version "5.1.2" - resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" - integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== - -semver@^5.4.1: - version "5.6.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" - integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg== - -source-map@^0.5.0: - version "0.5.7" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= - -supports-color@^5.3.0: - version "5.5.0" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" - integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== - dependencies: - has-flag "^3.0.0" - -to-fast-properties@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" - integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= - -trim-right@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" - integrity sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM= diff --git a/stories/input.stories.tsx b/stories/input.stories.tsx new file mode 100644 index 000000000..59accc99a --- /dev/null +++ b/stories/input.stories.tsx @@ -0,0 +1,97 @@ +import React from 'react'; + +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import { Input } from '../packages/forms/src'; + +console.log('stories'); + +const defaultProps = { + label: 'Label', + id: 'test1', + name: 'test1', + onChange: action('changed'), + focus: true, +}; + +const defaultPasswordProps = { + label: 'Password', + type: 'password', + id: 'test1', + name: 'test1', + onChange: action('changed'), + focus: true, +}; + +storiesOf('Input', module) + .add('Basic', () => ( + + )) + .add('Without Label', () => ( + + )) + .add('Disabled', () => ( + + )) + .add('With prefix', () => ( + + )) + .add('With suffix', () => ( + + )) + .add('With pre-/suffix', () => ( + + )) + .add('With error', () => ( + + )); + +storiesOf('Password', module) + // .addDecorator(withThemesProvider(themes)) + .add('Basic', () => ( + + )) + .add('Show password toggle', () => ( + + )) + .add('Score password', () => ( + + )) + .add('Score password with error', () => ( + + )); diff --git a/tsconfig.json b/tsconfig.json index 55b9b7770..3095a6367 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,7 @@ { - "files": [], + "files": [ + "packages/**/*.{ts,tsx}" + ], "references": [ { "path": "packages/theme" diff --git a/tsconfig.settings.json b/tsconfig.settings.json index 3d29cfec4..a156a958b 100644 --- a/tsconfig.settings.json +++ b/tsconfig.settings.json @@ -12,6 +12,6 @@ "strict": true, "allowSyntheticDefaultImports": true, "experimentalDecorators": true, - "composite": true + "composite": true, } } diff --git a/tsconfig.storybook.json b/tsconfig.storybook.json new file mode 100644 index 000000000..46e0e6cfa --- /dev/null +++ b/tsconfig.storybook.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.settings.json", + "compilerOptions": { + "outDir": ".tstmp", + "rootDir": "./" + }, +} diff --git a/typings/react-html-attributes.d.ts b/typings/react-html-attributes.d.ts new file mode 100644 index 000000000..6f8f20fe4 --- /dev/null +++ b/typings/react-html-attributes.d.ts @@ -0,0 +1 @@ +declare module 'react-html-attributes'; diff --git a/typings/storybook__addons.d.ts b/typings/storybook__addons.d.ts new file mode 100644 index 000000000..14ccd3cf0 --- /dev/null +++ b/typings/storybook__addons.d.ts @@ -0,0 +1 @@ +declare module '@storybook/addons'; -- cgit v1.2.3-54-g00ecf