Feat/contacts page

.eslintignore

@@ -0,0 +1 @@
+!.storybook

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/nextjs',

package.json

@@ -30,6 +30,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "focus-trap-react": "^10.1.4",
+    "formik": "^2.4.4",
     "framer-motion": "^10.16.1",
     "graphql": "^16.8.0",
     "i18next": "^23.4.5",
@@ -51,18 +52,20 @@
     "strapi-flatten-graphql": "^0.1.0",
     "styled-components": "^6.0.7",
     "tailwind-merge": "^1.12.0",
-    "typed.js": "^2.0.16"
+    "typed.js": "^2.0.16",
+    "yup": "^1.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-interactions": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/blocks": "^7.3.2",
-    "@storybook/nextjs": "^7.3.2",
-    "@storybook/react": "^7.3.2",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-essentials": "^7.4.2",
+    "@storybook/addon-interactions": "^7.4.2",
+    "@storybook/addon-links": "^7.4.2",
+    "@storybook/addon-mdx-gfm": "^7.4.2",
+    "@storybook/blocks": "^7.4.2",
+    "@storybook/nextjs": "^7.4.2",
+    "@storybook/react": "^7.4.2",
+    "@storybook/testing-library": "^0.2.1",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.3",
     "@testing-library/jest-dom": "^5.16.5",
@@ -89,7 +92,7 @@
     "postcss": "^8.4.23",
     "prettier": "^3.0.2",
     "prettier-plugin-tailwindcss": "^0.5.3",
-    "storybook": "^7.3.2",
+    "storybook": "^7.4.2",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2"
   },

src/app/(public)/about/page.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { shuffleArray } from '@/lib/helper';
 
+import Heading from '@/components/atoms/headings/Heading';
 import { QuizData, QuizOption } from '@/components/molecules/RandomFacts/Quiz';
 import Books from '@/components/organisms/about-free-time/Books';
 import Music from '@/components/organisms/about-free-time/Music';
