Skip to content

Commit f620fd8

Browse files
SamVerschuerenSamVerschueren
authored
chore: add prettier and format all files (#49)
1 parent e720657 commit f620fd8

File tree

19 files changed

+215
-152
lines changed

19 files changed

+215
-152
lines changed

‎.github/workflows/main.yaml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: TutorialKit
2+
on:
3+
push:
4+
branches:
5+
- main
6+
pull_request:
7+
jobs:
8+
test:
9+
name: Test
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: Setup
13+
uses: pnpm/action-setup@v4
14+
with:
15+
version: 8
16+
- name: Checkout
17+
uses: actions/checkout@v3
18+
- name: Install dependencies
19+
run: pnpm install
20+
- name: Lint
21+
run: pnpm prettier --check .
22+
- name: Build
23+
run: pnpm build

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
pnpm-lock.yaml
2+
**/*.md

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
"@commitlint/config-conventional": "^19.2.2",
1414
"commitlint": "^19.3.0",
1515
"husky": "^9.0.11",
16-
"is-ci": "^3.0.1"
16+
"is-ci": "^3.0.1",
17+
"prettier": "^3.3.1"
1718
},
1819
"lint-staged": {},
1920
"commitlint": {
@@ -28,6 +29,6 @@
2829
}
2930
},
3031
"engines": {
31-
"node": "^18.18.0"
32+
"node": ">=18.18.0"
3233
}
3334
}

‎packages/astro/src/default/styles/variables.css

-1
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@
170170
--tk-elements-topBar-secondaryButton-iconColor: var(--tk-text-secondary);
171171
--tk-elements-topBar-secondaryButton-iconColorHover: var(--tk-text-primary);
172172

173-
174173
/* Previews */
175174
--tk-elements-previews-borderColor: theme('colors.gray.200');
176175

‎packages/astro/src/default/utils/workspace.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,5 @@ export function hasWorkspace(lesson: Lesson) {
2727
}
2828

2929
// 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;
3131
}

‎packages/cli/src/utils/shell.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export async function runShellCommand(
4242

4343
child.on('error', (code) => {
4444
reject(code);
45-
})
45+
});
4646
});
4747

4848
child.stdout?.setEncoding('utf8');

‎packages/components/react/src/Panels/PreviewPanel.tsx

