@xyo-network/os-react-runtime 2.3.0

package/src/components/Widgets/StackOfWidgets.tsx

@@ -0,0 +1,151 @@
+// Example from https://codesandbox.io/p/sandbox/cards-stack-to6uf?
+import {
+  alpha, Box, useTheme,
+} from '@mui/material'
+import {
+  animated, to as interpolate, useSprings,
+} from '@react-spring/web'
+import type { ReactNode } from 'react'
+import React, { useState } from 'react'
+import { useDrag } from 'react-use-gesture'
+
+import {
+  ExampleBarGraphWidget, ExampleBooleanTableWidget, ExampleTwoColTwoStatWidget,
+} from './Types/index.ts'
+
+const cards: ReactNode[] = [
+  <ExampleBarGraphWidget key="bar-graph" />,
+  <ExampleBooleanTableWidget key="boolean-table" />,
+  <ExampleTwoColTwoStatWidget key="two-column" />,
+]
+
+// These two are just helpers, they curate spring data, values that are later being interpolated into css
+const to = (i: number) => ({
+  delay: i * 100,
+  rot: -10 + Math.random() * 15,
+  scale: 1,
+  x: 0,
+  y: i * -4,
+})
+const from = (_i: number) => ({
+  rot: 0, scale: 1.5, x: 0, y: -1000,
+})
+// This is being used down there in the view, it interpolates rotation and scale into a css transform
+const trans = (r: number, s: number) => `perspective(1500px)  rotateY(${r / 10}deg) scale(${s})`
+
+function Deck() {
+  const [gone] = useState(() => new Set()) // The set flags all the cards that are flicked out
+  const theme = useTheme()
+  const [props, api] = useSprings(cards.length, i => ({
+    ...to(i),
+    from: from(i),
+  })) // Create a bunch of springs using the helpers above
+  // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
+  const bind = useDrag(({
+    args: [index], down, movement: [mx], direction: [xDir], velocity,
+  }) => {
+    const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out
+    const dir = xDir < 0 ? -1 : 1 // Direction should either point left or right
+    if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    api.start((i) => {
+      if (index !== i) return // We're only interested in changing spring-data for the current spring
+      const isGone = gone.has(index)
+      const x
+        = isGone
+          ? (200 + window.innerWidth) * dir
+          : down
+            ? mx
+            : 0 // When a card is gone it flys out left or right, otherwise goes back to zero
+      const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster
+      const scale = down ? 1.1 : 1 // Active cards lift up a bit
+      return {
+        config: {
+          friction: 50,
+          tension:
+            down
+              ? 800
+              : isGone
+                ? 200
+                : 500,
+        },
+        delay: undefined,
+        rot,
+        scale,
+        x,
+      }
+    })
+    if (!down && gone.size === cards.length)
+      setTimeout(() => {
+        gone.clear()
+
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        api.start(i => to(i))
+      }, 600)
+  })
+  // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
+  return (
+    <>
+      {props.map(({
+        x, y, rot, scale,
+      }, i) => (
+        <animated.div
+
+          key={i}
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            height: '300px',
+            justifyContent: 'center',
+            position: 'absolute',
+            touchAction: 'none',
+            width: '300px',
+            willChange: 'transform',
+            x,
+            y,
+          }}
+        >
+          {/* This is the card itself, we're binding our gesture to it (and inject its index so we know which is which) */}
+          <animated.div
+            {...bind(i)}
+            style={{
+              // WebkitBackdropFilter: 'blur(10px)',
+              // backdropFilter: 'blur(10px)',
+              backgroundColor: alpha(theme.palette.background.paper, 0.2),
+              backgroundPosition: 'center center',
+              backgroundRepeat: 'no-repeat',
+              backgroundSize: 'auto 85%',
+              borderRadius: ' 10px',
+              boxShadow: theme.shadows[7],
+              height: '85vh',
+              maxHeight: '300px',
+              maxWidth: '300px',
+              transform: interpolate([rot, scale], trans),
+              width: '45vh',
+              willChange: 'transform',
+            }}
+          >
+            {cards[i]}
+          </animated.div>
+        </animated.div>
+      ))}
+    </>
+  )
+}
+
+export const StackOfWidgets: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        cursor: 'pointer',
+        display: 'flex',
+        height: '300px',
+        justifyContent: 'center',
+        width: '300px',
+      }}
+    >
+      <Deck />
+    </Box>
+  )
+}

