Create shared components

packages/base/package.json

@@ -64,22 +64,31 @@
     "@lumino/widgets": "^2.0.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
     "@rjsf/validator-ajv8": "^5.23.1",
     "ajv": "^8.14.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "colormap": "^2.3.2",
     "d3-color": "^3.1.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",
     "geotiff": "^2.1.3",
+    "lucide-react": "^0.513.0",
     "ol": "^10.1.0",
     "ol-pmtiles": "^0.5.0",
+    "ol-stac": "^1.0.0-rc.10",
     "pbf": "^4.0.1",
     "pmtiles": "^3.0.7",
     "proj4": "^2.14.0",
     "proj4-list": "^1.0.4",
     "react": "^18.0.1",
+    "react-day-picker": "8.10.1",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

packages/base/src/shared/components/Button.tsx

@@ -0,0 +1,27 @@
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+  variant?: 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'icon';
+  size?: 'sm' | 'lg' | 'icon';
+}
+
+const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
+  ({ variant, className, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        data-size={size}
+        data-variant={variant}
+        className={`Button ${className ? className : ''}`}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button };
+export type { IButtonProps as ButtonProps };

packages/base/src/shared/components/Calendar.tsx

@@ -0,0 +1,88 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+import 'react-day-picker/dist/style.css';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      weekStartsOn={1}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft color="currentColor" />,
+        IconRight: ({ ...props }) => <ChevronRight color="currentColor" />,
+      }}
+      modifiersStyles={{
+        selected: {
+          backgroundColor: 'var(--jp-layout-color2)',
+          color: 'var(--jp-ui-font-color0)',
+          borderRadius: '0.275rem',
+        },
+      }}
+      styles={{
+        root: {
+          width: 'max-content',
+          margin: 0,
+          color: 'var(--jp-ui-font-color0)',
+          background: 'var(--jp-layout-color0)',
+          border: '1px solid var(--jp-border-color0)',
+          borderRadius: 'var(--jp-border-radius)',
+          padding: '0.5rem',
+          position: 'relative',
+        },
+        table: {
+          paddingTop: '1rem',
+        },
+        head_cell: {
+          color: 'var(--jp-ui-font-color0)',
+          fontSize: '0.8rem',
+          fontWeight: 400,
+        },
+        day: {
+          backgroundColor: 'var(--jp-layout-color0)',
+          display: 'flex',
+          justifyContent: 'center',
+          border: 'none',
+          padding: '0.5rem',
+          margin: 'auto',
+          fontSize: '0.8rem',
+        },
+        caption: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        nav_button_previous: {
+          color: 'var(--jp-ui-font-color0)',
+          background: 'transparent',
+          border: '0.5px solid var(--jp-border-color0)',
+          position: 'absolute',
+          top: '0.5rem',
+          left: '0.5rem',
+          borderRadius: 'var(--jp-border-radius)',
+          padding: '0.175rem',
+          width: 'max-content',
+          height: 'max-content',
+        },
+        nav_button_next: {
+          color: 'var(--jp-ui-font-color0)',
+          background: 'transparent',
+          border: '0.5px solid var(--jp-border-color0)',
+          position: 'absolute',
+          top: '0.5rem',
+          right: '0.5rem',
+          borderRadius: 'var(--jp-border-radius)',
+          padding: '0.175rem',
+          width: 'max-content',
+          height: 'max-content',
+        },
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export default Calendar;

packages/base/src/shared/components/Pagination.tsx

@@ -0,0 +1,112 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
+
+import { Button, ButtonProps } from './Button';
+
+const Pagination = ({ ...props }: React.ComponentProps<'nav'>) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={'Pagination'}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ ...props }, ref) => (
+  <ul ref={ref} className={'PaginationContent'} {...props} />
+));
+PaginationContent.displayName = 'PaginationContent';
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ ...props }, ref) => <li ref={ref} className="" {...props} />);
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, 'size'> &
+  React.ComponentProps<'button'>;
+
+const PaginationLink = ({
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) => (
+  <Button
+    aria-current={isActive ? 'page' : undefined}
+    data-variant={isActive ? 'outline' : 'ghost'}
+    data-size={size}
+    className={'PaginationLink'}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+// size is 'default' from both next and previous
+const PaginationPrevious = ({
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={'PaginationPrevious'}
+    {...props}
+  >
+    <ChevronLeft
+      style={{
+        height: '1rem',
+        width: '1rem',
+        flexShrink: 0,
+      }}
+    />
+    <span>Prev</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+const PaginationNext = ({
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={'PaginationNext'}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight
+      style={{
+        height: '1rem',
+        width: '1rem',
+        flexShrink: 0,
+      }}
+    />
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+const PaginationEllipsis = ({ ...props }: React.ComponentProps<'span'>) => (
+  <span aria-hidden className={'PaginationEllipsis'} {...props}>
+    <MoreHorizontal
+      style={{
+        height: '1rem',
+        width: '1rem',
+      }}
+    />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};

packages/base/src/shared/components/Popover.tsx

@@ -0,0 +1,43 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn('PopoverContent', className)}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

packages/base/src/shared/components/Tabs.tsx

@@ -0,0 +1,58 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+
+import { cn } from './utils';
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('TabsList', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn('TabsList', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn('TabsTrigger', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('TabsContent', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };