chore(): set up components.json on world builder

extensions/apps/world-builder/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "main.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/library",
+    "utils": "@/ui/library/utils",
+    "ui": "@/ui"
+  }
+}

extensions/apps/world-builder/main.css

@@ -0,0 +1,8 @@
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

extensions/apps/world-builder/src/index.tsx

@@ -9,6 +9,7 @@ import {
 import React from 'react';
 import routes from './routes';
 import { Earth } from 'lucide-react';
+import '../main.css';
 
 export const register = (opts: IntegrationRegistrationOptions): IAppConfig => ({
   mountsIn: opts.layoutSlots?.applicationSlotId,

extensions/apps/world-builder/src/ui/circular-progress.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+
+import { cn } from '@/ui/library/utils';
+import { typographyVariants } from '@akashaorg/ui/lib/akasha-components/typography';
+
+const MAX = 100;
+
+const CIRCLE_SIZE = 24;
+
+const SIZE = CIRCLE_SIZE + 10;
+
+const RADIUS = SIZE / 2 - 5;
+
+const CircularProgress = ({
+  value = 0,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { value?: number }) => {
+  const percentage = Math.min(Math.max(value, 0), MAX);
+  const circumference = 2 * Math.PI * RADIUS;
+  const offset = circumference - (percentage / MAX) * circumference;
+
+  const getColor = React.useCallback(() => {
+    if (value < 100) return 'stroke-primary';
+    if (value === 100) return 'stroke-warning';
+    return 'stroke-destructive';
+  }, [value]);
+
+  const label = React.useMemo(() => {
+    if (value === 100) return 1;
+    if (value > 100) return -1;
+    return '';
+  }, [value]);
+
+  return (
+    <div
+      data-slot="circular-progress"
+      className={cn('relative flex items-center justify-center', className)}
+      {...props}
+    >
+      <svg
+        width={SIZE}
+        height={SIZE}
+        viewBox={`0 0 ${SIZE} ${SIZE}`}
+        className={cn('rotate-[0deg]')}
+      >
+        <circle
+          cx={SIZE / 2}
+          cy={SIZE / 2}
+          r={RADIUS}
+          strokeWidth="2"
+          className={cn('stroke-muted fill-none')}
+        />
+        <circle
+          cx={SIZE / 2}
+          cy={SIZE / 2}
+          r={RADIUS}
+          stroke="currentColor"
+          strokeWidth="2"
+          className={cn('fill-none transition-all', getColor())}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+        />
+      </svg>
+      {label && (
+        <p className={cn('absolute text-foreground', typographyVariants({ variant: 'xs' }))}>
+          {label}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export { CircularProgress };

extensions/apps/world-builder/src/ui/library/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

extensions/apps/world-builder/src/ui/profile-avatar-button.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/ui/library/utils';
+import { IconContainer } from '@akashaorg/ui/lib/akasha-components/icon-container';
+import {
+  ProfileAvatarFallback,
+  ProfileAvatarImage,
+  ProfileAvatar as ProfileAvatarRoot,
+} from '@/ui/profile-avatar';
+import { Stack } from '@akashaorg/ui/lib/akasha-components/stack';
+import { Typography } from '@akashaorg/ui/lib/akasha-components/typography';
+import { DidKey } from '@akashaorg/ui/lib/custom-icons/did-key';
+import { Ethereum } from '@akashaorg/ui/lib/custom-icons/ethereum';
+import { NoEth } from '@akashaorg/ui/lib/custom-icons/no-eth';
+import { Solana } from '@akashaorg/ui/lib/custom-icons/solana';
+
+type ProfileAvatarButtonSize = 'sm' | 'lg' | 'md';
+
+const ProfileAvatarButtonContext = React.createContext<{
+  size: ProfileAvatarButtonSize;
+  nsfw: boolean;
+  nsfwLabel?: string;
+  metadata?: React.ReactNode;
+  vertical: boolean;
+} | null>(null);
+
+const useProfileAvatarButtonContext = () => {
+  const context = React.useContext(ProfileAvatarButtonContext);
+  if (!context) {
+    throw new Error('`useProfileAvatarButtonContext` must be used within `ProfileAvatarButton`');
+  }
+  return context;
+};
+
+const truncateMiddle = (str: string, startChars = 6, endChars = 4) =>
+  str ? `${str.substring(0, startChars)}...${str.substring(str.length - endChars)}` : '';
+
+const truncateDid = (didKey: string, type = 'eth') => {
+  if (!didKey) return '';
+  if (didKey.length <= 12) return didKey;
+  const address = didKey.split(':').pop() || '';
+  return truncateMiddle(address, type === 'eth' || type === 'solana' ? 6 : 5, 6);
+};
+
+const getDidFieldIconType = (didKey: string) => {
+  if (!didKey) return 'noDid';
+  // eslint-disable-next-line unicorn/no-nested-ternary
+  return didKey.includes('eip155') ? 'ethereum' : didKey.includes('solana') ? 'solana' : 'did';
+};
+
+const ProfileAvatarButton = ({
+  nsfw = false,
+  nsfwLabel,
+  metadata,
+  children,
+  size = 'md',
+  vertical = false,
+  className,
+  ...props
+}: { nsfw?: boolean; nsfwLabel?: string; metadata?: React.ReactNode } & (
+  | { size?: Exclude<ProfileAvatarButtonSize, 'lg'>; vertical?: false }
+  | {
+      size?: 'lg';
+      vertical?: true;
+    }
+) &
+  React.ComponentProps<'div'>) => {
+  return (
+    <ProfileAvatarButtonContext.Provider value={{ size, nsfw, nsfwLabel, metadata, vertical }}>
+      <div
+        data-slot="profile-avatar-button"
+        className={cn(
+          {
+            'grid grid-cols-[0.5fr_1fr] grid-rows-2': size === 'lg' && !vertical,
+            'grid grid-cols-[0fr_1fr] grid-rows-2': size === 'md',
+            'flex items-center flex-col': size === 'lg' && vertical,
+            'flex items-center': size === 'sm',
+          },
+          'gap-1',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </ProfileAvatarButtonContext.Provider>
+  );
+};
+
+const sizeMap = { lg: 'xl', md: 'lg', sm: 'xs' } as const;
+
+const ProfileAvatar = ({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof ProfileAvatarRoot>, 'size'>) => {
+  const { size, nsfw, vertical } = useProfileAvatarButtonContext();
+  return (
+    <ProfileAvatarRoot
+      data-slot="profile-avatar"
+      size={sizeMap[size]}
+      nsfw={nsfw}
+      className={cn(
+        {
+          'self-center row-span-2': size === 'md' || (size === 'lg' && !vertical),
+        },
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+const ProfileName = ({ className, children, ...props }: React.ComponentProps<'div'>) => {
+  const { size, vertical, nsfw, nsfwLabel, metadata } = useProfileAvatarButtonContext();
+  return (
+    size && (
+      <Stack
+        data-slot="profile-name"
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        className={cn({
+          'self-end': size === 'lg' && !vertical,
+          'justify-self-start': size === 'md' || (size === 'lg' && !vertical),
+        })}
+        {...props}
+      >
+        <Typography
+          variant={size === 'sm' ? 'xs' : 'sm'}
+          bold={size !== 'sm'}
+          className={className}
+        >
+          {children}
+        </Typography>
+        {nsfw && size !== 'sm' && (
+          <Typography data-slot="nsfw-label" variant="xs" bold={true} className="text-destructive">
+            {nsfwLabel}
+          </Typography>
+        )}
+        {metadata}
+      </Stack>
+    )
+  );
+};
+
+const didNetworkIconMapping = {
+  ethereum: <Ethereum />,
+  solana: <Solana />,
+  did: <DidKey />,
+  noDid: <NoEth />,
+};
+
+const ProfileDidField = ({
+  did,
+  isValid = true,
+  className,
+}: React.ComponentProps<'div'> & {
+  did: string;
+  isValid?: boolean;
+  className?: string;
+}) => {
+  const { size, vertical } = useProfileAvatarButtonContext();
+  const networkType = getDidFieldIconType(did);
+  return (
+    <Stack
+      data-slot="profile-did-field"
+      direction="row"
+      spacing={1.5}
+      alignItems="center"
+      className={cn(
+        'h-4',
+        {
+          'col-start-2': size === 'md' || (size === 'lg' && !vertical),
+        },
+        className,
+      )}
+    >
+      <IconContainer size="xs" className="text-secondary-foreground">
+        {isValid ? didNetworkIconMapping[networkType] : <NoEth />}
+      </IconContainer>
+      <Typography variant="xs" className="text-secondary-foreground">
+        {truncateDid(did, networkType)}
+      </Typography>
+    </Stack>
+  );
+};
+
+export {
+  ProfileAvatarButton,
+  ProfileAvatar,
+  ProfileAvatarFallback,
+  ProfileAvatarImage,
+  ProfileName,
+  ProfileDidField,
+};