chore: add prettier and format all files (#49)

SamVerschueren · web-flow · commit f620fd83fd28 · 2024-06-06T15:33:47.000+01:00
diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
@@ -0,0 +1,23 @@
+name: TutorialKit
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup
+        uses: pnpm/action-setup@v4
+        with:
+          version: 8
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: pnpm install
+      - name: Lint
+        run: pnpm prettier --check .
+      - name: Build
+        run: pnpm build
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+**/*.md
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "@commitlint/config-conventional": "^19.2.2",
     "commitlint": "^19.3.0",
     "husky": "^9.0.11",
-    "is-ci": "^3.0.1"
+    "is-ci": "^3.0.1",
+    "prettier": "^3.3.1"
   },
   "lint-staged": {},
   "commitlint": {
@@ -28,6 +29,6 @@
     }
   },
   "engines": {
-    "node": "^18.18.0"
+    "node": ">=18.18.0"
   }
 }
diff --git a/packages/astro/src/default/styles/variables.css b/packages/astro/src/default/styles/variables.css
@@ -170,7 +170,6 @@
   --tk-elements-topBar-secondaryButton-iconColor: var(--tk-text-secondary);
   --tk-elements-topBar-secondaryButton-iconColorHover: var(--tk-text-primary);
 
-
   /* Previews */
   --tk-elements-previews-borderColor: theme('colors.gray.200');
 
diff --git a/packages/astro/src/default/utils/workspace.ts b/packages/astro/src/default/utils/workspace.ts
@@ -27,5 +27,5 @@ export function hasWorkspace(lesson: Lesson) {
   }
 
   // we have a workspace if we have more than 0 terminal panels
-  return lesson.data.terminal.panels.length > 0
+  return lesson.data.terminal.panels.length > 0;
 }
diff --git a/packages/cli/src/utils/shell.ts b/packages/cli/src/utils/shell.ts
@@ -42,7 +42,7 @@ export async function runShellCommand(
 
       child.on('error', (code) => {
         reject(code);
-      })
+      });
     });
 
     child.stdout?.setEncoding('utf8');
