Merge pull request #1 from Deri-Kurniawan/development

Merge branch 'development'

Author: Deri-Kurniawan

.eslintrc.cjs

@@ -1,11 +1,7 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

.gitignore

@@ -21,4 +21,6 @@ dist-ssr
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?
+*storybook.log
+.vercel

.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+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/react-vite",
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,66 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "light",
+      values: [
+        {
+          name: "light",
+          value: "#ffffff",
+        },
+        {
+          name: "dark",
+          value: "#333333",
+        },
+        {
+          name: "blue",
+          value: "#00aced",
+        },
+      ],
+    },
+    viewport: {
+      viewports: {
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1440px",
+            height: "100%",
+          },
+        },
+        tablet: {
+          name: "Tablet",
+          styles: {
+            width: "768px",
+            height: "1024px",
+          },
+        },
+        mobile: {
+          name: "Mobile",
+          styles: {
+            width: "430px",
+            height: "1024px",
+          },
+        },
+        mobileSmall: {
+          name: "Mobile Small",
+          styles: {
+            width: "320px",
+            height: "1024px",
+          },
+        },
+      },
+      defaultViewport: "responsive",
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export default preview;

README.md

@@ -1,5 +1,41 @@
-# Positivus
+# Positivus Landing Page
 
-Slicing the Positivus Landing Page Design from [@olgaaverchenko](https://www.figma.com/@olgaaverchenko) on figma's [design](https://www.figma.com/community/file/1230604708032389430) community into a web application using React.js.
+![Tech Stack](https://skillicons.dev/icons?i=html,css,react,typescript,vite,jest,storybook)
 
-![Positivus Mockup](https://s3-alpha.figma.com/hub/file/4965779768/a5850287-df02-43a7-89cd-ee68469bb109-cover.png)
+This project involves slicing the Positivus Landing Page design from [@olgaaverchenko](https://www.figma.com/@olgaaverchenko) on Figma's [community design](https://www.figma.com/community/file/1230604708032389430) into a fully functional web application using **React.js** and **CSS3**.
+
+![Positivus Mockup](/public/mockup.webp)
+
+## Tech Stack
+
+- **HTML5**: Structuring the content of the webpage.
+- **CSS3**: Styling and layout, including responsiveness and animations.
+- **React.js**: Building dynamic and reusable UI components.
+- **TypeScript**: Enhancing JavaScript with static typing for improved developer experience.
+- **Vite**: Fast build tool and development server for modern web projects.
+- **Storybook**: Developing and documenting UI components in isolation.
+- **Chromatic**: Automated visual testing to ensure UI consistency across changes.
+- **Jest**: Unit testing framework to ensure component functionality and integrity.
+
+## Features
+
+For developing, documenting, and testing UI components, we utilized:
+
+- **Storybook**: To build and showcase components in isolation.
+- **Chromatic**: For automated visual regression testing to maintain UI consistency.
+- **Jest**: For unit testing to ensure the components work as expected.
+
+## Live Demo
+
+Experience the live version of the Positivus Landing Page here:  
+[https://positivus.deri.my.id](https://positivus.deri.my.id)
+
+## Component Library
+
+Explore the component library developed with Storybook and tested with Chromatic:  
+[https://development--66aea6f354f5805b7d1f6c3f.chromatic.com](https://development--66aea6f354f5805b7d1f6c3f.chromatic.com)
+
+## More Information
+
+For more details about this project and others, visit my portfolio website:  
+[https://www.deri.my.id](https://www.deri.my.id)

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:66aea6f354f5805b7d1f6c3f",
+  "zip": true
+}

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -13,6 +13,24 @@
     />
 
     <title>Positivus</title>
+    <meta
+      name="description"
+      content="Positivus is a landing page designed by Olga on Figma Community and developed by Deri Kurniawan"
+    />
+    <meta
+      name="keywords"
+      content="Positivus, Deri Kurniawan, Olga, Figma Community, Landing Page, React, TypeScript, CSS Modules"
+    />
+    <meta name="author" content="Deri Kurniawan" />
+    <meta name="robots" content="index, follow" />
+    <meta property="og:image" content="/mockup.webp" />
+    <meta property="og:title" content="Positivus" />
+    <meta
+      property="og:description"
+      content="Positivus is a landing page designed by Olga on Figma Community and developed by Deri Kurniawan"
+    />
+    <meta property="og:url" content="https://positivus.deri.my.id" />
+    <meta property="og:type" content="website" />
   </head>
   <body>
     <div id="root"></div>