@xylabs/sdk-react 2.12.12 → 2.13.3

package/src/common/ExperimentsHelper.ts

@@ -1,111 +0,0 @@
-import { UserEventHandler } from '@xylabs/pixel'
-import { forget, Log } from '@xylabs/sdk-js'
-import { ReactElement } from 'react'
-
-import { ExperimentProps, ExperimentsData, ExperimentsLocalStorageKey, OutcomesData, OutcomesLocalStorageKey, VariantData } from '../components'
-import { UserEventsProps } from '../contexts'
-import { getLocalStorageObject, setLocalStorageObject } from '../lib'
-
-const defaultLocalStorageKey = 'testData'
-const experimentsTestData: { [index: string]: string } = {}
-let outcomes: OutcomesData = {} //prevent multi-outcome
-
-// TODO - some expire logic around experiments
-const ExperimentsHelper = {
-  buildLocalStorageKey: (localStorageProp: boolean | string) => {
-    return localStorageProp === true ? defaultLocalStorageKey : typeof localStorageProp === 'string' ? localStorageProp ?? defaultLocalStorageKey : ''
-  },
-
-  calcTotalWeight: (variants: VariantData[]) => {
-    return variants.reduce((sum, variant) => {
-      return sum + variant.weight
-    }, 0)
-  },
-
-  calculateExperiment: (name: string, localStorageProp: string | boolean, variants: VariantData[], userEvents: UserEventHandler<UserEventsProps>) => {
-    //TODO - user events, it needs to be in the hook, all other compatibility should
-    ExperimentsHelper.loadOutcomes()
-    const localStorageKey = ExperimentsHelper.buildLocalStorageKey(localStorageProp)
-    const totalWeight = ExperimentsHelper.calcTotalWeight(variants)
-    ExperimentsHelper.saveExperimentRanges(name, totalWeight, variants)
-    const firstTime = name in outcomes
-    let targetWeight = outcomes[name] ?? Math.random() * totalWeight
-    outcomes[name] = targetWeight
-    ExperimentsHelper.saveOutcomes()
-    for (const variant of variants) {
-      targetWeight -= variant.weight
-      if (targetWeight > 0) continue
-      if (!variant.name) {
-        throw new Error('Experiment Elements must have Keys')
-      }
-      experimentsTestData[name] = variant.name
-      if (firstTime) {
-        localStorage.setItem(localStorageKey, ExperimentsHelper.mergeData(experimentsTestData))
-      }
-      if (userEvents) {
-        forget(userEvents.testStarted({ name, variation: variant.name }))
-      }
-      return variant
-    }
-  },
-
-  getExperiment: (name: string) => {
-    ExperimentsHelper.loadOutcomes()
-    const experiments = getLocalStorageObject<ExperimentsData>(ExperimentsLocalStorageKey) || {}
-    return experiments[name]
-  },
-
-  getSelectedVariant: (name: string) => {
-    const outcomes = ExperimentsHelper.loadOutcomes()
-    const experiment = ExperimentsHelper.getExperiment(name)
-    let total = 0
-    if (experiment && outcomes) {
-      const targetWeight = outcomes[name]
-      for (let i = 0; i < experiment.variants.length; i++) {
-        const variant = experiment.variants[i]
-        total += variant.weight
-        if (total >= targetWeight) {
-          return variant
-        }
-      }
-    }
-  },
-
-  loadOutcomes: () => {
-    outcomes = getLocalStorageObject(OutcomesLocalStorageKey)
-    return outcomes
-  },
-
-  makeChildrenArray: (children: ReactElement<ExperimentProps>[] | ReactElement<ExperimentProps>) => {
-    if (Array.isArray(children)) {
-      return children as ReactElement<ExperimentProps>[]
-    } else {
-      return [children] as ReactElement<ExperimentProps>[]
-    }
-  },
-
-  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('|')
-  },
-
-  saveExperimentRanges: (name: string, totalWeight: number, variants: VariantData[]) => {
-    const experiments = getLocalStorageObject<ExperimentsData>(ExperimentsLocalStorageKey) || {}
-    experiments[name] = {
-      totalWeight,
-      variants,
-    }
-    setLocalStorageObject(ExperimentsLocalStorageKey, experiments)
-    return experiments
-  },
-
-  saveOutcomes: () => {
-    setLocalStorageObject(OutcomesLocalStorageKey, outcomes)
-  },
-}
-
-export { ExperimentsHelper }