diff --git a/packages/components/react/src/Panels/PreviewPanel.tsx b/packages/components/react/src/Panels/PreviewPanel.tsx
@@ -79,17 +79,16 @@ export const PreviewPanel = memo(
               <div className="panel-icon i-ph-lightning-duotone"></div>
               <span className="text-sm">Preparing Environment</span>
             </div>
-            {
-              showToggleTerminal &&
-                <button
-                  className="panel-button px-2 py-0.5 -mr-1 -my-1"
-                  title="Toggle Terminal"
-                  onClick={() => toggleTerminal?.()}
-                >
-                  <span className="panel-button-icon i-ph-terminal-window-duotone"></span>
-                  <span className="text-sm">Toggle Terminal</span>
-                </button>
-            }
+            {showToggleTerminal && (
+              <button
+                className="panel-button px-2 py-0.5 -mr-1 -my-1"
+                title="Toggle Terminal"
+                onClick={() => toggleTerminal?.()}
+              >
+                <span className="panel-button-icon i-ph-terminal-window-duotone"></span>
+                <span className="text-sm">Toggle Terminal</span>
+              </button>
+            )}
           </div>
           <BootScreen tutorialRunner={tutorialRunner} />
         </div>
diff --git a/packages/components/react/src/Panels/TerminalPanel.tsx b/packages/components/react/src/Panels/TerminalPanel.tsx
@@ -8,12 +8,12 @@ const Terminal = lazy(() => import('../Terminal/index.js'));
 
 interface TerminalPanelProps {
   theme: 'dark' | 'light';
-  tutorialRunner: TutorialRunner
+  tutorialRunner: TutorialRunner;
 }
 
 const ICON_MAP = new Map<TerminalPanelType, string>([
   ['output', 'i-ph-newspaper-duotone'],
-  ['terminal', 'i-ph-terminal-window-duotone']
+  ['terminal', 'i-ph-terminal-window-duotone'],
 ]);
 
 export function TerminalPanel({ theme, tutorialRunner }: TerminalPanelProps) {
@@ -36,59 +36,65 @@ export function TerminalPanel({ theme, tutorialRunner }: TerminalPanelProps) {
     <div className="panel-container bg-tk-elements-app-backgroundColor">
       <div className="panel-tabs-header overflow-x-hidden">
         <div className="panel-title w-full">
-          <ul className="flex h-full border-b border-tk-elements-app-borderColor w-full" role="tablist" aria-orientation="horizontal">
-            {
-              terminalConfig.panels.map(({ type, name }, index) => {
-                const selected = tabIndex === index;
+          <ul
+            className="flex h-full border-b border-tk-elements-app-borderColor w-full"
+            role="tablist"
+            aria-orientation="horizontal"
+          >
+            {terminalConfig.panels.map(({ type, name }, index) => {
+              const selected = tabIndex === index;
 
-                return (
-                  <li key={index}>
-                    <button
-                      className={classNames('group h-full px-4 flex items-center gap-1.5 whitespace-nowrap text-sm position-relative border-r border-tk-elements-panel-headerTab-borderColor', {
-                        'bg-tk-elements-panel-headerTab-backgroundColor text-tk-elements-panel-headerTab-textColor hover:bg-tk-elements-panel-headerTab-backgroundColorHover hover:text-tk-elements-panel-headerTab-textColorHover hover:border-tk-elements-panel-headerTab-borderColorHover': !selected,
-                        'bg-tk-elements-panel-headerTab-backgroundColorActive text-tk-elements-panel-headerTab-textColorActive border-tk-elements-panel-headerTab-borderColorActive': selected,
+              return (
+                <li key={index}>
+                  <button
+                    className={classNames(
+                      'group h-full px-4 flex items-center gap-1.5 whitespace-nowrap text-sm position-relative border-r border-tk-elements-panel-headerTab-borderColor',
+                      {
+                        'bg-tk-elements-panel-headerTab-backgroundColor text-tk-elements-panel-headerTab-textColor hover:bg-tk-elements-panel-headerTab-backgroundColorHover hover:text-tk-elements-panel-headerTab-textColorHover hover:border-tk-elements-panel-headerTab-borderColorHover':
+                          !selected,
+                        'bg-tk-elements-panel-headerTab-backgroundColorActive text-tk-elements-panel-headerTab-textColorActive border-tk-elements-panel-headerTab-borderColorActive':
+                          selected,
                         'shadow-[0px_1px_0px_0px] shadow-tk-elements-panel-headerTab-backgroundColorActive': selected,
-                        'border-l': index > 0
-                      })}
-                      title={name}
-                      aria-selected={selected}
-                      onClick={() => setTabIndex(index) }
-                    >
-                      <span className={classNames(`text-tk-elements-panel-headerTab-iconColor ${ICON_MAP.get(type) ?? ''}`, {
+                        'border-l': index > 0,
+                      },
+                    )}
+                    title={name}
+                    aria-selected={selected}
+                    onClick={() => setTabIndex(index)}
+                  >
+                    <span
+                      className={classNames(`text-tk-elements-panel-headerTab-iconColor ${ICON_MAP.get(type) ?? ''}`, {
                         'group-hover:text-tk-elements-panel-headerTab-iconColorHover': !selected,
-                        'text-tk-elements-panel-headerTab-iconColorActive': selected
-                      })}></span>
-                      {name}
-                    </button>
-                  </li>
-                )
-              })
-            }
+                        'text-tk-elements-panel-headerTab-iconColorActive': selected,
+                      })}
+                    ></span>
+                    {name}
+                  </button>
+                </li>
+              );
+            })}
           </ul>
         </div>
       </div>
       <div className="h-full overflow-hidden">
-        {
-          domLoaded &&
-            <Suspense>
-            {
-              terminalConfig.panels.map(({ id, type }, index) => (
-                <Terminal
-                  key={id}
-                  className={tabIndex !== index ? 'hidden' : ''}
-                  theme={theme}
-                  readonly={type === 'output'}
-                  onTerminalReady={(terminal) => {
-                    tutorialRunner.attachTerminal(id, terminal);
-                  }}
-                  onTerminalResize={(cols, rows) => {
-                    tutorialRunner.onTerminalResize(cols, rows);
-                  }}
-                />
-              ))
-            }
-            </Suspense>
-         }
+        {domLoaded && (
+          <Suspense>
+            {terminalConfig.panels.map(({ id, type }, index) => (
+              <Terminal
+                key={id}
+                className={tabIndex !== index ? 'hidden' : ''}
+                theme={theme}
+                readonly={type === 'output'}
+                onTerminalReady={(terminal) => {
+                  tutorialRunner.attachTerminal(id, terminal);
+                }}
+                onTerminalResize={(cols, rows) => {
+                  tutorialRunner.onTerminalResize(cols, rows);
+                }}
+              />
+            ))}
+          </Suspense>
+        )}
       </div>
     </div>
   );
diff --git a/packages/components/react/src/Panels/WorkspacePanel.tsx b/packages/components/react/src/Panels/WorkspacePanel.tsx
@@ -40,7 +40,8 @@ export function WorkspacePanel({ lesson, tutorialRunner, theme }: Props) {
 
   const fileTree = editor === undefined || editor === true || (editor !== false && editor?.fileTree !== false);
   const hideTerminalPanel =
-    terminal === false || (typeof terminal === 'object' && Array.isArray(terminal.panels) && terminal.panels.length === 0);
+    terminal === false ||
+    (typeof terminal === 'object' && Array.isArray(terminal.panels) && terminal.panels.length === 0);
 
   const editorPanelRef = useRef<ImperativePanelHandle>(null);
   const previewPanelRef = useRef<ImperativePanelHandle>(null);
@@ -319,30 +320,48 @@ export function WorkspacePanel({ lesson, tutorialRunner, theme }: Props) {
         collapsible={previews === false}
         ref={previewPanelRef}
         className={classNames({
-          'border-t border-tk-elements-app-borderColor': editor !== false
-        })}>
+          'border-t border-tk-elements-app-borderColor': editor !== false,
+        })}
+      >
         <PreviewPanel
           tutorialRunner={tutorialRunner}
           ref={previewRef}
           showToggleTerminal={!hideTerminalPanel}
-          toggleTerminal={toggleTerminal} />
+          toggleTerminal={toggleTerminal}
+        />
       </Panel>
       <PanelResizeHandle
         className={resizePanelStyles.PanelResizeHandle}
         hitAreaMargins={{ fine: 5, coarse: 5 }}
         disabled={hideTerminalPanel || previews === false}
       />
       <Panel
-        id={hideTerminalPanel ? 'terminal-none' : previews === false && editor === false ? 'terminal-full' : previews === false ? 'terminal-opened' : 'terminal-closed'}
-        defaultSize={hideTerminalPanel ? 0 : previews === false && editor === false ? 100 : previews === false ? DEFAULT_TERMINAL_SIZE : 0}
+        id={
+          hideTerminalPanel
+            ? 'terminal-none'
+            : previews === false && editor === false
+              ? 'terminal-full'
+              : previews === false
+                ? 'terminal-opened'
+                : 'terminal-closed'
+        }
+        defaultSize={
+          hideTerminalPanel
+            ? 0
+            : previews === false && editor === false
+              ? 100
+              : previews === false
+                ? DEFAULT_TERMINAL_SIZE
+                : 0
+        }
         minSize={hideTerminalPanel ? 0 : 10}
         collapsible={previews !== false}
         ref={terminalPanelRef}
         onExpand={() => {
           terminalExpanded.current = true;
         }}
         className={classNames({
-          'border-t border-tk-elements-app-borderColor': previews !== false
+          'border-t border-tk-elements-app-borderColor': previews !== false,
         })}
       >
         <TerminalPanel tutorialRunner={tutorialRunner} theme={theme} />
diff --git a/packages/components/react/src/Terminal/index.tsx b/packages/components/react/src/Terminal/index.tsx
@@ -32,7 +32,7 @@ export function Terminal({ theme, className, readonly = true, onTerminalReady, o
       cursorBlink: true,
       convertEol: true,
       disableStdin: readonly,
-      theme: getTerminalTheme(readonly ? { cursor: '#00000000'} : {}),
+      theme: getTerminalTheme(readonly ? { cursor: '#00000000' } : {}),
       fontSize: 13,
       fontFamily: 'Menlo, courier-new, courier, monospace',
     });
@@ -68,7 +68,7 @@ export function Terminal({ theme, className, readonly = true, onTerminalReady, o
     const terminal = terminalRef.current;
 
     // we render a transparent cursor in case the terminal is readonly
-    terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000'} : {});
+    terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
     terminal.options.disableStdin = readonly;
   }, [theme, readonly]);
 
diff --git a/packages/components/react/src/Terminal/theme.ts b/packages/components/react/src/Terminal/theme.ts
@@ -31,6 +31,6 @@ export function getTerminalTheme(overrides?: ITheme): ITheme {
     brightCyan: cssVar('--tk-elements-terminal-color-brightCyan'),
     brightWhite: cssVar('--tk-elements-terminal-color-brightWhite'),
 
-    ...overrides
+    ...overrides,
   };
 }