+10-11
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,16 @@ export const PreviewPanel = memo(
7979
<div className="panel-icon i-ph-lightning-duotone"></div>
8080
<span className="text-sm">Preparing Environment</span>
8181
</div>
82-
{
83-
showToggleTerminal &&
84-
<button
85-
className="panel-button px-2 py-0.5 -mr-1 -my-1"
86-
title="Toggle Terminal"
87-
onClick={() => toggleTerminal?.()}
88-
>
89-
<span className="panel-button-icon i-ph-terminal-window-duotone"></span>
90-
<span className="text-sm">Toggle Terminal</span>
91-
</button>
92-
}
82+
{showToggleTerminal && (
83+
<button
84+
className="panel-button px-2 py-0.5 -mr-1 -my-1"
85+
title="Toggle Terminal"
86+
onClick={() => toggleTerminal?.()}
87+
>
88+
<span className="panel-button-icon i-ph-terminal-window-duotone"></span>
89+
<span className="text-sm">Toggle Terminal</span>
90+
</button>
91+
)}
9392
</div>
9493
<BootScreen tutorialRunner={tutorialRunner} />
9594
</div>

‎packages/components/react/src/Panels/TerminalPanel.tsx

+54-48
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ const Terminal = lazy(() => import('../Terminal/index.js'));
88

99
interface TerminalPanelProps {
1010
theme: 'dark' | 'light';
11-
tutorialRunner: TutorialRunner
11+
tutorialRunner: TutorialRunner;
1212
}
1313

1414
const ICON_MAP = new Map<TerminalPanelType, string>([
1515
['output', 'i-ph-newspaper-duotone'],
16-
['terminal', 'i-ph-terminal-window-duotone']
16+
['terminal', 'i-ph-terminal-window-duotone'],
1717
]);
1818

1919
export function TerminalPanel({ theme, tutorialRunner }: TerminalPanelProps) {
@@ -36,59 +36,65 @@ export function TerminalPanel({ theme, tutorialRunner }: TerminalPanelProps) {
3636
<div className="panel-container bg-tk-elements-app-backgroundColor">
3737
<div className="panel-tabs-header overflow-x-hidden">
3838
<div className="panel-title w-full">
39-
<ul className="flex h-full border-b border-tk-elements-app-borderColor w-full" role="tablist" aria-orientation="horizontal">
40-
{
41-
terminalConfig.panels.map(({ type, name }, index) => {
42-
const selected = tabIndex === index;
39+
<ul
40+
className="flex h-full border-b border-tk-elements-app-borderColor w-full"
41+
role="tablist"
42+
aria-orientation="horizontal"
43+
>
44+
{terminalConfig.panels.map(({ type, name }, index) => {
45+
const selected = tabIndex === index;
4346

44-
return (
45-
<li key={index}>
46-
<button
47-
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', {
48-
'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,
49-
'bg-tk-elements-panel-headerTab-backgroundColorActive text-tk-elements-panel-headerTab-textColorActive border-tk-elements-panel-headerTab-borderColorActive': selected,
47+
return (
48+
<li key={index}>
49+
<button
50+
className={classNames(
51+
'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',
52+
{
53+
'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':
54+
!selected,
55+
'bg-tk-elements-panel-headerTab-backgroundColorActive text-tk-elements-panel-headerTab-textColorActive border-tk-elements-panel-headerTab-borderColorActive':
56+
selected,
5057
'shadow-[0px_1px_0px_0px] shadow-tk-elements-panel-headerTab-backgroundColorActive': selected,
51-
'border-l': index > 0
52-
})}
53-
title={name}
54-
aria-selected={selected}
55-
onClick={() => setTabIndex(index) }
56-
>
57-
<span className={classNames(`text-tk-elements-panel-headerTab-iconColor ${ICON_MAP.get(type) ?? ''}`, {
58+
'border-l': index > 0,
59+
},
60+
)}
61+
title={name}
62+
aria-selected={selected}
63+
onClick={() => setTabIndex(index)}
64+
>
65+
<span
66+
className={classNames(`text-tk-elements-panel-headerTab-iconColor ${ICON_MAP.get(type) ?? ''}`, {
5867
'group-hover:text-tk-elements-panel-headerTab-iconColorHover': !selected,
59-
'text-tk-elements-panel-headerTab-iconColorActive': selected
60-
})}></span>
61-
{name}
62-
</button>
63-
</li>
64-
)
65-
})
66-
}
68+
'text-tk-elements-panel-headerTab-iconColorActive': selected,
69+
})}
70+
></span>
71+
{name}
72+
</button>
73+
</li>
74+
);
75+
})}
6776
</ul>
6877
</div>
6978
</div>
7079
<div className="h-full overflow-hidden">
71-
{
72-
domLoaded &&
73-
<Suspense>
74-
{
75-
terminalConfig.panels.map(({ id, type }, index) => (
76-
<Terminal
77-
key={id}
78-
className={tabIndex !== index ? 'hidden' : ''}
79-
theme={theme}
80-
readonly={type === 'output'}
81-
onTerminalReady={(terminal) => {
82-
tutorialRunner.attachTerminal(id, terminal);
83-
}}
84-
onTerminalResize={(cols, rows) => {
85-
tutorialRunner.onTerminalResize(cols, rows);
86-
}}
87-
/>
88-
))
89-
}
90-
</Suspense>
91-
}
80+
{domLoaded && (
81+
<Suspense>
82+
{terminalConfig.panels.map(({ id, type }, index) => (
83+
<Terminal
84+
key={id}
85+
className={tabIndex !== index ? 'hidden' : ''}
86+
theme={theme}
87+
readonly={type === 'output'}
88+
onTerminalReady={(terminal) => {
89+
tutorialRunner.attachTerminal(id, terminal);
90+
}}
91+
onTerminalResize={(cols, rows) => {
92+
tutorialRunner.onTerminalResize(cols, rows);
93+
}}
94+
/>
95+
))}
96+
</Suspense>
97+
)}
9298
</div>
9399
</div>
94100
);