package/src/components/Widgets/Types/BarGraph/HorizontalBarGraph.tsx

@@ -0,0 +1,58 @@
+import { Typography } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import React from 'react'
+
+import { StyledLinearProgress } from './StyledLinearProgress.js'
+
+export interface HorizontalBarGraphItemProps {
+  name: string
+  value: number
+}
+
+export interface HorizontalBarGraphProps extends FlexBoxProps {
+  items?: HorizontalBarGraphItemProps[]
+}
+
+const sampleData: HorizontalBarGraphItemProps[] = [
+  { name: 'United States', value: 134 },
+  { name: 'South Africa', value: 400 },
+  { name: 'Canada', value: 382 },
+  { name: 'Philippines', value: 423 },
+  { name: 'Denmark', value: 123 },
+  { name: 'Greece', value: 321 },
+  { name: 'Japan', value: 421 },
+]
+
+export const HorizontalBarGraph: React.FC<HorizontalBarGraphProps> = ({ items = sampleData, ...props }) => {
+  const itemsSortedByValue = items.sort(function (a, b) {
+    const keyA = a.value,
+      keyB = b.value
+    // Compare the 2 dates
+    if (keyA > keyB) return -1
+    if (keyA < keyB) return 1
+    return 0
+  })
+
+  console.log(itemsSortedByValue)
+
+  const topValue = itemsSortedByValue[0].value
+
+  return (
+    <FlexCol alignItems="stretch" gap={0.5} {...props}>
+      {items.slice(0, 5).map((item, index) => (
+        <FlexCol alignItems="stretch" key={index}>
+          <FlexGrowRow justifyContent="space-between">
+            <Typography variant="caption" maxWidth="50%" noWrap>
+              {item.name}
+            </Typography>
+            <Typography variant="caption" maxWidth="50%">
+              {item.value}
+            </Typography>
+          </FlexGrowRow>
+          <StyledLinearProgress color="primary" value={(item.value / (topValue * 1.25)) * 100} variant="determinate" />
+        </FlexCol>
+      ))}
+    </FlexCol>
+  )
+}

package/src/components/Widgets/Types/BarGraph/StyledLinearProgress.tsx

@@ -0,0 +1,13 @@
+import {
+  alpha, LinearProgress, styled,
+} from '@mui/material'
+
+export const StyledLinearProgress = styled(LinearProgress, { name: 'StyledLinearProgress' })(({ theme }) => ({
+  '& .MuiLinearProgress-bar': { borderRadius: theme.shape.borderRadius },
+  'MozBoxSizing': 'border-box',
+  'WebkitBoxSizing': 'border-box',
+  'background': 'transparent',
+  'borderBottom': `1px solid ${alpha(theme.palette.text.secondary, 0.3)}`,
+  'boxSizing': 'border-box',
+  'height': theme.spacing(0.25),
+}))

package/src/components/Widgets/Types/BarGraph/index.ts

@@ -0,0 +1,2 @@
+export * from './HorizontalBarGraph.js'
+export * from './StyledLinearProgress.js'

package/src/components/Widgets/Types/DataColumns/TwoColFourStat.tsx

@@ -0,0 +1,34 @@
+import { Typography, useTheme } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import React from 'react'
+
+export interface TwoColTwoStatProps extends FlexBoxProps {
+  data1: string
+  data2: string
+  type1: string
+  type2: string
+}
+
+export const TwoColTwoStat: React.FC<TwoColTwoStatProps> = ({
+  type1, type2, data1, data2, ...props
+}) => {
+  const theme = useTheme()
+
+  return (
+    <FlexGrowRow gap={2} {...props}>
+      <FlexCol flexGrow={1} alignItems="start">
+        <Typography variant="h2" fontWeight={theme.typography.fontWeightMedium}>
+          {data1}
+        </Typography>
+        <Typography variant="body2">{type1}</Typography>
+      </FlexCol>
+      <FlexCol flexGrow={1} alignItems="start">
+        <Typography variant="h2" fontWeight={theme.typography.fontWeightMedium}>
+          {data2}
+        </Typography>
+        <Typography variant="body2">{type2}</Typography>
+      </FlexCol>
+    </FlexGrowRow>
+  )
+}

