Pladaria/ts

.babelrc

@@ -1,7 +1,15 @@
 {
     "presets": [
         "@babel/preset-react",
-        "@babel/preset-flow",
+        [
+            "@babel/preset-typescript",
+            {
+                "isTSX": true,
+                "allExtensions": true,
+                "allowNamespaces": false,
+                "allowDeclareFields": true
+            }
+        ],
         [
             "@babel/preset-env",
             {
@@ -15,7 +23,8 @@
     "plugins": [
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-nullish-coalescing-operator",
-        "@babel/plugin-proposal-optional-chaining"
+        "@babel/plugin-proposal-optional-chaining",
+        "macros"
     ],
     "env": {
         "test": {

.eslintrc.yml

@@ -1,6 +1,7 @@
-parser: babel-eslint
+parser: babel-eslint # typescript parser is used as an override (see overrides section)
 env:
     es6: true
+    node: true
     browser: true
     jest/globals: true
 parserOptions: # http://eslint.org/docs/user-guide/configuring.html#specifying-parser-options
@@ -21,12 +22,15 @@ plugins:
     - testing-library
     - flowtype
     - import
+    - '@typescript-eslint'
+extends:
+    - 'eslint:recommended'
 rules:
     # Basic rules
     default-case: error
     dot-notation: error
     eqeqeq: error
-    filenames/match-regex: [error, '^[a-z0-9]+(-[a-z0-9]+)*$']
+    filenames/match-regex: [error, '^[a-z0-9]+(-[a-z0-9]+)*(\.(config))?$'] # matches: "foo-bar" or "foo-bar.config"
     new-cap: [error, {newIsCap: true, capIsNew: false}]
     no-cond-assign: error
     no-debugger: error
@@ -154,3 +158,55 @@ rules:
     import/no-named-default: error
     import/no-useless-path-segments: error
     import/no-self-import: error
+
+overrides:
+    # overrides for TypeScript files
+    - files:
+          - '*.tsx'
+      parser: '@typescript-eslint/parser'
+      rules:
+          'flowtype/no-types-missing-file-annotation': off
+          no-unused-vars: off
+          '@typescript-eslint/no-unused-vars':
+              - error
+              - vars: all
+                args: after-used
+                ignoreRestSiblings: true
+          '@typescript-eslint/no-empty-function': off
+          '@typescript-eslint/no-explicit-any': off
+          '@typescript-eslint/ban-ts-comment':
+              - error
+              - ts-expect-error: allow-with-description
+                ts-ignore: true
+                ts-nocheck: true
+                ts-check: false
+          '@typescript-eslint/no-namespace':
+              - error
+              - allowDeclarations: false
+                allowDefinitionFiles: false
+          'no-restricted-syntax':
+              - error
+              - selector: TSEnumDeclaration
+                message: 'enums are not allowed'
+          '@typescript-eslint/prefer-as-const': off # TODO: review this rule and check how flowgen translates "as const" syntax
+      extends:
+          - 'eslint:recommended'
+          - 'plugin:@typescript-eslint/recommended'
+
+    # overrides for Type Tests
+    - files:
+          - '**/__type_tests__/*-type-test.tsx'
+          - '**/__type_tests__/*-type-test.js'
+      rules:
+          'no-unused-vars': off
+          'babel/no-unused-expressions': off
+          '@typescript-eslint/no-unused-vars': off
+
+    # overrides for flow definitions
+    - files:
+          - '*.js.flow'
+      rules:
+          filenames/match-regex: [error, '^[a-z0-9]+(-[a-z0-9]+)*\.js$'] # matches: "foo-bar.js"
+          no-use-before-define: off
+          import/no-duplicates: off
+          no-undef: off

.flowconfig

@@ -1,7 +1,10 @@
 [ignore]
 .*/node_modules/.*
 !.*/node_modules/@tef-novum/.*
-<PROJECT_ROOT>/dist/.*
+<PROJECT_ROOT>/playroom/.*
+<PROJECT_ROOT>/.storybook/.*
+<PROJECT_ROOT>/scripts/dts-to-flow/overrides
+
 
 [include]
 

.storybook/colors.js

@@ -0,0 +1,38 @@
+// Workaround until these issues get fixed and released
+// https://github.com/storybookjs/storybook/pull/10980
+// https://github.com/storybookjs/storybook/pull/10813
+//
+// At this moment we cannot write addon's register in TSX (extension must be .js)
+// but then we cannot import stuff from ./src
+// So this module replaces the required parts from ./src/colors.tsx
+
+/**
+ * @param {'Movistar' | 'Vivo' | 'O2'} skin
+ */
+export const getColors = (skin) => {
+    switch (skin) {
+        case 'Movistar':
+            return {
+                PRIMARY: '#019DF4',
+                TEXT_PRIMARY: '#313235',
+                TEXT_PRIMARY_INVERSE: '#FFFFFF',
+                TEXT_SECONDARY: '#86888C',
+            };
+        case 'Vivo':
+            return {
+                PRIMARY: '#660099',
+                TEXT_PRIMARY: '#000000',
+                TEXT_PRIMARY_INVERSE: '#FFFFFF',
+                TEXT_SECONDARY: '#666666',
+            };
+        case 'O2':
+            return {
+                PRIMARY: '#032B5A',
+                TEXT_PRIMARY: '#000033',
+                TEXT_PRIMARY_INVERSE: '#FFFFFF',
+                TEXT_SECONDARY: '#757575',
+            };
+        default:
+            throw Error('Unexpected skin: ' + skin);
+    }
+};

.storybook/main.js

@@ -1,15 +1,14 @@
-// @flow
 const path = require('path');
 
-const config /*: any*/ = {
-    stories: ['./welcome-story.js', '../src/**/__stories__/*-story.js'],
+module.exports = {
+    stories: ['./welcome-story.tsx', '../src/**/__stories__/*-story.tsx'],
     addons: [
         '@storybook/addon-links',
         {
             name: '@storybook/addon-storysource',
             options: {
                 rule: {
-                    test: [/\-story\.js/],
+                    test: [/-story\.tsx/],
                     include: [path.resolve(__dirname, '..', 'src'), __dirname],
                 },
                 loaderOptions: {
@@ -19,6 +18,16 @@ const config /*: any*/ = {
         },
         './.storybook/theme-selector-addon/register',
     ],
+    webpackFinal: async (config) => {
+        config.module.rules.push({
+            test: /\.tsx$/,
+            use: [
+                {
+                    loader: require.resolve('ts-loader'),
+                },
+            ],
+        });
+        config.resolve.extensions.push('.tsx');
+        return config;
+    },
 };
-
-module.exports = config;

.storybook/manager.js

@@ -1,4 +1,3 @@
-// @flow
 import '../css/roboto.css';
 import '../css/reset.css';
 import {addons} from '@storybook/addons';

.storybook/preview.js

@@ -1,4 +1,3 @@
-// @flow
 import '../css/roboto.css';
 import '../css/reset.css';
 import * as React from 'react';
@@ -7,11 +6,8 @@ import {ThemeContextProvider, Box, MOVISTAR_SKIN, VIVO_SKIN, O2_SKIN} from '../s
 import addons from '@storybook/addons';
 import getTheme from './theme-selector-addon/themes';
 
-import type {Context} from '@storybook/react';
-import type {Skin} from '../src';
-
-const getUserAgent = (): string => self.navigator.userAgent || '';
-const isRunningAcceptanceTest = (): boolean => getUserAgent().includes('acceptance-test');
+const getUserAgent = () => self.navigator.userAgent || '';
+const isRunningAcceptanceTest = () => getUserAgent().includes('acceptance-test');
 
 const acceptanceStyles = `
 *, *:after, *:before {
@@ -29,18 +25,7 @@ const acceptanceStyles = `
     height: 0 !important;
 }`;
 
-type DecoratorProps = {
-    Story: React.ComponentType<any>,
-    context?: {
-        ...Context,
-        parameters: {
-            fullScreen?: boolean,
-        },
-        ...
-    },
-};
-
-const LayoutDecorator = ({Story, context}: DecoratorProps) => {
+const LayoutDecorator = ({Story, context}) => {
     const styles = isRunningAcceptanceTest() ? <style>{acceptanceStyles}</style> : null;
 
     return (
@@ -53,19 +38,19 @@ const LayoutDecorator = ({Story, context}: DecoratorProps) => {
     );
 };
 
-const getSkin = (searchParams): ?Skin => {
+const getSkin = (searchParams) => {
     const qsSkin = searchParams.get('skin');
     return [MOVISTAR_SKIN, O2_SKIN, VIVO_SKIN].find((skin) => skin === qsSkin);
 };
 
-const getPlatform = (searchParams): ?'ios' | 'android' => {
+const getPlatform = (searchParams) => {
     const qsPlatform = searchParams.get('platform');
     return ['ios', 'android'].find((platform) => platform === qsPlatform);
 };
 
-const ThemeDecorator = ({Story}: DecoratorProps) => {
+const ThemeDecorator = ({Story}) => {
     const searchParams = new URLSearchParams(location.search);
-    const [skin, setSkin] = React.useState<?Skin>(getSkin(searchParams));
+    const [skin, setSkin] = React.useState(getSkin(searchParams));
 
     React.useEffect(() => {
         const channel = addons.getChannel();
@@ -81,5 +66,5 @@ const ThemeDecorator = ({Story}: DecoratorProps) => {
     );
 };
 
-addDecorator((Story, context: any) => <LayoutDecorator Story={Story} context={context} />);
+addDecorator((Story, context) => <LayoutDecorator Story={Story} context={context} />);
 addDecorator((Story) => <ThemeDecorator Story={Story} />);

.storybook/storybook-manager-theme.js

@@ -1,11 +1,12 @@
-// @flow
 import logo from '../img/mistica-logo.svg';
-import {getColors} from '../src';
-import {create} from '@storybook/theming/create';
+import {getColors} from './colors';
 
-import type {Skin} from '../src';
+import {create} from '@storybook/theming/create';
 
-const createTheme = (skin: Skin): any => {
+/**
+ * @param {'Movistar' | 'Vivo' | 'O2'} skin
+ */
+const createTheme = (skin) => {
     const colors = getColors(skin);
     return create({
         base: 'light',

.storybook/theme-selector-addon/register.js

@@ -1,8 +1,7 @@
-// @flow
 import * as React from 'react';
 import addonApi, {types} from '@storybook/addons';
 import {WithTooltip, IconButton, TooltipLinkList} from '@storybook/components';
-import {getColors} from '../../src';
+import {getColors} from '../colors';
 import {AVAILABLE_THEMES} from './themes';
 import createManagerTheme from '../storybook-manager-theme';
 
@@ -26,7 +25,7 @@ const ThemeSelectorAddon = ({api}) => {
 
         api.setOptions({theme: createManagerTheme(currentSkin)});
 
-        // We need this timeout because there could be some race condition between addon mount and storibook manager initialization on page load.
+        // We need this timeout because there could be some race condition between addon mount and storybook manager initialization on page load
         const tid = setTimeout(() => {
             api.setOptions({theme: createManagerTheme(currentSkin)});
         }, 100);

.storybook/theme-selector-addon/themes.js

@@ -1,25 +1,22 @@
-// @flow
-import type {ThemeConfig, Skin} from '../../src';
-
-export const Movistar: ThemeConfig = {
+export const Movistar = {
     i18n: {locale: 'es-ES', phoneNumberFormattingRegionCode: 'ES'},
     skin: 'Movistar',
 };
 
-export const O2: ThemeConfig = {
+export const O2 = {
     i18n: {locale: 'en-US', phoneNumberFormattingRegionCode: 'GB'},
     skin: 'O2',
 };
 
-export const Vivo: ThemeConfig = {
+export const Vivo = {
     i18n: {locale: 'pt-BR', phoneNumberFormattingRegionCode: 'BR'},
     skin: 'Vivo',
 };
 
 export const AVAILABLE_THEMES = [Movistar, O2, Vivo];
 
-export default (selectedSkin: ?Skin, selectedPlatform: ?'ios' | 'android'): ThemeConfig => {
-    const themeConfig: ThemeConfig = AVAILABLE_THEMES.find(({skin}) => skin === selectedSkin) || Movistar;
+export default (selectedSkin, selectedPlatform) => {
+    const themeConfig = AVAILABLE_THEMES.find(({skin}) => skin === selectedSkin) || Movistar;
     return selectedPlatform
         ? {
               ...themeConfig,

.storybook/welcome-story.js

@@ -1,4 +1,3 @@
-// @flow
 import * as React from 'react';
 import {Text, Stack, Box, ResponsiveLayout, useTheme, ButtonLink, TextLink} from '../src';
 import logo from '../img/mistica-react-logo.svg';
@@ -16,7 +15,7 @@ const Paragraph = ({children}) => {
     );
 };
 
-export const Mistica = (): React.Node => {
+export const Mistica = () => {
     return (
         <ResponsiveLayout>
             <Box paddingY={32}>

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-    "javascript.validate.enable": false
+    "javascript.validate.enable": false,
+    "typescript.tsdk": "node_modules/typescript/lib",
+    "search.exclude": {
+        "**/node_modules": true,
+        "**/flow-defs": true,
+        "**/flow-typed": true
+    }
 }