Merge branch 'master' into fix-saving-code

Author: CompuIves

.all-contributorsrc

@@ -1531,6 +1531,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "johansenja",
+      "name": "johansenja",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/43235608?v=4",
+      "profile": "https://github.com/johansenja",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Developerayo",
+      "name": "Shodipo Ayomide",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/20538832?v=4",
+      "profile": "https://shodipoayomide.com",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.circleci/config.yml

@@ -214,13 +214,13 @@ commands:
             JEST_JUNIT_OUTPUT: '/tmp/test-results/js-test-results.xml'
       - store_test_results: *store_test_results
       - store_artifacts: *store_artifacts
-  # test_visual_regressions:
-  #   description: "Test Chromatic with 'yarn chromatic'"
-  #   steps:
-  #     - restore_cache: *restore_deps_cache
-  #     - attach_workspace: *attach_deps_workspace
-  #     - run:
-  #         command: yarn chromatic
+  test_visual_regressions:
+    description: "Test Chromatic with 'yarn chromatic'"
+    steps:
+      - restore_cache: *restore_deps_cache
+      - attach_workspace: *attach_deps_workspace
+      - run:
+          command: yarn chromatic
   test_jest:
     description: 'Test with `yarn test`'
     steps:
@@ -298,11 +298,11 @@ jobs:
     steps:
       - checkout_with_cache
       - test_integrations
-  # test-visual-regressions:
-  #   executor: node
-  #   steps:
-  #     - checkout_with_cache
-  #     - test_visual_regressions
+  test-visual-regressions:
+    executor: node
+    steps:
+      - checkout_with_cache
+      - test_visual_regressions
   test-jest:
     executor: node
     steps:
@@ -363,9 +363,9 @@ workflows:
       - test-integrations:
           requires:
             - build-deps
-      # - test-visual-regressions:
-      #     requires:
-      #       - build-deps
+      - test-visual-regressions:
+          requires:
+            - build-deps
       - typecheck:
           requires:
             - build-deps
@@ -384,12 +384,11 @@ workflows:
       - deploy-to-production:
           requires:
             - create-docker-image
-            - build-prod
             - lint
             - typecheck
             - test-integrations
             - test-jest
-            # - test-visual-regressions
+            - test-visual-regressions
           filters:
             branches:
               only:

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question
+    url: https://github.com/codesandbox/codesandbox-client/discussions
+    about: Have any questions?

.github/ISSUE_TEMPLATE/config.yml

@@ -6,7 +6,6 @@
 
  
 