package/src/components/Widgets/Types/DataColumns/TwoColTwoStat.tsx

@@ -0,0 +1,39 @@
+import { Typography, useTheme } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol, FlexGrowRow } from '@xylabs/react-flexbox'
+import React, { useEffect } from 'react'
+
+import type { InsightStatProps } from '../Stat/index.ts'
+
+export interface TwoColTwoStatProps extends FlexBoxProps {
+  items: InsightStatProps[]
+}
+
+const MAX_LENGTH = 2
+
+const validateProps = (props: InsightStatProps[]) => {
+  if (props.length > MAX_LENGTH) {
+    throw new Error(`The length of items for the Two Column Two Stat widget should not exceed ${MAX_LENGTH}`)
+  }
+}
+
+export const TwoColTwoStat: React.FC<TwoColTwoStatProps> = ({ items, ...props }) => {
+  const theme = useTheme()
+
+  useEffect(() => {
+    validateProps(items)
+  }, [items])
+
+  return (
+    <FlexGrowRow gap={2} {...props}>
+      {items.map((item, index) => (
+        <FlexCol key={`stat-${index}-${item.unit}`} flexGrow={1} alignItems="start">
+          <Typography variant="h2" fontWeight={theme.typography.fontWeightMedium}>
+            {item.rawInsightValue}
+          </Typography>
+          <Typography variant="body2">{item.subtitle}</Typography>
+        </FlexCol>
+      ))}
+    </FlexGrowRow>
+  )
+}

package/src/components/Widgets/Types/DataColumns/index.ts

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

package/src/components/Widgets/Types/Examples/BarGraph.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { WidgetCard } from '../../WidgetCard.js'
+import { HorizontalBarGraph } from '../BarGraph/index.ts'
+
+export const ExampleBarGraphWidget: React.FC = () => {
+  return (
+    <WidgetCard widgetContent={<HorizontalBarGraph />} widgetName="Friend Locations" timeOfData={1_715_713_478} widgetPath="/profile"></WidgetCard>
+  )
+}

package/src/components/Widgets/Types/Examples/BooleanTable.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { WidgetCard } from '../../WidgetCard.js'
+import { BooleanTable } from '../Tables/index.ts'
+
+export const ExampleBooleanTableWidget: React.FC = () => {
+  return (
+    <WidgetCard
+      widgetContent={(
+        <BooleanTable
+          items={[
+            { name: '@arietrouw', value: true },
+            { name: '@officialxyo', value: false },
+            { name: '0x187623121928634124', value: true },
+            { name: '@coinwithus', value: true },
+            { name: '0x871218376123894321', value: true },
+          ]}
+          tableHeaders={['Id', 'Online']}
+        />
+      )}
+      widgetName="Friends"
+      timeOfData={1_715_875_797}
+      widgetPath="/profile"
+    >
+    </WidgetCard>
+  )
+}

package/src/components/Widgets/Types/Examples/TwoColTwoStat.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { WidgetCard } from '../../WidgetCard.js'
+import { TwoColTwoStat } from '../DataColumns/index.ts'
+
+export const ExampleTwoColTwoStatWidget: React.FC = () => {
+  return (
+    <WidgetCard
+      widgetContent={(
+        <TwoColTwoStat
+          items={[
+            {
+              rawInsightValue: 218, subtitle: 'Inbound Access Requests', uiInsightValue: 218, unit: 'requests',
+            },
+            {
+              rawInsightValue: 18, subtitle: 'Outbound Access Requests', uiInsightValue: 18, unit: 'requests',
+            },
+          ]}
+        />
+      )}
+      widgetName="Network Activity"
+      timeOfData={1_642_637_397}
+      widgetPath="/network"
+    >
+    </WidgetCard>
+  )
+}

package/src/components/Widgets/Types/Examples/index.ts

@@ -0,0 +1,3 @@
+export * from './BarGraph.js'
+export * from './BooleanTable.js'
+export * from './TwoColTwoStat.js'

