From 2678c941a1dee6d2844debd24c2ebf649222589f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Tue, 23 Apr 2019 12:38:57 +0200
Subject: [PATCH 1/5] chore: add tsconfig in addons/centered

---
 addons/centered/tsconfig.json | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 addons/centered/tsconfig.json

diff --git a/addons/centered/tsconfig.json b/addons/centered/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/centered/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

From 2ed923872abc1bc4ef7a9bda20aa647d4cd08b80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Tue, 23 Apr 2019 13:16:02 +0200
Subject: [PATCH 2/5] chore: migrate src of addons/centered to Typescript

---
 addons/centered/package.json                  | 10 +++++++++-
 .../centered/src/{angular.js => angular.ts}   |  8 ++++----
 addons/centered/src/{ember.js => ember.ts}    |  4 ++--
 .../src/helpers/{json2CSS.js => json2CSS.ts}  |  2 +-
 addons/centered/src/{html.js => html.ts}      |  4 ++--
 addons/centered/src/{index.js => index.ts}    |  0
 .../centered/src/{mithril.js => mithril.tsx}  |  2 +-
 addons/centered/src/{preact.js => preact.tsx} |  2 +-
 addons/centered/src/{react.js => react.tsx}   |  5 ++---
 addons/centered/src/styles.js                 | 19 -------------------
 addons/centered/src/styles.ts                 | 19 +++++++++++++++++++
 addons/centered/src/{svelte.js => svelte.ts}  |  2 +-
 addons/centered/src/typings.d.ts              |  2 ++
 addons/centered/src/{vue.js => vue.ts}        |  0
 .../addon-centered.stories.storyshot          |  8 ++++----
 yarn.lock                                     |  7 ++++++-
 16 files changed, 54 insertions(+), 40 deletions(-)
 rename addons/centered/src/{angular.js => angular.ts} (86%)
 rename addons/centered/src/{ember.js => ember.ts} (86%)
 rename addons/centered/src/helpers/{json2CSS.js => json2CSS.ts} (92%)
 rename addons/centered/src/{html.js => html.ts} (91%)
 rename addons/centered/src/{index.js => index.ts} (100%)
 rename addons/centered/src/{mithril.js => mithril.tsx} (90%)
 rename addons/centered/src/{preact.js => preact.tsx} (86%)
 rename addons/centered/src/{react.js => react.tsx} (64%)
 delete mode 100644 addons/centered/src/styles.js
 create mode 100644 addons/centered/src/styles.ts
 rename addons/centered/src/{svelte.js => svelte.ts} (95%)
 create mode 100644 addons/centered/src/typings.d.ts
 rename addons/centered/src/{vue.js => vue.ts} (100%)

diff --git a/addons/centered/package.json b/addons/centered/package.json
index 14cc4e244499..da4f4b1e4a0a 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -18,7 +18,7 @@
   "license": "MIT",
   "author": "Muhammed Thanish <mnmtanish@gmail.com>",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -27,6 +27,14 @@
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
   },
+  "devDependencies": {
+    "@types/mithril": "^1.1.16"
+  },
+  "optionalDependencies": {
+    "react": "*",
+    "preact": "*",
+    "mithril": "*"
+  },
   "publishConfig": {
     "access": "public"
   }
diff --git a/addons/centered/src/angular.js b/addons/centered/src/angular.ts
similarity index 86%
rename from addons/centered/src/angular.js
rename to addons/centered/src/angular.ts
index fa03af8b9e49..da930cd17e22 100644
--- a/addons/centered/src/angular.js
+++ b/addons/centered/src/angular.ts
@@ -1,11 +1,11 @@
 import styles from './styles';
 
