perf(frontend): Add missing forwardRef and write some docs for components

docs/pages/frontend/components/_meta.json

@@ -1,15 +1,13 @@
 {
   "shadcn": "Shadcn UI",
-  "avatar": "Avatar",
+  "user": "User",
+  "group": "Group",
   "data-table": "Data Table",
   "dialog": "Dialog",
   "tabs": "Tabs",
   "loaders": "Loaders",
   "date": "Date Format",
   "editor": "Editor",
-  "user-link": "User Link",
-  "user-input": "User Input",
-  "user-group": "User Group",
   "icons": "Icons",
   "colors": "Colors"
 }

docs/pages/frontend/components/colors.mdx

@@ -31,7 +31,9 @@ return (
 );
 ```
 
-### Props
+## Props
 
-- `disabled` - _(Boolen)_ - If `true`, the input will be disabled,
-- `disableRemoveColor` - _(Boolen)_ - If `true`, the remove color button will be disabled
+| Name                 | Type   | Default | Description                                         |
+| -------------------- | ------ | ------- | --------------------------------------------------- |
+| `disabled`           | `bool` | `false` | If `true`, the input will be disabled               |
+| `disableRemoveColor` | `bool` | `false` | If `true`, the remove color button will be disabled |

docs/pages/frontend/components/date.mdx

@@ -5,7 +5,13 @@ We're creating `DateFormat` component to help you formating date using [date-fns
 ## Usage
 
 ```tsx
-import { DateFormat } from '@/components/date-format/date-format';
+import { DateFormat } from "@/components/date-format";
 
 <DateFormat date={data.joined} />;
 ```
+
+## Props
+
+| Name              | Type | Default | Description    |
+| ----------------- | ---- | ------- | -------------- |
+| date _(Required)_ | Date | -       | Date to format |

docs/pages/frontend/components/group/_meta.json

@@ -0,0 +1,3 @@
+{
+  "format": "Format Name"
+}

docs/pages/frontend/components/group/format.mdx

@@ -0,0 +1,19 @@
+import { Callout } from "nextra/components";
+
+# Group Format
+
+Allows you to display single name group with formatted text.
+
+## Example
+
+```tsx
+import { GroupFormat } from "@/components/groups/group-format";
+
+return <GroupFormat group={user.group} />;
+```
+
+## Props
+
+| Name                 | Type                      | Default | Description                  |
+| -------------------- | ------------------------- | ------- | ---------------------------- |
+| `group` _(Required)_ | `{name: TextLanguage[];}` |         | The group object to display. |

docs/pages/frontend/components/loaders.mdx

@@ -1,4 +1,4 @@
-import { Callout } from 'nextra/components';
+import { Callout } from "nextra/components";
 
 # Loaders
 
@@ -9,7 +9,7 @@ VitNode provides a few loaders to help you load any data to the frontend.
 This loader looks like a spinner and it's used to show that something is loading.
 
 ```tsx
