npm-pkg-hook 1.0.0 → 1.0.1

package/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,108 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "@typescript-eslint"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    // react hooks validations
+    "react-hooks/rules-of-hooks": "error",
+    // suppress errors for missing "import React" in files
+    "react/react-in-jsx-scope": "off",
+    // allow jsx syntax in js files (for next.js project)
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    ],
+    "quotes": [
+      2,
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "consistent-return": 2,
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "no-else-return": 1,
+    "semi": [
+      1,
+      "never"
+    ],
+    "space-unary-ops": 2,
+    "comma-dangle": [
+      "error",
+      {
+        "arrays": "never",
+        "objects": "never",
+        "imports": "never",
+        "exports": "never",
+        "functions": "never"
+      }
+    ],
+    "one-var": [
+      2,
+      "never"
+    ],
+    "no-var": "error",
+    "arrow-body-style": [
+      "error",
+      "always"
+    ],
+    "no-console": "error",
+    "no-multi-spaces": [
+      "error",
+      {
+        "exceptions": {
+          "BinaryExpression": true
+        }
+      }
+    ],
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 1,
+        "maxBOF": 1
+      }
+    ],
+    "jsx-quotes": [
+      "error",
+      "prefer-single"
+    ]
+  }
+}

package/README.md

@@ -0,0 +1 @@
+# pkg-hook

package/jsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/next.config.js

@@ -0,0 +1,129 @@
+/* eslint-disable consistent-return */
+/** @type {import('next').NextConfig} */
+const {
+  PHASE_DEVELOPMENT_SERVER,
+  PHASE_PRODUCTION_BUILD
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+} = require('next/constants')
+const nextConfig = {
+  reactStrictMode: true
+}
+module.exports = (phase) => {
+
+  // npm run dev or next dev
+  const isDev = phase === PHASE_DEVELOPMENT_SERVER
+  // npm run build or next build
+  const isProd = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== '1'
+  // npm run build or next build
+  const isStaging = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === '1'
+  const env = {
+    NAMEDB: (() => {
+      if (isDev) return 'app'
+      if (isProd) return 'railway'
+    })(),
+    USERDB: (() => {
+      if (isDev) return 'root'
+      if (isProd) return 'root'
+    })(),
+    PASSDB: (() => {
+      if (isDev) return ''
+      if (isProd) return '8jpgm70bhVjWIxEFbsrt'
+    })(),
+    HOSTDB: (() => {
+      if (isDev) return 'localhost'
+      if (isProd) return 'containers-us-west-65.railway.app'
+    })(),
+    DIALECTDB: 'mysql',
+    SESSION_NAME: 'vp.client',
+    SESSION_KEY: '12ba105efUaGjihGrh0LfJHTGIBGu6jXa',
+    URL_BASE: (() => {
+      if (isDev) return 'http://localhost:3001/app/'
+      if (isProd) return 'http://localhost:3001/app/'
+      // if (isStaging) return 'Title Stg'
+    })(),
+    MAIN_URL_BASE: (() => {
+      if (isDev) return 'http://localhost:3000/'
+      if (isProd) return 'http://localhost:3000/'
+      if (isStaging) return 'Title Stg'
+    })(),
+    // URL_BASE_WS
+    URL_ADMIN_SERVER: (() => {
+      if (isDev) return 'http://localhost:4000/'
+      // if (isDev) return 'https://server-image-food.herokuapp.com/'
+      if (isProd) return 'http://localhost:4000/'
+    })(),
+    // BANCOLOMBIA
+    BANCOLOMBIA_CLIENT_KEY: '55929729-85fe-4ffe-928d-0bd317817be4',
+    BANCOLOMBIA_SECRET_KEY: 'E1aM2bV2lD7vS8cH1qJ8oN0nD7eN0eP0rM8gU0cG2lL6uY5sO7',
+    JWT_EXPIRY: 333300,
+    REFRESH_TOKEN_EXPIRY: '604800',
+    AUTHO_USER_KEY: '12ba105efUaGjihGrh0LfJHTGIBGu6jXV',
+    ACCESS_SID_TWILIO: 'AC7c9ccbdb50400c504faf629e35aea8e4',
+    REACT_APP_API_KEY_GOOGLE_MAPS: 'AIzaSyAy0SY1G3OFqesWSTQRHJvzyJzNgURPoN8',
+    ACCESS_TOKEN_AUTH_TWILIO: '22e090d4d776ace7bb596ca77cba6b18'
+  }
+
+  const resolveUniqueReactForHooks = {
+    webpack: (config, options) => {
+      if (options.isServer) {
+        config.externals = ['react', ...config.externals]
+      }
+      // eslint-disable-next-line no-undef
+      config.resolve.alias.react = reactPath
+      return config
+    },
+    images: {
+      domains: ['http2.mlstatic.com', 'localhost', 'server-image-food.herokuapp.com']
+    }
+  }
+  const headers = () => {
+    return [
+      {
+        source: '/app',
+        headers: [
+          {
+            key: 'x-custom-header-1',
+            value: 'my custom header 1'
+          }
+        ]
+      }
+    ]
+  }
+  const redirects = () => {
+    return [
+      {
+        source: '/home',
+        destination: '/',
+        permanent: true
+      }
+    ]
+  }
+  const basePath = '/app'
+  // puedes sobre escribir la ruta
+  const rewrites = () => {
+    return [
+      {
+        source: '/ab',
+        destination: '/about'
+      }
+    ]
+  }
+  const assetPrefix = isProd ? 'https://cdn.mydomain.com' : ''
+  const images = {
+    domains: ['http2.mlstatic.com', 'localhost', 'server-image-food.herokuapp.com', '*']
+  }
+  return {
+    env,
+    swcMinify: false,
+    images, 
+    headers,
+    optimizeFonts: false,
+    nextConfig,
+    // basePath,
+    rewrites,
+    redirects,
+    assetPrefix,
+    resolveUniqueReactForHooks
+  }
+}
+// module.exports = nextConfig

