@veracity/vui 1.0.0 → 1.1.0

package/src/header/headerServices.tsx

@@ -9,54 +9,52 @@ import HeaderServicesMessage from './headerServicesMessage'
 
 /** Supporting internal component to avoid code duplication. */
 function ListContent({ links = [] }: Pick<HeaderServicesProps, 'links'>) {
-	const styles = useStyleConfig('Header', useHeaderContext()).services
-
-	return (
-		<>
-			{links.length > 0 ? (
-				links.map(({ text, url }, index) => (
-					<Menu.Item isTruncated key={index} linkProps={{ href: url }} text={text} title={text} {...styles.item} />
-				))
-			) : (
-				<HeaderServicesMessage />
-			)}
-		</>
-	)
+  const styles = useStyleConfig('Header', useHeaderContext()).services
+
+  return (
+    <>
+      {links.length > 0 ? (
+        links.map(({ text, url }, index) => (
+          <Menu.Item isTruncated key={index} linkProps={{ href: url }} text={text} title={text} {...styles.item} />
+        ))
+      ) : (
+        <HeaderServicesMessage />
+      )}
+    </>
+  )
 }
 
 /** Displays a list of services available to the user. */
 export function HeaderServices(props: HeaderServicesProps) {
-	const { buttonProps, links = [], ...rest } = props
-	const styles = useStyleConfig('Header', useHeaderContext()).services
-
-	return (
-		<>
-			<RenderOnDesktop>
-				<Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
-					<Menu.Button
-						colorScheme="prussian"
-						icon="falTh"
-						ml={1}
-						title="My services"
-						{...styles.button}
-						{...buttonProps}
-					/>
-
-					<Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
-						<ListContent links={links} />
-					</Menu.List>
-				</Menu>
-			</RenderOnDesktop>
-
-			<RenderOnMobile>
-				<List borderBottom="1px solid grey.40" heading="My Services" {...styles.list}>
-					<ListContent links={links} />
-				</List>
-			</RenderOnMobile>
-		</>
-	)
+  const { buttonProps, links = [], ...rest } = props
+  const styles = useStyleConfig('Header', useHeaderContext()).services
+
+  return (
+    <>
+      <RenderOnDesktop>
+        <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
+          <Menu.Button
+            colorScheme="prussian"
+            icon="falTh"
+            ml={1}
+            title="My services"
+            {...styles.button}
+            {...buttonProps}
+          />
+
+          <Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
+            <ListContent links={links} />
+          </Menu.List>
+        </Menu>
+      </RenderOnDesktop>
+
+      <RenderOnMobile>
+        <List borderBottom="1px solid grey.40" heading="My Services" {...styles.list}>
+          <ListContent links={links} />
+        </List>
+      </RenderOnMobile>
+    </>
+  )
 }
 
-HeaderServices.displayName = 'HeaderServices'
-
 export default HeaderServices

package/src/header/headerServicesMessage.tsx

@@ -8,33 +8,31 @@ import { useHeaderContext } from './context'
 
 /** Displays a message with link to Marketplace if user has no services available. */
 export const HeaderServicesMessage = vui<'p', PProps>((props, ref) => {
-	const { children, className, ...rest } = props
-	const { links } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { children, className, ...rest } = props
+  const { links } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	return (
-		<P
-			className={cs('vui-headerServicesMessage', className)}
-			mb={2}
-			ml={2}
-			ref={ref}
-			{...styles.servicesMessage}
-			{...rest}
-		>
-			{children ?? (
-				<>
-					No services available. <br />
-					Explore more on the{' '}
-					<Link href={links?.marketplace} isUnderlined>
-						marketplace
-					</Link>
-					.
-				</>
-			)}
-		</P>
-	)
+  return (
+    <P
+      className={cs('vui-headerServicesMessage', className)}
+      mb={2}
+      ml={2}
+      ref={ref}
+      {...styles.servicesMessage}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          No services available. <br />
+          Explore more on the{' '}
+          <Link href={links?.marketplace} isUnderlined>
+            marketplace
+          </Link>
+          .
+        </>
+      )}
+    </P>
+  )
 })
 
-HeaderServicesMessage.displayName = 'HeaderServicesMessage'
-
 export default HeaderServicesMessage

package/src/header/headerSignIn.tsx

