Staging test

components/ConfigExamples.tsx

@@ -0,0 +1,142 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import Highlight, { defaultProps } from "prism-react-renderer";
+import { PrismStyles } from "./styles/prism-styles";
+
+const Container = styled.div`
+  font-family: "Menlo", "Monaco", monospace;
+  font-size: 16px;
+
+  width: 100%;
+  background-color: #242424;
+  border-radius: 4px;
+`;
+
+const CODE_EXAMPLES = [
+  {
+    title: "Simple",
+    code: `{
+  // You probably don't need to set anything in the configuration,
+  // we infer a lot of information from the repo. One value that's worth
+  // setting is your default sandbox ids to fork for a PR. It's easier to test
+  // on a sandbox that includes some test cases already.
+  // This is also optional, we default to 'vanilla' if it isn't set.
+  "sandboxes": ["new", "vanilla"]
+}`
+  },
+  {
+    title: "Monorepo",
+    code: `{
+  // If you have a monorepo we infer your packages from your Yarn workspaces
+  // or lerna configuration by default. If you want to explicitly
+  // set what to build, you can fill the 'packages' field with paths to your
+  // packages
+  "packages": ["packages/react", "packages/react-dom"],
+  "sandboxes": ["new", "vanilla"]
+}`
+  },
+  {
+    title: "Custom Install/Build",
+    code: `{
+  // You can also set custom install or build commands. These commands
+  // are appended after \`yarn run\` or \`npm run\`.
+  // This will call \`yarn run custom-install\` or \`npm run custom-install\`:
+  "installCommand": "custom-install",
+  // You can also provide \`false\` as a value if you want to skip the step:
+  "buildCommand": false
+}`
+  },
+  {
+    title: "GitHub Examples",
+    code: `{
+  // You can directly link to sandboxes in your GitHub repository. If you have
+  // an example in \`/examples/todomvc\` in your repository, you can refer to this
+  // example in the config. The advantage of this is that we will always take the
+  // version of the example that's in your PR. If you have a PR that updates
+  // the example, it will be reflected in the generated sandbox.
+  "sandboxes": ["/examples/todomvc"]
+}`
+  }
+];
+
+const Buttons = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const Button = styled.button<{ selected: boolean }>`
+  transition: 0.3s ease all;
+  font-family: "Inter";
+  display: flex;
+  width: 100%;
+  text-align: center;
+  justify-content: center;
+
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  font-size: 13px;
+  color: #ccc;
+  padding: 0.75rem 0;
+  font-weight: 600;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+
+  ${props =>
+    props.selected &&
+    css`
+      color: white;
+      border-color: #64d2ff;
+    `}
+
+  &:hover {
+    color: white;
+  }
+`;
+
+export const ConfigExamples = () => {
+  const [exampleIndex, setExampleIndex] = React.useState(0);
+
+  return (
+    <>
+      <Container>
+        <Buttons>
+          {CODE_EXAMPLES.map((example, i) => (
+            <Button
+              onClick={() => {
+                setExampleIndex(i);
+              }}
+              selected={i === exampleIndex}
+              key={i}
+            >
+              {example.title}
+            </Button>
+          ))}
+        </Buttons>
+        <div>
+          <PrismStyles />
+          <Highlight
+            {...defaultProps}
+            code={CODE_EXAMPLES[exampleIndex].code}
+            theme={{ plain: { color: "#ccc" }, styles: [] }}
+            // @ts-ignore
+            language="json"
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre className={className} style={style}>
+                {tokens.map((line, i) => (
+                  <div {...getLineProps({ line, key: i })}>
+                    {line.map((token, key) => (
+                      <span {...getTokenProps({ token, key })} />
+                    ))}
+                  </div>
+                ))}
+              </pre>
+            )}
+          </Highlight>
+        </div>
+      </Container>
+    </>
+  );
+};

components/LogsContainer.tsx

@@ -79,24 +79,15 @@ export const LogsContainer = ({ status, duration, log }: Props) => {
         <CodeBlock
           style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }}
         >
-          {log
-            ? log.split(/(^\+.*\n)/m).map((line, i) =>
-                line.startsWith("+") ? (
-                  <code
-                    key={i}
-                    style={{ color: colors.white, fontWeight: 700 }}
-                  >
-                    {line}
-                  </code>
-                ) : (
-                  <span key={i} style={{ color: "#ccc", display: "block" }}>
-                    <Ansi linkify={false}>{line}</Ansi>
-                  </span>
-                )
-              )
-            : status === "queued"
-            ? "Waiting to be built..."
-            : "Loading..."}
+          {log ? (
+            <span style={{ color: "#ccc", display: "block" }}>
+              <Ansi linkify={false}>{log}</Ansi>
+            </span>
+          ) : status === "queued" ? (
+            "Waiting to be built..."
+          ) : (
+            "Loading..."
+          )}
 
           <br />
         </CodeBlock>

