@xyo-network/react-shared 3.0.1 → 3.0.3

package/src/components/pluginValidation/DataMissing.tsx

@@ -1,4 +1,5 @@
-import { Alert, AlertProps, AlertTitle } from '@mui/material'
+import type { AlertProps } from '@mui/material'
+import { Alert, AlertTitle } from '@mui/material'
 import React from 'react'
 
 export interface PayloadDataMissingProps extends AlertProps {

package/src/contexts/ListMode/Context.ts

@@ -1,4 +1,4 @@
 import { createContextEx } from '../contextEx/index.ts'
-import { ListModeContextState } from './State.ts'
+import type { ListModeContextState } from './State.ts'
 
 export const ListModeContext = createContextEx<ListModeContextState>()

package/src/contexts/ListMode/Provider.tsx

@@ -1,7 +1,7 @@
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 import React, { useMemo, useState } from 'react'
 
-import { ListMode } from '../../models/index.ts'
+import type { ListMode } from '../../models/index.ts'
 import { ListModeContext } from './Context.ts'
 
 export interface ListModeProviderProps {
@@ -11,9 +11,11 @@ export interface ListModeProviderProps {
 export const ListModeProvider: React.FC<WithChildren<ListModeProviderProps>> = ({ children, defaultListMode }) => {
   const [listMode, setListMode] = useState(defaultListMode ?? 'default')
 
-  const value = useMemo(() => ({ listMode,
+  const value = useMemo(() => ({
+    listMode,
     provided: true,
-    setListMode }), [listMode,
+    setListMode,
+  }), [listMode,
     setListMode])
 
   return (

package/src/contexts/ListMode/State.ts

@@ -1,7 +1,7 @@
-import { Dispatch } from 'react'
+import type { Dispatch } from 'react'
 
-import { ListMode } from '../../models/index.ts'
-import { ContextExState } from '../contextEx/index.ts'
+import type { ListMode } from '../../models/index.ts'
+import type { ContextExState } from '../contextEx/index.ts'
 
 export interface ListModeContextState extends ContextExState {
   listMode: ListMode

package/src/contexts/contextEx/ContextExProviderProps.ts

@@ -1,4 +1,4 @@
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 
 export type EmptyObject = {}
 

package/src/contexts/contextEx/create.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-import { ContextExState } from './State.ts'
+import type { ContextExState } from './State.ts'
 
 export const createContextEx = <T>() => createContext<T & ContextExState>({ provided: false } as T & ContextExState)

package/src/contexts/contextEx/use.ts

@@ -1,6 +1,7 @@
-import { Context, useContext } from 'react'
+import type { Context } from 'react'
+import { useContext } from 'react'
 
-import { ContextExState } from './State.ts'
+import type { ContextExState } from './State.ts'
 
 export const useContextEx = <T extends ContextExState>(context: Context<T>, contextName: string, required = true) => {
   const { provided, ...props } = useContext(context)

package/src/contexts/diviner/Provider.tsx

@@ -1,8 +1,11 @@
-import { WithChildren } from '@xylabs/react-shared'
-import React, { Context, useEffect, useMemo, useState } from 'react'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Context } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
-import { ContextExProviderProps } from '../contextEx/index.ts'
-import { ResolvedDivinerState } from './State.ts'
+import type { ContextExProviderProps } from '../contextEx/index.ts'
+import type { ResolvedDivinerState } from './State.ts'
 
 export interface DivinerProviderProps<D> extends ContextExProviderProps, WithChildren {
   context: Context<ResolvedDivinerState<D>>
@@ -10,7 +13,9 @@ export interface DivinerProviderProps<D> extends ContextExProviderProps, WithChi
 }
 
 /** Exposes a resolved diviner */
-export const ResolvedDivinerProvider = <D,>({ diviner: divinerProp, required = false, children, context }: DivinerProviderProps<D>) => {
+export const ResolvedDivinerProvider = <D,>({
+  diviner: divinerProp, required = false, children, context,
+}: DivinerProviderProps<D>) => {
   const [diviner, setDiviner] = useState<D | undefined>(divinerProp)
 
   useEffect(() => {
@@ -27,9 +32,11 @@ export const ResolvedDivinerProvider = <D,>({ diviner: divinerProp, required = f
         return diviner
       }
     }
-    return { diviner: resolveDiviner(),
+    return {
+      diviner: resolveDiviner(),
       provided: true,
-      setDiviner }
+      setDiviner,
+    }
   }, [
     setDiviner, divinerProp])
 

package/src/contexts/diviner/State.ts

@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
 
-import { ContextExState } from '../contextEx/index.ts'
+import type { ContextExState } from '../contextEx/index.ts'
 
 export interface ResolvedDivinerState<T> extends ContextExState {
   diviner?: T

package/src/hooks/GradientStyles/GradientStyle.stories.tsx

@@ -1,6 +1,7 @@
 import { Divider, Typography } from '@mui/material'
-import { Meta, StoryFn } from '@storybook/react'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import type { Meta, StoryFn } from '@storybook/react'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import { FlexCol } from '@xylabs/react-flexbox'
 import React from 'react'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -50,11 +51,7 @@ const GradientTextExample: React.FC<FlexBoxProps> = (props) => {
 const StorybookEntry = {
   argTypes: {},
   component: GradientTextExample,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'shared/GradientText',
 } as Meta<typeof GradientTextExample>
 

package/src/hooks/GradientStyles/GradientStyles.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material'
 import { makeStyles } from '@mui/styles'
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 
 export interface GradientStyles {
   background: CSSProperties
@@ -10,9 +10,7 @@ export interface GradientStyles {
 
 export const colorfulGradientLightMode = () => {
   return {
-    background: {
-      backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
-    },
+    background: { backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)' },
     border: {
       borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
       borderImageSlice: 1,
@@ -32,9 +30,7 @@ export const colorfulGradientLightMode = () => {
 
 export const colorfulGradientDarkMode = () => {
   return {
-    background: {
-      backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
-    },
+    background: { backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)' },
     border: {
       borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
       borderImageSlice: 1,

package/src/hooks/useDataState.ts

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import { useState } from 'react'
 
 export const useDataState = <T>(defaultValue: T | undefined): [T | undefined, Dispatch<SetStateAction<T | undefined>>] => {
   const [state, setState] = useState(defaultValue)

package/src/hooks/usePayloadHash.ts

@@ -1,7 +1,7 @@
-import { Hash } from '@xylabs/hex'
+import type { Hash } from '@xylabs/hex'
 import { usePromise } from '@xylabs/react-promise'
 import { PayloadBuilder } from '@xyo-network/payload-builder'
-import { Payload } from '@xyo-network/payload-model'
+import type { Payload } from '@xyo-network/payload-model'
 
 export const usePayloadHash = <TPayload extends Payload>(payload: TPayload | undefined | null) => {
   return usePromise(async () => (payload ? await PayloadBuilder.dataHash(payload) : undefined), [payload])[0]

package/src/hooks/useShareForwardRef.ts

@@ -1,4 +1,5 @@
-import { ForwardedRef, useEffect, useRef } from 'react'
+import type { ForwardedRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 export const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {
   // final ref that will share value with forward ref. this is the one to be attached to components

package/src/lib/networkComponents.tsx

@@ -6,8 +6,9 @@ import {
   TimerRounded as TimerRoundedIcon,
   VisibilityRounded as VisibilityRoundedIcon,
 } from '@mui/icons-material'
-import { SvgIconProps } from '@mui/material'
-import React, { ReactElement } from 'react'
+import type { SvgIconProps } from '@mui/material'
+import type { ReactElement } from 'react'
+import React from 'react'
 
 export type NetworkComponentSlug = 'sentinel' | 'bridge' | 'archivist' | 'diviner' | 'node' | 'witness'
 
@@ -18,12 +19,24 @@ export interface NetworkComponentDetails {
 }
 
 export const networkComponents: NetworkComponentDetails[] = [
-  { icon: props => <HubRoundedIcon {...props} />, name: 'Node', slug: 'node' },
-  { icon: props => <TimerRoundedIcon {...props} />, name: 'Sentinel', slug: 'sentinel' },
-  { icon: props => <InsertLinkRoundedIcon {...props} />, name: 'Bridge', slug: 'bridge' },
-  { icon: props => <Inventory2RoundedIcon {...props} />, name: 'Archivist', slug: 'archivist' },
-  { icon: props => <BubbleChartRoundedIcon {...props} />, name: 'Diviner', slug: 'diviner' },
-  { icon: props => <VisibilityRoundedIcon {...props} />, name: 'Witness', slug: 'witness' },
+  {
+    icon: props => <HubRoundedIcon {...props} />, name: 'Node', slug: 'node',
+  },
+  {
+    icon: props => <TimerRoundedIcon {...props} />, name: 'Sentinel', slug: 'sentinel',
+  },
+  {
+    icon: props => <InsertLinkRoundedIcon {...props} />, name: 'Bridge', slug: 'bridge',
+  },
+  {
+    icon: props => <Inventory2RoundedIcon {...props} />, name: 'Archivist', slug: 'archivist',
+  },
+  {
+    icon: props => <BubbleChartRoundedIcon {...props} />, name: 'Diviner', slug: 'diviner',
+  },
+  {
+    icon: props => <VisibilityRoundedIcon {...props} />, name: 'Witness', slug: 'witness',
+  },
 ]
 
 export const findNetworkComponentIndex = (slug: string) => {

package/src/lib/xyo.tsx

@@ -1,4 +1,6 @@
-import { SvgIcon, SvgIconProps } from '@mui/material'
+/* eslint-disable @stylistic/max-len */
+import type { SvgIconProps } from '@mui/material'
+import { SvgIcon } from '@mui/material'
 import React from 'react'
 
 export const Logo: React.FC<SvgIconProps> = (props) => {

package/xy.config.ts

@@ -1,9 +1,7 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },