react-iframe-bridge 1.0.0 → 2.0.0

package/src/contexts/iframe_bridge.tsx

@@ -0,0 +1,234 @@
+// https://github.com/import-js/eslint-plugin-import/issues/1810
+
+import { onMessage, ready } from 'iframe-bridge/iframe';
+import { produce } from 'immer';
+import type { ReactNode, Reducer } from 'react';
+import { createContext, useContext, useEffect, useReducer } from 'react';
+import type { RocDocument } from 'rest-on-couch-client';
+import { Roc } from 'rest-on-couch-client';
+
+import ErrorPage from '../components/error_page.js';
+import LoadingFull from '../components/loading_full.js';
+import type { SampleEntryContent, SampleEntryId } from '../types/db.js';
+import type { ActionType } from '../types/util.js';
+
+const iframeBridgeContext = createContext<IframeBridgeReadyContextType<
+  any,
+  any
+> | null>(null);
+
+export function useIframeBridgeContext<
+  PublicUserInfo = unknown,
+  PrivateUserInfo = unknown,
+>(): IframeBridgeReadyContextType<PublicUserInfo, PrivateUserInfo> {
+  const context = useContext(iframeBridgeContext);
+  if (!context) {
+    throw new Error('Iframe bridge context is not ready');
+  }
+  return context;
+}
+
+export function useIframeBridgeSample(): RocDocument<
+  SampleEntryContent,
+  SampleEntryId
+> {
+  const context = useIframeBridgeContext();
+  if (!context.sample) {
+    throw new Error('No sample in context');
+  }
+  return context.sample;
+}
+
+interface IframeBridgeContextType<
+  PublicUserInfo = unknown,
+  PrivateUserInfo = unknown,
+> {
+  state: 'initial' | 'loading' | 'ready' | 'standalone-error';
+  data: IframeDataMessage | null;
+  roc: Roc<PublicUserInfo, PrivateUserInfo> | null;
+  hasSample: boolean;
+  sample: RocDocument<SampleEntryContent, SampleEntryId> | null;
+}
+
+interface IframeBridgeReadyContextTypeBase<PublicUserInfo, PrivateUserInfo> {
+  state: 'ready';
+  data: IframeDataMessage;
+  roc: Roc<PublicUserInfo, PrivateUserInfo>;
+}
+
+interface IframeBridgeReadyContextTypeWithSample<
+  PublicUserInfo,
+  PrivateUserInfo,
+> extends IframeBridgeReadyContextTypeBase<PublicUserInfo, PrivateUserInfo> {
+  hasSample: true;
+  sample: RocDocument<SampleEntryContent, SampleEntryId>;
+}
+
+interface IframeBridgeReadyContextTypeWithoutSample<
+  PublicUserInfo,
+  PrivateUserInfo,
+> extends IframeBridgeReadyContextTypeBase<PublicUserInfo, PrivateUserInfo> {
+  hasSample: false;
+  sample: null;
+}
+
+type IframeBridgeReadyContextType<
+  PublicUserInfo = unknown,
+  PrivateUserInfo = unknown,
+> =
+  | IframeBridgeReadyContextTypeWithSample<PublicUserInfo, PrivateUserInfo>
+  | IframeBridgeReadyContextTypeWithoutSample<PublicUserInfo, PrivateUserInfo>;
+
+interface IframeDataMessage {
+  couchDB: {
+    url: string;
+    database: string;
+  };
+  uuid: string;
+}
+
+type IframeMessage =
+  | {
+      type: 'tab.data';
+      message: IframeDataMessage;
+    }
+  | { type: 'tab.focus' };
+
+type IframeBridgeContextAction =
+  | ActionType<'RECEIVE_DATA', IframeDataMessage>
+  | ActionType<'SET_SAMPLE', RocDocument<SampleEntryContent, SampleEntryId>>
+  | ActionType<'STANDALONE_TIMEOUT'>;
+
+const iframeBridgeReducer: Reducer<
+  IframeBridgeContextType,
+  IframeBridgeContextAction
+> = produce(
+  (state: IframeBridgeContextType, action: IframeBridgeContextAction) => {
+    switch (action.type) {
+      case 'RECEIVE_DATA': {
+        state.data = action.payload;
+        state.roc = new Roc(action.payload.couchDB);
+        if (action.payload.uuid) {
+          state.state = 'loading';
+          state.hasSample = true;
+          state.sample = null;
+        } else {
+          state.state = 'ready';
+        }
+        break;
+      }
+      case 'SET_SAMPLE': {
+        state.sample = action.payload;
+        state.state = 'ready';
+        break;
+      }
+      case 'STANDALONE_TIMEOUT': {
+        state.state = 'standalone-error';
+        break;
+      }
+      default:
+        throw new Error('unreachable');
+    }
+  },
+);
+
+const initialState: IframeBridgeContextType = {
+  state: 'initial',
+  data: null,
+  roc: null,
+  hasSample: false,
+  sample: null,
+};
+
+export function IframeBridgeProvider(props: {
+  children: ReactNode;
+  requireSample?: boolean;
+  allowStandalone?: boolean;
+}) {
+  const [state, dispatch] = useReducer(iframeBridgeReducer, initialState);
+
+  useEffect(() => {
+    onMessage((message: IframeMessage) => {
+      switch (message.type) {
+        case 'tab.data': {
+          dispatch({ type: 'RECEIVE_DATA', payload: message.message });
+          break;
+        }
+        case 'tab.focus': {
+          // Ignore this event. Happens in C6H6 when an already opened tab is
+          // refocused.
+          break;
+        }
+        default:
+          // eslint-disable-next-line no-console
+          console.error(message);
+          throw new Error('unreachable');
+      }
+    });
+    ready();
+  }, []);
+
+  useEffect(() => {
+    if (!props.allowStandalone && state.state === 'initial') {
+      const timeout = setTimeout(() => {
+        dispatch({ type: 'STANDALONE_TIMEOUT' });
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [props.allowStandalone, state.state]);
+
+  useEffect(() => {
+    if (!state.roc || !state.data?.uuid) return;
+    let cancelled = false;
+    const document = state.roc.getDocument<SampleEntryContent, SampleEntryId>(
+      state.data.uuid,
+    );
+    document
+      .fetch()
+      .then(() => {
+        if (!cancelled) {
+          dispatch({ type: 'SET_SAMPLE', payload: document });
+        }
+      })
+      .catch((error: unknown) => {
+        // TODO: handle error
+        // eslint-disable-next-line no-console
+        console.error(error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [state.roc, state.data]);
+
+  if (state.state === 'standalone-error') {
+    return (
+      <ErrorPage
+        title="Invalid access"
+        subtitle="This page cannot be accessed without iframe-bridge."
+      />
+    );
+  }
+
+  if (state.state !== 'ready') {
+    return (
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <LoadingFull />
+      </div>
+    );
+  }
+
+  if (!state.hasSample && props.requireSample) {
+    return (
+      <ErrorPage
+        title="Invalid access"
+        subtitle="This page must be accessed with a sample."
+      />
+    );
+  }
+
+  return (
+    <iframeBridgeContext.Provider value={state as IframeBridgeReadyContextType}>
+      {props.children}
+    </iframeBridgeContext.Provider>
+  );
+}

package/src/contexts/roc.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { Roc } from 'rest-on-couch-client';
+
+const rocContext = createContext<Roc | null>(null);
+
+export function useRoc<PublicUserInfo = unknown, PrivateUserInfo = unknown>() {
+  const roc = useContext(rocContext) as Roc<PublicUserInfo, PrivateUserInfo>;
+  if (!roc) {
+    throw new Error('missing roc');
+  }
+  return roc;
+}
+
+export function RocProvider(props: {
+  children: ReactNode;
+  url: string;
+  database: string;
+}) {
+  const { url, database, children } = props;
+  const roc = useMemo(() => new Roc({ url, database }), [url, database]);
+  return <rocContext.Provider value={roc}>{children}</rocContext.Provider>;
+}

package/src/hooks/local_storage.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { getItem, setItem } from '../utils/local_storage.js';
+
+/**
+ * Like `useState`, but initializing from `localStorage` if available and saving
+ * to `localStorage` everytime the state is changed.
+ * @param key localStorage key. Will be appended to the `react-iframe-bridge-` prefix.
+ * @param initialValue Value to use if the storage is empty.
+ */
+export function useLocalStorage<ValueType>(
+  key: string,
+  initialValue: ValueType,
+) {
+  const [storedValue, setStoredValue] = useState<ValueType>(() => {
+    // Get from local storage by key.
+    const item = getItem(key);
+    // Parse stored json or if none return initialValue.
+    return item ? (item as ValueType) : initialValue;
+  });
+
+  // Return a wrapped version of useState's setter function that persists the new value to localStorage.
+  const setValue = useCallback(
+    (value: ValueType) => {
+      // Save state.
+      setStoredValue(value);
+      // Save to local storage.
+      setItem(key, value);
+    },
+    [key],
+  );
+
+  return [storedValue, setValue] as const;
+}
+
+/**
+ * Save the provided value to `localStorage` everytime it changes.
+ * @param key localStorage key. Will be appended to the `react-iframe-bridge-` prefix.
+ * @param value Value to save.
+ */
+export function useSaveToLocalStorage(key: string, value: unknown): void {
+  useEffect(() => {
+    setItem(key, value);
+  }, [key, value]);
+}

package/src/hooks/use_roc_query.ts

@@ -0,0 +1,75 @@
+import type { Reducer } from 'react';
+import { useEffect, useReducer } from 'react';
+import type { IQueryResult } from 'rest-on-couch-client';
+
+import { useRoc } from '../contexts/roc.js';
+
+export type RocQueryResult<T> = IQueryResult<[string, string], T>;
+
+interface RocQueryState<T = unknown> {
+  loading: boolean;
+  error: null | Error;
+  result: null | Array<RocQueryResult<T>>;
+}
+
+type RocQueryHookResult<T> = RocQueryState<T>;
+
+type RocQueryAction<T> =
+  | { type: 'SET_RESULT'; value: Array<RocQueryResult<T>> }
+  | { type: 'ERROR'; value: Error }
+  | { type: 'LOAD' };
+
+function rocQueryReducer<T>(
+  state: RocQueryState<T>,
+  action: RocQueryAction<T>,
+): RocQueryState<T> {
+  switch (action.type) {
+    case 'LOAD':
+      return {
+        ...state,
+        error: null,
+        loading: true,
+      };
+    case 'SET_RESULT':
+      return {
+        loading: false,
+        error: null,
+        result: action.value,
+      };
+    case 'ERROR':
+      return { loading: false, error: action.value, result: null };
+    default:
+      throw new Error('unreachable');
+  }
+}
+
+interface RocQueryHookOptions {
+  mine?: boolean;
+}
+
+export function useRocQuery<T = unknown>(
+  viewName: string,
+  options: RocQueryHookOptions = {},
+): RocQueryHookResult<T> {
+  const { mine = false } = options;
+  const roc = useRoc();
+  const [state, dispatch] = useReducer<
+    Reducer<RocQueryState<T>, RocQueryAction<T>>
+  >(rocQueryReducer, {
+    loading: true,
+    error: null,
+    result: null,
+  });
+  useEffect(() => {
+    dispatch({ type: 'LOAD' });
+    const query = roc.getQuery<[string, string], T>(viewName, { mine });
+    query
+      .fetch()
+      .then((result) => dispatch({ type: 'SET_RESULT', value: result }))
+      .catch((err: unknown) => {
+        dispatch({ type: 'ERROR', value: err as Error });
+      });
+  }, [roc, viewName, mine]);
+
+  return state;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { Home } from './components/home/home.js';
+export { useRoc, RocProvider } from './contexts/roc.js';
+export {
+  useIframeBridgeContext,
+  useIframeBridgeSample,
+  IframeBridgeProvider,
+} from './contexts/iframe_bridge.js';

package/src/types/db.ts

@@ -0,0 +1,81 @@
+export interface TocEntry {
+  mf: string;
+  mw: number;
+  keyword: string[];
+  meta: Record<string, unknown>;
+  title: string;
+  nbNmr: number;
+  nbIR: number;
+  nbRaman: number;
+  nbMass: number;
+  nb1d: number;
+  nb2d: number;
+  nb1h: number;
+  nb13c: number;
+  nbTGA: number;
+  nbDSC: number;
+  nbXRD: number;
+  nbXPS: number;
+  nbUV: number;
+  nbChromatogram: number;
+  nbXray: number;
+  nbNucleic: number;
+  nbPeptidic: number;
+  modificationDate: number;
+  b64ShortId: string;
+  hidden: boolean;
+  names: string[];
+  reference: string;
+}
+
+export type SampleEntryId = [string, string];
+export interface SampleEntry {
+  _id: string;
+  _rev: string;
+  $type: 'entry';
+  $id: SampleEntryId;
+  $kind: 'sample';
+  $owners: string[];
+  $content: SampleEntryContent;
+}
+
+export interface SampleEntryContent {
+  general: {
+    title?: string;
+    name?: Array<{ value: string }>;
+    mf: string;
+    mw: number;
+    em: number;
+    molfile: string;
+    ocl: {
+      value: string;
+      coordinates: string;
+      index: number[];
+    };
+  };
+  identifier: {
+    cas: Array<{ value: string }>;
+  };
+  spectra: {
+    nmr: SampleEntrySpectraNmr[];
+  };
+}
+
+export interface SampleEntrySpectraNmr {
+  dimension: number;
+  nucleus: string[];
+  isFid: boolean;
+  isFt: boolean;
+  title: string;
+  solvent: string;
+  pulse: string;
+  experiment: string;
+  temperature: number;
+  frequency: number;
+  type: string;
+  date: string;
+  range: unknown[];
+  jcamp: {
+    filename: string;
+  };
+}

package/src/types/util.ts

@@ -0,0 +1,3 @@
+export type ActionType<Action, Payload = void> = Payload extends void
+  ? { type: Action }
+  : { type: Action; payload: Payload };

package/src/utils/local_storage.ts

@@ -0,0 +1,35 @@
+// "Polyfill" localStorage for SSR and to add a prefix to the keys.
+
+/**
+ * Prefix a `localStorage` key to avoid conflicts with other applications.
+ * @param key The key to prefix.
+ * @returns
+ */
+function prefixKey(key: string): string {
+  if (key.length === 0) {
+    throw new Error('key must have at least one character');
+  }
+  return `react-iframe-bridge-${key}`;
+}
+
+let getItem: (key: string) => unknown | null;
+let setItem: (key: string, value: unknown) => void;
+
+if (typeof localStorage !== 'undefined') {
+  getItem = function getItem(key: string) {
+    const value = localStorage.getItem(prefixKey(key));
+    if (!value) return null;
+    return JSON.parse(value);
+  };
+  setItem = (key: string, value: unknown) =>
+    localStorage.setItem(prefixKey(key), JSON.stringify(value));
+} else {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getItem = (key: string) => null;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setItem = (key: string, value: unknown): void => {
+    // noop
+  };
+}
+
+export { getItem, setItem };

package/lib/components/ErrorPage.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react';
-interface ErrorPageProps {
-    title: string;
-    subtitle: string;
-    children?: ReactNode;
-}
-export default function ErrorPage(props: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/ErrorPage.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ErrorPage(props) {
-    return (_jsx("div", { className: "max-w-2xl m-auto md:max-w-4xl", children: _jsx("div", { className: "flex justify-between px-2 pt-4", children: _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-5xl font-bold sm:mt-16 text-primary-900", children: props.title }), _jsx("h2", { className: "mt-16 text-lg sm:mt-8", children: props.subtitle }), _jsx("div", { className: "mt-4", children: props.children })] }) }) }));
-}

package/lib/components/Input.d.ts

@@ -1,10 +0,0 @@
-import type { ChangeEvent } from 'react';
-interface InputProps {
-    name: string;
-    className?: string;
-    value: string;
-    readOnly?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-export default function Input(props: InputProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/Input.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-export default function Input(props) {
-    return (_jsx("input", { name: props.name, type: "text", className: clsx('appearance-none border border-neutral-600 bg-white px-3 py-2 text-base leading-none', props.className), value: props.value, readOnly: props.readOnly, onChange: props.onChange }));
-}

package/lib/components/LoadingFull.d.ts

@@ -1 +0,0 @@
-export default function LoadingFull(): import("react/jsx-runtime").JSX.Element;

package/lib/components/LoadingFull.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Spinner from './Spinner';
-export default function LoadingFull() {
-    return (_jsx("div", { className: "flex items-center justify-center w-full h-full", children: _jsx(Spinner, { className: "w-10 h-10 text-alternative-500" }) }));
-}

package/lib/components/Spinner.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-export default function Spinner(props) {
-    return (_jsxs("svg", { className: clsx('animate-spin', props.className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
-}

package/lib/components/home/Home.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { HomeContextProvider, useHomeDispatchContext } from './HomeContext';
-import HomeHeader from './HomeHeader';
-import HomeIframe from './HomeIframe';
-import HomeNoSample from './HomeNoSample';
-import HomeSamples from './HomeSamples';
-export function Home(props) {
-    const { baseUrl, noSampleSelection, rocUrl, database, defaultPath } = props;
-    return (_jsx(HomeContextProvider, { rocUrl: rocUrl, database: database, defaultPath: defaultPath, children: _jsx(HomeInternal, { noSampleSelection: noSampleSelection, baseUrl: baseUrl }) }));
-}
-function HomeInternal(props) {
-    const homeDispatch = useHomeDispatchContext();
-    useEffect(() => {
-        if (props.noSampleSelection) {
-            homeDispatch({
-                type: 'OPEN_NO_SAMPLE',
-            });
-        }
-    }, [props.noSampleSelection, homeDispatch]);
-    return (_jsxs("div", { className: "flex flex-col w-screen h-screen", children: [_jsx(HomeHeader, {}), _jsxs("div", { className: "flex flex-row flex-1 mt-2 border-t border-neutral-300 min-h-0", children: [!props.noSampleSelection && (_jsxs("div", { className: "flex flex-col w-48 px-2 pt-4 space-y-3 border-r border-neutral-300 overflow-auto", children: [_jsx(HomeNoSample, {}), _jsx(HomeSamples, {})] })), _jsx(HomeIframe, { baseUrl: props.baseUrl })] })] }));
-}

package/lib/components/home/HomeContext.d.ts

@@ -1,20 +0,0 @@
-import type { Dispatch, ReactNode } from 'react';
-import type { ActionType } from '../../types/util';
-interface HomeContextType {
-    rocUrl: string;
-    database: string;
-    iframePath: string;
-    iframeMode: 'closed' | 'sample' | 'no-sample';
-    selectedSample: string | null;
-}
-type HomeContextAction = ActionType<'SELECT_SAMPLE', string> | ActionType<'OPEN_NO_SAMPLE'> | ActionType<'SET_IFRAME_PAGE', string>;
-interface HomeContextProviderProps {
-    children: ReactNode;
-    rocUrl?: string;
-    database?: string;
-    defaultPath?: string;
-}
-export declare function HomeContextProvider(props: HomeContextProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useHomeContext(): HomeContextType;
-export declare function useHomeDispatchContext(): Dispatch<HomeContextAction>;
-export {};

package/lib/components/home/HomeHeader.d.ts

@@ -1 +0,0 @@
-export default function HomeHeader(): import("react/jsx-runtime").JSX.Element;

package/lib/components/home/HomeHeader.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Input from '../Input';
-import { useHomeContext, useHomeDispatchContext } from './HomeContext';
-export default function HomeHeader() {
-    const { rocUrl, database, iframePath } = useHomeContext();
-    const dispatch = useHomeDispatchContext();
-    return (_jsxs("header", { className: "flex flex-row p-2 space-x-4", children: [_jsx(Input, { name: "rocUrl", className: "flex-1", value: rocUrl, readOnly: true }), _jsx(Input, { name: "database", value: database, readOnly: true }), _jsx(Input, { name: "iframe-page", value: iframePath, className: "flex-1", onChange: (event) => {
-                    dispatch({ type: 'SET_IFRAME_PAGE', payload: event.target.value });
-                } })] }));
-}

package/lib/components/home/HomeNoSample.d.ts

@@ -1 +0,0 @@
-export default function HomeNoSample(): import("react/jsx-runtime").JSX.Element;

package/lib/components/home/HomeSamples.d.ts

@@ -1 +0,0 @@
-export default function HomeSamples(): import("react/jsx-runtime").JSX.Element;

package/lib/components/home/HomeSamples.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRocQuery } from '../../hooks/useRocQuery';
-import Spinner from '../Spinner';
-import { useHomeContext, useHomeDispatchContext } from './HomeContext';
-import HomeSelector from './HomeSelector';
-export default function HomeSamples() {
-    const { loading, error, result } = useRocQuery('sample_toc');
-    if (error) {
-        throw error;
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("h1", { className: "mb-4 text-lg font-bold text-center", children: "Sample TOC" }), _jsx("div", { className: "flex-1", children: loading || !result ? _jsx(Loading, {}) : _jsx(SampleToc, { samples: result }) })] }));
-}
-function SampleToc(props) {
-    const { selectedSample } = useHomeContext();
-    const dispatch = useHomeDispatchContext();
-    function selectSample(id) {
-        dispatch({ type: 'SELECT_SAMPLE', payload: id });
-    }
-    return (_jsx("div", { className: "space-y-2", children: props.samples.map((sample) => (_jsx(HomeSelector, { selected: sample.id === selectedSample, text: sample.value.reference, onClick: () => selectSample(sample.id) }, sample.id))) }));
-}
-function Loading() {
-    return (_jsx("div", { className: "flex justify-center mt-8", children: _jsx(Spinner, { className: "w-8 h-8 text-alternative-500" }) }));
-}

package/lib/components/home/HomeSelector.d.ts

@@ -1,5 +0,0 @@
-export default function HomeSelector(props: {
-    selected: boolean;
-    onClick: () => void;
-    text: string;
-}): import("react/jsx-runtime").JSX.Element;

package/lib/components/home/HomeSelector.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-export default function HomeSelector(props) {
-    return (_jsx("div", { className: clsx('p-1 border rounded cursor-pointer border-neutral-400', props.selected && 'bg-primary-50 shadow-inner'), onClick: props.onClick, children: props.text }));
-}