31630760: Add Community Modal

apps/xi.front/package.json

@@ -32,6 +32,7 @@
     "pkg.form.signup": "*",
     "pkg.logo": "*",
     "pkg.models": "*",
+    "pkg.module.add-community": "*",
     "pkg.module.announces": "*",
     "pkg.module.editor": "*",
     "pkg.module.videoconference": "*",

packages/pkg.module.add-community/AddCommunityModal.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Button } from '@xipkg/button';
+import { Close } from '@xipkg/icons';
+import * as M from '@xipkg/modal';
+import { useState, ReactNode } from 'react';
+import FormCreate from './components/FormCreateStage';
+import FormJoin from './components/FormJoinStage';
+
+type AddCommunityModalT = {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  children: ReactNode;
+};
+
+export const AddCommunityModal = ({ open, onOpenChange, children }: AddCommunityModalT) => {
+  const [stage, setStage] = useState<'create' | 'join'>('create');
+
+  const renderForm = () =>
+    stage === 'create' ? (
+      <>
+        <M.ModalHeader>
+          <M.ModalTitle>Создание сообщества</M.ModalTitle>
+        </M.ModalHeader>
+        <FormCreate />
+        <div className="bg-gray-5 flex flex-col items-center p-8">
+          <p className="text-xl font-semibold">У вас есть приглашение?</p>
+          <Button className="ml-0 mt-4 w-full" variant="secondary" onClick={() => setStage('join')}>
+            Присоединиться к сообществу
+          </Button>
+        </div>
+      </>
+    ) : (
+      <>
+        <M.ModalHeader>
+          <M.ModalTitle className="max-w-60 min-[450px]:max-w-full">
+            Присоединение к сообществу
+          </M.ModalTitle>
+        </M.ModalHeader>
+        <FormJoin setStage={setStage} onOpenChange={onOpenChange} />
+      </>
+    );
+
+  return (
+    <M.Modal open={open} onOpenChange={onOpenChange}>
+      <M.ModalTrigger asChild>{children}</M.ModalTrigger>
+      <M.ModalContent>
+        <M.ModalCloseButton>
+          <Close className="fill-gray-80 sm:fill-gray-0" />
+        </M.ModalCloseButton>
+        {renderForm()}
+      </M.ModalContent>
+    </M.Modal>
+  );
+};

packages/pkg.module.add-community/components/FormCreateStage.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useForm,
+} from '@xipkg/form';
+import { Input } from '@xipkg/input';
+import { Button } from '@xipkg/button';
+
+// type FormCreateProps = {
+//   onOpenChange: (value: boolean) => void;
+// };
+
+const FormCreateBlock = () => {
+  const form = useForm({
+    defaultValues: {
+      name: '',
+    },
+  });
+  const { control } = form;
+
+  return (
+    <Form {...form}>
+      <form className="space-y-4 p-6 pt-5">
+        <FormField
+          control={control}
+          name="name"
+          render={({ field, fieldState: { error } }) => (
+            <FormItem>
+              <FormLabel>Название</FormLabel>
+              <FormControl className="mt-2">
+                <Input {...field} error={!!error} autoComplete="off" type="text" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button className="mt-6 w-full" type="submit">
+          Создать
+        </Button>
+      </form>
+    </Form>
+  );
+};
+
+export default FormCreateBlock;

packages/pkg.module.add-community/components/FormJoinStage.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useForm,
+} from '@xipkg/form';
+import { Input } from '@xipkg/input';
+import { Button } from '@xipkg/button';
+import * as z from 'zod';
+
+const schema = z.object({
+  link: z.string().url({ message: 'Неправильный формат ссылки' }),
+});
+
+type FormJoinProps = {
+  setStage: (stage: 'create' | 'join') => void;
+  onOpenChange?: (value: boolean) => void;
+};
+
+const FormJoinBlock = ({ setStage }: FormJoinProps) => {
+  const form = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      link: '',
+    },
+  });
+  const { control } = form;
+
+  return (
+    <Form {...form}>
+      <form className="space-y-4 p-6 pt-5">
+        <FormField
+          control={control}
+          name="link"
+          render={({ field, fieldState: { error } }) => (
+            <FormItem>
+              <FormLabel>Ссылка-приглашение</FormLabel>
+              <FormControl className="mt-2">
+                <Input
+                  {...field}
+                  error={!!error}
+                  autoComplete="off"
+                  type="text"
+                  placeholder="https://xieffect.ru/invite/"
+                  className="mb-6"
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="border-gray-20 flex flex-col justify-end gap-4 border-t-[1px] pt-6 min-[700px]:flex-row">
+          <Button onClick={() => setStage('create')} variant="secondary">
+            Отменить
+          </Button>
+          <Button type="submit" className="order-first min-[700px]:order-last">
+            Присоединиться
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+
+export default FormJoinBlock;

packages/pkg.module.add-community/index.tsx

@@ -0,0 +1 @@
+export { AddCommunityModal } from './AddCommunityModal';

packages/pkg.module.add-community/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pkg.module.add-community",
+  "version": "0.0.0",
+  "main": "./index.tsx",
+  "types": "./index.tsx",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@hookform/resolvers": "3.3.4",
+    "@xipkg/button": "^1.1.3",
+    "@xipkg/form": "^2.0.0",
+    "@xipkg/icons": "^0.9.3",
+    "@xipkg/input": "^0.1.1",
+    "@xipkg/modal": "^1.5.0",
+    "@xipkg/utils": "1.0.1",
+    "next": "^13.5.6",
+    "react": "^18.2.0",
+    "zod": "3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@xipkg/eslint": "1.4.0",
+    "@xipkg/tailwind": "0.3.6",
+    "@xipkg/typescript": "latest",
+    "eslint-config-custom": "*",
+    "typescript": "^5.4.2"
+  },
+  "description": "",
+  "author": "xi.effect"
+}

packages/pkg.module.add-community/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@xipkg/typescript/react-library.json",
+  "include": ["*"],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/pkg.navigation/components/CommunityMenu.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 
-'use client';
+import { AddCommunityModal } from 'pkg.module.add-community';
 
 import {
   CategoryAdd,
@@ -125,6 +127,7 @@ const CommunityLink = ({
 export const CommunityMenu = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [isOpenCommunitySettings, setIsOpenCommunitySettings] = React.useState(false);
+  const [isAddCommunityModalOpen, setIsAddCommunityModalOpen] = React.useState(false);
 
   // Берем [cid] из URL
   const params = useParams();
@@ -299,10 +302,22 @@ export const CommunityMenu = () => {
                 </div>
               )}
               <DropdownMenuSeparator />
-              <DropdownMenuItem className="group text-gray-50 sm:w-[302px]">
-                <span>Присоединиться к сообществу</span>
-                <Plus size="s" className="ml-auto h-4 w-4 fill-gray-50 group-hover:fill-gray-100" />
-              </DropdownMenuItem>
+              <AddCommunityModal
+                open={isAddCommunityModalOpen}
+                onOpenChange={setIsAddCommunityModalOpen}
+              >
+                <DropdownMenuItem
+                  className="group text-gray-50 sm:w-[302px]"
+                  onClick={() => setIsAddCommunityModalOpen(true)}
+                >
+                  <span>Присоединиться к сообществу</span>
+
+                  <Plus
+                    size="s"
+                    className="ml-auto h-4 w-4 fill-gray-50 group-hover:fill-gray-100"
+                  />
+                </DropdownMenuItem>
+              </AddCommunityModal>
             </DropdownMenuContent>
           </>
         )}