Initial atomic component and Jest setup. (#2)

* Initial NextJS commit.

Setup NextJS application using TypeScript and App Router.
Cleaned up boilerplate code.
Installed material UI.
Setup strict tsconfig.
Updated package.json dev script to use port 8080.
Updated README.

* Initial atomic component.

Added required packages, emotion/cache, @mui/material.
Created initial atomic component for textual elements.
Updated tsconfig.
- Updated jsx value to react-jsx.
- Added baseUrl.
- Included dist in exclude.

* Resolve module not found build error.

- Updated next.config.mjs to resolve '@components' alias in webpack.
- Created types directory:
  - Moved TextProps interface to the types directory, declaring it as a module for global access to the TextProps type from the Text component.
  - Imported the type into the Text component for usage.

- Updated tsconfig:
  - Changed target and module to ESNext for better compatibility and faster builds.
  - Removed outDir as build files are placed in the .next directory in Next.js projects.
  - Updated jsx setting to 'preserve', in accordance with automatic fixes from the Next.js compiler.
  - Simplified include paths.

* Initial jest setup.

- Adds all required configurations to run npm test script.
- Adds passing unit tests with 100% coverage for Text.tsx verifying jest confguration setup.

---------

Co-authored-by: Ryan James Meneses <[email protected]>

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

jest.config.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-anonymous-default-export */
+/** @type {import('jest').Config} */
+export default {
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.cjs'],
+  collectCoverage: true,
+};

next.config.mjs

@@ -1,4 +1,12 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-export default nextConfig;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
+  webpack: (config) => {
+    config.resolve.alias['@components'] = path.join(__dirname, 'src/components');
+    return config;
+  }
+};