Merge pull request #908 from Sitecore/feature/add-testing

Feature/add testing

.gitignore

@@ -14,7 +14,10 @@ node_modules
 
 # Testing
 coverage
-
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
 # Turbo
 .turbo
 
@@ -43,4 +46,6 @@ yarn-error.log*
 # generated postbuild
 robots.txt
 sitemap*.xml
-node_modules
+node_modules
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@chromatic-com/storybook', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  staticDirs: ['..\\public'],
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './storybook-theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.tsx

@@ -0,0 +1,44 @@
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import sitecoreTheme from '@sitecore/blok-theme';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview, ReactRenderer } from '@storybook/react';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import React from 'react';
+import { PreviewProvider } from '../src/context/PreviewContext';
+import { scdpTheme } from '../src/theme/theme';
+
+initialize();
+
+const preview: Preview = {
+  parameters: {
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  loaders: [mswLoader],
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      defaultTheme: 'light',
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+    }),
+    (Story) => (
+      <ChakraProvider theme={extendTheme(sitecoreTheme, scdpTheme)}>
+        <PreviewProvider hostname={''}>
+          <Story />
+        </PreviewProvider>
+      </ChakraProvider>
+    ),
+  ],
+};
+export default preview;

.storybook/storybook-theme.ts

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Sitecore Developer Portal',
+  brandUrl: 'https://developers.sitecore.com',
+  brandImage: 'https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/logo-sc_developers',
+});

README.md

@@ -4,36 +4,20 @@ Welcome to the Sitecore Developer Portal repository. This app was created to hel
 
 ## Technology used
 
-The Sitecore developer portal is built with Next.js, Typescript, Chakra UI and [Sitecore Blok](https://blok.sitecore.com), managed using Turborepo and is hosted on Vercel. The app uses static site generation to create all the pages at build time. It also utilizes Incremental Static Regeneration (ISR) to automatically update the app when changes to page content are made. Much of the page content is written in Markdown and is converted to HTML at build time. Images that are used are managed in Sitecore DAM and are published to a CDN.
-
-### Apps and Packages
-
-- apps
-  - `devportal`: Developer Portal public site ([Next.js](https://nextjs.org/) based)
-- packages
-  - `@scdp/ui`: a React component library based on [Sitecore Blok](https://blok.sitecore.com) used by `devportal` application
-  - `@lib/changelog`: Custom library to retrieve and parse changelog data
-  - `@scdp/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-  - `@scdp/jest-presets`: `jest` configuration used throughout the monorepo
-  - `@scdp/typescript-config`: `tsconfig.json`s used throughout the monorepo
-
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+The Sitecore developer portal is built with Next.js, Typescript, Chakra UI and [Sitecore Blok](https://blok.sitecore.com) and is hosted on Vercel. The app uses static site generation to create all the pages at build time. It also utilizes Incremental Static Regeneration (ISR) to automatically update the app when changes to page content are made. Much of the page content is written in Markdown and is converted to HTML at build time. Images that are used are managed in Sitecore DAM and are published to a CDN.
 
 ### Utilities
 
-This turborepo has some additional tools already setup:
+This repository has some additional tools already setup:
 
 - [TypeScript](https://www.typescriptlang.org/) for static type checking
 - [ESLint](https://eslint.org/) for code linting
-- [Jest](https://jestjs.io/) for testing
+- [Vitest](https://vitest.dev/) for Unit testing
+- [Playwright](https://playwright.dev/) for E2E testing
 - [Prettier](https://prettier.io) for code formatting
 
 ### Prerequisites
 
-#### Monorepo
-
-This repository is utilizing Turborepo to manage our monorepo setup. More information about Monorepos can be found in the [Monorepo Handbook](https://turbo.build/repo/docs/handbook).
-
 #### Node.js
 
 The developer portal is built with Next.js, so you'll need to have Node.js installed to build the project. You can find the latest version of Node.js [here](https://nodejs.org/en/). We recommend using the LTS version of Node.js.