diff --git a/packages/system/package.json b/packages/system/package.json index 4347518..987b6f2 100644 --- a/packages/system/package.json +++ b/packages/system/package.json @@ -1,6 +1,6 @@ { "name": "@gotpop/system", - "version": "0.1.282", + "version": "0.1.284", "description": "React design system components for gotpop", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -69,11 +69,12 @@ }, "dependencies": { "@next/font": "^14.2.15", + "lucide-react": "^0.469.0", "motion": "^12.23.26", "react": "19.2.3", "react-dom": "19.2.3", - "react-icons": "^5.4.0", "server-only": "^0.0.1", + "simple-icons": "^16.3.0", "storyblok-rich-text-react-renderer": "^3.0.1" }, "devDependencies": { diff --git a/packages/system/src/components/storyblok/NavItemDefault/NavItemDefault.css b/packages/system/src/components/storyblok/NavItemDefault/NavItemDefault.css index 9d87a1e..cc4eb3f 100644 --- a/packages/system/src/components/storyblok/NavItemDefault/NavItemDefault.css +++ b/packages/system/src/components/storyblok/NavItemDefault/NavItemDefault.css @@ -1,6 +1,10 @@ @scope (nav-item) { & { grid-column: var(--grid-column, auto); + + @media screen and (width >= 1480px) { + width: 8rem; + } } span:has(svg) { @@ -28,7 +32,7 @@ a, button { - --background-colour: var(--secondary-700); + --background-colour: var(--secondary-600); --colour: var(--light-100); --transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; diff --git a/packages/system/src/components/storyblok/PaginationDefault/PaginationDefault.tsx b/packages/system/src/components/storyblok/PaginationDefault/PaginationDefault.tsx index daf90d0..ebd590c 100644 --- a/packages/system/src/components/storyblok/PaginationDefault/PaginationDefault.tsx +++ b/packages/system/src/components/storyblok/PaginationDefault/PaginationDefault.tsx @@ -49,9 +49,9 @@ function PaginationLink({ slug, title, direction }: PaginationLinkProps) { className={`link-pagination pagination-${direction}`} onClick={handleClick} > - {isPrevious && } + {isPrevious && } {title} - {!isPrevious && } + {!isPrevious && } ) } diff --git a/packages/system/src/components/ui/Icon/Icon.tsx b/packages/system/src/components/ui/Icon/Icon.tsx index f9e8f4d..d952955 100644 --- a/packages/system/src/components/ui/Icon/Icon.tsx +++ b/packages/system/src/components/ui/Icon/Icon.tsx @@ -1,44 +1,46 @@ import { - FaBars, - FaChevronLeft, - FaChevronRight, - FaEnvelope, - FaExternalLinkAlt, - FaHome, - FaLink, - FaPhone, - FaQuestionCircle, - FaSearch, - FaStar, - FaTimes, - FaUser, -} from "react-icons/fa" -import { FaSquareGithub } from "react-icons/fa6" -import { MdArticle } from "react-icons/md" -import { TfiGithub } from "react-icons/tfi" + BriefcaseBusiness, + ChevronLeft, + ChevronRight, + ExternalLink, + Github, + HelpCircle, + Home, + Link, + Mail, + Menu, + Newspaper, + Phone, + Search, + Star, + User, + X, +} from "lucide-react" /** * Icon registry - single source of truth for available icons. * Only icons listed here will be bundled (tree-shaking optimization). * Add new icons here and run `yarn sync-icons` to update Storyblok datasource. + * + * Keys match the CMS datasource values (kebab-case) */ const ICON_REGISTRY = { - FaBars, - FaChevronLeft, - FaChevronRight, - FaEnvelope, - FaExternalLinkAlt, - FaHome, - FaLink, - FaPhone, - FaQuestionCircle, - FaSearch, - FaSquareGithub, - FaStar, - FaTimes, - FaUser, - TfiGithub, - MdArticle, + mail: Mail, + newspaper: Newspaper, + github: Github, + "briefcase-business": BriefcaseBusiness, + "chevron-right": ChevronRight, + "chevron-left": ChevronLeft, + menu: Menu, + "external-link": ExternalLink, + home: Home, + link: Link, + phone: Phone, + "help-circle": HelpCircle, + search: Search, + star: Star, + x: X, + user: User, } as const // Export for sync scripts and type generation @@ -71,13 +73,13 @@ export function Icon({ if (!IconComponent) { console.log( - "Font Awesome icon not found:", + "Icon not found:", JSON.stringify({ name, availableIcons: AVAILABLE_ICONS }, null, 2) ) // render a safe fallback so consumers still get an icon return ( - + ) } diff --git a/yarn.lock b/yarn.lock index 128a4ea..81d46a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -938,15 +938,16 @@ "@storyblok/react" "5.4.20" "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system": - version "0.1.282" + version "0.1.284" resolved "file:packages/system" dependencies: "@next/font" "^14.2.15" + lucide-react "^0.469.0" motion "^12.23.26" react "19.2.3" react-dom "19.2.3" - react-icons "^5.4.0" server-only "^0.0.1" + simple-icons "^16.3.0" storyblok-rich-text-react-renderer "^3.0.1" "@img/colour@^1.0.0": @@ -1013,11 +1014,6 @@ resolved "https://registry.npmjs.org/@next/env/-/env-16.0.0.tgz" integrity sha512-s5j2iFGp38QsG1LWRQaE2iUY3h1jc014/melHFfLdrsMJPqxqDQwWNwyQTcNoUSGZlCVZuM7t7JDMmSyRilsnA== -"@next/env@16.1.1": - version "16.1.1" - resolved "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz" - integrity sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA== - "@next/font@^14.2.15": version "14.2.15" resolved "https://registry.npmjs.org/@next/font/-/font-14.2.15.tgz" @@ -1028,11 +1024,6 @@ resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.0.tgz" integrity sha512-/CntqDCnk5w2qIwMiF0a9r6+9qunZzFmU0cBX4T82LOflE72zzH6gnOjCwUXYKOBlQi8OpP/rMj8cBIr18x4TA== -"@next/swc-darwin-arm64@16.1.1": - version "16.1.1" - resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.1.tgz" - integrity sha512-JS3m42ifsVSJjSTzh27nW+Igfha3NdBOFScr9C80hHGrWx55pTrVL23RJbqir7k7/15SKlrLHhh/MQzqBBYrQA== - "@pmmmwh/react-refresh-webpack-plugin@^0.5.11": version "0.5.17" resolved "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.17.tgz" @@ -1714,11 +1705,6 @@ baseline-browser-mapping@^2.8.19: resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz" integrity sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA== -baseline-browser-mapping@^2.8.3: - version "2.9.11" - resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz" - integrity sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ== - better-opn@^3.0.2: version "3.0.2" resolved "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz" @@ -3314,6 +3300,11 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +lucide-react@^0.469.0: + version "0.469.0" + resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz" + integrity sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw== + magic-string@^0.30.17, magic-string@^0.30.5: version "0.30.21" resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz" @@ -3474,7 +3465,7 @@ neo-async@^2.6.2: resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz" integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw== -next@*, "next@^13 || ^14 || ^15 || ^16", next@>=15.0.0, next@16.0.0: +next@*, "next@^13 || ^14 || ^15 || ^16", "next@^14.1.0 || ^15.0.0 || ^16.0.0", next@>=15.0.0, next@16.0.0: version "16.0.0" resolved "https://registry.npmjs.org/next/-/next-16.0.0.tgz" integrity sha512-nYohiNdxGu4OmBzggxy9rczmjIGI+TpR5vbKTsE1HqYwNm1B+YSiugSrFguX6omMOKnDHAmBPY4+8TNJk0Idyg== @@ -3495,48 +3486,6 @@ next@*, "next@^13 || ^14 || ^15 || ^16", next@>=15.0.0, next@16.0.0: "@next/swc-win32-x64-msvc" "16.0.0" sharp "^0.34.4" -"next@^14.1.0 || ^15.0.0 || ^16.0.0": - version "16.1.1" - dependencies: - "@next/env" "16.1.1" - "@swc/helpers" "0.5.15" - baseline-browser-mapping "^2.8.3" - caniuse-lite "^1.0.30001579" - postcss "8.4.31" - styled-jsx "5.1.6" - optionalDependencies: - "@next/swc-darwin-arm64" "16.1.1" - "@next/swc-darwin-x64" "16.1.1" - "@next/swc-linux-arm64-gnu" "16.1.1" - "@next/swc-linux-arm64-musl" "16.1.1" - "@next/swc-linux-x64-gnu" "16.1.1" - "@next/swc-linux-x64-musl" "16.1.1" - "@next/swc-win32-arm64-msvc" "16.1.1" - "@next/swc-win32-x64-msvc" "16.1.1" - sharp "^0.34.4" - -next@^16.1.1: - version "16.1.1" - resolved "https://registry.npmjs.org/next/-/next-16.1.1.tgz" - integrity sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w== - dependencies: - "@next/env" "16.1.1" - "@swc/helpers" "0.5.15" - baseline-browser-mapping "^2.8.3" - caniuse-lite "^1.0.30001579" - postcss "8.4.31" - styled-jsx "5.1.6" - optionalDependencies: - "@next/swc-darwin-arm64" "16.1.1" - "@next/swc-darwin-x64" "16.1.1" - "@next/swc-linux-arm64-gnu" "16.1.1" - "@next/swc-linux-arm64-musl" "16.1.1" - "@next/swc-linux-x64-gnu" "16.1.1" - "@next/swc-linux-x64-musl" "16.1.1" - "@next/swc-win32-arm64-msvc" "16.1.1" - "@next/swc-win32-x64-msvc" "16.1.1" - sharp "^0.34.4" - no-case@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz" @@ -4003,28 +3952,35 @@ react-docgen@^7.1.1: resolve "^1.22.1" strip-indent "^4.0.0" -"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom@^17 || ^18 || ^19", "react-dom@^18.0.0 || ^19.0.0", "react-dom@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react-dom@19.2.3: +"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react-dom@^17 || ^18 || ^19", "react-dom@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react-dom@19.2.0: + version "19.2.0" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz" + integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ== + dependencies: + scheduler "^0.27.0" + +"react-dom@^18.0.0 || ^19.0.0", react-dom@19.2.3: version "19.2.3" resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz" integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg== dependencies: scheduler "^0.27.0" -react-icons@^5.4.0: - version "5.5.0" - resolved "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz" - integrity sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw== - react-refresh@^0.14.0, "react-refresh@>=0.10.0 <1.0.0": version "0.14.2" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz" integrity sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA== -react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react@^17 || ^18 || ^19", "react@^18.0.0 || ^19.0.0", "react@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react@^19.2.3, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0", react@>=16.0.0, react@>=19.2.3, react@19.2.3: +"react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta", "react@^17 || ^18 || ^19", "react@^18.0.0 || ^19.0.0", "react@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react@^19.2.0, react@^19.2.3, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0", react@>=16.0.0, react@>=19.2.3, react@19.2.3: version "19.2.3" resolved "https://registry.npmjs.org/react/-/react-19.2.3.tgz" integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA== +react@19.2.0: + version "19.2.0" + resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz" + integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ== + readable-stream@^2.3.8: version "2.3.8" resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz" @@ -4402,6 +4358,11 @@ side-channel@^1.1.0: side-channel-map "^1.0.1" side-channel-weakmap "^1.0.2" +simple-icons@^16.3.0: + version "16.3.0" + resolved "https://registry.npmjs.org/simple-icons/-/simple-icons-16.3.0.tgz" + integrity sha512-Bi28W15wyjt9902EnR6Mfr9gqt5ElKbKviYA80j77VkcUJtkeSGa6K4XKJWmBw1djiMPy0+it9KOk9nKMisYeQ== + source-map-js@^1.0.2, source-map-js@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz" @@ -4468,9 +4429,9 @@ storybook@^9.1.16: resolved "file:apps/storybook" dependencies: "@gotpop/system" "*" - next "^16.1.1" - react "19.2.3" - react-dom "19.2.3" + next "16.0.0" + react "19.2.0" + react-dom "19.2.0" storyblok-rich-text-react-renderer "^3.0.0" stream-browserify@^3.0.0: