@xylabs/sdk-react 2.8.4 → 2.9.3

package/src/components/Experiments/Experiments.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { Experiment } from './Experiment'
+import { Experiments } from './Experiments'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Experiments,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Components/Experiments',
+} as ComponentMeta<typeof Experiments>
+
+const Template: ComponentStory<typeof Experiments> = (args) => <Experiments {...args}></Experiments>
+
+const Default = Template.bind({})
+Default.args = {
+  children: [
+    <Experiment weight={50} key={'true'}>
+      True
+    </Experiment>,
+    <Experiment weight={50} key={'false'}>
+      False
+    </Experiment>,
+  ],
+  name: 'StorybookAB',
+}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Experiments/Experiments.tsx

@@ -4,18 +4,20 @@ import React, { ReactElement, useContext } from 'react'
 import { UserEventsContext } from '../../contexts'
 import { getLocalStorageObject, setLocalStorageObject } from '../../lib'
 import { ExperimentProps } from './Experiment'
+import { ExperimentsProps } from './ExperimentsProps'
+import { ExperimentsData, ExperimentsLocalStorageKey, OutcomesData, OutcomesLocalStorageKey } from './models'
 
 const defaultLocalStorageKey = 'testData'
 
 const experimentsTestData: { [index: string]: string } = {}
