progress towards publishable component

Author: seveibar

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-timeseries",
+  "name": "react-time-series",
   "version": "0.1.0",
   "dependencies": {
     "@material-ui/core": "^4.11.0",

src/components/ReactTimeSeries/index.js

@@ -0,0 +1,70 @@
+import React, { useState, useMemo } from "react"
+import useEventCallback from "use-event-callback"
+
+import MainLayout from "../MainLayout"
+
+const emptyAr = []
+
+// This is a cloudflare CORs proxy from the project maintainer @seveibar
+const defaultCorsProxy =
+  "https://corsproxy.seve.workers.dev/corsproxy/?apiurl={URL}"
+
+const defaultEnabledTools = [
+  "create-durations",
+  "create-timestamps",
+  "label-durations",
+  "label-timestamps",
+]
+const defaultGraphs = [{ keyName: "value" }]
+
+export const ReactTimeSeries = ({
+  corsProxy = defaultCorsProxy,
+  interface: iface,
+  sample,
+  onModifySample,
+}) => {
+  const {
+    timeFormat,
+    enabledTools = defaultEnabledTools,
+    durationLabels = emptyAr,
+    timestampLabels = emptyAr,
+    graphs = defaultGraphs,
+    allowCustomLabels,
+  } = iface
+  let { timeData: sampleTimeData, audioUrl, csvUrl, annotation } = sample
+
+  const timeData = useMemo(() => {
+    if (sampleTimeData) return sampleTimeData
+    // TODO load audioUrl
+    // TODO load csvUrl
+  }, [sampleTimeData, audioUrl, csvUrl])
+
+  const curveGroups = useMemo(() => {}, [timeData, graphs])
+
+  const [timestamps, setTimestamps] = useState(() => {
+    if (!annotation?.timestamps) return []
+    // TODO derive timestamps
+    return []
+  })
+  const [durationGroups, setDurationGroups] = useState(() => {
+    if (!annotation?.durations) return []
+    // TODO derive timestamps
+    return []
+  })
+
+  const onChangeDurationGroups = useEventCallback(() => {})
+  const onChangeTimestamps = useEventCallback(() => {})
+
+  return (
+    <MainLayout
+      curveGroups={curveGroups}
+      timeFormat={timeFormat}
+      durationGroups={durationGroups}
+      onChangeDurationGroups={onChangeDurationGroups}
+      timestamps={timestamps}
+      onChangeTimestamps={onChangeTimestamps}
+    />
+  )
+}
+
+export default ReactTimeSeries

src/components/ReactTimeSeries/index.story.js

@@ -0,0 +1,11 @@
+import React from "react"
+import ReactTimeSeries from "./"
+
+export default {
+  name: "ReactTimeSeries",
+  component: ReactTimeSeries,
+}
+
+export const Primary = () => {
+  return <ReactTimeSeries />
+}