@xylabs/sdk-react 2.12.6 → 2.12.9

package/src/components/QuickTipButton/QuickTipButton.stories.tsx

@@ -1,6 +1,7 @@
 import { Typography } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 
+import { FlexRow } from '../FlexBox'
 import { QuickTipButton } from './QuickTipButton'
 
 const StorybookEntry = {
@@ -14,7 +15,11 @@ const StorybookEntry = {
   title: 'Components/QuickTipButton',
 } as ComponentMeta<typeof QuickTipButton>
 
-const Template: ComponentStory<typeof QuickTipButton> = (args) => <QuickTipButton {...args}></QuickTipButton>
+const Template: ComponentStory<typeof QuickTipButton> = (args) => (
+  <FlexRow>
+    <QuickTipButton {...args}></QuickTipButton>
+  </FlexRow>
+)
 
 const Default = Template.bind({})
 Default.args = {

package/src/components/QuickTipButton/QuickTipButton.tsx

@@ -1,16 +1,20 @@
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import { IconButton, IconButtonProps } from '@mui/material'
 import { useState } from 'react'
-import { AiOutlineQuestionCircle } from 'react-icons/ai'
 
 import { MessageDialog } from '../dialogs'
 
-const QuickTipButton: React.FC<IconButtonProps> = ({ title, children, ...props }) => {
+export interface QuickTipButtonProps extends IconButtonProps {
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit'
+}
+
+export const QuickTipButton: React.FC<QuickTipButtonProps> = ({ fontSize = 'inherit', title, children, ...props }) => {
   const [messageOpen, setMessageOpen] = useState(false)
 
   return (
     <>
       <IconButton onClick={() => setMessageOpen(true)} size="small" {...props}>
-        <AiOutlineQuestionCircle size={16} />
+        <HelpOutlineIcon fontSize={fontSize} />
       </IconButton>
       <MessageDialog onOk={() => setMessageOpen(false)} onCancel={() => setMessageOpen(false)} onClose={() => setMessageOpen(false)} open={messageOpen} title={title ?? ''}>
         {children}
@@ -18,5 +22,3 @@ const QuickTipButton: React.FC<IconButtonProps> = ({ title, children, ...props }
     </>
   )
 }
-
-export { QuickTipButton }

package/src/components/QuickTipButton/index.ts

@@ -1,3 +1 @@
-import { QuickTipButton } from './QuickTipButton'
-
-export { QuickTipButton }
+export * from './QuickTipButton'

package/src/hooks/useExperiment.ts

@@ -0,0 +1,30 @@
+import { ReactNode, useState } from 'react'
+
+import { ExperimentsHelper } from '../common'
+import { VariantData } from '../components'
+
+const selectVariant = (current?: string) => (variants: Record<string, ReactNode>, defaultNode: ReactNode) => {
+  if (current && current in variants) {
+    return variants[current]
+  }
+  return defaultNode
+}
+
+const selectVariantForExperiment = (name: string, variants: Record<string, ReactNode>, defaultNode: ReactNode) => {
+  const variant = ExperimentsHelper.getSelectedVariant(name)
+  if (variants[variant?.name ?? '']) {
+    return variants[variant?.name ?? '']
+  }
+  return defaultNode
+}
+
+const useExperiments = (name: string, experiments: VariantData[]) => {
+  const [activeExperiment] = useState(ExperimentsHelper.calculateExperiment(name, true, experiments))
+
+  return {
+    experimentName: name,
+    selectVariant: selectVariant(activeExperiment?.name),
+  }
+}
+
+export { selectVariantForExperiment, useExperiments }

package/src/hooks/useExperiments.stories.tsx

@@ -0,0 +1,43 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { selectVariantForExperiment, useExperiments } from './useExperiment'
+
+const View: React.FC = () => {
+  const { experimentName, selectVariant } = useExperiments('Storybook Test', [
+    { name: 'a/legacy', weight: 33 },
+    { name: 'b/testing', weight: 33 },
+    { name: 'c/testing', weight: 33 },
+  ])
+  const texts = { 'a/legacy': <p>a</p>, 'b/testing': <p>b</p>, 'c/testing': <p>c</p> }
+  const test0 = selectVariantForExperiment('Storybook Test Does not exists', texts, <p>DefaultNode</p>)
+  const test1 = selectVariant({ 'a/legacy': <p>a</p>, 'b/testing': <p>b</p>, 'c/testing': <p>c</p> }, <p>default node</p>)
+  const test2 = selectVariantForExperiment(experimentName, texts, <p>DefaultNode</p>)
+  return (
+    <div>
+      <div>{test0}</div>
+      <div>{test1}</div>
+      <div>{test2}</div>
+    </div>
+  )
+}
+
+const StorybookEntry = {
+  argTypes: {},
+  component: View,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Hooks/useExperiments',
+} as ComponentMeta<typeof View>
+
+const Template: ComponentStory<typeof View> = (args) => <View {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/lib/Tracking/Drip/BaseEvent.ts

@@ -20,6 +20,7 @@ export class DripBaseEvent<T extends Record<string, unknown>> {
       payload.push(this.param)
     }
     payload.push(data)
+    console.log('sdk-react', payload)
     this.dcq.push(payload)
     await delay(0)
   }

package/src/lib/Tracking/Tapjoy/StandardEvents.ts

@@ -1,8 +1,8 @@
 import { TapjoyStandardEvent } from './StandardEvent'
 
 class TapjoyStandardEvents<T extends Record<string, unknown>> {
-  public purchase() {
-    return new TapjoyStandardEvent<T>('Purchase')
+  public accountCreated() {
+    return new TapjoyStandardEvent<T>('Conversion')
   }
 }