Merge pull request #4 from naorye/fix-missing-key-and-ts-issues

Several fixes / features
nightborn-be · Apr 20, 2020 · 7132d1a · 7132d1a
2 parents 3d8f9a0 + 401fa72
commit 7132d1a
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "private": false,
   "repository": "nightborn-be/signum",
   "main": "dist/index.js",
+  "types": "./dist/index.d.ts",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
   "files": [
@@ -44,9 +45,6 @@
     "@types/react": "^16.7.22",
     "cross-env": "^5.2.0",
     "gh-pages": "^2.0.1",
-    "react": "^16.9.0",
-    "react-scripts": "^3.4.0",
-    "react-test-renderer": "^16.9.0",
     "typescript": "^3.2.4"
   }
-}
+}
diff --git a/src/common.d.ts b/src/common.d.ts
@@ -0,0 +1,8 @@
+declare module "*.svg" {
+  import React = require("react");
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  >>;
+  const src: string;
+  export default src;
+}
diff --git a/src/components/chat-body/index.tsx b/src/components/chat-body/index.tsx
@@ -1,8 +1,8 @@
 import './style.scss';
 import React, { useState, useEffect } from 'react';
-import { IOption } from '../../interfaces/IOption';
 import { motion, useAnimation } from 'framer-motion';
 import { useChat } from '../chat-context/ChatContext';
