{"_id":"@9gustin/storify-react","_rev":"3-89a40a489dff2bcd0e8309b5e858c8cb","name":"@9gustin/storify-react","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@9gustin/storify-react","version":"1.0.0","description":"stories anywhere","author":{"name":"9gustin"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/9gustin/storify.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","@types/jest":"^25.1.4","@types/node":"^12.12.38","@types/react":"^16.9.27","@types/react-dom":"^16.9.7","@typescript-eslint/eslint-plugin":"^2.26.0","@typescript-eslint/parser":"^2.26.0","babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","gh-pages":"^2.2.0","microbundle-crl":"^0.13.10","node-sass":"^5.0.0","normalize.css":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-icons":"^4.1.0","react-scripts":"^3.4.1","typescript":"^4.1.2"},"bugs":{"url":"https://github.com/9gustin/storify/issues"},"homepage":"https://github.com/9gustin/storify#readme","_id":"@9gustin/storify-react@1.0.0","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-AE124pryfq3LFqeKRZ7lWAwtKWMGLakxeRDTTiXPAHNFdg2EwLSUJFPXg6P/EceZZQxF6Yo16QCarvDq2DD8Kw==","shasum":"12ad232083971702e713d10829cc8bbc459fa506","tarball":"https://registry.npmjs.org/@9gustin/storify-react/-/storify-react-1.0.0.tgz","fileCount":29,"unpackedSize":879118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxVcwCRA9TVsSAnZWagAAa+AP/0HfBbehEyLrAzTCxKsZ\nJS5KYB3tk0xPpdodV1gOWP0QBMrbg1OAySaBAIkHrAnSQRd0Wu5HoTHXSaNi\nol9sNTZTUdquvqqoTUwBfwbUJI4l6L0sJVk6WbwvWfUzp2gp7zKz9dnqwwnP\n/wkCT7yllcixlzt3wSPIk5UBhsj7YAVqgcYIrRozM/e2rZWWpfWjTY1jkQZQ\nVNnt0okMDhsxEMLZf6j+wiG9DRDn/eqYV735buY3NOF/NDCajSKrDC0O5/tV\nu13JtrMCNBM0+r4JUMiW76hQblAKiImxBnCuNjFvk1yvnxdPHu7SusdCfa2I\nXF+chWArrriGtCA2NX+d/RKwvhRooCT+WoOVZl2gh0oIxWAH0HzymA0kx9Xs\nyAXS0h5AigbS0PMBjTlUOdfs5iQ5pRXgxBesl9/Y+o6kQ6qBJCfrw1h0E+RB\nfEWbagDmohG+Ew3RoDgp+IMWVIqp5+2v1Pmi6B8res+cL+hZ7e+71NUrF1Pa\nk6IajFZ1moYXy95KRu+FlxJ5FvliYQYzqMQlAIVeusAzeKHgHENhriv2GqxP\nnj3IbOruKrrPxjHR+txm5VXXTOEOkP1fouCJKwBhgp9OXpSaCxCArsOib9aa\nFhytfSW15mXdB14GfqAofvTDNXYjDUnM1W3NlwOBGm3ilyd7+To897/bebNF\nXxz2\r\n=iY4v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1WJesCrA3TwLbxuzOeViX5QGN1cx/tIDHMGQb8RrsTAiAER7krSenVUoDbJ+70+A4AigNo6SwB3j3giKdh1DraEQ=="}]},"_npmUser":{"name":"9gustin","email":"agustinvazquez453@gmail.com"},"directories":{},"maintainers":[{"name":"9gustin","email":"agustinvazquez453@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storify-react_1.0.0_1606768431976_0.6223904471122088"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@9gustin/storify-react","version":"1.0.1","description":"stories anywhere","author":{"name":"9gustin"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/9gustin/storify.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint .","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^16.0.0"},"devDependencies":{"@testing-library/jest-dom":"^4.2.4","@testing-library/react":"^9.5.0","@testing-library/user-event":"^7.2.1","@types/jest":"^25.1.4","@types/node":"^12.12.38","@types/react":"^16.9.27","@types/react-dom":"^16.9.7","@typescript-eslint/eslint-plugin":"^2.26.0","@typescript-eslint/parser":"^2.26.0","babel-eslint":"^10.0.3","cross-env":"^7.0.2","eslint":"^6.8.0","eslint-config-prettier":"^6.7.0","eslint-config-standard":"^14.1.0","eslint-config-standard-react":"^9.2.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^11.0.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.17.0","eslint-plugin-standard":"^4.0.1","gh-pages":"^2.2.0","microbundle-crl":"^0.13.10","node-sass":"^5.0.0","normalize.css":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.0.4","react":"^16.13.1","react-dom":"^16.13.1","react-icons":"^4.1.0","react-scripts":"^3.4.1","typescript":"^4.1.2"},"bugs":{"url":"https://github.com/9gustin/storify/issues"},"homepage":"https://github.com/9gustin/storify#readme","_id":"@9gustin/storify-react@1.0.1","_nodeVersion":"14.13.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-Ah5MosY5BjddXNY/YTArYFEJ5lCtgTEBvWpGuovUV/vsxiv9kZpqeknVr9HfJzfzDBr5tRTFcN5z7woqlDNCmQ==","shasum":"07011a16674789b8e0eb7d24f3914db78513fa4c","tarball":"https://registry.npmjs.org/@9gustin/storify-react/-/storify-react-1.0.1.tgz","fileCount":29,"unpackedSize":883121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxic9CRA9TVsSAnZWagAALScP/0QyYMuT7CbH61l2ECm+\nRD8EuSqk46iS+7fvEie5D1zq/nR1LpKMdnRrxdsMXlGMAF+2WedUZd3LZK19\nGy02Da2G/HcHBAGGKnNNJl2yLaCUNqtIi4adGOz6wVp5t2UqXgo8s0FO0dmg\nYw++N5fUkIQE/D5nQKVU6n6ahlsqJNC3PTJl3ipf3Le8WLCG7Al9KtI+W/5o\nn0Dh9fyp/Gtv6Wxqt6Kzh26eQ2mIKcsrZ9NvO5I8XapG6KtMQgIdtI9xWnUv\neVfInU7p7YtwfTRV5b4A2+VIfTEo05XNLFpS0WnfwcgiUvukuBqwroZFXeaE\nsz5WyONe3DpZhg6mtQwNvsbeOTisRb18HNfVRfQakfHCCwwMAqQAwELSZqL4\n+XxYV5WGmmUbv5/Zs+aOtQo7fVOXkx4rxfy+z4NA5sdDX/I25rpvkOhMMg9Z\n5ke3pwHNpL+b2uAOFzB+AMlSj5mVIwvrwTzXWJUTQ/B92hi8MTB3pig29jwR\nMWqJ/RF/NmJWSe7crW4ih2Tk3kg0iFp7x08I4AGYO3UFi2ItB152JeOeM67B\nCPyj/Gkb29SorsaZN2edE390ioShH0+0M69mbvXA2TQW8pYCOOXkiHwmVHHO\nN+1J2E/3wMpta1Dr1SC0qgZIGWDjaDKl7cTyjF8GKeZIybdpUpsrsjNRIP1W\nQind\r\n=J1Gl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5A5OtfthiM0JIwEXBmqcW9LV0rCTpxJqprw+TpIF75gIgdk6X1B3ZNlC9lvPVQZoPsL3U0umauuUYn7ZoMHq7cAQ="}]},"_npmUser":{"name":"9gustin","email":"agustinvazquez453@gmail.com"},"directories":{},"maintainers":[{"name":"9gustin","email":"agustinvazquez453@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storify-react_1.0.1_1606821692705_0.85858434011913"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2020-11-30T20:33:51.938Z","1.0.0":"2020-11-30T20:33:52.200Z","modified":"2022-04-04T10:51:14.307Z","1.0.1":"2020-12-01T11:21:32.850Z"},"maintainers":[{"name":"9gustin","email":"agustinvazquez453@gmail.com"}],"description":"stories anywhere","homepage":"https://github.com/9gustin/storify#readme","repository":{"type":"git","url":"git+https://github.com/9gustin/storify.git"},"author":{"name":"9gustin"},"bugs":{"url":"https://github.com/9gustin/storify/issues"},"license":"MIT","readme":"# storify :D\n\nstories for you react app\n\n[![NPM](https://img.shields.io/npm/v/storify.svg)](https://www.npmjs.com/package/storify) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## v1:\n\nNPM package that show stories in a line(ordered by relevance and date)\n\n## URL\n\nhttps://www.npmjs.com/package/@9gustin/storify-react\n\n## How to use\n\nAdd package to your aplication\n\n```bash\nnpm i @9gustin/storify-react\n```\n\n### Short\n\n#### App.js\n\n```JSX\nimport React from 'react';\nimport {Storify, useStorify} from '@9gustin/storify-react';\nimport '@9gustin/storify-react/dist/index.css'\nimport initialState from './data/stories.json';\n\nfunction App() {\n const { stories } = useStorify(initialState.stories);\n\n return (\n {console.log(user)}}/>\n );\n}\n\nexport default App;\n```\n\n### Detailed\n\nImport the Storify component and custom hook\n\n```JSX\nimport {Storify, useStorify} from '@9gustin/storify-react';\n```\n\n### useStorify (Custom Hook)\n\n| Param | Type | Description |\n| -------------- | ------- | --------------------------------------------------------- |\n| initialStories | Story[] | represent the list of stories to start the state variable |\n\n| Return | Type | Description |\n| ---------- | ------------- | --------------------------------------------------------------------------------------------------------------- |\n| stories | Story[] | represent the list of stories that are managed in the state, and you should pass it to the Storify component |\n| addStories | Function:void | that function gives you the possibility to add stories, and that's rendered in the Storify component |\n| setStories | Function:void | that function give you the possibility to set the list of stories, and that's rendered in the Storify component |\n\nUse:\n\n```JSX\n const { stories, addStories, setStories } = useStorify(initialStories);\n```\n\n### Storify (Component)\n\n| Prop Name | Type | Description |\n| ------------------- | ------------- | ---------------------------------------------------------------------------------------- |\n| imgSize | string | represent the size of story buttons, receive the css property \"width\"/\"height\" |\n| stories | Story[] | represent the list of stories that the component should render |\n| viewProfileCallback | Function:User | the function that would be called when the user wants to view an user profile |\n| storyBorderColor | string | represent the color of story buttons borders, that receive the css property border-color |\n\nUse:\n\n```JSX\n {console.log(user)}}/>\n```\n\n### Models\n\nStory\n\n| Property | Type | Description |\n| --------- | ------ | -------------------------- |\n| user | User | the owner of story |\n| id | string | the identificator of story |\n| createdAt | string | the creation date of story |\n| imageUrl | number | the url of story image |\n\nUser\n\n| Property | Type | Description |\n| --------- | ------ | ------------------------------------------------------ |\n| username | string | the identificator of a user |\n| imageUrl | string | the url of user profile image |\n| relevance | number | the stories are ordered firstly for the user relevance |\n\n#### About the order of stories\nThe stories (in the timeline of stories are ordered by user's relevance, and after by createdAt property of story, the users with new stories are shown first). And when the user clicks to view stories from a user the that's are shown by date ascending(from older to newer)\n\n### Import styles\n\n```JSX\nimport '@9gustin/storify-react/dist/index.css'\n```\n\n## Future releases:\n\n- Next story automatically, with time/progress bar\n- Save actual user in state\n- take response to stories, with a custom callback\n- Button \"Add story\" with a custom callback\n- Custom stories(colors, to group of persons)\n\n## License\n\nMIT © [9gustin](https://github.com/9gustin)\n","readmeFilename":"README.md"}