17/fix folders in preview (#10)

* chore: fix type, remove logs, add test

* chore: read files from json

* fix: show starter dirs in preview

Other tweaks:
- Run storybook with "--ci" command to disable interactive mode
- Exclude sb-vite from optimize dependencies

Fixes kevinschaul/jump-start-template#17

bin/buildStorybook.ts

@@ -22,6 +22,6 @@ const buildStorybook = async (opts: BuildStorybookOpts) => {
   // Build the site
   const outDir = join(opts.startersDir, "dist")
   console.log(`Building site to ${outDir}`);
-  spawnWithIO("storybook", ["build", "--output-dir", outDir], { cwd: toolsRoot });
+  spawnWithIO("storybook", ["build", "--ci", "--output-dir", outDir], { cwd: toolsRoot });
 };
 export default buildStorybook;

bin/storybook.ts

@@ -35,6 +35,6 @@ const storybook = async (opts: StorybookOpts, command: Command) => {
 
   // Start the storybook server, including any additional commands passed
   // through
-  spawnWithIO("storybook", ["dev", "-p", "6006", ...command.args], { cwd: toolsRoot });
+  spawnWithIO("storybook", ["dev", "--ci", "-p", "6006", ...command.args], { cwd: toolsRoot });
 };
 export default storybook;

package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "dev": "./bin/cli.ts storybook --starters-dir ../jump-start",
+    "build": "./bin/cli.ts build-storybook --starters-dir ../jump-start",
     "test": "vitest"
   },
   "dependencies": {

src/StarterPreview.tsx

@@ -4,11 +4,18 @@ import {
   SandpackPreview,
   SandpackCodeEditor,
   useSandpack,
+  SandpackFileExplorer,
 } from "@codesandbox/sandpack-react";
 import { useEffect, useState } from "react";
-import type { Starter } from "./types";
+import type { Starter, StarterFile } from "./types";
 
-export default function StarterPreview({ starter }: { starter: Starter }) {
+export default function StarterPreview({
+  starter,
+  files,
+}: {
+  starter: Starter;
+  files: StarterFile[];
+}) {
   // Show in html whether the preview has rendered yet. Useful for taking
   // screenshots of the previews.
   const [hasPreviewRendered, setHasPreviewRendered] = useState(false);
@@ -17,14 +24,13 @@ export default function StarterPreview({ starter }: { starter: Starter }) {
   const renderPreview = !!starter.preview;
   const previewConfig = starter.preview;
 
-  if (starter.files) {
+  if (files) {
     // Figure out which file to activate in the editor by default. It can be
     // specified in the jump-start.yaml, otherwise it defaults to the first file.
     const mainFile =
-      starter.files.find((d) => d.path === starter.mainFile)?.path ||
-      starter.files[0].path;
+      files.find((d) => d.path === starter.mainFile)?.path || files[0].path;
 
-    const filesForSandpack = starter.files.reduce((p, v) => {
+    const filesForSandpack = files.reduce((p, v) => {
       // Rewrite files into ./starter directory to avoid conflicts with
       // codesandbox's "index.js"
       p[`/starter/${v.path}`] = {
@@ -74,8 +80,12 @@ export default function StarterPreview({ starter }: { starter: Starter }) {
           <hr />
           <h3>Starter files</h3>
           <SandpackLayout>
+            <SandpackFileExplorer
+              autoHiddenFiles={true}
+              style={{ height: "80svh" }}
+            />
             <SandpackCodeEditor
-              showTabs={true}
+              showTabs={false}
               showLineNumbers={true}
               style={{ width: "100%", height: "80svh" }}
             />

src/types.tsx

@@ -3,7 +3,7 @@ export type StarterPreviewConfig = {
   dependencies?: { [name: string]: [version: string] };
 };
 
-export type File = {
+export type StarterFile = {
   path: string;
   // TODO this would be better but it's giving errors
   // type: "dir" | "file";
@@ -20,7 +20,7 @@ export type Starter = {
   defaultDir?: string;
   mainFile?: string;
   preview?: StarterPreviewConfig;
-  files?: File[];
+  files?: StarterFile[];
 };
 
 export type StarterGroupLookup = {

src/util/parseStarters.test.ts

@@ -1,20 +1,23 @@
-import { expect, test, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 import { vol } from "memfs";
-import type { StarterGroupLookup } from "../types";
-import { parseStarters } from "./parseStarters";
+import type { StarterFile, StarterGroupLookup } from "../types";
+import { parseStarters, getStarterFiles } from "./parseStarters";
 require("dotenv").config({ path: "./.env.test", override: true });
+import fs from "fs";
 
 vi.mock("node:fs", async () => {
   const memfs = await vi.importActual("memfs");
   return { default: memfs.fs };
 });
 
-test("basic", () => {
-  vol.fromNestedJSON({
-    ".": {
-      "react-d3": {
-        Chart: {
-          "jump-start.yaml": `
+describe("parseStarters", () => {
+  test("basic", () => {
+    vol.reset();
+    vol.fromNestedJSON({
+      ".": {
+        "react-d3": {
+          Chart: {
+            "jump-start.yaml": `
 ---
 description: |
   An empty React component for writing a responsive D3 chart.
@@ -26,25 +29,49 @@ tags:
   - d3
   - chart
 `,
+          },
         },
       },
-    },
-  });
+    });
 
-  const expected: StarterGroupLookup = {
-    "react-d3": [
-      {
-        title: "Chart",
-        group: "react-d3",
-        dir: "react-d3/Chart",
-        description: `An empty React component for writing a responsive D3 chart.
+    const expected: StarterGroupLookup = {
+      "react-d3": [
+        {
+          title: "Chart",
+          group: "react-d3",
+          dir: "react-d3/Chart",
+          description: `An empty React component for writing a responsive D3 chart.
 
 * Adds size prop
 * Sets up margin convention
 `,
-        tags: ["react", "d3", "chart"],
+          tags: ["react", "d3", "chart"],
+        },
+      ],
+    };
+    expect(parseStarters(".")).toStrictEqual(expected);
+  });
+});
+
+describe("getStarterFiles", () => {
+  test("starter with subdirectory", () => {
+    vol.reset();
+    vol.fromNestedJSON({
+      "/": {
+        "jump-start.yaml": "description: tk",
+        subdirectory: {
+          "data.txt": "some data",
+        },
       },
-    ],
-  };
-  expect(parseStarters(".")).toStrictEqual(expected);
+    });
+
+    const expected: StarterFile[] = [
+      {
+        path: "/subdirectory/data.txt",
+        type: "file",
+        contents: "some data",
+      },
+    ];
+    expect(getStarterFiles("/")).toStrictEqual(expected);
+  });
 });

src/util/parseStarters.ts

@@ -3,12 +3,9 @@ import { globSync } from "glob";
 import path from "path";
 // @ts-ignore
 import yaml from "js-yaml";
-import type { File, Starter, StarterGroupLookup } from "../types";
+import type { StarterFile, Starter, StarterGroupLookup } from "../types";
 
-export function parseStarters(
-  dirPath: string,
-  includeFileData = false,
-): StarterGroupLookup {
+export function parseStarters(dirPath: string): StarterGroupLookup {
   const groups: StarterGroupLookup = {};
 
   const filePattern = path.join("./**", "jump-start.yaml");
@@ -32,10 +29,6 @@ export function parseStarters(
     fileData.title = title;
     fileData.group = group;
 
-    if (includeFileData) {
-      fileData.files = getStarterFiles(path.join(dirPath, dir));
-    }
-
     if (!(group in groups)) {
       groups[group] = [];
     }
@@ -45,25 +38,20 @@ export function parseStarters(
   return groups;
 }
 
-export function getStarterFiles(dirPath: string): File[] {
-  const files = fs.readdirSync(dirPath);
-  let out = [];
+export function getStarterFiles(dirPath: string): StarterFile[] {
+  const files = fs.readdirSync(dirPath, { encoding: "utf-8", recursive: true });
+  let out: StarterFile[] = [];
 
   for (const file of files) {
     if (!["jump-start.yaml", "degit.json"].includes(file)) {
       const filePath = path.join(dirPath, file);
       const stats = fs.statSync(filePath);
-      if (stats.isDirectory()) {
-        out.push({
-          path: file,
-          type: "dir",
-        } as File);
-      } else {
+      if (stats.isFile()) {
         out.push({
           path: file,
           type: "file",
           contents: fs.readFileSync(filePath, "utf8"),
-        } as File);
+        } as StarterFile);
       }
     }
   }

src/util/updateStories.ts

@@ -8,7 +8,7 @@ export default function updateStories(startersDir: string, storiesDir: string) {
   // Delete existing stories
   fs.rmSync(storiesDir, { recursive: true, force: true });
 
-  const groups = parseStarters(startersDir, true);
+  const groups = parseStarters(startersDir);
 
   try {
     fs.mkdirSync(storiesDir, { recursive: true });
@@ -84,7 +84,7 @@ ${starter.description}
 ${getStarterCommand(starter, process.env.GITHUB_USERNAME, process.env.GITHUB_REPO, process.env.DEGIT_MODE)}
 \`\`\`
 
-<StarterPreview starter={starter} />
+<StarterPreview starter={starter} files={files} />
 `;
       fs.writeFileSync(outFileMdx, mdx);
     }

test/cli.test.ts

@@ -7,7 +7,7 @@ import { tmpdir } from "os";
 const root = join(import.meta.dirname, "../");
 
 const runCommand = (command: string, cwd = process.cwd()) => {
-  console.log(`running ${command}`);
+  // console.log(`running ${command}`);
   return execSync(command, { timeout: 10000, cwd: cwd }).toString();
 };
 
@@ -17,13 +17,15 @@ const setupTmpdir = () => {
   return mkdtempSync(join(tmpdir(), "jump-start-tools-"));
 };
 
-const collectProcessOutput = (process: ChildProcess): Promise<string> => {
+const collectProcessOutput = (
+  process: ChildProcess,
+): Promise<[string, string]> => {
   let stdout = "";
   let stderr = "";
-  process.stdout.on("data", (data) => {
+  process.stdout?.on("data", (data) => {
     stdout += data.toString();
   });
-  process.stderr.on("data", (data) => {
+  process.stderr?.on("data", (data) => {
     stderr += data.toString();
   });
   return new Promise((resolve, reject) => {
@@ -49,12 +51,12 @@ describe("jump-start help", () => {
 
 it("storybook should generate stories .mdx files", async () => {
   const cwd = setupTmpdir();
-  console.log(`Running test in ${cwd}`);
+  // console.log(`Running test in ${cwd}`);
 
   runCommand(`npm install ${root}`, cwd);
   runCommand(`cp -r ${root}/test/starters ./starters`, cwd);
 
-  console.log("Spawning child process");
+  // console.log("Spawning child process");
   const childProcess = spawn(
     "./node_modules/.bin/jump-start",
     ["storybook", "--starters-dir", "starters", "--no-watch", "--", "--ci"],
@@ -65,12 +67,12 @@ it("storybook should generate stories .mdx files", async () => {
 
   // Kill the process after 10 seconds
   setTimeout(() => {
-    console.log("Killing child process");
+    // console.log("Killing child process");
     childProcess.kill("SIGKILL");
   }, 10000);
 
   const [stdout, stderr] = await collectProcessOutput(childProcess);
-  console.log(stdout, stderr);
+  // console.log(stdout, stderr);
 
   // Honestly no idea why another setTimeout is needed but otherwise the
   // stories files do not exist yet
@@ -87,12 +89,12 @@ it("storybook should generate stories .mdx files", async () => {
 
 it("build-storybook should generate the site", async () => {
   const cwd = setupTmpdir();
-  console.log(`Running test in ${cwd}`);
+  // console.log(`Running test in ${cwd}`);
 
   runCommand(`npm install ${root}`, cwd);
   runCommand(`cp -r ${root}/test/starters ./starters`, cwd);
 
-  console.log("Spawning child process");
+  // console.log("Spawning child process");
   const childProcess = spawn(
     "./node_modules/.bin/jump-start",
     ["build-storybook", "--starters-dir", "starters"],

test/expected/stories/r/data-analysis/data-analysis.mdx

@@ -18,4 +18,4 @@ A Quarto/R template for data journalism projects
 npx tiged kevinschaul/jump-start/r/data-analysis analysis
 ```
 
-<StarterPreview starter={starter} />
+<StarterPreview starter={starter} files={files} />

vite.config.ts

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  optimizeDeps: {
+    exclude: ['sb-vite']
+  }
 })