[ { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "build/\ndist/\nnode_modules/\n.snapshots/\n*.min.js" }, { "path": ".eslintrc", "content": "{\n \"parser\": \"babel-eslint\",\n \"extends\": [\n \"standard\",\n \"standard-react\",\n \"plugin:prettier/recommended\",\n \"prettier/standard\",\n \"prettier/react\"\n ],\n \"env\": {\n \"node\": true\n },\n \"parserOptions\": {\n \"ecmaVersion\": 2020,\n \"ecmaFeatures\": {\n \"legacyDecorators\": true,\n \"jsx\": true\n }\n },\n \"settings\": {\n \"react\": {\n \"version\": \"16\"\n }\n },\n \"rules\": {\n \"space-before-function-paren\": 0,\n \"react/prop-types\": 0,\n \"react/jsx-handler-names\": 0,\n \"react/jsx-fragments\": 0,\n \"react/no-unused-prop-types\": 0,\n \"import/export\": 0\n }\n}\n" }, { "path": ".gitignore", "content": "\n# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n\n# builds\nbuild\ndist\n.rpt2_cache\n\n# misc\n.DS_Store\n.env\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n" }, { "path": ".prettierrc", "content": "{\n \"singleQuote\": true,\n \"jsxSingleQuote\": true,\n \"semi\": false,\n \"tabWidth\": 2,\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": false,\n \"arrowParens\": \"always\",\n \"trailingComma\": \"none\"\n}\n" }, { "path": ".travis.yml", "content": "language: node_js\nnode_js:\n - 12\n - 10\n" }, { "path": "README.md", "content": "# react-comments-section\n\n## Install\n\nInstall the latest version!\n\n```bash\nnpm i react-comments-section\n```\n\n## Detailed Documentation : https://riyanegi.github.io/react-comments-documentation/\n\n`react-comments-section` is a simple but multi-functional react comment section component that helps you create comments section similar to youtube or instagram for your React App.\n`react-comments-section` is very useful for react beginners who want a comment section in their project but want to skip it's complexity. This library will give a fully functional comment section with the following features:\n\n- User can reply to comments\n- User can edit his/her comments\n- User can delete his/her comments\n\nlive demo of the library -> https://riyanegi.github.io/react-comments-section/\n\n## Default Example\n\n![commentbox](https://github.com/RiyaNegi/react-comments-section/blob/main/example/blob/default.png?raw=true)\n\n## Advanced Input (rich text editor)\n\n![commentbox](https://github.com/RiyaNegi/react-comments-section/blob/main/example/blob/advanced.png?raw=true)\n\n## Usage\n\n### Hooks Implementation (Typescript)\n\nFollowing is a basic example to start testing the library in your project. This library works on a user basis\nsystem and here are a few important points to remember:\n\n- currentUser[required]. For no user details pass the prop as currentUser={null}\n- A new user can be redirected using the login/signup links in the logIn[required] prop.\n- The currentData[optional] prop returns an object of current data available after any action such as comment submission, reply, edit or delete.\n- The onSubmitAction returns an object of data with the required information to make an API call after a comment is submitted.\n For more details check out the props list in our detailed documentation.\n This is how the basic default component would look.\n\n```jsx\nimport React from 'react'\nimport { CommentSection} from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\n\nconst DefaultComponent = () => {\n const data =[\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I think you have a point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n timestamp: '2024-09-28T12:34:56Z'\n replies: [],\n }\n ]\n return alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n commentData={data}\n placeholder=\"Write your comment...\"\n onSubmitAction={(data: {\n userId: string\n comId: string\n avatarUrl: string\n userProfile?: string\n fullName: string\n text: string\n replies: any\n commentId: string\n }) => console.log('check submit, ', data)}\n currentData={(data: any) => {\n console.log('current data', data)\n }}\n />\n}\n\nexport default DefaultComponent\n\n```\n\n### Class Implementation\n\n```jsx\nimport React, { PureComponent } from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\n\nclass ClassComponent extends PureComponent {\n state = {\n data: [\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'Hey, Loved your blog! ',\n timestamp: '2024-09-28T12:34:56Z'\n replies: []\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I have a doubt about the 4th point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n timestamp: '2024-09-28T12:34:56Z'\n replies: []\n }\n ]\n }\n\n onSubmitAction = (data: any) => {\n console.log('this comment was posted!', data)\n }\n\n customNoComment = () =>
No comments wohoooo!
\n\n render() {\n return (\n this.onSubmitAction(data)}\n customNoComment={() => this.customNoComment()}\n logIn={{\n onLogin: () => alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n placeholder=\"Write your comment...\"\n />)\n }\n}\n\nexport default ClassComponent\n```\n\n## License\n\nMIT © [RiyaNegi](https://github.com/RiyaNegi)\n" }, { "path": "example/README.md", "content": "This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\nIt is linked to the rc package in the parent directory for development purposes.\n\nYou can run `npm install` and then `npm start` to test your package.\n" }, { "path": "example/package.json", "content": "{\n \"name\": \"rc-example\",\n \"homepage\": \".\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"node ../node_modules/react-scripts/bin/react-scripts.js start\",\n \"build\": \"node ../node_modules/react-scripts/bin/react-scripts.js build\",\n \"test\": \"node ../node_modules/react-scripts/bin/react-scripts.js test\",\n \"eject\": \"node ../node_modules/react-scripts/bin/react-scripts.js eject\"\n },\n \"dependencies\": {\n \"@testing-library/jest-dom\": \"file:../node_modules/@testing-library/jest-dom\",\n \"@testing-library/react\": \"file:../node_modules/@testing-library/react\",\n \"@testing-library/user-event\": \"file:../node_modules/@testing-library/user-event\",\n \"@types/jest\": \"file:../node_modules/@types/jest\",\n \"@types/node\": \"file:../node_modules/@types/node\",\n \"@types/react\": \"file:../node_modules/@types/react\",\n \"@types/react-dom\": \"file:../node_modules/@types/react-dom\",\n \"react\": \"file:../node_modules/react\",\n \"react-comments-section\": \"file:..\",\n \"react-dom\": \"file:../node_modules/react-dom\",\n \"react-scripts\": \"file:../node_modules/react-scripts\",\n \"typescript\": \"file:../node_modules/typescript\"\n },\n \"devDependencies\": {\n \"@babel/plugin-syntax-object-rest-spread\": \"^7.8.3\"\n },\n \"eslintConfig\": {\n \"extends\": \"react-app\"\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n }\n}\n" }, { "path": "example/public/index.html", "content": "\n\n \n \n \n \n \n\n \n \n\n \n react-comments-section\n \n\n \n \n\n
\n\n \n \n\n" }, { "path": "example/public/manifest.json", "content": "{\n \"short_name\": \"react-comments-section\",\n \"name\": \"react-comments-section\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n" }, { "path": "example/src/App.test.tsx", "content": "import React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nit('renders without crashing', () => {\n const div = document.createElement('div')\n ReactDOM.render(, div)\n ReactDOM.unmountComponentAtNode(div)\n})\n" }, { "path": "example/src/App.tsx", "content": "import React from 'react'\nimport AdvancedComponent from './components/AdvancedComponent'\nimport ClassComponent from './components/ClassComponent'\nimport CustomComponent from './components/CustomComponent'\nimport DefaultComponent from './components/DefaultComponent'\nimport LogInComponent from './components/LogInComponent'\n\nconst App = () => {\n return (\n
\n
Demo Examples
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n
\n )\n}\n\nexport default App\n" }, { "path": "example/src/components/AdvancedComponent.tsx", "content": "import React from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\nimport { useState } from 'react'\n\nconst AdvancedComponent = () => {\n let date = new Date()\n\n const [data] = useState([\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: `

Hey loved your blog! Can you show me some other ways to fix solve this?🤔
Here's my Linkedin Profile to reach out.

`,\n timestamp: `${new Date(\n date.getTime() - 5 * 60 * 60 * 1000\n ).toISOString()}`,\n replies: [\n {\n userId: '02a',\n comId: '013',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Adam Scott',\n avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',\n text: `

Yeah sure try adding this line to your code. You need to pass event as a param.

\n 
event.preventDefault()
\n

Best of luck with your project!

\n \"undefined\"\n

`,\n timestamp: `${new Date(\n date.getTime() - 30 * 60 * 1000\n ).toISOString()}`\n },\n {\n userId: '01a',\n comId: '014',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n text: '

OMG! it worked! DO NOT stop this blog series!!!! 💃

',\n timestamp: `${new Date()}`\n }\n ]\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: `
DRY - is the right of passage to good coding
\n

True story brother!! Amen to that! For anyone wondering DRY is 

\n
    \n
  1. Don't
    2. \n
  2. Repeat
    3. \n
  3. Yoursef
    4. \n
`,\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n timestamp: `${new Date(\n date.getTime() - 3 * 60 * 60 * 1000\n ).toISOString()}`,\n replies: []\n }\n ])\n\n return (\n
\n \n Advanced Input Component\n \n {\n console.log('current data', data)\n }}\n logIn={{\n onLogin: () => alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n customImg='https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60'\n inputStyle={{ border: '1px solid rgb(208 208 208)' }}\n formStyle={{ backgroundColor: 'white' }}\n submitBtnStyle={{\n border: '1px solid black',\n backgroundColor: 'black',\n padding: '7px 15px'\n }}\n cancelBtnStyle={{\n border: '1px solid gray',\n backgroundColor: 'gray',\n color: 'white',\n padding: '7px 15px'\n }}\n advancedInput={true}\n replyInputStyle={{ borderBottom: '1px solid black', color: 'black' }}\n />\n
\n )\n}\n\nexport default AdvancedComponent\n" }, { "path": "example/src/components/ClassComponent.tsx", "content": "import React, { PureComponent } from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\n\nclass ClassComponent extends PureComponent {\n state = {\n data: [\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'Hey, Loved your blog! ',\n timestamp: `${new Date()}`,\n replies: [\n {\n userId: '02a',\n comId: '013',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Adam Scott',\n avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',\n text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰',\n timestamp: `${new Date()}`\n },\n {\n userId: '01a',\n comId: '014',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n text: 'thanks!😊',\n timestamp: `${new Date()}`\n }\n ]\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I have a doubt about the 4th point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n timestamp: `${new Date()}`,\n replies: []\n }\n ]\n }\n onSubmitAction = (data: any) => {\n console.log('this comment was posted!,data', data)\n }\n\n render() {\n return (\n
\n \n Class Component\n \n this.onSubmitAction(data)}\n logIn={{\n onLogin: () => alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n />\n
\n )\n }\n}\n\nexport default ClassComponent\n" }, { "path": "example/src/components/CustomComponent.tsx", "content": "import React from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\nimport { useState } from 'react'\n\nconst CustomComponent = () => {\n const [data] = useState([\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'Hey, Loved your blog! ',\n replies: [\n {\n userId: '02a',\n comId: '013',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Adam Scott',\n avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',\n text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'\n },\n {\n userId: '01a',\n comId: '014',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n text: 'thanks!😊'\n }\n ]\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I have a doubt about the 4th point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n replies: []\n }\n ])\n\n const customNoComment = () => (\n
No comments wohoooo!
\n )\n return (\n
\n \n Custom Component\n \n {\n console.log('current data', data)\n }}\n logIn={{\n onLogin: () => alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n onSubmitAction={(data: {\n userId: string\n comId: string\n avatarUrl: string\n userProfile?: string\n fullName: string\n text: string\n replies: any\n }) => console.log('check submit, ', data)}\n onDeleteAction={(data: any) => console.log('comment was deleted', data)}\n onReplyAction={(data: {\n userId: string\n parentOfRepliedCommentId: string\n repliedToCommentId: string\n avatarUrl: string\n userProfile?: string\n fullName: string\n text: string\n }) => console.log('check reply, ', data)}\n onEditAction={(data: any) => console.log('check edit', data)}\n customNoComment={() => customNoComment()}\n imgStyle={{ borderRadius: '0%' }}\n customImg='https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F13%2F2015%2F04%2F05%2Ffeatured.jpg&q=60'\n inputStyle={{ border: '1px solid rgb(208 208 208)' }}\n formStyle={{ backgroundColor: 'white' }}\n submitBtnStyle={{ border: '1px solid black', backgroundColor: 'black' }}\n cancelBtnStyle={{\n border: '1px solid gray',\n backgroundColor: 'gray',\n color: 'white'\n }}\n removeEmoji={true}\n overlayStyle={{ backgroundColor: '#0f0d29', color: 'white' }}\n replyInputStyle={{ borderBottom: '1px solid black', color: 'black' }}\n />\n
\n )\n}\n\nexport default CustomComponent\n" }, { "path": "example/src/components/DefaultComponent.tsx", "content": "import React from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\n\nconst DefaultComponent = () => {\n const data = [\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'Hey, Loved your blog! ',\n timestamp: '2024-09-28T10:34:56Z',\n replies: [\n {\n userId: '02a',\n comId: '013',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Adam Scott',\n avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',\n text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰',\n timestamp: '2024-09-28T12:34:56Z'\n },\n {\n userId: '01a',\n comId: '014',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n text: 'thanks!😊',\n timestamp: '2024-09-28T12:34:56Z'\n }\n ]\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I have a doubt about the 4th point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n timestamp: '2024-09-28T12:34:56Z',\n replies: []\n }\n ]\n return (\n
\n \n Default Component\n \n alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n placeHolder='Write your comment...'\n onSubmitAction={(data: {\n userId: string\n comId: string\n avatarUrl: string\n userProfile?: string\n fullName: string\n text: string\n replies: any\n commentId: string\n }) => console.log('check submit, ', data)}\n currentData={(data: any) => {\n console.log('current data', data)\n }}\n />\n
\n )\n}\n\nexport default DefaultComponent\n" }, { "path": "example/src/components/LogInComponent.tsx", "content": "import React from 'react'\nimport { CommentSection } from 'react-comments-section'\nimport 'react-comments-section/dist/index.css'\n\nconst LogInComponent = () => {\n const data = [\n {\n userId: '01a',\n comId: '012',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'Hey, Loved your blog! ',\n replies: [\n {\n userId: '02a',\n comId: '013',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Adam Scott',\n avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',\n text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'\n },\n {\n userId: '01a',\n comId: '014',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n fullName: 'Riya Negi',\n avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',\n text: 'thanks!😊'\n }\n ]\n },\n {\n userId: '02b',\n comId: '017',\n fullName: 'Lily',\n userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',\n text: 'I have a doubt about the 4th point🤔',\n avatarUrl: 'https://ui-avatars.com/api/name=Lily&background=random',\n replies: []\n }\n ]\n return (\n
\n \n Login Component\n \n alert('Call login function '),\n signUpLink: 'http://localhost:3001/'\n }}\n showTimestamp={false}\n />\n
\n )\n}\n\nexport default LogInComponent\n" }, { "path": "example/src/index.css", "content": "body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n.no-com {\n background-color: aqua;\n}\n.example-div {\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n.example-row {\n display: flex;\n width: 100;\n}\n.title {\n font-size: 18px;\n font-weight: 700;\n margin: 10px 20px;\n}\n.head-title {\n font-size: 24px;\n font-weight: 700;\n display: flex;\n justify-content: center;\n margin: 10px;\n}\n\n@media screen and (max-width: 600px) {\n .example-row {\n display: flex;\n width: 100;\n flex-direction: column;\n }\n}\n" }, { "path": "example/src/index.tsx", "content": "import './index.css'\n\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport App from './App'\n\nReactDOM.render(, document.getElementById('root'))\n" }, { "path": "example/src/react-app-env.d.ts", "content": "/// \n" }, { "path": "example/src/setupTests.ts", "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n" }, { "path": "example/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"module\": \"esnext\",\n \"lib\": [\"dom\", \"esnext\"],\n \"moduleResolution\": \"node\",\n \"jsx\": \"react\",\n \"sourceMap\": true,\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"noImplicitReturns\": true,\n \"noImplicitThis\": true,\n \"noImplicitAny\": true,\n \"strictNullChecks\": true,\n \"suppressImplicitAnyIndexErrors\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"allowSyntheticDefaultImports\": true,\n \"target\": \"es5\",\n \"allowJs\": false,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true\n },\n \"include\": [\"src\"],\n \"exclude\": [\"node_modules\", \"build\"]\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-comments-section\",\n \"version\": \"3.2.0\",\n \"description\": \"React component library for a functioning comments section\",\n \"author\": \"RiyaNegi\",\n \"license\": \"MIT\",\n \"repository\": \"RiyaNegi/react-comments-section\",\n \"main\": \"dist/index.js\",\n \"style\": \"dist/styles.css\",\n \"module\": \"dist/index.modern.js\",\n \"source\": \"src/index.tsx\",\n \"sideEffects\": false,\n \"engines\": {\n \"node\": \">=10\"\n },\n \"scripts\": {\n \"build\": \"microbundle-crl-with-assets --css-modules false --no-compress --format modern,cjs\",\n \"start\": \"microbundle-crl-with-assets --css-modules false watch --no-compress --format modern,cjs\",\n \"prepare\": \"run-s build\",\n \"test\": \"run-s test:unit test:lint test:build\",\n \"test:build\": \"run-s build\",\n \"test:lint\": \"eslint .\",\n \"test:unit\": \"cross-env CI=1 react-scripts test --env=jsdom\",\n \"test:watch\": \"react-scripts test --env=jsdom\",\n \"predeploy\": \"cd example && npm run build\",\n \"deploy\": \"gh-pages -d example/build\"\n },\n \"peerDependencies\": {\n \"react\": \">=16.0.0\"\n },\n \"devDependencies\": {\n \"@testing-library/jest-dom\": \"^4.2.4\",\n \"@testing-library/react\": \"^9.5.0\",\n \"@testing-library/user-event\": \"^7.2.1\",\n \"@types/draftjs-to-html\": \"^0.8.1\",\n \"@types/html-to-draftjs\": \"^1.4.0\",\n \"@types/jest\": \"^25.1.4\",\n \"@types/node\": \"^12.12.38\",\n \"@types/react\": \"^16.14.60\",\n \"@types/react-dom\": \"^16.9.24\",\n \"@types/react-draft-wysiwyg\": \"^1.13.4\",\n \"@typescript-eslint/eslint-plugin\": \"^2.26.0\",\n \"@typescript-eslint/parser\": \"^2.26.0\",\n \"babel-eslint\": \"^10.0.3\",\n \"cross-env\": \"^7.0.2\",\n \"eslint\": \"^6.8.0\",\n \"eslint-config-prettier\": \"^6.7.0\",\n \"eslint-config-standard\": \"^14.1.0\",\n \"eslint-config-standard-react\": \"^9.2.0\",\n \"eslint-plugin-import\": \"^2.18.2\",\n \"eslint-plugin-node\": \"^11.0.0\",\n \"eslint-plugin-prettier\": \"^3.1.1\",\n \"eslint-plugin-promise\": \"^4.2.1\",\n \"eslint-plugin-react\": \"^7.17.0\",\n \"eslint-plugin-standard\": \"^4.0.1\",\n \"gh-pages\": \"^2.2.0\",\n \"microbundle-crl\": \"^0.13.10\",\n \"microbundle-crl-with-assets\": \"^0.13.12\",\n \"npm-run-all\": \"^4.1.5\",\n \"prettier\": \"^2.0.4\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"react-scripts\": \"^3.4.1\",\n \"typescript\": \"^3.9.10\"\n },\n \"files\": [\n \"dist\"\n ],\n \"dependencies\": {\n \"@emotion/react\": \"^11.9.0\",\n \"@szhsin/react-menu\": \"^3.0.1\",\n \"@types/lodash\": \"^4.14.182\",\n \"@types/uuid\": \"^8.3.4\",\n \"draft-js\": \"^0.11.7\",\n \"draftjs-to-html\": \"^0.9.1\",\n \"emoji-picker-react\": \"^3.5.1\",\n \"html-to-draftjs\": \"^1.5.0\",\n \"react-comments-section\": \"^3.0.1\",\n \"react-draft-wysiwyg\": \"^1.14.7\",\n \"react-responsive-modal\": \"^6.2.0\",\n \"sass\": \"^1.51.0\"\n }\n}\n" }, { "path": "packageold.json", "content": "{\n \"name\": \"react-comments-section\",\n \"version\": \"1.0.7\",\n \"description\": \"A react library for building comments section\",\n \"author\": \"RiyaNegi\",\n \"license\": \"MIT\",\n \"repository\": \"RiyaNegi/react-comments\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.modern.js\",\n \"source\": \"src/index.js\",\n \"engines\": {\n \"node\": \">=10\"\n },\n \"scripts\": {\n \"build\": \"microbundle-crl --no-compress --format modern,cjs\",\n \"start\": \"microbundle-crl watch --no-compress --format modern,cjs\",\n \"prepare\": \"run-s build\",\n \"test\": \"run-s test:unit test:lint test:build\",\n \"test:build\": \"run-s build\",\n \"test:lint\": \"eslint .\",\n \"test:unit\": \"cross-env CI=1 react-scripts test --env=jsdom\",\n \"test:watch\": \"react-scripts test --env=jsdom\",\n \"predeploy\": \"cd example && npm install && npm run build\",\n \"deploy\": \"gh-pages -d example/build\"\n },\n \"peerDependencies\": {\n \"react\": \"^16.0.0\"\n },\n \"devDependencies\": {\n \"babel-eslint\": \"^10.0.3\",\n \"cross-env\": \"^7.0.2\",\n \"eslint\": \"^6.8.0\",\n \"eslint-config-prettier\": \"^6.7.0\",\n \"eslint-config-standard\": \"^14.1.0\",\n \"eslint-config-standard-react\": \"^9.2.0\",\n \"eslint-plugin-import\": \"^2.18.2\",\n \"eslint-plugin-node\": \"^11.0.0\",\n \"eslint-plugin-prettier\": \"^3.1.1\",\n \"eslint-plugin-promise\": \"^4.2.1\",\n \"eslint-plugin-react\": \"^7.17.0\",\n \"eslint-plugin-standard\": \"^4.0.1\",\n \"gh-pages\": \"^2.2.0\",\n \"microbundle-crl\": \"^0.13.10\",\n \"npm-run-all\": \"^4.1.5\",\n \"prettier\": \"^2.0.4\",\n \"react\": \"^16.13.1\",\n \"react-dom\": \"^16.13.1\",\n \"react-scripts\": \"^3.4.1\",\n \"sass\": \"^1.50.1\",\n \"@types/uuid\": \"^8.3.4\",\n \"lodash\": \"^4.17.21\",\n \"node-sass\": \"^7.0.1\",\n \"@szhsin/react-menu\": \"^3.0.1\",\n \"react-responsive-modal\": \"^6.2.0\",\n \"@types/lodash\": \"^4.14.182\"\n },\n \"files\": [\n \"dist\"\n ],\n \"dependencies\": {\n \"@types/jest\": \"^27.4.1\",\n \"@types/node\": \"^17.0.25\",\n \"@types/react\": \"^18.0.6\",\n \"@types/react-dom\": \"^18.0.2\",\n \"jquery\": \"^3.5.1\",\n \"node-sass\": \"^5.0.0\",\n \"popper.js\": \"^1.16.1\",\n \"react-uuid\": \"^1.0.2\",\n \"reactjs-popup\": \"^2.0.4\",\n \"typescript\": \"^3.9.10\"\n }\n}\n" }, { "path": "src/.eslintrc", "content": "{\n \"env\": {\n \"jest\": true\n }\n}\n" }, { "path": "src/Index.scss", "content": "/* add css module styles here (optional) */\nbody {\n blockquote {\n border-left: 5px solid #f1f1f1;\n padding-left: 5px;\n }\n pre {\n background: #f1f1f1;\n border-radius: 3px;\n padding: 7px 10px;\n }\n}\n" }, { "path": "src/components/CommentSectionComponent/CommentSection.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');\n\n.overlay {\n display: flex;\n flex-direction: column;\n padding: 20px;\n font-family: 'Noto Sans', sans-serif;\n}\n.replySection {\n border-left: 1px solid rgb(235, 235, 235);\n margin-left: 25px;\n padding: 0px 0px 0px 15px;\n}\n.comment-title {\n font-family: 'Noto Sans', sans-serif;\n font-size: 30px;\n font-weight: 700;\n color: #202020d1;\n}\n.no-comDiv {\n display: flex;\n justify-content: center;\n font-size: 18px;\n font-weight: 700;\n color: #202020d1;\n margin-top: 40px;\n}\n" }, { "path": "src/components/CommentSectionComponent/Index.tsx", "content": "import CommentStructure from '../CommentStructure.tsx/Index'\nimport InputField from '../InputField/Index'\nimport './CommentSection.css'\nimport { useContext } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport _ from 'lodash'\nimport React from 'react'\nimport LoginSection from '../LoginSection/LoginSection'\nimport NoComments from './NoComments'\n\ninterface CommentSectionProps {\n overlayStyle?: object\n logIn: {\n loginLink?: string | (() => void)\n signUpLink?: string | (() => void)\n onLogin?: string | (() => void)\n onSignUp?: string | (() => void)\n }\n hrStyle?: object\n titleStyle?: object\n customNoComment?: Function\n showTimestamp?: boolean\n}\n\nconst CommentSection = ({\n overlayStyle,\n logIn,\n hrStyle,\n titleStyle,\n customNoComment,\n showTimestamp = true\n}: CommentSectionProps) => {\n const handleLogin = () => {\n if (typeof logIn.onLogin === 'function') {\n logIn.onLogin()\n } else if (typeof logIn.loginLink === 'string') {\n window.location.href = logIn.loginLink\n }\n }\n\n const handleSignUp = () => {\n if (typeof logIn.onSignUp === 'function') {\n logIn.onSignUp()\n } else if (typeof logIn.signUpLink === 'string') {\n window.location.href = logIn.signUpLink\n }\n }\n\n const loginMode = () => {\n return \n }\n const globalStore: any = useContext(GlobalContext)\n\n const totalComments = () => {\n let count = 0\n globalStore.data.map((i: any) => {\n count = count + 1\n i.replies.map(() => (count = count + 1))\n })\n return count\n }\n\n return (\n
\n \n {globalStore.commentsCount || totalComments()}{' '}\n {totalComments() === 1 ? 'Comment' : 'Comments'}\n \n
\n {globalStore.currentUserData === null ? (\n loginMode()\n ) : (\n \n )}\n\n {globalStore.data.length > 0 ? (\n globalStore.data.map(\n (i: {\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n userProfile?: string\n replies: Array | undefined\n }) => {\n return (\n
\n \n {i.replies &&\n i.replies.length > 0 &&\n i.replies.map((j) => {\n return (\n
\n \n
\n )\n })}\n
\n )\n }\n )\n ) : customNoComment ? (\n customNoComment()\n ) : (\n \n )}\n
\n )\n}\n\nexport default CommentSection\n" }, { "path": "src/components/CommentSectionComponent/NoComments.tsx", "content": "import React from 'react'\n\nconst NoComments = () => {\n return (\n
\n {' '}\n No comments here. Be the first one to comment!\n
\n )\n}\n\nexport default NoComments\n" }, { "path": "src/components/CommentStructure.tsx/CommentStructure.scss", "content": ".userInfo {\n display: flex;\n flex-direction: column;\n\n .commentsTwo {\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n .fullName {\n display: flex;\n margin-left: 10px;\n font-size: 16px;\n font-weight: 600;\n }\n .commenttimestamp {\n display: flex;\n margin-left: 10px;\n font-size: 14px;\n font-weight: 400;\n color: gray;\n align-items: flex-end;\n }\n }\n}\n.halfDiv {\n display: flex;\n justify-content: space-between;\n}\n.replyBtn {\n background-color: transparent;\n border: none;\n color: gray;\n outline: none;\n font-weight: 600;\n font-size: 14px;\n margin: 2px 5px 0px 0px !important;\n width: 70px;\n padding: 5px;\n border-radius: 4px;\n\n &:hover {\n outline: none;\n background-color: rgba(160, 160, 160, 0.315);\n }\n &:focus {\n outline: 0;\n }\n}\n.userActions {\n margin-top: 20px;\n\n .actionsBtn {\n background-color: transparent;\n border: none;\n padding: 6px;\n border-radius: 50%;\n cursor: pointer;\n &:focus {\n outline: 0;\n }\n &:hover {\n outline: none;\n background-color: rgb(123 123 123 / 10%);\n border-radius: 50%;\n }\n }\n}\n.userLink {\n display: flex;\n text-decoration: none;\n color: inherit;\n align-items: center;\n .imgdefault {\n width: 28px;\n height: 28px;\n border-radius: 14px;\n }\n}\n.replysection {\n display: flex;\n flex-direction: column;\n}\n.infoStyle {\n margin-left: 36px;\n font-size: 15px;\n p {\n margin: 0px;\n }\n}\n.replyIcon {\n background-image: url('../../assets/reply.svg');\n width: 16px;\n height: 13px;\n filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(110deg) brightness(85%)\n contrast(84%);\n margin-right: 5px;\n position: absolute;\n}\n.optionIcon {\n background-image: url('../../assets/options.svg');\n width: 6px;\n height: 6px;\n filter: invert(24%) sepia(0%) saturate(0%) hue-rotate(155deg) brightness(98%)\n contrast(93%);\n padding: 7px;\n background-repeat: no-repeat;\n}\n.szh-menu {\n font-family: sans-serif;\n font-size: 0.925rem;\n user-select: none;\n box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.1);\n border-radius: 6px;\n padding: 6px !important;\n min-width: 7rem;\n left: -70px !important;\n top: -5px !important;\n color: black;\n\n .szh-menu__item {\n padding: 5px;\n }\n .szh-menu__item:hover {\n color: black;\n background-color: #f5f5f5;\n }\n}\n\n.react-responsive-modal-modal {\n max-width: 240px !important;\n h2,\n p {\n text-align: center;\n }\n}\n.deleteBtns {\n display: flex;\n justify-content: center;\n}\n.delete {\n border: none;\n border-radius: 4px;\n background-color: rgb(255 77 0);\n padding: 5px 10px;\n color: white;\n font-weight: bolder;\n font-size: 14px;\n cursor: pointer;\n}\n.cancel {\n border: none;\n border-radius: 4px;\n background-color: rgb(148 148 148);\n padding: 5px 10px;\n color: white;\n font-weight: bolder;\n font-size: 14px;\n cursor: pointer;\n margin-left: 10px;\n}\n" }, { "path": "src/components/CommentStructure.tsx/DeleteModal.tsx", "content": "import { useState, useContext } from 'react'\nimport 'react-responsive-modal/styles.css'\nimport { Modal } from 'react-responsive-modal'\nimport { GlobalContext } from '../../context/Provider'\nimport React from 'react'\n\ninterface DeleteModalProps {\n comId: string\n parentId?: string\n}\n\nconst DeleteModal = ({ comId, parentId }: DeleteModalProps) => {\n const [open, setOpen] = useState(false)\n const onOpenModal = () => setOpen(true)\n const onCloseModal = () => setOpen(false)\n const globalStore: any = useContext(GlobalContext)\n\n return (\n
\n
\n delete\n
\n \n

Are you sure?

\n

Once you delete this comment it will be gone forever.

\n
\n (\n await globalStore.onDelete(comId, parentId),\n globalStore.onDeleteAction &&\n (await globalStore.onDeleteAction({\n comIdToDelete: comId,\n parentOfDeleteId: parentId\n }))\n )}\n >\n Delete\n \n \n
\n \n
\n )\n}\n\nexport default DeleteModal\n" }, { "path": "src/components/CommentStructure.tsx/Index.tsx", "content": "import './CommentStructure.scss'\nimport { useContext } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport InputField from '../InputField/Index'\nimport { Menu, MenuItem } from '@szhsin/react-menu'\nimport '@szhsin/react-menu/dist/core.css'\nimport DeleteModal from './DeleteModal'\nimport React from 'react'\n\ninterface CommentStructureProps {\n info: {\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n userProfile?: string\n timestamp?: string\n replies?: Array | undefined\n }\n editMode: boolean\n parentId?: string\n replyMode: boolean\n showTimestamp?: boolean\n logIn: {\n loginLink?: string | (() => void)\n signUpLink?: string | (() => void)\n onLogin?: string | (() => void)\n onSignUp?: string | (() => void)\n }\n}\n\nconst CommentStructure = ({\n info,\n editMode,\n parentId,\n replyMode,\n showTimestamp\n}: CommentStructureProps) => {\n const globalStore: any = useContext(GlobalContext)\n const currentUser = globalStore.currentUserData\n\n const optionsMenu = () => {\n return (\n
\n {info.userId === currentUser.currentUserId && (\n \n {' '}\n
\n \n }\n >\n globalStore.handleAction(info.comId, true)}\n >\n edit\n \n \n \n \n \n )}\n
\n )\n }\n\n const timeAgo = (date: string | number | Date): string => {\n const units = [\n { label: 'year', seconds: 31536000 },\n { label: 'month', seconds: 2592000 },\n { label: 'day', seconds: 86400 },\n { label: 'hour', seconds: 3600 },\n { label: 'minute', seconds: 60 },\n { label: 'second', seconds: 1 }\n ]\n\n const time = Math.floor(\n (new Date().valueOf() - new Date(date).valueOf()) / 1000\n )\n\n for (let { label, seconds } of units) {\n const interval = Math.floor(time / seconds)\n if (interval >= 1) {\n return `${interval} ${label}${interval > 1 ? 's' : ''} ago`\n }\n }\n\n return 'just now'\n }\n\n const userInfo = () => {\n return (\n \n )\n }\n\n const replyTopSection = () => {\n return (\n
\n
\n
{info.text}
\n {userInfo()}\n
\n {currentUser && optionsMenu()}\n
\n )\n }\n\n const replyBottomSection = () => {\n return (\n
\n
\n {userInfo()}\n {globalStore.advancedInput ? (\n \n ) : (\n
{info.text}
\n )}\n
\n {' '}\n {currentUser && (\n
\n globalStore.handleAction(info.comId, false)}\n >\n
\n Reply\n \n
\n )}\n
\n
\n {currentUser && optionsMenu()}\n
\n )\n }\n\n const actionModeSection = (mode: string) => {\n if (mode === 'reply') {\n return (\n
\n {globalStore.replyTop ? replyTopSection() : replyBottomSection()}\n \n
\n )\n } else {\n return (\n \n )\n }\n }\n\n return (\n
\n {editMode\n ? actionModeSection('edit')\n : replyMode\n ? actionModeSection('reply')\n : globalStore.replyTop\n ? replyTopSection()\n : replyBottomSection()}\n
\n )\n}\n\nexport default CommentStructure\n" }, { "path": "src/components/CommentStructure.tsx/ModalStyles.tsx", "content": "export const modal = {\n fontSize: \"16px\",\n};\n\nexport const modalClose = {\n cursor: \"pointer\",\n position: \"absolute\",\n display: \"block\",\n padding: \"2px 5px\",\n lineHeight: \"20px\",\n right: \"-10px\",\n top: \"-10px\",\n fontSize: \"24px\",\n background: \"#ffffff\",\n borderRadius: \"18px\",\n border: \"1px solid #cfcece\",\n outline: \"none\",\n};\n\nexport const modalHeader = {\n width: \"100%\",\n borderBottom: \"1px solid gray\",\n fontSize: \"18px\",\n textAlign: \"center\",\n padding: \"5px\",\n};\nexport const modalContent = {\n width: \"100%\",\n padding: \"10px 10px\",\n};\n\nexport const modalActions = {\n width: \" 100%\",\n padding: \" 10px 5px\",\n margin: \" auto\",\n textAlign: \" center\",\n};\n\nexport const modalActionBtn = {\n backgroundColor: \"transparent\",\n outline: \"none\",\n border: \"1px solid gray\",\n padding: \"4px 12px\",\n cursor: \"pointer\",\n};\n\nexport const modalDelBtn = {\n backgroundColor: \"transparent\",\n outline: \"none\",\n border: \"1px solid gray\",\n marginLeft: \"10px\",\n padding: \"4px 12px\",\n cursor: \"pointer\",\n};\n" }, { "path": "src/components/InputField/AdvancedInput.tsx", "content": "import React, { useState, useEffect } from 'react'\nimport 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'\nimport { useContext } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport { EditorState, ContentState, convertToRaw } from 'draft-js'\nimport { Editor } from 'react-draft-wysiwyg'\nimport draftToHtml from 'draftjs-to-html'\nimport htmlToDraft from 'html-to-draftjs'\n\ninterface AdvancedInputProps {\n formStyle?: object\n handleSubmit: Function\n mode?: string\n cancelBtnStyle?: object\n submitBtnStyle?: object\n comId?: string\n imgStyle?: object\n imgDiv?: object\n customImg?: string\n text: string\n placeHolder?: string\n}\n\nconst AdvancedInput = ({\n formStyle,\n handleSubmit,\n submitBtnStyle,\n cancelBtnStyle,\n mode,\n comId,\n imgDiv,\n imgStyle,\n customImg,\n text,\n placeHolder\n}: AdvancedInputProps) => {\n const [html, setHtml] = useState('

')\n const globalStore: any = useContext(GlobalContext)\n useEffect(() => {\n if (text != '') {\n setHtml(text)\n }\n }, [text])\n useEffect(() => {\n if (html != '

') {\n setEditor(EditorState.createWithContent(contentState))\n }\n }, [html])\n\n const contentBlock = htmlToDraft(html)\n const contentState = ContentState.createFromBlockArray(\n contentBlock.contentBlocks\n )\n const [editorState, setEditor] = useState(\n EditorState.createWithContent(contentState)\n )\n const [editText, setEditText] = useState('')\n\n const onEditorStateChange: Function = (editorState: any) => {\n setEditor(editorState)\n }\n useEffect(() => {\n setEditText(\n draftToHtml(convertToRaw(editorState.getCurrentContent())).trim()\n )\n }, [editorState])\n\n return (\n
\n
\n \n \n \n
\n
\n \n editText != '

'\n ? (await handleSubmit(e, editText),\n setEditor(EditorState.createEmpty()))\n : null\n }\n >\n
\n \n onEditorStateChange(editorState)\n }\n toolbar={{\n options: [\n 'inline',\n 'blockType',\n 'list',\n 'colorPicker',\n 'link',\n 'emoji',\n 'image'\n ],\n link: {\n inDropdown: false,\n className: undefined,\n component: undefined,\n popupClassName: undefined,\n dropdownClassName: undefined,\n showOpenOptionOnHover: true,\n defaultTargetOption: '_self',\n options: ['link'],\n linkCallback: undefined\n },\n image: {\n className: undefined,\n component: undefined,\n popupClassName: undefined,\n urlEnabled: true,\n uploadEnabled: true,\n alignmentEnabled: true,\n uploadCallback: undefined,\n previewImage: false,\n inputAccept:\n 'image/gif,image/jpeg,image/jpg,image/png,image/svg',\n alt: { present: false, mandatory: false },\n defaultSize: {\n height: 'auto',\n width: 'auto'\n }\n },\n inline: {\n inDropdown: false,\n className: undefined,\n component: undefined,\n dropdownClassName: undefined,\n options: [\n 'bold',\n 'italic',\n 'underline',\n 'strikethrough',\n 'monospace'\n ]\n },\n blockType: {\n inDropdown: true,\n options: ['Normal', 'Blockquote', 'Code'],\n className: undefined,\n component: undefined,\n dropdownClassName: undefined\n },\n list: {\n inDropdown: false,\n className: undefined,\n component: undefined,\n dropdownClassName: undefined,\n options: ['unordered', 'ordered']\n }\n }}\n />\n
\n {/* */}\n
\n {mode && (\n \n mode === 'editMode'\n ? globalStore.handleAction(comId, true)\n : globalStore.handleAction(comId, false)\n }\n >\n Cancel\n \n )}\n

' ? true : false}\n style={globalStore.submitBtnStyle || submitBtnStyle}\n onClick={async (e) =>\n editText != '

'\n ? (await handleSubmit(e, editText),\n setEditor(EditorState.createEmpty()))\n : null\n }\n >\n Post\n \n
\n \n
\n
\n )\n}\n\nexport default AdvancedInput\n" }, { "path": "src/components/InputField/EmojiInput.tsx", "content": "import React, { useRef, useEffect, useState, useContext } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport Picker from 'emoji-picker-react'\nimport './InputField.scss'\n\nfunction useOutsideAlerter(ref: any, setOpen: Function) {\n useEffect(() => {\n function handleClickOutside(event: any) {\n if (ref.current && !ref.current.contains(event.target)) {\n setOpen(!open)\n }\n }\n document.addEventListener('mousedown', handleClickOutside)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [ref])\n}\n\ninterface EmojiInputProps {\n text: string\n setText: Function\n mode?: string\n inputStyle?: object\n placeHolder?: string\n}\n\nconst EmojiInput = ({\n text,\n setText,\n mode,\n inputStyle,\n placeHolder\n}: EmojiInputProps) => {\n const [open, setOpen] = useState(false)\n const [chosenEmoji, setChosenEmoji] = useState<{ emoji?: any }>()\n const wrapperRef = useRef(null)\n useOutsideAlerter(wrapperRef, setOpen)\n\n const globalStore: any = useContext(GlobalContext)\n\n useEffect(() => {\n if (chosenEmoji) {\n let newText = text + ' ' + chosenEmoji.emoji\n setText(newText)\n }\n }, [chosenEmoji])\n\n const onEmojiClick = (event: any, emojiObject: { emoji?: any }) => {\n event\n setChosenEmoji(emojiObject)\n }\n\n return (\n
\n setText(e.target.value)}\n />\n
setOpen(!open)}>
\n {open ? (\n
\n \n
\n ) : null}\n
\n )\n}\n\nexport default EmojiInput\n" }, { "path": "src/components/InputField/Index.tsx", "content": "import './InputField.scss'\nimport { useContext, useEffect, useState } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport React from 'react'\nconst { v4: uuidv4 } = require('uuid')\nimport RegularInput from './RegularInput'\nimport AdvancedInput from './AdvancedInput'\n\ninterface InputFieldProps {\n formStyle?: object\n comId?: string\n fillerText?: string\n parentId?: string\n mode?: string\n customImg?: string\n inputStyle?: object\n cancelBtnStyle?: object\n submitBtnStyle?: object\n imgStyle?: object\n imgDiv?: object\n placeHolder?: string\n}\n\nconst InputField = ({\n formStyle,\n comId,\n fillerText,\n parentId,\n mode,\n customImg,\n inputStyle,\n cancelBtnStyle,\n submitBtnStyle,\n imgStyle,\n imgDiv,\n placeHolder\n}: InputFieldProps) => {\n const [text, setText] = useState('')\n\n useEffect(() => {\n if (fillerText) {\n setText(fillerText)\n }\n }, [fillerText])\n\n const globalStore: any = useContext(GlobalContext)\n\n const editMode = async (advText?: string) => {\n const textToSend = advText ? advText : text\n\n return (\n await globalStore.onEdit(textToSend, comId, parentId),\n globalStore.onEditAction &&\n (await globalStore.onEditAction({\n userId: globalStore.currentUserData.currentUserId,\n comId: comId,\n avatarUrl: globalStore.currentUserData.currentUserImg,\n userProfile: globalStore.currentUserData.currentUserProfile\n ? globalStore.currentUserData.currentUserProfile\n : null,\n fullName: globalStore.currentUserData.currentUserFullName,\n text: textToSend,\n parentOfEditedCommentId: parentId\n }))\n )\n }\n\n const replyMode = async (replyUuid: string, advText?: string) => {\n const textToSend = advText ? advText : text\n\n return (\n await globalStore.onReply(textToSend, comId, parentId, replyUuid),\n globalStore.onReplyAction &&\n (await globalStore.onReplyAction({\n userId: globalStore.currentUserData.currentUserId,\n repliedToCommentId: comId,\n avatarUrl: globalStore.currentUserData.currentUserImg,\n userProfile: globalStore.currentUserData.currentUserProfile\n ? globalStore.currentUserData.currentUserProfile\n : null,\n fullName: globalStore.currentUserData.currentUserFullName,\n text: textToSend,\n parentOfRepliedCommentId: parentId,\n comId: replyUuid\n }))\n )\n }\n const submitMode = async (createUuid: string, advText?: string) => {\n const textToSend = advText ? advText : text\n\n return (\n await globalStore.onSubmit(textToSend, createUuid),\n globalStore.onSubmitAction &&\n (await globalStore.onSubmitAction({\n userId: globalStore.currentUserData.currentUserId,\n comId: createUuid,\n avatarUrl: globalStore.currentUserData.currentUserImg,\n userProfile: globalStore.currentUserData.currentUserProfile\n ? globalStore.currentUserData.currentUserProfile\n : null,\n fullName: globalStore.currentUserData.currentUserFullName,\n text: textToSend,\n replies: []\n }))\n )\n }\n\n const handleSubmit = async (event: any, advText?: string) => {\n event.preventDefault()\n const createUuid = uuidv4()\n const replyUuid = uuidv4()\n mode === 'editMode'\n ? editMode(advText)\n : mode === 'replyMode'\n ? replyMode(replyUuid, advText)\n : submitMode(createUuid, advText)\n setText('')\n }\n\n return (\n
\n {globalStore.advancedInput ? (\n \n ) : (\n \n )}\n
\n )\n}\nexport default InputField\n" }, { "path": "src/components/InputField/InputField.scss", "content": ".form {\n display: flex;\n background-color: rgb(243, 243, 243);\n padding: 20px;\n border-radius: 8px;\n .userImg {\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0px 10px;\n }\n\n .postComment {\n width: 100%;\n border: none;\n border-bottom: 1px solid rgb(24, 24, 24);\n text-decoration: none;\n background-color: transparent;\n margin-left: 6px;\n }\n .postComment:focus {\n outline: none;\n border-bottom: 2px solid rgb(14, 14, 14);\n }\n .postComment::placeholder {\n margin-top: -2px;\n }\n\n .postBtn {\n border: 2px solid rgb(0, 195, 255);\n border-radius: 8px;\n background-color: rgb(0, 195, 255);\n padding: 5px 10px;\n color: white;\n font-weight: bolder;\n margin-left: 15px;\n font-size: 16px;\n cursor: pointer;\n padding: 5px 20px;\n &:hover {\n border: 2px solid rgb(0, 184, 240);\n background-color: rgb(0, 184, 240);\n }\n }\n .cancelBtn {\n border: 2px solid rgb(237, 237, 237);\n border-radius: 8px;\n background-color: rgb(237, 237, 237);\n padding: 5px 10px;\n color: rgb(174, 174, 174);\n font-weight: bolder;\n margin-left: 15px;\n font-size: 16px;\n cursor: pointer;\n padding: 5px 20px;\n &:hover {\n border: 2px solid rgb(210, 210, 210);\n background-color: rgb(210, 210, 210);\n }\n }\n}\n\n.imgdefault {\n width: 38px;\n height: 38px;\n border-radius: 19px;\n}\n.hr-style {\n width: 100%;\n border-top: 1px solid;\n}\n.emoji-input {\n display: flex;\n width: 100%;\n position: relative;\n .emoji-icon {\n background-image: url('../../assets/smile.svg');\n position: relative;\n width: 24px;\n background-repeat: no-repeat;\n top: 14px;\n cursor: pointer;\n }\n}\n.emoji-picker-react {\n z-index: 1000;\n position: absolute !important;\n right: -63px;\n top: 50px;\n}\n\n.rdw-editor-wrapper {\n width: 100%;\n}\n.advanced-form {\n padding: 0px;\n flex-direction: column;\n}\n.rdw-editor-main {\n max-height: 200px;\n overflow: scroll;\n}\n.advanced-btns {\n width: 100%;\n display: flex;\n margin: 6px 0px 0px 0px;\n}\n.advanced-border {\n border: 1px solid #e8e8e8;\n padding: 10px;\n border-radius: 10px;\n .advanced-border:focus-within {\n border: 1px solid #353535;\n }\n}\n.advanced-post {\n margin-left: unset !important;\n}\n.advanced-cancel {\n margin-right: 15px;\n margin-left: unset !important;\n}\n.advanced-overlay {\n display: flex;\n margin: 10px 0px;\n width: 100%;\n}\n.advanced-input {\n margin-left: 6px;\n width: 100%;\n}\n" }, { "path": "src/components/InputField/InputFieldStyles.tsx", "content": "export const inputFrame = {\n backgroundColor: \"gray\",\n};\n" }, { "path": "src/components/InputField/RegularInput.tsx", "content": "import React from 'react'\nimport './InputField.scss'\nimport { useContext } from 'react'\nimport { GlobalContext } from '../../context/Provider'\nimport EmojiInput from './EmojiInput'\n\ninterface RegularInputProps {\n formStyle?: object\n comId?: string\n mode?: string\n customImg?: string\n inputStyle?: object\n cancelBtnStyle?: object\n submitBtnStyle?: object\n imgStyle?: object\n imgDiv?: object\n handleSubmit: Function\n text: string\n setText: Function\n placeHolder?: string\n}\n\nconst RegularInput = ({\n formStyle,\n imgDiv,\n imgStyle,\n customImg,\n mode,\n inputStyle,\n cancelBtnStyle,\n comId,\n submitBtnStyle,\n handleSubmit,\n text,\n setText,\n placeHolder\n}: RegularInputProps) => {\n const globalStore: any = useContext(GlobalContext)\n\n return (\n handleSubmit}\n >\n
\n \n \n \n
\n {globalStore.removeEmoji ? (\n setText(e.target.value)}\n />\n ) : (\n \n )}\n\n {mode && (\n \n mode === 'editMode'\n ? globalStore.handleAction(comId, true)\n : globalStore.handleAction(comId, false)\n }\n >\n Cancel\n \n )}\n (text ? handleSubmit(e) : null)}\n >\n Post\n \n \n )\n}\n\nexport default RegularInput\n" }, { "path": "src/components/LoginSection/LoginSection.scss", "content": ".signBox {\n border: 1px solid rgb(221, 221, 221);\n border-radius: 8px;\n background-color: transparent;\n padding: 15px;\n display: flex;\n justify-content: space-between;\n\n .signLine {\n margin-top: 5px;\n font-weight: 700;\n color: rgb(156, 156, 156);\n font-size: 17px;\n }\n\n .loginBtn {\n border: 2px solid rgb(0, 195, 255);\n border-radius: 8px;\n background-color: transparent;\n padding: 5px 10px;\n color: rgb(0, 195, 255);\n font-weight: bolder;\n margin-right: 10px;\n font-size: 16px;\n cursor: pointer;\n &:hover {\n border: 2px solid rgb(0, 183, 238);\n color: rgb(0, 183, 238);\n }\n }\n .signBtn {\n border: 2px solid rgb(0, 195, 255);\n border-radius: 8px;\n background-color: rgb(0, 195, 255);\n padding: 5px 10px;\n color: rgb(255, 255, 255);\n font-weight: bolder;\n font-size: 16px;\n cursor: pointer;\n &:hover {\n background-color: rgb(0, 183, 238);\n border: 2px solid rgb(0, 183, 238);\n }\n }\n}\n" }, { "path": "src/components/LoginSection/LoginSection.tsx", "content": "import React from 'react'\nimport './LoginSection.scss'\n\ninterface LoginSectionProps {\n loginLink?: string | (() => void)\n signUpLink?: string | (() => void)\n onLogin?: string | (() => void)\n onSignUp?: string | (() => void)\n}\n\nconst LoginSection = ({\n loginLink,\n signUpLink,\n onLogin,\n onSignUp\n}: LoginSectionProps) => {\n const handleLoginClick = () => {\n const loginAction = onLogin || loginLink\n if (typeof loginAction === 'function') {\n loginAction()\n } else if (loginAction) {\n window.location.href = loginAction\n }\n }\n\n const handleSignUpClick = () => {\n const signUpAction = onSignUp || signUpLink\n if (typeof signUpAction === 'function') {\n signUpAction()\n } else if (signUpAction) {\n window.location.href = signUpAction\n }\n }\n\n return (\n
\n
Log in or sign up to leave a comment
\n
\n \n \n
\n
\n )\n}\n\nexport default LoginSection\n" }, { "path": "src/components/ModalStyles.tsx", "content": "export const modal = {\n fontSize: \"16px\",\n};\n" }, { "path": "src/components/data.json", "content": "[\n {\n \"userId\": \"02b\",\n \"comId\": \"017\",\n \"fullName\": \"Lily\",\n \"userProfile\": \"https://www.linkedin.com/in/riya-negi-8879631a9/\",\n \"text\": \"I have a doubt about the 4th point🤔\",\n \"avatarUrl\": \"https://ui-avatars.com/api/name=Lily&background=random\",\n \"replies\": []\n },\n {\n \"userId\": \"02a\",\n \"comId\": \"07\",\n \"fullName\": \"Adam Scott\",\n \"text\": \"Follow my page for more such interesting blogs!😇\",\n \"avatarUrl\": \"https://ui-avatars.com/api/name=Adam&background=random\",\n \"userProfile\": \"https://www.linkedin.com/in/riya-negi-8879631a9/\",\n \"replies\": []\n },\n {\n \"userId\": \"02a\",\n \"comId\": \"015\",\n \"fullName\": \"Robert Jae\",\n \"avatarUrl\": \"https://ui-avatars.com/api/name=Robert&background=random\",\n \"text\": \"Woah pretty helpful! how did you solve for x?\",\n \"replies\": [\n {\n \"userId\": \"01b\",\n \"comId\": \"016\",\n \"userProfile\": \"https://www.linkedin.com/in/riya-negi-8879631a9/\",\n \"fullName\": \"Adam Scott\",\n \"text\": \"Thanks! refer to this link -> acs.com\",\n \"avatarUrl\": \"https://ui-avatars.com/api/name=Adam&background=random\"\n }\n ]\n },\n {\n \"userId\": \"02c\",\n \"comId\": \"018\",\n \"fullName\": \"Robin\",\n \"userProfile\": \"https://www.linkedin.com/in/riya-negi-8879631a9/\",\n \"text\": \"Aaaah! got it got it. Pretty cool\",\n \"avatarUrl\": \"https://ui-avatars.com/api/name=Robin&background=random\",\n \"replies\": []\n }\n]\n" }, { "path": "src/context/Provider.tsx", "content": "import React, { createContext, useEffect, useState } from 'react'\n// const { v4: uuidv4 } = require('uuid')\nimport _ from 'lodash'\n\nexport const GlobalContext = createContext({})\n\nexport const GlobalProvider = ({\n children,\n currentUser,\n replyTop,\n customImg,\n inputStyle,\n formStyle,\n submitBtnStyle,\n cancelBtnStyle,\n imgStyle,\n commentsCount,\n commentData,\n onSubmitAction,\n onDeleteAction,\n onReplyAction,\n onEditAction,\n currentData,\n replyInputStyle,\n removeEmoji,\n advancedInput,\n placeHolder\n}: {\n children: any\n currentUser?: {\n currentUserId: string\n currentUserImg: string\n currentUserProfile?: string | undefined\n currentUserFullName: string\n } | null\n replyTop?: boolean\n customImg?: string\n inputStyle?: object\n formStyle?: object\n submitBtnStyle?: object\n cancelBtnStyle?: object\n imgStyle?: object\n replyInputStyle?: object\n commentsCount?: number\n removeEmoji?: boolean\n commentData?: Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n timestamp?: string\n userProfile?: string\n replies?:\n | Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n timestamp?: string\n userProfile?: string\n }>\n | undefined\n }>\n onSubmitAction?: Function\n onDeleteAction?: Function\n onReplyAction?: Function\n onEditAction?: Function\n currentData?: Function\n advancedInput?: boolean\n placeHolder?: string\n}) => {\n const [currentUserData] = useState(currentUser)\n const [data, setData] = useState<\n Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n userProfile?: string\n timestamp?: string\n replies?:\n | Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n timestamp?: string\n userProfile?: string\n }>\n | undefined\n }>\n >([])\n const [editArr, setEdit] = useState([])\n const [replyArr, setReply] = useState([])\n\n useEffect(() => {\n if (commentData) {\n setData(commentData)\n }\n }, [commentData])\n\n useEffect(() => {\n if (currentData) {\n currentData(data)\n }\n }, [data])\n\n const handleAction = (id: string, edit: boolean) => {\n if (edit) {\n let editArrCopy: string[] = [...editArr]\n let indexOfId = _.indexOf(editArrCopy, id)\n if (_.includes(editArr, id)) {\n editArrCopy.splice(indexOfId, 1)\n setEdit(editArrCopy)\n } else {\n editArrCopy.push(id)\n setEdit(editArrCopy)\n }\n } else {\n let replyArrCopy: string[] = [...replyArr]\n let indexOfId = _.indexOf(replyArrCopy, id)\n if (_.includes(replyArr, id)) {\n replyArrCopy.splice(indexOfId, 1)\n setReply(replyArrCopy)\n } else {\n replyArrCopy.push(id)\n setReply(replyArrCopy)\n }\n }\n }\n\n const onSubmit = (text: string, uuid: string) => {\n let copyData = [...data]\n copyData.push({\n userId: currentUserData!.currentUserId,\n comId: uuid,\n avatarUrl: currentUserData!.currentUserImg,\n userProfile: currentUserData!.currentUserProfile\n ? currentUserData!.currentUserProfile\n : undefined,\n fullName: currentUserData!.currentUserFullName,\n text: text,\n timestamp: `${new Date().toISOString()}`,\n replies: []\n })\n setData(copyData)\n }\n\n const onEdit = (text: string, comId: string, parentId: string) => {\n let copyData = [...data]\n if (parentId) {\n const indexOfParent = _.findIndex(copyData, { comId: parentId })\n const indexOfId = _.findIndex(copyData[indexOfParent].replies, {\n comId: comId\n })\n copyData[indexOfParent].replies![indexOfId].text = text\n setData(copyData)\n handleAction(comId, true)\n } else {\n const indexOfId = _.findIndex(copyData, { comId: comId })\n copyData[indexOfId].text = text\n setData(copyData)\n handleAction(comId, true)\n }\n }\n\n const onReply = (\n text: string,\n comId: string,\n parentId: string,\n uuid: string\n ) => {\n let copyData = [...data]\n if (parentId) {\n const indexOfParent = _.findIndex(copyData, { comId: parentId })\n copyData[indexOfParent].replies!.push({\n userId: currentUserData!.currentUserId,\n comId: uuid,\n avatarUrl: currentUserData!.currentUserImg,\n userProfile: currentUserData!.currentUserProfile\n ? currentUserData!.currentUserProfile\n : undefined,\n fullName: currentUserData!.currentUserFullName,\n text: text,\n timestamp: `${new Date().toISOString()}`\n })\n setData(copyData)\n handleAction(comId, false)\n } else {\n const indexOfId = _.findIndex(copyData, {\n comId: comId\n })\n copyData[indexOfId].replies!.push({\n userId: currentUserData!.currentUserId,\n comId: uuid,\n avatarUrl: currentUserData!.currentUserImg,\n userProfile: currentUserData!.currentUserProfile\n ? currentUserData!.currentUserProfile\n : undefined,\n fullName: currentUserData!.currentUserFullName,\n text: text,\n timestamp: `${new Date().toISOString()}`\n })\n setData(copyData)\n handleAction(comId, false)\n }\n }\n\n const onDelete = (comId: string, parentId: string) => {\n let copyData = [...data]\n if (parentId) {\n const indexOfParent = _.findIndex(copyData, { comId: parentId })\n const indexOfId = _.findIndex(copyData[indexOfParent].replies, {\n comId: comId\n })\n copyData[indexOfParent].replies!.splice(indexOfId, 1)\n setData(copyData)\n } else {\n const indexOfId = _.findIndex(copyData, { comId: comId })\n copyData.splice(indexOfId, 1)\n setData(copyData)\n }\n }\n\n return (\n \n {children}\n \n )\n}\n\nexport default GlobalProvider\n" }, { "path": "src/index.test.tsx", "content": "import CommentSectionComponent from './components/CommentSectionComponent/Index'\n\ndescribe('CommentSectionComponent', () => {\n it('is truthy', () => {\n expect(CommentSectionComponent).toBeTruthy()\n })\n})\n" }, { "path": "src/index.tsx", "content": "import * as React from 'react'\nimport CommentSectionComponent from './components/CommentSectionComponent/Index'\nimport GlobalProvider from './context/Provider'\nimport './Index.scss'\n\ninterface CommentSectionProps {\n currentUser: {\n currentUserId: string\n currentUserImg: string\n currentUserProfile: string\n currentUserFullName: string\n } | null\n logIn: {\n loginLink?: string\n signUpLink?: string\n onLogin?: () => void\n onSignUp?: () => void\n }\n replyTop?: boolean\n customImg?: string\n inputStyle?: object\n formStyle?: object\n submitBtnStyle?: object\n cancelBtnStyle?: object\n overlayStyle?: object\n imgStyle?: object\n replyInputStyle?: object\n commentsCount?: number\n hrStyle?: object\n titleStyle?: object\n onSubmitAction?: Function\n onDeleteAction?: Function\n onReplyAction?: Function\n onEditAction?: Function\n customNoComment?: Function\n currentData?: Function\n removeEmoji?: boolean\n advancedInput?: boolean\n placeHolder?: string\n showTimestamp?: boolean\n commentData: Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n userProfile?: string\n timestamp?: string\n replies?:\n | Array<{\n userId: string\n comId: string\n fullName: string\n avatarUrl: string\n text: string\n timestamp?: string\n userProfile?: string\n }>\n | undefined\n }>\n}\n\nexport const CommentSection = ({\n currentUser,\n customImg,\n inputStyle,\n formStyle,\n submitBtnStyle,\n cancelBtnStyle,\n overlayStyle,\n replyInputStyle,\n logIn,\n imgStyle,\n replyTop,\n commentsCount,\n commentData,\n placeHolder,\n showTimestamp,\n hrStyle,\n titleStyle,\n removeEmoji,\n onSubmitAction,\n onDeleteAction,\n onReplyAction,\n onEditAction,\n customNoComment,\n currentData,\n advancedInput\n}: CommentSectionProps) => {\n return (\n \n \n \n )\n}\n" }, { "path": "src/react-app-env.d.ts", "content": "/// \n" }, { "path": "src/typings.d.ts", "content": "/**\n * Default CSS definition for typescript,\n * will be overridden with file-specific definitions by rollup\n */\ndeclare module '*.css' {\n const content: { [className: string]: string }\n export default content\n}\n\ninterface SvgrComponent\n extends React.StatelessComponent> {}\n\ndeclare module '*.svg' {\n const svgUrl: string\n const svgComponent: SvgrComponent\n export default svgUrl\n export { svgComponent as ReactComponent }\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"outDir\": \"dist\",\n \"module\": \"esnext\",\n \"lib\": [\n \"dom\",\n \"esnext\"\n ],\n \"moduleResolution\": \"node\",\n \"jsx\": \"react\",\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"noImplicitReturns\": true,\n \"noImplicitThis\": true,\n \"noImplicitAny\": true,\n \"strictNullChecks\": true,\n \"suppressImplicitAnyIndexErrors\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"allowSyntheticDefaultImports\": true,\n \"resolveJsonModule\": true,\n \"target\": \"es5\",\n \"allowJs\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"isolatedModules\": true,\n \"noEmit\": true\n },\n \"include\": [\n \"src\",\n \"src/assets\"\n ],\n \"exclude\": [\n \"node_modules\",\n \"dist\",\n \"example\"\n ]\n}\n" }, { "path": "tsconfig.test.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"module\": \"commonjs\"\n }\n}" } ]