Lower EC2 instance

Author: lukazuljevic

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 .turbo
-.idea
+.idea
+*storybook.log
+storybook-static

.storybook/main.js

@@ -0,0 +1,30 @@
+
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  "stories": [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,20 @@
+/** @type { import('@storybook/react-vite').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

.storybook/vitest.setup.js

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

infrastructure/terraform/live/production/compute/main.tf

@@ -48,7 +48,7 @@ module "web" {
   source = "../../../modules/ec2"
 
   name_prefix               = "internship-app-production"
-  instance_type             = "t3a.small"
+  instance_type             = "t3a.nano"
   instance_count            = 1
   instance_root_device_size = 20
   subnets                   = data.aws_subnets.public_subnets.ids

package.json

@@ -11,9 +11,22 @@
     "build": "turbo run build",
     "lint": "turbo run lint",
     "start": "yarn workspace api run start",
-    "prisma": "yarn workspace api run prisma"
+    "prisma": "yarn workspace api run prisma",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "turbo": "^1.10.13"
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-vitest": "^9.1.15",
+    "@storybook/react-vite": "^9.1.15",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.1.15",
+    "turbo": "^1.10.13",
+    "vitest": "^4.0.3",
+    "playwright": "^1.56.1",
+    "@vitest/browser-playwright": "^4.0.3",
+    "@vitest/coverage-v8": "^4.0.3"
   }
 }

vitest.config.js

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import { playwright } from '@vitest/browser-playwright';
+
+const dirname =
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({ configDir: path.join(dirname, '.storybook') }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: 'chromium' }],
+          },
+          setupFiles: ['.storybook/vitest.setup.js'],
+        },
+      },
+    ],
+  },
+});