package/src/components/Widgets/Types/Stat/Insight.ts

@@ -0,0 +1,9 @@
+export interface Insight {
+  /** raw value used for additional calculations */
+  rawInsightValue?: string | number | undefined
+
+  /** formatted value meant for presentation */
+  uiInsightValue: string | number | undefined
+
+  unit: string | number | undefined
+}

package/src/components/Widgets/Types/Stat/InsightStatProps.ts

@@ -0,0 +1,7 @@
+import type { Insight } from './Insight.js'
+
+export interface InsightStatProps extends Insight {
+  insightColor?: string
+  source?: string
+  subtitle?: string
+}

package/src/components/Widgets/Types/Stat/Stat.tsx

@@ -0,0 +1,43 @@
+import { Skeleton } from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import React, { forwardRef } from 'react'
+
+import type { InsightStatProps } from './InsightStatProps.js'
+import { InsightSubtitle } from './Subtitle.js'
+import { InsightUnit } from './Unit.js'
+import { InsightValue } from './Value.js'
+
+export interface InsightStatBoxProps extends InsightStatProps, FlexBoxProps {}
+
+export const InsightStatBox = forwardRef<HTMLDivElement, InsightStatBoxProps>(({
+  uiInsightValue, insightColor, subtitle, unit, ...props
+}, ref) => (
+  <FlexGrowCol alignItems="start" ref={ref} {...props}>
+    {uiInsightValue
+      ? (
+          <>
+            <span>
+              <InsightValue variant="caption" color={insightColor}>
+                {uiInsightValue}
+              </InsightValue>
+              {unit
+                ? <InsightUnit variant="caption">{unit}</InsightUnit>
+                : null}
+            </span>
+            {subtitle
+              ? <InsightSubtitle variant="caption">{subtitle}</InsightSubtitle>
+              : null}
+          </>
+        )
+      : (
+          <Skeleton
+            height="100%"
+            width="100%"
+            sx={{ display: 'flex', minHeight: '50px' }}
+          />
+        )}
+  </FlexGrowCol>
+))
+
+InsightStatBox.displayName = 'InsightStatBox'

package/src/components/Widgets/Types/Stat/Subtitle.tsx

@@ -0,0 +1,14 @@
+import { styled, Typography } from '@mui/material'
+
+export const InsightSubtitle = styled(Typography, { name: 'InsightValueContext' })(({ theme }) => {
+  return {
+    '&.responsive-font-sizes': {
+      [theme.breakpoints.up('sm')]: { fontSize: 'calc(var(--baseFontSize) * 0.46)' },
+      [theme.breakpoints.up('md')]: { fontSize: 'calc(var(--baseFontSize) * 0.3)' },
+    },
+    '--baseFontSize': theme.spacing(1),
+    'fontSize': 'var(--baseFontSize)',
+    'letterSpacing': 0,
+    'opacity': 0.6,
+  }
+})

package/src/components/Widgets/Types/Stat/Unit.tsx

@@ -0,0 +1,13 @@
+import { styled, Typography } from '@mui/material'
+
+export const InsightUnit = styled(Typography, { name: 'InsightUnit' })(({ theme }) => {
+  return {
+    '&.responsive-font-sizes': {
+      [theme.breakpoints.up('sm')]: { fontSize: 'calc(var(--baseFontSize) * 0.57)' },
+      [theme.breakpoints.up('lg')]: { fontSize: 'calc(var(--baseFontSize) * 0.35)' },
+    },
+    'fontSize': `var(--insightUnitFontSize, ${theme.spacing(1.85)})`,
+    'fontWeight': 500,
+    'letterSpacing': 0,
+  }
+})

package/src/components/Widgets/Types/Stat/Value.tsx

@@ -0,0 +1,16 @@
+import { styled, Typography } from '@mui/material'
+
+export const InsightValue = styled(Typography, { name: 'InsightValue' })(({ theme }) => {
+  return {
+    '&.responsive-font-sizes': {
+      [theme.breakpoints.up('sm')]: { fontSize: 'calc(var(--baseFontSize) * 0.95)' },
+      [theme.breakpoints.up('md')]: { fontSize: 'calc(var(--baseFontSize) * 0.72)' },
+      [theme.breakpoints.up('lg')]: { fontSize: 'calc(var(--baseFontSize) * 0.62)' },
+    },
+    'fontSize': `var(--insightValueFontSize, ${theme.spacing(3)})`,
+    'letterSpacing': 0,
+    'lineHeight': 1,
+    'marginRight': theme.spacing(0.5),
+    'whiteSpace': 'nowrap',
+  }
+})

