Data Collections prototype (#5)

* wip Navbar

* HEXA-612: Implement Data collections prototype

.prettierignore

@@ -1,3 +1,5 @@
 build
 .next
-coverage
+coverage
+schema.graphql
+src/libs/graphql.ts

package.json

@@ -92,6 +92,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.12",
     "prettier": "2.6.0",
+    "prettier-plugin-tailwindcss": "^0.1.8",
     "tailwindcss": "^3.0.23"
   }
 }

public/locales/en/messages.json

@@ -1,4 +1,39 @@
 {
+  "# Elements": "# Elements",
+  "# Rows": "# Rows",
+  "Actions": "Actions",
   "An unexpected error ocurred.": "An unexpected error ocurred.",
-  "Contact Support": "Contact Support"
+  "Breadcrumbs": "Breadcrumbs",
+  "Close": "Close",
+  "Code": "Code",
+  "Collection properties": "Collection properties",
+  "Collections": "Collections",
+  "Created": "Created",
+  "Created at": "Created at",
+  "Created At": "Created At",
+  "Created by": "Created by",
+  "Database Tables": "Database Tables",
+  "Description": "Description",
+  "DHIS Sources": "DHIS Sources",
+  "Edit": "Edit",
+  "Extract": "Extract",
+  "Home": "Home",
+  "Id": "Id",
+  "Last extracted": "Last extracted",
+  "Loading...": "Loading...",
+  "Location": "Location",
+  "Name": "Name",
+  "Next": "Next",
+  "Notebooks": "Notebooks",
+  "Open": "Open",
+  "Other Sources": "Other Sources",
+  "Preview": "Preview",
+  "Preview data source": "Preview data source",
+  "Previous": "Previous",
+  "Showing {{start}} to {{end}} of {{totalItems}} results": "Showing {{start}} to {{end}} of {{totalItems}} results",
+  "Showing all results": "Showing all results",
+  "Tags": "Tags",
+  "Type": "Type",
+  "View": "View",
+  "Visibility": "Visibility"
 }

public/locales/fr/messages.json

@@ -1,4 +1,39 @@
 {
+  "# Elements": "",
+  "# Rows": "",
+  "Actions": "",
   "An unexpected error ocurred.": "",
-  "Contact Support": ""
+  "Breadcrumbs": "",
+  "Close": "",
+  "Code": "",
+  "Collection properties": "",
+  "Collections": "",
+  "Created": "",
+  "Created at": "",
+  "Created At": "",
+  "Created by": "",
+  "Database Tables": "",
+  "Description": "",
+  "DHIS Sources": "",
+  "Edit": "",
+  "Extract": "",
+  "Home": "",
+  "Id": "",
+  "Last extracted": "",
+  "Loading...": "",
+  "Location": "",
+  "Name": "",
+  "Next": "",
+  "Notebooks": "",
+  "Open": "",
+  "Other Sources": "",
+  "Preview": "",
+  "Preview data source": "",
+  "Previous": "",
+  "Showing {{start}} to {{end}} of {{totalItems}} results": "",
+  "Showing all results": "",
+  "Tags": "",
+  "Type": "",
+  "View": "",
+  "Visibility": ""
 }

src/components/Avatar.tsx

@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { HTMLAttributes } from "react";
+
+export type AvatarProps = {
+  initials: string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  color: string;
+} & HTMLAttributes<HTMLSpanElement>;
+
+const Avatar = (props: AvatarProps) => {
+  const { initials, color, size = "md", ...delegated } = props;
+
+  let className;
+  switch (size) {
+    case "xs":
+      className = "text-xs h-6 w-6";
+      break;
+    case "sm":
+      className = "text-sm h-8 w-8";
+      break;
+    case "md":
+      className = "text-md h-10 w-10";
+      break;
+    case "lg":
+      className = "text-lg h-12 w-12";
+      break;
+    case "xl":
+      className = "text-xl h-14 w-14";
+      break;
+  }
+
+  return (
+    <span
+      {...delegated}
+      style={{ background: color }}
+      className={clsx(
+        "inline-flex items-center justify-center rounded-full bg-gray-500",
+        className
+      )}
+    >
+      <span className="font-medium leading-none text-white">{initials}</span>
+    </span>
+  );
+};
+
+export default Avatar;

