Typescript Integration - Phase 1

.eslintrc

@@ -1,30 +1,63 @@
 {
-  "extends": "curology",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": [
+    "curology",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "plugins": ["emotion"],
   "globals": {
     "document": false
   },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "./.storybook/webpack.config.js"
+      }
+    },
+    "import/extensions": [".js", ".md"]
+  },
+  "rules": {
+    "@typescript-eslint/camelcase": 0,
+    "@typescript-eslint/ban-ts-ignore": 0,
+    "react/state-in-constructor": 0,
+    "react/static-property-placement": 0,
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".tsx"] }],
+    "import/extensions": [2, { "svg": "always" }]
+  },
   "overrides": [
     {
-      "files": ["test.js"],
+      "files": ["test.js", "test.ts", "test.tsx"],
       "rules": {
         "no-undef": "off",
         "emotion/jsx-import": "error",
         "emotion/no-vanilla": "error",
         "emotion/import-from-emotion": "error",
         "emotion/styled-import": "error"
       }
-    }
-  ],
-  "settings": {
-    "import/resolver": {
-      "webpack": {
-        "config": "./.storybook/webpack.config.js"
+    },
+    {
+      "files": ["**/style.js"],
+      "rules": {
+        "indent": "off"
       }
     },
-    "import/extensions": [".js", ".jsx", ".md"]
-  },
-  "rules": {
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
-  }
+    {
+      "files": ["*.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": 0,
+        "@typescript-eslint/explicit-function-return-type": 0
+      }
+    },
+    {
+      "files": ["*.tsx"],
+      "rules": {
+        "react/prop-types": 0
+      }
+    }
+  ]
 }

.lintstagedrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  '!(style|styles|test).js': ['prettier --write', 'eslint --fix'],
+  '(style|styles|test).js': 'prettier --write',
+  'src/**/*.{ts,tsx}': [
+    'prettier --write',
+    'eslint --fix',
+    () => 'tsc -p tsconfig.json --noEmit --emitDeclarationOnly false',
+  ],
+  '*.{md,json}': 'prettier --write',
+};

.prettierignore

@@ -0,0 +1,6 @@
+src/svgs/deprecated/index.js
+src/svgs/emojis/index.js
+src/svgs/glyphs/index.js
+src/svgs/icons/index.js
+src/svgs/logos/index.js
+src/svgs/navIcons/index.js

.storybook/preview.js

@@ -99,7 +99,7 @@ addParameters({
   },
 });
 
-const req = require.context('../stories', true, /.js$/);
+const req = require.context('../stories', true, /.(ts|tsx|js)$/);
 function loadStories() {
   req.keys().forEach(req);
 }

.storybook/webpack.config.js

@@ -23,41 +23,54 @@ function removeDefaultStorybookSvgRule(config) {
 module.exports = webpackSettings => {
   // ESLint fix for `Resolve error: Cannot destructure property" `config` of 'undefined' or 'null'` in /stories/**/index.js files.
   if (!webpackSettings) return {};
-  const { config } = webpackSettings;
 
-  removeDefaultStorybookSvgRule(config);
+  const { config } = webpackSettings;
 
   config.resolve = {
     modules: [path.resolve(__dirname, '..'), 'node_modules'],
-    extensions: ['.js', '.jsx', '.md'],
+    extensions: ['.js', '.md', '.ts', '.tsx'],
   };
 
-  const customRules = [
-    {
-      test: /\.svg$/,
-      use: [
-        { loader: 'babel-loader', options: require('../babel.config.js') },
-        {
-          loader: '@svgr/webpack',
-          options: {
-            template: transformTemplateForUtilLocation(UTIL_LOCATION),
-            expandProps: false,
-            babel: false,
-          },
+  // SVG Rule
+  removeDefaultStorybookSvgRule(config);
+
+  config.module.rules.push({
+    test: /\.svg$/,
+    use: [
+      { loader: 'babel-loader', options: require('../babel.config.js') },
+      {
+        loader: '@svgr/webpack',
+        options: {
+          template: transformTemplateForUtilLocation(UTIL_LOCATION),
+          expandProps: false,
+          babel: false,
         },
-      ],
-    },
-  ];
+      },
+    ],
+  });
 
-  customRules.forEach(rule => config.module.rules.push(rule));
+  // Typescript Rule
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: ['@babel/preset-typescript'],
+        },
+      },
+    ],
+  });
 
