feat: typescript (#854)

* feat: init typescript * chore: fix shouldForwardProp types for <Box /> * chore: convert <Tag /> * chore: convert <Badge /> * fix: remove ts-ignore * chore: add types declaration for Badge & Tag * fix: typo * fix: tests * fix: lint * fix: badge component * feat: accordion component * chore: convert <Button /> * fix: button component * feat: add WuiProps on @welcome-ui/system * fix: replace SystemProps by WuiProps on button * feat: convert <Text /> * feat: convert <VariantIcon /> * feat: convert <Hint /> * feat: convert <Table /> * feat: convert <Label /> * feat: convert <UniversalLink /> * feat: convert <Link /> * feat: stack to typescropt (#860) * feat: stack to typescropt * fix: missing converted files & wrong types * feat: convert <Textarea /> * feat: convert <Checkbox /> * fix: textarea type * chore: convert Modal to TS * feat: convert <ClearButton /> * Chore upgrade xstyled v3 (#858) * chore: upgrade styled-components to v 5.3.0 styled-components * @welcome-ui/accordion: ^5.2.1 → 5.3.0 * @welcome-ui/alert: ^5.2.1 → 5.3.0 * @welcome-ui/avatar: ^5.2.1 → 5.3.0 * @welcome-ui/badge: ^5.2.1 → 5.3.0 * @welcome-ui/box: ^5.2.1 → 5.3.0 * @welcome-ui/breadcrumb: ^5.2.1 → 5.3.0 * @welcome-ui/button: ^5.2.1 → 5.3.0 * @welcome-ui/card: ^5.2.1 → 5.3.0 * @welcome-ui/checkbox: ^5.2.1 → 5.3.0 * @welcome-ui/clear-button: ^5.2.1 → 5.3.0 * @welcome-ui/connected-field: ^5.2.1 → 5.3.0 * @welcome-ui/core: ^5.2.1 → 5.3.0 * @welcome-ui/date-picker: ^5.2.1 → 5.3.0 * @welcome-ui/date-time-picker: ^5.2.1 → 5.3.0 * @welcome-ui/date-time-picker-common: ^5.2.1 → 5.3.0 * @welcome-ui/drawer: ^5.2.1 → 5.3.0 * @welcome-ui/dropdown-menu: ^5.2.1 → 5.3.0 * @welcome-ui/emoji: ^5.2.1 → 5.3.0 * @welcome-ui/emoji-picker: ^5.2.1 → 5.3.0 * @welcome-ui/field: ^5.2.1 → 5.3.0 * @welcome-ui/field-group: ^5.2.1 → 5.3.0 * @welcome-ui/file-drop: ^5.2.1 → 5.3.0 * @welcome-ui/file-upload: ^5.2.1 → 5.3.0 * @welcome-ui/group: ^5.2.1 → 5.3.0 * @welcome-ui/hint: ^5.2.1 → 5.3.0 * @welcome-ui/icon: ^5.2.1 → 5.3.0 * @welcome-ui/icons.font: ^5.2.1 → 5.3.0 * @welcome-ui/input-text: ^5.2.1 → 5.3.0 * @welcome-ui/label: ^5.2.1 → 5.3.0 * @welcome-ui/link: ^5.2.1 → 5.3.0 * @welcome-ui/loader: ^5.2.1 → 5.3.0 * @welcome-ui/markdown-editor: ^5.2.1 → 5.3.0 * @welcome-ui/modal: ^5.2.1 → 5.3.0 * @welcome-ui/pagination: ^5.2.1 → 5.3.0 * @welcome-ui/picker: ^5.2.1 → 5.3.0 * @welcome-ui/popover: ^5.2.1 → 5.3.0 * @welcome-ui/radio: ^5.2.1 → 5.3.0 * @welcome-ui/radio-group: ^5.2.1 → 5.3.0 * @welcome-ui/radio-tab: ^5.2.1 → 5.3.0 * @welcome-ui/search: ^5.2.1 → 5.3.0 * @welcome-ui/select: ^5.2.1 → 5.3.0 * @welcome-ui/shape: ^5.2.1 → 5.3.0 * @welcome-ui/stack: ^5.2.1 → 5.3.0 * @welcome-ui/swiper: ^5.2.1 → 5.3.0 * @welcome-ui/system: ^5.2.1 → 5.3.0 * @welcome-ui/table: ^5.2.1 → 5.3.0 * @welcome-ui/tabs: ^5.2.1 → 5.3.0 * @welcome-ui/tag: ^5.2.1 → 5.3.0 * @welcome-ui/text: ^5.2.1 → 5.3.0 * @welcome-ui/textarea: ^5.2.1 → 5.3.0 * @welcome-ui/time-picker: ^5.2.1 → 5.3.0 * @welcome-ui/toast: ^5.2.1 → 5.3.0 * @welcome-ui/toggle: ^5.2.1 → 5.3.0 * @welcome-ui/tooltip: ^5.2.1 → 5.3.0 * @welcome-ui/universal-link: ^5.2.1 → 5.3.0 * @welcome-ui/utils: ^5.2.1 → 5.3.0 * @welcome-ui/utils.copy: ^5.2.1 → 5.3.0 * @welcome-ui/variant-icon: ^5.2.1 → 5.3.0 * chore: upgrade @xstyled-styled-components to v 3.0.1 @xstyled/styled-components * @welcome-ui/accordion: ^2.2.3 → ^3.0.1 * @welcome-ui/alert: ^2.2.3 → ^3.0.1 * @welcome-ui/avatar: ^2.2.3 → ^3.0.1 * @welcome-ui/box: ^2.2.3 → ^3.0.1 * @welcome-ui/breadcrumb: ^2.2.3 → ^3.0.1 * @welcome-ui/button: ^2.2.3 → ^3.0.1 * @welcome-ui/card: ^2.2.3 → ^3.0.1 * @welcome-ui/checkbox: ^2.2.3 → ^3.0.1 * @welcome-ui/clear-button: ^2.2.3 → ^3.0.1 * @welcome-ui/core: ^2.2.3 → ^3.0.1 * @welcome-ui/date-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/date-time-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/date-time-picker-common: ^2.2.3 → ^3.0.1 * @welcome-ui/drawer: ^2.2.3 → ^3.0.1 * @welcome-ui/dropdown-menu: ^2.2.3 → ^3.0.1 * @welcome-ui/emoji-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/field: ^2.2.3 → ^3.0.1 * @welcome-ui/field-group: ^2.2.3 → ^3.0.1 * @welcome-ui/file-drop: ^2.2.3 → ^3.0.1 * @welcome-ui/file-upload: ^2.2.3 → ^3.0.1 * @welcome-ui/group: ^2.2.3 → ^3.0.1 * @welcome-ui/hint: ^2.2.3 → ^3.0.1 * @welcome-ui/icon: ^2.2.3 → ^3.0.1 * @welcome-ui/icons.font: ^2.2.3 → ^3.0.1 * @welcome-ui/input-text: ^2.2.3 → ^3.0.1 * @welcome-ui/label: ^2.2.3 → ^3.0.1 * @welcome-ui/link: ^2.2.3 → ^3.0.1 * @welcome-ui/loader: ^2.2.3 → ^3.0.1 * @welcome-ui/markdown-editor: ^2.2.3 → ^3.0.1 * @welcome-ui/modal: ^2.2.3 → ^3.0.1 * @welcome-ui/pagination: ^2.2.3 → ^3.0.1 * @welcome-ui/picker: ^2.2.3 → ^3.0.1 * @welcome-ui/popover: ^2.2.3 → ^3.0.1 * @welcome-ui/radio: ^2.2.3 → ^3.0.1 * @welcome-ui/radio-group: ^2.2.3 → ^3.0.1 * @welcome-ui/radio-tab: ^2.2.3 → ^3.0.1 * @welcome-ui/search: ^2.2.3 → ^3.0.1 * @welcome-ui/select: ^2.2.3 → ^3.0.1 * @welcome-ui/shape: ^2.2.3 → ^3.0.1 * @welcome-ui/stack: ^2.2.3 → ^3.0.1 * @welcome-ui/swiper: ^2.2.3 → ^3.0.1 * @welcome-ui/system: ^2.2.3 → ^3.0.1 * @welcome-ui/table: ^2.2.3 → ^3.0.1 * @welcome-ui/tabs: ^2.2.3 → ^3.0.1 * @welcome-ui/tag: ^2.2.3 → ^3.0.1 * @welcome-ui/text: ^2.2.3 → ^3.0.1 * @welcome-ui/textarea: ^2.2.3 → ^3.0.1 * @welcome-ui/time-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/toast: ^2.2.3 → ^3.0.1 * @welcome-ui/toggle: ^2.2.3 → ^3.0.1 * @welcome-ui/tooltip: ^2.2.3 → ^3.0.1 * @welcome-ui/universal-link: ^2.2.3 → ^3.0.1 * @welcome-ui/utils: ^2.2.3 → ^3.0.1 * @welcome-ui/variant-icon: ^2.2.3 → ^3.0.1 * fix: styled-components version with ^ Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * chore: upgrade @xstyled/system to v3.0.1 @xstyled/system * @welcome-ui/accordion: ^2.2.3 → ^3.0.1 * @welcome-ui/alert: ^2.2.3 → ^3.0.1 * @welcome-ui/avatar: ^2.2.3 → ^3.0.1 * @welcome-ui/breadcrumb: ^2.2.3 → ^3.0.1 * @welcome-ui/button: ^2.2.3 → ^3.0.1 * @welcome-ui/card: ^2.2.3 → ^3.0.1 * @welcome-ui/checkbox: ^2.2.3 → ^3.0.1 * @welcome-ui/clear-button: ^2.2.3 → ^3.0.1 * @welcome-ui/core: ^2.2.3 → ^3.0.1 * @welcome-ui/date-time-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/date-time-picker-common: ^2.2.3 → ^3.0.1 * @welcome-ui/drawer: ^2.2.3 → ^3.0.1 * @welcome-ui/emoji-picker: ^2.2.3 → ^3.0.1 * @welcome-ui/field: ^2.2.3 → ^3.0.1 * @welcome-ui/field-group: ^2.2.3 → ^3.0.1 * @welcome-ui/file-drop: ^2.2.3 → ^3.0.1 * @welcome-ui/hint: ^2.2.3 → ^3.0.1 * @welcome-ui/icon: ^2.2.3 → ^3.0.1 * @welcome-ui/icons.font: ^2.2.3 → ^3.0.1 * @welcome-ui/input-text: ^2.2.3 → ^3.0.1 * @welcome-ui/label: ^2.2.3 → ^3.0.1 * @welcome-ui/link: ^2.2.3 → ^3.0.1 * @welcome-ui/loader: ^2.2.3 → ^3.0.1 * @welcome-ui/markdown-editor: ^2.2.3 → ^3.0.1 * @welcome-ui/modal: ^2.2.3 → ^3.0.1 * @welcome-ui/pagination: ^2.2.3 → ^3.0.1 * @welcome-ui/picker: ^2.2.3 → ^3.0.1 * @welcome-ui/popover: ^2.2.3 → ^3.0.1 * @welcome-ui/radio: ^2.2.3 → ^3.0.1 * @welcome-ui/search: ^2.2.3 → ^3.0.1 * @welcome-ui/select: ^2.2.3 → ^3.0.1 * @welcome-ui/stack: ^2.2.3 → ^3.0.1 * @welcome-ui/swiper: ^2.2.3 → ^3.0.1 * @welcome-ui/system: ^2.2.3 → ^3.0.1 * @welcome-ui/table: ^2.2.3 → ^3.0.1 * @welcome-ui/tag: ^2.2.3 → ^3.0.1 * @welcome-ui/text: ^2.2.3 → ^3.0.1 * @welcome-ui/textarea: ^2.2.3 → ^3.0.1 * @welcome-ui/toast: ^2.2.3 → ^3.0.1 * @welcome-ui/toggle: ^2.2.3 → ^3.0.1 * @welcome-ui/tooltip: ^2.2.3 → ^3.0.1 * @welcome-ui/utils: ^2.2.3 → ^3.0.1 * @welcome-ui/variant-icon: ^2.2.3 → ^3.0.1 * fix: tests Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: use Box from welcome-ui Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: mjs files Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> Signed-off-by: Guillaume Rousseau <guillaume.rousseau@wttj.co> Signed-off-by: Mick Le Ralec<mickael.leralec@wttj.co> * fix: widths in percentage using a value between 0 and 1 Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: remove mjs config as we no longer have mjs files Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * fix: yarn.lock Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co> * feat: convert <InputText /> * feat: convert <Toggle /> * fix: remove welcomeUI from checkbox styles type * chore: convert Tooltip * chore: type colors/underline theme values * fix: clearButton type * fix: toggle type * feat: convert @welcome-ui/utils * fix: revert Core for tests * fix: tests * feat: convert Core * feat: convert Core * fix: export core * chore: add theme for tags * chore: add theme for tooltips * chore: add theme for checkboxes * chore: add theme for defaultFields * chore: add theme for modal * chore: add theme for toggle * chore: add theme for hint * chore: add theme for accordion/icons * chore: add theme for links * chore: add theme for table * chore: add theme for fields * chore: add theme for missing packages * fix: remove ts-ignore on core * feat: convert Emoji (#861) * feat: convert Emoji * fix: convert Emoji rollback prettier upgrade * fix: import WuiProps from Wui system * fix: line breaks in Emoji func * fix: use react FC instead of jsx element * fix: updates tsconfig.json with root directory * fix: broken yarn start * chore: tsconfig faster (#864) * chore: add missing options on tsConfig for :sonic: * fix: add tsconfig.build.json * fix: extends default tsconfig * chore: refactor * feat: typescript shape and loader components (#859) * feat: convertion of Shape and Loader to typescript * fix: add of wuiProps. npmignore * fix: fpascal case types & generic size type * fix: remove useless SystemProps * fix: remove useless WuiProps & updated to typescript test files Co-authored-by: Duarte <duarte.paradela@wttj.co> * fix: bump aws-s3 orb version (#871) * feat: typescript on Avatar component (#865) * feat: typescript on Breadcrumb component (#866) * feat: typescript on Card component (#867) * chore: add test props on WuiProps (#870) * chore: add test props inside WuiProps * chore: remove useless props * feat: alert to typescript (#868) * feat: alert to typescript * fix: remove useless dataTestId type * feat: utils.copy to typescript (#873) * feat: utils.copy to typescript * fix: use | operator for targeted element in refObject Co-authored-by: cnairiwttj <camille.nairi@wttj.co> Co-authored-by: guillaumewttj <61152048+guillaumewttj@users.noreply.github.com> Co-authored-by: Robert Douglas <robert@wttj.co> Co-authored-by: Paul-Xavier Ceccaldi <pix@wttj.co> Co-authored-by: cnairiwttj <86954832+cnairiwttj@users.noreply.github.com> Co-authored-by: DuarteParadela <72656743+DuarteParadela@users.noreply.github.com> Co-authored-by: Duarte <duarte.paradela@wttj.co> Co-authored-by: Théo Mesnil <50322149+theo-mesnil@users.noreply.github.com>
WTTJ · Jul 26, 2021 · ff70f26 · ff70f26
1 parent ad49c46
commit ff70f26
Show file tree

Hide file tree

Showing 335 changed files with 7,432 additions and 5,209 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -5,7 +5,7 @@ defaults: &defaults
 
 version: 2.1
 orbs:
-  aws-s3: circleci/aws-s3@1.0.13
+  aws-s3: circleci/aws-s3@2.0.0
 jobs:
   checkout:
     <<: *defaults

diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
 **/node_modules/**
-**/dist/**
+**/dist/**
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1 +1,18 @@
-module.exports = require('wttj-config-front/.eslintrc')
+const merge = require('lodash.merge')
+const shared = require('wttj-config-front/.eslintrc')
+
+const local = {
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      extends: ['plugin:@typescript-eslint/recommended'],
+      rules: {
+        'react/prop-types': 'off',
+        '@typescript-eslint/no-unused-vars': 'error'
+      }
+    }
+  ]
+}
+
+module.exports = merge({}, shared, local)
diff --git a/babel.config.js b/babel.config.js
@@ -4,7 +4,11 @@ module.exports = {
       plugins: ['@babel/plugin-transform-modules-commonjs', '@babel/plugin-transform-runtime']
     }
   },
-  presets: [['@babel/preset-env', { modules: false, loose: true }], '@babel/preset-react'],
+  presets: [
+    ['@babel/preset-env', { modules: false, loose: true }],
+    '@babel/preset-typescript',
+    '@babel/preset-react'
+  ],
   plugins: [
     '@babel/plugin-proposal-optional-chaining',
     ['transform-react-remove-prop-types', { removeImport: true }],

diff --git a/docs/.babelrc b/docs/.babelrc
@@ -1,4 +1,11 @@
 {
   "presets": ["next/babel"],
-  "plugins": [["styled-components", { "ssr": true }]]
+  "plugins": [["styled-components", { "ssr": true,
+   "topLevelImportPaths": [
+    "@xstyled/styled-components",
+    "@xstyled/styled-components/no-tags",
+    "@xstyled/styled-components/native",
+    "@xstyled/styled-components/primitives"
+  ]
+  }]],
 }
diff --git a/docs/components/Header.js b/docs/components/Header.js
@@ -38,7 +38,7 @@ export const Header = () => {
         display="flex"
         h={{ xs: 1, md: 'auto' }}
         justifyContent="space-between"
-        w={1}
+        w="100%"
       >
         <NextLink href="/" passHref>
           <Box alignItems="center" alt="Homepage" as="a" display="flex">
@@ -71,10 +71,10 @@ export const Header = () => {
           </Modal.Trigger>
         </Box>
       </Box>
-      <Box display={{ xs: 'none', md: 'block' }} mt="xl" w={1}>
+      <Box display={{ xs: 'none', md: 'block' }} mt="xl" w="100%">
         <SelectTheme id="navigation" />
       </Box>
-      <Box display={{ xs: 'none', md: 'block' }} mt="md" w={1}>
+      <Box display={{ xs: 'none', md: 'block' }} mt="md" w="100%">
         <Field
           component={InputText}
           icon={<SearchIcon color="light.100" size="sm" />}

diff --git a/docs/components/Header.styled.js b/docs/components/Header.styled.js
@@ -9,7 +9,7 @@ export const Header = styled.header`
   position: fixed;
   padding: 0 md;
   top: 0;
-  width: 1;
+  width: 100%;
   z-index: 1;
 
   ${up(

diff --git a/docs/components/IconsList.js b/docs/components/IconsList.js
@@ -33,7 +33,7 @@ const Item = styled(Box)(
     width: 130;
 
     ${!copied &&
-    css`
+      css`
         &:hover {
           ${Content} {
             background-color: light.800;
@@ -43,7 +43,7 @@ const Item = styled(Box)(
       `}
 
     ${copied &&
-    css`
+      css`
         ${Content} {
           background-color: success.100;
           border-color: success.100;
@@ -71,7 +71,7 @@ function IconItem({ componentName, icon: Icon, name }) {
       <Content>
         <Icon size="xl" />
       </Content>
-      <Box fontSize="meta1" fontWeight="medium" pt="xs" px="xs" textAlign="center" w={1}>
+      <Box fontSize="meta1" fontWeight="medium" pt="xs" px="xs" textAlign="center" w="100%">
         {name}
       </Box>
     </Item>

diff --git a/docs/components/Illustration.js b/docs/components/Illustration.js
@@ -7,7 +7,7 @@ const Illustration = memo(function Illustration() {
   const theme = useThemeContext()
   const imageSource = theme === 'dark' ? '/illustration-white.png' : '/illustration.png'
 
-  return <Box as="img" maxWidth={400} src={imageSource} w={1} />
+  return <Box as="img" maxWidth={400} src={imageSource} w="100%" />
 })
 
 export default Illustration
diff --git a/docs/components/Illustration404.js b/docs/components/Illustration404.js
@@ -7,7 +7,7 @@ const Illustration404 = memo(function Illustration() {
   const theme = useThemeContext()
   const imageSource = theme === 'dark' ? '/illustration-404-white.png' : '/illustration-404.png'
 
-  return <Box as="img" maxWidth={500} src={imageSource} w={1} />
+  return <Box as="img" maxWidth={500} src={imageSource} w="100%" />
 })
 
 export default Illustration404
diff --git a/docs/components/Layout.js b/docs/components/Layout.js
@@ -16,7 +16,7 @@ export const Layout = ({ children }) => {
   return (
     <S.Layout>
       <Header />
-      <Box margin="0 auto" maxWidth={1} paddingLeft={{ md: 270 }} w={1280}>
+      <Box margin="0 auto" maxWidth="100%" paddingLeft={{ md: 270 }} w={1280}>
         <Box
           as="main"
           mb={{ xs: '3xl', md: 0 }}
@@ -33,7 +33,7 @@ export const Layout = ({ children }) => {
             justifyContent="center"
             mt="3xl"
             pt="md"
-            w={1}
+            w="100%"
           >
             Made with <HeartIcon color="primary.500" mx="xxs" /> by{' '}
             <Box

diff --git a/docs/components/MDXComponents.js b/docs/components/MDXComponents.js
@@ -5,7 +5,7 @@ import React from 'react'
 import { Text } from '@welcome-ui/text'
 import { Table } from '@welcome-ui/table'
 import { Link } from '@welcome-ui/link'
-import { Box } from '@xstyled/styled-components'
+import { Box } from '@welcome-ui/box'
 
 import { H1, H2, H3 } from './Headings'
 import { Code } from './Code'

diff --git a/docs/package.json b/docs/package.json
@@ -35,7 +35,7 @@
     "@mdx-js/loader": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@next/mdx": "10.0.8",
-    "@xstyled/styled-components": "^2.2.3",
+    "@xstyled/styled-components": "^3.0.1",
     "babel-plugin-styled-components": "^1.12.0",
     "date-fns": "^2.19.0",
     "lodash.merge": "^4.6.2",
@@ -45,7 +45,7 @@
     "react-dom": "^17.0.1",
     "react-hook-form": "~6.15.4",
     "react": "^17.0.1",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.0",
     "yup": "0.32.9"
   }
 }
diff --git a/docs/pages/components/box.mdx b/docs/pages/components/box.mdx
@@ -21,13 +21,13 @@ Box is the most basic component of Welcome UI — all other components make use
 You can create a simple card item using Boxes (and a couple of other components).
 
 ```jsx
-<Box display="flex" w={1} justifyContent="center" alignItems="center" backgroundColor="nude.100">
+<Box display="flex" w="100%" justifyContent="center" alignItems="center" backgroundColor="nude.100">
   <Box backgroundColor="light.900" borderRadius="sm" boxShadow="sm" margin="xl" maxWidth={360}>
     <Box
       as="img"
       src="https://images.unsplash.com/photo-1610020468144-a6f4771a1982?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
       alt="presentation"
-      maxWidth={1}
+      maxWidth="100%"
     />
     <Box p="md">
       <Box display="flex" mb="xs" alignItems="center">

diff --git a/docs/pages/components/button.mdx b/docs/pages/components/button.mdx
@@ -141,7 +141,7 @@ You can transform your Button component with `as` property to add you linker, `h
 You can add `w` property from [xstyled](https://xstyled.dev/docs/width/).
 
 ```jsx
-<Button w={1}>full width</Button>
+<Button w="100%">full width</Button>
 <Button w={1 / 2}>half width</Button>
 ```
 

diff --git a/docs/pages/components/card.mdx b/docs/pages/components/card.mdx
@@ -39,7 +39,7 @@ A content card.
 ```jsx
 <Card maxWidth={400}>
   <Card.Cover
-    w={1}
+    w="100%"
     src="https://m.media-amazon.com/images/M/MV5BMzE0NzgyODIxN15BMl5BanBnXkFtZTgwNDU0NjU5NzE@._V1_SX1777_CR0,0,1777,994_AL_.jpg"
   />
   <Card.Body>
@@ -64,7 +64,7 @@ A picture card, if you add a `backgroundImage` on Card, it's displayed on cover.
 >
   <Box
     padding="xl"
-    w={1}
+    w="100%"
     background="linear-gradient(0deg, rgba(0,0, 0, 0.7) 0%, rgba(0,0,0,0) 100%)"
   >
     <Text as="h4" fontWeight="bold" m={0} color="light.900">

diff --git a/docs/pages/components/emoji-picker.mdx b/docs/pages/components/emoji-picker.mdx
@@ -233,7 +233,7 @@ function BasicList() {
 
 ### EmojiPicker.List
 
-<props propTypes={props.propTypes.['EmojiPicker.List']} />
+<props propTypes={props.propTypes['EmojiPicker.List']} />
 
 ## Dependencies
 

diff --git a/docs/pages/components/modal.mdx b/docs/pages/components/modal.mdx
@@ -120,7 +120,7 @@ function() {
           nunc.
         </Modal.Content>
         <Modal.Footer>
-          <Box w={1} display="flex" justifyContent="space-between">
+          <Box w="100%" display="flex" justifyContent="space-between">
             <Button variant="secondary">Lorem dolir</Button>
             <Button onClick={() => modal.hide()}>Close</Button>
           </Box>
@@ -145,7 +145,7 @@ function() {
         Open modal
       </Modal.Trigger>
       <Modal {...modal} ariaLabel="example">
-        <Modal.Cover w={1} h={200}>
+        <Modal.Cover w="100%" h={200}>
           <img src="https://m.media-amazon.com/images/M/MV5BMzE0NzgyODIxN15BMl5BanBnXkFtZTgwNDU0NjU5NzE@._V1_SX1777_CR0,0,1777,994_AL_.jpg" />
         </Modal.Cover>
         <Modal.Content>

diff --git a/docs/pages/components/swiper.mdx b/docs/pages/components/swiper.mdx
@@ -147,7 +147,7 @@ function() {
 
   return (
     <>
-      <Box display="flex" w={1} justifyContent="center" mb="sm">
+      <Box display="flex" w="100%" justifyContent="center" mb="sm">
         <Button mr="xs" onClick={swiper.goPrev}>
           <LeftIcon size="lg"  />
         </Button>

diff --git a/docs/pages/theming/x-styled.mdx b/docs/pages/theming/x-styled.mdx
@@ -31,7 +31,7 @@ function() {
       label="JS Library"
       margin={{ xs: 10, md: 50 }}
       w={{ xs: 200, md: 350 }}
-      maxWidth={1}
+      maxWidth="100%"
       h="auto"
       borderColor="salmon"
       borderWidth={4}

diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  interface Process {
+    browser: boolean
+  }
+}
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "docs:dev": "yarn next docs -p 3020",
     "docs:build": "yarn next build docs && yarn next export docs",
     "docs:deploy": "yarn && yarn icons:build && yarn webfont:build && yarn build && yarn docs:build",
-    "homerun": "yarn clean --yes && rm -rf node_modules/ docs/.next/ && yarn cache clean && yarn && yarn build --all && yarn start",
+    "homerun": "yarn clean --yes && rm -rf node_modules/ docs/.next/ && yarn cache clean && yarn && yarn build && yarn start",
     "icons": "yarn icons:optimize && yarn icons:collect && yarn icons:build && yarn webfont:build && yarn build && yarn",
     "icons:optimize": "node -r esm scripts/icons-optimize.js",
     "icons:collect": "node -r esm scripts/icons-collect.js",
@@ -26,9 +26,10 @@
     "release:publish": "yarn lerna publish --conventional-commits --no-private",
     "release:prerelease": "yarn -s check:ssh && yarn build && yarn lerna publish --conventional-prerelease --no-private --pre-dist-tag next --yes || yarn -s check:ssh-error",
     "release": "yarn -s check:ssh && yarn build && yarn release:publish || yarn -s check:ssh-error",
-    "lint": "yarn lint:mdx & yarn lint:js && yarn lint:css",
+    "lint": "yarn lint:mdx & yarn lint:js && yarn lint:ts && yarn lint:css",
     "lint:js": "eslint packages scripts --max-warnings 0 --fix",
-    "lint:css": "stylelint 'packages/**/styles.js'",
+    "lint:ts": "eslint packages --ext .ts,.tsx --max-warnings 0 --fix",
+    "lint:css": "stylelint 'packages/**/styles.{js,ts}'",
     "lint:mdx": "prettier --parser mdx --write 'docs/**/*.mdx'",
     "test": "node --expose-gc ./node_modules/.bin/jest ./packages --logHeapUsage",
     "check:ssh": "ssh-add -L >> /dev/null",
@@ -75,17 +76,24 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "=7.4.3",
     "@babel/preset-react": "=7.0.0",
+    "@babel/preset-typescript": "^7.14.5",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
     "@emotion/core": "^10.0.9",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-replace": "^2.3.4",
+    "@rollup/plugin-typescript": "^8.2.1",
     "@testing-library/dom": "7.29.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "12.6.0",
-    "@xstyled/styled-components": "^2.2.3",
-    "@xstyled/system": "^2.2.3",
+    "@types/ramda": "^0.27.44",
+    "@types/react": "^17.0.11",
+    "@types/styled-components": "^5.1.11",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "@xstyled/styled-components": "^3.0.3",
+    "@xstyled/system": "^3.0.2",
     "aws-sdk": "^2.827.0",
     "babel-eslint": "=10.0.3",
     "babel-jest": "=24.7.1",
@@ -112,7 +120,7 @@
     "jest": "26.6.3",
     "jest-styled-components": "7.0.3",
     "lerna": "^3.22.1",
-    "lerna-update-wizard": "^0.17.7",
+    "lerna-update-wizard": "^0.17.8",
     "lodash.capitalize": "=4.2.1",
     "lodash.difference": "^4.5.0",
     "minimist": "1.2.5",
@@ -126,26 +134,27 @@
     "react-helmet": "^5.2.1",
     "react-live": "^2.2.1",
     "react-router-dom": "=5.1.2",
-    "rollup": "=1.12.4",
+    "rollup": "2.51.1",
     "rollup-plugin-babel": "=4.3.2",
     "rollup-plugin-node-resolve": "^5.0.1",
     "rollup-plugin-postcss": "=2.0.3",
     "standard-version": "^6.0.1",
     "style-loader": "=0.23.1",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.0",
     "stylelint": "=12.0.0",
     "stylelint-config-recommended": "=3.0.0",
     "stylelint-config-styled-components": "=0.1.1",
     "stylelint-processor-styled-components": "=1.9.0",
     "surge": "=0.21.3",
     "svgo": "^2.2.0",
+    "typescript": "^4.3.2",
     "webfonts-generator": "^0.4.0",
     "wttj-config-front": "1.0.1",
     "yargs": "^15.3.1"
   },
   "dependencies": {},
   "resolutions": {
-    "styled-components": "5.1.1"
+    "styled-components": "5.3.0"
   },
   "husky": {
     "hooks": {

diff --git a/packages/Accordion/.npmignore b/packages/Accordion/.npmignore
@@ -1,2 +1,3 @@
 /*
 !/dist/*.js
+!/dist/*.d.ts
diff --git a/packages/Accordion/index.test.js → packages/Accordion/index.test.tsx b/packages/Accordion/index.test.js → packages/Accordion/index.test.tsx