{"_id":"@acctglobal/skeleton","_rev":"12-6cbe9424dab03879debcf801fd276e06","name":"@acctglobal/skeleton","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@acctglobal/skeleton","version":"0.1.0","private":false,"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"5.0.0"},"devDependencies":{"@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/react":"^17.0.43","@types/react-dom":"^17.0.14","typescript":"^4.6.3"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test --env=jsdom","eject":"react-scripts eject"},"gitHead":"3fd1f010b745f39d073ddcfdecfac35dbf2087cd","description":"```bash\r yarn add @acctglobal/acct-storefront\r npm install @acctglobal/acct-storefront\r ```","_id":"@acctglobal/skeleton@0.1.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-vnPUbZb2JIjCcUcm378lJwA+u5lZ7YXxJZUAKHDAnm4GB+DHxaaroBjlFLGod279g9UHGjvvE3csHEpa+3l74g==","shasum":"482a0420957c572ad934aed5f58f712b68dc2880","tarball":"https://registry.npmjs.org/@acctglobal/skeleton/-/skeleton-0.1.0.tgz","fileCount":21,"unpackedSize":33146,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoMl7084hZLKWeL8nSUsnNlpTN54quyahlS+ZI/17gbQIgNSNKbKYas3E8Ht42gY7pACMdYqajeUchoGNGkeFcCmM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTHWjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGrg/+LBU0Rfcl10QHB1vD8mFIQ6RUSc8Mjt45WL2kdKE2sOryZ1cL\r\nX+q16KMExh7Ic9bzH+MLiUh4InD7BvIfD1q2pt8AI3FH0HyvGJSoTgwVt1sL\r\nnZql/IFNnn7D27SilSUK0zyPsHmufU2XKjHkGDBMGQteTteh/ZBsgWbIQzBz\r\nTynwb4S2qJcRGb3Q0hmGYQci3utXvhIo2eECZydmzg4P5KUttjC5m0eciDU4\r\nKO10Nuawbx82B9B170tZGHQ/zFfE8VQFKUIbFi6HNlF3D3FGSaTULVdX/rSm\r\n5Md37jjt1HMTRVUM7SzX9tOlADFjrmViIfl8R1MJye6sqBxBAw4hXalD/N8d\r\ncC3NF8sTw0pc4ZLurPEZZNIeZcu7Zx0PqhV/nNAXqWen+KYy4QF3PAyiQLc8\r\nzj9mJQHefxDCjUzlo+OJ+rhtJZw+Mi4VqmmrjvjtesZHQl0KBDlgNbNudpsL\r\nsLdnnm6AzPOmaEqbae7PngWeYEh/qv9B2VfBFcQfjBTbzPcMAUDVXcE2iuFe\r\nVlO+xbUxr7hvFBRyAulyxu8T18Z+a+aZ3soN3QlDZ506BjZf7Txk2vrobLBu\r\ngc1QIM8YJ5oI4Xtfp3xcMgG8Wk7WafGaw95QdYJV2Rl3Vi4faQ8/BZQCKSaC\r\n2SHGQSUchk8QfOyam6Z5lpdrka7OLZaZ0+w=\r\n=rLqv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"icaropaiva","email":"icaro.paiva@acct.global"},"directories":{},"maintainers":[{"name":"raphamarinho","email":"raphael.marinho@acct.global"},{"name":"lucas_acct","email":"lucas.ferraz@acct.global"},{"name":"icaropaiva","email":"icaro.paiva@acct.global"},{"name":"rodrigo-barreto","email":"rodrigo.barreto@acct.global"},{"name":"paulo.ferraz.acct","email":"paulo.ferraz@acct.global"},{"name":"carlos.pellizzari.acct","email":"carlos.pellizzari@acct.global"},{"name":"joao.castro.acct","email":"joao.castro@acct.global"},{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"micas06gua","email":"micael.pereira@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton_0.1.0_1649178019416_0.3235923144646655"},"_hasShrinkwrap":false},"0.2.0":{"name":"@acctglobal/skeleton","version":"0.2.0","private":false,"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"5.0.0"},"devDependencies":{"@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.0.0","@types/jest":"^27.4.1","@types/node":"^17.0.23","@types/react":"^17.0.43","@types/react-dom":"^17.0.14","typescript":"^4.6.3"},"scripts":{"start":"react-scripts start","build":"react-scripts build","test":"react-scripts test","eject":"react-scripts eject"},"gitHead":"a3394466857f0aae0e0e3f807b0efd247132444a","description":"```bash\r yarn add @acctglobal/skeleton\r npm install @acctglobal/skeleton\r ```","_id":"@acctglobal/skeleton@0.2.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-TWHieuqM/DgGYpTvQJHpfsrnPLOE9AQpAR8sCw4/E+WGlc1hGnnP3OnrCCTn9dFABCDv9+ZPFMiGxgfdrT0J6A==","shasum":"1003d1b0d1d7f7f2942fa0836caf7e717a72db72","tarball":"https://registry.npmjs.org/@acctglobal/skeleton/-/skeleton-0.2.0.tgz","fileCount":24,"unpackedSize":33687,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPcMIa3akdamz58j3txwHfamSH7n8fJ6+P2ShhgYBC1AiEAkM5GqikjsN/h0aclz0m3XhnHzV+9CU9A2XsjJcTv/Vs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTahRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrt9xAAlAR2ZZ6hBOQmZUGYdTFk8GMZFfmG+KhWf5drkLDYo9Rm6D8k\r\nviG/3ddTNMIFSRfbAVhzd4kedUlGOsLCOtnuGAy4BiCuXHS0d+tXIRFsAXzE\r\nZWOW2NSJgr6NmkHhsfc5sgwWrxgmqVZ925YsWKphOGJcpvxF82a/FArAbANJ\r\nSbIYgkgV18oRDkFvsjsQHf+BLvAYmUt6AuEdEP0xZqC7MuHZfj6qHgEQ/3oF\r\nCd+OCt74Hq7UvesLFv4WY7pXOo8g5PrdrUul3xmv0Ds97gieA+CcmbuDM7eN\r\nzlqPlYkGd+Eb4IiezIeGObV+tNLpvvjTGS1fDy+OQg/kK6WiFPMBdSNBpv+8\r\nEMzW5dPyHzcBPIUmVRUmDnY+AbIAQ+dFNXX+N+Kb2cBXzXKPYeKACGtBE4hQ\r\n7fLphgKiG4uRoAmaztaiHSHksdRVMbnyNqRDGnTEn6gZ4hjRuQklbJXETlqF\r\nWAAPJp1pAOOiuW0asLvoSUSiUACEzGNrgj5koBDzEHs4Lo7e6l/7u+KCi/o7\r\nq7hr8DW3/qoGdnbrV2jKs4itW+OuQ3ix87hYp2qDtv9r6SpJf4ZqDj6P+LhX\r\nG0Ct9jGpUf3irpgWKZ5c+UTstJbog4fAiZW7V3EeMs1eLfiWBiB9vFBB4mje\r\nlxDUUETkjH7un0NLl2YArf/kp91/+pz1NJk=\r\n=rnPc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"icaropaiva","email":"icaro.paiva@acct.global"},"directories":{},"maintainers":[{"name":"raphamarinho","email":"raphael.marinho@acct.global"},{"name":"lucas_acct","email":"lucas.ferraz@acct.global"},{"name":"icaropaiva","email":"icaro.paiva@acct.global"},{"name":"rodrigo-barreto","email":"rodrigo.barreto@acct.global"},{"name":"paulo.ferraz.acct","email":"paulo.ferraz@acct.global"},{"name":"carlos.pellizzari.acct","email":"carlos.pellizzari@acct.global"},{"name":"joao.castro.acct","email":"joao.castro@acct.global"},{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"micas06gua","email":"micael.pereira@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton_0.2.0_1649256529270_0.05727653880202288"},"_hasShrinkwrap":false},"1.0.0":{"version":"1.0.0","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"tsdx build","test":"tsdx test --passWithNoTests","test:watch":"tsdx test --watch","test:coverage":"tsdx test --coverage","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"jest":{"verbose":true,"collectCoverageFrom":["src/**/*.{ts,tsx,js,jsx}","!src/index.{ts,tsx,js,jsx}","!src/stories/*.{ts,tsx,js,jsx}"]},"name":"@acctglobal/skeleton","author":{"name":"Icaro Paiva"},"module":"dist/skeleton.esm.js","size-limit":[{"path":"dist/skeleton.cjs.production.min.js","limit":"10 KB"},{"path":"dist/skeleton.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.18.2","@size-limit/preset-small-lib":"^7.0.8","@storybook/addon-essentials":"^6.5.7","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^6.5.7","@storybook/addons":"^6.5.7","@storybook/react":"^6.5.7","@storybook/testing-react":"^1.3.0","@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@types/jest":"^28.1.1","@types/react":"^18.0.12","@types/react-dom":"^18.0.5","babel-loader":"^8.2.5","husky":"^8.0.1","react":"^18.1.0","react-dom":"^18.1.0","react-is":"^18.1.0","size-limit":"^7.0.8","tsdx":"^0.14.1","tslib":"^2.4.0","typescript":"^4.7.3"},"description":"```bash yarn add @acctglobal/skeleton npm install @acctglobal/skeleton ```","_id":"@acctglobal/skeleton@1.0.0","_nodeVersion":"14.19.3","_npmVersion":"6.14.17","dist":{"integrity":"sha512-5iuroQzd0vltYGg5BIwNQau1paQKDJMVG/ooHDkO48legFXt5rAq/SCUX/7iqNjjKk/kbmA/8FD4SaEavdTCHw==","shasum":"340cb98d304dfffe8b4ea39615254f6d2e07b218","tarball":"https://registry.npmjs.org/@acctglobal/skeleton/-/skeleton-1.0.0.tgz","fileCount":43,"unpackedSize":156783,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJeDwBNy3GvqKbJAHpS17QJPtX8vKmrSfkvquarCbImQIgWfmKRTXNFlRuK+bknh6vhvvZ9T6YoBYH5yWZcp52Qxc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixe2mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobbQ//TobYIiaLWic44JID3TXG4PPWDxNgOoH+WeBzT6DNDSqfPgqs\r\npPh8JvgrmWBxkDADToYolHxSdOAPck+oCVl1ik4/SLagnDLQFRFz6oeczwe2\r\nh3511skm7rNetxQRMk7yKSANY/BOo19y4EXA/3wYJcXfo9yk1fG4mAc9JqYK\r\nqN9j9EpdgQDJ0ujJSv8og0v9vgo7LRIlF9HibZGzEu/ah5pCcXSj1aFWlrJv\r\ngGK/gEFs0d17skYB0BUpRrkNaBcIkjGg4w3TLy+9l73oraJMLsHR4cYrm7zl\r\nG71IhwjoDJGsiel4xnsTbfnGKGl/k0jxLnvtKrpq2sLFNRUD4d57POeyC+WC\r\nPsDxsuKl/ZQle7IevrkE23/NqvXPgksckUc6gPN4tEXXkLlS+8q4+zcOhJr/\r\nzqJ1/9QXWrezNrGHHBryyx08q8xalNRvLAMSNDxi0UJFI7MO79M2ImmlyijO\r\noeqUoVQe81NE7oxOCoQt0PBaXBA/7Bk9vUY+nGHPsdc/PbR/wfC076nqpz+b\r\nGGmT/Qk75nLBXH5vEXChQadOEmxdQFEYu+0DZrMHnUqp0B3NvNzaAZuPKEp4\r\nMO6Fb+OSlQALoNa+HmGhY3ocrutObAu0nw36d9EQ3bMoGilCNFzdJcHskuRA\r\nfLzcUczOm4qB7T53+ixstzJXbAS4dzctjDM=\r\n=tg0k\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},"directories":{},"maintainers":[{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton_1.0.0_1657138598632_0.8149400417261419"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-05T17:00:19.334Z","0.1.0":"2022-04-05T17:00:19.580Z","modified":"2022-07-06T20:16:39.052Z","0.2.0":"2022-04-06T14:48:49.647Z","1.0.0":"2022-07-06T20:16:38.908Z"},"maintainers":[{"name":"luiz.priolli","email":"luiz.priolli@acct.global"},{"name":"ricardo.freitas","email":"ricardo.freitas@acct.global"},{"name":"fabioacct","email":"fabio@acct.global"}],"description":"```bash yarn add @acctglobal/skeleton npm install @acctglobal/skeleton ```","readme":"## Installation\n\n```bash\nyarn add @acctglobal/skeleton\nnpm install @acctglobal/skeleton\n```\n\n```tsx\nimport { Skeleton } from '@acctglobal/skeleton'\nimport '@acctglobal/skeleton/src/styles/animation.css' // Import if you want to use animation prop\n\n // Simple, single-line loading skeleton\n // Five-lines loading skeleton\n // Four-rows and four-columns loading skeleton table\n // A fake responsive image with 1280px x 650px originally\n```\n\n## Pre-defined classes\n\nThe `Skeleton` can be fully customized from props. But if you want something even more specific, you can use the predefined classes.\nAre they:\n\n- skeleton-container (the outermost level of skeleton);\n- skeleton-wrapper (the wrappers generated from the prop `count`);\n- skeleton-table (the table generated from the prop `table`);\n- skeleton-animation (the div generated from the prop `animation`).\n\n## Props Reference\n\n> **All props are optional**\n\n|Prop|Type|Default|Description|\n|:---:|:--:|:------:|:---:|\n|`width`|`number - string`||Sets the width of the container/wrapper/table|\n|`height`|`number - string`|`1em`|Sets the height of the container/wrapper|\n|`margin`|`number - 'auto'`||Sets the margin of container/wrapper/cell table|\n|`padding`|`number`||Sets the padding of container/wrapper|\n|`border`|`boolean`||Activate the border in container/wrapper/cell table|\n|`borderColor`|`string`|`#000`|Sets the border color|\n|`borderRadius`|`number`||Sets the border radius|\n|`circle`|`boolean`||Sets the border radius in`50%`|\n|`backgroundColor`|`string`|`#ccc`|Sets the background color|\n|`color`|`string`|`#000`|Sets the color of placeholder|\n|`cursor`|`boolean`||Sets the cursor for `progress`|\n|`placeholder`|`string`||Sets the placeholder in container/wrapper|\n|`placeholderPosition`|{**horizontal:**`left-center-right` **,** **vertical:**`top-center-bottom`}||Sets the position of placeholder|\n|`animation`|`boolean`||Activate the loading animation|\n|`animationColor`|`string`|`#ddd`|Sets the loading color animation|\n|`animationDuration`|`number`|`3000`|Sets the time (ms) for the animation complete a cycle|\n|`count`|`number`||Sets the amount of wrappers that will be render|\n|`responsiveImage`|{**srcWidth:**`number` **,** **srcHeight:**`number`} `-` [{**srcWidth:**`number` **,** **srcHeight:**`number` **,** **breakIn?:**`number`}]||Sets a responsive image with the defined height and width. It also accepts an array with several images with defined breakpoints. `For SSR use the next prop`|\n|`responsiveImageSSR`|{**srcWidth:**`number` **,** **srcHeight:**`number`}||Sets a responsive image with the defined height and width|\n|`table`|{**rows:**`number` **,** **columns:**`number`}||Sets the number of rows and columns in the table|\n\n## Examples\n\n### Wrappers in Skeleton\n\nThe default height of wrappers is `1em`, but you can change using the prop `height`.\n\n```tsx\nconst BlogPost = (props) => {\n return (\n
\n

\n {props.title || (\n \n )}\n

\n {props.body || }\n
\n )\n}\n```\n\n### Table in Skeleton\n\nGenerate tables while yours does not load:\n\n```tsx\nconst BlogPost = (props) => {\n return props.myCells.lenght > 0 ? (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
{props.myCells[0]}{props.myCells[1]}{props.myCells[2]}
{props.myCells[3]}{props.myCells[4]}{props.myCells[5]}
{props.myCells[6]}{props.myCells[7]}{props.myCells[8]}
\n ) : (\n \n )\n}\n```\n\n### Responsive Images in Skeleton\n\nYou can also generate several responsive images, with defined breakpoints (no limits for the number of responsive images):\n\n```tsx\nconst BlogPost = (props) => {\n return props.image ? (\n \n ) : (\n \n )\n}\n```\n\n> If you are using SSR and need to render different images for each viewport type, you can render multiple skeletons and style them with css. it's not possible to use the user's screen size in the SSR, but using the media query it works normally. **Follow this example:**\n\n```tsx\nimport './style.scss'\n\nconst BlogPost = (props) => {\n if (typeof window === 'undefined') {\n return (\n
\n \n \n
\n )\n }\n\n if (typeof window !== 'undefined') {\n return (\n \n )\n }\n}\n```\n\n```scss\n.loading {\n .skeleton-container:nth-child(1) {\n @media (min-width: 768px) {\n display: none;\n }\n }\n\n .skeleton-container:nth-child(2) {\n @media (max-width: 767px) {\n display: none;\n }\n }\n}\n```\n\n> The props `placeholderPosition` ~and `animation`~ don't working corretly with SSR. Wait for more atts.\n> Animation working with SSR.\n","readmeFilename":"README.md","author":{"name":"Icaro Paiva"},"license":"MIT"}