package/package.json

@@ -1,11 +1,33 @@
 {
   "name": "npm-pkg-hook",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "description-pkg-hook",
   "main": "/src/index.jsx",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rm": "rm -rf node_modules package-lock.json && npm i"
   },
   "author": "",
-  "license": "ISC"
-}
+  "license": "ISC",
+  "dependencies": {
+    "@apollo/client": "3.6.9",
+    "@typescript-eslint/parser": "^5.37.0",
+    "js-cookie": "3.0.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-query": "^3.39.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.19.1",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "^18.0.20",
+    "eslint": "^8.23.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.5",
+    "eslint-plugin-promise": "^6.0.1",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0"
+  }
+}

package/src/cookies/index.ts

@@ -0,0 +1,3 @@
+import Cookies from 'js-cookie'
+
+export { Cookies }

package/src/hooks/index.js

@@ -0,0 +1,15 @@
+export * from './useLocationNavigate'
+export * from './useUser'
+export * from './useTimeAgo/useTimeAgo'
+export * from './useEvent'
+export * from './useFetchJson'
+export * from './useRestaurant'
+export * from './useFormTools/index'
+export * from './useDrag'
+export * from './useHover'
+export * from './useKeypress'
+export * from './useLocalSorage'
+export * from './useUpdateCart'
+export * from './useSetState'
+export * from './useGetCategorieStore'
+export * from './useCategoryStore'

package/src/hooks/useAcumulateDate/index.js

@@ -0,0 +1,16 @@
+
+const data = [
+    { x: '2021-10-17T14:38:45.540Z', y: 2 }
+  ]
+  export const get_date_parts = (iso_string) =>  {
+    const [year, month, day, hr, min, sec] = iso_string.split(/\D/g)
+    return { year, month, day, hr, min, sec }
+  }
+  function group_by_year(arr) {
+    let total = arr.reduce((a, b) => {
+      const { day } = get_date_parts(b.x)
+      return a + parseInt(day)
+    }, 0)
+    return total
+  }
+  const result = group_by_year(data)

package/src/hooks/useAnimationText/index.jsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState, useRef } from 'react'
+
+const fullText =
+  ' this is full text it\'ll be animated again! Writing a really huge senetence here so that I can see the animation happen. I know it\'s fast but that\'s how it goes.'
+
+const useAnimatedText = textMessage => {
+  const fullTextRef = useRef(textMessage)
+  const [text, setText] = useState('')
+  const [index, setIndex] = useState(0)
+  useEffect(() => {
+    if (index < fullText.length) {
+      window.requestAnimationFrame(() => {
+        // eslint-disable-next-line
+                setText(text => text + fullTextRef.current[index]);
+        setIndex(() => {return index + 1})
+      })
+    }
+  }, [index])
+  useEffect(() => {
+    fullText.current = textMessage
+  }, [textMessage])
+
+  return text
+}
+
+export default function TextHook() {
+  const text = useAnimatedText(fullText)
+
+  return <span>{text} </span>
+}

