chore: updates docs

itsdouges · itsdouges · commit bc154a3a5c32 · 2019-05-05T22:55:33.000+10:00
diff --git a/packages/yubaba/package.json b/packages/yubaba/package.json
@@ -24,7 +24,7 @@
   },
   "size-limit": [
     {
-      "limit": "6 KB",
+      "limit": "7 KB",
       "path": "dist/esm/packages/yubaba/src/index.js"
     }
   ],
diff --git a/packages/yubaba/src/Collector/__docs__/docs.mdx b/packages/yubaba/src/Collector/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Collector
 route: /collector
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx b/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: FocalTarget
 route: /focal-target
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/Wait/__docs__/docs.mdx b/packages/yubaba/src/Wait/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Wait
 route: /wait
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CircleExpand
 route: /circle-expand
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CircleShrink
 route: /circle-shrink
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: ConcealMove
 route: /conceal-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx b/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CrossFadeMove
 route: /cross-fade-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx b/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
@@ -0,0 +1,56 @@
+---
+name: FadeMove
+route: /fade-move
+menu: Focal Animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import Baba from '../../../Baba';
+import FadeMove from '../index';
+import * as Styled from './styled';
+
+# FadeMove
+
+Will clone the origin element and position it absolutely then animate it ontop of the destination element,
+while fading out.
+
+Generally you'd want to use [Move](/move) or [CrossFadeMove](/cross-fade-move) over this.
+
+## Usage
+
+```js
+import { FadeMove } from 'yubaba';
+```
+
+<Playground>
+  <Common.Toggler>
+    {({ shown, toggle }) =>
+      shown ? (
+        <Baba name="fade-move" key="1">
+          <FadeMove>
+            {({ ref, style }) => (
+              <Styled.Box onClick={() => toggle()} style={style} innerRef={ref}>
+                Hello, world!
+              </Styled.Box>
+            )}
+          </FadeMove>
+        </Baba>
+      ) : (
+        <Baba name="fade-move" key="2">
+          <FadeMove>
+            {({ ref, style }) => (
+              <Styled.Box style={style} innerRef={ref} onClick={() => toggle()} alignRight>
+                Hello, world!
+              </Styled.Box>
+            )}
+          </FadeMove>
+        </Baba>
+      )
+    }
+  </Common.Toggler>
+</Playground>
+
+## Props
+
+<PropsTable of={FadeMove} />
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx b/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Box = styled.div<{ alignRight: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  width: 250px;
+  height: 250px;
+  background-color: #dc143c;
+  cursor: pointer;
+  margin-left: ${props => (props.alignRight ? '0' : 'auto')};
+`;
diff --git a/packages/yubaba/src/animations/Move/__docs__/docs.mdx b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Move
 route: /move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
@@ -13,7 +14,7 @@ import * as Styled from './styled';
 
 Useful for animating an element moving from one position to another,
 works best when the element has **very little visual difference**.
-This animation uses the FLIP technique so it is very performant.
+This animation uses the [FLIP technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/) so it is very performant.
 
 ## Usage
 
diff --git a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx b/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Noop
 route: /noop
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
@@ -0,0 +1,27 @@
+---
+name: ReshapingContainer
+route: /reshaping-container
+menu: Composite Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import ReshapingContainer from '../index';
+import * as Styled from './styled';
+
+# ReshapingContainer
+
+A composite component that is made up of [SimpleReveal](/simple-reveal) and [Move](/move).
+It has been made to be able to efficiently have the parent container resize around its children after state changes.
+
+## Usage
+
+```js
+import { ReshapingContainer } from 'yubaba';
+```
+
+<Playground>hey</Playground>
+
+## Props
+
+<PropsTable of={ReshapingContainer} />
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
diff --git a/packages/yubaba/src/animations/ReshapingContainer/index.tsx b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
@@ -11,13 +11,17 @@ interface ReshapingContainerProps {
    */
   id: string;
 
+  /**
+   * Children as function.
+   * Will receive an object with className, style, and ref.
+   */
   children: CollectorChildrenAsFunction;
 
   /**
    * Defaults to "div".
    * Any valid HTML tag allowed.
    */
-  as: keyof JSX.IntrinsicElements;
+  as: string;
 
   /**
    * Used the same as the CSS property.
@@ -33,7 +37,7 @@ interface ReshapingContainerProps {
    * Padding.
    * Use only px values, otherwise same as the CSS property.
    */
-  padding?: string;
+  padding: string;
 
   /**
    * Used the same as the CSS property.
@@ -88,6 +92,7 @@ export default class ReshapingContainer extends React.PureComponent<
 > {
   static defaultProps = {
     as: 'div',
+    padding: '',
   };
 
   state: ReshapingContainerState = {
@@ -98,15 +103,17 @@ export default class ReshapingContainer extends React.PureComponent<
    * Incremeent render count every time a render occurs.
    * We're abusing react "key" to trigger animations for now.
    */
-  static getDerivedStateFromProps(_, state) {
+  static getDerivedStateFromProps(_: ReshapingContainerProps, state: ReshapingContainerState) {
     return {
       renderCount: state.renderCount + 1,
     };
   }
 
   componentDidMount() {
     if (this.props.padding.indexOf('em') >= 0 || this.props.padding.indexOf('%') >= 0) {
-      throw new Error(`Only px values are supported for props.padding in ${this.displayName}`);
+      throw new Error(
+        `Only px values are supported for props.padding in ${ReshapingContainer.name}`
+      );
     }
   }
 
@@ -118,6 +125,9 @@ export default class ReshapingContainer extends React.PureComponent<
     const parts = this.props.padding.split(' ').map(p => -Number(p.replace('px', '')));
 
     switch (parts.length) {
+      case 0:
+        return undefined;
+
       case 1:
         parts.push(parts[0]);
         parts.push(parts[0]);
@@ -138,7 +148,7 @@ export default class ReshapingContainer extends React.PureComponent<
         break;
     }
 
-    return parts;
+    return parts as [number, number, number, number];
   }
 
   render() {
@@ -158,12 +168,13 @@ export default class ReshapingContainer extends React.PureComponent<
       timingFunction,
       ...rest
     } = this.props;
+    const ComponentAs = rest.as as any;
 
     return (
       <Baba name={`${id}-container`} key={this.state.renderCount}>
         <Move duration={duration} timingFunction={timingFunction}>
           {baba => (
-            <rest.as
+            <ComponentAs
               ref={baba.ref}
               style={{
                 position: 'relative',
@@ -193,16 +204,16 @@ export default class ReshapingContainer extends React.PureComponent<
                 }}
               />
 
-              <Baba
-                name={`${id}-children`}
-                key={this.state.renderCount}
-                timingFunction={timingFunction}
-              >
-                <SimpleReveal duration={duration} offset={this.getInversePaddingParts()}>
+              <Baba name={`${id}-children`} key={this.state.renderCount}>
+                <SimpleReveal
+                  duration={duration}
+                  offset={this.getInversePaddingParts()}
+                  timingFunction={timingFunction}
+                >
                   {props => children(props)}
                 </SimpleReveal>
               </Baba>
-            </rest.as>
+            </ComponentAs>
           )}
         </Move>
       </Baba>
diff --git a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
@@ -29,6 +29,7 @@ storiesOf('yubaba/ReshapingContainer', module)
             padding="16px"
             maxWidth="500px"
             margin="0 auto"
+            background="rgba(32, 33, 36, 0.2)"
           >
             {props => (
               <Container style={props.style} className={props.className} innerRef={props.ref}>
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: RevealMove
 route: /reveal-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
@@ -0,0 +1,25 @@
+---
+name: SimpleReveal
+route: /simple-reveal
+menu: Focal Animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import SimpleReveal from '../index';
+
+# SimpleReveal
+
+A composite component that is made up of
+
+## Usage
+
+```js
+import { SimpleReveal } from 'yubaba';
+```
+
+<Playground>hey</Playground>
+
+## Props
+
+<PropsTable of={SimpleReveal} />
diff --git a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx b/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Swipe
 route: /swipe
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`},`
`25`	`25`	`"size-limit": [`
`26`	`26`	`{`
`27`		`- "limit": "6 KB",`
	`27`	`+ "limit": "7 KB",`
`28`	`28`	`"path": "dist/esm/packages/yubaba/src/index.js"`
`29`	`29`	`}`
`30`	`30`	`],`