testing

.github/workflows/site-check.yml

@@ -0,0 +1,65 @@
+name: Site Check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linting for JS and CSS
+        run: |
+          npm run lint:js
+          npm run lint:css
+
+      - name: Run tests
+        run: npm test
+
+      - name: Run Storybook tests
+        run: npm run chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Build project
+        run: npm run build
+
+      - name: Validate HTML
+        run: npx html-validator-cli --file dist/**/*.html --format=text
+
+      - name: Validate CSS
+        run: npx stylelint "dist/**/*.css"
+
+      - name: Validate JS
+        run: npx eslint "dist/**/*.js"
+
+      - name: Verify images
+        run: python ./verify_images.py
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build-and-test
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 node_modules
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,20 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;