{"_id":"@burna/monster-design-system","_rev":"8-73df668faad79eec2bc1102ff5d3e353","name":"@burna/monster-design-system","dist-tags":{"latest":"1.2.14"},"versions":{"1.2.6":{"name":"@burna/monster-design-system","version":"1.2.6","_id":"@burna/monster-design-system@1.2.6","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"5315330270afbe1be0745208aef42510a05edd8f","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.6.tgz","fileCount":463,"integrity":"sha512-1ryt3InXtVS+rvsL9JIyDbp4LWqAUOUxxDWziWptvJvLQ150sanLA1eEEXDWnZDIaIx0O5xHodNuT/uo2aAQHQ==","signatures":[{"sig":"MEYCIQC74x+C5EJaqKuM1ExP/Ad/kTyWkGjVuUfPsSmrDJWj5QIhANm1E32ZT2h8Hq0LeWG1WFPf3t7S+FK3MFg3LUN6cdE6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7347485},"main":"dist/main.js","gitHead":"650137891fde060f44966ffb8ed80aa450884ebf","scripts":{"build":"webpack","install":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"8.19.4","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.6_1699112747004_0.5238765289187892","host":"s3://npm-registry-packages"}},"1.2.7":{"name":"@burna/monster-design-system","version":"1.2.7","_id":"@burna/monster-design-system@1.2.7","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"35f390596c6bfb0211d01148f938e5f3e5426d68","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.7.tgz","fileCount":463,"integrity":"sha512-guzbyIxPcx+X4o3wOkNi3YVp0glYQbGJFJ8doagkbazeXEjIppe3QM2jvRxSOl42s0KR3XUlwdLGbzecqTgucA==","signatures":[{"sig":"MEUCIBL1nV7WE53ffLuBBz1PsiUpjnMhwMpgG3AY5oKsx4aaAiEAydruyM6rSzZWw2pYpGDm2JJH0ikuS1d618oJkx4X1BM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7347853},"main":"dist/main.js","gitHead":"3de76bcbf315cbf8d98e3392b7000c9492ef7ee1","scripts":{"build":"webpack","install":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"8.19.4","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.7_1700469831220_0.7673719651303186","host":"s3://npm-registry-packages"}},"1.2.8":{"name":"@burna/monster-design-system","version":"1.2.8","_id":"@burna/monster-design-system@1.2.8","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"1400897cdee1584eddc31704caa7329371ed2a9f","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.8.tgz","fileCount":463,"integrity":"sha512-RWq1JrzgTR0FcQllHg/AmWJ+urGKkPHxL7zigQJoCuECxHXfFHdbnR0aEIWFhlZ0tjwUgc8sLwFnZq7CSoEY0w==","signatures":[{"sig":"MEUCIQDaNAlPEqxsGo39OctGj19gXVXmEl3Q5//Q0/hztm9qGwIgUlJF6WfUV0BcPmOMgcHjh5QSlO6SHxiAu17bH1ZfmXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7347981},"main":"dist/main.js","gitHead":"cf4b8fb3cc9d95c24db8e586a04ed6efd98bf7dd","scripts":{"build":"webpack","install":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"7.10.0","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.0.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.8_1706437447222_0.7825998933964242","host":"s3://npm-registry-packages"}},"1.2.10":{"name":"@burna/monster-design-system","version":"1.2.10","_id":"@burna/monster-design-system@1.2.10","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"0140b3d9c05bec5ec66f589434e79cb58e781db2","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.10.tgz","fileCount":463,"integrity":"sha512-Zfqm/N7YkyAC+kBpkSLSSirpaCGINYhy6BfnO4gasdI1AIeBRcEZ6TDImochNEToKx1CUHHQT4nTpXs84GPWww==","signatures":[{"sig":"MEQCIHkaTmdEddKJTiuQoN0HE5dwAnT5YSykV1ndTGU5ICbUAiANrL/Bs9SxkQIPSN41Ty5m5K2tnvLO1yhmB/ACWclotA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7355808},"main":"dist/main.js","gitHead":"8cb20f1468c794bb99d91072973acf6fde8fffca","scripts":{"build":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"8.19.4","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.10_1716202578790_0.44733996097356665","host":"s3://npm-registry-packages"}},"1.2.11":{"name":"@burna/monster-design-system","version":"1.2.11","_id":"@burna/monster-design-system@1.2.11","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"1e1930f5e024208bdcbf1c7fdca51f9cf3fda541","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.11.tgz","fileCount":463,"integrity":"sha512-9VXyfo749CPLgWxknIiU/ZeYWGXRnw3WaGQORnnIK37Jov4XHPTHlU8acVFtLXfSYmong4qwGLnvDOSx7mGwWA==","signatures":[{"sig":"MEYCIQCsCppJVD1pRWX1t+ks0W0TdM0CSB/iCImhvxGIVP66EQIhALLHmKlOqk+471Q02L14OX9DfXpPqAQhM2ETUOD9MSI+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7356361},"main":"dist/main.js","gitHead":"d48353418a88f7e5595b1bf892878fdf4063e7fb","scripts":{"build":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"8.19.4","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.11_1723612248710_0.24607595698069828","host":"s3://npm-registry-packages"}},"1.2.12":{"name":"@burna/monster-design-system","version":"1.2.12","_id":"@burna/monster-design-system@1.2.12","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"477dbb25bb39140cde37ec287736caa230aa6043","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.12.tgz","fileCount":463,"integrity":"sha512-g6Bnw9SJpu/h+nvDJKEJwCN4nLAMi4bJki7pOXs4ftCBNF/SuwPOldRHFwirGDYSPOAMrHQ0Q50dwyYN2pnS0g==","signatures":[{"sig":"MEUCIQDre+TJQkjGhhlFfEnabGkR3fvm4agesoyAGWbW8jZTuwIgIET219SPTjhGSOJlMwDTOGqDKlNXlQ4T7tb+dZVoZsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":7357134},"main":"dist/main.js","gitHead":"a71488baa9538df18bc66c5aad39dcfe92e7f02b","scripts":{"build":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"8.19.4","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"16.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.12_1728467447956_0.21321145926726692","host":"s3://npm-registry-packages"}},"1.2.13":{"name":"@burna/monster-design-system","version":"1.2.13","_id":"@burna/monster-design-system@1.2.13","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"dist":{"shasum":"e240e3dea337745c62de1b7d52dfd0e92b15e135","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.13.tgz","fileCount":463,"integrity":"sha512-Y1a/bF6OjNQzih9JDpo5oyT9U1xyQTrbXUt8slZ8h/GFCWxDpXg/BBT838iN+BcdJfKyskuozc0o2lluGvthOw==","signatures":[{"sig":"MEYCIQCTQwAk6EV2P5HVxJPu62Cj67g0M/Az2wYNSqyoV7rUEwIhAM/vEi9J1J7RhVSqiuJO0aMUoFB1JLTs4i3USMamjnjT","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7357185},"main":"dist/main.js","gitHead":"21b69a0935e7467f2efc94823a08970227e2fc94","scripts":{"build":"webpack"},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"_npmVersion":"10.8.1","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","directories":{},"_nodeVersion":"20.16.0","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.58.2","webpack":"^5.80.0","css-loader":"^6.7.3","@babel/core":"^7.21.4","sass-loader":"^13.2.2","webpack-cli":"^5.0.2","babel-loader":"^9.1.2","style-loader":"^3.3.2","@babel/preset-react":"^7.18.6","@babel/plugin-proposal-optional-chaining":"^7.21.0"},"_npmOperationalInternal":{"tmp":"tmp/monster-design-system_1.2.13_1746260213135_0.7225909294198374","host":"s3://npm-registry-packages-npm-production"}},"1.2.14":{"name":"@burna/monster-design-system","version":"1.2.14","main":"dist/main.js","scripts":{"build":"webpack"},"devDependencies":{"@babel/core":"^7.21.4","@babel/plugin-proposal-optional-chaining":"^7.21.0","@babel/preset-react":"^7.18.6","babel-loader":"^9.1.2","css-loader":"^6.7.3","sass":"^1.58.2","sass-loader":"^13.2.2","style-loader":"^3.3.2","webpack":"^5.80.0","webpack-cli":"^5.0.2"},"_id":"@burna/monster-design-system@1.2.14","gitHead":"8fc783bc4218537958faea0c539c2de2ad58798a","description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","_nodeVersion":"20.16.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-secKSqBUckrfB1qaMAwlpTkiB6VoZC8W17kyqvw7jFaPAOwdo8k303sZ90wlrr1s4fQF3ondsZ77cGnl8ZGoSg==","shasum":"046fd259a06e1b8cc2af1ce5ab6a3e1358e9a9cd","tarball":"https://registry.npmjs.org/@burna/monster-design-system/-/monster-design-system-1.2.14.tgz","fileCount":463,"unpackedSize":7360300,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDGAgZG3POQKRzxz9fFyZz0MZQn9zVTm751lQ/XNz4l2AiEA/9all3TRdyU9OYQAoyTHefqNGe9axX26fJjuuUZ9zs4="}]},"_npmUser":{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"},"directories":{},"maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/monster-design-system_1.2.14_1757758242223_0.8329165283515849"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-04T15:45:46.944Z","modified":"2025-09-13T10:10:42.702Z","1.2.6":"2023-11-04T15:45:47.317Z","1.2.7":"2023-11-20T08:43:51.453Z","1.2.8":"2024-01-28T10:24:07.481Z","1.2.10":"2024-05-20T10:56:19.034Z","1.2.11":"2024-08-14T05:10:48.962Z","1.2.12":"2024-10-09T09:50:48.211Z","1.2.13":"2025-05-03T08:16:53.404Z","1.2.14":"2025-09-13T10:10:42.461Z"},"description":"نحوه استفاده --- - پکیج را نصب کنید. - فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید. ```jsx import 'monster-design-system/styles.css' ``` - سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید. ```jsx import { Button, Textfield } from 'm","maintainers":[{"name":"msjavan","email":"javan.it@gmail.com"},{"name":"seyedmiladhashemi","email":"s.milad.hashemi@gmail.com"},{"name":"morteza.biabani","email":"mortaza.biabani@gmail.com"},{"name":"mahsashadi","email":"mahsa.shadi@mail.um.ac.ir"}],"readme":"نحوه استفاده\n---\n- پکیج را نصب کنید.\n- فایل css را یک بار در ابتدای نرم‌افزار ایمپورت کنید.\n```jsx\nimport 'monster-design-system/styles.css'\n```\n- سپس هر جا که خواستید کامپوننت‌ها را ایمپورت کرده و استفاده کنید.\n```jsx\nimport { Button, Textfield } from 'monster-design-system'\n\n\n\n```\n\nنحوه تعریف کامپوننت جدید\n---\nهر کامپوننت یک فولدر است که با حرف بزرگ شروع شده و در داخل فولدر components قرار دارد. برای افزودن کامپوننت جدید یک فولدر ساخته و داخل آن ۳ فایل زیر را قرار دهید:\n- `index.js`\n- `style.scss`\n- `readme.md`\n\nدر تعریف محتوای این فایل‌ها به نکات زیر توجه کنید:\n- دو فایل `variables.scss` و `mixins.scss` موجود در فولدر `shared` به طور خودکار در تمام فایل‌های `style.scss` قابل دسترسی هستند و نیازی به ایمپورت ندارند.\n- عکس‌ها در فولدر `assets/images` بر اساس پسوند فایل در فولدر مناسب خود قرار گرفته‌اند. برای استفاده از عکس‌ها کافی‌است نام آن‌ها را بیاوریم. مثلا برای دسترسی به فایل موجود در `assets/images/png/picture.png` کافی‌است بنویسیم:\n```scss\nbackground-image: url('picture.png');\n```\n- همچنین برای دسترسی به `assets/images/svg/sub-folder-1/sub-folder-2/file.svg` کد زیر را می‌نویسیم. توجه شود که نام فولدر (در اینجا `svg`) از پسوند عکس به طور خودکار محاسبه می‌شود:\n```scss\nbackground-image: url('sub-folder-1/sub-folder-2/file.svg');\n```\n- کتابخانه‌های `react` و `prop-types` و همچنین تعدادی از توابع پر‌استفاده‌ی `react` مثل `useState`، `useEffect` و `memo` به طور خودکار در تمام فایل‌های `index.js` قابل دسترسی هستند و نیازی به ایمپورت ندارند.\n- در فایل `index.js` نام کامپوننت باید هم‌نام فولدر باشد و نیازی به `export` ندارد.\n- برای هر کامپوننت باید `propTypes` و `defaultProps` [تعریف شود](https://reactjs.org/docs/typechecking-with-proptypes.html). قبل از هر پراپ نام‌برده‌شده در `propTypes` کامنتی بنویسید که کاربرد آن را توضیح دهد. به عنوان مثال:\n```jsx\nButton.propTypes = {\n /**\n * متن دکمه\n */\n text: PropTypes.string.isRequired,\n // ...\n}\n```\n- ساختار کامنت‌های بالای پراپ‌ها مهم است. باید حتما ۳ خط باشد و خط اول شامل ۲ ستاره و خطوط بعدی شامل یک ستاره باشند.\n- تابع `cn` در تمام فایل‌های `js` قابل دسترسی است. این تابع که مخفف `className` است به ما در گرفتن نام کلاس‌ها کمک می‌کند. به عنوان مثال فرض کنید فایل `components/Button/style.scss` شامل کد زیر است:\n```scss\n.button {\n font-family: iryekan;\n align-items: center;\n justify-content: center;\n\n &--disabled {\n background: #999;\n }\n\n &--xs {\n width: 50px;\n }\n &--sm {\n width: 100px;\n }\n &--md {\n width: 150px;\n }\n &--lg {\n width: 200px;\n }\n}\n```\nخروجی نهایی به شکل زیر خواهد بود:\n```css\n._button_141oi_1 {\n font-family: iryekan;\n align-items: center;\n justify-content: center;\n}\n._button--disabled_141oi_11 {\n background: #999;\n}\n._button--xs_141oi_12 {\n width: 50px;\n}\n._button--sm_141oi_13 {\n width: 100px;\n}\n._button--md_141oi_14 {\n width: 150px;\n}\n._button--lg_141oi_15 {\n width: 200px;\n}\n```\n\nهمان‌طور که مشخص است، به انتهای نام همه‌ی کلاس‌ها پسوندی اضافه شده‌است تا از تداخل با کلاس‌های دیگر جلوگیری شود. در این شرایط:\n- خروجی `cn('button')` برابر است با `_button_141oi_1` \n- خروجی `cn('button', { xs: true })` برابر است با `_button_141oi_1 _button_xs_141oi_12` یعنی هر دو کلاس را می‌گیرد. این امر inheritance را خیلی ساده می‌کند.\n- خروجی `cn('button'و 'other-class-name' { lg: true, disabled: true })` برابر است با `_button_141oi_1 _button--lg_141oi_15 other-class-name` \n","readmeFilename":"readme.md"}