WorkSimplon/brief-07-front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: WorkSimplon:mus
Branches Tags
WorkSimplon:main WorkSimplon:old WorkSimplon:mus
...
compare: WorkSimplon:882729ffc995d1d72b23ff4ad6a8f3dd8c5de27d
Branches Tags
WorkSimplon:main WorkSimplon:old WorkSimplon:mus

8 Commits
mus ... 882729ffc9

Author SHA1 Message Date
Mathis
882729ffc9 Revert "feat: Implement new auto-form components and fields" 
This reverts commit dc17e4a8f7.
 2024-06-10 11:58:40 +02:00
Mathis
dfa443d373 feat: update and remove specific dependencies 
Details:
This update makes three major changes in dependency tree. Firstly, packages '@react-three/drei', '@react-three/fiber', 'three', 'three-globe', '@types/three', '@types/jest' and 'jest' have been removed. Secondly, the '@babel/core' package has been added as a new dependency. Thirdly, version of the 'next' package has been updated. Please review compatibility before upgrading.
 2024-06-10 11:54:25 +02:00
Mathis
dc17e4a8f7 feat: Implement new auto-form components and fields 
This commit includes the creation of new react components and fields for auto-form functionality. The components include AutoFormLabel, AutoFormTooltip, and specific field components for data types such as AutoFormObject, AutoFormArray, AutoFormDate, AutoFormCheckbox, and others. Added tests to ensure the correct rendering of fields, labels generation, among other behaviors.
 2024-06-10 11:51:23 +02:00
Mathis
036acfce23 feat(services): update default value in UserDataContext 
The default value in the UserDataContext has been updated. Previously, it was set to false and now it has been changed to an object with the name property set to "Avnyr".
 2024-06-10 11:50:05 +02:00
Mathis
606f37e78f feat: Add new packages to pnpm-lock 
This commit consists of adding new packages to the `pnpm-lock.yaml` file. Packages include '@radix-ui/react-navigation-menu', '@react-three/drei', 'lightweight-charts', 'three', 'three-globe', '@types/three', among others. Also, it includes the addition of new package versions and their integrity hashes. Verify the diff for full changes.
 2024-06-10 11:35:54 +02:00
Mathis
1dd0384857 feat(components, services): Add user data management and account handling 
This commit introduces user data management with the addition of new interfaces and services. User data interface which defines the structure of user data was created. Account handler service for registering, logging in, updating user data and disconnecting was also added. User data provider component was created for managing user data state. The account info component for displaying and editing the user account was introduced too. Finally, updates were made in the existing components and services for accommodating these new elements.
 2024-06-07 16:57:37 +02:00
Mathis
d624ac6ab2 feat(page): update layout styling 
The structure of the main component in page.tsx has been adjusted to better accommodate its content. The div styling has been updated from full width with padding to half-width, full height, and content justified to the end.
 2024-06-07 14:34:31 +02:00
Mathis
409926a97b feat(tailwind.config): add global CSS variables for colors 
A new function, `addVariablesForColors`, has been added into the Tailwind configuration file to map each Tailwind color into a global CSS variable. This allows usage such as `var(--gray-200)` throughout the application for all Tailwind colors.
 2024-06-07 14:26:48 +02:00
14 changed files with 2470 additions and 19 deletions
Expand all files Collapse all files

4
package.json
View File

