@nous-research/ui 0.14.2 → 0.16.0

package/src/ui/components/typography/h1.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react'
+
+import { cn } from '../../../utils'
+
+import { Typography, type TypographyProps } from '.'
+
+export const H1 = forwardRef<HTMLHeadingElement, TypographyProps<'h1'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Typography
+        as="h1"
+        className={cn('font-bold', className)}
+        variant="xl"
+        {...{ ref, ...props }}
+      />
+    )
+  }
+)

package/src/ui/components/typography/h2.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react'
+
+import { cn } from '../../../utils'
+
+import { Typography, type TypographyProps } from '.'
+
+export const H2 = forwardRef<HTMLHeadingElement, TypographyProps<'h2'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Typography
+        as="h2"
+        className={cn('font-bold', className)}
+        variant="lg"
+        {...{ ref, ...props }}
+      />
+    )
+  }
+)

package/src/ui/components/typography/index.tsx

@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { createElement } from 'react'
+
+import { cn, type PolyProps, polyRef } from '../../../utils'
+
+const typographyVariants = cva('font-sans', {
+  variants: {
+    compressed: { true: 'font-compressed' },
+    courier: { true: 'font-courier' },
+    expanded: { true: 'font-expanded' },
+    mondwest: { true: 'font-mondwest tracking-[0.1875rem]' },
+    mono: { true: 'font-mono' },
+    sans: { true: 'font-sans' },
+    variant: {
+      lg: 'text-[2.625rem] leading-[1] tracking-[0.0525rem]',
+      md: 'text-[2.625rem] leading-[1] tracking-[0.0525rem]',
+      sm: 'leading-1.4 text-[.9375rem] tracking-[0.1875rem]',
+      xl: 'text-[4.5rem] leading-[1] tracking-[0.135rem]'
+    }
+  }
+})
+
+export const Typography = polyRef<'span', OwnProps>(
+  (
+    {
+      as,
+      className,
+      compressed,
+      courier,
+      expanded,
+      mondwest,
+      mono,
+      variant,
+      ...rest
+    },
+    ref
+  ) => {
+    const fonts = { compressed, courier, expanded, mondwest, mono }
+    const fontVariant = { ...fonts, sans: !Object.values(fonts).some(Boolean) }
+
+    return createElement((as ?? 'span') as React.ElementType, {
+      ...rest,
+      className: cn(typographyVariants({ ...fontVariant, variant }), className),
+      ref
+    })
+  }
+)
+
+type OwnProps = VariantProps<typeof typographyVariants>
+
+export type TypographyProps<T extends React.ElementType = 'span'> = PolyProps<
+  T,
+  OwnProps
+>

package/src/ui/components/typography/legend.tsx

@@ -0,0 +1,24 @@
+import { cn } from '../../../utils'
+
+import { Small } from './small'
+
+export function Legend({
+  children,
+  className,
+  label,
+  sub,
+  ...props
+}: LegendProps) {
+  return (
+    <hgroup className={cn('flex flex-col gap-2', className)} {...props}>
+      <Small>{label}</Small>
+      {sub && <Small className="opacity-50">- {sub}</Small>}
+      {children}
+    </hgroup>
+  )
+}
+
+interface LegendProps extends React.ComponentProps<'hgroup'> {
+  label: React.ReactNode
+  sub?: React.ReactNode
+}

package/src/ui/components/typography/small.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react'
+
+import { Typography, type TypographyProps } from '.'
+
+export const Small = forwardRef<HTMLSpanElement, TypographyProps<any>>(
+  (props, ref) => {
+    return (
+      <Typography as="small" mondwest variant="sm" {...{ ref, ...props }} />
+    )
+  }
+)

