7 gov cvi header implementation

.env

@@ -0,0 +1,5 @@
+DISABLE_ESLINT_PLUGIN=true
+REACT_APP_AUTH_BASE_URL=http://localhost:3001
+REACT_APP_REDIRECT_BASE_URL=http://localhost:3001
+REACT_APP_RUUTER_V1_PRIVATE_API_URL=http://localhost:3001
+REACT_APP_RUUTER_V2_PRIVATE_API_URL=http://localhost:3001

Dockerfile.dev

@@ -1,8 +1,8 @@
 FROM node:lts 
 WORKDIR /app
-COPY ./package.json .
+COPY ./package*.json ./
 
-RUN npm install
+RUN npm install --legacy-peer-deps
 COPY . .
 
 EXPOSE 5173

README.md

@@ -1,31 +1,21 @@
-# About
+# General information
 
-This is a repo to showcase how to implement different CVI components when building Bürokratt.
+This is a repo to showcase implementation different CVI and BYK components when building applications.
 
-# References
+### Running via docker
+- Navigate to `root` directory of the application
+- Run command `docker -compose up -d`
 
-### Gov CVI
-
-https://github.com/orgs/buerokratt/projects/34
-https://github.com/buerokratt/cvi
-
-# Sample solution
+### Running locally
+- Run `npm install --legacy-peer-deps` to install necessary dependencies
+- Run `npm run dev` to start the application
 
-### Short description
-
-This is sample solution developers can take as base for the new applications.
-The solution has common base layout created and example main navigation added.
-Also two very simple example pages are included.
-
-### Components from CVI
+### Gov CVI
 
-The solution uses styles (https://github.com/buerokratt/cvi/tree/main/libs/styles/src/lib)
-and components (https://github.com/buerokratt/cvi/tree/main/libs/react-ui/src/lib) from CVI.
-From components are used icons and main-navigation. All styles are directly copied to solution.
+### Creating Header/Menu package
 
-### Next steps
+To get all information regarding building npm package for header/menu go to `src/exportcomponent` folder 
+and follow provided instructions.
 
-As main-navigation menu items parameter is currently hardcoded, probably some (network) services must be created.
-The layout component needs to be updated to use the services.
-(Read the comments in layout and main-navigation components code)
-Router routes (in correlation with main-navigation items) must be defined/updated to load correct pages.
+https://github.com/orgs/buerokratt/projects/34
+https://github.com/buerokratt/cvi

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.8'
 
 services:
-  navigation:
+  layout:
     build: 
       context: ./
       dockerfile: Dockerfile.dev

i18n.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import commonEN from './src/translations/en/common.json';
+import commonET from './src/translations/et/common.json';
+
+    i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: import.meta.env.NODE_ENV === 'development',
+    fallbackLng: 'et',
+    supportedLngs: ['et'],
+    resources: {
+      en: {
+        common: commonEN,
+      },
+      et: {
+        common: commonET,
+      },
+    },
+    defaultNS: 'common',
+  });
+
+export default i18n;

package.json

@@ -11,16 +11,35 @@
   },
   "dependencies": {
     "@fontsource/roboto": "^4.5.8",
+    "@formkit/auto-animate": "^0.7.0",
     "@radix-ui/react-accessible-icon": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-query": "^4.32.1",
-    "clsx": "^2.0.0",
+    "axios": "^1.4.0",
+    "axios-mock-adapter": "^1.21.5",
+    "clsx": "^1.2.1",
+    "downshift": "^8.1.0",
+    "i18next": "^23.2.3",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "msw": "^1.2.3",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.4",
+    "react-i18next": "^12.1.1",
     "react-icons": "^4.10.1",
+    "react-idle-timer": "^5.7.2",
     "react-router-dom": "^6.14.2",
-    "vite-plugin-svgr": "^3.2.0"
+    "rxjs": "^7.8.1",
+    "swr": "^2.2.0",
+    "tslib": "^2.3.0",
+    "vite-plugin-dts": "^3.5.2",
+    "vite-plugin-svgr": "^3.2.0",
+    "zustand": "^4.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -36,5 +55,8 @@
     "vite": "^4.4.5",
     "vite-plugin-env-compatible": "^1.1.1",
     "vite-tsconfig-paths": "^4.2.0"
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }

src/App.tsx

@@ -2,16 +2,40 @@ import { FC } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import Layout from './components/layout/layout.tsx';
 import WelcomePage from './pages/info/welcome';
-import MainNavigationPage from './pages/component/main-navigation';
-
+import useUserInfoStore from "./exportcomponents/src/header/store/store";
+import {useQuery} from "@tanstack/react-query";
+import {UserInfo} from "./exportcomponents/src/header/types/userInfo";
+import MainNavigationPage from "./pages/component/main-navigation";
 
 const App: FC = () => {
+    console.log(import.meta.env.REACT_APP_BASE_URL)
+    // fetching initial person information
+    const store = useUserInfoStore();
+    // const { data: userInfo } = useQuery<{
+    //     data: { custom_jwt_userinfo: UserInfo };
+    // }>({
+    //     queryKey: ['cs-custom-jwt-userinfo'],
+    //     onSuccess: (data: { data: { custom_jwt_userinfo: UserInfo } }) =>
+    //         store.setUserInfo(data.data.custom_jwt_userinfo),
+    // });
+    // const { data: userInfo } = useQuery<UserInfo>({
+    //     queryKey: ['mock-response', 'auth'],
+    //     onSuccess: (data) => store.setUserInfo(data),
+    // });
 
+    const { data: userInfo } = useQuery<UserInfo>({
+        queryKey: ['steps/tim/mock-response', 'auth'],
+        onSuccess: (data) => {
+            console.log(data.response.body.displayName)
+            store.setUserInfo(data.response.body)
+        },
+    });
   return (
       <Routes>
         <Route element={<Layout />}>
           <Route index element={<Navigate to="/info/welcome" />} />
           <Route path="/info/welcome" element={<WelcomePage />} />
+          <Route path="/**" element={<WelcomePage />} />
           <Route path="/component/mainnavigation" element={<MainNavigationPage />} />
         </Route>
       </Routes>

src/components/MainMenu/components/icons/icon.scss

@@ -0,0 +1,17 @@
+@import 'src/styles/tools/spacing';
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &--small {
+    width: get-spacing(haapsalu);
+    height: get-spacing(haapsalu);
+  }
+
+  &--medium {
+    width: get-spacing(kuressaare);
+    height: get-spacing(kuressaare);
+  }
+}

src/components/MainMenu/components/icons/icon/icon.tsx

@@ -0,0 +1,32 @@
+import {
+    CSSProperties,
+    forwardRef,
+    ReactNode,
+    StyleHTMLAttributes,
+} from 'react';
+import * as AccessibleIcon from '@radix-ui/react-accessible-icon';
+import clsx from 'clsx';
+
+import '../icon.scss';
+
+type IconProps = StyleHTMLAttributes<CSSProperties> & {
+    label?: string | null;
+    icon: ReactNode;
+    size?: 'small' | 'medium';
+};
+
+const IconComponent = forwardRef<HTMLSpanElement, IconProps>(
+    ({ label, icon, size = 'small', ...rest }, ref) => {
+        const iconClasses = clsx('icon', `icon--${size}`);
+
+        return (
+            <AccessibleIcon.Root label={label ?? ''}>
+        <span ref={ref} className={iconClasses} style={rest.style}>
+          {icon}
+        </span>
+            </AccessibleIcon.Root>
+        );
+    }
+);
+
+export default IconComponent;