‎packages/components/react/src/Panels/WorkspacePanel.tsx

+26-7
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,8 @@ export function WorkspacePanel({ lesson, tutorialRunner, theme }: Props) {
4040

4141
const fileTree = editor === undefined || editor === true || (editor !== false && editor?.fileTree !== false);
4242
const hideTerminalPanel =
43-
terminal === false || (typeof terminal === 'object' && Array.isArray(terminal.panels) && terminal.panels.length === 0);
43+
terminal === false ||
44+
(typeof terminal === 'object' && Array.isArray(terminal.panels) && terminal.panels.length === 0);
4445

4546
const editorPanelRef = useRef<ImperativePanelHandle>(null);
4647
const previewPanelRef = useRef<ImperativePanelHandle>(null);
@@ -319,30 +320,48 @@ export function WorkspacePanel({ lesson, tutorialRunner, theme }: Props) {
319320
collapsible={previews === false}
320321
ref={previewPanelRef}
321322
className={classNames({
322-
'border-t border-tk-elements-app-borderColor': editor !== false
323-
})}>
323+
'border-t border-tk-elements-app-borderColor': editor !== false,
324+
})}
325+
>
324326
<PreviewPanel
325327
tutorialRunner={tutorialRunner}
326328
ref={previewRef}
327329
showToggleTerminal={!hideTerminalPanel}
328-
toggleTerminal={toggleTerminal} />
330+
toggleTerminal={toggleTerminal}
331+
/>
329332
</Panel>
330333
<PanelResizeHandle
331334
className={resizePanelStyles.PanelResizeHandle}
332335
hitAreaMargins={{ fine: 5, coarse: 5 }}
333336
disabled={hideTerminalPanel || previews === false}
334337
/>
335338
<Panel
336-
id={hideTerminalPanel ? 'terminal-none' : previews === false && editor === false ? 'terminal-full' : previews === false ? 'terminal-opened' : 'terminal-closed'}
337-
defaultSize={hideTerminalPanel ? 0 : previews === false && editor === false ? 100 : previews === false ? DEFAULT_TERMINAL_SIZE : 0}
339+
id={
340+
hideTerminalPanel
341+
? 'terminal-none'
342+
: previews === false && editor === false
343+
? 'terminal-full'
344+
: previews === false
345+
? 'terminal-opened'
346+
: 'terminal-closed'
347+
}
348+
defaultSize={
349+
hideTerminalPanel
350+
? 0
351+
: previews === false && editor === false
352+
? 100
353+
: previews === false
354+
? DEFAULT_TERMINAL_SIZE
355+
: 0
356+
}
338357
minSize={hideTerminalPanel ? 0 : 10}
339358
collapsible={previews !== false}
340359
ref={terminalPanelRef}
341360
onExpand={() => {
342361
terminalExpanded.current = true;
343362
}}
344363
className={classNames({
345-
'border-t border-tk-elements-app-borderColor': previews !== false
364+
'border-t border-tk-elements-app-borderColor': previews !== false,
346365
})}
347366
>
348367
<TerminalPanel tutorialRunner={tutorialRunner} theme={theme} />