@@ -8,24 +8,22 @@ import { HeaderSignInProps } from './header.types'
 
 /** Sign in button leading to Veracity login page. */
 export const HeaderSignIn = vui<'button', HeaderSignInProps>((props, ref) => {
-	const { children, className, url, ...rest } = props
-	const { links } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { children, className, url, ...rest } = props
+  const { links } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	return (
-		<Button
-			as="a"
-			className={cs('vui-headerSignIn', className)}
-			href={url ?? links.signIn}
-			ref={ref}
-			{...styles.signIn}
-			{...rest}
-		>
-			{children ?? 'Sign in'}
-		</Button>
-	)
+  return (
+    <Button
+      as="a"
+      className={cs('vui-headerSignIn', className)}
+      href={url ?? links.signIn}
+      ref={ref}
+      {...styles.signIn}
+      {...rest}
+    >
+      {children ?? 'Sign in'}
+    </Button>
+  )
 })
 
-HeaderSignIn.displayName = 'HeaderSignIn'
-
 export default HeaderSignIn

package/src/header/helpers.ts

@@ -6,40 +6,40 @@ import { HeaderLinkData } from './header.types'
 import { HeaderAccountSectionData } from './headerAccount.types'
 
 type HeaderLinksTemplates = {
-	accountSections?: HeaderAccountSectionData[]
-	mainLinks?: HeaderLinkData[]
+  accountSections?: HeaderAccountSectionData[]
+  mainLinks?: HeaderLinkData[]
 }
 
 /** Loads templates for Header links and enriches them with urls from LinksContext. */
 export function useHeaderLinks(env: Environment) {
-	const [templates, setTemplates] = useState<HeaderLinksTemplates>({})
-	const [links] = useLinks()
+  const [templates, setTemplates] = useState<HeaderLinksTemplates>({})
+  const [links] = useLinks()
 
-	useEffect(() => {
-		loadHeaderlinks()
+  useEffect(() => {
+    loadHeaderlinks()
 
-		async function loadHeaderlinks() {
-			try {
-				const response = await fetch(`${cdnUrls[env]}/common/data/links/header.json`)
-				if (!response.ok) return
+    async function loadHeaderlinks() {
+      try {
+        const response = await fetch(`${cdnUrls[env]}/common/data/links/header.json`)
+        if (!response.ok) return
 
-				const data = await response.json()
+        const data = await response.json()
 
-				if (isObject(data)) setTemplates(data)
-			} catch {
-				console.error('Failed to retrieve header data.')
-			}
-		}
-	}, [env])
+        if (isObject(data)) setTemplates(data)
+      } catch {
+        console.error('Failed to retrieve header data.')
+      }
+    }
+  }, [env])
 
-	const accountSections: HeaderAccountSectionData[] | undefined = templates.accountSections?.map(section => {
-		return { ...section, links: section.links?.map(link => ({ ...link, url: links[link?.id ?? ''] })) }
-	})
+  const accountSections: HeaderAccountSectionData[] | undefined = templates.accountSections?.map(section => {
+    return { ...section, links: section.links?.map(link => ({ ...link, url: links[link?.id ?? ''] })) }
+  })
 
-	const mainLinks: HeaderLinkData[] | undefined = templates.mainLinks?.map(link => ({
-		...link,
-		url: links[link?.id ?? '']
-	}))
+  const mainLinks: HeaderLinkData[] | undefined = templates.mainLinks?.map(link => ({
+    ...link,
+    url: links[link?.id ?? '']
+  }))
 
-	return { accountSections, mainLinks }
+  return { accountSections, mainLinks }
 }

package/src/header/loggedInHeader.tsx

@@ -8,47 +8,45 @@ import { LoggedInHeaderProps } from './header.types'
 
 /** Displays Header content appropriate for logged in users, such as services, notifications or account information. */
 export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
-	const { account, children, className, logo, mainLinks, services, notifications, ...rest } = props
+  const { account, children, className, logo, mainLinks, services, notifications, ...rest } = props
 
