@gisce/react-ooui 1.4.13 → 1.4.14

package/dist/widgets/WidgetFactory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA6H1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"WidgetFactory.d.ts","sourceRoot":"","sources":["WidgetFactory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgI1B,QAAA,MAAM,iBAAiB,UAAW,GAAG,+DAWpC,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/widgets/custom/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAC,MAAM,aAAa,CAAC;AAGlD,aAAK,WAAW,GAAG,WAAW,GAAG;IAC/B,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,MAAM,YAAY,GAAG,IAmBzD,CAAA;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEpC,OAAO,EAAE,MAAM,IAAI,UAAU,EAAC,MAAM,aAAa,CAAC;AAGlD,aAAK,WAAW,GAAG,WAAW,GAAG;IAC/B,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAC;AAEF,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,MAAM,YAAY,GAAG,IAkBzD,CAAA;AAED,eAAe,MAAM,CAAC"}

package/dist/widgets/custom/Comments.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { WidgetProps } from '../../types';
+declare type CommentDataType = {
+    id: number;
+    isSender: boolean;
+    isAuthor: boolean;
+    text: string;
+    email: string;
+    date: string;
+    author: string;
+};
+declare type CommentProps = {
+    data: CommentDataType;
+    style?: any;
+};
+declare type CommentsTypeProps = {
+    data: CommentDataType[];
+};
+declare type CommentsTimelineProps = {
+    value?: EventsType[];
+};
+declare type EventActionType = {
+    date: string;
+    action: string;
+};
+export declare type EventsType = {
+    type: "action" | "comment";
+    event: EventActionType | CommentDataType;
+};
+export declare const Comment: (props: CommentProps) => React.JSX.Element;
+export declare const Comments: (props: CommentsTypeProps) => React.JSX.Element;
+export declare const CommentsTimeline: (props: CommentsTimelineProps) => React.JSX.Element;
+export declare const CommentsTimelineField: (props: WidgetProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=Comments.d.ts.map

package/dist/widgets/custom/Comments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comments.d.ts","sourceRoot":"","sources":["Comments.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAoBtC,aAAK,eAAe,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAA;AAED,aAAK,YAAY,GAAG;IAClB,IAAI,EAAE,eAAe,CAAC;IACtB,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,CAAA;AAED,aAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAA;AAED,aAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;CACtB,CAAA;AAGD,aAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAA;AAED,oBAAY,UAAU,GAAG;IACvB,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,eAAe,GAAG,eAAe,CAAA;CAEzC,CAAA;AA2BD,eAAO,MAAM,OAAO,UAAW,YAAY,sBAkB1C,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,iBAAiB,sBAahD,CAAA;AAGD,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,sBAiB5D,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,WAAW,sBAMvD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.4.13",
+  "version": "1.4.14",
   "files": [
     "dist",
     "src",
@@ -42,6 +42,7 @@
     "buffer": "^6.0.3",
     "file-type-buffer-browser": "git+ssh://git@github.com/mguellsegarra/file-type-buffer-browser.git",
     "interweave": "^13.0.0",
+    "md5": "^2.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-grid-layout": "^1.3.4",
@@ -65,6 +66,7 @@
     "@tailwindcss/postcss7-compat": "^2.0.2",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.170",
+    "@types/md5": "^2.3.2",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",

package/src/index.ts

@@ -45,6 +45,7 @@ import { Radio } from "@/widgets/custom/Radio";
 import { Switch } from "@/widgets/custom/Switch";
 import { Steps } from "@/widgets/custom/Steps";
 import { CodeEditor } from "@/widgets/custom/CodeEditor";
+import { CommentsTimelineField } from "@/widgets/custom/Comments";
 import {
   DashboardGridItem,
   DashboardGrid,
@@ -157,6 +158,7 @@ export {
   Switch,
   Steps,
   CodeEditor,
+  CommentsTimelineField,
   ExportModal,
   ConfigContext,
 };

package/src/locales/ca_ES.tsx

@@ -90,4 +90,5 @@ export default {
   advancedExport: "Exportació avançada",
   savedRegisters: "Registre guardat correctament",
   errorWhileSavingForm: "Error en guardar el formulari",
+  autor: "Autor",
 };

package/src/locales/en_US.tsx

@@ -87,4 +87,5 @@ export default {
   advancedExport: "Advanced export",
   savedRegisters: "Record successfully saved",
   errorWhileSavingForm: "Error while saving form",
+  author: "Author",
 };

package/src/locales/es_ES.tsx

@@ -91,4 +91,5 @@ export default {
   advancedExport: "Exportación avanzada",
   savedRegisters: "Registro guardado correctamente",
   errorWhileSavingForm: "Error al guardar el formulario",
+  author: "Autor",
 };

package/src/stories/custom/Comments.stories.tsx

@@ -0,0 +1,190 @@
+// @ts-ignore
+import React from "react";
+import LocaleProvider from "../../context/LocaleContext";
+import { Comments, CommentsTimeline, EventsType } from "../../widgets/custom/Comments";
+
+
+export default {
+  title: "Components/Widgets/Custom/Comments",
+};
+
+export const Default = (): React.ReactElement => {
+
+  const data = [
+    {
+      id: 1,
+      text: "Totam odit eum distinctio tempore. Numquam illo dolorum laboriosam vel illum. Sunt saepe ab nihil soluta placeat ullam.\n" +
+        "Eius ea enim ut. Unde consequatur ducimus esse ullam. Odio fugit reprehenderit sunt.\n" +
+        "Recusandae a aliquid. Iusto quisquam temporibus a assumenda aut fuga. Tenetur cum quis saepe et alias delectus quos.\n" +
+        "Corporis adipisci eaque quod. Aperiam voluptatum doloribus accusamus suscipit.\n" +
+        "Iste corporis non quisquam adipisci fuga. Aperiam possimus est ratione modi dicta. Cum consequatur eius harum ea eius omnis.\n" +
+        "Eveniet sit iste sed commodi cumque. Quis ipsam maxime quam eveniet.\n" +
+        "Repellat officia praesentium adipisci aspernatur impedit. Voluptas architecto autem vero et praesentium dignissimos.\n" +
+        "Nisi ex sapiente incidunt eveniet mollitia. Iure libero natus perferendis voluptate iure fuga.\n" +
+        "Vel voluptate cumque laudantium. Reiciendis sapiente eaque neque exercitationem inventore nam.",
+      author: "Ciríaco Pelayo Camps",
+      email: "ciraco@example.com",
+      date: "2023-04-01 10:00:00",
+      isSender: true,
+      isAuthor: false,
+    },
+    {
+      id: 2,
+      text: "Dicta eligendi pariatur ratione ipsam accusantium. Ad minus nesciunt optio id ipsum.\n" +
+        "Incidunt eligendi doloremque molestias. Voluptate sapiente nulla veritatis.\n" +
+        "Nostrum minima ad repudiandae optio laborum.\n" +
+        "Adipisci sint quasi laudantium explicabo ab nostrum. Rerum nemo itaque officia. Velit accusamus itaque accusantium ducimus quidem quae cum.\n" +
+        "Sequi possimus harum maxime. Qui laboriosam voluptate pariatur laudantium nam quo. Vel dolorum magni nam iusto sapiente animi quaerat. Debitis minus temporibus molestias quae accusamus.\n" +
+        "Nobis ab adipisci laborum doloremque impedit quo. Tempore cumque accusamus voluptates. In non facere in.\n" +
+        "Laboriosam exercitationem possimus quo sequi. Aspernatur quia consequuntur aspernatur repudiandae molestiae modi. Vero esse nisi dicta nihil accusantium nesciunt.\n" +
+        "Modi voluptatem excepturi. Architecto sapiente nobis quis ipsam. Doloremque ipsum pariatur dicta at.",
+      author: "Plácido Baeza Vaquero",
+      email: "placido@example.com",
+      date: "2023-04-01 11:00:00",
+      isSender: false,
+      isAuthor: true,
+    },
+    {
+      id: 3,
+      text: "Amet tempora ipsum ipsum delectus.\n" +
+        "Autem minus magnam in eveniet. Veniam voluptas deleniti eaque sequi autem.\n" +
+        "Occaecati laborum ut voluptatum maxime iure cupiditate. Facere vitae aliquid.\n" +
+        "Nemo nihil enim quia exercitationem. Quisquam aut autem magni occaecati velit.\n" +
+        "Perferendis impedit iure nostrum ratione nemo distinctio.\n" +
+        "Facilis deserunt amet officia accusantium qui. Non corporis rerum deleniti harum optio ipsa ducimus. Veniam saepe illo aspernatur id quae omnis.\n" +
+        "Distinctio dolor sequi odio officia amet natus. Quidem quidem quibusdam animi alias quia distinctio.\n" +
+        "Eum placeat expedita possimus eveniet. Fugit earum corrupti itaque. Ab expedita officiis numquam.\n" +
+        "Quos optio iure quos minima deserunt assumenda beatae. Illo quod non aliquid.\n" +
+        "Nobis odio reprehenderit ullam numquam. Beatae molestiae aperiam ratione.\n" +
+        "Quidem perferendis minima animi ipsa natus aliquam. Exercitationem perferendis sequi assumenda. Eaque ducimus saepe deleniti eum iure itaque.",
+      author: "Jorge Acosta Valverde",
+      email: "jorge@example.com",
+      date: "2023-04-01 11:30:00",
+      isSender: false,
+      isAuthor: false,
+    },
+    {
+      id: 4,
+      text: "Esse tempora amet consectetur asperiores dicta. Quidem est harum tempora voluptatum mollitia.\n" +
+        "Voluptate reprehenderit sint vitae laborum animi placeat nihil. Maxime iure porro delectus voluptate. Molestiae dolorem natus alias ipsam consequuntur. Nisi nam exercitationem voluptas saepe occaecati.\n" +
+        "Reprehenderit quam ex est vel.\n" +
+        "Magnam quidem laudantium reprehenderit rerum nam ducimus perspiciatis. Vero omnis sed ducimus quidem dolores dolor illum.\n" +
+        "Corrupti a iste praesentium. Exercitationem cum id neque.\n" +
+        "Optio repellat excepturi sapiente alias iusto quaerat. Explicabo fuga cupiditate atque porro. Qui fuga ea quis porro id.\n" +
+        "Natus optio ab reiciendis quae aperiam tempore. Voluptatem asperiores adipisci ullam nobis. Saepe quas odit rem ad autem cum consequatur.\n" +
+        "Numquam deleniti veniam rem. Enim doloremque consectetur quas reprehenderit. Numquam unde a animi odio sequi.\n" +
+        "Cum at eos fuga.\n" +
+        "Vel exercitationem excepturi placeat. Quisquam neque quasi impedit at.",
+      author: "Ciríaco Pelayo Camps",
+      email: "ciraco@example.com",
+      date: "2023-04-01 13:00:00",
+      isSender: true,
+      isAuthor: false,
+    }
+  ]
+  return (
+    <LocaleProvider lang="es_ES">
+      <Comments data={data} />
+    </LocaleProvider>
+  );
+};
+
+export const Timeline = () => {
+  const data = [
+    {
+      type: "action",
+      event: {
+        date: "2023-04-01 10:00",
+        action: "Draft",
+      }
+    },
+    {
+      type: "comment",
+      event: {
+        id: 1,
+        text: "Totam odit eum distinctio tempore. Numquam illo dolorum laboriosam vel illum. Sunt saepe ab nihil soluta placeat ullam.\n" +
+          "Eius ea enim ut. Unde consequatur ducimus esse ullam. Odio fugit reprehenderit sunt.\n" +
+          "Recusandae a aliquid. Iusto quisquam temporibus a assumenda aut fuga. Tenetur cum quis saepe et alias delectus quos.\n" +
+          "Corporis adipisci eaque quod. Aperiam voluptatum doloribus accusamus suscipit.\n" +
+          "Iste corporis non quisquam adipisci fuga. Aperiam possimus est ratione modi dicta. Cum consequatur eius harum ea eius omnis.\n" +
+          "Eveniet sit iste sed commodi cumque. Quis ipsam maxime quam eveniet.\n" +
+          "Repellat officia praesentium adipisci aspernatur impedit. Voluptas architecto autem vero et praesentium dignissimos.\n" +
+          "Nisi ex sapiente incidunt eveniet mollitia. Iure libero natus perferendis voluptate iure fuga.\n" +
+          "Vel voluptate cumque laudantium. Reiciendis sapiente eaque neque exercitationem inventore nam.",
+        author: "Ciríaco Pelayo Camps",
+        email: "ciraco@example.com",
+        date: "2023-04-01 10:00:00",
+        isSender: true,
+        isAuthor: true,
+      }
+    },
+    {
+      type: "action",
+      event: {
+        date: "2023-04-01 10:10",
+        action: "Open",
+      }
+    },
+    {
+      type: "comment",
+      event: {
+        id: 2,
+        text: "Dicta eligendi pariatur ratione ipsam accusantium. Ad minus nesciunt optio id ipsum.\n" +
+          "Incidunt eligendi doloremque molestias. Voluptate sapiente nulla veritatis.\n" +
+          "Nostrum minima ad repudiandae optio laborum.\n" +
+          "Adipisci sint quasi laudantium explicabo ab nostrum. Rerum nemo itaque officia. Velit accusamus itaque accusantium ducimus quidem quae cum.\n" +
+          "Sequi possimus harum maxime. Qui laboriosam voluptate pariatur laudantium nam quo. Vel dolorum magni nam iusto sapiente animi quaerat. Debitis minus temporibus molestias quae accusamus.\n" +
+          "Nobis ab adipisci laborum doloremque impedit quo. Tempore cumque accusamus voluptates. In non facere in.\n" +
+          "Laboriosam exercitationem possimus quo sequi. Aspernatur quia consequuntur aspernatur repudiandae molestiae modi. Vero esse nisi dicta nihil accusantium nesciunt.\n" +
+          "Modi voluptatem excepturi. Architecto sapiente nobis quis ipsam. Doloremque ipsum pariatur dicta at.",
+        author: "Plácido Baeza Vaquero",
+        email: "placido@example.com",
+        date: "2023-04-01 11:00:00",
+        isSender: false,
+        isAuthor: false,
+      },
+    },
+    {
+      type: "comment",
+      event: {
+        id: 4,
+        text: "Esse tempora amet consectetur asperiores dicta. Quidem est harum tempora voluptatum mollitia.\n" +
+          "Voluptate reprehenderit sint vitae laborum animi placeat nihil. Maxime iure porro delectus voluptate. Molestiae dolorem natus alias ipsam consequuntur. Nisi nam exercitationem voluptas saepe occaecati.\n" +
+          "Reprehenderit quam ex est vel.\n" +
+          "Magnam quidem laudantium reprehenderit rerum nam ducimus perspiciatis. Vero omnis sed ducimus quidem dolores dolor illum.\n" +
+          "Corrupti a iste praesentium. Exercitationem cum id neque.\n" +
+          "Optio repellat excepturi sapiente alias iusto quaerat. Explicabo fuga cupiditate atque porro. Qui fuga ea quis porro id.\n" +
+          "Natus optio ab reiciendis quae aperiam tempore. Voluptatem asperiores adipisci ullam nobis. Saepe quas odit rem ad autem cum consequatur.\n" +
+          "Numquam deleniti veniam rem. Enim doloremque consectetur quas reprehenderit. Numquam unde a animi odio sequi.\n" +
+          "Cum at eos fuga.\n" +
+          "Vel exercitationem excepturi placeat. Quisquam neque quasi impedit at.",
+        author: "Ciríaco Pelayo Camps",
+        email: "ciraco@example.com",
+        date: "2023-04-01 13:00:00",
+        isSender: true,
+        isAuthor: false,
+      }
+    },
+    {
+      type: "action",
+      event: {
+        action: "Pendent",
+        date: "2023-04-01 13:05:00"
+      }
+    },
+    {
+      type: "action",
+      event: {
+        action: "Close",
+        date: "2023-04-01 13:35:00"
+      }
+    }
+  ] as EventsType[]
+  return (
+    <LocaleProvider lang="es_ES">
+      <CommentsTimeline value={data} />
+    </LocaleProvider>
+  );
+}
+
+

package/src/widgets/WidgetFactory.tsx

@@ -33,6 +33,7 @@ import {
   Steps,
   Tag,
   CodeEditor,
+  CommentsTimelineField,
 } from "@/index";
 import { Image } from "./base/Image";
 import { FiberGrid } from "./custom/FiberGrid";
@@ -118,6 +119,8 @@ const getWidgetType = (type: string) => {
       return Steps;
     case "codeeditor":
       return CodeEditor;
+    case "comments_timeline":
+      return CommentsTimelineField;
     default:
       return undefined;
   }

package/src/widgets/custom/Avatar.tsx

@@ -10,7 +10,6 @@ type AvatarProps = WidgetProps & {
 };
 
 const Avatar = (props: AvatarProps): React.ReactElement | null => {
-  console.log("Avatar Props", props);
   const {ooui, value} = props;
   if (!value) {
     return null;

package/src/widgets/custom/Comments.tsx

@@ -0,0 +1,144 @@
+import React, {useContext} from "react";
+import Field from "@/common/Field";
+import { WidgetProps } from "@/types";
+import {Card, Space, Typography, Avatar, Tag, Timeline, TimelineItemProps} from "antd"
+import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
+
+const { Meta } = Card;
+const { Text} = Typography;
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import md5 from "md5";
+
+
+dayjs.extend(relativeTime);
+
+type GravatarProps = {
+  email: string,
+  size?: number,
+  theme: string,
+}
+
+type CommentDataType = {
+  id: number,
+  isSender: boolean,
+  isAuthor: boolean,
+  text: string,
+  email: string,
+  date: string,
+  author: string,
+}
+
+type CommentProps = {
+  data: CommentDataType,
+  style?: any,
+}
+
+type CommentsTypeProps = {
+  data: CommentDataType[],
+}
+
+type CommentsTimelineProps = {
+  value?: EventsType[],
+}
+
+
+type EventActionType = {
+  date: string,
+  action: string,
+}
+
+export type EventsType = {
+  type: "action" | "comment",
+  event: EventActionType | CommentDataType
+
+}
+
+const Gravatar = ({ email, size = 40, theme = '' } : GravatarProps) => {
+  // Genera el enlace de Gravatar utilizando el email
+  const gravatarUrl = `https://www.gravatar.com/avatar/${md5(email)}?s=${size}&d=${theme}`;
+
+  return (
+    <Avatar src={gravatarUrl} size={size} />
+  );
+};
+
+
+function TextWithNewlines({ text }:{text: string}) {
+  const textParts = text.split('\n');
+
+  return (
+    <div>
+      {textParts.map((part, index) => (
+        <React.Fragment key={index}>
+          {part}
+          {index !== textParts.length - 1 && <br />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export const Comment = (props: CommentProps) => {
+  const {data, style} = props;
+  const { t } = useContext(LocaleContext) as LocaleContextType;
+  return (
+    <Card key={data.id} style={{...style, ...{textAlign: 'start'}}}>
+      <Meta avatar={<Gravatar email={data.email} theme='mp'/>}
+            title={data.author}
+            description={(
+              <Space direction="horizontal">
+                <span title={data.date}>{dayjs(data.date).fromNow()}</span>
+                {data.isAuthor && <Tag color="blue">{t('author')}</Tag>}
+              </Space>
+            )} style={{marginBottom: '5px'}}/>
+      <Text>
+        <TextWithNewlines text={data.text} />
+      </Text>
+    </Card>
+  )
+}
+
+export const Comments = (props: CommentsTypeProps) => {
+  const { data = [] } = props;
+  const comments = data.map((c) => {
+      const style = {float: c.isSender ? 'right' : 'left', width: '60%'};
+      return <Comment data={c} style={style}/>
+    });
+  return (
+    <div>
+      <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+        {comments}
+      </Space>
+    </div>
+  )
+}
+
+
+export const CommentsTimeline = (props: CommentsTimelineProps) => {
+  const { value } = props;
+  const items = (value || []).map(i => {
+    if (i.type === 'action') {
+      return {
+        children: `${i.event.date} - ${(i.event as EventActionType).action}`
+      }
+    } else if (i.type === "comment") {
+      return {
+        color: 'gray',
+        position: (i.event as CommentDataType).isSender ? 'left' : 'right',
+        label: i.event.date,
+        children: <Comment data={i.event as CommentDataType} />,
+      }
+    }
+  })
+  return <Timeline mode="alternate" items={items as TimelineItemProps[]} />
+}
+
+export const CommentsTimelineField = (props: WidgetProps) => {
+  return (
+    <Field {...props}>
+      <CommentsTimeline />
+    </Field>
+  );
+}