+  // Storybook Index Loader Rule
   config.module.rules.push({
-    test: /index\.js?$/,
+    test: /index\.(ts|tsx|js)?$/,
     loaders: [require.resolve('@storybook/source-loader')],
     include: path.resolve(__dirname, '../stories'),
     enforce: 'pre',
   });
 
+  // CircularDependencyPlugin
   config.plugins.push(
     new CircularDependencyPlugin({
       exclude: /node_modules/,

CHANGELOG.md

@@ -1,5 +1,25 @@
 # CHANGELOG
 
+# v7.0.0-beta.4
+
+- [Internal] Convert Project to Typescript: Refactor TS files
+
+# v7.0.0-beta.3
+
+- [Internal] Convert Project to Typescript: update TSC declaration build config
+
+# v7.0.0-beta.2
+
+- [Internal] Convert Project to Typescript: update TS babel plugin
+
+# v7.0.0-beta.1
+
+- [Internal] Convert Project to Typescript: transpile TS files with Babel for Rollup build
+
+# v7.0.0-beta.0
+
+- [Internal] Convert Project to Typescript Updated ([#148](https://github.com/PocketDerm/radiance-ui/pull/148))
+
 # v6.4.1
 
 - Added CheckPlusIcon and CheckMinusIcon ([#220](https://github.com/curology/radiance-ui/pull/220))
@@ -52,6 +72,11 @@
 
 - Added Callout and Indicator new components ([#202](https://github.com/curology/radiance-ui/pull/202))
 
+# v5.0-beta
+
+- [Internal] Convert Project to Typescript ([#148](https://github.com/PocketDerm/radiance-ui/pull/148))
+- [Feature] Publish Generated Types declarations
+
 # v4.2.22
 
 - Updated border width on OptionButton ([#197](https://github.com/curology/radiance-ui/pull/197))

babel.config.js

@@ -1,13 +1,9 @@
 module.exports = {
-  presets: [
-    '@babel/env',
-    '@babel/react',
-    '@emotion/babel-preset-css-prop',
-  ],
+  presets: ['@babel/env', '@babel/react', '@emotion/babel-preset-css-prop'],
   plugins: [
     '@babel/plugin-proposal-export-namespace-from',
     '@babel/plugin-proposal-export-default-from',
-    ['@babel/plugin-proposal-class-properties', { 'loose': true }],
-    ['@babel/plugin-transform-parameters', { 'loose': true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-transform-parameters', { loose: true }],
   ],
 };

docs/accordion.md

@@ -66,7 +66,7 @@ The accordion style renders thumbnail images into the right hand side of the acc
 
 - **3+ images:** Renders thumbnail of first image and a counter of additional images
 
-Upon opening of the accordion, the thumbnail images should disapear from the title bar because they'll then be visible in the `content` container.
+Upon opening of the accordion, the thumbnail images should disappear from the title bar because they'll then be visible in the `content` container.
 
 ```jsx
 import { Accordion } from 'radiance-ui';

docs/alert.md

@@ -19,7 +19,7 @@ import { Fragment } from 'react';
 import { Alert } from 'radiance-ui';
 
 <Alert.Container>
-  <Alert content="Default Alert: it will dissapear after 3 seconds" />
+  <Alert content="Default Alert: it will disappear after 3 seconds" />
   <Alert
     content={
       <Fragment>

docs/button/button.md

@@ -64,7 +64,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons';
       Full Width Loading
     </Button>
   </Button.Container>
-</React.Fragment>
+</React.Fragment>;
 ```
 
 ## With Color
@@ -76,13 +76,25 @@ import { COLORS } from 'radiance-ui/lib/constants';
 <React.Fragment>
   <Button.Container>
     <Button buttonColor={COLORS.statusRed}>Primary Button</Button>
-    <Button buttonColor={COLORS.statusRed} buttonType="secondary">Secondary Button</Button>
-    <Button buttonColor={COLORS.statusRed} buttonType="tertiary">Tertiary Button</Button>
-    <Button buttonColor={COLORS.statusRed} buttonType="quaternary">Quaternary Button</Button>
-    <Button buttonColor={COLORS.statusRed} disabled>Disabled Button</Button>
-    <Button buttonColor={COLORS.statusRed} isFullWidth>Full Width Button</Button>
+    <Button buttonColor={COLORS.statusRed} buttonType="secondary">
+      Secondary Button
+    </Button>
+    <Button buttonColor={COLORS.statusRed} buttonType="tertiary">
+      Tertiary Button
+    </Button>
+    <Button buttonColor={COLORS.statusRed} buttonType="quaternary">
+      Quaternary Button
+    </Button>
+    <Button buttonColor={COLORS.statusRed} disabled>
+      Disabled Button
+    </Button>
+    <Button buttonColor={COLORS.statusRed} isFullWidth>
+      Full Width Button
+    </Button>
 
-    <Button buttonColor={COLORS.statusRed} isLoading>Primary Loading</Button>
+    <Button buttonColor={COLORS.statusRed} isLoading>
+      Primary Loading
+    </Button>
     <Button buttonColor={COLORS.statusRed} isLoading buttonType="secondary">
       Secondary Loading
     </Button>
@@ -96,25 +108,24 @@ import { COLORS } from 'radiance-ui/lib/constants';
       Full Width Loading
     </Button>
   </Button.Container>
-</React.Fragment>
+</React.Fragment>;
 ```
 
-
 <!-- STORY -->
 
 ### Proptypes
 
-| prop        | propType | required | default  | description                                                                                                                    |
-| ----------- | -------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| buttonType  | string   | no       | primary  | Determines the button's main style theme. Must be one of `primary`, `secondary`, `tertiary`, `quaternary`.                     |
-| buttonColor       | string   | no       | primary   | Determines the color of the button . Must be one of the predefined colors (e.g. `primary`, `statusRed`, `statusGreen`, etc). |
-| children    | node     | yes      | -        | node to be rendered inside the button. Recommended to be the button text                                                       |
-| disabled    | bool     | no       | false    | when disabled, click listener will not be called and the UI will look disabled                                                 |
-| icon        | node     | no       | null     | icon to render in the button. Recommended to use one of Radiance's icons                                                       |
-| isLoading   | bool     | no       | false    | renders loading state and prevents click listener from being called                                                            |
-| onClick     | func     | no       | () => {} | callback function called on click of the button                                                                                |
-| textColor   | string   | no       | ''       | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true)   |
-| isFullWidth | bool     | no       | false    | adjusts the default button styles so that the button takes the full width of the container. Intended for mobile-use only.      |
+| prop        | propType | required | default  | description                                                                                                                  |
+| ----------- | -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| buttonType  | string   | no       | primary  | Determines the button's main style theme. Must be one of `primary`, `secondary`, `tertiary`, `quaternary`.                   |
+| buttonColor | string   | no       | primary  | Determines the color of the button . Must be one of the predefined colors (e.g. `primary`, `statusRed`, `statusGreen`, etc). |
+| children    | node     | yes      | -        | node to be rendered inside the button. Recommended to be the button text                                                     |
+| disabled    | bool     | no       | false    | when disabled, click listener will not be called and the UI will look disabled                                               |
+| icon        | node     | no       | null     | icon to render in the button. Recommended to use one of Radiance's icons                                                     |
+| isLoading   | bool     | no       | false    | renders loading state and prevents click listener from being called                                                          |
+| onClick     | func     | no       | () => {} | callback function called on click of the button                                                                              |
+| textColor   | string   | no       | ''       | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true) |
+| isFullWidth | bool     | no       | false    | adjusts the default button styles so that the button takes the full width of the container. Intended for mobile-use only.    |
 
 ### Notes