@tonyfreed/card-core/dist/index.esm.js

Core components and types for Ildex card system

import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useContext as r,useEffect as t,useCallback as n,useMemo as o,createContext as i,useReducer as s}from"react";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faYoutube as d,faTwitter as l,faLinkedin as p,faInstagram as u,faFacebook as m}from"@fortawesome/free-brands-svg-icons";import{faLink as g,faGlobe as f}from"@fortawesome/free-solid-svg-icons";const defaultTheme={colors:{primary:"#2563eb",secondary:"#64748b",background:"#ffffff",text:"#1f2937",textSecondary:"#6b7280",link:"#2563eb",linkHover:"#1d4ed8"},typography:{fontFamily:"Inter, system-ui, sans-serif",fontSize:{small:"0.875rem",medium:"1rem",large:"1.125rem",heading:"1.5rem"}},spacing:{small:"0.5rem",medium:"1rem",large:"1.5rem"},borderRadius:"0.375rem",shadows:{small:"0 1px 2px 0 rgb(0 0 0 / 0.05)",medium:"0 4px 6px -1px rgb(0 0 0 / 0.1)",large:"0 10px 15px -3px rgb(0 0 0 / 0.1)"}},y=e=>({type:"SET_LOADING",payload:e});var h,E;!function(e){e.STANDARD="standard",e.MODERN="modern",e.CLASSIC="classic",e.MODERN_CLASSIC="modern-classic"}(h||(h={})),function(e){e.PROFILE="profile",e.LINKS="links",e.FOOTER="footer",e.LANGUAGE_SELECTOR="language-selector"}(E||(E={}));const _=(e,a)=>{switch(a.type){case"SET_CARD":return{...e,card:a.payload,theme:a.payload.config.theme,isDirty:!1};case"UPDATE_CARD":return e.card?{...e,card:{...e.card,...a.payload},isDirty:!0}:e;case"UPDATE_PROFILE":return e.card?{...e,card:{...e.card,sections:e.card.sections.map(e=>"profile"===e.type?{...e,data:{...e.data,...a.payload}}:e)},isDirty:!0}:e;case"UPDATE_THEME":if(!e.card)return e;const n=(r=e.theme,t=a.payload,{...r,colors:{...r.colors,...t.colors},typography:{...r.typography,...t.typography},spacing:{...r.spacing,...t.spacing},borderRadius:t.borderRadius||r.borderRadius,shadows:{...r.shadows,...t.shadows}});return{...e,theme:n,card:{...e.card,config:{...e.card.config,theme:n}},isDirty:!0};case"ADD_SECTION":return e.card?{...e,card:{...e.card,sections:[...e.card.sections,a.payload]},isDirty:!0}:e;case"REMOVE_SECTION":return e.card?{...e,card:{...e.card,sections:e.card.sections.filter(e=>e.id!==a.payload)},isDirty:!0}:e;case"UPDATE_SECTION":return e.card?{...e,card:{...e.card,sections:e.card.sections.map(e=>e.id===a.payload.sectionId?{...e,...a.payload.updates}:e)},isDirty:!0}:e;case"REORDER_SECTIONS":if(!e.card)return e;const o=new Map(e.card.sections.map(e=>[e.id,e])),i=a.payload.map(e=>o.get(e)).filter(Boolean);return{...e,card:{...e.card,sections:i},isDirty:!0};case"SET_LANGUAGE":return{...e,language:a.payload};case"SET_LOADING":return{...e,isLoading:a.payload};case"SET_DIRTY":return{...e,isDirty:a.payload};case"SET_SAVED":return{...e,lastSaved:a.payload,isDirty:!1};default:return e}var r,t},useCard=()=>{const e=r(x);if(!e)throw new Error("useCard must be used within a CardProvider");return e},x=i(void 0),CardProvider=({children:a,initialCard:r,initialLanguage:i="en",initialTheme:c=defaultTheme,onCardUpdate:d,onSave:l})=>{const[p,u]=s(_,((e,a="en",r=defaultTheme)=>({card:e||null,language:a,theme:r,isLoading:!1,isDirty:!1,lastSaved:null}))(r,i,c));var m;m=p.theme,t(()=>{const e=document.createElement("style");e.textContent=`\n      :root {\n        --color-primary: ${m.colors.primary};\n        --color-secondary: ${m.colors.secondary};\n        --color-background: ${m.colors.background};\n        --color-text: ${m.colors.text};\n        --color-text-secondary: ${m.colors.textSecondary};\n        --color-link: ${m.colors.link};\n        --color-link-hover: ${m.colors.linkHover};\n        \n        --font-family: ${m.typography.fontFamily};\n        --font-size-small: ${m.typography.fontSize.small};\n        --font-size-medium: ${m.typography.fontSize.medium};\n        --font-size-large: ${m.typography.fontSize.large};\n        --font-size-heading: ${m.typography.fontSize.heading};\n        \n        --spacing-small: ${m.spacing.small};\n        --spacing-medium: ${m.spacing.medium};\n        --spacing-large: ${m.spacing.large};\n        \n        --border-radius: ${m.borderRadius};\n        --shadow-small: ${m.shadows.small};\n        --shadow-medium: ${m.shadows.medium};\n        --shadow-large: ${m.shadows.large};\n      }\n    `;const a=document.getElementById("card-theme-styles");return a&&a.remove(),e.id="card-theme-styles",document.head.appendChild(e),()=>{const e=document.getElementById("card-theme-styles");e&&e.remove()}},[m]),t(()=>{p.card&&d&&d(p.card)},[p.card,d]);const g=(e=>({updateCard:n(a=>{e((e=>({type:"UPDATE_CARD",payload:e}))(a))},[e]),updateProfile:n(a=>{e((e=>({type:"UPDATE_PROFILE",payload:e}))(a))},[e]),updateTheme:n(a=>{e((e=>({type:"UPDATE_THEME",payload:e}))(a))},[e]),setLanguage:n(a=>{e((e=>({type:"SET_LANGUAGE",payload:e}))(a))},[e]),addSection:n(a=>{e((e=>({type:"ADD_SECTION",payload:e}))(a))},[e]),removeSection:n(a=>{e((e=>({type:"REMOVE_SECTION",payload:e}))(a))},[e]),updateSection:n((a,r)=>{e(((e,a)=>({type:"UPDATE_SECTION",payload:{sectionId:e,updates:a}}))(a,r))},[e]),reorderSections:n(a=>{e((e=>({type:"REORDER_SECTIONS",payload:e}))(a))},[e]),save:n(async(a,r)=>{if(a){e(y(!0));try{r&&await r(a),e({type:"SET_SAVED",payload:new Date})}catch(e){}finally{e(y(!1))}}},[e])}))(u),f=((e,a)=>o(()=>({card:e.card,language:e.language,theme:e.theme,isLoading:e.isLoading,isDirty:e.isDirty,...a}),[e.card,e.language,e.theme,e.isLoading,e.isDirty,a]))(p,{...g,save:async()=>{await g.save(p.card,l)}});return e(x.Provider,{value:f,children:a})};function b(e,a){void 0===a&&(a={});var r=a.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}b(".profile_section{border-bottom:1px solid #eee;margin:10px auto;width:100%}.profile_section_header{align-items:center;border-bottom:1px solid #ccc;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:0 0 10px}.profile_section_description{padding:50px 0;text-align:center}.profile_section_header_right{align-items:center;display:flex;gap:20px}.profile_section_header img{border-radius:50%;object-fit:cover}");const S=({profile:r})=>{const{card:t,language:n}=useCard();if(!r&&!t)return null;const o=r?.profileImageURL,i=r?.title?.[n]||null,s=r?.description?.[n]||null,c=r?.slogan?.[n]||null;return a("section",{className:"profile_section",children:[a("div",{className:"profile_section_header",children:[e("div",{children:i&&e("h3",{children:i})}),e("div",{className:"profile_section_header_right",children:o&&e("img",{src:o,alt:i||"",width:60,height:60})})]}),a("div",{className:"profile_section_description",children:[s&&e("h2",{children:s}),c&&e("h4",{children:c})]})]})};b(".links_section{display:flex;flex-direction:column;gap:12px;padding:16px 0}.link_item{align-items:center;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;display:flex;gap:12px;padding:12px 16px;text-decoration:none;transition:all .2s ease}.link_item:hover{background-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-1px)}.link_icon{font-size:18px;text-align:center;width:20px}.link_title{color:#333;font-size:14px;font-weight:500}.link_item:hover .link_title{color:inherit}");const T=e=>{switch(e){case"FACEBOOK":return m;case"INSTAGRAM":return u;case"LINKEDIN":return p;case"TWITTER":return l;case"YOUTUBE":return d;case"WEBSITE":return f;default:return g}},D=e=>{switch(e){case"FACEBOOK":return"#1877f2";case"INSTAGRAM":return"#e4405f";case"LINKEDIN":return"#0077b5";case"TWITTER":return"#1da1f2";case"YOUTUBE":return"#ff0000";case"WEBSITE":return"#333333";default:return"#666666"}},v=({links:r})=>e("div",{className:"links_section",children:r.map(r=>a("a",{href:r.url,target:"_blank",rel:"noopener noreferrer",className:"link_item",style:{color:D(r.media)},children:[e(c,{icon:T(r.media),className:"link_icon"}),r.title?.en&&e("span",{className:"link_title",children:r.title.en})]},r.id))});b(".language_title{color:#666;font-size:.9rem;margin-bottom:10px;text-align:center}.language_buttons{display:flex;gap:10px;justify-content:center}.language_button{background:none;border:1px solid #ddd;border-radius:4px;color:#666;cursor:pointer;padding:8px 16px;transition:all .2s ease;&.active{background:#565656;border-color:#565656;color:#fff}}.language_button:hover{background:#f5f5f5}");const N=({cardLanguages:r})=>{const{setLanguage:t,language:n}=useCard(),o=e=>{t(e)};return r.length<=1?null:e("div",{children:a("div",{className:"language_buttons",children:[r.includes("en")&&e("button",{className:"language_button "+("en"===n?"active":""),onClick:()=>o("en"),children:"eng"}),r.includes("ru")&&e("button",{className:"language_button "+("ru"===n?"active":""),onClick:()=>o("ru"),children:"рус"}),r.includes("he")&&e("button",{className:"language_button "+("he"===n?"active":""),onClick:()=>o("he"),children:"עבר"})]})})};b(".footer_section{background:#f9f9f9;margin-top:32px;padding:32px 0;text-align:center;width:100%}");const w=()=>e("footer",{className:"footer_section",children:"Built with ildex.me"});export{CardProvider,E as CardSectionType,w as FooterSection,N as LanguageSelector,v as LinksSection,S as ProfileSection,h as ProfileTemplate,defaultTheme,useCard};
//# sourceMappingURL=index.esm.js.map