diff --git a/packages/base/package.json b/packages/base/package.json index 8600705a0..c13842e5d 100644 --- a/packages/base/package.json +++ b/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", diff --git a/packages/base/src/shared/components/Button.tsx b/packages/base/src/shared/components/Button.tsx new file mode 100644 index 000000000..5f31dd039 --- /dev/null +++ b/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 { + asChild?: boolean; + variant?: 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'icon'; + size?: 'sm' | 'lg' | 'icon'; +} + +const Button = React.forwardRef( + ({ variant, className, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; + return ( + + ); + }, +); +Button.displayName = 'Button'; + +export { Button }; +export type { IButtonProps as ButtonProps }; diff --git a/packages/base/src/shared/components/Calendar.tsx b/packages/base/src/shared/components/Calendar.tsx new file mode 100644 index 000000000..1c0851018 --- /dev/null +++ b/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; + +function Calendar({ showOutsideDays = true, ...props }: CalendarProps) { + return ( + , + IconRight: ({ ...props }) => , + }} + 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; diff --git a/packages/base/src/shared/components/Pagination.tsx b/packages/base/src/shared/components/Pagination.tsx new file mode 100644 index 000000000..c2a97313b --- /dev/null +++ b/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'>) => ( +