Merge pull request #87 from UW-Macrostrat/add-ui

Add UI components

Author: davidsklar99

packages/timescale/CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [unreleased]
+Timescale now clickable, returns event and interval clicked
+
 ## [2.1.1] - 2025-02-15
 
 Add a `node` target to bundle without imported CSS.

packages/timescale/src/components/index.ts

@@ -21,8 +21,9 @@ function IntervalBox(props: {
   interval: Interval;
   showLabel?: boolean;
   intervalStyle: IntervalStyleBuilder;
+  onClick: (e: Event, interval: Interval) => void;
 }) {
-  const { interval, showLabel = true, intervalStyle } = props;
+  const { interval, showLabel = true, intervalStyle, onClick } = props;
 
   const [labelText, setLabelText] = useState<string>(interval.nam);
 
@@ -52,15 +53,16 @@ function IntervalBox(props: {
         setLabelText(labelText[0]);
       }
     },
+    onClick: (e) => onClick(e, interval),
   });
 }
 
-function IntervalChildren({ children, intervalStyle }) {
+function IntervalChildren({ children, intervalStyle, onClick }) {
   if (children == null || children.length == 0) return null;
   return h(
     "div.children",
     children.map((d) => {
-      return h(TimescaleBoxes, { interval: d, intervalStyle });
+      return h(TimescaleBoxes, { interval: d, intervalStyle, onClick });
     })
   );
 }
@@ -72,8 +74,9 @@ function ensureIncreasingAgeRange(ageRange) {
 function TimescaleBoxes(props: {
   interval: NestedInterval;
   intervalStyle: IntervalStyleBuilder;
+  onClick: (e: Event, interval: Interval) => void;
 }) {
-  const { interval, intervalStyle } = props;
+  const { interval, intervalStyle, onClick } = props;
   const { scale, orientation, levels, ageRange } = useTimescale();
   const { eag, lag, lvl } = interval;
 
@@ -108,8 +111,8 @@ function TimescaleBoxes(props: {
   const className = slugify(name);
 
   return h("div.interval", { className, style }, [
-    h.if(lvl >= minLevel)(IntervalBox, { interval, intervalStyle }),
-    h.if(lvl < maxLevel)(IntervalChildren, { children, intervalStyle }),
+    h.if(lvl >= minLevel)(IntervalBox, { interval, intervalStyle, onClick }),
+    h.if(lvl < maxLevel)(IntervalChildren, { children, intervalStyle, onClick }),
   ]);
 }
 

packages/timescale/src/index.ts

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import { useMemo } from "react";
 import h from "./hyper";
 
-type ClickHandler = (event: Event, age: number) => void;
+type ClickHandler = (event: Event, interval: any) => void;
 
 export enum IncreaseDirection {
   UP_RIGHT = "up-right",
@@ -75,7 +75,7 @@ function Timescale(props: TimescaleProps) {
     axisProps = {},
     cursorPosition,
     cursorComponent = Cursor,
-    onClick = () => {},
+    onClick = null,
     intervalStyle,
     increaseDirection = IncreaseDirection.DOWN_LEFT,
   } = props;
@@ -85,7 +85,7 @@ function Timescale(props: TimescaleProps) {
     [rootInterval, intervals]
   );
 
-  const className = classNames(orientation, "increase-" + increaseDirection);
+  const className = classNames(orientation, "increase-" + increaseDirection, onClick ? "clickable" : null);
   const length = absoluteAgeScale ? l ?? 6000 : null;
 
   let ageRange2 = null;
@@ -114,8 +114,8 @@ function Timescale(props: TimescaleProps) {
       orientation,
       levels,
     },
-    h(TimescaleContainer, { className, onClick }, [
-      h(TimescaleBoxes, { interval: timescale, intervalStyle }),
+    h(TimescaleContainer, { className }, [
+      h(TimescaleBoxes, { interval: timescale, intervalStyle, onClick }),
       h.if(showAgeAxis)(AgeAxis, axisProps),
       h.if(cursorPosition != null)(cursorComponent, { age: cursorPosition }),
     ])

packages/timescale/src/main.module.scss

@@ -125,3 +125,7 @@
   height: 2px;
   width: 100%;
 }
+
+.clickable {
+  cursor: pointer;
+}

packages/timescale/stories/main.stories.ts

@@ -17,6 +17,9 @@ export const Horizontal = {
     orientation: TimescaleOrientation.HORIZONTAL,
     levels: [0, 5],
     absoluteAgeScale: false,
+    onClick: (e, interval) => {
+      console.log("Clicked interval:", interval);
+    }
   },
 };
 

packages/ui-components/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [unreleased]
+Added the following components:
+- SearchBar - general input field search bar
+- CreateCheckins - takes checkin data as input and creates checkins
+
 ## [4.2.0] - 2025-04-09
 
 - Updated `zustand` dependency

packages/ui-components/src/checkins.module.sass

@@ -0,0 +1,131 @@
+.checkin
+  background-color: var(--panel-background-color)
+  color: black
+  text-align: left
+  border: solid var(--card-shadow-color) 1px
+  padding: 6px 15px
+  padding-top: 2px
+  font-size: 14px
+  color: var(--text-emphasized-color)
+  margin-top: 10px
+  cursor: pointer
+
+  &:hover 
+    border: solid var(--text-emphasized-color) 1px
+
+  .description
+    padding: 0
+
+  h3
+    color: var(--text-emphasized-color)
+
+  a
+    color: black
+    text-decoration: none
+
+    &:hover
+      color: black
+
+  .star
+    height: 15px
+
+  .checkin-header
+    display: flex
+
+  .checkin-name
+    font-size: 20px
+    font-weight: 500
+    color: #333
+    margin-bottom: 0
+
+  .profile-pic
+    height: 80px
+    width: 80px
+    border-radius: 50%
+    display: inline-block
+    margin-right: 10px
+
+  .box-header
+    display: flex
+
+  .checkin-info
+    display: grid
+    margin: auto
+    margin-left: 0
+    margin-right: 0
+    p
+      padding: 0
+
+  h3, h4, p
+    margin: 0
+
+  .checkin-link
+    position: relative
+
+    .image-details
+      position: absolute
+      top: -150px
+      left: 0
+      right: 0
+      bottom: 0
+      display: flex
+      justify-content: center
+      align-items: center
+      display: none
+      color: white
+
+    .observation-img
+      margin-top: 10px
+      width: 100%
+      height: 150px
+      object-fit: cover
+      border-radius: 2%
+
+    &:hover
+      .observation-img
+        -webkit-filter: brightness(70%)
+      .image-details
+        display: flex
+
+  .description
+    margin-top: 10px
+
+  .no-image
+    color: var(--panel-text)
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 10px
+    marigin: 0
+
+    .details-image
+      filter: var(--anti-img-color)
+
+.checkin-footer
+  display: flex
+  justify-content: center
+
+  svg
+    filter: var(--anti-img-color)
+
+  .likes-container
+    display: grid
+    grid-template-columns: 50% 50%
+    width: 25%
+    justify-content: end
+    place-items: center
+
+  .comments-container
+    display: grid
+    grid-template-columns: 50% 50%
+    width: 25%
+    place-items: center
+
+  .observations-container
+    display: grid
+    grid-template-columns: 50% 50%
+    width: 25%
+    place-items: center
+
+.details
+  color: var(--text-emphasized-color)