@inditeai/react 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,2 +1,2 @@
-// v0.0.2
+// v0.0.3
 import{jsx as r}from"react/jsx-runtime";import{useRef as e,useEffect as t,useCallback as n}from"react";import"@inditeai/js/dist/web";export*from"@inditeai/js/dist";"function"==typeof SuppressedError&&SuppressedError;const o=n=>{var{style:o,className:c}=n,u=function(r,e){var t={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&e.indexOf(n)<0&&(t[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(t[n[o]]=r[n[o]])}return t}(n,["style","className"]);const l=e(null);return t((()=>{l.current&&Object.assign(l.current,u)}),[u]),r("bot-standard",{ref:l,style:o,class:c})},c=r=>{const o=e(null),c=n((r=>{const e=document.createElement("bot-bubble");o.current=e,u(o.current,r),document.body.prepend(o.current)}),[]);t((()=>{o.current||c(r),u(o.current,r)}),[c,r]),t((()=>()=>{var r;null===(r=o.current)||void 0===r||r.remove(),o.current=null}),[]);const u=(r,e)=>{Object.assign(r,e)};return null},u=o=>{const c=e(null),u=e(null),l=n((r=>{var e;const t=document.createElement("bot-popup");u.current=t,s(u.current,r),c.current?null===(e=c.current)||void 0===e||e.append(u.current):console.warn("Could not attach popup to container because containerRef.current is null")}),[]);t((()=>{u.current||l(o),s(u.current,o)}),[l,o]),t((()=>()=>{var r;null===(r=u.current)||void 0===r||r.remove(),u.current=null}),[]);const s=(r,e)=>{Object.assign(r,e)};return r("div",{ref:c})};export{c as Bubble,u as Popup,o as Standard};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditeai/react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Convenient library to display bots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,6 +11,10 @@
     "lint": "eslint --fix \"src/**/*.ts*\"",
     "format:check": "prettier --check ./src"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Bacancy-DataProphets/Indite-packages.git"
+  },
   "license": "MIT",
   "dependencies": {
     "@ladle/react": "2.5.1"

package/src/Bubble.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import type { BubbleProps } from '@inditeai/js/dist'
+import '@inditeai/js/dist/web'
+
+type Props = BubbleProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-bubble': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >
+    }
+  }
+}
+
+type BubbleElement = HTMLElement & Props
+
+export const Bubble = (props: Props) => {
+  const bubbleElement = useRef<BubbleElement | null>(null)
+
+  const attachBubbleToDom = useCallback((props: Props) => {
+    const newBubbleElement = document.createElement(
+      'bot-bubble'
+    ) as BubbleElement
+    bubbleElement.current = newBubbleElement
+    injectPropsToElement(bubbleElement.current, props)
+    document.body.prepend(bubbleElement.current)
+  }, [])
+
+  useEffect(() => {
+    if (!bubbleElement.current) attachBubbleToDom(props)
+    injectPropsToElement(bubbleElement.current as BubbleElement, props)
+  }, [attachBubbleToDom, props])
+
+  useEffect(() => {
+    return () => {
+      bubbleElement.current?.remove()
+      bubbleElement.current = null
+    }
+  }, [])
+
+  const injectPropsToElement = (element: BubbleElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return null
+}
+
+export default Bubble

package/src/Popup.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import type { PopupProps } from '@inditeai/js/dist'
+import '@inditeai/js/dist/web'
+
+type Props = PopupProps
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-popup': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+type PopupElement = HTMLElement & Props
+
+export const Popup = (props: Props) => {
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const popupRef = useRef<PopupElement | null>(null)
+
+  const attachPopupToContainer = useCallback((props: Props) => {
+    const popupElement = document.createElement('bot-popup') as PopupElement
+    popupRef.current = popupElement
+    injectPropsToElement(popupRef.current, props)
+    if (!containerRef.current) {
+      console.warn(
+        'Could not attach popup to container because containerRef.current is null'
+      )
+      return
+    }
+    containerRef.current?.append(popupRef.current)
+  }, [])
+
+  useEffect(() => {
+    if (!popupRef.current) attachPopupToContainer(props)
+    injectPropsToElement(popupRef.current as PopupElement, props)
+  }, [attachPopupToContainer, props])
+
+  useEffect(() => {
+    return () => {
+      popupRef.current?.remove()
+      popupRef.current = null
+    }
+  }, [])
+
+  const injectPropsToElement = (element: PopupElement, props: Props) => {
+    Object.assign(element, props)
+  }
+
+  return <div ref={containerRef} />
+}
+
+export default Popup

package/src/Standard.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react'
+import type { BotProps } from '@inditeai/js/dist'
+import '@inditeai/js/dist/web'
+
+type Props = BotProps & {
+  style?: React.CSSProperties
+  className?: string
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'bot-standard': React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      > & { class?: string }
+    }
+  }
+}
+
+type StandardElement = HTMLElement & Props
+
+export const Standard = ({ style, className, ...assignableProps }: Props) => {
+  const ref = useRef<StandardElement | null>(null)
+
+  useEffect(() => {
+    if (!ref.current) return
+    Object.assign(ref.current, assignableProps)
+  }, [assignableProps])
+
+  return <bot-standard ref={ref} style={style} class={className} />
+}
+
+export default Standard

package/src/index.ts

@@ -0,0 +1,4 @@
+export { Standard } from './Standard'
+export { Bubble } from './Bubble'
+export { Popup } from './Popup'
+export * from '@inditeai/js/dist'