package/src/ui/components/watchlist.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Watchlist } from './watchlist'
+
+const ADDRESSES = [
+  ['0x7a16fF8270133F063aAb6C9977183D9e72835428', '0.50%'],
+  ['0xd4e96eF8eEE8678dBFF4d535E015d1a77e7Cc62c', '1.20%'],
+  ['0x2B5AD5c4795c026514f8317c7a215E218DcCD6cF', '3.00%'],
+  ['0x8ba1f109551bD432803012645Ac136ddd64DBA72', '4.10%']
+].map(([label, right]) => ({ label, right, url: '#' }))
+
+const meta = {
+  component: Watchlist,
+  title: 'Components/Watchlist'
+} satisfies Meta<typeof Watchlist>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const WithCounterAndScramble: Story = {
+  args: { counter: true, items: ADDRESSES, scramble: true }
+}
+
+export const Simple: Story = {
+  args: {
+    items: [
+      { label: 'One', right: '11%' },
+      { label: 'Two', right: '22%' },
+      { label: 'Three', right: '33%' }
+    ]
+  }
+}

package/src/ui/components/watchlist.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import { cn } from '../../utils'
+
+import { Scramble } from './ascii'
+import { LinkIcon } from './icons'
+import { Typography } from './typography'
+
+const ETH_RE = /^0x[a-fA-F0-9]{40}$/
+const truncate = (a: string) => `${a.slice(0, 6)}${'·'.repeat(8)}${a.slice(-4)}`
+
+export function Watchlist({
+  className,
+  counter = false,
+  items,
+  scramble = false,
+  ...props
+}: WatchlistProps) {
+  return (
+    <div className={cn('flex flex-col gap-3', className)} {...props}>
+      {items.map(({ label, right, url }, i) => {
+        const isStr = typeof label === 'string'
+        const eth = isStr && ETH_RE.test(label)
+        const text = eth ? truncate(label) : (label as string)
+
+        return (
+          <a
+            className={cn(
+              'grid items-center gap-2.5 px-2.5 py-1.5',
+              'text-display leading-[1.4]',
+              'hover:bg-midground/10! hover:ring-2 hover:ring-current/20',
+              'transition-all duration-500 hover:duration-0',
+              'opacity-(--midground-alpha)'
+            )}
+            href={url}
+            key={i}
+            rel="noopener noreferrer"
+            style={{
+              background: `color-mix(in oklch, var(--color-midground) ${10 * Math.max(0, 1 - i / 9)}%, transparent)`,
+              gridTemplateColumns: [
+                counter && 'auto auto',
+                '1fr',
+                right && 'auto',
+                url && 'auto auto'
+              ]
+                .filter(Boolean)
+                .join(' ')
+            }}
+            target="_blank"
+          >
+            {counter && (
+              <>
+                <Typography
+                  className="text-lg tracking-[0.35em] opacity-40"
+                  compressed
+                >
+                  {String(i + 1).padStart(2, '0')}
+                </Typography>
+
+                <span className="text-[0.8125rem] font-bold tracking-[0.4em] opacity-20">
+                  :
+                </span>
+              </>
+            )}
+
+            {isStr ? (
+              <Typography
+                className="min-w-0 overflow-hidden text-lg font-bold tracking-[0.35em]"
+                {...(eth ? { mono: true } : { compressed: true })}
+              >
+                {scramble ? <Scramble delay={i * 80} text={text} /> : text}
+              </Typography>
+            ) : (
+              label
+            )}
+
+            {right && (
+              <Typography
+                className="text-right text-sm tracking-widest opacity-40"
+                mono
+              >
+                {right}
+              </Typography>
+            )}
+
+            {url && (
+              <>
+                <span className="text-[0.8125rem] tracking-[0.4em] opacity-20">
+                  :
+                </span>
+                <LinkIcon className="text-midground size-3.5" />
+              </>
+            )}
+          </a>
+        )
+      })}
+    </div>
+  )
+}
+
+interface WatchlistProps extends React.ComponentProps<'div'> {
+  counter?: boolean
+  items: { label?: React.ReactNode; right?: React.ReactNode; url?: string }[]
+  scramble?: boolean
+}