package/src/common/index.ts

@@ -1 +0,0 @@
-export * from './ExperimentsHelper'

package/src/components/AppBarEx/AppBarEx.stories.tsx

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

package/src/components/AppBarEx/AppBarEx.tsx

@@ -1,41 +0,0 @@
-import { AppBar, Container, Toolbar, useTheme } from '@mui/material'
-
-import { FlexGrowRow } from '../FlexBox'
-import { AppBarExProps } from './AppBarExProps'
-
-const AppBarEx: React.FC<AppBarExProps> = (props) => {
-  const { contextToolbar, systemToolbar, container, style, ...appbarProps } = props
-  const theme = useTheme()
-
-  const AppBarExInner: React.FC = () => {
-    return (
-      <FlexGrowRow justifyContent="space-between">
-        {contextToolbar ?? <Toolbar />}
-        {systemToolbar ?? <Toolbar />}
-      </FlexGrowRow>
-    )
-  }
-
-  return (
-    <AppBar
-      position="static"
-      style={{
-        backgroundColor: theme.palette.background.paper,
-        color: theme.palette.text.primary,
-        display: 'flex',
-        ...style,
-      }}
-      {...appbarProps}
-    >
-      {container ? (
-        <Container maxWidth={container}>
-          <AppBarExInner />
-        </Container>
-      ) : (
-        <AppBarExInner />
-      )}
-    </AppBar>
-  )
-}
-
-export { AppBarEx }

package/src/components/AppBarEx/AppBarExProps.tsx

@@ -1,10 +0,0 @@
-import { AppBarProps, ToolbarProps } from '@mui/material'
-import { ReactElement } from 'react'
-
-interface AppBarExProps extends AppBarProps {
-  container?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  contextToolbar?: ReactElement<ToolbarProps>
-  systemToolbar?: ReactElement<ToolbarProps>
-}
-
-export type { AppBarExProps }

package/src/components/AppBarEx/index.tsx

@@ -1,5 +0,0 @@
-import { AppBarEx } from './AppBarEx'
-import { AppBarExProps } from './AppBarExProps'
-
-export { AppBarEx }
-export type { AppBarExProps }

package/src/components/Background.tsx

@@ -1,11 +0,0 @@
-import { FlexBoxProps, FlexRow } from './FlexBox'
-
-/**
- * @deprecated The functionality of Background is now part of FlexBox.  Use the 'background' property to enable the background.
- */
-const Background: React.FC<FlexBoxProps> = (props) => {
-  return <FlexRow {...props} />
-}
-
-// eslint-disable-next-line deprecation/deprecation
-export { Background }

package/src/components/BasePage/BasePage.stories.tsx

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

package/src/components/BasePage/BasePage.tsx

