{"_id":"8base-chat","_rev":"1-9acaa2e5363bbacecb0d02a8aa2b3cbc","name":"8base-chat","dist-tags":{"latest":"2.2.1"},"versions":{"2.2.1":{"name":"8base-chat","version":"2.2.1","author":{"name":"Alexey Ryabov"},"license":"MIT","description":"Chat component that uses 8base","main":"dist/8base-chat.cjs.js","module":"dist/8base-chat.esm.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","prebuild":"npm run graphql-types && npm run validate && npm run declarations","build":"rollup -c","dev":"concurrently --kill-others \"rollup -c -w\" \"npm run declarations -- -w\"","tslint":"tslint -p tsconfig.json -c tslint.json","typecheck":"tsc --noEmit","declarations":"tsc --emitDeclarationOnly","graphql-types":"graphql-codegen --config codegen.yml","prettier":"prettier --config ./.prettierrc \"**/!(*.?(s)css.d).+(js|jsx|ts|tsx|json|yaml|yml|css|sass|scss|md|mdx|graphql)\"","format":"npm run prettier -- --write","validate":"npm run tslint && npm run prettier -- --list-different && npm run typecheck","prepublish":"npm run clean && npm run build"},"peerDependencies":{"react":"^16.8.0","react-dom":"^16.8.0"},"dependencies":{"@8base/apollo-links":"^0.37.2","@8base/boost":"^1.9.1","@8base/file-input":"^0.37.2","apollo-cache-inmemory":"^1.6.2","apollo-client":"^2.6.3","apollo-link":"^1.2.12","apollo-link-batch-http":"^1.2.12","apollo-link-context":"^1.0.18","apollo-link-error":"^1.1.11","apollo-link-http":"^1.5.15","apollo-utilities":"^1.3.2","classnames":"^2.2.6","emoji-mart":"^2.11.1","graphql":"^14.4.2","graphql-tag":"^2.10.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.15","pubsub-js":"^1.7.0","react-apollo":"^2.5.8","ts-invariant":"^0.4.4"},"devDependencies":{"@graphql-codegen/cli":"^1.4.0","@graphql-codegen/typescript":"^1.4.0","@graphql-codegen/typescript-operations":"^1.4.0","@graphql-codegen/typescript-react-apollo":"^1.4.0","@modular-css/rollup":"^24.2.2","@types/classnames":"^2.2.9","@types/emoji-mart":"^2.8.4","@types/hoist-non-react-statics":"^3.3.1","@types/lodash":"^4.14.136","@types/node":"^12.6.2","@types/pubsub-js":"^1.5.18","@types/react":"^16.8.23","@types/react-dom":"^16.8.4","autoprefixer":"^9.6.1","concurrently":"^4.1.1","cssnano":"^4.1.10","husky":"^3.0.0","lint-staged":"^9.2.0","postcss-nested":"^4.1.2","prettier":"^1.18.2","rimraf":"^2.6.3","rollup":"^1.19.3","rollup-plugin-commonjs":"^10.0.2","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript":"^1.0.1","tslint":"^5.18.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.0.1","tslint-react":"^4.0.0","typescript":"3.5.3","utility-types":"^3.7.0"},"keywords":["8base","chat","react"],"gitHead":"1a563a2b59e4f98cb1d071cb966134c1002008db","_id":"8base-chat@2.2.1","_nodeVersion":"12.16.3","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qy/3RruuqfCkBt8dC/8I0eYB1vEHb2uNeN9svLkNCaBA7T2GeylmBPh2ee18ybhTBx3byVPPueg5UvwHyhtJUQ==","shasum":"02c7a21bdd23a859f1b1272403e849d4d1ca2138","tarball":"https://registry.npmjs.org/8base-chat/-/8base-chat-2.2.1.tgz","fileCount":212,"unpackedSize":1090089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2FIOCRA9TVsSAnZWagAAcDQP/j3O3g37WFF8AAddn+zJ\ndEFpf1iixcX2IVdmJiJ3pL3xzb03h2BDmQH1t1X73j/I2HS+YWxJVRjImwoo\npT3+cwVUHY17pUu8VJ8Ikh5rwUI8m2ohvoFzop+o1ap0FIfsmGZL8PbGjHy6\nsWBZRenJxvEJE5jdtWeaqQeBvkXDtEWlHMabClIbyHLjgDllwhgpxCY+sA01\nKxNqUpkiYJSOx9msJE98p/aa4SfUMiNcf62zRSsF6BFNLmq6nIfb/OalenuW\nDaKwmb6BWTwy/kQciXpYvR3wSg/1woD4mzaTxLSC50Hc242NxlRP3otL1KP4\naeBP64IH1SI4cgf3E/4B3I9jum7y4eWmDMKtguGzdamuJ0jD7q7pJEftrtJ5\nsUxVBKrH/EWEifz+PO8As5OSuXKWEBQMWEypcO9zb3iBg/lvpiUF91o/xRog\nbkQdYvv5L/S3NP8MU37ZJ3DU39GBPiLGYuAFUX1tYIujdxC7qkLSvDE2+ktx\nNcGPUSqEklU8HWLGucwcPDBYY1gUaOlDZ8J3EWZDsZwvPunZ85O+gIXFgU44\nITX3UVIjSSnl9pEMx2k5GbXgKPQAz7Cv4tmY6aF22DQO0M6LY+u1+/ayesq4\njrIW7Ph9vbwD5wnoYZ3LxNYx2la75rj4WvFtQJ70AB8k3RKiorVDpobLUJ5g\nd1l8\r\n=1c/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHDjnweMdK9cD1kOIJs3Q7dBfxhGr8J3ux/oqNa6P5OAiEA90Ryk91M37NHRHz5SpgkmjPP3yDHj6KQbzTuUM8T+4s="}]},"maintainers":[{"name":"alacret","email":"alacret@gmail.com"}],"_npmUser":{"name":"alacret","email":"alacret@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/8base-chat_2.2.1_1591235085602_0.021396176087348673"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-04T01:44:45.570Z","2.2.1":"2020-06-04T01:44:45.823Z","modified":"2022-04-04T10:24:46.899Z"},"maintainers":[{"name":"alacret","email":"alacret@gmail.com"}],"description":"Chat component that uses 8base","keywords":["8base","chat","react"],"author":{"name":"Alexey Ryabov"},"license":"MIT","readme":"<<<<<<< HEAD\n\n# 8base Chat\n\n## Usage\n\nYou should have `react` and `react-dom` as dependencies.\n\nExample of usage (you can find code in `example/src/pages/chat/index.tsx`):\n\n```jsx\n// You need to import styles\nimport '8base-chat/dist/8base-chat.css';\n\nimport { withLogout } from '@8base/auth';\nimport React, { useCallback, useState } from 'react';\nimport { Query } from 'react-apollo';\n\n// After you imported styles you can use Chat\nimport Chat from '8base-chat';\nimport { API_ENDPOINT, WORKSPACE_ID } from 'shared/constants';\nimport { USER_QUERY } from 'shared/graphql';\n\nfunction ChatPage({ logout, auth }) {\n  const [isSidebarVisible, setIsSidebarVisible] = useState(true);\n\n  const toggleSidebar = useCallback(() => {\n    setIsSidebarVisible(value => !value);\n  }, []);\n\n  const onLogoutClick = useCallback(() => {\n    logout();\n  }, [logout]);\n\n  return (\n    <div>\n      <button onClick={onLogoutClick}>Logout</button>\n      <button onClick={toggleSidebar}>Toggle sidebar</button>\n\n      <Query query={USER_QUERY}>\n        {({ loading, data }) => {\n          if (loading || !data) {\n            return <div>Loading...</div>;\n          }\n\n          return (\n            <Chat\n              currentUser={data.user} // We need it to fetch data for currentUser (channels, etc.)\n              uri={API_ENDPOINT} // Where requests will be sent\n              authToken={auth.authState.token} // Will be used in requests 'authorization' header\n              workspaceId={WORKSPACE_ID} // We need it for subscriptions\n              isSidebarVisible={isSidebarVisible}\n              // You can specify which sections to display\n              sections={{\n                channels: true,\n                contacts: true,\n                dm: true,\n              }}\n            />\n          );\n        }}\n      </Query>\n    </div>\n  );\n}\n\nexport default withLogout(ChatPage);\n```\n\n## Styling\n\nThe chat uses CSS Variables for colors. If you want to change colors change the following variables:\n\n```css\n:root {\n  --chat-primary-color: #3eb7f9;\n  --chat-primary-bg-color: #fff;\n  --chat-hover-bg-color: #f4f7f9;\n  --chat-primary-text-color: #323c47;\n  --chat-secondary-text-color: #939ea7;\n  --chat-primary-border-color: #d0d7dd;\n  --chat-placeholder-color: var(--chat-secondary-text-color);\n  --chat-active-presence-color: #00bb6e;\n  --chat-message-bg-color: #4da1ff;\n  --chat-message-text-color: #fff;\n  --chat-message-link-color: var(--chat-message-text-color);\n  --chat-my-message-bg-color: var(--chat-primary-bg-color);\n  --chat-my-message-text-color: var(--chat-primary-text-color);\n  --chat-my-message-link-color: var(--chat-primary-color);\n}\n```\n\n## Development\n\nLaunch watch mode for the chat package\n\n```\nnpm run dev\n```\n\nLaunch the example in order to see how the chat works\n\n```\ncd example\nnpm start\n```\n\nIn order to generate graphql types, apollo operations and so on, run the command below:\n\n```\nnpm run graphql-types\n```\n\n## Polyfills\n\nIt uses `AbortController` to cancel requests. If you need support browsers that don't support it you can add a polyfill (e.g. [abortcontroller-polyfill](https://www.npmjs.com/package/abortcontroller-polyfill))\n","readmeFilename":"README.md"}