package/src/hooks/useCategoryStore/index.js

@@ -0,0 +1,7 @@
+import { useQuery } from '@apollo/client'
+import { GET_ALL_CAT_STORE } from './queries'
+
+export const useCategoryStore = () => {
+    const { data } = useQuery(GET_ALL_CAT_STORE)
+    return [data]
+}

package/src/hooks/useCategoryStore/queries.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+export const GET_ALL_CAT_STORE = gql`
+query getAllCatStore{
+getAllCatStore{
+  catStore
+  idUser
+  cPathImage
+  cName
+  cState
+  cDatCre
+  cDatMod
+  csDescription
+  }
+}
+`

package/src/hooks/useDrag/index.js

@@ -0,0 +1,57 @@
+import { useEffect } from 'react'
+
+export function useDrag2(ref) {
+  useEffect(() => {
+    const target = ref.current
+    if (!target) return
+    const previousOffset = { x: 0, y: 0 }
+    let originMouseX
+    let originMouseY
+    function onMousemove(e) {
+      const { pageX, pageY } = e
+      const x = pageX - originMouseX + previousOffset.x
+      const y = pageY - originMouseY + previousOffset.y
+      target.style.transform = `translate(${ x }px, ${ y }px)`
+    }
+    function onMouseup(e) {
+      previousOffset.x += e.pageX - originMouseX
+      previousOffset.y += e.pageY - originMouseY
+      window.removeEventListener('mousemove', onMousemove)
+      window.removeEventListener('mouseup', onMouseup)
+    }
+    function onMousedown(e) {
+      originMouseX = e.pageX
+      originMouseY = e.pageY
+      window.addEventListener('mousemove', onMousemove)
+      window.addEventListener('mouseup', onMouseup)
+    }
+    target.addEventListener('mousedown', onMousedown)
+    return () => {
+      target?.removeEventListener('mousedown', onMousedown)
+      window?.removeEventListener('mouseup', onMouseup)
+      window?.removeEventListener('mousemove', onMousemove)
+    }
+  }, [ref])
+}
+import { useState } from 'react'
+
+export const useDrag = (x, y) => {
+  const [move, setMove] = useState(false)
+  const [moveTo, setMoveTo] = useState([x, y])
+  const moveIcon = e => {
+    const xcoord = moveTo[0] + e.movementX
+    const ycoord = moveTo[1] + e.movementY
+    setMoveTo([xcoord, ycoord])
+  }
+  const handleMove = e => {
+    move && moveIcon(e)
+  }
+  const handelDown = () => {
+    setMove(true)
+  }
+  const handelUp = () => {
+    setMove(false)
+  }
+
+  return { move, moveTo, handelDown, handelUp, handleMove }
+}

package/src/hooks/useEvent/index.js

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+export const on = ({ eventType, callBack }) => {
+    document.addEventListener(eventType, callBack);
+};
+export const off = ({ eventType, callBack }) => {
+    document.removeEventListener(eventType, callBack);
+};
+export const once = ({ eventType, callBack }) => {
+    const handleEventOnce = (event) => {
+        callBack(event);
+        off({ eventType, callBack: handleEventOnce });
+    };
+    on({ eventType, callBack: handleEventOnce });
+};
+export const trigger = ({ eventType, data }) => {
+    const event = new CustomEvent(eventType, { detail: data });
+    document.dispatchEvent(event);
+};
+//This function is used to subscribe components an any event
+export const useEvents = ({ eventType, callBack }) => {
+    useEffect(() => {
+        on({ eventType, callBack: callBack });
+        return () => {
+            off({ eventType, callBack: callBack });
+        };
+    }, [eventType, callBack]);
+};
+// This function create and dispatch event
+export const useTrigerEvent = () => {
+    return {
+        trigger
+    };
+};

package/src/hooks/useFetchJson/index.js

