@xylabs/sdk-react 2.12.12 → 2.13.3

package/src/components/EthBlock.tsx

@@ -1,23 +0,0 @@
-import { Box, Link, Typography } from '@mui/material'
-import React from 'react'
-
-interface EthAccountProps {
-  block?: number
-}
-
-const EthBlock: React.FC<EthAccountProps> = (props: EthAccountProps) => {
-  const { block } = props
-  if (block) {
-    return (
-      <Box alignItems="center" display="flex" flexGrow={1} justifyContent="center" paddingX={1}>
-        <Link href={`https://etherscan.io/block/${block}`} target="_blank" title={`Ethereum Block #${block}`}>
-          <Typography variant="caption">{block}</Typography>
-        </Link>
-      </Box>
-    )
-  } else {
-    return <Box />
-  }
-}
-
-export { EthBlock }

package/src/components/Experiments/Experiment.tsx

@@ -1,11 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-
-export interface ExperimentProps {
-  weight: number
-  key: string
-}
-
-export const Experiment: React.FC<PropsWithChildren<ExperimentProps>> = (props) => {
-  const { children } = props
-  return <>{children}</>
-}

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

@@ -1,35 +0,0 @@
-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

@@ -1,105 +0,0 @@
-import { forget, Log } from '@xylabs/sdk-js'
-import React, { ReactElement } from 'react'
-
-import { useUserEvents } from '../../hooks'
-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: OutcomesData = {} //prevent multi-outcome
-
-const saveOutcomes = () => {
-  setLocalStorageObject(OutcomesLocalStorageKey, outcomes)
-}
-
-const loadOutcomes = () => {
-  outcomes = getLocalStorageObject(OutcomesLocalStorageKey)
-}
-
-const mergeData = (data: { [index: string]: string }, log?: Log) => {
-  const dataArray: string[] = []
-  for (const key in data) {
-    dataArray.push(`${key}-${data[key]}`)
-  }
-  log?.info('MergeData', dataArray.join('|'))
-  return dataArray.join('|')
-}
-
-const missingKeyError = new Error('Experiment Elements must have Keys')
-
-const makeChildrenArray = (children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>) => {
-  if (Array.isArray(children)) {
-    return children as ReactElement<ExperimentProps>[]
-  } else {
-    return [children] as ReactElement<ExperimentProps>[]
-  }
-}
-
-const buildLocalStorageKey = (localStorageProp: boolean | string) => {
-  return localStorageProp === true ? defaultLocalStorageKey : typeof localStorageProp === 'string' ? localStorageProp ?? defaultLocalStorageKey : ''
-}
-
-const calcTotalWeight = (childList: ReactElement<ExperimentProps>[]) => {
-  let totalWeight = 0
-  for (const child of childList) {
-    totalWeight += child.props.weight
-  }
-  return totalWeight
-}
-
-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 userEvents = useUserEvents()
-  loadOutcomes()
-
-  const localStorageKey = buildLocalStorageKey(localStorageProp)
-
-  const childList = makeChildrenArray(children)
-
-  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
-    if (!child.key) {
-      throw missingKeyError
-    }
-    experimentsTestData[name] = child.key?.toString()
-    if (firstTime) {
-      if (localStorageProp !== false) {
-        localStorage.setItem(localStorageKey, mergeData(experimentsTestData))
-      }
-      if (userEvents) {
-        forget(userEvents.testStarted({ name, variation: child.key }))
-      }
-    }
-
-    return child
-  }
-  throw new Error('Experiment Choice Failed')
-}
-
-export { Experiments }

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

@@ -1,24 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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,5 +0,0 @@
-export * from './Experiment'
-export * from './Experiments'
-export * from './ExperimentsDebugger'
-export * from './ExperimentsProps'
-export * from './models'

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

@@ -1,8 +0,0 @@
-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/FlexBox/BusyBox.stories.tsx