package/src/components/Widgets/Types/Stat/index.ts

@@ -0,0 +1,3 @@
+export * from './Insight.js'
+export * from './InsightStatProps.js'
+export * from './Stat.js'

package/src/components/Widgets/Types/Tables/BooleanTable.tsx

@@ -0,0 +1,87 @@
+import { CircleRounded } from '@mui/icons-material'
+import type { SvgIcon } from '@mui/material'
+import {
+  alpha, Paper, styled, TableRow, Typography,
+} from '@mui/material'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import {
+  FlexCol, FlexGrowRow, FlexRow,
+} from '@xylabs/react-flexbox'
+import type { ReactNode } from 'react'
+import React from 'react'
+
+export interface BooleanTablePropsItemProps {
+  name: string
+  value: boolean
+}
+
+const sampleData: BooleanTablePropsItemProps[] = [
+  { name: '@arietrouw', value: true },
+  { name: '@officialxyo', value: false },
+  { name: '0x187623121928634124', value: true },
+  { name: '@coinwithus', value: true },
+  { name: '0x871218376123894321', value: true },
+]
+
+export interface BooleanTableProps extends FlexBoxProps {
+  falseOutput?: ReactNode
+  items: BooleanTablePropsItemProps[]
+  tableHeaders: string[]
+  trueOutput?: ReactNode
+}
+
+export const StyledLightTableRow = styled(Paper, { name: 'StyledLightTableRow' })(({ theme }) => ({
+  backgroundColor: 'transparent',
+  padding: theme.spacing(0.75),
+}))
+
+export const StyledTableColumnTitle = styled(Typography, { name: 'StyledTableColumnTitle' })(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontWeight: theme.typography.fontWeightBold,
+  textTransform: 'uppercase',
+}))
+
+export const DefaultTrueOutput = styled<typeof SvgIcon>(CircleRounded, { name: 'DefaultTrueOutput' })(({ theme }) => ({
+  fill: theme.palette.success.main,
+  fontSize: '10px',
+}))
+
+export const DefaultFalseOutput = styled<typeof SvgIcon>(CircleRounded, { name: 'DefaultFalseOutput' })(({ theme }) => ({
+  fill: alpha(theme.palette.text.disabled, 0.5),
+  fontSize: '10px',
+}))
+
+const defaultTrueOutput = <DefaultTrueOutput />
+const defaultFalseOutput = <DefaultFalseOutput />
+
+export const BooleanTable: React.FC<BooleanTableProps> = ({
+  items = sampleData,
+  tableHeaders,
+  trueOutput = defaultTrueOutput,
+  falseOutput = defaultFalseOutput,
+  ...props
+}) => {
+  return (
+    <FlexCol alignItems="stretch" {...props}>
+      <FlexRow paddingBottom={0.5} justifyContent="space-between">
+        {tableHeaders.map(name => (
+          <StyledTableColumnTitle key={name} variant="caption">
+            {name}
+          </StyledTableColumnTitle>
+        ))}
+      </FlexRow>
+      <FlexCol alignItems="stretch" gap={0.25}>
+        {items.slice(0, 4).map((item, index) => (
+          <TableRow key={index}>
+            <FlexGrowRow flexGrow={1} justifyContent="space-between">
+              <Typography variant="caption" noWrap maxWidth="70%">
+                {item.name}
+              </Typography>
+              {item.value ? trueOutput : falseOutput}
+            </FlexGrowRow>
+          </TableRow>
+        ))}
+      </FlexCol>
+    </FlexCol>
+  )
+}

package/src/components/Widgets/Types/Tables/index.ts

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

package/src/components/Widgets/Types/index.ts

@@ -0,0 +1,4 @@
+export * from './BarGraph/index.ts'
+export * from './DataColumns/index.ts'
+export * from './Examples/index.ts'
+export * from './Tables/index.ts'