Merge branch 'main' into feat/CardOrganization

apps/web/src/app/[lang]/page.tsx

@@ -3,6 +3,8 @@ import { CardOrganisation } from '@hypha-platform/epics';
 import Link from 'next/link';
 import { Locale } from '@hypha-platform/i18n';
 import { getAssignmentsPath } from './dho/[id]/assignments/constants';
+import { Container } from '@hypha-platform/ui';
+import { Heading } from 'packages/ui/src/atoms/heading';
 
 type PageProps = {
   params: { lang: Locale; id: string };
@@ -13,22 +15,28 @@ export default async function Index({ params: { lang } }: PageProps) {
   const daos = await getDaoList({ token: newtoken.accessJWT });
 
   return (
-    <div data-testid="dho-list-container" className="grid grid-cols-4 gap-4 px-6 py-4">
-      {daos.map((dao) => (
-        <div key={dao.name}>
-          <Link href={getAssignmentsPath(lang, dao.url as string)}>
-            <CardOrganisation
-              createdDate={dao.date}
-              description={dao.description as string}
-              icon={dao.logo}
-              members={0}
-              activeAgreements={1}
-              openDiscussions={1}
-              title={dao.title as string}
-            />
-          </Link>
+    <div className="w-full px-6 py-4 overflow-auto">
+      <Container>
+        <Heading className="mb-4" size="9" color="primary" weight="medium" align="center">All your spaces, in one place</Heading>
+        <div data-testid="dho-list-container" className="w-full">
+          {daos.map((dao) => (
+            <div key={dao.name} className="mb-5">
+              <Link href={getAssignmentsPath(lang, dao.url as string)}>
+                <CardOrganisation
+                  createdDate={dao.date}
+                  description={dao.description as string}
+                  icon={dao.logo}
+                  members={0}
+                  agreements={0}
+                  activeAgreements={1}
+                  openDiscussions={1}
+                  title={dao.title as string}
+                />
+              </Link>
+            </div>
+          ))}
         </div>
-      ))}
+      </Container>
     </div>
   );
 }

packages/epics/src/organisation/components/card-organisation.tsx

@@ -8,6 +8,7 @@ type DaoCardProps = {
   members: number;
   agreements: number;
   title: string;
+  agreements: number;
   activeAgreements?: number;
   openDiscussions?: number;
 };
@@ -43,6 +44,7 @@ export const CardOrganisation: React.FC<DaoCardProps> = ({
   activeAgreements,
   openDiscussions,
   title,
+  agreements
 }) => {
   return (
     <Card className="h-full w-full">

packages/ui-utils/src/tailwind.config.ts

@@ -69,6 +69,17 @@ export function buildConfig(appDir: string): Config {
           md: `calc(var(--radius) - 2px)`,
           sm: 'calc(var(--radius) - 4px)',
         },
+        fontSize: {
+          "1": '14px',
+          "2": '16px',
+          "3": '18px',
+          "4": '20px',
+          "5": '24px',
+          "6": '30px',
+          "7": '36px',
+          "8": '48px',
+          "9": '60px'
+        },
         keyframes: {
           'accordion-down': {
             from: { height: '0' },
@@ -82,7 +93,7 @@ export function buildConfig(appDir: string): Config {
         animation: {
           'accordion-down': 'accordion-down 0.2s ease-out',
           'accordion-up': 'accordion-up 0.2s ease-out',
-        },
+        }
       },
     },
     plugins: [TailwindAnimate],

packages/ui/src/atoms/heading/index.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Heading } from './index';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof Heading> = {
+  component: Heading,
+  title: 'atoms/Heading',
+};
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to Heading!/gi)).toBeTruthy();
+  },
+};

packages/ui/src/atoms/heading/index.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const headingVariants = cva(
+  'font-family-inherit m-0',
+  {
+    variants: {
+      size: {
+        "1": 'text-1',   // h9
+        "2": 'text-2',   // h8
+        "3": 'text-3',   // h7
+        "4": 'text-4',   // h6
+        "5": 'text-5',   // h5
+        "6": 'text-6',   // h4
+        "7": 'text-7',   // h3
+        "8": 'text-8',   // h2
+        "9": 'text-9',   // h1
+      },
+      weight: {
+        regular: 'font-normal',
+        medium: 'font-medium',
+        bold: 'font-bold'
+      },
+      align: {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+      },
+      color: {
+        primary: 'text-white',
+        secondary: 'text-gray-500',
+      },
+    },
+    defaultVariants: {
+      size: "1",
+      weight: 'medium',
+      align: 'left',
+      color: 'primary',
+    },
+  }
+);
+
+export interface HeadingProps
+  extends React.HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof headingVariants> {
+  asChild?: boolean;
+  size?: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+  color?: 'primary' | 'secondary';
+  align?: 'left' | 'center' | 'right';
+  weight?: 'regular' | 'medium' | 'bold';
+}
+
+const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ className, size, weight, align, color, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (
+      <Comp
+        className={(headingVariants({ size, weight, align, color, className }))}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Comp>
+    );
+  }
+);
+
+Heading.displayName = 'Heading';
+
+export { Heading, headingVariants };

packages/ui/src/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@hypha-platform/ui-utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        positive:
+          "border-emerald-300 bg-green-500 text-green-500 bg-opacity-5",
+        warning: "border-amber-400 bg-orange-400 text-orange-400 bg-opacity-5",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

packages/ui/src/container.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@hypha-platform/ui-utils';
+
+const containerVariants = cva('mx-auto px-4 sm:px-6 lg:px-8', {
+  variants: {
+    variant: {
+      fullMobileConstrainedPadded: 'max-w-7xl sm:px-6 lg:px-8',
+      constrainedPadded: 'max-w-7xl px-4 sm:px-6 lg:px-8',
+      fullMobileBreakpointPadded: 'container mx-auto sm:px-6 lg:px-8',
+      breakpointPadded: 'container mx-auto px-4 sm:px-6 lg:px-8',
+      narrowConstrainedPadded: 'max-w-7xl px-4 sm:px-6 lg:px-8 max-w-3xl',
+    },
+  },
+  defaultVariants: {
+    variant: 'narrowConstrainedPadded',
+  },
+})
+
+export interface ContainerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {
+  asChild?: boolean
+}
+
+const Container: React.FC<ContainerProps> = ({
+  asChild,
+  className,
+  children,
+  variant,
+  ...props
+}) => {
+  const Comp = asChild ? React.Fragment : 'div'
+  const containerClasses = cn(containerVariants({ variant }), className)
+
+  return (
+    <Comp className={containerClasses} {...props}>
+      {variant === 'narrowConstrainedPadded' ? (
+        <div className="mx-auto max-w-3xl">{children}</div>
+      ) : (
+        children
+      )}
+    </Comp>
+  )
+}
+
+export { Container, containerVariants }

packages/ui/src/index.ts

@@ -4,5 +4,7 @@ export * from './avatar';
 export * from './button';
 export * from './card';
 export * from './button-nav-item';
+export * from './container';
+export * from './badge';
 
 export * from './organisms/editor';