+import { IOption } from '../../types';
 
 export default function ChatBody() {
 
@@ -144,7 +144,7 @@ export default function ChatBody() {
                                         </div>
                                         <div onClick={closeChat} className="chat-body-header-title-close-button">
                                             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                <path d="M1.04261 2.45673L5.58588 7L1.04261 11.5433C0.652462 11.9334 0.652463 12.5672 1.04261 12.9574C1.43276 13.3475 2.06658 13.3475 2.45673 12.9574L7 8.41412L11.5433 12.9574C11.9334 13.3475 12.5672 13.3475 12.9574 12.9574C13.3475 12.5672 13.3475 11.9334 12.9574 11.5433L8.41412 7L12.9574 2.45673C13.3475 2.06658 13.3475 1.43276 12.9574 1.04261C12.5672 0.652463 11.9334 0.652462 11.5433 1.04261L7 5.58588L2.45673 1.04261C2.06658 0.652463 1.43276 0.652463 1.04261 1.04261C0.652463 1.43276 0.652463 2.06658 1.04261 2.45673Z" fill="white" stroke="white" stroke-width="0.5" />
+                                                <path d="M1.04261 2.45673L5.58588 7L1.04261 11.5433C0.652462 11.9334 0.652463 12.5672 1.04261 12.9574C1.43276 13.3475 2.06658 13.3475 2.45673 12.9574L7 8.41412L11.5433 12.9574C11.9334 13.3475 12.5672 13.3475 12.9574 12.9574C13.3475 12.5672 13.3475 11.9334 12.9574 11.5433L8.41412 7L12.9574 2.45673C13.3475 2.06658 13.3475 1.43276 12.9574 1.04261C12.5672 0.652463 11.9334 0.652462 11.5433 1.04261L7 5.58588L2.45673 1.04261C2.06658 0.652463 1.43276 0.652463 1.04261 1.04261C0.652463 1.43276 0.652463 2.06658 1.04261 2.45673Z" fill="white" stroke="white" strokeWidth="0.5" />
                                             </svg>
                                         </div>
                                     </div>
@@ -168,7 +168,7 @@ export default function ChatBody() {
                                     </div>
                                     <div onClick={reset} className="chat-body-header-title-close-button">
                                         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <path d="M1.04261 2.45673L5.58588 7L1.04261 11.5433C0.652462 11.9334 0.652463 12.5672 1.04261 12.9574C1.43276 13.3475 2.06658 13.3475 2.45673 12.9574L7 8.41412L11.5433 12.9574C11.9334 13.3475 12.5672 13.3475 12.9574 12.9574C13.3475 12.5672 13.3475 11.9334 12.9574 11.5433L8.41412 7L12.9574 2.45673C13.3475 2.06658 13.3475 1.43276 12.9574 1.04261C12.5672 0.652463 11.9334 0.652462 11.5433 1.04261L7 5.58588L2.45673 1.04261C2.06658 0.652463 1.43276 0.652463 1.04261 1.04261C0.652463 1.43276 0.652463 2.06658 1.04261 2.45673Z" fill="white" stroke="white" stroke-width="0.5" />
+                                            <path d="M1.04261 2.45673L5.58588 7L1.04261 11.5433C0.652462 11.9334 0.652463 12.5672 1.04261 12.9574C1.43276 13.3475 2.06658 13.3475 2.45673 12.9574L7 8.41412L11.5433 12.9574C11.9334 13.3475 12.5672 13.3475 12.9574 12.9574C13.3475 12.5672 13.3475 11.9334 12.9574 11.5433L8.41412 7L12.9574 2.45673C13.3475 2.06658 13.3475 1.43276 12.9574 1.04261C12.5672 0.652463 11.9334 0.652462 11.5433 1.04261L7 5.58588L2.45673 1.04261C2.06658 0.652463 1.43276 0.652463 1.04261 1.04261C0.652463 1.43276 0.652463 2.06658 1.04261 2.45673Z" fill="white" stroke="white" strokeWidth="0.5" />
                                         </svg>
                                     </div>
                                 </div>
@@ -186,7 +186,7 @@ export default function ChatBody() {
 
                 <div className="chat-body-content-options">
                     {option.options && option.options.map((option) => (
-                        <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => handleOptionClicked(option)} className="chat-body-content-option" style={{ background: config.mainColor }}>
+                        <motion.div key={option.name} whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} onClick={() => handleOptionClicked(option)} className="chat-body-content-option" style={{ background: config.mainColor }}>
                             {option.name}
                         </motion.div>
                     ))}

diff --git a/src/components/chat-body/interfaces/IChatBodyInformation.ts b/src/components/chat-body/interfaces/IChatBodyInformation.ts
diff --git a/src/components/chat-context/ChatContext.ts b/src/components/chat-context/ChatContext.ts
@@ -1,6 +1,14 @@
 import { createContext, useContext } from "react";
-import { IChatContext } from "./interfaces/IChatContext";
 import { defaultConfig, defaultOption } from "../../constants";
+import { IChatConfig, IOption } from "../../types";
+
+interface IChatContext {
+    isOpen: boolean,
+    config: IChatConfig,
+    openChat: () => void,
+    closeChat: () => void,
+    defaultOption: IOption
+}
 
 const ChatContext = createContext<IChatContext>({
     isOpen: false,

diff --git a/src/components/chat-context/index.tsx b/src/components/chat-context/index.tsx
@@ -1,7 +1,13 @@
 import React, { useState } from "react";
 import { ChatContext } from "./ChatContext";
-import { IChatProviderProps } from "./interfaces/IChatProviderProps";
 import { defaultConfig, defaultOption } from "../../constants";
+import { IOption, IChatConfig } from '../../types';
+
+export interface IChatProviderProps {
+    option: IOption,
+    config: IChatConfig,
+    children: any
+}
 
 export default function ChatContextProvider(props: IChatProviderProps) {
 

diff --git a/src/components/chat-context/interfaces/IChatContext.ts b/src/components/chat-context/interfaces/IChatContext.ts
diff --git a/src/components/chat-context/interfaces/IChatProviderProps.ts b/src/components/chat-context/interfaces/IChatProviderProps.ts
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,5 +1,4 @@
-import { IOption } from "../interfaces/IOption"
-import { IChatConfig } from "../interfaces/IChatConfig"
+import { IChatConfig, IOption } from "../types"
 
 export const defaultConfig: IChatConfig = {
     openByDefault: false,

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,8 +1,15 @@
 import React from 'react';
 import ChatBody from './components/chat-body';
 import ChatIcon from './components/chat-icon';
-import { IChatProps } from './interfaces/IChatProps';
 import ChatContextProvider from './components/chat-context';
+import { IOption, IChatConfig } from './types';
+
+interface IChatProps {
+	option: IOption,
+    config: IChatConfig
+}
+
+export * from './types';
 
 export default function Chat(props: IChatProps) {
 	return (

diff --git a/src/interfaces/IChatProps.ts b/src/interfaces/IChatProps.ts
diff --git a/src/interfaces/IOption.ts b/src/interfaces/IOption.ts
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/interfaces/IChatConfig.ts → src/types.ts b/src/interfaces/IChatConfig.ts → src/types.ts
@@ -1,4 +1,20 @@
-import { IChatBodyInformation } from "../components/chat-body/interfaces/IChatBodyInformation";
+import { ReactNode } from "react";
+
+export interface IOption {
+    title: string,
+    subTitle?: string,
+    message: ReactNode,
+    name: string,
+    handleOnClick?: Function,
+    options?: IOption[]
+}
+
+export interface IChatBodyInformation {
+    email: string,
+    message: string,
+    steps: IOption[],
+    option: IOption
+}
 
 export interface IChatConfig {
     openByDefault: boolean,
@@ -15,4 +31,4 @@ export interface IChatConfig {
     sendButtonColor: string,
     handleFinalButtonClicked?: () => void,
     handleSendClicked: (information: IChatBodyInformation) => void
-}
+}