Components package (#3256)

* start

* setup packages

* update packages

* add missing dep

* try to fix build

* readd test files

* no duplication

* fix jest

* fix ts

* ts

* add np

* small fixes

* remove some ts-irgnore

* fix rbg colors

* fixed yarn

* remove unsed deps

* re add ts

* update circle ci

* revert more ts

* more ts fixing

Author: SaraVieira

.circleci/config.yml

@@ -13,6 +13,7 @@ aliases:
     paths:
       - packages/codesandbox-api/dist
       - packages/common/lib
+      - packages/components/lib
       - packages/deps/dist
       - packages/executors/dist
       - packages/node-services/lib
@@ -25,17 +26,18 @@ aliases:
 
   - &restore_deps_cache
     keys:
-      - v30-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v30-dependency-cache-{{ .Branch }}
-      - v30-dependency-cache
+      - v31-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v31-dependency-cache-{{ .Branch }}
+      - v31-dependency-cache
 
   - &save_deps_cache
-    key: v30-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v31-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
       - packages/chrome-extension/node_modules
       - packages/codesandbox-api/node_modules
+      - packages/components/node_modules
       - packages/common/node_modules
       - packages/dynamic-pages/node_modules
       - packages/deps/node_modules
@@ -49,51 +51,51 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v30-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      - v31-standalone-dependency-cache-{{ .Branch }}-{{ checksum
         "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v30-standalone-dependency-cache-{{ .Branch }}
-      - v30-standalone-dependency-cache
+      - v31-standalone-dependency-cache-{{ .Branch }}
+      - v31-standalone-dependency-cache
 
   - &save_standalone_deps_cache
     key:
-      v30-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      v31-standalone-dependency-cache-{{ .Branch }}-{{ checksum
       "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_homepage_cache
-    key: v30-prod-homepage-build-cache-master
+    key: v31-prod-homepage-build-cache-master
 
   - &restore_prod_result
     key:
-      v30-prod-build-result-{{ .Environment.CIRCLE_BRANCH
+      v31-prod-build-result-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
 
   - &save_prod_build_cache
     key:
-      v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
       }}-{{.Environment.CIRCLE_SHA1 }}
     paths:
       - packages/app/node_modules/.cache
 
   - &restore_prod_build_cache
     keys:
-      - v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      - v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
         }}-{{.Environment.CIRCLE_SHA1 }}
-      - v30-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
-      - v30-prod-build-cache-master-
+      - v31-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
+      - v31-prod-build-cache-master-
 
   # To persist the images built by sharp
   - &save_prod_homepage_cache
     key:
-      v30-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v31-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/homepage/public
 
   - &save_prod_result
     key:
-      v30-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v31-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
@@ -134,14 +136,14 @@ commands:
     steps:
       - restore_cache:
           keys:
-            - v30-source-cache-{{ .Branch }}-{{ .Revision }}
-            - v30-source-cache-{{ .Branch }}-
-            - v30-source-cache-
+            - v31-source-cache-{{ .Branch }}-{{ .Revision }}
+            - v31-source-cache-{{ .Branch }}-
+            - v31-source-cache-
 
       - checkout
 
       - save_cache:
-          key: v30-source-cache-{{ .Branch }}-{{ .Revision }}
+          key: v31-source-cache-{{ .Branch }}-{{ .Revision }}
           paths:
             - '.git'
   build_deps:
@@ -194,6 +196,8 @@ commands:
             ./packages/app/integration-tests/BrowserStackLocal --key
             $BROWSER_STACK_KEY || true'
           background: true
+      - run:
+          command: npm run chromatic
       - run:
           name: Test Integrations
           command: |

package.json

@@ -12,6 +12,7 @@
       "packages/app",
       "packages/homepage",
       "packages/common",
+      "packages/components",
       "packages/codesandbox-api",
       "packages/node-services",
       "packages/sandbox-hooks",
@@ -32,6 +33,7 @@
     "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=4096\" yarn build:deps && yarn build:prod",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
     "build:common": "lerna run build:dev --scope @codesandbox/common --stream",
+    "build:components": "lerna run build:dev --scope @codesandbox/components --stream",
     "build:deps": "lerna run build:dev",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
@@ -42,11 +44,12 @@
     "contributors:generate": "all-contributors generate",
     "lint": "lerna run lint --stream",
     "now-build": "yarn build:deps && lerna run build:storybook --scope @codesandbox/common",
-    "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope app --parallel",
+    "start": "yarn build:deps && lerna run start --scope @codesandbox/common --scope @codesandbox/components --scope app --parallel",
     "start:common": "lerna run start --scope @codesandbox/common --stream",
-    "start:dev_api": "concurrently --raw \"cd packages/app && yarn start:dev_api\" \"cd packages/common && yarn start\"",
+    "start:components": "lerna run start --scope @codesandbox/components --stream",
+    "start:dev_api": "concurrently --raw \"cd packages/app && yarn start:dev_api\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
-    "start:fast": "concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\"",
+    "start:fast": "concurrently --raw \"cd packages/app && yarn start\" \"cd packages/common && yarn start\" \"cd packages/components && yarn start\"",
     "start:home": "yarn build:deps && yarn start:home:fast",
     "start:home:fast": "cd packages/homepage && yarn start",
     "start:overmind": "yarn build:deps && concurrently \"lerna run start --scope app --stream\" \"overmind-devtools\"",
@@ -58,6 +61,7 @@
     "test:ci": "lerna run test --ignore codesandbox-browserfs -- --ci --testResultsProcessor=\"jest-junit\" ",
     "test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",
     "test:jest-lite": "lerna exec --scope app --stream -- yarn run test jest-lite --watch --coverage",
+    "chromatic": "lerna run chromatic --scope=@codesandbox/components --stream",
     "typecheck": "lerna run typecheck"
   },
   "dependencies": {

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/elements.ts

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import ChevronRight from 'react-icons/lib/md/chevron-right';
 
-export const Container = styled(NavLink)<{ depth?: number }>`
+export const Container = styled(NavLink)<{
+  depth?: number;
+}>`
   transition: 0.25s ease all;
   display: flex;
   align-items: center;

packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.tsx

@@ -29,7 +29,7 @@ export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
     <Container>
       <Row alignItems="center">
         <Title>
-          {getSandboxName(sandbox)}{' '}
+          {getSandboxName(sandbox)} {''}
           {isLoggedIn ? <Like sandbox={sandbox} /> : null}
         </Title>
       </Row>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx

@@ -112,14 +112,17 @@ export const Chat: React.FC = () => {
       <AutosizeTextArea
         useCacheForDOMMeasurements
         value={value}
+        // @ts-ignore
         onChange={handleChange}
         placeholder="Send a message..."
         style={{
           width: '100%',
           minHeight: height,
           marginTop: '0.5rem',
         }}
+        // @ts-ignore
         onKeyDown={handleKeyDown}
+        // @ts-ignore
         onHeightChange={setHeight}
       />
     </Container>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddFont/FontPicker/elements.ts

@@ -108,7 +108,7 @@ background-color: ${theme['input.background'] || 'rgba(0, 0, 0, 0.3)'};
       top: 50%;
       transform: translateY(-50%);
     }
-`};æ
+`};
 `;
 
 export const Arrow = styled.div`

packages/app/src/app/pages/common/LikeHeart/index.tsx

@@ -1,5 +1,5 @@
 import { Sandbox } from '@codesandbox/common/lib/types';
-import React, { ComponentProps, FunctionComponent } from 'react';
+import React, { FunctionComponent, ComponentProps } from 'react';
 
 import { useOvermind } from 'app/overmind';
 
@@ -22,6 +22,7 @@ type Props = {
     ComponentProps<typeof Container>,
     'className' | 'highlightHover' | 'style'
   >;
+
 export const LikeHeart: FunctionComponent<Props> = ({
   className,
   colorless,

packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx

@@ -85,6 +85,7 @@ const Feedback: FunctionComponent<Props> = ({ id, user }) => {
       <AutosizeTextArea
         minRows={3}
         name="feedback"
+        // @ts-ignore
         onChange={onChange}
         placeholder="What are your thoughts?"
         required

packages/app/src/embed/components/Sidebar/SandboxInfo/index.tsx

@@ -15,16 +15,13 @@ export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
   return (
     <Container>
       <Title title={title}>{title}</Title>
-
       {sandbox.description && <Description>{sandbox.description}</Description>}
-
       {sandbox.author && (
         <AvatarBlock
           url={sandbox.author.avatarUrl}
           name={sandbox.author.username}
         />
       )}
-
       <Stats {...sandbox} />
     </Container>
   );

packages/common/package.json

@@ -66,7 +66,7 @@
     "ot": "^0.0.15",
     "react": "^16.8.6",
     "react-icons": "^2.2.7",
-    "react-input-autosize": "^2.2.1",
+    "react-input-autosize": "2.2.1",
     "react-router-dom": "^5.0.1",
     "react-spring": "^8.0.25",
     "react-textarea-autosize": "^6.1.0",