-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(astro): override components to support
Dialog
- Loading branch information
1 parent
c8ce182
commit ceb02cf
Showing
20 changed files
with
236 additions
and
63 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,6 +8,7 @@ lerna-debug.log* | |
node_modules | ||
dist | ||
dist-ssr | ||
e2e/dist-* | ||
*.local | ||
!.vscode/extensions.json | ||
.idea | ||
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import tutorialkit from '@tutorialkit/astro'; | ||
import { defineConfig } from 'astro/config'; | ||
|
||
export default defineConfig({ | ||
devToolbar: { enabled: false }, | ||
server: { port: 4330 }, | ||
outDir: './dist-override-components', | ||
integrations: [ | ||
tutorialkit({ | ||
components: { | ||
Dialog: './src/components/Dialog.tsx', | ||
TopBar: './src/components/TopBar.astro', | ||
}, | ||
}), | ||
], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,36 @@ | ||
import { defineConfig } from '@playwright/test'; | ||
|
||
export default defineConfig({ | ||
projects: [ | ||
{ | ||
name: 'Default', | ||
testMatch: 'test/*.test.ts', | ||
testIgnore: 'test/*.override-components.test.ts', | ||
use: { baseURL: 'http://localhost:4329' }, | ||
}, | ||
{ | ||
name: 'Override Components', | ||
testMatch: 'test/*.override-components.test.ts', | ||
use: { baseURL: 'http://localhost:4330' }, | ||
}, | ||
], | ||
webServer: [ | ||
{ | ||
command: 'pnpm preview', | ||
url: 'http://localhost:4329', | ||
reuseExistingServer: !process.env.CI, | ||
stdout: 'ignore', | ||
stderr: 'pipe', | ||
}, | ||
{ | ||
command: 'pnpm preview:override-components', | ||
url: 'http://localhost:4330', | ||
reuseExistingServer: !process.env.CI, | ||
stdout: 'ignore', | ||
stderr: 'pipe', | ||
}, | ||
], | ||
expect: { | ||
timeout: process.env.CI ? 30_000 : 10_000, | ||
}, | ||
use: { | ||
baseURL: 'http://localhost:4329', | ||
}, | ||
webServer: { | ||
command: 'pnpm preview', | ||
url: 'http://localhost:4329', | ||
reuseExistingServer: !process.env.CI, | ||
stdout: 'ignore', | ||
stderr: 'pipe', | ||
}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import type DialogType from '@tutorialkit/react/dialog'; | ||
import type { ComponentProps } from 'react'; | ||
import { createPortal } from 'react-dom'; | ||
|
||
export default function Dialog({ title, confirmText, onClose, children }: ComponentProps<typeof DialogType>) { | ||
return createPortal( | ||
<div role="dialog" className="fixed inset-50 color-tk-text-warning bg-tk-background-accent p-10 z-99"> | ||
<h2>Custom Dialog</h2> | ||
<h3>{title}</h3> | ||
|
||
{children} | ||
|
||
<button className="mt2 p2 border border-tk-border-warning rounded" onClick={onClose}> | ||
{confirmText} | ||
</button> | ||
</div>, | ||
document.body, | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<nav | ||
class="bg-tk-elements-topBar-backgroundColor border-b border-tk-elements-app-borderColor flex gap-1 max-w-full items-center p-3 px-4 min-h-[56px]" | ||
> | ||
<div class="flex flex-1"> | ||
<slot name="logo" /> | ||
</div> | ||
|
||
<div class="mr-2 color-tk-text-primary">Custom Top Bar Mounted</div> | ||
|
||
<div class="mr-2"> | ||
<slot name="open-in-stackblitz-link" /> | ||
</div> | ||
|
||
<div> | ||
<slot name="theme-switch" /> | ||
</div> | ||
|
||
<div> | ||
<slot name="login-button" /> | ||
</div> | ||
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { test, expect } from '@playwright/test'; | ||
|
||
const BASE_URL = '/tests/file-tree'; | ||
|
||
test('developer can override dialog in File Tree', async ({ page }) => { | ||
await page.goto(`${BASE_URL}/allow-edits-glob`); | ||
await expect(page.getByRole('heading', { level: 1, name: 'File Tree test - Allow Edits Glob' })).toBeVisible(); | ||
|
||
await page.getByRole('button', { name: 'first-level' }).click({ button: 'right' }); | ||
await page.getByRole('menuitem', { name: `Create file` }).click(); | ||
|
||
await page.locator('*:focus').fill('new-file.js'); | ||
await page.locator('*:focus').press('Enter'); | ||
|
||
const dialog = page.getByRole('dialog'); | ||
await expect(dialog.getByRole('heading', { level: 2, name: 'Custom Dialog' })).toBeVisible(); | ||
|
||
// default elements should also be visible | ||
await expect(dialog.getByText('Created files and folders must match following patterns:')).toBeVisible(); | ||
await expect(dialog.getByRole('listitem').nth(0)).toHaveText('/*'); | ||
await expect(dialog.getByRole('listitem').nth(1)).toHaveText('/first-level/allowed-filename-only.js'); | ||
await expect(dialog.getByRole('listitem').nth(2)).toHaveText('**/second-level/**'); | ||
|
||
await dialog.getByRole('button', { name: 'OK' }).click(); | ||
await expect(dialog).not.toBeVisible(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { test, expect } from '@playwright/test'; | ||
|
||
test('developer can override TopBar', async ({ page }) => { | ||
await page.goto('/'); | ||
|
||
const nav = page.getByRole('navigation'); | ||
await expect(nav.getByText('Custom Top Bar Mounted')).toBeVisible(); | ||
|
||
// default elements should also be visible | ||
await expect(nav.getByRole('button', { name: 'Open in StackBlitz' })).toBeVisible(); | ||
await expect(nav.getByRole('button', { name: 'Toggle Theme' })).toBeVisible(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.