@datawheel/bespoke 0.7.0-rc.0 → 0.7.0-rc.1

package/dist/explore.js

@@ -0,0 +1,11 @@
+import { Stack, Text, Badge, Group, Container, TextInput, Loader, ActionIcon, LoadingOverlay, Alert, Tooltip, Modal, Autocomplete, Button, useMantineTheme, ScrollArea, Grid, Pagination, Image, Card } from '@mantine/core';
+import { createContext, forwardRef, useContext, useState, useCallback, useEffect, useMemo, useRef } from 'react';
+import { IconSearch, IconTrash, IconX } from '@tabler/icons-react';
+import { useDebouncedValue, useClickOutside } from '@mantine/hooks';
+import { useRouter } from 'next/router';
+import me from 'axios';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var ae={try_another:"Try another search or filter.",search:"Search",filters_all:"All",no_results:"No Results",load_more:"Load more",report:{},dimension:{},variant:{}},de=createContext({metadata:[],loadingItems:!1,setLoadingItems:()=>null,loadingMetadata:!1,setLoadingMetadata:()=>null,resultCount:{},totalCount:{},setResultCount:()=>null,activePage:1,setActivePage:()=>null,pageSize:10,results:[],filters:{},doQuery:()=>null,setFilters:()=>null,query:"",setQuery:()=>null,debouncedQuery:"",currentPageTotal:10,selectorStructure:[],translations:ae,setTranslations:()=>null,showSelectors:!0}),A=()=>useContext(de);function $e({children:o,pageSize:r=10}){let n={profile:void 0,variant:void 0},[l,m]=useState([]),[h,i]=useState(!1),[x,p]=useState(!1),[c,b]=useState({}),[e,R]=useState({}),[u,C]=useState(1),[f,L]=useState(n),[M,J]=useState(""),[N]=useDebouncedValue(M,500),[Q,Y]=useState([]),[W,V]=useState(ae),[B,k]=useState(!1),{locale:G}=useRouter(),X=async()=>{try{p(!0),me.get("/api/cms/read/metadata").then(t=>{if(t&&t.data&&t.data.data&&t.data.data.data){let y=t.data.data.data.reduce((g,s)=>(s.dimensions&&s.dimensions.forEach(d=>{d.variants&&d.variants.forEach(a=>{g[a.id]=a.members_count||0;});}),g),{});m(t.data.data.data),b(y),R(y);}p(!1),k(!0);}).catch(t=>{console.error(t);});}catch(t){console.error("Error fetching metadata:",t),m([]),p(!1),b({}),R({});}},Z=t=>{b(t||e);},O=useCallback(async(t,y)=>{!B&&l.length===0&&await X(),L({profile:t,variant:y});},[]);useEffect(()=>{let t=!1;return B&&(i(!0),C(1),H(t,0)),()=>{t=!1;}},[N,f,B]),useEffect(()=>{if(B){i(!0);let t=(u-1)*r;H(!1,t);}},[u]);let H=async(t,y)=>{let g=f.profile&&!Number.isNaN(f.profile)?[f.profile]:[],s=f.variant&&!Number.isNaN(f.variant)?[f.variant]:[],d={query:N,format:"profiles",locale:G,limit:r,offset:y,visible:!0,includes:!0,noImage:!1,variant:s,dimension:[],report:g,all:!1};me.get("/api/cms/search/reports",{params:d}).then(a=>{if(a&&a.data&&a.data.data&&a.data.data.results&&!t){let w=a.data.data.results;Y(w),b(M===""?!1:a.data.data.meta.variantCount);}i(!1);}).catch(a=>{console.error(a),i(!1);});},_=c||e,$={id:void 0,name:W.filters_all||"ALL"},ee=t=>{let y=t.reduce((s,d)=>s.reduce((a,w)=>a.concat(d.map(Be=>[].concat(w,Be))),[])).map(s=>{let d;return Array.isArray(s)?d={id:s.map(a=>a.id).join(","),name:s.map(a=>a.name).join(" / "),members_count:s.reduce((a,w)=>a*(_[w.id]||1),0)}:(s.members_count=_[s.id]||0,d={...s,members_count:_[s.id]||0}),d}),g=y.reduce((s,d)=>s+(d.members_count||0),0);return [{...$,members_count:g},...y]},te=l.length>1,F=useMemo(()=>{let t=[];if(!x&&l.length>0&&_){let y=l.filter(g=>g.dimensions.length>0).map(g=>{let s=!1,d=ee(g.dimensions.map(a=>a.variants));return d&&d.length>2&&(s=!0),{id:g.id,name:g.dimensions.map(a=>a.name).join(" / "),variants:d,members_count:d.filter(a=>a.id).reduce((a,w)=>a+(w.members_count||0),0),show:s}});t=[{...$,members_count:y.reduce((g,s)=>g+(s.members_count||0),0)},...y];}return t},[x,_,l,$]),oe=useMemo(()=>{let t;return F&&(f.profile?f.profile&&(t=F.find(y=>y.id===f.profile),t&&f.variant&&t.variants&&(t=t.variants.find(y=>y.id===f.variant))):t=F.find(y=>!y.id)),t?t.members_count:r},[f,F]),re={metadata:l,loadingMetadata:x,setLoadingMetadata:p,loadingItems:h,setLoadingItems:i,resultCount:c,totalCount:e,setResultCount:Z,activePage:u,setActivePage:C,pageSize:r,filters:f,setFilters:L,doQuery:H,query:M,setQuery:J,debouncedQuery:N,results:Q,currentPageTotal:oe,selectorStructure:F,translations:W,setTranslations:t=>V({...ae,...t}),showSelectors:te,initExplore:O};return jsx(de.Provider,{value:re,children:o})}function qe({translations:o}){let{loadingItems:r,setFilters:n,selectorStructure:l,filters:m,showSelectors:h}=A(),i=e=>{e!==m.profile&&n({profile:e,variant:void 0});},x=e=>{e!==m.variant&&n({...m,variant:e});},p=l.length===2?l[1].id:m.profile,c=p?l.find(e=>e.id===p):void 0,b=c&&c.variants&&m.variant?c.variants.find(e=>e.id===m.variant):void 0;return jsxs(Fragment,{children:[h&&jsx(Group,{position:"center",className:"bespoke-explore-reports-selector",mb:"md",children:l.map(e=>jsxs(Button,{"data-selected":e.id===c?.id?"true":"false","data-report-name":e.name,variant:e.id===c?.id?"outline":"subtle",onClick:()=>i(e.id),children:[o?.dimension[e.name]??e.name,!r&&jsx(Text,{span:!0,size:"xs",ml:"0.2rem",children:`(${e.members_count})`})]},`p-${e.id}`))}),c&&c.variants&&c.variants.length>2&&jsx(Group,{position:"center",style:{minHeight:"36px"},className:"bespoke-explore-variant-selector",mb:"md",children:c.variants.map(e=>jsxs(Button,{"data-selected":e.id===b?.id?"true":"false","data-variant-name":e.name,variant:e.id===b?.id?"outline":"subtle",onClick:()=>x(e.id),children:[o?.dimension[e.name]??e.name,!r&&jsx(Text,{span:!0,size:"xs",ml:"0.2rem",children:`(${e.members_count})`})]},`v-${e.id}`))})]})}var xe=qe;function U(){return useMantineTheme().other.bespokeStyles??{}}var q=()=>{let o=process.env.NEXT_PUBLIC_REPORTS_LOCALE_DEFAULT||"en",r=process.env.NEXT_PUBLIC_REPORTS_LOCALES?.split(",")||[o];return r.includes(o)||r.push(o),{localeDefault:o,locales:r}};function Je({reportName:o,members:r,href:n,onClick:l}){let m=r.map(i=>jsx(Image,{src:i.image.src,height:160,imageProps:{loading:"lazy"},alt:i.name},i.id)),h=r.map(i=>jsxs(Stack,{children:[jsx(Text,{weight:500,children:i.name}),jsx(Badge,{color:"green",variant:"light",children:i.variant})]},i.id));return jsxs(Card,{shadow:"sm",p:"lg",radius:"md",withBorder:!0,children:[jsx(Card.Section,{children:jsx(Group,{grow:!0,spacing:0,children:m})}),jsx(Group,{position:"apart",mt:"md",mb:"xs",children:h}),jsx("a",{href:n,onClick:l,children:jsx(Button,{variant:"light",color:"blue",fullWidth:!0,mt:"md",radius:"md",children:`See ${o} Report`})})]})}var Ye=o=>{let{components:r}=U(),n=Je;return r?.ReportTile&&(n=r?.ReportTile),o&&(n=o),n};function Ze({profile:o,profilePrefix:r,onSelect:n,reportTile:l}){let m=useRouter(),h=m.locale,{localeDefault:i}=q(),p=`${h===i?"":`/${h}`}${r}${o.path}`,c=o.members.map(u=>({original_id:u.metadata.id,name:u.name,id:u.id,variant:u.metadata.variant.name,image:{src:`/api/cms/member/image?member=${u.id}&size=thumb`,alt:u.name}})),b=u=>{m.push(`${u}`),n&&n();},e=u=>{u.preventDefault(),b(p);},R=Ye(l);return jsx(Grid.Col,{xs:12,sm:6,md:4,lg:4,xl:3,children:jsx(R,{reportName:o.report.name,members:c,href:p,onClick:e})},o.id)}var Pe=Ze;function nt({profilePrefix:o,onSelect:r=()=>{},reportTile:n}){let[l,m]=useState(500),h=useRef(null),{results:i}=A(),x=h.current?.offsetTop||0,p=50;return useEffect(()=>{let{innerHeight:c}=window;m(c-x-p);},[x]),jsx(ScrollArea,{offsetScrollbars:!0,type:"always",h:l,ref:h,children:jsx(Grid,{align:"stretch",children:i.map(c=>jsx(Pe,{profile:c,profilePrefix:o,reportTile:n,onSelect:r},c.id))})})}var ve=nt;function lt(){let{activePage:o,setActivePage:r,pageSize:n,currentPageTotal:l}=A();return jsx(Group,{position:"center",children:jsx(Pagination,{value:o,onChange:h=>{r(h);},total:Math.ceil(l/n),size:"sm",py:"xs"})})}var Se=lt;function yt({profilePrefix:o,initialReportId:r,initialVariantId:n,translations:l,onSelect:m,reportTile:h}){let i=useRef(),x=A(),{query:p,setQuery:c,results:b,loadingItems:e,loadingMetadata:R,translations:u,setTranslations:C,initExplore:f}=x;useEffect(()=>{f&&f(r,n);},[f]),useEffect(()=>{e||i.current?.focus();},[e]),useEffect(()=>{l&&C(l);},[l]);let L=()=>{c("");};return jsxs(Container,{fluid:!0,pt:"1em",children:[jsx(TextInput,{placeholder:u.search,mb:"md",size:"xl",onChange:M=>c(M.target.value),readOnly:R||e,icon:jsx(IconSearch,{size:24}),value:p,rightSectionWidth:100,rightSectionProps:{style:{justifyContent:"flex-end",padding:"0 15px 0 0"}},rightSection:jsxs(Group,{align:"center",children:[(R||e)&&jsx(Loader,{size:28}),p!==""&&jsx(ActionIcon,{onClick:L,children:jsx(IconTrash,{size:24})})]}),ref:i}),jsx(xe,{translations:u}),jsx(LoadingOverlay,{visible:R||e}),!e&&b.length===0&&jsx(Alert,{title:u.no_results,color:"blue",children:u.try_another}),jsx(ve,{profilePrefix:o,onSelect:m,reportTile:h}),jsx(Se,{})]})}var le=yt;var{localeDefault:Et}=q();function It({exploreProps:o={profilePrefix:"/",locale:Et},icon:r=jsx(IconSearch,{size:20}),actionIconProps:n={},modalProps:l={},tooltipProps:m={},tooltipText:h="Click to Explore",showIcon:i=!0,showTooltip:x=!1,children:p}){let[c,b]=useState(!1),e={variant:"light",size:"md",radius:"md",...n},R={fullScreen:!0,opened:c,onClose:()=>b(!1)},u=jsx(ActionIcon,{...e,onClick:()=>b(!0),children:r}),C=i?jsxs(Group,{spacing:"sm",style:{cursor:"pointer"},children:[p,u]}):p;return x&&(C=jsx(Tooltip,{label:h,...m,children:C})),jsxs(Fragment,{children:[jsx(Modal,{...R,...l,children:c&&jsx(le,{...o,onSelect:()=>b(!1)})}),jsx("div",{onClick:()=>b(!0),children:p?C:jsx(Fragment,{children:u})})]})}var kt=It;var wt=forwardRef(({id:o,members:r,profilePrefix:n,reportName:l,reportPath:m,...h},i)=>{let x=r.map(p=>jsxs(Stack,{align:"center",children:[jsx(Text,{weight:500,children:p.name}),jsx(Badge,{color:"green",variant:"light",children:p.variant})]},p.id));return jsx("div",{ref:i,children:jsx(Group,{position:"apart",grow:!0,...h,children:x})},o)}),ke=wt;var Ht=o=>{let{components:r}=U(),n=ke;return r?.ReportItem&&(n=r?.ReportItem),o&&(n=o),n};function Ut({locale:o,profilePrefix:r="/report",autocompleteProps:n={},tooltipProps:l={},tooltipText:m="Click to search",searchReportParams:h={},callback:i,children:x}){let p=useRouter(),c=p.locale,{localeDefault:b}=q(),e=c===b?"":`/${c}`,R=Ht(n?n.itemComponent:null),[u,C]=useState(""),[f,L]=useDebouncedValue(u,500),[M,J]=useState([]),[N,Q]=useState(!1),[Y,W]=useState(!1),[V,B]=useState(!1),[k,G]=useState(!x),X=()=>{G(!1);},Z=()=>{G(!0),$();},O=useRef(),H=useClickOutside(X),_=n?.searchConfig?.searchLimit??10,$=()=>{Q(!0);let g={query:f,format:"profiles",locale:o,limit:_,visible:!0,includes:!0,noImage:!1,variant:[],dimension:[],report:[],all:!1,...h};me.get("/api/cms/search/reports",{params:g}).then(s=>{s&&s.data&&s.data.data&&s.data.data.results&&J(s.data.data.results.map(d=>({id:d.id,reportName:d.report.name,href:`${e}${r}${d.path}`,reportPath:`${d.path}`,profilePrefix:r,value:`VALUE: ${d.id}`,members:d.members.map(a=>({original_id:a.metadata.id,name:a.name,id:a.id,variant:a.metadata.variant.name,image:{src:`/api/cms/member/image?member=${a.id}&size=thumb`,alt:a.name}}))}))),Q(!1),O.current?.focus();}).catch(s=>{console.error(s),Q(!1);});};useEffect(()=>{V&&f.length>=(n.searchConfig?.queryThreshold??0)&&$();},[V,f,n.searchConfig?.queryThreshold]),useEffect(()=>{L(),O.current&&k&&B(!0);},[]),useEffect(()=>{L(),O.current&&k&&B(!0);},[k]);let ee=g=>{G(!1),i?i(g):(p.push(g.href),W(!0));},te=g=>{g.includes("VALUE:")||C(g);},{searchConfig:F,...oe}=n,re={placeholder:"Search",size:"md",icon:jsx(IconSearch,{}),...oe,data:M},t=jsx(Autocomplete,{value:u,itemComponent:R,onItemSubmit:ee,onChange:te,filter:()=>!0,disabled:(N||Y)&&!V,limit:_,maxDropdownHeight:250,rightSection:jsx(Group,{spacing:0,position:"right",children:N?jsx(Loader,{size:20}):jsx(Fragment,{})}),rightSectionWidth:50,ref:O,...re});return x?jsx(Tooltip,{label:m,disabled:k,...l,children:jsxs(Group,{ref:H,spacing:"sm",align:"center",style:{cursor:"pointer"},children:[!k&&jsx("div",{onClick:()=>G(!0),children:x}),k&&jsx(Fragment,{children:t}),k?jsx(ActionIcon,{variant:"light",onClick:X,children:jsx(IconX,{size:20})}):jsx(ActionIcon,{variant:"light",onClick:Z,children:jsx(IconSearch,{size:20})})]})}):t}var Wt=Ut;
+
+export { le as BespokeExplore, kt as BespokeExploreModal, $e as BespokeExploreProvider, Wt as BespokeSearch, A as useBespokeExplore };