diff --git a/packages/create-tutorial/package.json b/packages/create-tutorial/package.json
@@ -7,7 +7,7 @@
   "homepage": "https://github.com/stackblitz/tutorialkit",
   "license": "MIT",
   "bin": {
-    "create-tutorial": "dist/index.js"
+    "create-tutorial": "./dist/index.js"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -b",
diff --git a/packages/runtime/src/tutorial-runner.ts b/packages/runtime/src/tutorial-runner.ts
@@ -137,7 +137,7 @@ export class TutorialRunner {
     }
 
     // if the schema is `true`, we just use the default empty array
-    const previews = config === true ? [] : (config ?? []);
+    const previews = config === true ? [] : config ?? [];
 
     const previewInfos = previews.map((preview) => {
       const info = new PreviewInfo(preview);
@@ -339,7 +339,7 @@ export class TutorialRunner {
    * @param terminal The terminal to hook up to the JSH process.
    */
   async attachTerminal(id: string, terminal: ITerminal) {
-    const panel = this.terminalConfig.get().panels.find((panel) => panel.id === id)
+    const panel = this.terminalConfig.get().panels.find((panel) => panel.id === id);
 
     if (!panel) {
       // if we don't have a panel with the provided id, just exit.
diff --git a/packages/runtime/src/webcontainer/shell.ts b/packages/runtime/src/webcontainer/shell.ts
@@ -8,7 +8,7 @@ export async function newJSHProcess(webcontainer: WebContainer, terminal: ITermi
     terminal: {
       cols: terminal.cols ?? 80,
       rows: terminal.rows ?? 15,
-    }
+    },
   });
 
   const input = process.input.getWriter();
@@ -17,22 +17,24 @@ export async function newJSHProcess(webcontainer: WebContainer, terminal: ITermi
   const jshReady = withResolvers<void>();
   let isInteractive = false;
 
-  output.pipeTo(new WritableStream({
-    write(data) {
-      if (!isInteractive) {
-        const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
+  output.pipeTo(
+    new WritableStream({
+      write(data) {
+        if (!isInteractive) {
+          const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
 
-        if (osc === 'interactive') {
-          // wait until we see the interactive OSC
-          isInteractive = true;
+          if (osc === 'interactive') {
+            // wait until we see the interactive OSC
+            isInteractive = true;
 
-          jshReady.resolve();
+            jshReady.resolve();
+          }
         }
-      }
 
-      terminal.write(data);
-    }
-  }));
+        terminal.write(data);
+      },
+    }),
+  );
 
   terminal.onData((data) => {
     if (isInteractive) {
diff --git a/packages/runtime/src/webcontainer/terminal-config.ts b/packages/runtime/src/webcontainer/terminal-config.ts
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html b/packages/template/src/content/tutorial/1-basics/1-introduction/2-foo/_files/src/index.html
diff --git a/packages/template/src/content/tutorial/1-basics/1-introduction/3-bar/_files/src/index.html b/packages/template/src/content/tutorial/1-basics/1-introduction/3-bar/_files/src/index.html
diff --git a/packages/types/src/schemas/common.ts b/packages/types/src/schemas/common.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@`
`13`	`13`	`"@commitlint/config-conventional": "^19.2.2",`
`14`	`14`	`"commitlint": "^19.3.0",`
`15`	`15`	`"husky": "^9.0.11",`
`16`		`- "is-ci": "^3.0.1"`
	`16`	`+ "is-ci": "^3.0.1",`
	`17`	`+ "prettier": "^3.3.1"`
`17`	`18`	`},`
`18`	`19`	`"lint-staged": {},`
`19`	`20`	`"commitlint": {`
`@@ -28,6 +29,6 @@`
`28`	`29`	`}`
`29`	`30`	`},`
`30`	`31`	`"engines": {`
`31`		`- "node": "^18.18.0"`
	`32`	`+ "node": ">=18.18.0"`
`32`	`33`	`}`
`33`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -27,5 +27,5 @@ export function hasWorkspace(lesson: Lesson) {`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`// we have a workspace if we have more than 0 terminal panels`
`30`		`- return lesson.data.terminal.panels.length > 0`
	`30`	`+ return lesson.data.terminal.panels.length > 0;`
`31`	`31`	`}`