‎packages/components/react/src/Terminal/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function Terminal({ theme, className, readonly = true, onTerminalReady, o
3232
cursorBlink: true,
3333
convertEol: true,
3434
disableStdin: readonly,
35-
theme: getTerminalTheme(readonly ? { cursor: '#00000000'} : {}),
35+
theme: getTerminalTheme(readonly ? { cursor: '#00000000' } : {}),
3636
fontSize: 13,
3737
fontFamily: 'Menlo, courier-new, courier, monospace',
3838
});
@@ -68,7 +68,7 @@ export function Terminal({ theme, className, readonly = true, onTerminalReady, o
6868
const terminal = terminalRef.current;
6969

7070
// we render a transparent cursor in case the terminal is readonly
71-
terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000'} : {});
71+
terminal.options.theme = getTerminalTheme(readonly ? { cursor: '#00000000' } : {});
7272
terminal.options.disableStdin = readonly;
7373
}, [theme, readonly]);
7474

‎packages/components/react/src/Terminal/theme.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@ export function getTerminalTheme(overrides?: ITheme): ITheme {
3131
brightCyan: cssVar('--tk-elements-terminal-color-brightCyan'),
3232
brightWhite: cssVar('--tk-elements-terminal-color-brightWhite'),
3333

34-
...overrides
34+
...overrides,
3535
};
3636
}

‎packages/create-tutorial/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"homepage": "https://github.com/stackblitz/tutorialkit",
88
"license": "MIT",
99
"bin": {
10-
"create-tutorial": "dist/index.js"
10+
"create-tutorial": "./dist/index.js"
1111
},
1212
"scripts": {
1313
"build": "rm -rf dist && tsc -b",

‎packages/runtime/src/tutorial-runner.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export class TutorialRunner {
137137
}
138138

139139
// if the schema is `true`, we just use the default empty array
140-
const previews = config === true ? [] : (config ?? []);
140+
const previews = config === true ? [] : config ?? [];
141141

142142
const previewInfos = previews.map((preview) => {
143143
const info = new PreviewInfo(preview);
@@ -339,7 +339,7 @@ export class TutorialRunner {
339339
* @param terminal The terminal to hook up to the JSH process.
340340
*/
341341
async attachTerminal(id: string, terminal: ITerminal) {
342-
const panel = this.terminalConfig.get().panels.find((panel) => panel.id === id)
342+
const panel = this.terminalConfig.get().panels.find((panel) => panel.id === id);
343343

344344
if (!panel) {
345345
// if we don't have a panel with the provided id, just exit.

‎packages/runtime/src/webcontainer/shell.ts

+15-13
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export async function newJSHProcess(webcontainer: WebContainer, terminal: ITermi
88
terminal: {
99
cols: terminal.cols ?? 80,
1010
rows: terminal.rows ?? 15,
11-
}
11+
},
1212
});
1313

1414
const input = process.input.getWriter();
@@ -17,22 +17,24 @@ export async function newJSHProcess(webcontainer: WebContainer, terminal: ITermi
1717
const jshReady = withResolvers<void>();
1818
let isInteractive = false;
1919

20-
output.pipeTo(new WritableStream({
21-
write(data) {
22-
if (!isInteractive) {
23-
const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
20+
output.pipeTo(
21+
new WritableStream({
22+
write(data) {
23+
if (!isInteractive) {
24+
const [, osc] = data.match(/\x1b\]654;([^\x07]+)\x07/) || [];
2425

25-
if (osc === 'interactive') {
26-
// wait until we see the interactive OSC
27-
isInteractive = true;
26+
if (osc === 'interactive') {
27+
// wait until we see the interactive OSC
28+
isInteractive = true;
2829

29-
jshReady.resolve();
30+
jshReady.resolve();
31+
}
3032
}
31-
}
3233

33-
terminal.write(data);
34-
}
35-
}));
34+
terminal.write(data);
35+
},
36+
}),
37+
);
3638

3739
terminal.onData((data) => {
3840
if (isInteractive) {

0 commit comments

Comments
 (0)