@@ -0,0 +1,25 @@
+/**
+ * It fetches a json response, and if the response is not ok, it throws an error with the response and
+ * the data
+ * @param args - The arguments to pass to fetch.
+ */
+export const fetchJson = async (...args) =>  {
+    try {
+      const response = await fetch(...args)
+      // if the server replies, there's always some data in json
+      // if there's a network error, it will throw at the previous line
+      const data = await response.json()
+      if (response.ok) {
+        return data
+      }
+      const error = new Error(response.statusText)
+      error.response = response
+      error.data = data
+      throw error
+    } catch (error) {
+      if (!error.data) {
+        error.data = { message: error.message }
+      }
+      throw error
+    }
+  }

package/src/hooks/useFetchMoreInteractions/index.jsx

@@ -0,0 +1,35 @@
+import React, {
+    useState,
+    useEffect,
+    useRef
+} from 'react'
+
+export const useFetchMoreInteractions = ({ render, fetchMore = true, callback = () => {} }) => {
+    const loadingRef = useRef()
+
+    const useOnScreen = ref => {
+        const [isIntersecting, setIsIntersecting] = useState(false)
+
+        const observer = new IntersectionObserver(
+            ([entry]) => setIsIntersecting(entry.isIntersecting)
+        )
+
+        useEffect(() => {
+            if (ref.current) observer.observe(ref.current)
+            // Remove the observer as soon as the component is unmounted
+            return () => { observer.disconnect() }
+        }, [ref, observer])
+
+        return isIntersecting
+    }
+
+    const isVisible = useOnScreen(loadingRef)
+
+    useEffect(() => {
+        if (isVisible && fetchMore) callback()
+    }, [isVisible, callback, fetchMore])
+
+    return <div ref={loadingRef}>
+        {isVisible && fetchMore ? render || <div style={{ background: 'red' }} >Loading...{isVisible && 'lol'}</div> : <></>}
+    </div>
+}

package/src/hooks/useFormTools/index.js

@@ -0,0 +1,71 @@
+import {
+  useCallback,
+  useEffect,
+  useState
+  } from 'react'
+import { validationSubmitHooks } from '../../utils'
+/**
+ * @version 0.0.1
+ * @description Hook con herramientas de validación y eventos de cambio
+ * @return {Array} devuelve la función onChange a ejecutar y el estado de error de cada input
+ */
+export const useFormTools = () => {
+  const [dataForm, setDataForm] = useState({})
+  const [errorForm, setErrorForm] = useState({})
+  const [errorSubmit, setErrorSubmit] = useState(false)
+  const [calledSubmit, setCalledSubmit] = useState(false)
+
+  // Handle Change
+  const handleChange = useCallback((e, error) => {
+    setDataForm({ ...dataForm, [e.target.name]: e.target.value })
+    setErrorForm({ ...errorForm, [e.target.name]: error })
+  }, [setDataForm, dataForm, errorForm, setErrorForm])
+
+  // Forzar datos desde una ventana externa
+  const handleForcedData = useCallback(data => {
+    setDataForm(data)
+  }, [setDataForm])
+
+  // Forzar datos de error desde una ventana externa
+  const setForcedError = useCallback(errors => {
+    setErrorForm(errors)
+  }, [setErrorForm])
+
+  // Handle submit, al enviar formulario
+  const handleSubmit = useCallback(({ event, action, msgSuccess, msgError, actionAfterSuccess }) => {
+    !!event && event.preventDefault()
+    setCalledSubmit(true)
+    let errSub = false
+
+    // Valida los errores locales
+    for (const x in errorForm) {
+      if (errorForm[x]) errSub = true
+    }
+
+    // if (errSub) return setErrorSubmit(errSub)
+
+    // Valida los errores desde el evento
+    const errores = validationSubmitHooks(event.target.elements)
+    setErrorForm(errores)
+    for (const x in errores) {
+      if (errores[x]) errSub = true
+    }
+
+    // Ejecuta la petición si es válido
+    if (!errSub && action) {
+      action().then(res => {
+        if (res) {
+          // setAlertBox({ message: msgSuccess || 'Operación exitosa', color: PColor })
+          !!actionAfterSuccess && actionAfterSuccess()
+        }
+
+      }).catch(e => {return console.log({ message: msgError || e?.message || 'Ha ocurrido un error', color: WColor })})
+    }
+
+    setErrorSubmit(errSub)
+  }, [errorForm, setErrorForm])
+
+  useEffect(() => {return setCalledSubmit(false)}, [calledSubmit])
+
+  return [handleChange, handleSubmit, handleForcedData, { dataForm, errorForm, errorSubmit, calledSubmit, setForcedError }]
+}