feat: Form components (#66)

Author: tassoevan

packages/fuselage-tokens/borders.js

@@ -1,6 +1,10 @@
 export default {
-  default: {
-    width: 2,
-    radius: 2,
-  },
+  widths: [
+    0,
+    2,
+  ],
+  radii: [
+    0,
+    2,
+  ],
 };

packages/fuselage/.loki/reference/chrome_iphone7_Forms_EmailInput_Default.png

@@ -18,6 +18,7 @@
     "@babel/preset-react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "babel-plugin-styled-components"
   ]
 }

packages/fuselage/.loki/reference/chrome_iphone7_Forms_EmailInput_Disabled.png

@@ -13,7 +13,7 @@ module.exports = async ({ config, mode }) => {
   config.module.rules.push({
     test: /\.scss$/,
     use: [
-      'style-loader',
+      'style-loader/useable',
       {
         loader: 'css-loader',
         options: {

packages/fuselage/.loki/reference/chrome_iphone7_Forms_EmailInput_With_Addon.png

@@ -5,5 +5,6 @@ module.exports = {
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
+    'babel-plugin-styled-components',
   ],
 };

packages/fuselage/.loki/reference/chrome_iphone7_Forms_EmailInput_With_Error.png

@@ -36,7 +36,8 @@
   },
   "peerDependencies": {
     "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.6",
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "styled-components": "^4.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -50,6 +51,7 @@
     "@storybook/addon-docs": "^5.2.1",
     "@storybook/addon-jest": "^5.0.11",
     "@storybook/addon-knobs": "^5.0.11",
+    "@storybook/addon-links": "^5.2.3",
     "@storybook/addon-options": "^5.0.11",
     "@storybook/addon-viewport": "^5.0.11",
     "@storybook/addons": "^5.0.11",
@@ -58,6 +60,7 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
+    "babel-plugin-styled-components": "^1.10.6",
     "cross-env": "^5.2.0",
     "css-vars-ponyfill": "^2.0.2",
     "cssnano": "^4.1.10",
@@ -79,6 +82,7 @@
     "postcss-loader": "^3.0.0",
     "react": "^16.8.6",
     "sass-loader": "^7.1.0",
+    "styled-components": "^4.4.0",
     "stylelint": "^10.0.1",
     "stylelint-order": "^3.0.0",
     "stylelint-scss": "^3.11.1",