@boarteam/boar-pack-common-frontend 2.5.1-alpha.1 → 2.6.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.5.1-alpha.1",
+  "version": "2.6.0-alpha.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -46,5 +46,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "38350d83b4625b1c128b1d99643af23e9b3a3f62"
+  "gitHead": "38ccd74e5ec92322ac4efaf3482b131d51fca296"
 }

package/src/components/Comment/Comment.tsx

@@ -0,0 +1,53 @@
+import dayjs from "dayjs";
+import { createStyles } from "antd-style";
+import CommentAvatar from "./CommentAvatar";
+
+export interface AuthorProps {
+  id: string;
+  name: string;
+}
+
+interface CommentProps {
+  key: string;
+  content: string;
+  author: AuthorProps;
+  date: string;
+}
+
+const useStyles = createStyles(() => {
+  return {
+    /**
+     * Styles for the ant-descriptions component to show edit icon on hover
+     */
+    commentStyles: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      gap: '10px'
+    }
+  }
+})
+
+const Comment: React.FC<CommentProps> = ({
+  content,
+  author,
+  date,
+  ...rest
+}) => {
+  const { styles } = useStyles();
+
+  return (
+    <div
+      className={styles.commentStyles}
+      {...rest}
+    >
+      <CommentAvatar author={author} />
+      <div>
+        <strong>{author.name}</strong>
+        <p>{content}</p>
+        <small style={{ color: '#888' }}>{dayjs(date).format('DD.MM.YYYY HH:mm')}</small>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

package/src/components/Comment/CommentAvatar.tsx

@@ -0,0 +1,34 @@
+import { Avatar } from "antd";
+import { AuthorProps } from "./Comment";
+import React from "react";
+
+interface CommentProps {
+  author: AuthorProps;
+}
+
+const ColorList = [
+  '#f56a00',
+  '#7265e6',
+  '#ffbf00',
+  '#00a2ae',
+  '#b45d7e',
+  '#ace665',
+  '#6e3aaf',
+  '#54ae00'
+];
+
+const getColorByAuthor = (authorId: string) => {
+  return ColorList[parseInt(authorId, 36) % ColorList.length]
+}
+
+const CommentAvatar: React.FC<CommentProps> = ({
+  author,
+}) => {
+  return (
+    <Avatar style={{ backgroundColor: getColorByAuthor(author.id), verticalAlign: 'middle', flexShrink: 0 }} size="large">
+      {author.name.slice(0, 1)}
+    </Avatar>
+  );
+};
+
+export default CommentAvatar;

package/src/components/Comment/CommentForm.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Form, Input, Button } from 'antd';
+
+interface CommentFormProps {
+  onSubmit: (content: string) => void;
+}
+
+const CommentForm: React.FC<CommentFormProps> = ({ onSubmit }) => {
+  const [content, setContent] = useState('');
+
+  const handleSubmit = () => {
+    if (content.trim()) {
+      onSubmit(content);
+      setContent('');
+    }
+  };
+
+  return (
+    <Form layout="vertical" onFinish={handleSubmit}>
+      <div>
+        <Form.Item label="Leave a comment:">
+          <Input.TextArea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            autoSize={{ minRows: 3, maxRows: 6 }}
+          />
+        </Form.Item>
+      </div>
+      <Button type="primary" htmlType="submit" style={{ width: 100 }}>
+        Send
+      </Button>
+    </Form>
+  );
+};
+
+export default CommentForm;

package/src/components/Comment/CommentFormModal.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Modal } from 'antd';
+import CommentForm from "./CommentForm";
+
+interface CommentFormProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  onSubmit: (content: string) => void;
+  children?: React.ReactNode;
+  title?: string;
+}
+
+const CommentFormModal: React.FC<CommentFormProps> = ({ setIsOpen, isOpen, onSubmit, children, title = 'Add comment' }) => {
+  return (
+    <Modal
+      title={title}
+      open={isOpen}
+      width={800}
+      closeIcon={true}
+      footer={null}
+      onCancel={() => {
+        setIsOpen(false);
+      }}
+    >
+      {children}
+      <CommentForm onSubmit={onSubmit} />
+    </Modal>
+  );
+};
+
+export default CommentFormModal;

package/src/components/Comment/index.ts

@@ -0,0 +1,5 @@
+export * from './Comment';
+export * from './CommentAvatar';
+export * from './CommentForm';
+export * from './CommentFormModal';
+export { default as Comment } from './Comment';

package/src/components/Table/useCreation.tsx

@@ -33,7 +33,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
 }: {
   actionRef?: MutableRefObject<ActionType | undefined>;
   pathParams: TPathParams;
-  entityToCreateDto: (entity: Partial<Entity>) => CreateDto;
+  entityToCreateDto: (entity: Entity) => CreateDto;
   onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
   createButtonSize: SizeType;
   popupCreation?: boolean;
@@ -41,7 +41,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
 } & Omit<CreateEntityModalProps<Entity>, 'onSubmit' | 'onCancel' | 'entity'>) {
   const [createPopupData, setCreatePopupData] = useState<Partial<Entity> | undefined>();
 
-  const onCreateSubmit = async (data: Partial<Entity>) => {
+  const onCreateSubmit = async (data: Entity) => {
     try {
       await onCreate?.({
         ...pathParams,