-let outcomes: { [index: string]: number } = {} //prevent multi-outcome
+let outcomes: OutcomesData = {} //prevent multi-outcome
 
 const saveOutcomes = () => {
-  setLocalStorageObject('outcomes', outcomes)
+  setLocalStorageObject(OutcomesLocalStorageKey, outcomes)
 }
 
 const loadOutcomes = () => {
-  outcomes = getLocalStorageObject('outcomes')
+  outcomes = getLocalStorageObject(OutcomesLocalStorageKey)
 }
 
 const mergeData = (data: { [index: string]: string }, log?: Log) => {
@@ -27,12 +29,6 @@ const mergeData = (data: { [index: string]: string }, log?: Log) => {
   return dataArray.join('|')
 }
 
-type Props = {
-  children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>
-  localStorageProp?: string | boolean
-  name: string
-}
-
 const missingKeyError = new Error('Experiment Elements must have Keys')
 
 const makeChildrenArray = (children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>) => {
@@ -59,7 +55,19 @@ const calcTotalWeight = (childList: ReactElement<ExperimentProps>[]) => {
   return totalWeight
 }
 
-const Experiments: React.FC<Props> = (props) => {
+const saveExperimentDebugRanges = (name: string, totalWeight: number, childList: ReactElement<ExperimentProps>[]) => {
+  const experiments = getLocalStorageObject<ExperimentsData>(ExperimentsLocalStorageKey) || {}
+  experiments[name] = {
+    totalWeight,
+    variants: childList.map((child) => ({
+      name: child.key?.toString(),
+      weight: child.props.weight,
+    })),
+  }
+  setLocalStorageObject(ExperimentsLocalStorageKey, experiments)
+}
+
+const Experiments: React.FC<ExperimentsProps> = (props) => {
   const { name, children, localStorageProp = true } = props
   const userEventsContext = useContext(UserEventsContext)
   const { userEvents } = userEventsContext
@@ -71,10 +79,13 @@ const Experiments: React.FC<Props> = (props) => {
 
   const totalWeight = calcTotalWeight(childList)
 
+  saveExperimentDebugRanges(name, totalWeight, childList)
+
   const firstTime = outcomes[name] === undefined
   let targetWeight = outcomes[name] ?? Math.random() * totalWeight
   outcomes[name] = targetWeight
   saveOutcomes()
+
   for (const child of childList) {
     targetWeight -= child.props.weight
     if (targetWeight > 0) continue

package/src/components/Experiments/ExperimentsDebugger.stories.tsx

@@ -0,0 +1,24 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { ExperimentsDebugger } from './index'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ExperimentsDebugger,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Components/ExperimentsDebugger',
+} as ComponentMeta<typeof ExperimentsDebugger>
+
+const Template: ComponentStory<typeof ExperimentsDebugger> = (args) => <ExperimentsDebugger {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Experiments/ExperimentsDebugger.tsx

@@ -0,0 +1,71 @@
+import { Slider, Typography } from '@mui/material'
+import React from 'react'
+
+import { useLocalStorage } from '../../hooks'
+import { FlexCol, FlexRow } from '../FlexBox'
+import {
+  ExperimentsData,
+  ExperimentsLocalStorageKey,
+  OutcomesData,
+  OutcomesLocalStorageKey,
+  VariantData,
+} from './models'
+
+const ExperimentsDebugger: React.FC = ({ ...props }) => {
+  const [experiments] = useLocalStorage<ExperimentsData>(ExperimentsLocalStorageKey, {})
+  const [outcomes, setOutcomes] = useLocalStorage<OutcomesData>(OutcomesLocalStorageKey, {})
+
+  const sumUpVariants = (items: VariantData[]) => items.reduce((acc, curr) => acc + curr.weight, 0)
+  const experimentEntries = Object.entries(experiments)
+
+  if (!experiments || !experimentEntries.length) {
+    return (
+      <FlexCol alignItems="stretch" {...props}>
+        <Typography variant="subtitle1">No Experiments loaded</Typography>
+        <Typography variant="subtitle2">Visit a page with an experiment to load the data</Typography>
+      </FlexCol>
+    )
+  }
+
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      {Object.entries(experiments).map((data) => {
+        const [name, experiment] = data
+        const outcome = (outcomes[name] || 0) as number
+
+        const marks = [
+          { label: `${experiment.variants[0].name} | ${experiment.variants[0].weight}`, value: 0 },
+          ...experiment.variants.map(({ weight }, index) => ({
+            label:
+              index === experiment.variants.length - 1 ? 'End' : `${experiment.variants[index + 1].name} | ${weight}`,
+            value: index === 0 ? weight : sumUpVariants(experiment.variants.slice(0, index + 1)),
+          })),
+        ]
+
+        return (
+          <FlexCol key={`experiment-${name}`} alignItems="stretch" paddingX={4} marginBottom={4} {...props}>
+            <FlexRow>
+              {name}:&nbsp;{outcome}
+            </FlexRow>
+            <FlexRow>
+              <Slider
+                aria-label={`Experiment ${name}`}
+                defaultValue={outcome}
+                value={outcome}
+                marks={marks}
+                onChange={(e, value) => {
+                  const truncated = Number((Array.isArray(value) ? value[0] : value).toFixed(2))
+                  outcomes[name] = truncated
+                  // Spread operator triggers rerender
+                  setOutcomes({ ...outcomes })
+                }}
+              />
+            </FlexRow>
+          </FlexCol>
+        )
+      })}
+    </FlexCol>
+  )
+}
+
+export { ExperimentsDebugger }

package/src/components/Experiments/ExperimentsProps.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react'
+
+import { ExperimentProps } from './Experiment'
+
+export type ExperimentsProps = {
+  children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>
+  localStorageProp?: string | boolean
+  name: string
+}

package/src/components/Experiments/index.tsx

@@ -1,4 +1,5 @@
 import { Experiment } from './Experiment'
 import { Experiments } from './Experiments'
+import { ExperimentsDebugger } from './ExperimentsDebugger'
 
-export { Experiment, Experiments }
+export { Experiment, Experiments, ExperimentsDebugger }

package/src/components/Experiments/models/index.ts

@@ -0,0 +1,8 @@
+export const OutcomesLocalStorageKey = 'outcomes'
+export const ExperimentsLocalStorageKey = 'experiments'
+
+export type OutcomesData = Record<string, number>
+
+export type ExperimentsData = Record<string, ExperimentData>
+export type ExperimentData = { totalWeight: number; variants: VariantData[] }
+export type VariantData = { weight: number; name?: string }

package/src/components/dialogs/ErrorDialog.tsx

@@ -1,6 +1,5 @@
 import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Typography } from '@mui/material'
 import { AxiosError } from 'axios'
-import React from 'react'
 
 import { ButtonEx } from '../ButtonEx'
 import { FlexRow } from '../FlexBox'

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint'
+export * from './useLocalStorage'
 export * from './useMediaQuery'
 export * from './useMounted'
 export * from './useNavigateToEthAddress'

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+
+import { getLocalStorageObject, setLocalStorageObject } from '../lib'
+
+export const useLocalStorage = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = getLocalStorageObject<T>(key)
+      return item || defaultValue
+    } catch (ex) {
+      //Error is already logged
+      return defaultValue
+    }
+  })
+
+  const setValue = (value: T) => {
+    console.log('setValue', value)
+    setStoredValue(value)
+    setLocalStorageObject(key, value)
+    console.log('getValue from ls', getLocalStorageObject(key))
+  }
+
+  return [storedValue, setValue]
+}