UNPKG

@tonyfreed/card-core

Version:

Core components and types for Ildex card system

3 lines (2 loc) 9.58 kB
"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("@fortawesome/react-fontawesome"),t=require("@fortawesome/free-brands-svg-icons"),n=require("@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)"}},o=e=>({type:"SET_LOADING",payload:e});var s,i;exports.ProfileTemplate=void 0,(s=exports.ProfileTemplate||(exports.ProfileTemplate={})).STANDARD="standard",s.MODERN="modern",s.CLASSIC="classic",s.MODERN_CLASSIC="modern-classic",exports.CardSectionType=void 0,(i=exports.CardSectionType||(exports.CardSectionType={})).PROFILE="profile",i.LINKS="links",i.FOOTER="footer",i.LANGUAGE_SELECTOR="language-selector";const l=(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])),s=a.payload.map(e=>o.get(e)).filter(Boolean);return{...e,card:{...e.card,sections:s},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=a.useContext(c);if(!e)throw new Error("useCard must be used within a CardProvider");return e},c=a.createContext(void 0);function d(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))}}d(".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}");d(".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 p=e=>{switch(e){case"FACEBOOK":return t.faFacebook;case"INSTAGRAM":return t.faInstagram;case"LINKEDIN":return t.faLinkedin;case"TWITTER":return t.faTwitter;case"YOUTUBE":return t.faYoutube;case"WEBSITE":return n.faGlobe;default:return n.faLink}},u=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"}};d(".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}");d(".footer_section{background:#f9f9f9;margin-top:32px;padding:32px 0;text-align:center;width:100%}");exports.CardProvider=({children:r,initialCard:t,initialLanguage:n="en",initialTheme:s=defaultTheme,onCardUpdate:i,onSave:d})=>{const[p,u]=a.useReducer(l,((e,a="en",r=defaultTheme)=>({card:e||null,language:a,theme:r,isLoading:!1,isDirty:!1,lastSaved:null}))(t,n,s));var g;g=p.theme,a.useEffect(()=>{const e=document.createElement("style");e.textContent=`\n :root {\n --color-primary: ${g.colors.primary};\n --color-secondary: ${g.colors.secondary};\n --color-background: ${g.colors.background};\n --color-text: ${g.colors.text};\n --color-text-secondary: ${g.colors.textSecondary};\n --color-link: ${g.colors.link};\n --color-link-hover: ${g.colors.linkHover};\n \n --font-family: ${g.typography.fontFamily};\n --font-size-small: ${g.typography.fontSize.small};\n --font-size-medium: ${g.typography.fontSize.medium};\n --font-size-large: ${g.typography.fontSize.large};\n --font-size-heading: ${g.typography.fontSize.heading};\n \n --spacing-small: ${g.spacing.small};\n --spacing-medium: ${g.spacing.medium};\n --spacing-large: ${g.spacing.large};\n \n --border-radius: ${g.borderRadius};\n --shadow-small: ${g.shadows.small};\n --shadow-medium: ${g.shadows.medium};\n --shadow-large: ${g.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()}},[g]),a.useEffect(()=>{p.card&&i&&i(p.card)},[p.card,i]);const m=(e=>({updateCard:a.useCallback(a=>{e((e=>({type:"UPDATE_CARD",payload:e}))(a))},[e]),updateProfile:a.useCallback(a=>{e((e=>({type:"UPDATE_PROFILE",payload:e}))(a))},[e]),updateTheme:a.useCallback(a=>{e((e=>({type:"UPDATE_THEME",payload:e}))(a))},[e]),setLanguage:a.useCallback(a=>{e((e=>({type:"SET_LANGUAGE",payload:e}))(a))},[e]),addSection:a.useCallback(a=>{e((e=>({type:"ADD_SECTION",payload:e}))(a))},[e]),removeSection:a.useCallback(a=>{e((e=>({type:"REMOVE_SECTION",payload:e}))(a))},[e]),updateSection:a.useCallback((a,r)=>{e(((e,a)=>({type:"UPDATE_SECTION",payload:{sectionId:e,updates:a}}))(a,r))},[e]),reorderSections:a.useCallback(a=>{e((e=>({type:"REORDER_SECTIONS",payload:e}))(a))},[e]),save:a.useCallback(async(a,r)=>{if(a){e(o(!0));try{r&&await r(a),e({type:"SET_SAVED",payload:new Date})}catch(e){}finally{e(o(!1))}}},[e])}))(u),f=((e,r)=>a.useMemo(()=>({card:e.card,language:e.language,theme:e.theme,isLoading:e.isLoading,isDirty:e.isDirty,...r}),[e.card,e.language,e.theme,e.isLoading,e.isDirty,r]))(p,{...m,save:async()=>{await m.save(p.card,d)}});return e.jsx(c.Provider,{value:f,children:r})},exports.FooterSection=()=>e.jsx("footer",{className:"footer_section",children:"Built with ildex.me"}),exports.LanguageSelector=({cardLanguages:a})=>{const{setLanguage:r,language:t}=useCard(),n=e=>{r(e)};return a.length<=1?null:e.jsx("div",{children:e.jsxs("div",{className:"language_buttons",children:[a.includes("en")&&e.jsx("button",{className:"language_button "+("en"===t?"active":""),onClick:()=>n("en"),children:"eng"}),a.includes("ru")&&e.jsx("button",{className:"language_button "+("ru"===t?"active":""),onClick:()=>n("ru"),children:"рус"}),a.includes("he")&&e.jsx("button",{className:"language_button "+("he"===t?"active":""),onClick:()=>n("he"),children:"עבר"})]})})},exports.LinksSection=({links:a})=>e.jsx("div",{className:"links_section",children:a.map(a=>e.jsxs("a",{href:a.url,target:"_blank",rel:"noopener noreferrer",className:"link_item",style:{color:u(a.media)},children:[e.jsx(r.FontAwesomeIcon,{icon:p(a.media),className:"link_icon"}),a.title?.en&&e.jsx("span",{className:"link_title",children:a.title.en})]},a.id))}),exports.ProfileSection=({profile:a})=>{const{card:r,language:t}=useCard();if(!a&&!r)return null;const n=a?.profileImageURL,o=a?.title?.[t]||null,s=a?.description?.[t]||null,i=a?.slogan?.[t]||null;return e.jsxs("section",{className:"profile_section",children:[e.jsxs("div",{className:"profile_section_header",children:[e.jsx("div",{children:o&&e.jsx("h3",{children:o})}),e.jsx("div",{className:"profile_section_header_right",children:n&&e.jsx("img",{src:n,alt:o||"",width:60,height:60})})]}),e.jsxs("div",{className:"profile_section_description",children:[s&&e.jsx("h2",{children:s}),i&&e.jsx("h4",{children:i})]})]})},exports.defaultTheme=defaultTheme,exports.useCard=useCard; //# sourceMappingURL=index.js.map