Feature/ele 262 create planning grid based on sketches (#39)

* Created registry context, WiP as it needs splitting up

* fix: fonts sizes and weights (#33)

* fix: fonts sizes and weights

* fingers crossed

* remove post-url

* chore: remove unused dep

* fix: use resolved preset for settings (#34)

* fix: use resolved preset for settings

* chore: bump @ttab/elephant-ui @v0.0.12

* fix: use ext

* chore: remove ignore after resolvedPreset fix (#35)

* Get locale and timezone from user, use js intl formatting and remove date-fns

* Moved PlanningHeader files closer to PlanningOverview where it is used

* Renamed file from index to PlanningOverview

* Added rudimentary grid view w columns

* Movied view title and icon to view header

* Date and layout switcher ui fixes

* Renamed ViewHeader index file to component name

* Refactored section and internal status indicator into their own resuable components

* Improved grid view, and grid view items, styling and data

* Refactor planning list to component, add SWR for caching api requests, handle local/UTC time

* Create search index url with date params to cache planning list fetch correctly

* Simplify date interval to use just beginning date for weeks as well

* Extracted useRegistry hook into its own file

* Removed as it doesn't really add anything any longer

* Removed as it doesn't really add anything any longer

* Renamed main component (PlanningOverview) to index.tsx

* Removed commented out code

* Added variant props type, more as model than out of necessity. Typescript adds code but no type safety here.

* Change font weight

---------

Co-authored-by: Gustav Larsson <gularsson@users.noreply.github.com>

package.json

@@ -35,9 +35,9 @@
     "class-variance-authority": "^0.7.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-    "date-fns": "^2.30.0",
     "express": "^4.18.2",
     "express-ws": "^5.0.2",
+    "get-user-locale": "^2.3.1",
     "html-entities": "^2.4.0",
     "jose": "^5.0.1",
     "lodash-es": "^4.17.21",
@@ -48,6 +48,7 @@
     "redis": "^4.6.10",
     "slate": "^0.100.0",
     "slate-react": "^0.100.0",
+    "swr": "^2.2.4",
     "uuid": "^9.0.1",
     "yjs": "^13.6.8",
     "zod": "^3.22.4"

src/components/DataItem/SectorBadge.tsx

@@ -0,0 +1,41 @@
+import { Badge } from '@ttab/elephant-ui'
+import { cn } from '@ttab/elephant-ui/utils'
+
+export const SectorBadge = ({ color, value }: { color?: string, value: string }): JSX.Element => {
+  const sector = sectors.find((label) => label.value === value)
+  const chosenColor = color || sector?.color
+
+  return <Badge variant='outline' className='rounded-md'>
+    <div className={cn('h-2 w-2 rounded-full mr-2', chosenColor || '')} />
+    <span className='text-muted-foreground text-xs font-sans font-normal whitespace-nowrap text-ellipsis'>{sector?.label}</span>
+  </Badge>
+}
+
+// FIXME: This should not be hardcoded!!!
+const sectors = [
+  {
+    value: 'Utrikes',
+    label: 'Utrikes',
+    color: 'bg-[#BD6E11]'
+  },
+  {
+    value: 'Inrikes',
+    label: 'Inrikes',
+    color: 'bg-[#DA90E1]'
+  },
+  {
+    value: 'Sport',
+    label: 'Sport',
+    color: 'bg-[#6CA8DF]'
+  },
+  {
+    value: 'Kultur och nöje',
+    label: 'Kultur & Nöje',
+    color: 'bg-[#12E1D4]'
+  },
+  {
+    value: 'Ekonomi',
+    label: 'Ekonomi',
+    color: 'bg-[#FFB9B9]'
+  }
+]

src/components/DataItem/StatusIndicator.tsx

@@ -0,0 +1,37 @@
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
+} from '@ttab/elephant-ui'
+
+import { cn } from '@ttab/elephant-ui/utils'
+import { cva } from 'class-variance-authority'
+
+export const StatusIndicator = ({ internal }: { internal: boolean }): JSX.Element => {
+  const status = cva('flex items-center h-2 w-2 rounded-full mx-4', {
+    variants: {
+      internal: {
+        true: 'border',
+        false: 'bg-[#5895FF]'
+      }
+    }
+  })
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <div className={cn(
+            status({ internal })
+          )} />
+        </TooltipTrigger>
+
+        <TooltipContent>
+          <p>{internal ? 'Internal' : 'Public'}</p>
+        </TooltipContent>
+
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

src/components/PlanningTable/Columns/Section.tsx

@@ -1,18 +1,11 @@
 import { type ColumnDef } from '@tanstack/react-table'
-import { Badge } from '@ttab/elephant-ui'
-import { cn } from '@ttab/elephant-ui/utils'
 import { type Planning } from '../data/schema'
-import { sectors } from '../data/settings'
+import { SectorBadge } from '@/components/DataItem/SectorBadge'
 
 export const section: ColumnDef<Planning> = {
   id: 'section',
   accessorFn: (data) => data._source['document.rel.sector.title'][0],
   cell: ({ row }) => {
-    const sector = sectors.find((label) => label.value === row.original._source['document.rel.sector.title'][0])
-
-    return sector && <Badge variant='outline' className='rounded-md'>
-        <div className={cn('h-2 w-2 rounded-full mr-2', sector?.color) } />
-        <span className='text-slate-500 text-sm font-sans font-normal'>{sector.label}</span>
-      </Badge>
+    return <SectorBadge value={row.original._source['document.rel.sector.title'][0]} />
   }
 }

src/components/PlanningTable/Columns/Title.tsx

@@ -1,37 +1,26 @@
 import { type ColumnDef } from '@tanstack/react-table'
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@ttab/elephant-ui'
-import { cn } from '@ttab/elephant-ui/utils'
 import { type Planning } from '../data/schema'
+import { StatusIndicator } from '@/components/DataItem/StatusIndicator'
 
 export const title: ColumnDef<Planning> = {
   id: 'title',
   accessorFn: (data) => data._source['document.title'][0],
   cell: ({ row }) => {
-    const status = row.original._source['document.meta.core_planning_item.data.public'][0] === 'true'
+    const internal = row.original._source['document.meta.core_planning_item.data.public'][0] !== 'true'
     const slugline = row.original._source['document.meta.core_assignment.meta.tt_slugline.value']
-    const classNames = cn('flex items-center h-2 w-2 rounded-full mx-4', status
-      ? 'bg-[#5895FF]'
-      : 'border')
 
     return (
-        <div className='flex space-x-2 w-fit'>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger>
-                <div className={classNames} />
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{status ? 'Public' : 'Internal'}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-          <span className='max-w-[200px] md:max-w-[300px] lg:max-w-[700px] truncate font-medium'>
-            {row.getValue('title')}
-          </span>
-          {!!slugline?.length && (
-            <span className='hidden font-medium text-slate-500 lg:block'>{slugline[0]}</span>
-          )}
-        </div>
+      <div className='flex space-x-2 w-fit'>
+        <StatusIndicator internal={internal} />
+
+        <span className='max-w-[200px] md:max-w-[300px] lg:max-w-[700px] truncate font-medium'>
+          {row.getValue('title')}
+        </span>
+
+        {!!slugline?.length && (
+          <span className='hidden font-medium text-slate-500 lg:block'>{slugline[0]}</span>
+        )}
+      </div>
     )
   }
 }

src/components/PlanningTable/data/settings.tsx

@@ -8,34 +8,6 @@ import {
   Video
 } from '@ttab/elephant-ui/icons'
 
-export const sectors = [
-  {
-    value: 'Utrikes',
-    label: 'Utrikes',
-    color: 'bg-[#BD6E11]'
-  },
-  {
-    value: 'Inrikes',
-    label: 'Inrikes',
-    color: 'bg-[#DA90E1]'
-  },
-  {
-    value: 'Sport',
-    label: 'Sport',
-    color: 'bg-[#6CA8DF]'
-  },
-  {
-    value: 'Kultur och nöje',
-    label: 'Kultur & Nöje',
-    color: 'bg-[#12E1D4]'
-  },
-  {
-    value: 'Ekonomi',
-    label: 'Ekonomi',
-    color: 'bg-[#FFB9B9]'
-  }
-]
-
 export const priorities = [
   {
     label: 'High',