@@ -1,68 +0,0 @@
-import { KeyboardArrowUp as KeyboardArrowUpIcon } from '@mui/icons-material'
-import { Container, Fab, ScopedCssBaseline, Typography, useTheme } from '@mui/material'
-import React from 'react'
-import { Helmet } from 'react-helmet'
-
-import { CookieConsent } from '../CookieConsent'
-import { FlexCol, FlexRow } from '../FlexBox'
-import { InvertableThemeProvider } from '../InvertableThemeProvider'
-import { ScrollToTop } from '../ScrollToTop'
-import { ScrollToTopButton } from '../ScrollToTopButton'
-import { BasePageProps } from './BasePageProps'
-
-const BasePage: React.FC<BasePageProps> = ({
-  disableGutters,
-  children,
-  beta,
-  container,
-  hideFooter,
-  appFooter,
-  appBar,
-  cookieConsent,
-  hideAppBar,
-  noindex = false,
-  scrollToTopButton = false,
-  title,
-  ...props
-}) => {
-  const theme = useTheme()
-  const scrollToTopAnchorId = 'scroll-to-top-anchor'
-
-  return (
-    <FlexCol justifyContent="flex-start" color={theme.palette.text.primary} alignItems="stretch" width="100%" maxWidth="100vw" minHeight="100vh" {...props}>
-      <ScrollToTop />
-      <Helmet title={title}>{noindex ? <meta content="noindex" name="robots" /> : null}</Helmet>
-      {scrollToTopButton ? <div id={scrollToTopAnchorId} /> : null}
-      {hideAppBar ? null : appBar}
-      {beta ? (
-        <FlexRow margin={1} position="absolute" top={0} left={0} bgcolor="#cccccc88" paddingX={1} style={{ opacity: 0.5 }}>
-          <Typography variant="body2">Important: This page is a Beta page. It is possible that some information may not be correct.</Typography>
-        </FlexRow>
-      ) : null}
-      {container ? (
-        <Container style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1 }} maxWidth={container} disableGutters={disableGutters}>
-          {children}
-        </Container>
-      ) : (
-        children
-      )}
-      {hideFooter ? null : <footer>{appFooter}</footer>}
-      {cookieConsent ?? (
-        <ScopedCssBaseline>
-          <InvertableThemeProvider invert>
-            <CookieConsent borderRadius={0} />
-          </InvertableThemeProvider>
-        </ScopedCssBaseline>
-      )}
-      {scrollToTopButton ? (
-        <ScrollToTopButton anchorId={scrollToTopAnchorId}>
-          <Fab aria-label="scroll to top" color="secondary" size="small">
-            <KeyboardArrowUpIcon />
-          </Fab>
-        </ScrollToTopButton>
-      ) : null}
-    </FlexCol>
-  )
-}
-
-export { BasePage }

package/src/components/BasePage/BasePageProps.ts

@@ -1,20 +0,0 @@
-import { BoxProps } from '@mui/material'
-import { ReactElement, ReactNode } from 'react'
-
-import { AppBarExProps } from '../AppBarEx'
-
-interface BasePageProps extends BoxProps {
-  appBar?: ReactElement<AppBarExProps>
-  appFooter?: ReactElement
-  beta?: boolean
-  container?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
-  disableGutters?: boolean
-  hideAppBar?: boolean
-  hideFooter?: boolean
-  noindex?: boolean
-  cookieConsent?: ReactNode
-  scrollToTopButton?: boolean
-  title?: string
-}
-
-export type { BasePageProps }

package/src/components/BasePage/index.ts

@@ -1,5 +0,0 @@
-import { BasePage } from './BasePage'
-import { BasePageProps } from './BasePageProps'
-
-export { BasePage }
-export type { BasePageProps }

package/src/components/Breadcrumbs/BreadcrumbsEx.stories.tsx

@@ -1,40 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { BreadcrumbsEx } from './BreadcrumbsEx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: BreadcrumbsEx,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/BreadcrumbsEx',
-} as ComponentMeta<typeof BreadcrumbsEx>
-
-const Template: ComponentStory<typeof BreadcrumbsEx> = (args) => (
-  <BrowserRouter>
-    <BreadcrumbsEx {...args}></BreadcrumbsEx>
-  </BrowserRouter>
-)
-
-const SingleLevel = Template.bind({})
-SingleLevel.args = {
-  path: '/test',
-  title: 'Default',
-  titles: ['Test'],
-}
-
-const DoubleLevel = Template.bind({})
-DoubleLevel.args = {
-  path: '/test/level2',
-  title: 'DoubleLevel',
-  titles: ['Test', 'Level2'],
-}
-
-export { DoubleLevel, SingleLevel }
-
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/Breadcrumbs/BreadcrumbsEx.tsx