-[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox)
 [![All Contributors](https://img.shields.io/badge/all_contributors-153-orange.svg?style=flat-square)](#contributors-)
 [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client)
 [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)
@@ -102,7 +101,7 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://github.com/ro-savage"><img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;" alt=""/><br /><sub><b>Ro Savage</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=ro-savage" title="Code">💻</a></td>
     <td align="center"><a href="https://samdd.me"><img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;" alt=""/><br /><sub><b>Sam Denty</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=samdenty" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/zephraph"><img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;" alt=""/><br /><sub><b>Zephraph</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=zephraph" title="Code">💻</a></td>
-    <td align="center"><a href="https://www.joshwaller.me"><img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;" alt=""/><br /><sub><b>Josh Waller</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/issues?q=author%3Amdxprograms" title="Bug reports">🐛</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=mdxprograms" title="Code">💻</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=mdxprograms" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://joshwaller.dev"><img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;" alt=""/><br /><sub><b>Josh Waller</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/issues?q=author%3Amdxprograms" title="Bug reports">🐛</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=mdxprograms" title="Code">💻</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=mdxprograms" title="Documentation">📖</a></td>
   </tr>
   <tr>
     <td align="center"><a href="http://joey.co.ke"><img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;" alt=""/><br /><sub><b>Joe Ng'ethe</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=joeynimu" title="Code">💻</a></td>
@@ -251,6 +250,8 @@ Thanks goes to these wonderful people
   <tr>
     <td align="center"><a href="http://mcmunder.de"><img src="https://avatars3.githubusercontent.com/u/5681686?v=4" width="100px;" alt=""/><br /><sub><b>Matthias Christoph Munder</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/issues?q=author%3Amcmunder" title="Bug reports">🐛</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=mcmunder" title="Code">💻</a></td>
     <td align="center"><a href="http://anuraghazra.github.io"><img src="https://avatars3.githubusercontent.com/u/35374649?v=4" width="100px;" alt=""/><br /><sub><b>Anurag Hazra</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=anuraghazra" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/johansenja"><img src="https://avatars1.githubusercontent.com/u/43235608?v=4" width="100px;" alt=""/><br /><sub><b>johansenja</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=johansenja" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://shodipoayomide.com"><img src="https://avatars2.githubusercontent.com/u/20538832?v=4" width="100px;" alt=""/><br /><sub><b>Shodipo Ayomide</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=Developerayo" title="Documentation">📖</a></td>
   </tr>
 </table>
 

README.md

@@ -9,6 +9,7 @@
   "license": "GPL-3.0",
   "workspaces": {
     "packages": [
+      "packages/@styled-system/css",
       "packages/@types/ot",
       "packages/app",
       "packages/homepage",

package.json

@@ -0,0 +1,229 @@
+/* eslint-disable */
+
+// based on https://github.com/developit/dlv
+export var get = function get(obj, key, def, p, undef) {
+  key = key && key.split ? key.split('.') : [key];
+
+  for (p = 0; p < key.length; p++) {
+    obj = obj ? obj[key[p]] : undef;
+  }
+
+  return obj === undef ? def : obj;
+};
+const defaultBreakpoints = [40, 52, 64].map(function(n) {
+  return n + 'em';
+});
+const aliases = {
+  bg: 'backgroundColor',
+  m: 'margin',
+  mt: 'marginTop',
+  mr: 'marginRight',
+  mb: 'marginBottom',
+  ml: 'marginLeft',
+  mx: 'marginX',
+  my: 'marginY',
+  p: 'padding',
+  pt: 'paddingTop',
+  pr: 'paddingRight',
+  pb: 'paddingBottom',
+  pl: 'paddingLeft',
+  px: 'paddingX',
+  py: 'paddingY',
+};
+const multiples = {
+  marginX: ['marginLeft', 'marginRight'],
+  marginY: ['marginTop', 'marginBottom'],
+  paddingX: ['paddingLeft', 'paddingRight'],
+  paddingY: ['paddingTop', 'paddingBottom'],
+  size: ['width', 'height'],
+};
+const scales = {
+  color: 'colors',
+  backgroundColor: 'colors',
+  borderColor: 'colors',
+  margin: 'space',
+  marginTop: 'space',
+  marginRight: 'space',
+  marginBottom: 'space',
+  marginLeft: 'space',
+  marginX: 'space',
+  marginY: 'space',
+  padding: 'space',
+  paddingTop: 'space',
+  paddingRight: 'space',
+  paddingBottom: 'space',
+  paddingLeft: 'space',
+  paddingX: 'space',
+  paddingY: 'space',
+  top: 'space',
+  right: 'space',
+  bottom: 'space',
+  left: 'space',
+  gridGap: 'space',
+  gridColumnGap: 'space',
+  gridRowGap: 'space',
+  gap: 'space',
+  columnGap: 'space',
+  rowGap: 'space',
+  fontFamily: 'fonts',
+  fontSize: 'fontSizes',
+  fontWeight: 'fontWeights',
+  lineHeight: 'lineHeights',
+  letterSpacing: 'letterSpacings',
+  border: 'borders',
+  borderTop: 'borders',
+  borderRight: 'borders',
+  borderBottom: 'borders',
+  borderLeft: 'borders',
+  borderWidth: 'borderWidths',
+  borderStyle: 'borderStyles',
+  borderRadius: 'radii',
+  borderTopRightRadius: 'radii',
+  borderTopLeftRadius: 'radii',
+  borderBottomRightRadius: 'radii',
+  borderBottomLeftRadius: 'radii',
+  borderTopWidth: 'borderWidths',
+  borderTopColor: 'colors',
+  borderTopStyle: 'borderStyles',
+  borderBottomWidth: 'borderWidths',
+  borderBottomColor: 'colors',
+  borderBottomStyle: 'borderStyles',
+  borderLeftWidth: 'borderWidths',
+  borderLeftColor: 'colors',
+  borderLeftStyle: 'borderStyles',
+  borderRightWidth: 'borderWidths',
+  borderRightColor: 'colors',
+  borderRightStyle: 'borderStyles',
+  outlineColor: 'colors',
+  boxShadow: 'shadows',
+  textShadow: 'shadows',
+  zIndex: 'zIndices',
+  width: 'sizes',
+  minWidth: 'sizes',
+  maxWidth: 'sizes',
+  height: 'sizes',
+  minHeight: 'sizes',
+  maxHeight: 'sizes',
+  flexBasis: 'sizes',
+  size: 'sizes',
+  // svg
+  fill: 'colors',
+  stroke: 'colors',
+};
+
+const positiveOrNegative = function positiveOrNegative(scale, value) {
+  if (typeof value !== 'number' || value >= 0) {
+    return get(scale, value, value);
+  }
+
+  const absolute = Math.abs(value);
+  const n = get(scale, absolute, absolute);
+  if (typeof n === 'string') return '-' + n;
+  return n * -1;
+};
+
+const transforms = [
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginX',
+  'marginY',
+  'top',
+  'bottom',
+  'left',
+  'right',
+].reduce(function(acc, curr) {
+  let _extends2;
+
+  return {
+    ...acc,
+    ...((_extends2 = {}), (_extends2[curr] = positiveOrNegative), _extends2),
+  };
+}, {});
+export var responsive = function responsive(styles) {
+  return function(theme) {
+    const next = {};
+    const breakpoints = get(theme, 'breakpoints', defaultBreakpoints);
+    const mediaQueries = [null].concat(
+      breakpoints.map(function(n) {
+        return '@media screen and (min-width: ' + n + ')';
+      })
+    );
+
+    for (const key in styles) {
+      const value =
+        typeof styles[key] === 'function' ? styles[key](theme) : styles[key];
+      if (value == null) continue;
+
+      if (!Array.isArray(value)) {
+        next[key] = value;
+        continue;
+      }
+
+      for (let i = 0; i < value.slice(0, mediaQueries.length).length; i++) {
+        const media = mediaQueries[i];
+
+        if (!media) {
+          next[key] = value[i];
+          continue;
+        }
+
+        next[media] = next[media] || {};
+        if (value[i] == null) continue;
+        next[media][key] = value[i];
+      }
+    }
+
+    return next;
+  };
+};
+export var css = function css(args) {
+  return function(props) {
+    if (props === void 0) {
+      props = {};
+    }
+
+    const theme = props.theme || props;
+
+    let result = {};
+    const obj = typeof args === 'function' ? args(theme) : args;
+    const styles = responsive(obj)(theme);
+
+    for (const key in styles) {
+      const x = styles[key];
+      const val = typeof x === 'function' ? x(theme) : x;
+
+      if (key === 'variant') {
+        const variant = css(get(theme, val))(theme);
+        result = { ...result, ...variant };
+        continue;
+      }
+
+      if (val && typeof val === 'object') {
+        result[key] = css(val)(theme);
+        continue;
+      }
+
+      const prop = get(aliases, key, key);
+      const scaleName = get(scales, prop);
+      const scale = get(theme, scaleName, get(theme, prop, {}));
+      const transform = get(transforms, prop, get);
+      const value = transform(scale, val, val);
+
+      if (multiples[prop]) {
+        const dirs = multiples[prop];
+
+        for (let i = 0; i < dirs.length; i++) {
+          result[dirs[i]] = value;
+        }
+      } else {
+        result[prop] = value;
+      }
+    }
+
+    return result;
+  };
+};
+export default css;