chore: improve folder/file structure

README.md

@@ -33,11 +33,11 @@ const MyComponent = mock();
 
   - [Introduction](./docs/en/Introduction.md)
   - [Dummies](./docs/en/Dummies.md)
-     - [`mock()`](./docs/en/mock.md) and [`loadable()`](./docs/en/loadable.md) — [_**example**_](https://codesandbox.io/s/j2ovpr03z3)
+     - [`mock()`](./docs/en/mock.md) and [`loadable()`](./docs/en/loadable.md) — [**example**](https://codesandbox.io/s/j2ovpr03z3)
      - [`lazy()`](./docs/en/lazy.md), [`delayed()`](./docs/en/delayed.md), and [`viewport()`](./docs/en/viewport.md)
   - [Inversion](./docs/en/Inversion.md)
      - [`<State>`](./docs/en/State.md) and [`withState()`](./docs/en/State.md#withstate-hoc)
-        - [`<Toggle>`](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator) &mdash; [_**example**_](https://codesandbox.io/s/zwkl16vv93)
+        - [`<Toggle>`](./docs/en/Toggle.md), [`withToggle()`](./docs/en/Toggle.md#withtoggle-hoc), and [`@withToggle`](./docs/en/Toggle.md#withtoggle-decorator) &mdash; [**example**](https://codesandbox.io/s/zwkl16vv93)
         - [`<Flipflop>`](./docs/en/Flipflop.md), [`withFlipflop()`](./docs/en/Flipflop.md#withflipflop-hoc), and [`@withFlipflop`](./docs/en/Flipflop.md#withflipflop-decorator)
         - [`<Value>`](./docs/en/Value.md), [`withValue()`](./docs/en/Value.md#withvalue-hoc), and [`@withValue`](./docs/en/Value.md#withvalue-decorator)
         - [`<Counter>`](./docs/en/Counter.md), [`withCounter()`](./docs/en/Counter.md#withcounter-hoc) and [`@withCounter`](./docs/en/Counter.md#withcounter-decorator)
@@ -48,20 +48,20 @@ const MyComponent = mock();
   - [Sensors](./docs/en/Sensors.md)
      - [`<ActiveSensor>`](./docs/en/ActiveSensor.md), [`withActive()`](./docs/en/ActiveSensor.md#withactive-hoc), and [`@withActive`](./docs/en/ActiveSensor.md#withactive-decorator)
      - [`<BatterySensor>`](./docs/en/BatterySensor.md), [`withBattery()`](./docs/en/BatterySensor.md#withbattery), and [`@withBattery`](./docs/en/BatterySensor.md#withbattery-1)
-     - [`<ExitSensor>`](./docs/en/ExitSensor.md) &mdash; [_**example**_](https://codesandbox.io/s/7437x10z71)
+     - [`<ExitSensor>`](./docs/en/ExitSensor.md) &mdash; [**example**](https://codesandbox.io/s/7437x10z71)
      - [`<FocusSensor>`](./docs/en/FocusSensor.md), [`withFocus()`](./docs/en/FocusSensor.md#withfocus-hoc), and [`@withFocus`](./docs/en/FocusSensor.md#withfocus-decorator)
      - [`<GeoLocationSensor>`](./docs/en/GeoLocationSensor.md), [`withGeoLocation()`](./docs/en/GeoLocationSensor.md#withgeolocation-hoc), and [`@withGeoLocation`](./docs/en/GeoLocationSensor.md#withgeolocation-decorator)
      - [`<HoverSensor>`](./docs/en/HoverSensor.md), [`withHover()`](./docs/en/HoverSensor.md#withhover-hoc), and [`@withHover`](./docs/en/HoverSensor.md#withhover-decorator)
      - [`<MediaDeviceSensor>`](./docs/en/MediaDeviceSensor.md), [`withMediaDevices()`](./docs/en/MediaDeviceSensor.md#withmediadevices), and [`@withMediaDevices`](./docs/en/MediaDeviceSensor.md#withmediadevices-1)
      - [`<MediaSensor>`](./docs/en/MediaSensor.md), [`withMedia()`](./docs/en/MediaSensor.md#withmedia), and [`@withMedia`](./docs/en/MediaSensor.md#withmedia-1)
      - [`<MotionSensor>`](./docs/en/MotionSensor.md), [`withMotion()`](./docs/en/MotionSensor.md#withmotion-hoc), and [`@withMotion`](./docs/en/MotionSensor.md#withmotion-decorator)
-     - [`<MouseSensor>`](./docs/en/MouseSensor.md), [`withMouse()`](./docs/en/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/en/MouseSensor.md#withmouse-decorator) &mdash; [_**example**_](https://codesandbox.io/s/k3o16j7n47)
+     - [`<MouseSensor>`](./docs/en/MouseSensor.md), [`withMouse()`](./docs/en/MouseSensor.md#withmouse-hoc), and [`@withMouse`](./docs/en/MouseSensor.md#withmouse-decorator) &mdash; [**example**](https://codesandbox.io/s/k3o16j7n47)
      - [`<NetworkSensor>`](./docs/en/NetworkSensor.md), [`withNetwork()`](./docs/en/NetworkSensor.md#withnetwork-hoc), and [`@withNetwork`](./docs/en/NetworkSensor.md#withnetwork-decorator)
      - [`<LightSensor>`](./docs/en/LightSensor.md), [`withLight()`](./docs/en/LightSensor.md#withlight-hoc), and [`@withLight`](./docs/en/LightSensor.md#withlight-decorator)
      - [`<LocationSensor>`](./docs/en/LocationSensor.md), [`withLocation()`](./docs/en/LocationSensor.md#withlocation-hoc), and [`@withLocation`](./docs/en/LocationSensor.md#withlocation-decora)
      - [`<OrientationSensor>`](./docs/en/OrientationSensor.md), [`withOrientation()`](./docs/en/OrientationSensor.md#withorientation-hoc), and [`@withOrientation`](./docs/en/OrientationSensor.md#withorientation-decorator)
      - [`<ScrollSensor>`](./docs/en/ScrollSensor.md)
-     - [`<SizeSensor>`](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator) &mdash; [_**example**_](https://codesandbox.io/s/0y2qjm210p)
+     - [`<SizeSensor>`](./docs/en/SizeSensor.md), [`withSize()`](./docs/en/SizeSensor.md#withsize-hoc), and [`@withSize`](./docs/en/SizeSensor.md#withsize-decorator) &mdash; [**example**](https://codesandbox.io/s/0y2qjm210p)
         - [`<WidthSensor>`](./docs/en/WidthSensor.md), [`withWidth()`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator), and [`@withWidth`](./docs/en/WidthSensor.md#withwidth-hoc-and-withwidth-decorator)
      - [`<ViewportSensor>`](./docs/en/ViewportSensor.md), [`withViewport()`](./docs/en/ViewportSensor.md#withviewport-hoc), and [`@withViewport`](./docs/en/ViewportSensor.md#withviewport-decorator)
         - [`<ViewportScrollSensor>`](./docs/en/ViewportSensor.md#viewportscrollsensor) and [`<ViewportObserverSensor>`](./docs/en/ViewportSensor.md#viewportobserversensor)

package.json

@@ -31,7 +31,8 @@
     "freestyler": "1.9.2",
     "screenfull": "^3.3.2",
     "fast-extend": "1.0.2",
-    "fast-shallow-equal": "0.1.1"
+    "fast-shallow-equal": "0.1.1",
+    "tslib": "^1.9.0"
   },
   "peerDependencies": {
     "react": "*",

src/spinner/SpinnerRotatePlane.tsx

@@ -0,0 +1,24 @@
+import styled from 'freestyler/lib/react/styled';
+
+const keyframes = {
+  '0%': {
+    transform: 'perspective(120px) rotateX(0deg) rotateY(0deg)'
+  },
+  '50%': {
+    transform: 'perspective(120px) rotateX(-180.1deg) rotateY(0deg)'
+  },
+  '100%': {
+    transform: 'perspective(120px) rotateX(-180deg) rotateY(-179.9deg)'
+  }
+};
+
+const SpinnerRotatePlane = styled('div')({
+  w: '40px',
+  h: '40px',
+  bg: '#333',
+  mar: '40px auto',
+  animation: 'sk-rotatePlane 1.2s infinite ease-in-out',
+  '@keyframes sk-rotatePlane': keyframes,
+});
+
+export default SpinnerRotatePlane;

src/spinner/__story__/story.tsx

@@ -0,0 +1,10 @@
+import {Component, createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import SpinnerRotatePlane from '../SpinnerRotatePlane';
+import ShowDocs from '../../../.storybook/ShowDocs';
+
+storiesOf('Spinners', module)
+  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Slider.md')}))
+  .add('Example', () => <SpinnerRotatePlane />)

tsconfig.json

@@ -25,7 +25,7 @@
     ]
   },
   "include": [
-    "typing.d.ts",
+    "src/typing.d.ts",
     "src"
   ],
   "exclude": [