@@ -109,7 +110,7 @@ const AboutFreeTimePage = async () => {
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>About me</h1>
+          <Heading title='about.title' />
 
           <div className='mb-5'>
             <p>

src/app/(public)/contacts/page.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+import Heading from '@/components/atoms/headings/Heading';
+import ContactForm from '@/components/molecules/ContactForm/ContactForm';
+
 export const metadata = {
   title: 'Contacts | MartaCodes.it',
   description: 'Contacts page',
@@ -10,7 +13,11 @@ const ContactsPage = async () => {
     <main className='min-h-main'>
       <section>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>Contacts</h1>
+          <Heading title='contacts.title' />
+
+          <div className='bg-slate-200 dark:bg-slate-800 rounded-md p-4 md:px-8 lg:px-10 w-full lg:w-4/5'>
+            <ContactForm />
+          </div>
         </div>
       </section>
     </main>

src/app/(public)/cv/page.tsx

@@ -54,7 +54,7 @@ const AboutPage = async () => {
     <main className='min-h-main'>
       <section className='dark:bg-dark bg-white'>
         <div className='layout relative flex flex-col py-12'>
-          <Heading title='aboutWork.title' />
+          <Heading title='cv.title' />
 
           <Intro intro={intro} />
 

src/app/(public)/projects/page.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import Heading from '@/components/atoms/headings/Heading';
 import ProjectCard from '@/components/organisms/projects/ProjectCard';
 
 import { queryProjects } from '@/queries/projects';
@@ -24,7 +25,7 @@ const ProjectsPage = async () => {
     <main className='min-h-main'>
       <section>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>Projects</h1>
+          <Heading title='projects.title' />
 
           <div className='grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
             {projects.map((project) => (

src/app/(public)/uses/page.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import Heading from '@/components/atoms/headings/Heading';
+
 export const metadata = {
   title: 'Uses | MartaCodes.it',
   description: 'Uses page',
@@ -10,7 +12,7 @@ const UsesPage = async () => {
     <main className='min-h-main'>
       <section>
         <div className='layout relative flex flex-col py-12'>
-          <h1 className='mb-5'>Uses</h1>
+          <Heading title='uses.title' />
         </div>
       </section>
     </main>

src/components/atoms/Input/Input.tsx

@@ -0,0 +1,43 @@
+import { Field, useField } from 'formik';
+
+import clsxm from '@/lib/clsxm';
+
+export interface InputProps {
+  id: string;
+  type?: 'text' | 'number' | 'email';
+  label: string;
+  placeholder?: string;
+}
+
+export const Input = ({
+  id,
+  type = 'text',
+  label,
+  placeholder,
+}: InputProps) => {
+  const fieldProps = { id, name: id, type, label, placeholder };
+  const [_, meta] = useField(fieldProps);
+
+  return (
+    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+      {label}
+      <Field
+        placeholder={placeholder}
+        name={id}
+        id={id}
+        type={type}
+        className={clsxm(
+          'my-2 rounded-md px-4 py-2 ring-1 dark:bg-transparent font-normal',
+          {
+            'ring-red-600': meta.touched && meta.error,
+            'ring-grey-400 dark:ring-slate-500': !meta.touched || !meta.error,
+          },
+        )}
+      />
+
+      <div className='font-sm font-normal text-red-600'>
+        {meta.touched && meta.error}
+      </div>
+    </label>
+  );
+};

src/components/atoms/TextArea/TextArea.tsx

@@ -0,0 +1,37 @@
+import { Field, useField } from 'formik';
+
+import clsxm from '@/lib/clsxm';
+
+export interface TextAreaProps {
+  id: string;
+  label: string;
+  placeholder?: string;
+}
+
+export const TextArea = ({ id, label, placeholder }: TextAreaProps) => {
+  const fieldProps = { id, name: id, label, placeholder };
+  const [_, meta] = useField(fieldProps);
+
+  return (
+    <label htmlFor='firstName' className='mb-2 mt-6 flex flex-col font-bold'>
+      {label}
+      <Field
+        as='textarea'
+        placeholder={placeholder}
+        name={id}
+        id={id}
+        className={clsxm(
+          'my-2 rounded-md px-4 py-2 ring-1 dark:bg-transparent font-normal',
+          {
+            'ring-red-600': meta.touched && meta.error,
+            'ring-grey-400 dark:ring-slate-500': !meta.touched || !meta.error,
+          },
+        )}
+        rows={7}
+      />
+      <div className='font-sm font-normal text-red-600'>
+        {meta.touched && meta.error}
+      </div>
+    </label>
+  );
+};

src/components/atoms/select/Select.tsx

@@ -0,0 +1,48 @@
+import { Field, useField } from 'formik';
+
+import clsxm from '@/lib/clsxm';
+
+export interface SelectProps {
+  id: string;
+  label: string;
+  options: Option[];
+}
+
+export interface Option {
+  key: string;
+  value: string;
+}
+
+export const Select = ({ id, label, options }: SelectProps) => {
+  const fieldProps = { label, id, name: id, options };
+  const [_, meta] = useField(fieldProps);
+
+  return (
+    <label htmlFor={id} className='mb-2 mt-6 flex flex-col font-bold'>
+      {label}
+      <Field
+        as='select'
+        name={id}
+        id={id}
+        className={clsxm(
+          'my-2 rounded-md px-4 py-2 ring-1 dark:bg-transparent font-normal',
+          {
+            'ring-red-600': meta.touched && meta.error,
+            'ring-grey-400 dark:ring-slate-500': !meta.touched || !meta.error,
+          },
+        )}
+        defaultValue='none'
+      >
+        <option value='none'>Please select</option>
+        {options.map((option) => (
+          <option value={option.value} key={option.key}>
+            {option.value}
+          </option>
+        ))}
+      </Field>
+      <div className='font-sm font-normal text-red-600'>
+        {meta.touched && meta.error}
+      </div>
+    </label>
+  );
+};