Merge pull request #6772 from gaetanmaisse/ts-migration/addon-centered

Migrate addon centered to TS

addons/centered/package.json

@@ -18,7 +18,7 @@
   "license": "MIT",
   "author": "Muhammed Thanish <[email protected]>",
   "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"
   }

addons/centered/src/angular.js → 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 {

addons/centered/src/ember.js → 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: () => { template: any; context: 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);
   };
 

addons/centered/src/helpers/json2CSS.js → 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) {
-  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');

addons/centered/src/html.js → 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, style) {
+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) {
+export default function(storyFn: () => any) {
   const inner = getInnerDiv();
   const wrapper = getWrapperDiv();
   wrapper.appendChild(inner);

addons/centered/src/mithril.js → addons/centered/src/mithril.tsx

@@ -1,10 +1,8 @@
 /** @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) {
+export default function(storyFn: () => ComponentTypes) {
   return {
     view: () => (
       <div style={styles.style}>

addons/centered/src/preact.js → addons/centered/src/preact.tsx

@@ -1,9 +1,8 @@
 /** @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) {
+export default function(storyFn: () => Component) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>

addons/centered/src/react.js → 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: () => ReactNode) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>

addons/centered/src/styles.js → addons/centered/src/styles.ts

@@ -1,10 +1,10 @@
 const styles = {
   style: {
     position: 'fixed',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
+    top: '0',
+    left: '0',
+    bottom: '0',
+    right: '0',
     display: 'flex',
     alignItems: 'center',
     overflow: 'auto',
@@ -14,6 +14,6 @@ const styles = {
     maxHeight: '100%', // Hack for centering correctly in IE11
     overflow: 'auto',
   },
-};
+} as const;
 
 export default styles;

addons/centered/src/svelte.js → 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 {

addons/centered/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module 'global';
+declare module '*.svelte';

addons/centered/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

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",
     }
   }
 >

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==