feat: Custom prop types and more props to Box (#181)

.circleci/config.yml

@@ -31,7 +31,6 @@ jobs:
       - checkout
       - run: yarn
       - run: yarn lerna run build --stream
-      - run: yarn lerna run test:results --scope @rocket.chat/fuselage --stream
       - run: yarn lerna run build-storybook --scope @rocket.chat/fuselage --stream
       - run:
           command: |
@@ -101,7 +100,6 @@ jobs:
     steps:
       - attach_workspace:
           at: ~/repo
-      - run: yarn lerna run test:results --scope @rocket.chat/fuselage --stream
       - run: .circleci/deploy-storybooks.js
 
 workflows:

packages/css-in-js/flow-typed/npm/@emotion/hash_vx.x.x.js

@@ -0,0 +1,77 @@
+// flow-typed signature: fbfc591f361ab1592f06c35558fd09d4
+// flow-typed version: <<STUB>>/@emotion/hash_v0.8.0/flow_v0.121.0
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   '@emotion/hash'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module '@emotion/hash' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module '@emotion/hash/dist/hash.browser.cjs' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/dist/hash.browser.esm' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/dist/hash.cjs.dev' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/dist/hash.cjs' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/dist/hash.cjs.prod' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/dist/hash.esm' {
+  declare module.exports: any;
+}
+
+declare module '@emotion/hash/src' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module '@emotion/hash/dist/hash.browser.cjs.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.browser.cjs'>;
+}
+declare module '@emotion/hash/dist/hash.browser.esm.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.browser.esm'>;
+}
+declare module '@emotion/hash/dist/hash.cjs.dev.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.cjs.dev'>;
+}
+declare module '@emotion/hash/dist/hash.cjs.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.cjs'>;
+}
+declare module '@emotion/hash/dist/hash.cjs.prod.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.cjs.prod'>;
+}
+declare module '@emotion/hash/dist/hash.esm.js' {
+  declare module.exports: $Exports<'@emotion/hash/dist/hash.esm'>;
+}
+declare module '@emotion/hash/src/index' {
+  declare module.exports: $Exports<'@emotion/hash/src'>;
+}
+declare module '@emotion/hash/src/index.js' {
+  declare module.exports: $Exports<'@emotion/hash/src'>;
+}

packages/css-in-js/src/sheet.js

@@ -89,7 +89,8 @@ export const referenceRules = (rules: string) => {
     return () => {};
   }
 
-  const reference = { count: 0, ...references[rules] };
+  const reference = references[rules] || { count: 0 };
+  references[rules] = reference;
 
   if (reference.count === 0) {
     reference.detachRules = attachRules(rules);

packages/fuselage-tokens/all.js

@@ -0,0 +1,3 @@
+export { default as breakpoints } from './breakpoints';
+export { default as colors } from './colors';
+export { default as typography } from './typography';

packages/fuselage-tokens/all.scss

@@ -1,2 +1,3 @@
+@import './breakpoints.scss';
 @import './colors.scss';
 @import './typography.scss';

packages/fuselage-tokens/breakpoints.js

@@ -0,0 +1,27 @@
+export default {
+  xs: {
+    minViewportWidth: null,
+    columns: 4,
+    gutterWidth: 16,
+  },
+  sm: {
+    minViewportWidth: 600,
+    columns: 8,
+    gutterWidth: 16,
+  },
+  md: {
+    minViewportWidth: 768,
+    columns: 8,
+    gutterWidth: 24,
+  },
+  lg: {
+    minViewportWidth: 1024,
+    columns: 12,
+    gutterWidth: 24,
+  },
+  xl: {
+    minViewportWidth: 1440,
+    columns: 12,
+    gutterWidth: 24,
+  },
+};

packages/fuselage-tokens/breakpoints.scss

@@ -0,0 +1,27 @@
+$breakpoints: (
+  xs: (
+    min-viewport-width: null,
+    columns: 4,
+    gutter-width: 16,
+  ),
+  sm: (
+    min-viewport-width: 600,
+    columns: 8,
+    gutter-width: 16,
+  ),
+  md: (
+    min-viewport-width: 768,
+    columns: 8,
+    gutter-width: 24,
+  ),
+  lg: (
+    min-viewport-width: 1024,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xl: (
+    min-viewport-width: 1440,
+    columns: 12,
+    gutter-width: 24,
+  ),
+);

packages/fuselage-tokens/colors.js

@@ -0,0 +1,80 @@
+export default {
+  // Neutral
+  n100: '#f7f8fa',
+  n200: '#f2f3f5',
+  n300: '#eeeff1',
+  n400: '#e4e7ea',
+  n500: '#cbced1',
+  n600: '#9ea2a8',
+  n700: '#6c727a',
+  n800: '#2f343d',
+  n900: '#1f2329',
+
+  // Blues
+  b100: '#e8f2ff',
+  b200: '#d1ebfe',
+  b300: '#76b7fc',
+  b400: '#549df9',
+  b500: '#1d74f5',
+  b600: '#095ad2',
+  b700: '#10529e',
+  b800: '#01336b',
+  b900: '#012247',
+
+  // Greens
+  g100: '#e5fbf4',
+  g200: '#c0f6e4',
+  g300: '#96f0d2',
+  g400: '#6ce9c0',
+  g500: '#2de0a5',
+  g600: '#1ecb92',
+  g700: '#19ac7c',
+  g800: '#158d65',
+  g900: '#106d4f',
+
+  // Reds
+  r100: '#fddade',
+  r200: '#fbb5be',
+  r300: '#f98f9d',
+  r400: '#f76a7d',
+  r500: '#f5455c',
+  r600: '#db0c27',
+  r700: '#b30a20',
+  r800: '#8b0719',
+  r900: '#630512',
+
+  // Yellows
+  y100: '#fff6d6',
+  y200: '#ffecad',
+  y300: '#ffe383',
+  y400: '#ffd95a',
+  y500: '#ffd031',
+  y600: '#f3be08',
+  y700: '#dfac00',
+  y800: '#b68d00',
+  y900: '#8e6d00',
+
+  // Purples
+  p100: '#f9effc',
+  p200: '#edd0f7',
+  p300: '#dca0ef',
+  p400: '#ca71e7',
+  p500: '#9f22c7',
+  p600: '#7f1b9f',
+  p700: '#5f1477',
+  p800: '#4a105d',
+  p900: '#350b42',
+
+  // Oranges
+  o100: '#fde8d7',
+  o200: '#fad1b0',
+  o300: '#f7b27b',
+  o400: '#f59b53',
+  o500: '#f38c39',
+  o600: '#e26d0e',
+  o700: '#bd5a0b',
+  o800: '#974809',
+  o900: '#713607',
+
+  white: '#ffffff',
+};