@@ -1,43 +0,0 @@
-import { Breadcrumbs, BreadcrumbsProps, Link } from '@mui/material'
-import { assertEx } from '@xylabs/sdk-js'
-import { ReactElement } from 'react'
-import { Link as RouteLink } from 'react-router-dom'
-
-import { FlexRow } from '../FlexBox'
-
-const getPartialPath = (pathParts: string[], index: number) => {
-  const result = []
-  for (let i = 0; i <= index; i++) {
-    result.push(`${pathParts[i]}/`)
-  }
-  return result.join('')
-}
-
-export interface BreadcrumbsExProps extends BreadcrumbsProps {
-  logo?: string | ReactElement
-  path?: string
-  titles?: string[]
-}
-
-export const BreadcrumbsEx: React.FC<BreadcrumbsExProps> = ({ titles, path = document.location.pathname, separator = '|', logo, children, ...props }) => {
-  const pathParts = path.split('/')
-  //if the url has a trailing '/', remove the last part
-  if (pathParts[pathParts.length - 1]?.length === 0) {
-    pathParts.pop()
-  }
-
-  assertEx(pathParts.length - 1 === titles?.length, `Path/Title length mismatch: ${JSON.stringify(titles)} with ${JSON.stringify(pathParts)}`)
-  return (
-    <Breadcrumbs separator={separator} {...props}>
-      {pathParts.map((_pathPart, index) => {
-        const path = getPartialPath(pathParts, index)
-        return (
-          <Link title={index > 0 ? titles?.[index - 1] : 'COIN'} color={index === pathParts.length - 1 ? 'textPrimary' : 'inherit'} key={path} component={RouteLink} to={path}>
-            {index > 0 ? titles?.[index - 1] : <FlexRow>{typeof logo === 'string' ? <img src={logo} /> : logo}</FlexRow>}
-          </Link>
-        )
-      })}
-      {children}
-    </Breadcrumbs>
-  )
-}

package/src/components/Breadcrumbs/index.ts

@@ -1 +0,0 @@
-export * from './BreadcrumbsEx'

package/src/components/BusyCircularProgress.tsx

@@ -1,33 +0,0 @@
-import { alpha, Box, CircularProgress, CircularProgressProps, useTheme } from '@mui/material'
-import React from 'react'
-
-interface Props extends CircularProgressProps {
-  opacity?: number | string
-  bgcolor?: string
-  rounded?: boolean
-  size?: string | number
-}
-
-const BusyCircularProgress: React.FC<Props> = ({ bgcolor, style, rounded, size, opacity = 0.85, ...props }) => {
-  const theme = useTheme()
-  return (
-    <Box
-      display="flex"
-      bgcolor={alpha(bgcolor ?? theme.palette.background.default, parseFloat(`${opacity}`))}
-      flexGrow={1}
-      position="absolute"
-      left={0}
-      right={0}
-      top={0}
-      bottom={0}
-      justifyContent="center"
-      alignItems="center"
-      overflow="hidden"
-      style={{ borderRadius: rounded ? theme.shape.borderRadius : 0, ...style }}
-    >
-      <CircularProgress size={size} {...props} />
-    </Box>
-  )
-}
-
-export { BusyCircularProgress }

package/src/components/BusyLinearProgress.tsx

@@ -1,32 +0,0 @@
-import { alpha, Box, LinearProgress, LinearProgressProps, useTheme } from '@mui/material'
-import React from 'react'
-
-interface Props extends LinearProgressProps {
-  opacity?: string | number
-  rounded?: boolean
-  bgcolor?: string
-}
-
-const BusyLinearProgress: React.FC<Props> = ({ bgcolor, style, rounded, opacity = 0.85, ...props }) => {
-  const theme = useTheme()
-  return (
-    <Box
-      display="flex"
-      flexDirection="column"
-      bgcolor={alpha(bgcolor ?? theme.palette.background.default, parseFloat(`${opacity}`))}
-      position="absolute"
-      left={0}
-      right={0}
-      top={0}
-      bottom={0}
-      justifyContent="flex-start"
-      alignItems="stretch"
-      overflow="hidden"
-      style={{ borderRadius: rounded ? theme.shape.borderRadius : 0, ...style }}
-    >
-      <LinearProgress {...props} />
-    </Box>
-  )
-}
-
-export { BusyLinearProgress }

package/src/components/ButtonEx/ButtonEx.stories.tsx