@@ -23,6 +23,7 @@
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-menubar": "^1.0.4",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.1.3",
@@ -45,6 +46,7 @@
"embla-carousel-react": "^8.1.3",
"framer-motion": "^11.2.10",
"input-otp": "^1.2.4",
"lightweight-charts": "^4.1.4",
"lucide-react": "^0.387.0",
"next": "14.2.3",
"next-themes": "^0.3.0",
@@ -60,9 +62,11 @@
"zod": "^3.23.8"
},
"devDependencies": {
"@types/jest": "^29.5.12",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"jest": "^29.7.0",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"

2283
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

20
src/app/layout.tsx
View File

@@ -5,6 +5,8 @@ import {ThemeProvider} from "@/components/providers/theme-provider";
import type React from "react";
import {Footer} from "@/components/footer";
import {Header} from "@/components/header";
import {PrimaryNavigationMenu} from "@/components/primary-nav";
import {Providers} from "@/components/providers/providers";
export const metadata: Metadata = {
title: "YeloBit",
@@ -21,16 +23,14 @@ export default function RootLayout({
<head>
<link rel="icon" href="/public/favicon.ico" sizes="any"/>
</head>
<body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
>
<Header></Header>
{children}
<Footer/>
</ThemeProvider>
<body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
<Providers>
<Header>
<PrimaryNavigationMenu/>
</Header>
{children}
<Footer/>
</Providers>
</body>
</html>
);

2
src/app/page.tsx
View File

@@ -2,7 +2,7 @@ import Image from "next/image";
export default function Home() {
return (
<main className="flex flex-col items-center justify-between p-24">
<main className="flex flex-col items-center justify-end h-full w-2/4">
<h1>Hello world !</h1>
</main>
);

22
src/components/account-dialog.tsx Normal file
View File

@@ -0,0 +1,22 @@
"use client"
import {useContext} from "react";
import {UserDataContext} from "@/components/providers/userdata-provider";
import {AccountInfo} from "@/components/account-info";
export function AccountDialog() {
const userContext = useContext(UserDataContext)
if (!userContext?.userData) {
userContext?.setUserData({name: "Mathis"})
return (<p>Loading...</p>)
}
//TODO No account context
//TODO Loading context
//TODO Account context
return (<AccountInfo userData={userContext.userData}/>)
}

58
src/components/account-info.tsx Normal file
View File

@@ -0,0 +1,58 @@
"use client"
import {IUserData} from "@/interfaces/userdata.interface";
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
import {User} from "lucide-react";
export function AccountInfo({userData}: {userData: IUserData}) {
return (
<Sheet>
<SheetTrigger asChild>
<Button variant="outline" className={"gap-1"}>
<User />
{userData?.name || "?"}
</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="name" className="text-right">
Name
</Label>
<Input id="name" placeholder={userData.name} className="col-span-3" onChange={(event)=>{console.log(event.target.value)}} />
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="username" className="text-right">
Username
</Label>
<Input id="username" value="@peduarte" className="col-span-3" />
</div>
</div>
<SheetFooter>
<SheetClose asChild>
<Button type="submit">Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
)
}

4
src/components/header.tsx
View File

@@ -1,6 +1,7 @@
import Image from "next/image";
import React from "react";
import {ThemeBtnSelector} from "@/components/theme-btn-selector";
import {AccountDialog} from "@/components/account-dialog";
export function Header({title, children}: {title?: string, children?: React.ReactNode}) {
@@ -16,7 +17,8 @@ export function Header({title, children}: {title?: string, children?: React.Reac
<div className={"w-1/3 flex flex-row justify-center items-center"}>
{children}
</div>
<div className={"w-1/3 flex flex-row justify-end items-center"}>
<div className={"w-1/3 flex flex-row justify-end gap-2 items-center"}>
<AccountDialog/>
<ThemeBtnSelector/>
</div>
</header>

23
src/components/providers/providers.tsx Normal file
View File

@@ -0,0 +1,23 @@
"use client"
import React from "react";
import {Header} from "@/components/header";
import {Footer} from "@/components/footer";
import {ThemeProvider} from "@/components/providers/theme-provider";
import {UserDataProvider} from "@/components/providers/userdata-provider";
export function Providers({children}: { children: React.ReactNode }) {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
>
<UserDataProvider>
{children}
</UserDataProvider>
</ThemeProvider>
)
}

21
src/components/providers/userdata-provider.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import {IUserData} from "@/interfaces/userdata.interface";
import {useEncodedLocalStorage} from "@/services/localStorage";
export interface IUserDataProvider {
userData: IUserData | undefined;
setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>
}
export const UserDataContext = React.createContext<IUserDataProvider | undefined>(undefined);
export const UserDataProvider = ({children}: {children: React.ReactNode}) => {
const [userData, setUserData] = useEncodedLocalStorage<IUserData | undefined>("user_data", undefined);
return (
<UserDataContext.Provider value={{userData, setUserData}}>
{children}
</UserDataContext.Provider>
);
};

3
src/interfaces/userdata.interface.ts Normal file
View File

@@ -0,0 +1,3 @@
export interface IUserData {
name: string
}

14
src/services/account.handler.ts Normal file
View File

@@ -0,0 +1,14 @@
"use client"
import { createContext, useContext, useState } from 'react';
import {IUserData} from "@/interfaces/userdata.interface";
const UserDataContext = createContext<IUserData>({name: "Avnyr"})
//TODO Run register task
//TODO Run login task
//TODO Run disconnect task
//TODO Run update user data

0
src/services/exchange.handler.ts Normal file
View File

18
src/services/localStorage.ts
View File

@@ -1,6 +1,6 @@
'use client'
import React, {useEffect, useState} from "react";
import React, {useEffect, useRef, useState} from "react";
/**
* A custom React hook that allows you to store and retrieve data in the browser's localStorage.
@@ -48,12 +48,20 @@ export function useLocalStorage<T>(key: string, initial: T): [T, React.Dispatch<
* @return {readonly [T, React.Dispatch<React.SetStateAction<T>>]} - An array containing the encoded value and a function to update the encoded value.
*/
export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>] {
console.log("Pong !")
const [encodedValue, setEncodedValue] = useState<T>(() => {
const stored = localStorage.getItem(key);
return stored ? safelyParse(stored, fallbackValue) : fallbackValue;
});
const prevValue = useRef(encodedValue);
useEffect(() => {
localStorage.setItem(key, safelyStringify(encodedValue));
console.log({encodedValue})
if (!b64ValEqual(prevValue.current, encodedValue)) {
localStorage.setItem(key, safelyStringify(encodedValue));
}
prevValue.current = encodedValue; // Set ref to current value
}, [key, encodedValue]);
return [encodedValue, setEncodedValue] as const;
@@ -64,6 +72,12 @@ export function useEncodedLocalStorage<T>(key: string, fallbackValue: T): readon
return fallback;
}
}
function b64ValEqual<T>(v1: T, v2: T): boolean {
return btoa(JSON.stringify(v1)) === btoa(JSON.stringify(v2));
}
function safelyStringify(value: T): string {
try {
return btoa(JSON.stringify(value));

17
tailwind.config.ts
View File

@@ -1,5 +1,8 @@
import type { Config } from "tailwindcss"
// @ts-ignore
import {default as flattenColorPalette} from "tailwindcss/lib/util/flattenColorPalette";
const config = {
darkMode: ["class"],
content: [
@@ -74,7 +77,19 @@ const config = {
},
},
},
plugins: [require("tailwindcss-animate")],
plugins: [require("tailwindcss-animate"), addVariablesForColors],
} satisfies Config
// This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
function addVariablesForColors({ addBase, theme }: any) {
let allColors = flattenColorPalette(theme("colors"));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
addBase({
":root": newVars,
});
}
export default config