-	return (
-		<Header className={cs('vui-loggedInHeader', className)} ref={ref} {...rest}>
-			<Header.Content>
-				{isJsx(logo) ? logo : <Header.Logo {...logo} />}
+  return (
+    <Header className={cs('vui-loggedInHeader', className)} ref={ref} {...rest}>
+      <Header.Content>
+        {isJsx(logo) ? logo : <Header.Logo {...logo} />}
 
-				<RenderOnDesktop>{children}</RenderOnDesktop>
+        <RenderOnDesktop>{children}</RenderOnDesktop>
 
-				<Box ml="auto" />
+        <Box ml="auto" />
 
-				<RenderOnDesktop>
-					{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+        <RenderOnDesktop>
+          {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
-					{mainLinks !== undefined && <Header.Divider mx={1} />}
+          {mainLinks !== undefined && <Header.Divider mx={1} />}
 
-					{isJsx(services) ? services : <Header.Services {...services} />}
-				</RenderOnDesktop>
+          {isJsx(services) ? services : <Header.Services {...services} />}
+        </RenderOnDesktop>
 
-				{isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
+        {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
 
-				{isJsx(account) ? account : <Header.Account {...account} />}
+        {isJsx(account) ? account : <Header.Account {...account} />}
 
-				<RenderOnMobile>
-					{(account !== undefined || notifications !== undefined) && <Header.Divider ml={2} />}
+        <RenderOnMobile>
+          {(account !== undefined || notifications !== undefined) && <Header.Divider ml={2} />}
 
-					<Header.MobileToggle />
+          <Header.MobileToggle />
 
-					<Header.MobileContent>
-						{children}
+          <Header.MobileContent>
+            {children}
 
-						{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+            {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
-						{isJsx(services) ? services : <Header.Services {...services} />}
-					</Header.MobileContent>
-				</RenderOnMobile>
-			</Header.Content>
-		</Header>
-	)
+            {isJsx(services) ? services : <Header.Services {...services} />}
+          </Header.MobileContent>
+        </RenderOnMobile>
+      </Header.Content>
+    </Header>
+  )
 })
 
-LoggedInHeader.displayName = 'LoggedInHeader'
-
 export default LoggedInHeader

package/src/header/loggedOutHeader.tsx

@@ -8,47 +8,45 @@ import { LoggedOutHeaderProps } from './header.types'
 
 /** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
 export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) => {
-	const { children, className, createAccount, logo, mainLinks, signIn, ...rest } = props
+  const { children, className, createAccount, logo, mainLinks, signIn, ...rest } = props
 
-	return (
-		<Header className={cs('vui-loggedOutHeader', className)} ref={ref} {...rest}>
-			<Header.Content>
-				{isJsx(logo) ? logo : <Header.Logo {...logo} />}
+  return (
+    <Header className={cs('vui-loggedOutHeader', className)} ref={ref} {...rest}>
+      <Header.Content>
+        {isJsx(logo) ? logo : <Header.Logo {...logo} />}
 
-				<RenderOnDesktop>{children}</RenderOnDesktop>
+        <RenderOnDesktop>{children}</RenderOnDesktop>
 
-				<Box ml="auto" />
+        <Box ml="auto" />
 
-				<RenderOnDesktop>
-					{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+        <RenderOnDesktop>
+          {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
-					{mainLinks !== undefined && <Header.Divider ml={1} mr={3} />}
+          {mainLinks !== undefined && <Header.Divider ml={1} mr={3} />}
 
-					{isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
+          {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
 
-					{isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
-				</RenderOnDesktop>
+          {isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
+        </RenderOnDesktop>
 
-				<RenderOnMobile>
-					{isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
+        <RenderOnMobile>
+          {isJsx(signIn) ? signIn : <Header.SignIn {...signIn} />}
 
-					<Header.Divider ml={2} />
+          <Header.Divider ml={2} />
 
-					<Header.MobileToggle />
+          <Header.MobileToggle />
 
-					<Header.MobileContent>
-						{children}
+          <Header.MobileContent>
+            {children}
 
-						{isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
+            {isJsx(createAccount) ? createAccount : <Header.CreateAccount {...createAccount} />}
 
-						{isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
-					</Header.MobileContent>
-				</RenderOnMobile>
-			</Header.Content>
-		</Header>
-	)
+            {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+          </Header.MobileContent>
+        </RenderOnMobile>
+      </Header.Content>
+    </Header>
+  )
 })
 
-LoggedOutHeader.displayName = 'LoggedOutHeader'
-
 export default LoggedOutHeader

package/src/header/theme.ts

@@ -3,94 +3,94 @@ const baseStyle = {}
 const defaultProps = {}
 
 const parts = [
-	'container',
-	'account',
-	'accountUserInfo',
-	'content',
-	'createAccount',
-	'divider',
-	'linkItem',
-	'logo',
-	'mainLinks',
-	'mobileContent',
-	'mobileToggle',
-	'notifications',
-	'services',
-	'servicesMessage',
-	'signIn'
+  'container',
+  'account',
+  'accountUserInfo',
+  'content',
+  'createAccount',
+  'divider',
+  'linkItem',
+  'logo',
+  'mainLinks',
+  'mobileContent',
+  'mobileToggle',
+  'notifications',
+  'services',
+  'servicesMessage',
+  'signIn'
 ]
 
 const sizes = {}
 
 const variants = {
-	dark: {
-		container: {
-			bg: 'prussian.80',
-			borderBottom: 0
-		},
-		account: {
-			trigger: {
-				bg: 'white',
-				color: 'prussian.80',
-				hoverBg: 'blue.20',
-				activeBg: 'blue.30'
-			}
-		},
-		createAccount: {
-			link: {
-				color: { xs: 'blue.80', md: 'blue.60' },
-				hoverColor: { xs: 'blue.60', md: 'blue.40' }
-			},
-			text: {
-				color: { md: 'white' }
-			}
-		},
-		divider: {
-			borderColor: 'white'
-		},
-		linkItem: {
-			container: {
-				hoverBg: { xs: 'blue.20', md: 'prussian.60' },
-				activeBg: { xs: 'blue.30', md: 'prussian.50' }
-			},
-			link: {
-				borderColor: 'pink.80'
-			}
-		},
-		logo: {
-			svg: {
-				pathFill: 'white'
-			}
-		},
-		mainLinks: {
-			color: { md: 'white' }
-		},
-		mobileContent: {
-			top: '100%'
-		},
-		mobileToggle: {
-			variant: 'solid'
-		},
-		notifications: {
-			container: {
-				variant: 'solid'
-			}
-		},
-		services: {
-			button: {
-				variant: 'solid'
-			}
-		},
-		signIn: {
-			colorScheme: 'pink'
-		}
-	}
+  dark: {
+    container: {
+      bg: 'prussian.80',
+      borderBottom: 0
+    },
+    account: {
+      trigger: {
+        bg: 'white',
+        color: 'prussian.80',
+        hoverBg: 'blue.20',
+        activeBg: 'blue.30'
+      }
+    },
+    createAccount: {
+      link: {
+        color: { xs: 'blue.80', md: 'blue.60' },
+        hoverColor: { xs: 'blue.60', md: 'blue.40' }
+      },
+      text: {
+        color: { md: 'white' }
+      }
+    },
+    divider: {
+      borderColor: 'white'
+    },
+    linkItem: {
+      container: {
+        hoverBg: { xs: 'blue.20', md: 'prussian.60' },
+        activeBg: { xs: 'blue.30', md: 'prussian.50' }
+      },
+      link: {
+        borderColor: 'pink.80'
+      }
+    },
+    logo: {
+      svg: {
+        pathFill: 'white'
+      }
+    },
+    mainLinks: {
+      color: { md: 'white' }
+    },
+    mobileContent: {
+      top: '100%'
+    },
+    mobileToggle: {
+      variant: 'solid'
+    },
+    notifications: {
+      container: {
+        variant: 'solid'
+      }
+    },
+    services: {
+      button: {
+        variant: 'solid'
+      }
+    },
+    signIn: {
+      colorScheme: 'pink'
+    }
+  }
 }
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/heading/heading.tsx

@@ -5,31 +5,29 @@ import { cs, filterUndefined } from '../utils'
 import { HeadingProps } from './heading.types'
 
 export const HeadingBase = styled.h2Box`
-	font-weight: demi;
-	transition-duration: fast;
+  font-weight: demi;
+  transition-duration: fast;
 `
 
 /** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
 export const Heading = vui<'h2', HeadingProps>((props, ref) => {
-	const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Heading', props)
-
-	const hClassName = props.size ? `vui-${props.size}` : ''
-
-	const aliasedProps = filterUndefined({
-		fontWeight: weight,
-		textAlign: align,
-		textDecoration: decoration,
-		textTransform: casing
-	})
-
-	return (
-		<HeadingBase className={cs('vui-heading', hClassName, className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
-			{children ?? text}
-		</HeadingBase>
-	)
+  const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Heading', props)
+
+  const hClassName = props.size ? `vui-${props.size}` : ''
+
+  const aliasedProps = filterUndefined({
+    fontWeight: weight,
+    textAlign: align,
+    textDecoration: decoration,
+    textTransform: casing
+  })
+
+  return (
+    <HeadingBase className={cs('vui-heading', hClassName, className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+      {children ?? text}
+    </HeadingBase>
+  )
 })
 
-Heading.displayName = 'Heading'
-
 export default Heading