Skip to content

Commit

Permalink
Add <Form /> stories
Browse files Browse the repository at this point in the history
  • Loading branch information
MAKARD committed Jun 19, 2019
1 parent fce945d commit 9dfafb4
Show file tree
Hide file tree
Showing 27 changed files with 2,575 additions and 185 deletions.
2 changes: 1 addition & 1 deletion .storybook/addons.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
import "@storybook/addon-storysource/register";
import "@storybook/addon-actions/register";
import "storybook-addon-jsx/register";
8 changes: 5 additions & 3 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { configure } from '@storybook/react';
import "./styles.scss";

import { configure } from "@storybook/react";

// automatically import all files ending in *.stories.ts/tsx
const req = require.context('../stories', true, /\.story\.ts+x?$/);
const req = require.context("../stories", true, /\.story\.ts+x?$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
189 changes: 189 additions & 0 deletions .storybook/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

* {
box-sizing: border-box;
}

body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.43;
}

.btn {
color: white;

background: linear-gradient(45deg, rgb(33, 150, 243) 30%, rgb(33, 203, 243) 90%);

border: 0;
border-radius: 3px;

padding: 10px 30px;

min-width: 110px;

font-size: 16px;

outline: none;

box-shadow: 0 3px 5px 2px rgba(33, 203, 243, 0.3);
transform: translateY(0) scale(1);

transition: box-shadow .15s ease, transform .15s ease;

cursor: pointer;

&:hover {
transform: translateY(-1px) scale(1.01);
}

&:active {
box-shadow: 0 1px 2px 1px rgba(33, 203, 243, 0.3);

transform: translateY(1px) scale(.99);
}

&.is-loading {
pointer-events: none;
cursor: auto;

transform: translateY(1px) scale(.99);
}
}

.form {
background-color: #f5f5f5;

margin: 1em;

border-radius: 8px;

box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.075);

padding: 2em;

.form-group {
border: 1px solid rgba(0, 0, 0, 0.23);
border-radius: 4px;

position: relative;

margin-bottom: 1.5em;

transition: border-color .15s ease;

&:hover {
border-color: rgba(0, 0, 0, 0.5);
}

.form-label {
position: absolute;
z-index: 0;

background-color: #f5f5f5;
color: rgba(0, 0, 0, 0.5);

padding: 0 3px;

height: 20px;

font-size: 16px;

transform: translate3d(14px, 17px, 0) scale(1);

transition: transform .15s ease;
}

.form-control {
position: relative;
z-index: 1;

background: transparent;
border: none;
outline: none;

width: 100%;

padding: 18px 14px;

font-size: 16px;
}

.form-error {
display: block;

color: #f44336;

font-size: 12px;

margin-left: 17px;
margin-top: -7px;
margin-bottom: 7px;

text-transform: uppercase;
}

&.is-focus {
border-color: #2196f3;
border-width: 2px;

margin-top: -2px;
margin-left: -2px;
transform: translate3d(1px, 1px, 0);

.form-label {
color: rgba(18, 84, 136, 0.855);
transform: translate3d(7px, -12px, 0) scale(.8);
}
}

&.is-error {
border-color: #f44336 !important;

.form-label {
color: #f44336 !important;
}
}

&.have-value {
.form-label {
transform: translate3d(7px, -12px, 0) scale(.8);
}
}

}

.form-error-container {
color: #fff;
background: linear-gradient(45deg, #fd5454 30%, #ff6147 90%);

padding: 1em;

border-radius: 4px;

margin-bottom: 1.5em;
}
}

.markdown {
background-color: #fff;

padding: 1em;

margin: 1em;

border-radius: 8px;

box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.075);

code {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #333;
background: #f8f8f8;

font-family: monospace,monospace;
font-size: 1em;
}
}
88 changes: 74 additions & 14 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,84 @@
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = ({ config, mode }) => {
if (mode === "PRODUCTION") {
config.devtool =false;
const debug = mode !== "PRODUCTION";

if (!debug) {
config.devtool = false;
config.optimization = {};
}

config.module.rules.push({
test: /\.tsx?$/,
loaders: [
{
loader: "babel-loader",
options: {
babelrc: false,
extends: path.join(process.cwd(), "./.babelrc")
config.resolve.extensions = [
...config.resolve.extensions,
".ts",
".tsx"
];
config.resolve.modules.push(path.resolve(__dirname, "../src"));
config.module.rules = [
...config.module.rules,
{
test: /\.tsx?$/,
loaders: [
{
loader: "babel-loader",
options: {
babelrc: false,
extends: path.join(process.cwd(), "./.babelrc")
}
},
"awesome-typescript-loader",
{
loader: require.resolve("@storybook/addon-storysource/loader"),
options: {
parser: "typescript"
}
}
},
"awesome-typescript-loader"
]
});
]
},
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{
loader: "css-loader",
options: {
sourceMap: debug,
},
},
{
loader: "postcss-loader",
options: {
plugins: function (loader) {
const plugins = [
require("autoprefixer")({ remove: false }),
];
if (!debug) {
plugins.push(require("cssnano")());
}
return plugins;
},
sourceMap: debug,
},
},
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve(__dirname + "./"),
]
}
}
]
})
}
];

config.plugins.push(new ExtractTextPlugin({
filename: `styles.css`,
publicPath: "/"
}));

return config;
};
2 changes: 1 addition & 1 deletion docs/iframe.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,4 @@
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to parent frame for connecting dev tools');
}</script></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><div id="error-message" class="sb-heading"></div><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><script src="main.1ec02b41628f99b0f366.bundle.js"></script></body></html>
}</script><link href="styles.css" rel="stylesheet"></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><div id="error-message" class="sb-heading"></div><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><script src="main.48faf99dccd302c817cd.bundle.js"></script></body></html>
2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to parent frame for connecting dev tools');
}</script></head><body><div id="root"></div><script src="runtime~main.17da544d0ef88cbabfaf.bundle.js"></script><script src="vendors~main.fbd4c7dc01c893b94531.bundle.js"></script><script src="main.0ed8d7851a4e45989a29.bundle.js"></script></body></html>
}</script></head><body><div id="root"></div><script src="runtime~main.17da544d0ef88cbabfaf.bundle.js"></script><script src="vendors~main.cd2eb006bc862599ad92.bundle.js"></script><script src="main.157913731b4424299804.bundle.js"></script></body></html>

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

77 changes: 0 additions & 77 deletions docs/main.1ec02b41628f99b0f366.bundle.js

This file was deleted.

90 changes: 90 additions & 0 deletions docs/main.48faf99dccd302c817cd.bundle.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/styles.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Loading

0 comments on commit 9dfafb4

Please sign in to comment.