@@ -1,80 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { BusyBox } from './BusyBox'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: BusyBox,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/BusyBox',
-} as ComponentMeta<typeof BusyBox>
-
-const BusyBoxTemplate: ComponentStory<typeof BusyBox> = (args) => <BusyBox {...args}></BusyBox>
-
-const Circular = BusyBoxTemplate.bind({})
-Circular.args = {
-  bgcolor: 'gray',
-  busy: true,
-  busyVariant: 'circular',
-  height: 180,
-  padding: 2,
-  width: 360,
-}
-
-const Linear = BusyBoxTemplate.bind({})
-Linear.args = {
-  bgcolor: 'gray',
-  busy: true,
-  busyVariant: 'linear',
-  height: 180,
-  padding: 2,
-  width: 360,
-}
-
-const LinearBuffer = BusyBoxTemplate.bind({})
-LinearBuffer.args = {
-  bgcolor: 'gray',
-  busy: true,
-  busyLinearProps: {
-    variant: 'buffer',
-  },
-  busyVariant: 'linear',
-  height: 180,
-  padding: 2,
-  width: 360,
-}
-
-const LinearDeterminate = BusyBoxTemplate.bind({})
-LinearDeterminate.args = {
-  bgcolor: 'gray',
-  busy: true,
-  busyLinearProps: {
-    variant: 'determinate',
-  },
-  busyVariant: 'linear',
-  height: 180,
-  padding: 2,
-  width: 360,
-}
-
-const LinearQuery = BusyBoxTemplate.bind({})
-LinearQuery.args = {
-  bgcolor: 'gray',
-  busy: true,
-  busyLinearProps: {
-    variant: 'query',
-  },
-  busyVariant: 'linear',
-  height: 180,
-  padding: 2,
-  width: 360,
-}
-
-export { Circular, Linear, LinearBuffer, LinearDeterminate, LinearQuery }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/FlexBox/BusyBox.tsx

@@ -1,48 +0,0 @@
-import { Box, BoxProps, Paper, useTheme } from '@mui/material'
-
-import { BusyProps } from '../../BusyProps'
-import { BusyCircularProgress } from '../BusyCircularProgress'
-import { BusyLinearProgress } from '../BusyLinearProgress'
-
-export interface BusyBoxProps extends BusyProps, BoxProps {
-  paper?: boolean
-  background?: boolean
-}
-
-export const BusyBox: React.FC<BusyBoxProps> = ({
-  background,
-  children,
-  component,
-  busyVariant = 'circular',
-  busySize,
-  busyOpacity = 0.85,
-  busyColor,
-  busy,
-  busyCircularProps,
-  busyLinearProps,
-  paper,
-  style,
-  ...props
-}) => {
-  const theme = useTheme()
-  return (
-    <Box
-      component={paper ? Paper : component}
-      position="relative"
-      style={
-        background
-          ? {
-              backgroundColor: theme.palette.background.default,
-              color: theme.palette.text.primary,
-              ...style,
-            }
-          : style
-      }
-      {...props}
-    >
-      {children}
-      {busy && busyVariant === 'linear' ? <BusyLinearProgress color={busyColor} opacity={busyOpacity} {...busyLinearProps} /> : null}
-      {busy && busyVariant === 'circular' ? <BusyCircularProgress color={busyColor} opacity={busyOpacity} size={busySize} {...busyCircularProps} /> : null}
-    </Box>
-  )
-}

package/src/components/FlexBox/FlexCol.stories.tsx

@@ -1,60 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { FlexCol } from './FlexCol'
-import { FlexRow } from './FlexRow'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: FlexCol,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/FlexCol',
-} as ComponentMeta<typeof FlexCol>
-
-const Template: ComponentStory<typeof FlexCol> = (args) => <FlexCol {...args}></FlexCol>
-
-const testRows = {
-  border: 'solid 1px gray',
-  children: (
-    <>
-      <FlexRow margin={1} padding={1} bgcolor="gray">
-        Row One
-      </FlexRow>
-      <FlexRow margin={1} padding={1} bgcolor="gray">
-        Row Two
-      </FlexRow>
-      <FlexRow margin={1} padding={1} bgcolor="gray">
-        Row Three
-      </FlexRow>
-    </>
-  ),
-}
-
-const StretchAlignedItems = Template.bind({})
-StretchAlignedItems.args = {
-  alignItems: 'stretch',
-  ...testRows,
-  title: 'StretchAlignedItems',
-}
-
-const FlexStartAlignedItems = Template.bind({})
-FlexStartAlignedItems.args = {
-  alignItems: 'flex-start',
-  ...testRows,
-  title: 'FlexStartAlignedItems',
-}
-
-const FlexEndAlignedItems = Template.bind({})
-FlexEndAlignedItems.args = {
-  alignItems: 'flex-end',
-  ...testRows,
-  title: 'FlexEndAlignedItems',
-}
-
-export { FlexEndAlignedItems, FlexStartAlignedItems, StretchAlignedItems }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/FlexBox/FlexCol.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-
-import { BusyBox, BusyBoxProps } from './BusyBox'
-
-const FlexCol: React.ComponentType<BusyBoxProps> = (props) => {
-  return <BusyBox alignItems="center" display="flex" flexDirection="column" justifyContent="center" {...props} />
-}
-
-const FlexGrowCol: React.ComponentType<BusyBoxProps> = (props) => {
-  return <FlexCol flexGrow={1} {...props} />
-}
-
-export { FlexCol, FlexGrowCol }