@@ -1,46 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
-
-import { FlexCol, FlexRow } from '../FlexBox'
-import { ButtonEx } from './ButtonEx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: ButtonEx,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
-  title: 'Components/ButtonEx',
-} as ComponentMeta<typeof ButtonEx>
-
-const DefaultTemplate: ComponentStory<typeof ButtonEx> = (args) => (
-  <FlexRow justifyContent="flex-start">
-    <FlexCol marginX={1}>
-      <ButtonEx {...args}>Default</ButtonEx>
-    </FlexCol>
-    <FlexCol marginX={1}>
-      <ButtonEx variant="outlined" {...args}>
-        Outlined
-      </ButtonEx>
-    </FlexCol>
-    <FlexCol marginX={1}>
-      <ButtonEx variant="contained" {...args}>
-        Contained
-      </ButtonEx>
-    </FlexCol>
-  </FlexRow>
-)
-
-const Default = DefaultTemplate.bind({})
-Default.args = {}
-
-const BusyCircular = DefaultTemplate.bind({})
-BusyCircular.args = { busy: true, busyVariant: 'circular' }
-
-const BusyLinear = DefaultTemplate.bind({})
-BusyLinear.args = { busy: true, busyVariant: 'linear' }
-
-export { BusyCircular, BusyLinear, Default }
-// eslint-disable-next-line import/no-default-export
-export default StorybookEntry

package/src/components/ButtonEx/ButtonEx.tsx

@@ -1,13 +0,0 @@
-import { ButtonExBase } from './ButtonExBase'
-import { ButtonExProps } from './ButtonExProps'
-import { ButtonExTo } from './ButtonExTo'
-
-const ButtonEx: React.FC<ButtonExProps> = ({ to, ...props }) => {
-  if (to) {
-    return <ButtonExTo to={to} {...props} />
-  } else {
-    return <ButtonExBase {...props} />
-  }
-}
-
-export { ButtonEx }

package/src/components/ButtonEx/ButtonExBase.tsx

@@ -1,28 +0,0 @@
-import { Button, useTheme } from '@mui/material'
-import { MouseEvent } from 'react'
-
-import { mergeBoxlikeStyles } from '../../mergeBoxlikeStyles'
-import { BusyCircularProgress } from '../BusyCircularProgress'
-import { BusyLinearProgress } from '../BusyLinearProgress'
-import { ButtonExProps } from './ButtonExProps'
-
-const ButtonExBase: React.FC<ButtonExProps> = (props) => {
-  const theme = useTheme()
-  const { busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps } = mergeBoxlikeStyles<ButtonExProps>(theme, props)
-
-  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (!busy) {
-      onClick?.(event)
-    }
-  }
-
-  return (
-    <Button onClick={localOnClick} {...rootProps}>
-      {busy && busyVariant === 'linear' ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} /> : null}
-      {busy && busyVariant === 'circular' ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} /> : null}
-      {children}
-    </Button>
-  )
-}
-
-export { ButtonExBase }

package/src/components/ButtonEx/ButtonExProps.tsx

@@ -1,13 +0,0 @@
-import { ButtonProps } from '@mui/material'
-import { NavigateOptions, To } from 'react-router-dom'
-
-import { BoxlikeComponentProps } from '../../BoxlikeComponentProps'
-import { BusyProps } from '../../BusyProps'
-
-interface ButtonExProps extends ButtonProps, BoxlikeComponentProps, BusyProps {
-  target?: string
-  to?: To
-  toOptions?: NavigateOptions
-}
-
-export type { ButtonExProps }

package/src/components/ButtonEx/ButtonExTo.tsx

@@ -1,19 +0,0 @@
-import React, { MouseEvent } from 'react'
-import { useNavigate } from 'react-router-dom'
-
-import { ButtonExBase } from './ButtonExBase'
-import { ButtonExProps } from './ButtonExProps'
-
-const ButtonExTo: React.FC<ButtonExProps> = ({ to, toOptions, onClick, ...props }) => {
-  const navigate = useNavigate()
-  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    onClick?.(event)
-    if (to) {
-      navigate(to, toOptions)
-    }
-  }
-
-  return <ButtonExBase onClick={localOnClick} {...props} />
-}
-
-export { ButtonExTo }

package/src/components/ButtonEx/index.ts

@@ -1,2 +0,0 @@
-export * from './ButtonEx'
-export * from './ButtonExProps'