@pplancq/react-template 1.0.0

package/src/ui/atoms/NavLink/NavLink.tsx

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+
+type NavLinkProps = ComponentProps<typeof RouterNavLink>;
+
+export const NavLink = ({ className, ...props }: NavLinkProps) => (
+  <RouterNavLink {...props} className={[className].filter(Boolean).join(' ')} />
+);

package/src/ui/atoms/NavLink/index.ts

@@ -0,0 +1 @@
+export { NavLink } from './NavLink';

package/src/ui/molecules/Navigation/Navigation.module.css

@@ -0,0 +1,22 @@
+.navList {
+  padding: 0;
+  list-style: none;
+}
+
+.navList li {
+  display: inline;
+  margin: 20px;
+}
+
+@media screen and (width <= 900px) {
+  .navList li {
+    display: none;
+  }
+}
+
+.a {
+  letter-spacing: 4px;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: white;
+}

package/src/ui/molecules/Navigation/Navigation.tsx

@@ -0,0 +1,25 @@
+import { NavLink } from '@Front/ui/atoms/NavLink';
+import { useId } from 'react';
+import classes from './Navigation.module.css';
+
+type NavigationProps = {
+  links: { label: string; url: string }[];
+};
+
+export const Navigation = ({ links }: NavigationProps) => {
+  const id = useId();
+
+  return (
+    <nav>
+      <ul className={classes.navList}>
+        {links.map(link => (
+          <li key={`${id} ${link.label} ${link.url}`}>
+            <NavLink to={link.url} className={classes.a}>
+              {link.label}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};

package/src/ui/molecules/Navigation/index.ts

@@ -0,0 +1 @@
+export { Navigation } from './Navigation';

package/src/ui/organisms/Footer/Footer.module.css

@@ -0,0 +1,10 @@
+footer {
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0;
+  letter-spacing: 4px;
+  text-align: center;
+  text-transform: uppercase;
+  color: white;
+  background-color: #00008f;
+}

package/src/ui/organisms/Footer/Footer.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import classes from './Footer.module.css';
+
+type FooterProps = {
+  footerContent?: ReactNode;
+};
+
+export const Footer = ({ footerContent }: FooterProps) => {
+  return <footer className={classes.footer}>{footerContent}</footer>;
+};

package/src/ui/organisms/Footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './Footer';

package/src/ui/organisms/Header/Header.module.css

@@ -0,0 +1,17 @@
+header {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #00008f;
+}
+
+@media screen and (width <= 900px) {
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/src/ui/organisms/Header/Header.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import classes from './Header.module.css';
+
+type HeaderProps = {
+  leftComponents?: ReactNode;
+  rightComponents?: ReactNode;
+};
+
+export const Header = ({ leftComponents, rightComponents }: HeaderProps) => {
+  return (
+    <header className={classes.header}>
+      {leftComponents}
+      {rightComponents}
+    </header>
+  );
+};

package/src/ui/organisms/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/ui/organisms/MainContent/MainContent.module.css

@@ -0,0 +1,3 @@
+main {
+  flex-grow: 1;
+}

package/src/ui/organisms/MainContent/MainContent.tsx

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import classes from './MainContent.module.css';
+
+export const MainContent = ({ children }: PropsWithChildren) => {
+  return <main className={classes.main}>{children}</main>;
+};

package/src/ui/organisms/MainContent/index.ts

@@ -0,0 +1 @@
+export { MainContent } from './MainContent';

package/src/ui/templates/MainTemplate/MainTemplate.module.css

@@ -0,0 +1,5 @@
+.mainTemplateStyle {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}

package/src/ui/templates/MainTemplate/MainTemplate.tsx

@@ -0,0 +1,26 @@
+import { Footer } from '@Front/ui/organisms/Footer';
+import { Header } from '@Front/ui/organisms/Header';
+import { MainContent } from '@Front/ui/organisms/MainContent';
+import { PropsWithChildren, ReactNode } from 'react';
+
+import classes from './MainTemplate.module.css';
+
+type MainTemplateProps = {
+  headerProps: {
+    leftComponents?: ReactNode;
+    rightComponents?: ReactNode;
+  };
+  footerProps: {
+    footerContent?: ReactNode;
+  };
+};
+
+export const MainTemplate = ({ headerProps, footerProps, children }: PropsWithChildren<MainTemplateProps>) => {
+  return (
+    <div className={classes.mainTemplateStyle}>
+      <Header {...headerProps} />
+      <MainContent>{children}</MainContent>
+      <Footer {...footerProps} />
+    </div>
+  );
+};

package/src/ui/templates/MainTemplate/index.ts

@@ -0,0 +1 @@
+export { MainTemplate } from './MainTemplate';

package/src/utils/README.md

@@ -0,0 +1,68 @@
+# 📁 utils 
+The `utils` folder contains reusable utilities and functionalities used across different parts of the application. These utilities are designed to simplify the code, promote reusability, and enhance the maintainability of the project.
+
+## 📑 Table of Contents
+  - [Usage Example](#usage)
+  - [Best Practice](#best-practice)
+
+## <span id="usage">🧑🏻‍💻 Example of usage</span>
+
+###  `formatDate.ts`
+
+The  `formatDate.ts` file contains a utility function to consistently format dates throughout the application. You can use it to display dates in various components.
+
+Example of usage:
+
+```typescript
+import { formatDate } from '@Front/utils/formatDate';
+
+const formattedDate = formatDate(new Date());
+```
+
+###  `apiUtils.ts`
+
+The `apiUtils.ts` file contains utility functions to simplify API calls. You can find functions to handle HTTP requests, manipulate responses, and manage errors.
+
+Example of usage:
+
+```typescript
+import { fetchData, handleResponse } from '@Front/utils/apiUtils';
+
+async function fetchDataAndHandleError() {
+  try {
+    const data = await fetchData('https://api.example.com/data');
+    const processedData = handleResponse(data);
+    
+  } catch (error) {
+    console.error('An error occurred while fetching data:', error);
+  }
+}
+```
+
+
+```typescript
+import { formatDate, fetchData, handleResponse } from '@Front/utils';
+// Use the utilities as needed
+```
+
+----------
+***By using the "utils" folder, we organize our utilities efficiently for better reuse and simplified management.***
+
+## <span id="best-practice">🎖️ Best Practice</span>
+
+
+When dealing with utility functions, especially those sourced from external libraries like `date-fns`, it is advisable to follow these best practices for maintaining a structured codebase:
+
+#### - Export Libraries from the `utils` Directory
+
+Always export utility libraries, such as `date-fns` or others, from the `utils` directory. This practice provides a central location for managing library imports and ensures consistent usage throughout the codebase.
+
+#### - Centralized Library Management
+Exporting libraries through the `utils` directory establishes a centralized point for managing changes or updates to external libraries. 
+
+In case of updates, bug fixes, or changes in functionality, modifications can be made at a single location, preventing the need to update multiple parts of the codebase.
+
+This approach contributes to better maintainability and ensures that updates to external libraries are efficiently handled.
+
+---
+***By adhering to this practice, you create a clear separation between custom utility functions and external libraries, making your codebase more organized and reducing the impact of changes from external dependencies.***

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "types": ["./src/react-app-env.d.ts", "@pplancq/webpack-config", "vitest/globals", "@testing-library/jest-dom/vitest"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@Front/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": ["node_modules"]
+}

package/vitest.config.mts

@@ -0,0 +1,49 @@
+import react from '@vitejs/plugin-react'
+import { loadEnv } from 'vite'
+import svgr from 'vite-plugin-svgr'
+import viteTsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+
+  return {
+    plugins: [react(), viteTsconfigPaths(), svgr()],
+    envPrefix: env.ENV_PREFIX ?? 'FRONT_',
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: 'vitest.setup.ts',
+      clearMocks: true,
+      css: false,
+      reporters: ['basic', 'junit', 'vitest-sonar-reporter'],
+      outputFile: {
+        'vitest-sonar-reporter': 'sonar-report.xml',
+        'junit': 'junit-report.xml',
+      },
+      include: ['src/**/*.(spec|test|steps).[jt]s?(x)'],
+      poolOptions: {
+        threads: {
+          minThreads: env.CI ? 1 : undefined,
+          maxThreads: env.CI ? 2 : undefined,
+        },
+      },
+      coverage: {
+        reporter: ['lcov', 'json', 'html', 'text', 'cobertura'],
+        provider: 'v8',
+        lines: 80,
+        functions: 75,
+        branches: 80,
+        statements: 80,
+        include: ['src/**/*.[jt]s?(x)'],
+        exclude: [
+          'src/**/*.d.[jt]s?(x)',
+          'src/utils/tests/**/*.[jt]s?(x)',
+          'src/**/*.types.[jt]s?(x)',
+          'src/**/index.[jt]s?(x)',
+          'src/**/*.stories.[jt]s?(x)',
+        ],
+      },
+    },
+  };
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/webpack.config.js

@@ -0,0 +1,22 @@
+// const { ModuleFederationPlugin } = require('webpack').container;
+
+// const deps = require('./package.json').dependencies;
+
+module.exports = {
+  extends: [require.resolve('@pplancq/webpack-config')],
+  // plugins: [
+  //   new ModuleFederationPlugin({
+  //     name: 'reactTemplate',
+  //     filename: 'js/remoteEntry.js',
+  //     remotes: {},
+  //     exposes: {
+  //       './App': './src/bootstrap.tsx',
+  //     },
+  //     shared: {
+  //       react: { singleton: true, requiredVersion: deps.react },
+  //       'react-dom': { singleton: true, requiredVersion: deps['react-dom'] },
+  //       'react-router-dom': { singleton: true, requiredVersion: deps['react-router-dom'] },
+  //     },
+  //   }),
+  // ],
+};