Merge pull request #13450 from storybookjs/tech/migrate-rax-to-ts

Rax: Migrate to TS

.circleci/config.yml

@@ -12,7 +12,7 @@ executors:
     docker:
       - image: circleci/node:10
         environment:
-          NODE_OPTIONS: --max_old_space_size=4096
+          NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
   sb_node_10_browsers:
     parameters:
@@ -25,7 +25,7 @@ executors:
     docker:
       - image: circleci/node:10-browsers
         environment:
-          NODE_OPTIONS: --max_old_space_size=4096
+          NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
   sb_node_12_browsers:
     parameters:
@@ -38,7 +38,7 @@ executors:
     docker:
       - image: circleci/node:12-browsers
         environment:
-          NODE_OPTIONS: --max_old_space_size=4096
+          NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
 
 orbs:
@@ -76,7 +76,7 @@ commands:
 jobs:
   build:
     executor:
-      class: medium
+      class: large
       name: sb_node_10_classic
     steps:
       - git-shallow-clone/checkout_advanced:

app/rax/package.json

@@ -54,6 +54,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@types/rax": "^1.0.2",
     "rax": "^1.1.0"
   },
   "peerDependencies": {

app/rax/src/client/preview/index.js → app/rax/src/client/preview/index.ts

@@ -15,7 +15,8 @@ export const {
 } = clientApi;
 
 const framework = 'rax';
-export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const configure = (...args) => coreConfigure(framework, ...args);
+export const storiesOf = (...args: any) =>
+  clientApi.storiesOf(...args).addParameters({ framework });
+export const configure = (...args: any) => coreConfigure(framework, ...args);
 
 export { forceReRender };

app/rax/src/client/preview/render.js → app/rax/src/client/preview/render.ts

@@ -12,7 +12,12 @@ export default function renderMain({
   name,
   showMain,
   showError,
-  // forceRender,
+}: {
+  storyFn: Function;
+  kind: string;
+  name: string;
+  showMain: () => any;
+  showError: (input: { title: string; description: string }) => void;
 }) {
   const Element = storyFn;
 
@@ -29,6 +34,11 @@ export default function renderMain({
 
   showMain();
 
+  // There is something miscellaneous here, for now, more precisely on L23,
+  // as we are using the storyFn directly and not calling it, so `Element` is a
+  // function but according to `createElement` types, there is no signature
+  // taking a function as input.
+  // @ts-expect-error
   render(createElement(Element), rootElement, {
     driver: DriverDOM,
   });

app/rax/src/server/framework-preset-rax.js → app/rax/src/server/framework-preset-rax.ts

@@ -1,4 +1,6 @@
-export function babelDefault(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
     presets: [

app/rax/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';

app/rax/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "types": ["webpack-env", "node"]
+  }
+}

yarn.lock

@@ -5123,6 +5123,14 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/rax@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/rax/-/rax-1.0.2.tgz#1a6121244a0ad31deecdcede2651efa4ec9ead2a"
+  integrity sha512-oB3tpuFhFc4osp2brErugGbInNQs15GSmE21PXh7LVMPwUaemBTMjzGxXrzgvoW/marD9sRxPJTkf53UJpjnnA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/reach__router@^1.3.5":
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.6.tgz#413417ce74caab331c70ce6a03a4c825188e4709"