-import { Loader } from '@/components/loader/loader';
+import { Loader } from "@/components/loader";
 
 export const TestComponent = () => {
   if (isLoading) return <Loader />;
@@ -21,8 +21,8 @@ export const TestComponent = () => {
 This component accepts also a smaller version by passing the `small` prop.
 
 <Callout type="info" emoji="ℹ️">
-  You can use `<Loader />` component to show a loader in the middle of the page when you're loading
-  data.
+  You can use `<Loader />` component to show a loader in the middle of the page
+  when you're loading data.
 </Callout>
 
 ## Build-in Loaders
@@ -32,12 +32,12 @@ We're modifying few components to help you load data to the frontend. You can us
 ### Button
 
 ```tsx
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 
 export const TestComponent = () => {
   return (
     <Button type="submit" loading={isPending}>
-      {t('save')}
+      {t("save")}
     </Button>
   );
 };
@@ -46,9 +46,11 @@ export const TestComponent = () => {
 ### DropdownMenuItem
 
 ```tsx
-import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 
 export const TestComponent = () => {
-  return <DropdownMenuItem loading={isPending}>{t('testing')}</DropdownMenuItem>;
+  return (
+    <DropdownMenuItem loading={isPending}>{t("testing")}</DropdownMenuItem>
+  );
 };
 ```

docs/pages/frontend/components/shadcn.mdx

@@ -40,14 +40,14 @@ VitNode uses [Shadcn UI](https://ui.shadcn.com/) as the default UI framework.
 - [Data Table](/frontend/components/data-table)
 - [Dialog](/frontend/components/dialog)
 - [Tabs](/frontend/components/tabs)
+- [Collapse](https://ui.shadcn.com/docs/components/collapse)
 
 ## Not Supported Components
 
 List of components that are not supported _(yet)_ by VitNode:
 
 - [Calendar](https://ui.shadcn.com/docs/components/calendar)
 - [Carousel](https://ui.shadcn.com/docs/components/carousel)
-- [Collapse](https://ui.shadcn.com/docs/components/collapse)
 - [Context Menu](https://ui.shadcn.com/docs/components/context-menu)
 - [Date Picker](https://ui.shadcn.com/docs/components/date-picker)
 - [Menubar](https://ui.shadcn.com/docs/components/menubar)

docs/pages/frontend/components/user/_meta.json

@@ -0,0 +1,5 @@
+{
+  "avatar": "Avatar",
+  "link": "Link",
+  "input": "Input"
+}

docs/pages/frontend/components/avatar.mdx → docs/pages/frontend/components/user/avatar.mdx

@@ -1,6 +1,6 @@
-import { Callout } from 'nextra/components';
+import { Callout } from "nextra/components";
 
-# Avatar User
+# Avatar
 
 To use the Avatar component you have to import from `@/components/user/avatar/avatar-user`.
 Component requires `sizeInRem` prop to be passed.
@@ -11,15 +11,10 @@ Component requires `sizeInRem` prop to be passed.
 
 ## Current User
 
-If you want to display the user avatar, you need to pass a user object with:
-
-- `id` - user's id
-- `name` - user's name
-- `avatar` - user's `UploadCoreAttachmentsObj` interface,
-- `avatar_color` - user's avatar color
+If you want to display the user avatar, you need to pass `User` object.
 
 ```tsx
-import { AvatarUser } from '@/components/user/avatar/avatar-user';
+import { AvatarUser } from "@/components/user/avatar/avatar-user";
 
 <AvatarUser
   user={{
@@ -37,11 +32,18 @@ import { AvatarUser } from '@/components/user/avatar/avatar-user';
 If you want to display the user avatar, you need to pass a user object form `useSession` or `useSessionAdmin` _(if you want to use in AdminCP)_ hook.
 
 ```tsx
-import { AvatarUser } from '@/components/user/avatar/avatar-user';
-import { useSession } from '@/hooks/core/use-session';
+import { AvatarUser } from "@/components/user/avatar/avatar-user";
+import { useSession } from "@/hooks/core/use-session";
 
 const { session } = useSession();
 if (!session) return null;
 
 return <AvatarUser user={session} sizeInRem={1.75} />;
 ```
+
+## Props
+
+| Name                     | Type     | Default | Description        |
+| ------------------------ | -------- | ------- | ------------------ |
+| `user` _(Required)_      | `User`   |         | User object        |
+| `sizeInRem` _(Required)_ | `number` | `1.75`  | Size of the avatar |

docs/pages/frontend/components/user/input.mdx

@@ -0,0 +1,32 @@
+import { Callout } from "nextra/components";
+
+# User Input
+
+Allows you to select a user (or users) from a list of users in the system.
+
+## Example
+
+```tsx {1, 10}
+import { UserInput } from "@/components/user/inputs/user-input";
+
+return (
+  <FormField
+    control={form.control}
+    name="user"
+    render={({ field }) => (
+      <FormItem>
+        <FormLabel>{t("create_edit.type.user")}</FormLabel>
+        <UserInput {...field} />
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+);
+```
+
+## Props
+
+| Name                 | Type                          | Default | Description                          |
+| -------------------- | ----------------------------- | ------- | ------------------------------------ |
+| `value` _(Required)_ | `{id: number; name: string;}` |         | The value of the user input.         |
+| `multiple`           | `boolean`                     | `false` | Allow multiple users to be selected. |

docs/pages/frontend/components/user/link.mdx

@@ -0,0 +1,17 @@
+# User Link
+
+Allows to link to a user profile with formatting based on the user's group.
+
+## Example
+
+```tsx
+import { UserLink } from "@/components/user/link/user-link";
+
+return <UserLink user={data.user_or_group} />;
+```
+
+## Props
+
+| Name                | Type   | Default | Description |
+| ------------------- | ------ | ------- | ----------- |
+| `user` _(Required)_ | `User` | -       | User object |

frontend/admin/core/views/core/langs/actions/create.tsx

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 

frontend/admin/core/views/core/langs/table/actions/delete/delete.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog";
 import type { ShowCoreLanguages } from "@/graphql/hooks";
 

frontend/admin/core/views/core/langs/table/actions/download/content.tsx

@@ -32,7 +32,7 @@ import {
   CommandInput,
   CommandItem
 } from "@/components/ui/command";
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import corePackages from "@/package.json";
 import type { ShowCoreLanguages } from "@/graphql/hooks";
 

frontend/admin/core/views/core/langs/table/actions/download/download.tsx

@@ -2,7 +2,7 @@ import { Download } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import type { ShowCoreLanguages } from "@/graphql/hooks";

frontend/admin/core/views/core/langs/table/actions/edit.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import type { ShowCoreLanguages } from "@/graphql/hooks";
 
 const Content = lazy(() =>

frontend/admin/core/views/core/langs/table/actions/update/update.tsx

@@ -1,6 +1,6 @@
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import type { ShowCoreLanguages } from "@/graphql/hooks";
 

frontend/admin/core/views/core/langs/table/table.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import type { LangsCoreAdminViewProps } from "../langs-core-admin-view";
 
 const Content = lazy(() =>

frontend/admin/core/views/core/plugins/actions/create/create.tsx

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 

frontend/admin/core/views/core/plugins/actions/upload/upload.tsx

@@ -4,7 +4,7 @@ import { Upload } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 

frontend/admin/core/views/core/plugins/table/actions/delete/delete.tsx

@@ -2,7 +2,7 @@ import { Trash2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import {
   AlertDialog,
   AlertDialogContent,

frontend/admin/core/views/core/plugins/table/content.tsx

@@ -9,7 +9,7 @@ import type {
 } from "@/graphql/hooks";
 import { Badge } from "@/components/ui/badge";
 import { HeaderSortingDataTable } from "@/components/data-table/header";
-import { DateFormat } from "@/components/date-format/date-format";
+import { DateFormat } from "@/components/date-format";
 import { DataTable } from "@/components/data-table/data-table";
 import { Switch } from "@/components/ui/switch";
 import { ActionsItemPluginsAdmin } from "./actions/actions";

frontend/admin/core/views/core/plugins/table/table.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import type { Admin__Core_Plugins__ShowQuery } from "@/graphql/hooks";
 
 const ContentTablePluginsAdmin = lazy(() =>

frontend/admin/core/views/core/styles/nav/actions/create.tsx

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 

frontend/admin/core/views/core/styles/nav/table/actions/delete/delete.tsx

@@ -2,7 +2,7 @@ import { Trash2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Suspense, lazy } from "react";
 
-import { Loader } from "@/components/loader/loader";
+import { Loader } from "@/components/loader";
 import {
   AlertDialog,
   AlertDialogContent,