{"_id":"@angfri/5irad-components","name":"@angfri/5irad-components","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@angfri/5irad-components","version":"1.0.1","type":"module","scripts":{"dev":"vite","build":"vite build","lint":"eslint .","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@iconify/react":"^6.0.1","howler":"^2.2.4","react-sounds":"^1.0.25"},"devDependencies":{"@chromatic-com/storybook":"^4.1.1","@eslint/js":"^9.33.0","@storybook/addon-a11y":"^9.1.3","@storybook/addon-docs":"^9.1.3","@storybook/addon-vitest":"^9.1.3","@storybook/react-vite":"^9.1.3","@types/react":"^19.1.10","@types/react-dom":"^19.1.7","@vitejs/plugin-react":"^5.0.2","@vitest/browser":"^3.2.4","@vitest/coverage-v8":"^3.2.4","eslint":"^9.33.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","eslint-plugin-storybook":"^9.1.3","globals":"^16.3.0","playwright":"^1.55.0","prop-types":"^15.8.1","react":"^19.1.1","react-dom":"^19.1.1","storybook":"^9.1.3","vite":"^7.1.3","vitest":"^3.2.4"},"description":"Component library for a Gomoku game","exports":{".":"./src/components/index.js"},"sideEffects":false,"peerDependencies":{"@iconify/react":"^6.0.1","howler":"^2.2.4","react":">=18","react-dom":">=18","react-sounds":"^1.0.25"},"main":"./src/components/index.js","keywords":[],"author":"","license":"ISC","_id":"@angfri/5irad-components@1.0.1","gitHead":"9e114deb306501b0d966ca686119720f68f5a0b1","_nodeVersion":"23.11.1","_npmVersion":"11.3.0","dist":{"integrity":"sha512-d/QiSKjzVriLPLsnc5yh62v9Hc7HifCOfbON8Gfmqw0aIQOi2iVw05360yuyTXJoS76B0EZ/w2z0+lmtdnLADQ==","shasum":"74cd482755de612e320d4d97c566ad6fcb197408","tarball":"https://registry.npmjs.org/@angfri/5irad-components/-/5irad-components-1.0.1.tgz","fileCount":141,"unpackedSize":56246,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICcntb9XmprY0WVL4Ao0E8igjui2n4LpawuQKBW8EmAUAiEA0tptFHpND12AEWL1+lQhsGsXP3K+X/8YcUd7GwrcRwY="}]},"_npmUser":{"name":"angfri","email":"angelikafriis@gmail.com"},"directories":{},"maintainers":[{"name":"angfri","email":"angelikafriis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/5irad-components_1.0.1_1758793572571_0.07757664382260754"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-25T09:46:12.471Z","1.0.1":"2025-09-25T09:46:12.759Z","modified":"2025-09-25T09:46:13.041Z"},"maintainers":[{"name":"angfri","email":"angelikafriis@gmail.com"}],"description":"Component library for a Gomoku game","keywords":[],"license":"ISC","readme":"# Fem i rad - komponent bibliotek\n\nGrupparbete i kursen *Paketering, leverans och uppföljning*.\n\n## Starta projektet lokalt\n\n### Initiera projektet\n\n1. Klona ner projektet.\n\nSkriv i terminalen t.ex:\n```bash\ngit clone https://github.com/hampusvh/FWK24S-PLU-tamagotchi-components.git\n```\n\n2. Ladda ner beroenden:\n```bash\nnpm install\n```\n\n## Starta Storybook\n\nStarta så här:\n\n```bash\nnpm run storybook\n```\n\n## CI: React Build\n\nVarje gång kod pushas körs en GitHub Action som kör `npm run buil`automatiskt.  \nDet säkerställer att projektet kompilerar korrekt.\n\n### Så här ser du resultaten:\n1. Gå till repo på GitHub.\n2. Klicka på fliken **Actions**.\n3. Välj workflow **React Build**.\n4. Öppna senaste körningen för att se loggar och resultat.\n\n\n## Helpers\n\n`src/utils` innehåller små hjälpfunktioner (helpers) som används i hela projektet.\nSyftet är att slippa skriva samma kod flera gånger och göra utvecklingen enklare och mer konsekvent.\n\n\n### Användning\nAlla helpers importeras via barrel-export:\n\n```js\nimport { fetchClient, formatDate, classNames } from \"src/util\";\n```\n\n### Lista med helpers och vad de gör\n\n#### 1. `fetchClient`\n\n**Vad:** Hämtar data från en server.\n\n**Varför:** Gör att du inte behöver skriva samma felhantering och inställningar varje gång du hämtar data.\n\n```js\nconst data = await fetchClient(\"/users\");\n```\n\n#### 2. `formatters`\n\n**Vad:** Ändrar hur datum och nummer visas.\n\n**Varför:** Säkerställer att allt ser snyggt och konsekvent ut.\n\n```js\nformatDate(\"2025-09-11\");       // \"11 sep. 2025\"\nformatCurrency(199);            // \"199,00 kr\"\n```\n\n#### 3. `classNames`\n\n**Vad:** Sätter ihop CSS-klasser dynamiskt.\n\n**Varför:** Lättare än att skriva långa strängar med villkor varje gång.\n\n```js\nclassNames(\"btn\", isActive && \"btn-active\");\n// isActive true → \"btn btn-active\"\n// isActive false → \"btn\"\n```\n\n#### 4. `featureFlags`\n\n**Vad:** Slår på eller av funktioner i appen.\n\n**Varför:** Gör det möjligt att testa nya funktioner utan att alla användare ser dem.\n\n```js\nif (isFeatureEnabled(\"newCheckout\")) {\n  // Visa nya betalflödet\n}\n```\n\n#### 5. `testHelpers`\n\n**Vad:** Hjälper när man testar komponenter automatiskt.\n\n**Varför:** Gör det enkelt att sätta upp rätt miljö för tester, t.ex. med rätt context och providers.\n\n```js\nrenderWithProviders(<MyComponent />);\n```","readmeFilename":"README.md","_rev":"1-29c6e20cdf38eeaf90c95f8e01799cb8"}