-function getComponentSelector(component) {
+function getComponentSelector(component: any) {
   // eslint-disable-next-line no-underscore-dangle
   return component.__annotations__[0].selector;
 }
 
-function getTemplate(metadata) {
+function getTemplate(metadata: any) {
   let tpl = '';
   if (metadata.component) {
     const selector = getComponentSelector(metadata.component);
@@ -24,7 +24,7 @@ function getTemplate(metadata) {
       </div>`;
 }
 
-function getModuleMetadata(metadata) {
+function getModuleMetadata(metadata: any) {
   const { moduleMetadata, component } = metadata;
 
   if (component && !moduleMetadata) {
@@ -43,7 +43,7 @@ function getModuleMetadata(metadata) {
   return moduleMetadata;
 }
 
-export default function(metadataFn) {
+export default function(metadataFn: any) {
   const metadata = metadataFn();
 
   return {
diff --git a/addons/centered/src/ember.js b/addons/centered/src/ember.ts
similarity index 86%
rename from addons/centered/src/ember.js
rename to addons/centered/src/ember.ts
index 91a017a4b645..3f0bd7a21bbd 100644
--- a/addons/centered/src/ember.js
+++ b/addons/centered/src/ember.ts
@@ -1,7 +1,7 @@
 import { document } from 'global';
 import styles from './styles';
 
-export default function(storyFn) {
+export default function(storyFn: any) {
   const { template, context } = storyFn();
 
   const element = document.createElement('div');
@@ -13,7 +13,7 @@ export default function(storyFn) {
   element.appendChild(innerElement);
 
   // the inner element should append the parent
-  innerElement.appendTo = function appendTo(el) {
+  innerElement.appendTo = function appendTo(el: any) {
     el.appendChild(element);
   };
 
diff --git a/addons/centered/src/helpers/json2CSS.js b/addons/centered/src/helpers/json2CSS.ts
similarity index 92%
rename from addons/centered/src/helpers/json2CSS.js
rename to addons/centered/src/helpers/json2CSS.ts
index 0126a5e0c046..7d8b9bc3d9c4 100644
--- a/addons/centered/src/helpers/json2CSS.js
+++ b/addons/centered/src/helpers/json2CSS.ts
@@ -10,7 +10,7 @@ import { document } from 'global';
  * @returns {string}
  * @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles
  */
-export default function jsonToCss(jsonStyles) {
+export default function jsonToCss(jsonStyles: any) {
   const frag = document.createElement('div');
 
   Object.keys(jsonStyles).forEach(key => {
diff --git a/addons/centered/src/html.js b/addons/centered/src/html.ts
similarity index 91%
rename from addons/centered/src/html.js
rename to addons/centered/src/html.ts
index 88e3e8ab4b70..7f736d593864 100644
--- a/addons/centered/src/html.js
+++ b/addons/centered/src/html.ts
@@ -4,7 +4,7 @@ import styles from './styles';
 const INNER_ID = 'sb-addon-centered-inner';
 const WRAPPER_ID = 'sb-addon-centered-wrapper';
 
-function getOrCreate(id, style) {
+function getOrCreate(id: string, style: any) {
   const elementOnDom = document.getElementById(id);
 
   if (elementOnDom) {
@@ -26,7 +26,7 @@ function getWrapperDiv() {
   return getOrCreate(WRAPPER_ID, styles.style);
 }
 
-export default function(storyFn) {
+export default function(storyFn: any) {
   const inner = getInnerDiv();
   const wrapper = getWrapperDiv();
   wrapper.appendChild(inner);
diff --git a/addons/centered/src/index.js b/addons/centered/src/index.ts
similarity index 100%
rename from addons/centered/src/index.js
rename to addons/centered/src/index.ts
diff --git a/addons/centered/src/mithril.js b/addons/centered/src/mithril.tsx
similarity index 90%
rename from addons/centered/src/mithril.js
rename to addons/centered/src/mithril.tsx
index 12c10927204f..cff211e7d4df 100644
--- a/addons/centered/src/mithril.js
+++ b/addons/centered/src/mithril.tsx
@@ -4,7 +4,7 @@
 import m from 'mithril';
 import styles from './styles';
 
-export default function(storyFn) {
+export default function(storyFn: any) {
   return {
     view: () => (
       <div style={styles.style}>
diff --git a/addons/centered/src/preact.js b/addons/centered/src/preact.tsx
similarity index 86%
rename from addons/centered/src/preact.js
rename to addons/centered/src/preact.tsx
index 71e9573ddb1c..c6d13a45c330 100644
--- a/addons/centered/src/preact.js
+++ b/addons/centered/src/preact.tsx
@@ -3,7 +3,7 @@
 import { h } from 'preact';
 import styles from './styles';
 
-export default function(storyFn) {
+export default function(storyFn: any) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
diff --git a/addons/centered/src/react.js b/addons/centered/src/react.tsx
similarity index 64%
rename from addons/centered/src/react.js
rename to addons/centered/src/react.tsx
index 4f29808de058..16b0ea1b3bb5 100644
--- a/addons/centered/src/react.js
+++ b/addons/centered/src/react.tsx
@@ -1,8 +1,7 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import React from 'react';
+import React, { ReactNode } from 'react';
 import styles from './styles';
 
-export default function(storyFn) {
+export default function(storyFn: any): ReactNode {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
diff --git a/addons/centered/src/styles.js b/addons/centered/src/styles.js
deleted file mode 100644
index e0fbb3474fbd..000000000000
--- a/addons/centered/src/styles.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const styles = {
-  style: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    display: 'flex',
-    alignItems: 'center',
-    overflow: 'auto',
-  },
-  innerStyle: {
-    margin: 'auto',
-    maxHeight: '100%', // Hack for centering correctly in IE11
-    overflow: 'auto',
-  },
-};
-
-export default styles;
diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts
new file mode 100644
index 000000000000..0c1ce1efae93
--- /dev/null
+++ b/addons/centered/src/styles.ts
@@ -0,0 +1,19 @@
+const styles = {
+  style: {
+    position: 'fixed' as const,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    display: 'flex' as const,
+    alignItems: 'center' as const,
+    overflow: 'auto' as const,
+  },
+  innerStyle: {
+    margin: 'auto' as const,
+    maxHeight: '100%' as const, // Hack for centering correctly in IE11
+    overflow: 'auto' as const,
+  },
+};
+
+export default styles;
diff --git a/addons/centered/src/svelte.js b/addons/centered/src/svelte.ts
similarity index 95%
rename from addons/centered/src/svelte.js
rename to addons/centered/src/svelte.ts
index a95f3e32ca4a..9f4a3e91db42 100644
--- a/addons/centered/src/svelte.js
+++ b/addons/centered/src/svelte.ts
@@ -18,7 +18,7 @@ const centeredStyles = {
  *
  * @see https://svelte.technology/guide#svelte-component
  */
-export default function(storyFn) {
+export default function(storyFn: any) {
   const { Component: OriginalComponent, props, on } = storyFn();
 
   return {
diff --git a/addons/centered/src/typings.d.ts b/addons/centered/src/typings.d.ts
new file mode 100644
index 000000000000..ad116294c0f6
--- /dev/null
+++ b/addons/centered/src/typings.d.ts
@@ -0,0 +1,2 @@
+declare module 'global';
+declare module '*.svelte';
diff --git a/addons/centered/src/vue.js b/addons/centered/src/vue.ts
similarity index 100%
rename from addons/centered/src/vue.js
rename to addons/centered/src/vue.ts
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
index 2d8c520d1008..43083a564c53 100644
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -5,13 +5,13 @@ exports[`Storyshots Addons|Centered Button 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "bottom": 0,
+      "bottom": "0",
       "display": "flex",
-      "left": 0,
+      "left": "0",
       "overflow": "auto",
       "position": "fixed",
-      "right": 0,
-      "top": 0,
+      "right": "0",
+      "top": "0",
     }
   }
 >
diff --git a/yarn.lock b/yarn.lock
index 5a558b392aeb..168a4bb4a911 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3455,6 +3455,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/mithril@^1.1.16":
+  version "1.1.16"
+  resolved "https://registry.yarnpkg.com/@types/mithril/-/mithril-1.1.16.tgz#97647157a4d6dacee8fc86414578c56723dfd715"
+  integrity sha512-+HlRvSpKwXP8RXh1hrIcgSHQ/Fh+5O9nYfG7fgNN7PGr2K03G+hLoiA+HXzmUJCsQfPEuNiBQ+TwRl6n7kerSw==
+
 "@types/node@*", "@types/node@~12.0.0":
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.1.tgz#3dde31f8da274dfeb90e96abf55038fef46285f0"
@@ -19981,7 +19986,7 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
-mithril@^1.1.6:
+mithril@*, mithril@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/mithril/-/mithril-1.1.6.tgz#bd2cc0de3d3c86076a6a7a30367a601a1bd108f3"
   integrity sha512-fWcUrQTCqu8M916rj1MFGlHaPh65rznPu6U/N2U9g81H89klDCIptSK5bnkNkC+jyi3sJIXjyGhSQjUnR8jzZA==

From 1fc343e301a65e106e528be60c96370871d5acab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Tue, 7 May 2019 14:29:52 +0200
Subject: [PATCH 3/5] refactor: improve typings in `storybook/addon-centered`

---
 addons/centered/src/ember.ts            | 2 +-
 addons/centered/src/helpers/json2CSS.ts | 6 +++---
 addons/centered/src/html.ts             | 6 +++---
 addons/centered/src/mithril.tsx         | 4 ++--
 addons/centered/src/preact.tsx          | 4 ++--
 addons/centered/src/react.tsx           | 2 +-
 addons/centered/src/styles.ts           | 8 ++++----
 addons/centered/src/svelte.ts           | 2 +-
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/addons/centered/src/ember.ts b/addons/centered/src/ember.ts
index 3f0bd7a21bbd..efb0cd21ff86 100644
--- a/addons/centered/src/ember.ts
+++ b/addons/centered/src/ember.ts
@@ -1,7 +1,7 @@
 import { document } from 'global';
 import styles from './styles';
 
-export default function(storyFn: any) {
+export default function(storyFn: () => { template: any; context: any }) {
   const { template, context } = storyFn();
 
   const element = document.createElement('div');
diff --git a/addons/centered/src/helpers/json2CSS.ts b/addons/centered/src/helpers/json2CSS.ts
index 7d8b9bc3d9c4..11e939b15962 100644
--- a/addons/centered/src/helpers/json2CSS.ts
+++ b/addons/centered/src/helpers/json2CSS.ts
@@ -10,11 +10,11 @@ import { document } from 'global';
  * @returns {string}
  * @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles
  */
-export default function jsonToCss(jsonStyles: any) {
-  const frag = document.createElement('div');
+export default function jsonToCss(jsonStyles: Partial<CSSStyleDeclaration>) {
+  const frag = document.createElement('div') as HTMLDivElement;
 
   Object.keys(jsonStyles).forEach(key => {
-    frag.style[key] = jsonStyles[key];
+    (frag.style as any)[key] = (jsonStyles as any)[key];
   });
 
   return frag.getAttribute('style');
diff --git a/addons/centered/src/html.ts b/addons/centered/src/html.ts
index 7f736d593864..1a22c7a1c64d 100644
--- a/addons/centered/src/html.ts
+++ b/addons/centered/src/html.ts
@@ -4,14 +4,14 @@ import styles from './styles';
 const INNER_ID = 'sb-addon-centered-inner';
 const WRAPPER_ID = 'sb-addon-centered-wrapper';
 
-function getOrCreate(id: string, style: any) {
+function getOrCreate(id: string, style: Partial<CSSStyleDeclaration>): HTMLDivElement {
   const elementOnDom = document.getElementById(id);
 
   if (elementOnDom) {
     return elementOnDom;
   }
 
-  const element = document.createElement('div');
+  const element = document.createElement('div') as HTMLDivElement;
   element.setAttribute('id', id);
   Object.assign(element.style, style);
 
@@ -26,7 +26,7 @@ function getWrapperDiv() {
   return getOrCreate(WRAPPER_ID, styles.style);
 }
 
-export default function(storyFn: any) {
+export default function(storyFn: () => any) {
   const inner = getInnerDiv();
   const wrapper = getWrapperDiv();
   wrapper.appendChild(inner);
diff --git a/addons/centered/src/mithril.tsx b/addons/centered/src/mithril.tsx
index cff211e7d4df..123bbe94b308 100644
--- a/addons/centered/src/mithril.tsx
+++ b/addons/centered/src/mithril.tsx
@@ -1,10 +1,10 @@
 /** @jsx m */
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import m from 'mithril';
+import m, { ComponentTypes } from 'mithril';
 import styles from './styles';
 
-export default function(storyFn: any) {
+export default function(storyFn: () => ComponentTypes) {
   return {
     view: () => (
       <div style={styles.style}>
diff --git a/addons/centered/src/preact.tsx b/addons/centered/src/preact.tsx
index c6d13a45c330..884289e759b1 100644
--- a/addons/centered/src/preact.tsx
+++ b/addons/centered/src/preact.tsx
@@ -1,9 +1,9 @@
 /** @jsx h */
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { h } from 'preact';
+import { Component, h } from 'preact';
 import styles from './styles';
 
-export default function(storyFn: any) {
+export default function(storyFn: () => Component) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
diff --git a/addons/centered/src/react.tsx b/addons/centered/src/react.tsx
index 16b0ea1b3bb5..fe54f4c9ccf5 100644
--- a/addons/centered/src/react.tsx
+++ b/addons/centered/src/react.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import styles from './styles';
 
-export default function(storyFn: any): ReactNode {
+export default function(storyFn: () => ReactNode) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts
index 0c1ce1efae93..c64ae5e58a15 100644
--- a/addons/centered/src/styles.ts
+++ b/addons/centered/src/styles.ts
@@ -1,10 +1,10 @@
 const styles = {
   style: {
     position: 'fixed' as const,
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+    top: '0',
+    left: '0',
+    bottom: '0',
+    right: '0',
     display: 'flex' as const,
     alignItems: 'center' as const,
     overflow: 'auto' as const,
diff --git a/addons/centered/src/svelte.ts b/addons/centered/src/svelte.ts
index 9f4a3e91db42..796233c7dc57 100644
--- a/addons/centered/src/svelte.ts
+++ b/addons/centered/src/svelte.ts
@@ -18,7 +18,7 @@ const centeredStyles = {
  *
  * @see https://svelte.technology/guide#svelte-component
  */
-export default function(storyFn: any) {
+export default function(storyFn: () => any) {
   const { Component: OriginalComponent, props, on } = storyFn();
 
   return {

From 53a6be863eaf0cc156f271e2926dc6042fd2291d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Fri, 17 May 2019 21:51:57 +0200
Subject: [PATCH 4/5] refactor: improve use of `as const` in `styles.ts` in
 addon-centered

---
 addons/centered/src/styles.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts
index c64ae5e58a15..d1a92167bfca 100644
--- a/addons/centered/src/styles.ts
+++ b/addons/centered/src/styles.ts
@@ -1,19 +1,19 @@
 const styles = {
   style: {
-    position: 'fixed' as const,
+    position: 'fixed',
     top: '0',
     left: '0',
     bottom: '0',
     right: '0',
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    overflow: 'auto' as const,
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'auto',
   },
   innerStyle: {
-    margin: 'auto' as const,
-    maxHeight: '100%' as const, // Hack for centering correctly in IE11
-    overflow: 'auto' as const,
+    margin: 'auto',
+    maxHeight: '100%', // Hack for centering correctly in IE11
+    overflow: 'auto',
   },
-};
+} as const;
 
 export default styles;

From d1227e21fa6ffb02ec93c4e82cd353a2601126a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= <gmaisse@leadformance.com>
Date: Fri, 17 May 2019 22:03:34 +0200
Subject: [PATCH 5/5] refactor: fix ESLint errors

---
 addons/centered/src/mithril.tsx | 2 --
 addons/centered/src/preact.tsx  | 1 -
 2 files changed, 3 deletions(-)

diff --git a/addons/centered/src/mithril.tsx b/addons/centered/src/mithril.tsx
index 123bbe94b308..c60d1e991b64 100644
--- a/addons/centered/src/mithril.tsx
+++ b/addons/centered/src/mithril.tsx
@@ -1,6 +1,4 @@
 /** @jsx m */
-
-// eslint-disable-next-line import/no-extraneous-dependencies
 import m, { ComponentTypes } from 'mithril';
 import styles from './styles';
 
diff --git a/addons/centered/src/preact.tsx b/addons/centered/src/preact.tsx
index 884289e759b1..559424960977 100644
--- a/addons/centered/src/preact.tsx
+++ b/addons/centered/src/preact.tsx
@@ -1,5 +1,4 @@
 /** @jsx h */
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { Component, h } from 'preact';
 import styles from './styles';