package/src/components/FlexBox/FlexRow.stories.tsx

@@ -1,74 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { FlexCol } from './FlexCol'
-import { FlexRow } from './FlexRow'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: FlexRow,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/FlexRow',
-} as ComponentMeta<typeof FlexRow>
-
-const Template: ComponentStory<typeof FlexRow> = (args) => <FlexRow {...args}></FlexRow>
-
-const testColumns = {
-  border: 'solid 1px gray',
-  children: (
-    <>
-      <FlexCol margin={1} padding={1} bgcolor="gray">
-        Column One
-      </FlexCol>
-      <FlexCol margin={1} padding={1} bgcolor="gray">
-        Column Two
-      </FlexCol>
-      <FlexCol margin={1} padding={1} bgcolor="gray">
-        Column Three
-      </FlexCol>
-    </>
-  ),
-}
-
-const SpaceBetweenJustifiedContent = Template.bind({})
-SpaceBetweenJustifiedContent.args = {
-  ...testColumns,
-  justifyContent: 'space-between',
-  title: 'SpaceBetweenJustifiedContent',
-}
-
-const SpaceAroundJustifiedContent = Template.bind({})
-SpaceAroundJustifiedContent.args = {
-  ...testColumns,
-  justifyContent: 'space-around',
-  title: 'SpaceAroundJustifiedContent',
-}
-
-const SpaceEvenlyJustifiedContent = Template.bind({})
-SpaceEvenlyJustifiedContent.args = {
-  ...testColumns,
-  justifyContent: 'space-evenly',
-  title: 'SpaceEvenlyJustifiedContent',
-}
-
-const FlexStartJustifiedContent = Template.bind({})
-FlexStartJustifiedContent.args = {
-  ...testColumns,
-  justifyContent: 'flex-start',
-  title: 'FlexStartJustifiedContent',
-}
-
-const FlexEndJustifiedContent = Template.bind({})
-FlexEndJustifiedContent.args = {
-  ...testColumns,
-  justifyContent: 'flex-end',
-  title: 'FlexEndJustifiedContent',
-}
-
-export { FlexEndJustifiedContent, FlexStartJustifiedContent, SpaceAroundJustifiedContent, SpaceBetweenJustifiedContent, SpaceEvenlyJustifiedContent }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/FlexBox/FlexRow.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-
-import { BusyBox, BusyBoxProps } from './BusyBox'
-
-type FlexBoxProps = BusyBoxProps
-
-const FlexRow: React.FC<FlexBoxProps> = (props) => {
-  return <BusyBox alignItems="center" display="flex" flexDirection="row" justifyContent="center" {...props} />
-}
-
-const FlexGrowRow: React.FC<FlexBoxProps> = (props) => {
-  return <FlexRow flexGrow={1} {...props} />
-}
-
-export { FlexGrowRow, FlexRow }
-export type { FlexBoxProps }

package/src/components/FlexBox/index.tsx

@@ -1,3 +0,0 @@
-export * from './BusyBox'
-export * from './FlexCol'
-export * from './FlexRow'

package/src/components/HoverScale.tsx

@@ -1,33 +0,0 @@
-import { Box } from '@mui/material'
-import { createStyles, makeStyles } from '@mui/styles'
-import React, { PropsWithChildren } from 'react'
-
-import { FlexRow } from './FlexBox'
-
-export type HoverScaleProps = PropsWithChildren<{
-  scale?: number
-}>
-
-export const HoverScale: React.FC<HoverScaleProps> = (props) => {
-  const { children, scale = 1.1 } = props
-
-  const useStyles = makeStyles(() =>
-    createStyles({
-      zoomdiv: {
-        '&:hover': {
-          transform: `scale(${scale})`,
-          transitionDuration: '0.2s',
-          transitionTimingFunction: 'ease',
-        },
-      },
-    })
-  )
-
-  const classes = useStyles()
-
-  return (
-    <FlexRow>
-      <Box className={classes.zoomdiv}>{children}</Box>
-    </FlexRow>
-  )
-}