WIP: Fix dashboard

app/components/AppContainer.tsx

@@ -1,5 +1,4 @@
 import { FC, ReactChild, useEffect, useState } from "react";
-import { useLocation } from "remix";
 import {
   GlobeIcon,
   DocumentReportIcon,
@@ -12,6 +11,7 @@ import type { User, Website } from "@prisma/client";
 import AppNavigationMobile from "~/components/AppNavigationMobile";
 import AppNavigationSide from "~/components/AppNavigationSide";
 import AppNavigationTop from "~/components/AppNavigationTop";
+import { useLocation } from "@remix-run/react";
 
 export type NavigationItem = {
   name: string;

app/components/AppNavigationMobile.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from "react";
-import { Link } from "remix";
 import { Transition, Dialog } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/outline";
 
@@ -8,6 +7,7 @@ import classNames from "~/utils/class-names";
 import Logo from "~/components/Logo";
 
 import type { NavigationItem } from "~/components/AppContainer";
+import { Link } from "@remix-run/react";
 
 type Props = {
   sidebarOpen: boolean;
@@ -60,7 +60,7 @@ export default function AppNavigationMobile({
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="absolute top-0 right-0 -mr-12 pt-2">
+              <div className="absolute right-0 top-0 -mr-12 pt-2">
                 <button
                   type="button"
                   className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"

app/components/AppNavigationSide.tsx

@@ -1,10 +1,9 @@
-import { Link } from "remix";
-
 import classNames from "~/utils/class-names";
 
 import Logo from "~/components/Logo";
 
 import type { NavigationItem } from "~/components/AppContainer";
+import { Link } from "@remix-run/react";
 
 type Props = {
   navigation: {

app/components/BarChart.client.tsx

@@ -1,117 +1,68 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 
+import { BarGroup, BarSeries, XYChart } from "@visx/xychart";
 import { useState } from "react";
-import ReactApexChart from "react-apexcharts";
+import type { BarDataPoint, DashboardElement } from "~/types/dashboard";
 
 type Props = {
-  categories: string[];
-  data: number[];
-  elements: Array<{ id: string }>;
+  data: DashboardElement[];
+  dataKey: string;
   limit?: number;
   onClick?: (id: string) => void;
 };
 
 const VIEW_LIMIT = 5;
 
 export default function BarChart({
-  categories,
   data,
-  elements,
+  dataKey,
   limit = VIEW_LIMIT,
   onClick = () => null,
 }: Props) {
   const [viewAll, setViewAll] = useState(false);
 
-  const options = {
-    chart: {
-      type: "bar",
-      height: 55 * (viewAll || data.length < limit ? data.length : limit) + 55,
-      offsetX: -25,
-      offsetY: -25,
-      toolbar: {
-        show: true,
-        offsetX: -30,
-        offsetY: -23,
-      },
-      events: {
-        click(_: never, __: never, config: { dataPointIndex: number }) {
-          onClick(elements[config.dataPointIndex].id);
-        },
-      },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 4,
-        horizontal: true,
-        barHeight: "80%",
-        dataLabels: {
-          position: "bottom",
-        },
-      },
-    },
-    dataLabels: {
-      enabled: true,
-      textAnchor: "start",
-      style: {
-        colors: ["#1e293b"],
-        fontWeight: 400,
-      },
-      formatter: function (_: any, opt: any) {
-        return opt.w.globals.labels[opt.dataPointIndex];
-      },
-      offsetX: 10,
-      dropShadow: {
-        enabled: false,
-      },
-    },
-    colors: ["#e2e8f0"],
-    tooltip: {
-      y: {
-        formatter(val: number) {
-          return Math.round(val);
-        },
-      },
-    },
-    xaxis: {
-      categories,
-      axisBorder: {
-        show: true,
-        color: "#1e293b",
-      },
-      axisTicks: {
-        show: false,
-      },
-      labels: {
-        formatter(val: number) {
-          return Math.round(val);
-        },
-      },
-    },
-    yaxis: {
-      labels: {
-        show: false,
-      },
-    },
-  };
+  const series: Array<BarDataPoint> = data
+    .filter((datum) => datum.count)
+    .sort((a, b) => a.count - b.count)
+    .map((datum) => ({
+      id: datum.id,
+      count: datum.count,
+      label: String(datum.value),
+      // new Date(
+      //   new Date(period.value).setHours(0, 0, 0, 0)
+      // ).toLocaleDateString(undefined, {
+      //   year: "2-digit",
+      //   month: "short",
+      //   day: "numeric",
+      // }),
+    }));
+
+  const height =
+    55 * (1 + (viewAll || data.length < limit ? data.length : limit));
 
-  const series = [
-    {
-      name: "Page Views",
-      data: viewAll ? data : data.slice(0, limit),
-    },
-  ];
+  const accessors = {
+    xAccessor: (datum: BarDataPoint) => datum.count,
+    yAccessor: (datum: BarDataPoint) => datum.label,
+  };
 
   return (
     <div className="relative">
-      {/* @ts-ignore */}
-      <ReactApexChart
-        options={options}
-        series={series}
-        type={options.chart.type}
-        height={options.chart.height}
-      />
+      <XYChart
+        height={height}
+        xScale={{ type: "linear" }}
+        yScale={{ type: "band" }}
+        onPointerUp={({ datum }) => onClick((datum as BarDataPoint).id)}
+      >
+        <BarGroup>
+          <BarSeries
+            dataKey={dataKey}
+            data={viewAll ? series : series.slice(0, limit)}
+            {...accessors}
+          ></BarSeries>
+        </BarGroup>
+      </XYChart>
       {data.length > limit ? (
-        <div className="absolute top-[-20px] right-[70px] text-xs text-slate-500 hover:text-slate-400">
+        <div className="absolute right-[70px] top-[-20px] text-xs text-slate-500 hover:text-slate-400">
           <a onClick={() => setViewAll(!viewAll)}>
             {viewAll ? "View Less" : "View More"}
           </a>

app/components/Breadcrumbs.tsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
-import { Link, useLocation } from "remix";
 import { ChevronRightIcon } from "@heroicons/react/outline";
 import { HomeIcon } from "@heroicons/react/solid";
 
 import type { Website } from "@prisma/client";
 
 import isUUID from "~/utils/is-uuid";
+import { useLocation, Link } from "@remix-run/react";
 
 type CrumbItem = {
   name: string;

app/components/Button.tsx

@@ -1,5 +1,4 @@
-import { Link } from "remix";
-
+import { Link } from "@remix-run/react";
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactChild } from "react";
 
 import spinIcon from "~/assets/tail-spin.svg";

app/components/DashboardItem.tsx

@@ -1,9 +1,9 @@
-import { Link } from "remix";
 import {
   ArrowSmUpIcon,
   ArrowSmDownIcon,
   MinusSmIcon,
 } from "@heroicons/react/outline";
+import { Link } from "@remix-run/react";
 
 import classNames from "~/utils/class-names";
 import { generateWebsiteColor, generateWebsiteInitials } from "~/utils/website";
@@ -28,7 +28,7 @@ type Props = {
 
 export default function DashboardItem({ item }: Props) {
   return (
-    <div className="relative flex overflow-hidden rounded-lg bg-white px-4 pt-4 pb-14 shadow">
+    <div className="relative flex overflow-hidden rounded-lg bg-white px-4 pb-14 pt-4 shadow">
       <div
         className={classNames(
           generateWebsiteColor(item.name),

app/components/ErrorPage.tsx

@@ -1,5 +1,4 @@
-import { Link } from "remix";
-
+import { Link } from "@remix-run/react";
 import Logo from "~/components/Logo";
 import classNames from "~/utils/class-names";
 
@@ -21,7 +20,7 @@ export default function ErrorPage({
 }: Props) {
   return (
     <>
-      <div className="flex min-h-full flex-col bg-slate-50 pt-16 pb-12">
+      <div className="flex min-h-full flex-col bg-slate-50 pb-12 pt-16">
         <main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
           <div
             className={classNames(

app/components/Header.tsx

@@ -1,10 +1,10 @@
 import { Fragment } from "react";
-import { Link } from "remix";
 import { Popover, Transition } from "@headlessui/react";
 import { MenuIcon, XIcon } from "@heroicons/react/outline";
 
 import Button from "~/components/Button";
 import Logo from "~/components/Logo";
+import { Link } from "@remix-run/react";
 
 type Props = {
   isUserLoggedIn: boolean;
@@ -94,7 +94,7 @@ export default function Header({ isUserLoggedIn }: Props) {
                 </Popover.Button>
               </div>
             </div>
-            <div className="pt-5 pb-6">
+            <div className="pb-6 pt-5">
               <div className="space-y-1 px-2">
                 {navigation.map((item) => (
                   <Link

app/components/LandingCTA.tsx

@@ -1,5 +1,4 @@
-import { Link } from "remix";
-
+import { Link } from "@remix-run/react";
 import Button from "~/components/Button";
 
 export default function LandingCTA() {
@@ -8,7 +7,7 @@ export default function LandingCTA() {
       <div aria-hidden="true" className="hidden sm:block">
         <div className="absolute inset-y-0 left-0 w-1/2 rounded-r-3xl bg-slate-100" />
         <svg
-          className="absolute top-8 left-1/2 -ml-3"
+          className="absolute left-1/2 top-8 -ml-3"
           width={404}
           height={392}
           fill="none"
@@ -100,7 +99,7 @@ export default function LandingCTA() {
                   placeholder="Enter your email"
                 />
               </div>
-              <div className="mt-4 sm:mt-0 sm:ml-3">
+              <div className="mt-4 sm:ml-3 sm:mt-0">
                 <Button primary type="submit">
                   Join the wailist
                 </Button>

app/components/LandingHero.tsx

@@ -1,8 +1,7 @@
-import { Link } from "remix";
-
 import Button from "~/components/Button";
 
 import illustration from "~/assets/illustration_landing.svg";
+import { Link } from "@remix-run/react";
 
 export default function LandingHero() {
   return (
@@ -40,7 +39,7 @@ export default function LandingHero() {
                         className="block w-full rounded-md border border-slate-300 px-4 py-3 text-base text-slate-900 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-300  focus:ring-offset-2 focus:ring-offset-slate-900"
                       />
                     </div>
-                    <div className="mt-3 sm:mt-0 sm:ml-3">
+                    <div className="mt-3 sm:ml-3 sm:mt-0">
                       <Button primary type="submit">
                         Join the wailist
                       </Button>

app/components/Logo.tsx

@@ -1,9 +1,8 @@
-import { Link } from "remix";
-
 import logo from "~/assets/logo.svg";
 import logoWhite from "~/assets/logo_white.svg";
 import logoText from "~/assets/logo_text.svg";
 import logoTextWhite from "~/assets/logo_text_white.svg";
+import { Link } from "@remix-run/react";
 
 type Props = {
   withText?: boolean;

app/components/WebsiteCreateForm.tsx

@@ -1,5 +1,4 @@
-import { Form, useTransition } from "remix";
-
+import { Form, useTransition } from "@remix-run/react";
 import Button from "~/components/Button";
 import Input from "~/components/Input";
 import LayoutGrid from "~/components/LayoutGrid";

app/components/WebsiteListItem.tsx

@@ -1,12 +1,12 @@
 import { Fragment } from "react";
-import { Link, Form } from "remix";
 import { Menu, Transition } from "@headlessui/react";
 import { DotsVerticalIcon } from "@heroicons/react/outline";
 
 import type { Website } from "@prisma/client";
 
 import classNames from "~/utils/class-names";
 import { generateWebsiteColor, generateWebsiteInitials } from "~/utils/website";
+import { Link, Form } from "@remix-run/react";
 
 type Props = {
   website: Website;
@@ -23,7 +23,7 @@ export default function WebsiteListItem({ website }: Props) {
       >
         {generateWebsiteInitials(website.name)}
       </div>
-      <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-t border-r border-b border-slate-200 bg-white shadow-sm">
+      <div className="flex flex-1 items-center justify-between truncate rounded-r-md border-b border-r border-t border-slate-200 bg-white shadow-sm">
         <div className="flex-1 truncate px-4 py-2 text-sm">
           <Link
             to={`/app/websites/details/${website.id}`}
@@ -45,7 +45,7 @@ export default function WebsiteListItem({ website }: Props) {
       </div>
       <Menu as="div" className="relative ml-1 inline-block text-left">
         <div>
-          <Menu.Button className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-white bg-transparent text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-500">
+          <Menu.Button className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-transparent bg-white text-slate-400 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-500">
             <span className="sr-only">Open options</span>
             <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
           </Menu.Button>

app/entry.client.tsx

@@ -1,4 +1,4 @@
+import { RemixBrowser } from "@remix-run/react";
 import { hydrate } from "react-dom";
-import { RemixBrowser } from "remix";
 
 hydrate(<RemixBrowser />, document);

app/entry.server.tsx

@@ -1,6 +1,7 @@
 import { renderToString } from "react-dom/server";
-import { RemixServer } from "remix";
-import type { EntryContext } from "remix";
+
+import { RemixServer } from "@remix-run/react";
+import type { EntryContext } from "@remix-run/node";
 
 export default function handleRequest(
   request: Request,