package/src/ui/fonts.css

@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Collapse-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Collapse';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/Collapse-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/RulesCompressed-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Compressed';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('../fonts/RulesCompressed-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/RulesExpanded-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Rules Expanded';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('../fonts/RulesExpanded-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/Mondwest-Regular.woff2') format('woff2');
+}
+
+:root {
+  --font-sans: 'Collapse', sans-serif;
+  --font-mono: 'Courier Prime', monospace;
+  --font-rules-compressed: 'Rules Compressed', sans-serif;
+  --font-rules-expanded: 'Rules Expanded', sans-serif;
+  --font-mondwest: 'Mondwest', sans-serif;
+}

package/src/ui/footer.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useRef } from 'react'
+
+import { useCssVarDims } from '../hooks/use-css-var-dims'
+import { Cell, Grid } from './components/grid'
+import { Socials, type SocialLink } from './components/socials'
+import { ThemeToggle } from './components/theme-toggle'
+import { Small } from './components/typography/small'
+
+const DEFAULT_GROUPS: FooterGroup[] = [
+  { label: 'Product', links: ['Overview', 'Features', 'Pricing'] },
+  { label: 'Resources', links: ['Docs', 'Blog', 'Support'] },
+  { label: 'Company', links: ['About', 'Careers', 'Contact'] },
+  { label: 'Legal', links: ['Privacy', 'Terms', 'License'] }
+]
+
+export function Footer({
+  className,
+  groups = DEFAULT_GROUPS,
+  LinkComponent = 'a',
+  socials,
+  socialsLabel = 'Socials',
+  style,
+  themeLabel = 'Theme',
+  themeToggle = false
+}: FooterProps) {
+  const ref = useRef<HTMLElement>(null)
+  useCssVarDims('footer', ref)
+
+  const hasSocials = (socials?.length ?? 0) > 0
+  const hasChrome = hasSocials || themeToggle
+
+  return (
+    <footer className={className} ref={ref} style={style}>
+      <Grid>
+        <Cell>
+          <Small className="opacity-50">&copy;{new Date().getFullYear()}</Small>
+        </Cell>
+
+        {groups.map(({ label, links }) => (
+          <Cell key={label}>
+            <Small className="opacity-50">{label}</Small>
+
+            <nav className="mt-3 flex flex-col gap-2">
+              {links.map(link => {
+                const href = typeof link === 'string'
+                  ? `/${link.toLowerCase()}`
+                  : link.href
+
+                const label = typeof link === 'string' ? link : link.label
+
+                return (
+                  <Small
+                    as={LinkComponent}
+                    className="underline"
+                    href={href}
+                    key={label}
+                  >
+                    {label}
+                  </Small>
+                )
+              })}
+            </nav>
+          </Cell>
+        ))}
+      </Grid>
+
+      {hasChrome && (
+        <Grid>
+          {hasSocials && (
+            <Cell className="flex items-start justify-between">
+              <Small className="opacity-50">{socialsLabel}</Small>
+
+              <Socials items={socials!} />
+            </Cell>
+          )}
+
+          {themeToggle && (
+            <Cell className="flex items-start justify-between">
+              <Small className="opacity-50">{themeLabel}</Small>
+
+              <ThemeToggle />
+            </Cell>
+          )}
+        </Grid>
+      )}
+    </footer>
+  )
+}
+
+export interface FooterGroup {
+  label: string
+  links: (FooterLink | string)[]
+}
+
+export interface FooterLink {
+  href: string
+  label: string
+}
+
+export interface FooterProps {
+  className?: string
+  groups?: FooterGroup[]
+  LinkComponent?: React.ElementType
+  socials?: SocialLink[]
+  socialsLabel?: string
+  style?: React.CSSProperties
+  themeLabel?: string
+  themeToggle?: boolean
+}