components/SetupPage.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { SkeletonStatusPage } from "../components/SkeletonStatusPage";
+import { LEARN_MORE_DOCUMENTATION_URL } from "../utils/constants";
+import { Title, Description } from "../components/_elements";
+import { ConfigExamples } from "../components/ConfigExamples";
+import { colors } from "../theme/colors";
+
+export const SetupPage = () => (
+  <SkeletonStatusPage>
+    <Title>You've installed CodeSandbox CI!</Title>
+    <Description>
+      The last step is to create a Pull Request with the CI configuration file
+      in your repository at `.codesandbox/ci.json`{" "}
+      <a
+        href="https://github.com/framer/motion/pull/331"
+        rel="noopener noreferrer"
+        target="_blank"
+        style={{ color: colors.blue }}
+      >
+        (example)
+      </a>
+      .
+    </Description>
+    <div style={{ width: 800, marginTop: "2rem" }}>
+      <div style={{ color: "#ccc", fontSize: 14, marginBottom: 4 }}>
+        Example Configurations
+      </div>
+      <ConfigExamples />
+    </div>
+    <Description>
+      And that’s it! Now check your Pull Request on GitHub to see your built
+      library. For more information, go to{" "}
+      <a
+        style={{ color: colors.blue }}
+        href={LEARN_MORE_DOCUMENTATION_URL}
+        rel="noopener"
+        target="_blank"
+      >
+        our documentation.
+      </a>
+    </Description>
+  </SkeletonStatusPage>
+);

components/StatusPage.tsx

@@ -14,8 +14,13 @@ import { Layout } from "./Layout";
 import { SkeletonStatusPage } from "./SkeletonStatusPage";
 import { useGlobalState } from "../utils/state";
 import { colors } from "../theme/colors";
-import { LEARN_MORE_DOCUMENT_URL } from "../utils/constants";
+import {
+  LEARN_MORE_DOCUMENT_URL,
+  INSTALL_GITHUB_URL
+} from "../utils/constants";
 import { BUILD_LINK, buildLink, PR_LINK, prLink } from "../utils/url";
+import { SetupPage } from "./SetupPage";
+import { Button } from "./_elements";
 
 // Initialize the desired locales.
 JavascriptTimeAgo.locale(en);
@@ -68,6 +73,7 @@ export interface StatusPageProps {
   selectedBuildId: number;
   builds?: IBuild[];
   notFound?: boolean;
+  showSetup?: boolean;
   error?: boolean;
 }
 
@@ -79,6 +85,7 @@ const StatusPage = ({
   selectedBuildId,
   builds,
   notFound,
+  showSetup,
   error
 }: StatusPageProps) => {
   const [statePrs, setPrs] = useGlobalState("prs");
@@ -89,14 +96,28 @@ const StatusPage = ({
     setPrs(prs);
   }, [username, repo, prs, setPrs]);
 
+  if (showSetup) {
+    return <SetupPage />;
+  }
+
+  if (notFound) {
+    return (
+      <SkeletonStatusPage>
+        <ErrorMessage>
+          We could not find the repository you were looking for, have you
+          installed the GitHub App?
+        </ErrorMessage>
+
+        <Button href={INSTALL_GITHUB_URL}>Install GitHub App</Button>
+      </SkeletonStatusPage>
+    );
+  }
+
   if (notFound || error) {
     return (
       <SkeletonStatusPage>
         <ErrorMessage>
-          {notFound
-            ? `We could not find the repository you were looking for, have you
-            installed the GitHub App?`
-            : `We just got an error, please retry in a couple minutes!`}
+          We just got an error, please retry in a couple minutes!
         </ErrorMessage>
       </SkeletonStatusPage>
     );
@@ -213,7 +234,12 @@ StatusPage.getInitialProps = async ({
   query,
   res
 }): Promise<
-  { title?: string } & (StatusPageProps | { notFound: true } | { error: true })
+  { title?: string } & (
+    | StatusPageProps
+    | { notFound: true }
+    | { showSetup: true }
+    | { error: true }
+  )
 > => {
   try {
     const { username, repo } = query;
@@ -227,6 +253,13 @@ StatusPage.getInitialProps = async ({
     }
 
     const { prs } = await getPrs(username, repo);
+
+    if (prs.length === 0) {
+      // No PRs have been registered yet
+
+      return { showSetup: true, title: "CodeSandbox CI Installed" };
+    }
+
     let prNumber = query.prNumber;
     if (!prNumber) {
       prNumber = prs[0].number;

components/_elements.ts

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Title = styled.h1`
+  font-size: 19px;
+  font-weight: 300;
+  margin-bottom: 0;
+`;
+
+export const Description = styled.p`
+  font-size: 16px;
+  font-weight: 300;
+  margin-bottom: 0;
+  max-width: 600px;
+  text-align: center;
+  line-height: 1.6;
+`;
+
+export const SubTitle = styled.h2`
+  font-size: 16px;
+  font-weight: 300;
+  color: #ccc;
+`;
+
+export const ButtonContainer = styled.div`
+  width: 20rem;
+  margin-top: 1.5rem;
+  text-align: center;
+`;
+
+export const Link = styled.a`
+  transition: 0.3s ease color;
+  display: block;
+  margin-top: 1.5rem;
+  font-size: 1rem;
+  font-weight: 300;
+  color: #ccc !important;
+
+  &:hover {
+    color: white !important;
+  }
+`;
+
+export const Button = styled.a`
+  transition: 0.3s ease background-color;
+
+  background-color: #0a84ff;
+  border-radius: 4px;
+  border: 0;
+  padding: 0.5rem 2rem;
+  font-family: "Inter", sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+
+  color: white;
+
+  &:hover {
+    background-color: #0971f1;
+  }
+`;