Merge pull request #16 from Vizzuality/client/feature/story-steps

Story steps markers
Vizzuality · Sep 28, 2023 · fb96905 · fb96905
2 parents d9e9534 + 20c7afe
commit fb96905
Show file tree

Hide file tree

Showing 29 changed files with 1,148 additions and 839 deletions.
diff --git a/client/next.config.mjs b/client/next.config.mjs
@@ -4,7 +4,7 @@ import('./src/env.mjs');
 const nextConfig = {
   transpilePackages: ['@esa/types'],
   images: {
-    domains: ['api.mapbox.com'],
+    domains: ['api.mapbox.com', 'localhost'],
   },
   env: {
     RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false',

diff --git a/client/src/app/(landing)/stories/[id]/layout.tsx b/client/src/app/(landing)/stories/[id]/layout.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export default function StoryLayout({ children }: PropsWithChildren) {
+  return <div>{children}</div>;
+}
diff --git a/client/src/app/(landing)/stories/[id]/page.tsx b/client/src/app/(landing)/stories/[id]/page.tsx
@@ -58,7 +58,9 @@ export async function generateMetadata({ params }: StoryPageProps): Promise<Meta
 async function prefetchQueries(params: StoryPageProps['params']) {
   // Prefetch datasets
   const queryClient = getQueryClient();
-  const { queryKey, queryFn } = getGetStoriesIdQueryOptions(+params.id);
+  const { queryKey, queryFn } = getGetStoriesIdQueryOptions(+params.id, {
+    populate: 'deep',
+  });
 
   await queryClient.prefetchQuery({
     queryKey,

diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
@@ -7,7 +7,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <Providers>
       <html lang="en">
-        <body className="font-notes min-h-screen w-screen">
+        <body className="font-notes min-h-screen  overflow-x-hidden">
           <main>{children}</main>
         </body>
       </html>

diff --git a/client/src/components/map/legend/item-types/basic/index.tsx b/client/src/components/map/legend/item-types/basic/index.tsx
@@ -11,11 +11,11 @@ export const LegendTypeBasic: React.FC<LegendTypeProps> = ({ className = '', ite
         [className]: !!className,
       })}
     >
-      <ul className="flex w-full flex-col space-y-1">
+      <ul className="flex w-full flex-wrap items-center gap-2">
         {items.map(({ value, color }) => (
-          <li key={`${value}`} className="flex space-x-2 text-xs">
+          <li key={`${value}`} className="font-notes flex items-center gap-x-1 font-bold">
             <div
-              className="mt-1 h-2 w-2 flex-shrink-0 border border-slate-500"
+              className="shadow-xs h-4 w-4 flex-shrink-0 rounded-sm"
               style={{
                 backgroundColor: color,
               }}

diff --git a/client/src/components/map/legend/item-types/choropleth/index.tsx b/client/src/components/map/legend/item-types/choropleth/index.tsx
@@ -12,9 +12,9 @@ export const LegendTypeChoropleth: React.FC<LegendTypeProps> = ({ className = ''
       })}
     >
       <ul className="flex w-full">
-        {items.map(({ color }) => (
+        {items.map(({ color, value }) => (
           <li
-            key={`${color}`}
+            key={`${color}-${value}`}
             className="h-2 flex-shrink-0"
             style={{
               width: `${100 / items.length}%`,
@@ -25,9 +25,9 @@ export const LegendTypeChoropleth: React.FC<LegendTypeProps> = ({ className = ''
       </ul>
 
       <ul className="mt-1 flex w-full">
-        {items.map(({ value }) => (
+        {items.map(({ color, value }) => (
           <li
-            key={`${value}`}
+            key={`${color}-${value}`}
             className="flex-shrink-0 text-center text-xs"
             style={{
               width: `${100 / items.length}%`,

diff --git a/client/src/components/map/legend/item/index.tsx b/client/src/components/map/legend/item/index.tsx
@@ -8,9 +8,9 @@ import { cn } from '@/lib/classnames';
 
 import { LegendItemProps } from '@/components/map/legend/types';
 import { Accordion, AccordionContent, AccordionItem } from '@/components/ui/accordion';
+import Card from '@/components/ui/card';
 
 import LegendItemToolbar from './toolbar';
-import Card from '@/components/ui/card';
 
 export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
   id,
@@ -44,14 +44,14 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
 
   return (
     <Accordion type="single" value={acordionState} asChild>
-      <AccordionItem value={`${id}`} asChild>
+      <AccordionItem value={`${id}`}>
         <Card
           className={cn({
             'mb-1 w-full border-none p-0': true,
             [className]: !!className,
           })}
         >
-          <header className="sticky top-0 z-20 flex items-start justify-between space-x-8  px-2.5 py-2.5">
+          <header className="sticky top-0 z-20 flex items-start justify-between space-x-8  px-2.5 py-2">
             <div
               className={cn({
                 'relative flex items-start space-x-0.5': true,
@@ -71,7 +71,7 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
 
               <div
                 className={cn({
-                  'mt-px text-sm font-semibold text-white': true,
+                  'font-notes mt-px text-sm text-white': true,
                 })}
               >
                 {name}
@@ -91,7 +91,7 @@ export const LegendItem: React.FC<PropsWithChildren & LegendItemProps> = ({
 
           {validChildren && (
             <AccordionContent className="grow px-2.5 transition-all">
-              <div className="-ml-0.5 pl-5 pr-7">{children}</div>
+              <div className="-ml-0.5 pb-2 pl-5 pr-7">{children}</div>
             </AccordionContent>
           )}
         </Card>

diff --git a/client/src/components/map/legend/item/toolbar/button/index.tsx b/client/src/components/map/legend/item/toolbar/button/index.tsx
@@ -17,10 +17,10 @@ export const LegendItemButton = ({
     >
       <Icon
         className={cn({
-          'relative z-10 flex h-5 w-5 items-center justify-center rounded-full text-slate-800 transition-colors':
+          'text-primary relative z-10 flex h-5 w-5 items-center justify-center rounded-full transition-colors':
             true,
-          'group-hover:text-slate-800/50 group-active:text-slate-500': true,
-          'fill-slate-800': selected,
+          'group-active:text-slate-500': true,
+          'fill-primary': selected,
         })}
         style={{ fillOpacity: selected ? value : 1 }}
       />

diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx
@@ -49,7 +49,7 @@ const AccordionContent = React.forwardRef<
     )}
     {...props}
   >
-    <div className="pb-4 pt-0">{children}</div>
+    <div>{children}</div>
   </AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
@@ -40,14 +40,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 sm:rounded-lg md:w-full',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 sm:rounded-lg',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-full p-4 opacity-70 backdrop-blur-lg transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-6 w-6" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

diff --git a/client/src/containers/home/index.tsx b/client/src/containers/home/index.tsx
@@ -4,9 +4,9 @@ import { useEffect } from 'react';
 
 import Link from 'next/link';
 
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 
-import { bboxAtom, tmpBboxAtom } from '@/store';
+import { tmpBboxAtom } from '@/store';
 
 import Sidebar from '@/containers/home/sidebar';
 
@@ -19,16 +19,21 @@ import { Filters } from './filters';
 import Header from './header';
 import TopStories from './top-stories';
 
+const HOME_MAP_OPTIONS = {
+  longitude: 0,
+  latitude: 0,
+  zoom: 2.01,
+  pitch: 0,
+  bearing: 0,
+};
+
 export default function Home() {
-  const bbox = useRecoilValue(bboxAtom);
   const setTmpBbox = useSetRecoilState(tmpBboxAtom);
 
   useEffect(() => {
-    if (!bbox) {
-      const tmpbbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
-      setTmpBbox(tmpbbox);
-    }
-  }, [bbox, setTmpBbox]);
+    const tmpbbox: [number, number, number, number] = [-50.45, -66.05, 107.79, 85.05];
+    setTmpBbox({ bbox: tmpbbox, options: HOME_MAP_OPTIONS });
+  }, [setTmpBbox]);
 
   return (
     <div className="home text-primary flex h-screen w-screen flex-col justify-between px-12">