Merge branch 'main' of github.com:githubnext/blocks-examples into main

package.json

@@ -189,7 +189,6 @@
     "react-dom": "17.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.3.4",
     "@types/git-url-parse": "^9.0.1",
     "@types/lodash": "^4.14.176",
     "@types/parse-github-url": "^1.0.0",
@@ -198,12 +197,9 @@
     "@types/react-syntax-highlighter": "^13.5.2",
     "@types/three": "^0.134.0",
     "@vitejs/plugin-react": "^1.0.0",
-    "autoprefixer": "^10.4.0",
     "concurrently": "^6.4.0",
     "esbuild": "^0.13.14",
     "npm-watch": "^0.11.0",
-    "postcss": "^8.3.11",
-    "tailwindcss": "^2.2.19",
     "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }

src/App.tsx

@@ -4,14 +4,16 @@ import { AppInner } from "./components/app-inner";
 import { useLocalStorage, usePackageJson } from "./hooks";
 
 function App() {
-  const [blockId, setBlockId] = useState(
+  const [blockId, setBlockId] = useLocalStorage(
+    "blockId",
     "/src/blocks/file-blocks/code/index.tsx"
   );
-  const [fileUrl, setFileUrl] = useState(
+  const [fileUrl, setFileUrl] = useLocalStorage(
+    "fileUrl",
     "https://github.com/githubocto/flat/blob/main/src/git.ts"
   );
   const [doMimicProductionEnvironment, setDoMimicProductionEnvironment] =
-    useState(false);
+    useLocalStorage("doMimicProductionEnvironment", false);
 
   const { data: pkgJson, status } = usePackageJson();
 
@@ -53,24 +55,53 @@ function App() {
   const block = pkgJson?.blocks.find((v) => v.entry === blockId);
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden">
-      <div className="bg-gray-100 border-b p-4 flex-shrink-0 flex items-center">
-        <div className="w-[400px]">
-          <label className="text-xs font-medium block mb-1" htmlFor="url">
+    <div style={{
+      height: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden",
+      fontFamily: "sans-serif",
+    }}>
+      <div style={{
+        boxShadow: "0 0 1em rgba(0, 0, 0, 0.1)",
+        flex: "none",
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        padding: "0.5em",
+        zIndex: 10,
+      }}>
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="url">
             GitHub File URL
           </label>
           <input
             id="url"
-            className="form-input w-full text-sm"
+            style={{
+              width: "calc(100% - 1.2em)",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             placeholder="Enter GitHub file URL"
             value={fileUrl}
             onChange={(e) => {
               setFileUrl(e.target.value);
             }}
           />
         </div>
-        <div className="ml-4">
-          <label className="text-xs font-medium block mb-1" htmlFor="block">
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="block">
             Block
           </label>
           <select
@@ -79,7 +110,12 @@ function App() {
             }}
             value={blockId}
             disabled={!pkgJson || status !== "success"}
-            className="form-select text-sm"
+            style={{
+              width: "100%",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             name="block"
             id="block"
           >
@@ -112,16 +148,26 @@ function App() {
             </optgroup>
           </select>
         </div>
-        <div className="ml-4">
-          <label className="text-xs font-medium block mb-1" htmlFor="block">
+        <div style={{ flex: 1, minWidth: "min(90vw, 13em)", margin: "0.6em 0.5em" }}>
+          <label style={{
+            fontSize: "0.9em",
+            fontWeight: 500,
+            display: "block",
+            marginBottom: "0.5em",
+          }} htmlFor="block">
             Environment
           </label>
           <select
             onChange={(e) => {
               setDoMimicProductionEnvironment(e.target.value === "true");
             }}
             value={doMimicProductionEnvironment ? "true" : "false"}
-            className="form-select text-sm"
+            style={{
+              width: "100%",
+              fontSize: "1em",
+              padding: "0.5em",
+              border: "1px solid #ccc",
+            }}
             name="block"
             id="block"
           >
@@ -134,10 +180,15 @@ function App() {
           </select>
         </div>
       </div>
-      <div className="flex-1 overflow-auto">
+      <div style={{
+        flex: 1,
+        overflow: "auto",
+      }}>
         {(!blockId || !fileUrl) && (
-          <div className="p-4">
-            <p className="text-sm">
+          <div style={{
+            padding: "1em",
+          }}>
+            <p>
               Please select a block and enter a file path.
             </p>
           </div>

src/blocks/file-blocks/code/index.tsx

@@ -1,8 +1,8 @@
 import "./style.css"
 import SyntaxHighlighter from "react-syntax-highlighter";
-import { FileBlockProps } from "@githubnext/utils";
+// import { FileBlockProps } from "@githubnext/utils";
 
-export default function (props: FileBlockProps) {
+export default function (props: any) {
   const { content } = props;
 
   return (

src/components/app-inner.tsx

@@ -30,26 +30,64 @@ function ErrorFallback({
   resetErrorBoundary: () => void;
 }) {
   return (
-    <div className="p-4" role="alert">
-      <div className="bg-red-100 border border-red-600 text-sm p-4">
-        <div className="flex items-center justify-between">
-          <div className="flex-1">
-            <p className="text-red-600">Something went wrong!</p>
-            <div className="my-2 overflow-hidden">
-              <p className="overflow-auto text-xs text-red-600 font-mono leading-5">
-                {error.message}
-              </p>
-            </div>
-          </div>
-          <div className="flex-shrink-0">
-            <button
-              className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
-              onClick={resetErrorBoundary}
-            >
-              Try again
-            </button>
+    <div style={{
+      padding: '10vh 1rem',
+      textAlign: 'center',
+      backgroundColor: '#FEF2F2',
+      color: '#DB2725',
+      height: '100%',
+      fontSize: '1.2em',
+    }} role="alert">
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+        <div style={{
+          flex: 1
+        }}>
+          <p>Something went wrong!</p>
+          <div style={{
+            margin: '1rem 0',
+            background: '#fff',
+            maxHeight: '20rem',
+            overflow: 'auto',
+            maxWidth: '90vw',
+          }}>
+            <p style={{
+              fontFamily: 'monospace',
+              fontSize: '1em',
+              lineHeight: '1.5em',
+            }}>
+              {error.message}
+            </p>
           </div>
         </div>
+        <div style={{
+          flex: "none"
+        }}>
+          <button
+            style={{
+              appearance: 'none',
+              backgroundColor: '#DB2725',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '0.9rem 1.6rem',
+              fontSize: '0.8em',
+              lineHeight: '1em',
+              borderRadius: '2em',
+              fontWeight: 500,
+              border: `none`,
+              color: '#fff',
+              cursor: 'pointer',
+            }}
+            onClick={resetErrorBoundary}
+          >
+            Try again
+          </button>
+        </div>
       </div>
     </div>
   );

src/components/error-state.tsx

@@ -1,5 +1,12 @@
 export const ErrorState = () => (
-  <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+  <div style={{
+    padding: '10vh 1rem',
+    textAlign: 'center',
+    backgroundColor: '#FEF2F2',
+    color: '#DB2725',
+    height: '100%',
+    fontStyle: 'italic',
+  }}>
     Something went wrong
   </div>
 );

src/components/file-block.tsx

@@ -1,4 +1,3 @@
-import { useCallback } from "react";
 import { useFileContent } from "../hooks";
 import { AppInnerProps } from "./app-inner";
 import { ErrorState } from "./error-state";
@@ -20,7 +19,14 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
     !urlParts.ref ||
     !urlParts.filepath
   ) {
-    <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+    <div style={{
+      padding: '10vh 1rem',
+      textAlign: 'center',
+      backgroundColor: '#FEF2F2',
+      color: '#DB2725',
+      height: '100%',
+      fontStyle: 'italic',
+    }}>
       Unable to parse this GitHub URL. Are you sure you've linked to a folder
       and not a file?
     </div>;
@@ -39,7 +45,10 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
   if (status === "error") return <ErrorState />;
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <ProductionBlock
           contents={data.content}
           context={{
@@ -51,7 +60,10 @@ export function FileBlock(props: Omit<AppInnerProps, "onReset" | "blockType">) {
         />
       </div>
     ) : (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <LocalBlock
           contents={data.content}
           context={{

src/components/folder-block.tsx

@@ -17,7 +17,14 @@ export function FolderBlock(
     !urlParts.name
   ) {
     return (
-      <div className="p-6 text-center bg-red-50 text-red-600 py-20 h-full italic">
+      <div style={{
+        padding: '10vh 1rem',
+        textAlign: 'center',
+        backgroundColor: '#FEF2F2',
+        color: '#DB2725',
+        height: '100%',
+        fontStyle: 'italic',
+      }}>
         Unable to parse this GitHub URL. Are you sure you've linked to a folder and not a file?
       </div>
     );
@@ -42,7 +49,10 @@ export function FolderBlock(
   if (status === "error") return <ErrorState />;
   if (status === "success" && data) {
     return doMimicProductionEnvironment ? (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <ProductionBlock
           tree={data.tree}
           context={{
@@ -54,7 +64,10 @@ export function FolderBlock(
         />
       </div>
     ) : (
-      <div className="sandbox-wrapper h-full w-full">
+      <div className="sandbox-wrapper" style={{
+        height: "100%",
+        width: "100%"
+      }}>
         <LocalBlock
           tree={data.tree}
           context={{

src/components/loading-state.tsx

@@ -1,5 +1,11 @@
 export const LoadingState = () => (
-  <div className="p-4">
-    <p className="text-sm">Loading...</p>
+  <div style={{
+    padding: '10vh 1rem',
+    textAlign: 'center',
+    color: '#999',
+    height: '100%',
+    fontStyle: 'italic',
+  }}>
+    <p>Loading...</p>
   </div>
 );