diff --git a/visual-js/visual-storybook/.eslintrc.cjs b/visual-js/visual-storybook/.eslintrc.cjs index 11bcbed2..29cf8c58 100644 --- a/visual-js/visual-storybook/.eslintrc.cjs +++ b/visual-js/visual-storybook/.eslintrc.cjs @@ -2,7 +2,7 @@ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', parserOptions: { - project: './tsconfig.json', + project: './tsconfig.lint.json', tsconfigRootDir: __dirname, sourceType: 'module', }, diff --git a/visual-js/visual-storybook/integration-tests/src/index.tsx b/visual-js/visual-storybook/integration-tests/src/index.tsx index 032464fb..07924fc8 100644 --- a/visual-js/visual-storybook/integration-tests/src/index.tsx +++ b/visual-js/visual-storybook/integration-tests/src/index.tsx @@ -5,12 +5,12 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById('root') as HTMLElement, ); root.render( - + , ); // If you want to start measuring performance in your app, pass a function diff --git a/visual-js/visual-storybook/integration-tests/src/stories/Page.tsx b/visual-js/visual-storybook/integration-tests/src/stories/Page.tsx index beccfcd5..9a9467ba 100644 --- a/visual-js/visual-storybook/integration-tests/src/stories/Page.tsx +++ b/visual-js/visual-storybook/integration-tests/src/stories/Page.tsx @@ -3,48 +3,64 @@ import React from 'react'; import './page.css'; export const Page: React.FC = () => { - return (
-

Pages in Storybook

We recommend building UIs with a{' '} - + component-driven {' '} process starting with atomic components and ending with pages.

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: + Render pages with mock data. This makes it easy to build and review + page states without needing to navigate to them in your app. Here are + some handy patterns for managing page data in Storybook:

Get a guided tutorial on component-driven development at{' '} - + Storybook tutorials . Read more in the{' '} - + docs .

- Tip Adjust the width of the canvas with the{' '} - + Tip Adjust the width of the canvas with + the{' '} +