src/components/Badge.tsx

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from "react";
+import clsx from "clsx";
+
+interface Props extends ComponentPropsWithoutRef<"span"> {
+  size?: "xs" | "sm" | "md";
+}
+
+const Classes = {
+  xs: "px-2 py-0.5 text-xs",
+  sm: "px-2.5 py-1 text-sm",
+  md: "px-2.5 pt-1 text-md",
+};
+
+const Badge = ({ children, className, size = "xs" }: Props) => {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center rounded-md border font-medium",
+        size === "xs" && Classes.xs,
+        size === "sm" && Classes.sm,
+        size === "md" && Classes.md,
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Badge;

src/components/Block.tsx

@@ -0,0 +1,54 @@
+import clsx from "clsx";
+import {
+  ComponentClass,
+  createElement,
+  FunctionComponent,
+  HTMLAttributes,
+  ReactNode,
+} from "react";
+
+type Props = {
+  as?: string | FunctionComponent | ComponentClass;
+  children: ReactNode | undefined | null;
+} & HTMLAttributes<HTMLElement>;
+
+const Block = (props: Props) => {
+  const { children, className, ...delegated } = props;
+
+  return createElement<{ className?: string }>(
+    props.as ?? "article",
+    {
+      ...delegated,
+      className: clsx(
+        "sm:rounded-lg overflow-hidden shadow border-b border-gray-200 bg-white",
+        className
+      ),
+    },
+    children
+  );
+};
+
+Block.Content = function BlockContent({
+  children,
+  className,
+}: HTMLAttributes<HTMLDivElement>) {
+  return <div className={clsx("px-4 py-5 sm:px-6", className)}>{children}</div>;
+};
+
+Block.Title = function BlockTitle({
+  className,
+  children,
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={clsx(
+        "px-4 py-5 pt-7 text-lg font-medium leading-4 text-gray-900 sm:px-6",
+        className
+      )}
+    >
+      {children}
+    </h3>
+  );
+};
+
+export default Block;

src/components/Breadcrumbs.tsx

@@ -0,0 +1,70 @@
+import { HomeIcon } from "@heroicons/react/solid";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+import { ReactNode } from "react";
+import { UrlObject } from "url";
+
+export const Part = ({
+  children,
+  href,
+  onClick,
+}: {
+  children: ReactNode;
+  href?: UrlObject | string;
+  onClick?: () => void;
+}) => {
+  return (
+    <li className="ml-3">
+      <div className="flex items-center">
+        <svg
+          className="h-5 w-5 flex-shrink-0 text-gray-300"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          aria-hidden="true"
+        >
+          <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+        </svg>
+        <span className="ml-3 text-sm font-medium text-gray-500 hover:text-gray-700">
+          {href ? (
+            <Link href={href}>
+              <a>{children}</a>
+            </Link>
+          ) : (
+            children
+          )}
+        </span>
+      </div>
+    </li>
+  );
+};
+
+const Breadcrumbs = (props: {
+  children: ReactNode | ReactNode[];
+  className?: string;
+}) => {
+  const { children, className } = props;
+  const { t } = useTranslation();
+
+  return (
+    <nav className={className} aria-label={t("Breadcrumbs")}>
+      <ol role="list" className="flex items-center">
+        <li>
+          <div>
+            <Link href="/">
+              <a className="text-gray-400 hover:text-gray-500">
+                <HomeIcon className="h-5 w-5 flex-shrink-0" />
+                <span className="sr-only">{t("Home")}</span>
+              </a>
+            </Link>
+          </div>
+        </li>
+        {children}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumbs.Part = Part;
+
+export default Breadcrumbs;