react-easy-wall 1.3.3 → 2.0.0

package/.eslintignore

@@ -0,0 +1,8 @@
+#React
+node_modules
+build
+public
+jest.config.ts
+*-test.*
+
+src/shared

package/.eslintrc.json

@@ -0,0 +1,137 @@
+{
+  "root": true,
+  "env": {
+    "node": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "eslint:recommended",
+    "prettier",
+    "plugin:jest/recommended",
+    "plugin:cypress/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "jsx-a11y",
+    "react-hooks",
+    "import",
+    "jsdoc",
+    "jest",
+    "cypress"
+  ],
+  "globals": {
+    "JSX": true
+  },
+  "settings": {
+    "jsdoc": {
+      "mode": "typescript"
+    },
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "fragment": "Fragment",
+      "version": "detect",
+      "flowVersion": "0.53"
+    }
+  },
+  "rules": {
+    "radix": "off",
+    "arrow-parens": "error",
+    "no-prototype-builtins": "off",
+    "import/no-default-export": "error",
+    "import/prefer-default-export": "off",
+    "no-use-before-define": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          "@material-ui/*/*/*",
+          "!@material-ui/core/test-utils/*"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/quotes": [
+      "error",
+      "single"
+    ],
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        "allowExpressions": true,
+        "allowTypedFunctionExpressions": true
+      }
+    ],
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      {
+        "functions": false,
+        "classes": true,
+        "variables": true,
+        "typedefs": true
+      }
+    ],
+    "react/button-has-type": [
+      0,
+      {
+        "button": true,
+        "submit": true,
+        "reset": false
+      }
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "log"
+        ]
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "after-used",
+        "ignoreRestSiblings": false
+      }
+    ],
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "react/prop-types": "off",
+    "react/destructuring-assignment": "off",
+    "react/no-unused-prop-types": "error",
+    "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": [
+      "off",
+      {
+        "forbidDefaultForRequired": true
+      }
+    ],
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [
+          ".ts",
+          ".tsx"
+        ]
+      }
+    ]
+  }
+}

package/.idea/modules.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/../next-easy-wall/.idea/next-easy-wall.iml" filepath="$PROJECT_DIR$/../next-easy-wall/.idea/next-easy-wall.iml" />
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-easy-wall.iml" filepath="$PROJECT_DIR$/.idea/react-easy-wall.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnReformat" value="true" />
+    <option name="runOnPaste" value="false" />
+    <option name="codeStyleSettingsModifierEnabled" value="false" />
+  </component>
+</project>

package/.idea/react-easy-wall.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="module" module-name="next-easy-wall" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+    <mapping directory="$PROJECT_DIR$/../next-easy-wall" vcs="Git" />
+  </component>
+</project>

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "always",
+  "trailingComma": "all"
+}

package/codegen.yml

@@ -0,0 +1,22 @@
+overwrite: true
+schema: http://localhost:8000/graphql
+documents: "src/**/*.graphql"
+generates:
+  src/shared/types/generated.ts:
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - typescript
+      - typescript-operations:
+          onlyOperationTypes: true
+          avoidOptionals:
+            field: true
+      - typescript-react-apollo
+    config:
+      maybe: T
+      scalars:
+        JSON: {}
+        DateTime: string
+        Date: string
+        BigInt: string
+        Time: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-easy-wall",
-  "version": "1.3.3",
-  "main": "./dist/cjs/index.js",
+  "version": "2.0.0",
+  "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
   "sideEffects": [
@@ -12,34 +12,24 @@
     "watch": "rollup -c -w",
     "generate": "graphql-codegen --config codegen.yml -r dotenv/config"
   },
