@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/components/button/button.scss

@@ -0,0 +1,140 @@
+@import '../scss/variables';
+
+.on-button {
+  font-family: $font-sans;
+  font-weight: 600;
+  border: 0;
+  border-radius: $border-radius-default;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.4em;
+}
+
+.on-button--primary {
+  color: #fff;
+  background-color: var(--current-theme-primary);
+  transition: background-color 0.3s;
+  border: 2px solid transparent;
+  &:hover {
+    background-color: var(--current-theme-primary-hover);
+  }
+  &.active {
+    background-color: transparent;
+    color: var(--current-theme-primary);
+    border-color: var(--current-theme-primary-hover);
+  }
+}
+
+.on-button--secondary {
+  color: $on-dark-aqua;
+  background-color: $on-light-green;
+  transition: background-color 0.3s;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
+  border: 2px solid transparent;
+  &:hover {
+    background-color: darken($on-light-green, 5%);
+  }
+  &.active {
+    background-color: transparent;
+    color: $on-dark-aqua;
+    border-color: $on-light-green;
+  }
+}
+
+.icon-text {
+  display: flex;
+  align-items: center;
+  i {
+    margin-right: 10px;
+  }
+}
+
+.img-icon-text {
+  display: flex;
+  align-items: center;
+
+  img {
+    margin-right: 10px;
+    height: auto;
+  }
+}
+
+.on-no-background {
+  background-color: transparent;
+  &:hover {
+    text-decoration: underline;
+  }
+  &.icon-text,
+  &.img-icon-text {
+    padding: 0 0 5px;
+    border-radius: 0;
+    border-bottom: 1px solid transparent;
+    &:hover {
+      text-decoration: none;
+      border-bottom: 1px solid;
+    }
+  }
+}
+.on-button--default {
+  background-color: transparent;
+}
+
+.on-button--navbar {
+  background-color: #f4f4f4;
+  color: #204e5a;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
+  &:hover {
+    background-color: darken(#f4f4f4, 5%);
+  }
+}
+
+.on-button[disabled] {
+  cursor: default;
+  background-color: #aaa;
+  color: #777;
+}
+
+.on-button--xsmall {
+  font-size: 10px;
+  padding: 5px 8px;
+}
+
+.on-button--small {
+  font-size: 12px;
+  padding: 11px 14px;
+}
+
+.on-button--medium {
+  font-size: 14px;
+  padding: 14px 20px;
+}
+
+.on-button--large {
+  font-size: 18px;
+  padding: 15px 24px;
+
+  &.on-button--navbar {
+    font-size: 14px;
+    padding: 18px 24px;
+  }
+}
+
+.login-button {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 0 20px;
+}
+
+.button-group-wrapper {
+  position: relative;
+  .btn-group {
+    justify-content: flex-start;
+    button {
+      margin: 0 10px 0 0;
+    }
+    .tooltip {
+      display: inline-block;
+    }
+  }
+}

package/src/scripts/components/count-toggle/CountToggle.tsx

@@ -0,0 +1,65 @@
+import React from "react"
+import { Tooltip } from "../tooltip/Tooltip"
+import { Button } from "../button/Button"
+import "./count-toggle.scss"
+
+export interface CountToggleProps {
+  label?: string
+  icon?: string
+  disabled?: boolean
+  tooltip?: string
+  toggleClick?: () => void
+  lock?: boolean
+  clicked: boolean
+  count: number
+}
+export const CountToggle = ({
+  label,
+  icon,
+  disabled,
+  tooltip,
+  toggleClick,
+  clicked,
+  count,
+}: CountToggleProps) => {
+  const toggleButton = (
+    <span className="toggle-counter">
+      <Button
+        className={clicked ? "toggle-btn active" : "toggle-btn"}
+        iconSize="12px"
+        icon={"fa " + icon}
+        onClick={toggleClick}
+        label={label}
+      >
+        <span className="count-span">{count}</span>
+      </Button>
+    </span>
+  )
+  const disabledToggleButton = (
+    <span className="toggle-counter disabled">
+      <Button
+        className={clicked ? "toggle-btn active" : "toggle-btn"}
+        iconSize="12px"
+        icon={"fa " + icon}
+        onClick={toggleClick}
+        label={label}
+      >
+        <span className="count-span">{count}</span>
+      </Button>
+    </span>
+  )
+  const button = disabled ? disabledToggleButton : toggleButton
+  return (
+    <>
+      <div className="toggle-counter-wrap">
+        {tooltip
+          ? (
+            <Tooltip flow="up" tooltip={tooltip}>
+              {button}
+            </Tooltip>
+          )
+          : button}
+      </div>
+    </>
+  )
+}

package/src/scripts/components/count-toggle/__tests__/CountToggle.spec.tsx

@@ -0,0 +1,31 @@
+import { vi } from "vitest"
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { CountToggle } from "../CountToggle"
+
+export const datasetType_available = [
+  { label: "All Public", value: "All Public" },
+  { label: "Following", value: "Following" },
+  { label: "My Datasets", value: "My Datasets" },
+  { label: "My Bookmarks", value: "My Bookmarks" },
+]
+
+describe("CountToggle component", () => {
+  it("calls toggleClick on toggle", () => {
+    const toggleClick = vi.fn()
+    const clicked = false
+    const count = 3
+    render(
+      <CountToggle
+        label="count toggle test"
+        icon="fa-thumbtack"
+        toggleClick={toggleClick}
+        tooltip="test tip"
+        clicked={clicked}
+        count={count}
+      />,
+    )
+    fireEvent.click(screen.getByText("count toggle test"))
+    expect(toggleClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/scripts/components/count-toggle/count-toggle.scss

@@ -0,0 +1,34 @@
+@import '../scss/variables';
+
+.toggle-btn {
+  border: 1px solid #aaa;
+  padding: 0 7px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #eee;
+  &:hover {
+    text-decoration: none;
+    background-color: white;
+  }
+  i {
+    margin: 2px 13px 0 5px;
+    color: #999;
+  }
+  > span {
+    display: block;
+    position: relative;
+
+    &.count-span {
+      border-left: 1px solid #aaa;
+      margin-left: 14px;
+      padding: 3px 3px 3px 10px;
+    }
+  }
+
+  &.active {
+    i {
+      color: var(--current-theme-primary);
+    }
+  }
+}

package/src/scripts/components/dropdown/Dropdown.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from "react"
+import "./dropdown.scss"
+
+export interface DropdownProps {
+  label: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export const Dropdown = ({ children, label, className }: DropdownProps) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const wrapperRef = useRef(null)
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsOpen((_prevIsOpen) => false)
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [wrapperRef])
+
+  return (
+    <div className={className + " dropdown-wrapper"} ref={wrapperRef}>
+      <div
+        className={`toggle ${isOpen ? "active" : ""}`}
+        onClick={() => setIsOpen((prevIsOpen) => !prevIsOpen)}
+      >
+        <span>{label}</span>
+      </div>
+      <div className={`menu ${isOpen ? "expanded" : "collapsed"}`} role="menu">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/scripts/components/dropdown/dropdown.scss

@@ -0,0 +1,29 @@
+@import '../scss/variables';
+
+.dropdown-wrapper {
+  display: inline-block;
+  .toggle {
+    cursor: pointer;
+  }
+  .menu {
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    z-index: 9999;
+    right: 0;
+    background-color: #fff;
+    border-radius: $border-radius-default;
+    @media (max-width: 800px) {
+      width: 290px;
+      right: 0;
+    }
+    @media (max-width: 435px) {
+      right: 0;
+      left: 0;
+    }
+
+    &.expanded {
+      height: auto;
+    }
+  }
+}

package/src/scripts/components/facets/FacetRadio.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { RadioGroup } from "../radio/RadioGroup"
+import "./facet.scss"
+
+export interface FacetRadioProps {
+  // if radioArr is string[]
+  // then the string items are both the label and value for the radio buttons
+  radioArr: (
+    | string
+    | {
+      label: string
+      onChange?: React.MouseEventHandler<HTMLInputElement>
+      value: string
+    }
+  )[]
+  layout: string
+  name: string
+  selected: string
+  setSelected: (value) => void
+  className?: string
+}
+
+export const FacetRadio = ({
+  radioArr,
+  layout,
+  name,
+  selected,
+  setSelected,
+  className,
+}: FacetRadioProps) => {
+  const divClass = className ? `facet-radio ${className}` : "facet-radio"
+  return (
+    <div className={divClass}>
+      <RadioGroup
+        setSelected={setSelected}
+        selected={selected}
+        name={name}
+        radioArr={radioArr}
+        layout={layout}
+      />
+    </div>
+  )
+}

package/src/scripts/components/facets/FacetRange.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+import { TwoHandleRange } from "../range/TwoHandleRange"
+import "./facet.scss"
+
+export interface FacetRangeProps {
+  min: number
+  max: number
+  step: number
+  value: [number | null, number | null]
+  onChange: (newvalue) => void
+  uncappedMax?: boolean
+}
+
+export const FacetRange = ({
+  min,
+  max,
+  step,
+  value,
+  onChange,
+  uncappedMax,
+}: FacetRangeProps) => {
+  return (
+    <div className="facet-range">
+      <TwoHandleRange
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={onChange}
+        uncappedMax={uncappedMax}
+      />
+    </div>
+  )
+}

package/src/scripts/components/facets/FacetSearch.tsx

@@ -0,0 +1,66 @@
+import React from "react"
+import { TermSearch } from "../input/TermSearch"
+import type { ButtonPropsSize } from "../button/Button"
+import type { InputPropsStyle } from "../input/Input"
+import "./facet.scss"
+
+export interface FacetSearchProps {
+  setTermValue: (string) => void
+  pushTerm: React.Dispatch<React.SetStateAction<object[]>>
+  allTerms: string[]
+  className?: string
+  type?: string
+  placeholder?: string
+  labelStyle?: InputPropsStyle
+  name?: string
+  termValue: string
+  primary?: boolean
+  color?: string
+  icon?: string
+  iconSize?: string
+  size?: ButtonPropsSize
+  helpText?: React.ReactNode
+  removeFilterItem?(param, value): void
+}
+
+export const FacetSearch = ({
+  className,
+  termValue,
+  setTermValue,
+  pushTerm,
+  allTerms,
+  type,
+  placeholder,
+  labelStyle,
+  name,
+  color,
+  icon,
+  size,
+  iconSize,
+  helpText,
+  removeFilterItem,
+}: FacetSearchProps) => {
+  return (
+    <div className="facet-search">
+      {helpText ? <div className="help-text">{helpText}</div> : null}
+      <TermSearch
+        className={className}
+        primary={true}
+        color={color}
+        icon={icon}
+        iconSize={iconSize}
+        size={size}
+        pushTerm={pushTerm}
+        type={type}
+        label={null}
+        placeholder={placeholder}
+        labelStyle={labelStyle}
+        name={name}
+        termValue={termValue}
+        setTermValue={setTermValue}
+        allTerms={allTerms}
+        removeFilterItem={removeFilterItem}
+      />
+    </div>
+  )
+}

package/src/scripts/components/facets/FacetSelect.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import "./facet.scss"
+
+export type FacetSelectValueType =
+  | { label: string; value: string }
+  | string
+  | null
+
+export interface FacetSelectProps {
+  // items may be a list of objects with labels and values
+  //   or a simple array of strings, where the string is used for both their labels and values
+  items: (
+    | string
+    | {
+      label: string
+      value: string
+      count?: number
+      children?: null | { label: string; value: string; count: number }[]
+    }
+  )[]
+  className?: string
+  label?: string
+  selected: FacetSelectValueType
+  setSelected: (selected: FacetSelectValueType) => void
+}
+
+const get = (obj, property) => (typeof obj === "object" ? obj[property] : obj)
+export const check = (obj, property) =>
+  typeof obj === "object" && typeof obj[property] === "number"
+    ? obj[property].toLocaleString()
+    : typeof obj === "object"
+    ? obj[property]
+    : false
+
+export const FacetSelect = ({
+  items,
+  className,
+  selected,
+  label,
+  setSelected,
+}: FacetSelectProps) => {
+  const setSelectorNoPropagation = (e, value) => {
+    e.stopPropagation()
+    setSelected(value)
+  }
+  return (
+    <div className={className}>
+      {label && <h2>{label}</h2>}
+      <div className="facet-list">
+        <ul className="level-1">
+          {items.map((item, index) => (
+            <li
+              key={index}
+              onClick={(e) => setSelectorNoPropagation(e, get(item, "value"))}
+              className={selected && selected == get(item, "value")
+                ? "selected-facet facet"
+                : "facet"}
+            >
+              <span className="label">
+                {get(item, "label")}
+                {check(item, "count") && <span>({check(item, "count")})</span>}
+              </span>
+              {check(item, "children") && (
+                <ul className="level-2">
+                  {get(item, "children").map((item, index) => (
+                    <li
+                      key={index}
+                      onClick={(e) => setSelectorNoPropagation(e, item.value)}
+                      className={selected && selected == item.value
+                        ? "selected-facet facet"
+                        : "facet"}
+                    >
+                      <span className="label">
+                        {item.label}
+                        {item.count && <span>({item.count})</span>}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/scripts/components/facets/SingleSelect.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import "./facet.scss"
+
+export interface SingleSelectProps {
+  items: string[]
+  label?: string
+  className?: string
+  selected: string | null
+  setSelected: (selected: string | null) => void
+}
+
+export const SingleSelect = ({
+  items,
+  label,
+  className,
+  selected,
+  setSelected,
+}: SingleSelectProps) => {
+  const handleSelect = (e: React.MouseEvent, value: string) => {
+    e.stopPropagation()
+    setSelected(value)
+  }
+
+  return (
+    <div className={className}>
+      <ul className="single-select-list">
+        {items.map((item, index) => (
+          <li
+            key={index}
+            onClick={(e) => handleSelect(e, item)}
+            className={selected === item ? "selected-item" : "item"}
+          >
+            {label ? label : item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/scripts/components/facets/__tests__/FacetSelect.spec.tsx

@@ -0,0 +1,14 @@
+import { check } from "../FacetSelect"
+
+describe("FacetSelect component", () => {
+  describe("check()", () => {
+    it("adds commas to numeric properties", () => {
+      expect(check({ data: 1934810581 }, "data")).toEqual("1,934,810,581")
+    })
+    it("nested objects to return child object", () => {
+      expect(check({ num: 18485, obj: { num: 810591 } }, "obj")).toEqual({
+        num: 810591,
+      })
+    })
+  })
+})

package/src/scripts/components/facets/__tests__/SingleSelect.spec.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { SingleSelect } from "../SingleSelect"
+
+describe("SingleSelect Component", () => {
+  it("renders the provided label", () => {
+    const items = ["Option"]
+    let selectedValue: string | null = null
+
+    const mockSetSelected = (selected: string | null) => {
+      selectedValue = selected
+    }
+
+    // Test with label
+    render(
+      <SingleSelect
+        items={items}
+        selected={selectedValue}
+        setSelected={mockSetSelected}
+        label="Label"
+      />,
+    )
+
+    // Debug to check the rendered HTML
+    screen.debug()
+
+    // The label "Label" should be rendered outside the list
+    expect(screen.getByText("Label")).toBeInTheDocument()
+  })
+
+  it("renders the provided item", () => {
+    const items = ["Option"]
+    let selectedValue: string | null = null
+
+    const mockSetSelected = (selected: string | null) => {
+      selectedValue = selected
+    }
+
+    // Test without label
+    render(
+      <SingleSelect
+        items={items}
+        selected={selectedValue}
+        setSelected={mockSetSelected}
+      />,
+    )
+
+    // Debug to check the rendered HTML
+    screen.debug()
+
+    // Simulate selecting "Option"
+    const optionToSelect = screen.getByText("Option")
+    fireEvent.click(optionToSelect)
+
+    // Expect the selected value to be the clicked item ("Option")
+    expect(selectedValue).toBe("Option")
+  })
+})