From af851c9af91793860c355675a8b402922f33cccb Mon Sep 17 00:00:00 2001 From: Javi Aguilar <122741+itsjavi@users.noreply.github.com> Date: Tue, 8 Aug 2023 04:20:00 +0200 Subject: [PATCH] refactor: cleanup project and fix linting issues --- packages/docs/package.json | 5 - packages/e2e/.gitignore | 4 - packages/e2e/package.json | 15 - packages/e2e/playwright.config.ts | 88 ---- packages/e2e/specs/demo-todo-app.spec.ts | 420 ------------------ packages/e2e/specs/example.spec.ts | 18 - packages/e2e/tsconfig.json | 21 - packages/examples/all/package.json | 5 - packages/plugins/package.json | 15 - .../src/components/Sidebar.module.css | 2 + packages/storylite/src/components/Sidebar.tsx | 13 +- .../storylite/src/components/SidebarTitle.tsx | 6 +- packages/storylite/src/components/Story.tsx | 4 +- .../storylite/src/components/StoryFrame.tsx | 6 +- packages/storylite/src/components/Toolbar.tsx | 2 + .../storylite/src/components/ToolbarBtn.tsx | 1 + .../src/components/addons/DarkModeAddon.tsx | 9 +- .../src/components/addons/FullScreenAddon.tsx | 4 +- .../src/components/addons/GridAddon.css | 12 +- .../src/components/addons/GridAddon.tsx | 10 +- .../src/components/addons/MeasureAddon.tsx | 4 +- .../src/components/addons/OpenStoryAddon.tsx | 1 + .../src/components/addons/OutlineAddon.tsx | 10 +- .../src/components/addons/PropsAddon.tsx | 4 +- .../src/components/addons/RefreshAddon.tsx | 4 +- .../src/components/addons/ResponsiveAddon.tsx | 9 +- .../src/components/addons/SidebarAddon.tsx | 4 +- .../src/components/addons/SourceCodeAddon.tsx | 4 +- .../src/components/addons/ZoomAddon.tsx | 4 +- .../react => storylite/src}/hooks/index.ts | 0 .../src}/hooks/useBrowserStorage.test.ts | 1 + .../src}/hooks/useBrowserStorage.ts | 4 +- .../storylite/src/layouts/ErrorLayout.tsx | 1 + .../storylite/src/layouts/MainLayout.test.tsx | 1 + packages/storylite/src/layouts/MainLayout.tsx | 4 +- .../storylite/src/layouts/SandboxLayout.tsx | 4 +- packages/storylite/src/lib/createStoryMap.ts | 2 +- .../src/lib/vite-plugins/storylitePlugin.ts | 2 + packages/storylite/src/main.tsx | 4 +- packages/storylite/src/pages/404.tsx | 1 + packages/storylite/src/pages/index.tsx | 1 + .../storylite/src/pages/sandbox/dashboard.tsx | 2 + .../sandbox/stories/$story/$export_name.tsx | 2 + .../src/pages/stories/$story/$export_name.tsx | 1 + packages/storylite/src/router.tsx | 3 +- packages/storylite/src/styles/reset-main.css | 18 +- packages/storylite/src/testing/index.tsx | 5 +- packages/storylite/src/types/index.ts | 3 +- packages/support/.eslintrc.json | 14 - packages/support/.gitignore | 28 -- packages/support/package.json | 47 -- .../support/src/arrays/arrayShuffle.test.ts | 24 - packages/support/src/arrays/arrayShuffle.ts | 10 - packages/support/src/arrays/index.ts | 1 - packages/support/src/colors/color.test.ts | 91 ---- packages/support/src/colors/color.ts | 139 ------ packages/support/src/colors/index.ts | 1 - packages/support/src/index.ts | 6 - .../support/src/react/components/index.ts | 1 - .../src/react/components/primitives/Btn.tsx | 22 - .../src/react/components/primitives/Img.tsx | 28 -- .../src/react/components/primitives/index.ts | 2 - packages/support/src/react/index.ts | 3 - packages/support/src/react/types.ts | 27 -- packages/support/src/search/index.ts | 2 - .../support/src/search/simpleSearch.test.ts | 137 ------ packages/support/src/search/simpleSearch.ts | 85 ---- packages/support/src/search/types.ts | 10 - packages/support/src/strings/index.ts | 1 - .../src/strings/upperCaseFirst.test.ts | 19 - .../support/src/strings/upperCaseFirst.ts | 12 - .../support/src/styling/classNames.test.ts | 27 -- packages/support/src/styling/classNames.ts | 20 - .../support/src/styling/classVariants.test.ts | 126 ------ packages/support/src/styling/classVariants.ts | 132 ------ packages/support/src/styling/css/reset.css | 168 ------- packages/support/src/styling/index.ts | 2 - packages/support/src/types.ts | 20 - packages/support/tsconfig.json | 28 -- packages/support/tsconfig.root.json | 10 - packages/support/vite.config.ts | 68 --- packages/support/vitest-setup.ts | 1 - 82 files changed, 130 insertions(+), 1945 deletions(-) delete mode 100644 packages/docs/package.json delete mode 100644 packages/e2e/.gitignore delete mode 100644 packages/e2e/package.json delete mode 100644 packages/e2e/playwright.config.ts delete mode 100644 packages/e2e/specs/demo-todo-app.spec.ts delete mode 100644 packages/e2e/specs/example.spec.ts delete mode 100644 packages/e2e/tsconfig.json delete mode 100644 packages/examples/all/package.json delete mode 100644 packages/plugins/package.json rename packages/{support/src/react => storylite/src}/hooks/index.ts (100%) rename packages/{support/src/react => storylite/src}/hooks/useBrowserStorage.test.ts (99%) rename packages/{support/src/react => storylite/src}/hooks/useBrowserStorage.ts (95%) delete mode 100644 packages/support/.eslintrc.json delete mode 100644 packages/support/.gitignore delete mode 100644 packages/support/package.json delete mode 100644 packages/support/src/arrays/arrayShuffle.test.ts delete mode 100644 packages/support/src/arrays/arrayShuffle.ts delete mode 100644 packages/support/src/arrays/index.ts delete mode 100644 packages/support/src/colors/color.test.ts delete mode 100644 packages/support/src/colors/color.ts delete mode 100644 packages/support/src/colors/index.ts delete mode 100644 packages/support/src/index.ts delete mode 100644 packages/support/src/react/components/index.ts delete mode 100644 packages/support/src/react/components/primitives/Btn.tsx delete mode 100644 packages/support/src/react/components/primitives/Img.tsx delete mode 100644 packages/support/src/react/components/primitives/index.ts delete mode 100644 packages/support/src/react/index.ts delete mode 100644 packages/support/src/react/types.ts delete mode 100644 packages/support/src/search/index.ts delete mode 100644 packages/support/src/search/simpleSearch.test.ts delete mode 100644 packages/support/src/search/simpleSearch.ts delete mode 100644 packages/support/src/search/types.ts delete mode 100644 packages/support/src/strings/index.ts delete mode 100644 packages/support/src/strings/upperCaseFirst.test.ts delete mode 100644 packages/support/src/strings/upperCaseFirst.ts delete mode 100644 packages/support/src/styling/classNames.test.ts delete mode 100644 packages/support/src/styling/classNames.ts delete mode 100644 packages/support/src/styling/classVariants.test.ts delete mode 100644 packages/support/src/styling/classVariants.ts delete mode 100644 packages/support/src/styling/css/reset.css delete mode 100644 packages/support/src/styling/index.ts delete mode 100644 packages/support/src/types.ts delete mode 100644 packages/support/tsconfig.json delete mode 100644 packages/support/tsconfig.root.json delete mode 100644 packages/support/vite.config.ts delete mode 100644 packages/support/vitest-setup.ts diff --git a/packages/docs/package.json b/packages/docs/package.json deleted file mode 100644 index 9e72d44..0000000 --- a/packages/docs/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@storylite/docs", - "version": "0.0.0", - "private": true -} diff --git a/packages/e2e/.gitignore b/packages/e2e/.gitignore deleted file mode 100644 index 75e854d..0000000 --- a/packages/e2e/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules/ -/test-results/ -/playwright-report/ -/playwright/.cache/ diff --git a/packages/e2e/package.json b/packages/e2e/package.json deleted file mode 100644 index 9e9bc94..0000000 --- a/packages/e2e/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@storylite/e2e", - "version": "0.0.0", - "private": true, - "type": "module", - "scripts": { - "playwright:start-server": "cd ../storylite && pnpm preview", - "playwright:ui": "playwright test && playwright show-report", - "test:e2e": "playwright test" - }, - "devDependencies": { - "@playwright/test": "^1.36.2", - "@types/node": "^20.4.8" - } -} diff --git a/packages/e2e/playwright.config.ts b/packages/e2e/playwright.config.ts deleted file mode 100644 index caf521a..0000000 --- a/packages/e2e/playwright.config.ts +++ /dev/null @@ -1,88 +0,0 @@ -import { defineConfig } from '@playwright/test' - -/** - * Read environment variables from file. - * https://github.com/motdotla/dotenv - */ -// require('dotenv').config(); - -/** - * See https://playwright.dev/docs/test-configuration. - */ -export default defineConfig({ - testDir: './specs', - /* Run tests in files in parallel */ - fullyParallel: true, - /* Fail the build on CI if you accidentally left test.only in the source code. */ - forbidOnly: !!process.env.CI, - /* Retry on CI only */ - retries: process.env.CI ? 2 : 0, - /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, - maxFailures: process.env.CI ? 5 : 25, - reportSlowTests: { - max: 5, - threshold: 6000, - }, - /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', - /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ - use: { - /* Base URL to use in actions like `await page.goto('/')`. */ - // baseURL: 'http://127.0.0.1:13030', - - /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ - trace: 'on-first-retry', - }, - - /* Configure projects for major browsers */ - projects: [ - { - name: 'chromium', - use: { - browserName: 'chromium', - }, - }, - - { - name: 'firefox', - use: { - browserName: 'firefox', - }, - }, - - { - name: 'webkit', - use: { - browserName: 'webkit', - }, - }, - - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { ...devices['Pixel 5'] }, - // }, - // { - // name: 'Mobile Safari', - // use: { ...devices['iPhone 12'] }, - // }, - - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { ...devices['Desktop Edge'], channel: 'msedge' }, - // }, - // { - // name: 'Google Chrome', - // use: { ..devices['Desktop Chrome'], channel: 'chrome' }, - // }, - ], - - /* Run your local dev server before starting the tests */ - webServer: { - command: 'pnpm playwright:start-server', - url: 'http://127.0.0.1:13030', - reuseExistingServer: !process.env.CI, - }, -}) diff --git a/packages/e2e/specs/demo-todo-app.spec.ts b/packages/e2e/specs/demo-todo-app.spec.ts deleted file mode 100644 index 8c75f27..0000000 --- a/packages/e2e/specs/demo-todo-app.spec.ts +++ /dev/null @@ -1,420 +0,0 @@ -import { expect, test, type Page } from '@playwright/test' - -test.beforeEach(async ({ page }) => { - await page.goto('https://demo.playwright.dev/todomvc') -}) - -const TODO_ITEMS = ['buy some cheese', 'feed the cat', 'book a doctors appointment'] - -test.describe('New Todo', () => { - test('should allow me to add todo items', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - // Create 1st todo. - await newTodo.fill(TODO_ITEMS[0]) - await newTodo.press('Enter') - - // Make sure the list only has one todo item. - await expect(page.getByTestId('todo-title')).toHaveText([TODO_ITEMS[0]]) - - // Create 2nd todo. - await newTodo.fill(TODO_ITEMS[1]) - await newTodo.press('Enter') - - // Make sure the list now has two todo items. - await expect(page.getByTestId('todo-title')).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]) - - await checkNumberOfTodosInLocalStorage(page, 2) - }) - - test('should clear text input field when an item is added', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - // Create one todo item. - await newTodo.fill(TODO_ITEMS[0]) - await newTodo.press('Enter') - - // Check that input is empty. - await expect(newTodo).toBeEmpty() - await checkNumberOfTodosInLocalStorage(page, 1) - }) - - test('should append new items to the bottom of the list', async ({ page }) => { - // Create 3 items. - await createDefaultTodos(page) - - // create a todo count locator - const todoCount = page.getByTestId('todo-count') - - // Check test using different methods. - await expect(page.getByText('3 items left')).toBeVisible() - await expect(todoCount).toHaveText('3 items left') - await expect(todoCount).toContainText('3') - await expect(todoCount).toHaveText(/3/) - - // Check all items in one call. - await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS) - await checkNumberOfTodosInLocalStorage(page, 3) - }) -}) - -test.describe('Mark all as completed', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page) - await checkNumberOfTodosInLocalStorage(page, 3) - }) - - test.afterEach(async ({ page }) => { - await checkNumberOfTodosInLocalStorage(page, 3) - }) - - test('should allow me to mark all items as completed', async ({ page }) => { - // Complete all todos. - await page.getByLabel('Mark all as complete').check() - - // Ensure all todos have 'completed' class. - await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']) - await checkNumberOfCompletedTodosInLocalStorage(page, 3) - }) - - test('should allow me to clear the complete state of all items', async ({ page }) => { - const toggleAll = page.getByLabel('Mark all as complete') - // Check and then immediately uncheck. - await toggleAll.check() - await toggleAll.uncheck() - - // Should be no completed classes. - await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']) - }) - - test('complete all checkbox should update state when items are completed / cleared', async ({ - page, - }) => { - const toggleAll = page.getByLabel('Mark all as complete') - await toggleAll.check() - await expect(toggleAll).toBeChecked() - await checkNumberOfCompletedTodosInLocalStorage(page, 3) - - // Uncheck first todo. - const firstTodo = page.getByTestId('todo-item').nth(0) - await firstTodo.getByRole('checkbox').uncheck() - - // Reuse toggleAll locator and make sure its not checked. - await expect(toggleAll).not.toBeChecked() - - await firstTodo.getByRole('checkbox').check() - await checkNumberOfCompletedTodosInLocalStorage(page, 3) - - // Assert the toggle all is checked again. - await expect(toggleAll).toBeChecked() - }) -}) - -test.describe('Item', () => { - test('should allow me to mark items as complete', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item) - await newTodo.press('Enter') - } - - // Check first item. - const firstTodo = page.getByTestId('todo-item').nth(0) - await firstTodo.getByRole('checkbox').check() - await expect(firstTodo).toHaveClass('completed') - - // Check second item. - const secondTodo = page.getByTestId('todo-item').nth(1) - await expect(secondTodo).not.toHaveClass('completed') - await secondTodo.getByRole('checkbox').check() - - // Assert completed class. - await expect(firstTodo).toHaveClass('completed') - await expect(secondTodo).toHaveClass('completed') - }) - - test('should allow me to un-mark items as complete', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - // Create two items. - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item) - await newTodo.press('Enter') - } - - const firstTodo = page.getByTestId('todo-item').nth(0) - const secondTodo = page.getByTestId('todo-item').nth(1) - const firstTodoCheckbox = firstTodo.getByRole('checkbox') - - await firstTodoCheckbox.check() - await expect(firstTodo).toHaveClass('completed') - await expect(secondTodo).not.toHaveClass('completed') - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - - await firstTodoCheckbox.uncheck() - await expect(firstTodo).not.toHaveClass('completed') - await expect(secondTodo).not.toHaveClass('completed') - await checkNumberOfCompletedTodosInLocalStorage(page, 0) - }) - - test('should allow me to edit an item', async ({ page }) => { - await createDefaultTodos(page) - - const todoItems = page.getByTestId('todo-item') - const secondTodo = todoItems.nth(1) - await secondTodo.dblclick() - await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]) - await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages') - await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter') - - // Explicitly assert the new text value. - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]) - await checkTodosInLocalStorage(page, 'buy some sausages') - }) -}) - -test.describe('Editing', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page) - await checkNumberOfTodosInLocalStorage(page, 3) - }) - - test('should hide other controls when editing', async ({ page }) => { - const todoItem = page.getByTestId('todo-item').nth(1) - await todoItem.dblclick() - await expect(todoItem.getByRole('checkbox')).not.toBeVisible() - await expect( - todoItem.locator('label', { - hasText: TODO_ITEMS[1], - }) - ).not.toBeVisible() - await checkNumberOfTodosInLocalStorage(page, 3) - }) - - test('should save edits on blur', async ({ page }) => { - const todoItems = page.getByTestId('todo-item') - await todoItems.nth(1).dblclick() - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages') - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur') - - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]) - await checkTodosInLocalStorage(page, 'buy some sausages') - }) - - test('should trim entered text', async ({ page }) => { - const todoItems = page.getByTestId('todo-item') - await todoItems.nth(1).dblclick() - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages ') - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter') - - await expect(todoItems).toHaveText([TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2]]) - await checkTodosInLocalStorage(page, 'buy some sausages') - }) - - test('should remove the item if an empty text string was entered', async ({ page }) => { - const todoItems = page.getByTestId('todo-item') - await todoItems.nth(1).dblclick() - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('') - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter') - - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]) - }) - - test('should cancel edits on escape', async ({ page }) => { - const todoItems = page.getByTestId('todo-item') - await todoItems.nth(1).dblclick() - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages') - await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape') - await expect(todoItems).toHaveText(TODO_ITEMS) - }) -}) - -test.describe('Counter', () => { - test('should display the current number of todo items', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - // create a todo count locator - const todoCount = page.getByTestId('todo-count') - - await newTodo.fill(TODO_ITEMS[0]) - await newTodo.press('Enter') - - await expect(todoCount).toContainText('1') - - await newTodo.fill(TODO_ITEMS[1]) - await newTodo.press('Enter') - await expect(todoCount).toContainText('2') - - await checkNumberOfTodosInLocalStorage(page, 2) - }) -}) - -test.describe('Clear completed button', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page) - }) - - test('should display the correct text', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check() - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible() - }) - - test('should remove completed items when clicked', async ({ page }) => { - const todoItems = page.getByTestId('todo-item') - await todoItems.nth(1).getByRole('checkbox').check() - await page.getByRole('button', { name: 'Clear completed' }).click() - await expect(todoItems).toHaveCount(2) - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]) - }) - - test('should be hidden when there are no items that are completed', async ({ page }) => { - await page.locator('.todo-list li .toggle').first().check() - await page.getByRole('button', { name: 'Clear completed' }).click() - await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden() - }) -}) - -test.describe('Persistence', () => { - test('should persist its data', async ({ page }) => { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - for (const item of TODO_ITEMS.slice(0, 2)) { - await newTodo.fill(item) - await newTodo.press('Enter') - } - - const todoItems = page.getByTestId('todo-item') - const firstTodoCheck = todoItems.nth(0).getByRole('checkbox') - await firstTodoCheck.check() - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]) - await expect(firstTodoCheck).toBeChecked() - await expect(todoItems).toHaveClass(['completed', '']) - - // Ensure there is 1 completed item. - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - - // Now reload. - await page.reload() - await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]) - await expect(firstTodoCheck).toBeChecked() - await expect(todoItems).toHaveClass(['completed', '']) - }) -}) - -test.describe('Routing', () => { - test.beforeEach(async ({ page }) => { - await createDefaultTodos(page) - // make sure the app had a chance to save updated todos in storage - // before navigating to a new view, otherwise the items can get lost :( - // in some frameworks like Durandal - await checkTodosInLocalStorage(page, TODO_ITEMS[0]) - }) - - test('should allow me to display active items', async ({ page }) => { - const todoItem = page.getByTestId('todo-item') - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check() - - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - await page.getByRole('link', { name: 'Active' }).click() - await expect(todoItem).toHaveCount(2) - await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]) - }) - - test('should respect the back button', async ({ page }) => { - const todoItem = page.getByTestId('todo-item') - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check() - - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - - await test.step('Showing all items', async () => { - await page.getByRole('link', { name: 'All' }).click() - await expect(todoItem).toHaveCount(3) - }) - - await test.step('Showing active items', async () => { - await page.getByRole('link', { name: 'Active' }).click() - }) - - await test.step('Showing completed items', async () => { - await page.getByRole('link', { name: 'Completed' }).click() - }) - - await expect(todoItem).toHaveCount(1) - await page.goBack() - await expect(todoItem).toHaveCount(2) - await page.goBack() - await expect(todoItem).toHaveCount(3) - }) - - test('should allow me to display completed items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check() - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - await page.getByRole('link', { name: 'Completed' }).click() - await expect(page.getByTestId('todo-item')).toHaveCount(1) - }) - - test('should allow me to display all items', async ({ page }) => { - await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check() - await checkNumberOfCompletedTodosInLocalStorage(page, 1) - await page.getByRole('link', { name: 'Active' }).click() - await page.getByRole('link', { name: 'Completed' }).click() - await page.getByRole('link', { name: 'All' }).click() - await expect(page.getByTestId('todo-item')).toHaveCount(3) - }) - - test('should highlight the currently applied filter', async ({ page }) => { - await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected') - - //create locators for active and completed links - const activeLink = page.getByRole('link', { name: 'Active' }) - const completedLink = page.getByRole('link', { name: 'Completed' }) - await activeLink.click() - - // Page change - active items. - await expect(activeLink).toHaveClass('selected') - await completedLink.click() - - // Page change - completed items. - await expect(completedLink).toHaveClass('selected') - }) -}) - -async function createDefaultTodos(page: Page) { - // create a new todo locator - const newTodo = page.getByPlaceholder('What needs to be done?') - - for (const item of TODO_ITEMS) { - await newTodo.fill(item) - await newTodo.press('Enter') - } -} - -async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { - return await page.waitForFunction(e => { - return JSON.parse(localStorage['react-todos']).length === e - }, expected) -} - -async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) { - return await page.waitForFunction(e => { - return ( - JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e - ) - }, expected) -} - -async function checkTodosInLocalStorage(page: Page, title: string) { - return await page.waitForFunction(t => { - return JSON.parse(localStorage['react-todos']) - .map((todo: any) => todo.title) - .includes(t) - }, title) -} diff --git a/packages/e2e/specs/example.spec.ts b/packages/e2e/specs/example.spec.ts deleted file mode 100644 index 78ac4d8..0000000 --- a/packages/e2e/specs/example.spec.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { expect, test } from '@playwright/test' - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/') - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/) -}) - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/') - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click() - - // Expects the URL to contain intro. - await expect(page).toHaveURL(/.*intro/) -}) diff --git a/packages/e2e/tsconfig.json b/packages/e2e/tsconfig.json deleted file mode 100644 index f47d97a..0000000 --- a/packages/e2e/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/tsconfig", - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "module": "ESNext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "types": ["node"] - }, - "include": ["specs", "playwright.config.ts"] -} diff --git a/packages/examples/all/package.json b/packages/examples/all/package.json deleted file mode 100644 index efe1083..0000000 --- a/packages/examples/all/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "@storylite/examples-all", - "version": "0.0.0", - "private": true -} diff --git a/packages/plugins/package.json b/packages/plugins/package.json deleted file mode 100644 index 73c585b..0000000 --- a/packages/plugins/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@storylite/plugins", - "version": "0.0.0", - "type": "module", - "scripts": {}, - "devDependencies": { - "@types/node": "^20.4.8", - "@vitest/coverage-c8": "^0.33.0", - "glob": "^10.3.3", - "typescript": "^5.1.6", - "vite": "^4.4.9", - "vite-tsconfig-paths": "^4.2.0", - "vitest": "^0.34.1" - } -} diff --git a/packages/storylite/src/components/Sidebar.module.css b/packages/storylite/src/components/Sidebar.module.css index 6b200bc..17105cf 100644 --- a/packages/storylite/src/components/Sidebar.module.css +++ b/packages/storylite/src/components/Sidebar.module.css @@ -55,6 +55,8 @@ html[data-color-scheme='dark'] .Sidebar { } .ListBtn { + all: unset; + appearance: none; padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1rem; diff --git a/packages/storylite/src/components/Sidebar.tsx b/packages/storylite/src/components/Sidebar.tsx index e6ae2c4..606b2b1 100644 --- a/packages/storylite/src/components/Sidebar.tsx +++ b/packages/storylite/src/components/Sidebar.tsx @@ -1,7 +1,10 @@ -import { Bookmark, MinusSquare, PlusSquare } from 'lucide-react' import React, { useState } from 'react' import { Link, useParams } from 'react-router-dom' + +import { Bookmark, MinusSquare, PlusSquare } from 'lucide-react' + import { ElementIds, StoryMeta, StoryModule, StoryModulesMapValue } from '@/types' + import storyMap from '../lib/storyMap' import styles from './Sidebar.module.css' @@ -101,10 +104,14 @@ function SidebarListItem(props: SidebarItemBaseProps): JSX.Element { return (
  • - setShowMenu(!shouldShowSubmenu)}> + {shouldShowSubmenu && nestedList}
    • ) diff --git a/packages/storylite/src/components/SidebarTitle.tsx b/packages/storylite/src/components/SidebarTitle.tsx index 6ab288b..4e017ec 100644 --- a/packages/storylite/src/components/SidebarTitle.tsx +++ b/packages/storylite/src/components/SidebarTitle.tsx @@ -1,7 +1,9 @@ -import { Library } from 'lucide-react' -import storiesConfig from 'storylite-user-config' import React from 'react' import { Link } from 'react-router-dom' + +import { Library } from 'lucide-react' +import storiesConfig from 'storylite-user-config' + import styles from './SidebarTitle.module.css' export default function SidebarTitle() { diff --git a/packages/storylite/src/components/Story.tsx b/packages/storylite/src/components/Story.tsx index e3c36d3..ed23faa 100644 --- a/packages/storylite/src/components/Story.tsx +++ b/packages/storylite/src/components/Story.tsx @@ -1,6 +1,8 @@ import React from 'react' import { useSearchParams } from 'react-router-dom' + import { ElementIds, StoryComponent, StoryMeta, StoryModule } from '@/types' + import storyMap from '../lib/storyMap' import styles from './Story.module.css' import Toolbar from './Toolbar' @@ -29,7 +31,7 @@ export function Story({ story, exportName }: { story: string; exportName: string function createStorySandboxWrapper( story: string, exportName: string, - storyExport: StoryModule + storyExport: StoryModule, ): React.FC { if (!storyExport) { return function NullStory() { diff --git a/packages/storylite/src/components/StoryFrame.tsx b/packages/storylite/src/components/StoryFrame.tsx index ba22b65..e76117a 100644 --- a/packages/storylite/src/components/StoryFrame.tsx +++ b/packages/storylite/src/components/StoryFrame.tsx @@ -1,5 +1,5 @@ -import React from 'react' import { ElementIds } from '@/types' + import styles from './StoryFrame.module.css' type StoryFrameProps = { @@ -11,5 +11,7 @@ export default function StoryFrame({ story, exportName }: StoryFrameProps) { const iframeSrc = story === undefined ? '/sandbox/dashboard' : `/sandbox/stories/${story}/${exportName || ''}` - return