+  "type": "module",
+
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./*": {
-      "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js",
-      "types": "./dist/esm/types/*.d.ts"
-    },
-    "./server": {
-      "types": "./dist/server.d.ts",
-      "import": "./dist/esm/server.js",
-      "require": "./dist/cjs/server.cjs"
+      "require": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist"
-  ],
+
   "keywords": [
     "javascript"
   ],
   "author": "Luis Eulacio",
   "license": "ISC",
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -48,6 +38,7 @@
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
     "@svgr/rollup": "^8.1.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "dotenv": "^17.3.1",
     "prettier": "3.8.1",
     "react": "^19.2.4",
@@ -56,12 +47,13 @@
     "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
   },
   "dependencies": {
     "@apollo/client": "^4.1.6",
-    "@apollo/client-integration-nextjs": "^0.14.4",
-    "@apollo/experimental-nextjs-app-support": "^0.14.4",
     "@cobuildlab/react-simple-state": "^2.0.0",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",

package/rollup.config.mjs

@@ -0,0 +1,54 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import json from '@rollup/plugin-json';
+
+const external = ['react', 'react-dom', 'react/jsx-runtime'];
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        dir: 'dist/esm',
+        format: 'esm',
+        sourcemap: true,
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      },
+      {
+        dir: 'dist/cjs',
+        format: 'cjs',
+        sourcemap: true,
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        exports: 'named',
+        entryFileNames: '[name].cjs',
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      json(),
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        // SOBREESCRIBIMOS EL TSCONFIG AQUÍ:
+        declaration: false,
+        declarationMap: false,
+        composite: false,
+      }),
+    ],
+    external,
+  },
+  {
+    // SEGUNDA FASE: Generación de tipos unificada
+    input: 'src/index.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+    external: [/\.css$/, /\.scss$/],
+  },
+];

package/src/components/comment/CommentContext.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { createContext } from 'react';
+import {CommentContextType} from "./comment.types";
+
+
+
+const commentContextValue: CommentContextType = {
+  callAction: () => {},
+  loadMoreComments: () => {},
+  postId: 0,
+  loading: true,
+};
+
+export const CommentContext =
+  createContext<CommentContextType>(commentContextValue);
+
+export const { Provider } = CommentContext;

package/src/components/comment/CommentProvider.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import React, { ReactNode, useEffect, useState } from 'react';
+import { Provider } from './CommentContext';
+import { Comment } from '../../shared/types/generated';
+import { fetchComments, fetchCommentsStoreAction } from './comment.actions';
+import { useCallAction, useStore } from '@cobuildlab/react-simple-state';
+import { postStore } from './comment.store';
+import {CommentContextType} from "./comment.types";
+
+type CommentProviderProps = {
+  children: ReactNode;
+};
+export const CommentProvider: React.FC<CommentProviderProps> = ({ children }) => {
+  const { id } = useStore(postStore);
+
+  const [{ pageSize, page }, setPaginate] = useState({
+    pageSize: 5,
+    page: 0,
+  });
+
+  const [callCommentsAction, loading] = useCallAction(fetchComments, {
+    onCompleted: (res) => {
+      fetchCommentsStoreAction(res.comments as Comment[], res.count as number);
+    },
+  });
+
+  useEffect(() => {
+    callCommentsAction({
+      where: {
+        post_id: id,
+      },
+      page,
+      pageSize,
+    });
+  }, [callCommentsAction, id, page, pageSize]);
+
+  const loadMoreComments = () => {
+    setPaginate({
+      page,
+      pageSize: pageSize + 5,
+    });
+  };
+  const callAction = () => {
+    callCommentsAction({
+      where: {
+        post_id: id,
+      },
+      page,
+      pageSize,
+    });
+  };
+
+  const values: CommentContextType  = {
+    postId: id,
+    loadMoreComments,
+    callAction,
+    loading,
+  };
+
+  return <Provider value={values}>{children}</Provider>;
+};

package/src/components/comment/Comments.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+
+import React, { useState } from 'react';
+import { AddCommentContainer } from './components/AddCommentContainer';
+import { useSession } from '../session/session.hooks';
+import { Grid, Box } from '@mui/material';
+import { useStore } from '@cobuildlab/react-simple-state';
+import { fetchCommentsStore } from './comment.store';
+import { useComment } from './comment.hooks';
+import { ShowMoreComments } from './components/ShowMoreComments';
+import { CommentContainer } from './components/CommentContainer';
+import { ButtonDefault } from '../../shared/components/buttons/ButtonDefault';
+import { makeStyles } from '@mui/styles';
+import { CommentSubscriptionDialog } from './components/CommentSubscriptionDialog';
+
+const useStyles = makeStyles({
+  button: {
+    borderRadius: 8,
+    width: 280,
+    height: 50,
+    fontSize: 16,
+    fontWeight: 700,
+  },
+});
+export const Comments: React.FC = () => {
+  const { user } = useSession();
+  const { comments } = useStore(fetchCommentsStore);
+  const classes = useStyles();
+  const [showComments, setShowComments] = useState(true);
+
+  const commentsAll = useComment();
+
+  if (!user && commentsAll.loading) return <div>Loading...</div>;
+  return (
+    <Box mt={2}>
+      <Grid container>
+        <Grid size={12} display="flex" justifyContent="center">
+          <ButtonDefault
+            className={classes.button}
+            onClick={() => {
+              return setShowComments(!showComments);
+            }}>
+            {showComments ? 'Ocultar comentarios' : 'Comentarios'}
+          </ButtonDefault>
+        </Grid>
+        {showComments ? (
+          <Grid size={12}>
+            <Grid container>
+              <Grid size={12} mb={2}>
+                <AddCommentContainer />
+              </Grid>
+              {comments.map((comment, key) => (
+                <Grid size={12} key={key}>
+                  <CommentContainer comment={comment} />
+                </Grid>
+              ))}
+              <ShowMoreComments />
+            </Grid>
+          </Grid>
+        ) : null}
+      </Grid>
+      <CommentSubscriptionDialog />
+    </Box>
+  );
+};

package/src/components/comment/comment.actions.ts

@@ -0,0 +1,111 @@
+import { createAction, createStoreAction } from '@cobuildlab/react-simple-state';
+import {
+    postStore,
+  fetchCommentsStore,
+  openSubscriptionCommentsStore,
+  replyCommentStore,
+} from './comment.store';
+import {
+  Comment,
+  CommentsDocument,
+  CommentsQuery,
+  CommentsQueryVariables,
+  CreateCommentDocument,
+  CreateCommentMutation,
+  CreateCommentMutationVariables,
+  CreateReplyCommentDocument,
+  CreateReplyCommentMutation,
+  CreateReplyCommentMutationVariables,
+} from '../../shared/types/generated';
+import {
+  createCommentErrorEvent,
+  createCommentEvent,
+  createReplyCommentErrorEvent,
+  createReplyCommentEvent,
+  fetchCommentErrorEvent,
+  fetchCommentsEvent,
+} from './comment.events';
+import { apolloClient } from '../../shared/apollo/apollo.client';
+
+const client = apolloClient();
+
+export const fetchCommentsStoreAction = createStoreAction(
+  fetchCommentsStore,
+  (prev, comments: Comment[], count: number) => ({
+    ...prev,
+    comments,
+    count,
+  }),
+);
+
+export const postStoreAction = createStoreAction(postStore, (prev, id: number) => ({
+  ...prev,
+  id,
+}));
+
+export const replyCommentStoreAction = createStoreAction(
+  replyCommentStore,
+  (prev, message: string, commentId: number) => ({
+    ...prev,
+    message,
+    commentId,
+  }),
+);
+
+export const fetchComments = createAction(
+  fetchCommentsEvent,
+  fetchCommentErrorEvent,
+  async (variables: CommentsQueryVariables) => {
+    const response = await client.query<CommentsQuery, CommentsQueryVariables>({
+      query: CommentsDocument,
+      variables,
+      fetchPolicy: 'network-only',
+    });
+
+    return {
+      comments: response.data?.comments?.items as Comment[],
+      count: response.data?.comments?.count as number,
+    };
+  },
+);
+
+export const createComment = createAction(
+  createCommentEvent,
+  createCommentErrorEvent,
+  async (variables: CreateCommentMutationVariables) => {
+    const response = await client.mutate<CreateCommentMutation, CreateCommentMutationVariables>({
+      mutation: CreateCommentDocument,
+      variables,
+    });
+
+    return {
+      comment: response.data?.createComment as Comment,
+    };
+  },
+);
+
+export const createReplyComment = createAction(
+  createReplyCommentEvent,
+  createReplyCommentErrorEvent,
+  async (variables: CreateReplyCommentMutationVariables) => {
+    const response = await client.mutate<
+      CreateReplyCommentMutation,
+      CreateReplyCommentMutationVariables
+    >({
+      mutation: CreateReplyCommentDocument,
+      variables,
+    });
+
+    return {
+      comment: response.data?.createReplyComment as Comment,
+    };
+  },
+);
+
+export const openSubscriptionCommentsStoreAction = createStoreAction(
+  openSubscriptionCommentsStore,
+  (prev, open: boolean) => ({
+    ...prev,
+    open,
+  }),
+);

package/src/components/comment/comment.events.ts

@@ -0,0 +1,30 @@
+import { createEvent } from '@cobuildlab/react-simple-state';
+import { Comment } from '../../shared/types/generated';
+
+export const fetchCommentsEvent = createEvent<{
+  comments: Comment[];
+  count: number;
+}>({
+  initialValue: {
+    comments: [],
+    count: 0,
+  },
+});
+
+export const fetchCommentErrorEvent = createEvent();
+
+export const createCommentEvent = createEvent<{ comment: Comment | undefined }>({
+  initialValue: {
+    comment: undefined,
+  },
+});
+export const createCommentErrorEvent = createEvent();
+
+export const createReplyCommentEvent = createEvent<{
+  comment: Comment | undefined;
+}>({
+  initialValue: {
+    comment: undefined,
+  },
+});
+export const createReplyCommentErrorEvent = createEvent();

package/src/components/comment/comment.hooks.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { CommentContext } from './CommentContext';
+
+export const useComment = () => {
+  const { loading, callAction, loadMoreComments, postId } = useContext(CommentContext);
+
+  return {
+    callAction,
+    loadMoreComments,
+    postId,
+    loading,
+  };
+};