Merge branch 'main' into e-1678-feature-support-v1-contactform

onlydustxyz · Aug 9, 2024 · 5c53563 · 5c53563
2 parents 02ddb04 + 0769cc9
commit 5c53563
Show file tree

Hide file tree

Showing 40 changed files with 529 additions and 250 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -133,6 +133,7 @@
 
   body {
     @apply font-walsheim;
+    background: var(--container-1);
   }
 
   code {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,7 +8,6 @@ import "remixicon/fonts/remixicon.css";
 
 import "@/app/globals.css";
 import { Providers } from "@/app/providers";
-import { TestNav } from "@/app/test-nav";
 
 import { InitBootstrapAuth } from "@/core/bootstrap/init-bootstrap-auth";
 import { InitBootstrapImpersonation } from "@/core/bootstrap/init-bootstrap-impersonation";
@@ -17,6 +16,7 @@ import { Toaster } from "@/design-system/atoms/toaster";
 
 import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
+import { PrimaryNavigation } from "@/shared/features/navigation/primary-navigation/primary-navigation";
 
 import { sharedMetadata } from "./shared-metadata";
 
@@ -43,8 +43,8 @@ export default function RootLayout({
           <PosthogPageview />
           <Toaster />
           <div className={"mx-auto h-dvh w-dvw max-w-[2560px] overflow-hidden p-3"}>
-            <AnimatedColumnGroup>
-              <TestNav />
+            <AnimatedColumnGroup className="gap-3">
+              <PrimaryNavigation />
               <AnimatedColumn autoWidth={true} className="size-full">
                 {children}
               </AnimatedColumn>

diff --git a/app/test-nav.tsx b/app/test-nav.tsx
diff --git a/app/test/page.tsx b/app/test/page.tsx
@@ -2,12 +2,19 @@ import { TestSidePanel } from "@/app/test/_components/side-panel/test-side-panel
 
 import { AnimatedColumnGroup } from "@/shared/components/animated-column-group/animated-column-group";
 import { AnimatedColumn } from "@/shared/components/animated-column-group/animated-column/animated-column";
+import { SecondaryNavigation } from "@/shared/features/navigation/secondary-navigation/secondary-navigation";
 
 export default function TestPage() {
   // TODO UPDATE THIS TO MAKE A COMPONENT
   return (
     <div className={"flex h-full w-full flex-col overflow-hidden bg-orange-900"}>
-      <div className="min-h-[50px] w-full bg-blue-500">TOP NAV</div>
+      <SecondaryNavigation
+        iconName={"ri-rocket-line"}
+        breadcrumbs={[
+          { id: "root", label: "OnlyDust app", href: "https://app.onlydust.com" },
+          { id: "current_page", label: "Current page" },
+        ]}
+      />
       <AnimatedColumnGroup>
         <AnimatedColumn autoWidth={true} className="h-full flex-1 overflow-auto bg-yellow-900">
           <div className={"h-[5000px] bg-orange-900"}>CONTENT</div>

diff --git a/design-system/atoms/avatar/adapters/next-ui/next-ui.variants.ts b/design-system/atoms/avatar/adapters/next-ui/next-ui.variants.ts
@@ -2,10 +2,10 @@ import { tv } from "tailwind-variants";
 
 export const AvatarNextUiVariants = tv({
   slots: {
-    base: "border-1 border-container-stroke-separator group relative box-content flex flex-shrink-0 items-center justify-center overflow-hidden",
+    base: "group relative box-border flex flex-shrink-0 items-center justify-center overflow-hidden border-1 border-container-stroke-separator",
     img: "h-full w-full object-cover object-center",
     fallback: "h-full w-full",
-    name: "font-walsheim text-text-1 text-xs",
+    name: "font-walsheim text-xs text-text-1",
     icon: "",
   },
   variants: {

diff --git a/design-system/atoms/button/adapters/default/default.adapter.tsx b/design-system/atoms/button/adapters/default/default.adapter.tsx
@@ -67,7 +67,7 @@ export function ButtonDefaultAdapter<C extends ElementType = "button">({
         )}
         {showChildren && (
           <Typo size={typoSize[size || "m"]} as={"span"} classNames={{ base: cn(slots.label(), classNames?.label) }}>
-            {children || <Translate {...translate} />}
+            {children || (translate && <Translate {...translate} />)}
           </Typo>
         )}
         {!!endIcon && (

diff --git a/design-system/atoms/button/adapters/default/default.variants.ts b/design-system/atoms/button/adapters/default/default.variants.ts
@@ -2,12 +2,12 @@ import { tv } from "tailwind-variants";
 
 export const ButtonDefaultVariants = tv({
   slots: {
-    base: "bg-container-1 group relative flex h-fit w-fit cursor-pointer overflow-hidden rounded-lg transition-colors",
+    base: "group relative box-border flex h-fit w-fit cursor-pointer overflow-hidden rounded-lg bg-container-1 transition-colors",
     content: "flex w-full flex-row items-center justify-center",
     startIcon: "transition-color text-inherit",
     endIcon: "transition-color text-inherit",
     label: "transition-color leading-none text-inherit",
-    loaderContainer: "bg-container-1 absolute inset-0 flex h-full w-full flex-row items-center justify-center",
+    loaderContainer: "absolute inset-0 flex h-full w-full flex-row items-center justify-center bg-container-1",
     spinnerCircle: "h-4 w-4 border-b-white",
   },
   variants: {
@@ -65,7 +65,8 @@ export const ButtonDefaultVariants = tv({
       hideText: true,
       size: "l",
       class: {
-        base: "px-3 py-3",
+        // remove the border width in the padding size
+        base: "px-[11px] py-[11px]",
       },
     },
     {

diff --git a/design-system/atoms/button/button.types.ts b/design-system/atoms/button/button.types.ts
@@ -1,8 +1,8 @@
-import { ComponentProps, ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactNode } from "react";
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactNode } from "react";
 
 import { IconPort } from "@/design-system/atoms/icon/icon.types";
 
-import { Translate } from "@/shared/translation/components/translate/translate";
+import { TranslateProps } from "@/shared/translation/components/translate/translate.types";
 
 interface Variants {
   size: "s" | "m" | "l" | "xl";
@@ -24,7 +24,7 @@ interface ClassNames {
 export interface ButtonPort<C extends ElementType> extends Partial<Variants>, PropsWithChildren {
   htmlProps?: Omit<ComponentPropsWithoutRef<C>, "type">;
   classNames?: Partial<ClassNames>;
-  translate?: ComponentProps<typeof Translate>;
+  translate?: TranslateProps;
   as?: C;
   startIcon?: IconPort;
   endIcon?: IconPort;

diff --git a/design-system/atoms/tag/adapters/default/default.adapter.tsx b/design-system/atoms/tag/adapters/default/default.adapter.tsx
@@ -37,7 +37,7 @@ export function TagDefaultAdapter<C extends ElementType = "span">({
 
         {showChildren && (
           <Typo size={"xs"} as={"span"} {...labelProps} classNames={{ base: cn(slots.label(), classNames?.label) }}>
-            {children || <Translate {...translate} />}
+            {children || (translate && <Translate {...translate} />)}
           </Typo>
         )}
 

diff --git a/design-system/atoms/tag/tag.types.ts b/design-system/atoms/tag/tag.types.ts
@@ -1,10 +1,10 @@
-import { ComponentProps, ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactNode } from "react";
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren, ReactNode } from "react";
 
 import { AvatarPort } from "@/design-system/atoms/avatar";
 import { IconPort } from "@/design-system/atoms/icon";
 import { TypoPort } from "@/design-system/atoms/typo";
 
-import { Translate } from "@/shared/translation/components/translate/translate";
+import { TranslateProps } from "@/shared/translation/components/translate/translate.types";
 
 interface Variants {
   size: "xs" | "s" | "m";
@@ -27,7 +27,7 @@ export interface TagBasePort<C extends ElementType> extends Partial<Variants>, P
   as?: C;
   htmlProps?: ComponentPropsWithoutRef<C>;
   classNames?: Partial<ClassNames>;
-  translate?: ComponentProps<typeof Translate>;
+  translate?: TranslateProps;
   startContent?: ReactNode;
   endContent?: ReactNode;
   labelProps?: Partial<TypoPort<"span">>;

diff --git a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
@@ -17,33 +17,30 @@ export function ItemNavDefaultAdapter({ classNames, children, translate, ...prop
   return (
     <BaseLink className={cn(slots.base(), classNames?.base)} {...linkProps}>
       {({ isExternal }) => (
-        <>
+        <div className={"flex w-full items-center justify-start gap-2 overflow-hidden"}>
           <Icon size={18} {...icon} />
-
-          {!isFolded && (
-            <div className="flex-1">
-              {showChildren && (
-                <Typo
-                  size={"m"}
-                  as={"span"}
-                  {...labelProps}
-                  translate={translate}
-                  classNames={{ base: cn(slots.label(), classNames?.label) }}
-                >
-                  {children}
-                </Typo>
-              )}
-              {isExternal ? (
-                <Icon
-                  name="ri-external-link-line"
-                  classNames={{
-                    base: "invisible ml-1 text-inherit group-hover/link:visible",
-                  }}
-                />
-              ) : null}
-            </div>
-          )}
-        </>
+          <div className="flex-1">
+            {showChildren && (
+              <Typo
+                size={"m"}
+                as={"span"}
+                {...labelProps}
+                translate={translate}
+                classNames={{ base: cn(slots.label(), classNames?.label) }}
+              >
+                {children}
+              </Typo>
+            )}
+            {isExternal ? (
+              <Icon
+                name="ri-external-link-line"
+                classNames={{
+                  base: cn("invisible ml-1 text-inherit group-hover/link:visible", { "!invisible": isFolded }),
+                }}
+              />
+            ) : null}
+          </div>
+        </div>
       )}
     </BaseLink>
   );

diff --git a/design-system/molecules/item-nav/adapters/default/default.variants.ts b/design-system/molecules/item-nav/adapters/default/default.variants.ts
@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 export const ItemNavDefaultVariants = tv({
   slots: {
-    base: "flex h-10 w-full items-center justify-center gap-2 rounded-xl border border-container-stroke-separator p-2 text-text-1 transition-all hover:bg-transparent data-[active=true]:bg-container-stroke-separator",
-    label: "text-inherit",
+    base: "flex h-10 w-full items-center justify-center rounded-xl border border-transparent p-2 text-text-1 transition-all data-[active=true]:border-container-stroke-separator data-[active=true]:bg-container-stroke-separator hover:border-container-stroke-separator hover:bg-transparent",
+    label: "whitespace-nowrap text-inherit",
   },
   variants: {
     isDisabled: {

diff --git a/design-system/molecules/item-nav/item-nav.types.ts b/design-system/molecules/item-nav/item-nav.types.ts
@@ -4,7 +4,7 @@ import { IconPort } from "@/design-system/atoms/icon";
 import { TypoPort } from "@/design-system/atoms/typo";
 
 import { BaseLinkProps } from "@/shared/components/base-link/base-link.types";
-import { TranlateProps } from "@/shared/translation/components/translate/translate";
+import { TranslateProps } from "@/shared/translation/components/translate/translate.types";
 
 type _BaseLinkProps = Omit<BaseLinkProps, "children" | "style">;
 
@@ -17,7 +17,7 @@ export interface ItemNavPort extends _BaseLinkProps, PropsWithChildren {
   classNames?: Partial<ClassNames>;
   labelProps?: Partial<TypoPort<"span">>;
   icon: IconPort;
-  translate?: TranlateProps;
-  isDisabled: boolean;
-  isFolded: boolean;
+  translate?: TranslateProps;
+  isDisabled?: boolean;
+  isFolded?: boolean;
 }
diff --git a/package.json b/package.json
@@ -10,11 +10,7 @@
     "test": "vitest",
     "gen:types": "tooling/scripts/generate-api-types.sh",
     "postbuild": "tooling/scripts/upload-sourcemaps.sh",
-    "component": "ts-node tooling/cli/create-component.js",
-    "ds": "ts-node tooling/cli/create-ds.js",
-    "ds:adapter": "ts-node tooling/cli/add-adapter.js",
-    "core:domain": "ts-node tooling/cli/create-domain.js",
-    "hook": "ts-node tooling/cli/create-hook.js",
+    "cli": "ts-node tooling/cli/cli.js",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "serve-storybook": "storybook start"

diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.tsx b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
@@ -0,0 +1,36 @@
+import { PrimaryMenuProps } from "shared/features/navigation/menu/primary-menu/primary-menu.types";
+
+import { ItemNav } from "@/design-system/molecules/item-nav";
+
+export function PrimaryMenu({ isFolded }: PrimaryMenuProps) {
+  return (
+    <>
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-line-chart-line" }}
+        href={"/test"}
+        translate={{ token: "primaryNavigation:primaryMenu.data" }}
+      />
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-wallet-3-line" }}
+        href={"/test2"}
+        translate={{ token: "primaryNavigation:primaryMenu.financial" }}
+        isDisabled={true}
+      />
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-clipboard-line" }}
+        href={"/test2"}
+        translate={{ token: "primaryNavigation:primaryMenu.program" }}
+        isDisabled={true}
+      />
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-compass-3-line" }}
+        href={"/test2"}
+        translate={{ token: "primaryNavigation:primaryMenu.projects" }}
+      />
+    </>
+  );
+}
diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.types.ts b/shared/features/navigation/menu/primary-menu/primary-menu.types.ts
@@ -0,0 +1,3 @@
+export interface PrimaryMenuProps {
+  isFolded?: boolean;
+}
diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
@@ -0,0 +1,23 @@
+import { SecondaryMenuProps } from "shared/features/navigation/menu/secondary-menu/secondary-menu.types";
+
+import { ItemNav } from "@/design-system/molecules/item-nav";
+
+export function SecondaryMenu({ isFolded }: SecondaryMenuProps) {
+  return (
+    <>
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-settings-line" }}
+        href={"/test"}
+        translate={{ token: "primaryNavigation:secondaryMenu.support" }}
+      />
+      <ItemNav
+        isFolded={isFolded}
+        icon={{ name: "ri-chat-4-line" }}
+        href={"/test2"}
+        translate={{ token: "primaryNavigation:secondaryMenu.settings" }}
+        isDisabled={true}
+      />
+    </>
+  );
+}
diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.types.ts b/shared/features/navigation/menu/secondary-menu/secondary-menu.types.ts
@@ -0,0 +1,3 @@
+export interface SecondaryMenuProps {
+  isFolded?: boolean;
+}