Merge pull request #17 from streamich/docs/improve-2

chore: various setup improvements

.gitignore

@@ -9,3 +9,8 @@ yarn-error.log
 dist/
 .DS_Store
 lerna-debug.log
+/modules/
+/dist/
+/lib/
+.vscode/
+_book/

packages/freestyler/.npmignore → .npmignore

@@ -1,14 +1,15 @@
-/typings
-example.js
-tsd.json
-simple.js
-node_modules
+node_modules/
 /test
 .idea
 .idea/
+__tests__/
+__mocks__/
+__stories__/
 .nyc_output
 coverage
 package-lock.json
 yarn.lock
 yarn-error.log
 tsconfig.json
+.vscode/
+/docs/

stories/Component.stories.tsx → .storybook/Component.stories.tsx

@@ -2,7 +2,8 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-import Component from '../packages/freestyler/src/react/Component';
+import Component from '../src/react/Component';
+import {Container as ExampleButton} from './Component/Button';
 
 class Example1 extends Component<any, any> {
     static css = {
@@ -22,3 +23,4 @@ class Example1 extends Component<any, any> {
 
 storiesOf('Component', module)
   .add('Basic', () => <Example1 color='orange' />)
+  .add('Button', () => <ExampleButton />)

packages/freestyler-demos/Component.ts → .storybook/Component/Button.tsx

@@ -1,6 +1,5 @@
 import {createElement as h} from 'react';
-import {render} from 'react-dom';
-import Component from 'freestyler/src/react/Component';
+import Component from '../../src/react/Component';
 
 class Button extends Component<any, any> {
     static css = {
@@ -32,7 +31,7 @@ class Button extends Component<any, any> {
     }
 }
 
-class Container extends Component<any, any> {
+export class Container extends Component<any, any> {
     static css = {
         textAlign: 'center',
     };
@@ -46,5 +45,3 @@ class Container extends Component<any, any> {
         );
     }
 }
-
-render(h(Container), document.body);

.storybook/StyleSheet.stories.tsx

@@ -0,0 +1,9 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+import Button from './StyleSheet/Button';
+
+
+storiesOf('StyleSheet', module)
+  .add('Button', () => <Button />)

packages/freestyler-demos/StyleSheet.ts → .storybook/StyleSheet/Button.tsx

@@ -1,6 +1,5 @@
 import {Component, createElement as h} from 'react';
-import {render} from 'react-dom';
-import StyleSheet from 'freestyler/src/StyleSheet';
+import StyleSheet from '../../src/StyleSheet';
 
 const styles = StyleSheet.create({
     container: {
@@ -26,7 +25,7 @@ const styles = StyleSheet.create({
     },
 });
 
-class App extends Component<any, any> {
+class Button extends Component<any, any> {
     render() {
         // prettier-ignore
         return h('div', {className: styles.container},
@@ -37,4 +36,4 @@ class App extends Component<any, any> {
     }
 }
 
-render(h(App), document.body);
+export default Button;

.storybook/config.js

@@ -1,7 +1,7 @@
 import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.tsx?$/);
+const req = require.context('../.storybook', true, /.stories.tsx?$/);
 function loadStories() {
   req.keys().forEach((filename) => req(filename));
 }

stories/css.stories.tsx → .storybook/css.stories.tsx

@@ -3,15 +3,23 @@ import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
 
-import {StoryStatic1, StoryStatic2, StoryStatic3, StoryStatic4} from './css/StoryStatic';
+import {StoryStatic1, StoryStatic2, StoryStatic3, StoryStatic4, Button} from './css/StoryStatic';
 import {Story4thGenRender1, Story4thGenRender2} from './css/Story4thGenRender';
+import {Container as ExampleButton} from './css/Button';
 
 storiesOf('@css/Static Decorator', module)
   .add('static .css', () => <StoryStatic1 />)
   .add('instance .css', () => <StoryStatic2 color='blue' />)
   .add('static .css()', () => <StoryStatic3 color='blue' />)
   .add('static and instance', () => <StoryStatic4 color='blue' />)
+  .add('Button', () => (
+    <div>
+      <Button color='blue' />
+      <Button color='tomato' />
+    </div>
+  ))
 
 storiesOf('@css/.render() Decorator', module)
   .add('Basic', () => <Story4thGenRender1 />)
   .add('From props', () => <Story4thGenRender2 color='blue' />)
+  .add('Button', () => <ExampleButton />)

packages/freestyler-demos/css.ts → .storybook/css/Button.tsx

@@ -1,6 +1,6 @@
 import {Component, createElement as h} from 'react';
-import {render} from 'react-dom';
-import css from 'freestyler/src/react/css';
+import css from '../../src/react/css';
+
 @css
 @css({
     width: '320px',
@@ -19,18 +19,10 @@ class Button extends Component<any, any> {
         },
     };
 
-    css() {
-        return {
-            background: this.props.color || 'blue',
-            '@media (max-width: 480px)': {
-                width: '160px',
-            },
-        };
-    }
-
-    @css(function() {
+    @css(function({props}) {
         return {
             padding: '20px',
+            background: props.color || 'blue',
         };
     })
     render() {
@@ -39,7 +31,7 @@ class Button extends Component<any, any> {
 }
 
 @css
-class Container extends Component<any, any> {
+export class Container extends Component<any, any> {
     static css = {
         textAlign: 'center',
     };
@@ -53,5 +45,3 @@ class Container extends Component<any, any> {
         );
     }
 }
-
-render(h(Container), document.body);

stories/css/Story4thGenRender.tsx → .storybook/css/Story4thGenRender.tsx

@@ -1,5 +1,5 @@
 import {createElement as h, Component} from 'react';
-import css from '../../packages/freestyler/src/react/css';
+import css from '../../src/react/css';
 
 export class Story4thGenRender1 extends Component<any, any> {
     @css((a) => {

stories/css/StoryStatic.tsx → .storybook/css/StoryStatic.tsx

@@ -1,5 +1,5 @@
 import {createElement as h, Component} from 'react';
-import css from '../../packages/freestyler/src/react/css';
+import css from '../../src/react/css';
 
 @css
 export class StoryStatic1 extends Component<any, any> {
@@ -52,3 +52,33 @@ export class StoryStatic4 extends Component<any, any> {
         return <div>Hello world!</div>;
     }
 }
+
+@css
+export class Button extends Component<any, any> {
+    static css = {
+        bg: 'red',
+        w: '320px',
+        pad: '20px',
+        bdrad: '5px',
+        bd: 'none',
+        outline: 'none',
+        '&:hover': {
+            col: '#fff',
+        },
+        '&:active': {
+            pos: 'relative',
+            top: '2px',
+        },
+        '@media (max-width: 480px)': {
+            w: '160px',
+        },
+    };
+
+    css = ({props}) => ({
+        border: '1px solid ' + (props.color || 'tomato')
+    });
+
+    render () {
+        return <button>Hello world!</button>;
+    }
+}

stories/hoc.stories.tsx → .storybook/hoc.stories.tsx

@@ -2,7 +2,7 @@ import {createElement as h} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-import hoc from '../packages/freestyler/src/react/hoc';
+import hoc from '../src/react/hoc';
 
 const withOrangeBorder = hoc({
     border: '1px solid orange'

stories/hyperstyle.stories.tsx → .storybook/hyperstyle.stories.tsx

@@ -2,7 +2,7 @@ import {createElement, Component} from 'react';
 import {storiesOf} from '@storybook/react';
 const {action} = require('@storybook/addon-actions');
 const {linkTo} = require('@storybook/addon-links');
-import hyperstyle from '../packages/freestyler/src/react/hyperstyle';
+import hyperstyle from '../src/react/hyperstyle';
 
 const h: any = hyperstyle(createElement, {
     container: {
@@ -22,9 +22,9 @@ const h: any = hyperstyle(createElement, {
             position: 'relative',
             top: '2px',
         },
-        // '@media (max-width: 480px)': {
-            // width: '160px',
-        // },
+        '@media (max-width: 480px)': {
+            width: '160px',
+        },
     }),
 });
 
@@ -40,4 +40,4 @@ class Example1 extends Component<any, any> {
 }
 
 storiesOf('hyperstyle', module)
-  .add('Basic', () => <Example1 />)
+  .add('Button', () => <Example1 />)

stories/jsxstyle.stories.tsx → .storybook/jsxstyle.stories.tsx

@@ -6,5 +6,5 @@ import Example1 from './jsxstyle/Example1';
 import Example2 from './jsxstyle/Example2';
 
 storiesOf('jsxstyle', module)
-  .add('<Block> and <InlineBlock>', () => <Example1 />)
+  .add('Button', () => <Example1 />)
   .add('Custom blocks', () => <Example2 />)

stories/jsxstyle/Example1.tsx → .storybook/jsxstyle/Example1.tsx

@@ -1,13 +1,16 @@
 import {createElement as h, Component} from 'react';
-import {jsxstyle, Block, InlineBlock} from '../../packages/freestyler/src/react/jsxstyle';
+import {jsxstyle, Block, InlineBlock} from '../../src/react/jsxstyle';
+
+const Button = jsxstyle('button', {
+    background: 'red',
+    width: '320px',
+    padding: '20px',
+    borderRadius: '5px'
+});
 
 const Example1 = () =>
     <Block ta='center'>
-        <InlineBlock
-            background='red'
-            width='320px'
-            padding='20px'
-            borderRadius='5px'
+        <Button
             border='none'
             outline='none'
             {...{
@@ -23,8 +26,8 @@ const Example1 = () =>
                 }
             }}
         >
-            <button>Hello world 3</button>
-        </InlineBlock>
+            Hello world 3
+        </Button>
     </Block>;
 
 export default Example1;

stories/jsxstyle/Example2.tsx → .storybook/jsxstyle/Example2.tsx

@@ -1,5 +1,5 @@
 import {createElement as h, Component} from 'react';
-import {jsxstyle, Block, InlineBlock} from '../../packages/freestyler/src/react/jsxstyle';
+import {jsxstyle, Block, InlineBlock} from '../../src/react/jsxstyle';
 
 const Button = jsxstyle('button', {
     bg: '#07f',

.storybook/rule.stories.tsx

@@ -0,0 +1,8 @@
+import {createElement as h, Component} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+import Example1 from './rule/Example1';
+
+storiesOf('rule()', module)
+  .add('Button', () => <Example1 />)

packages/freestyler-demos/rule.ts → .storybook/rule/Example1.tsx

@@ -1,6 +1,5 @@
 import {Component, createElement as h} from 'react';
-import {render} from 'react-dom';
-import rule from 'freestyler/src/rule';
+import {rule} from '../../src';
 
 const containerClassName = rule({
     ta: 'center',
@@ -25,7 +24,7 @@ const buttonClassName = rule({
     },
 });
 
-class App extends Component<any, any> {
+class Example1 extends Component<any, any> {
     render() {
         // prettier-ignore
         return h('div', {className: containerClassName},
@@ -36,4 +35,4 @@ class App extends Component<any, any> {
     }
 }
 
-render(h(App), document.body);
+export default Example1;

stories/styleit.stories.tsx → .storybook/styleit.stories.tsx

@@ -7,6 +7,7 @@ import Example2 from './styleit/Example2';
 import StyleitExample1 from './styleit/StyleitExample1';
 import StyleitExample2 from './styleit/StyleitExample2';
 import StyleitExample3 from './styleit/StyleitExample3';
+import StyleitButton from './styleit/StyleitButton';
 
 storiesOf('styleit()', module)
   .add('With JSX', () => <Example1 />)
@@ -17,3 +18,4 @@ storiesOf('<Styleit>', module)
   .add('With JSX', () => <StyleitExample1 />)
   .add('With FaCC', () => <StyleitExample2 />)
   .add('With JSX, props', () => <StyleitExample3 />)
+  .add('Button', () => <StyleitButton />)

stories/styleit/Example1.tsx → .storybook/styleit/Example1.tsx

@@ -1,5 +1,5 @@
 import {createElement as h, Component} from 'react';
-import {Styleit, styleit} from '../../packages/freestyler/src/react/styleit';
+import {Styleit, styleit} from '../../src/react/styleit';
 
 export default class Example1 extends Component<any, any> {
     render() {

stories/styleit/Example2.tsx → .storybook/styleit/Example2.tsx

@@ -1,5 +1,5 @@
 import {createElement as h, Component} from 'react';
-import {Styleit, styleit} from '../../packages/freestyler/src/react/styleit';
+import {Styleit, styleit} from '../../src/react/styleit';
 
 export default class Example2 extends Component<any, any> {
     render() {