@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/tv.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+const VERT = /* glsl */ `attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}`
+
+const FRAG = /* glsl */ `precision highp float;
+uniform float t;
+uniform vec2 r;
+
+const float FBM_STR = .08;
+
+float h(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+float n2(vec2 p) {
+  vec2 i = floor(p), f = fract(p);
+  f = f * f * (3. - 2. * f);
+
+  return mix(
+    mix(h(i), h(i + vec2(1, 0)), f.x),
+    mix(h(i + vec2(0, 1)), h(i + vec2(1, 1)), f.x),
+    f.y
+  );
+}
+
+float fbm(vec2 p) {
+  float v = 0., a = .5;
+
+  for (int i = 0; i < 4; i++) {
+    v += a * n2(p);
+    p *= 2.1;
+    a *= .45;
+  }
+
+  return v;
+}
+
+float drift(float speed, float s) {
+  return fract(t * speed + s + .02 * sin(t * .4 + s * 3.));
+}
+
+float brushAt(vec2 uv, float y, float th, float s) {
+  float hw = .34 + .08 * h(vec2(s, 77.));
+  float cx = .5;
+  float xn = (uv.x - (cx - hw)) / (2. * hw);
+  float env = smoothstep(0., .03, xn) * smoothstep(1., .97, xn);
+  float localTh = th * env;
+
+  if (localTh < .002) return 0.;
+
+  float morph = floor(t * 8.) * .7 + s;
+  float top = y - localTh * .5 + fbm(vec2(uv.x * 6., morph)) * FBM_STR;
+  float bot = y + localTh * .5 - fbm(vec2(uv.x * 6., morph + 30.)) * FBM_STR;
+  float x0 = cx - hw + fbm(vec2(uv.y * 8., morph + 60.)) * FBM_STR;
+  float x1 = cx + hw - fbm(vec2(uv.y * 8., morph + 90.)) * FBM_STR;
+
+  float dMin = min(min(uv.y - top, bot - uv.y), min(uv.x - x0, x1 - uv.x));
+
+  float bristle = n2(vec2(uv.x * 60., uv.y * 8. + s)) * .4
+    + n2(vec2(uv.x * 25., (uv.y - y) * 120. + s)) * .35
+    + n2(vec2(uv.x * 90., uv.y * 3. + s * 2.)) * .25;
+
+  float eaten = smoothstep(.03, 0., dMin) * (1. - smoothstep(.2, .5, bristle));
+
+  return clamp(smoothstep(0., .003, dMin) * (1. - eaten), 0., 1.);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / r;
+  uv = vec2(uv.x * cos(.095) - uv.y * sin(.095), uv.x * sin(.095) + uv.y * cos(.095));
+  uv += vec2(fbm(uv * 4. + t * .06), fbm(uv * 4. + 8. + t * .05)) * .012;
+
+  vec3 c = vec3(.992, .992, .051);
+
+  float smScroll = -drift(.04, 5.) * 2.;
+  float sm = 0.;
+
+  for (int i = 0; i < 20; i++) {
+    sm = max(sm, brushAt(uv, mod(float(i) * .1 + smScroll, 2.) - .5, .04, float(i) + 10.));
+  }
+
+  float d1 = drift(.15, 1.), d2 = drift(.15, 1.37), d3 = drift(.15, 1.58), d4 = drift(.15, 1.82);
+  float big = max(
+    max(brushAt(uv, 1.1 - d1 * 1.4, .28, 1.), brushAt(uv, 1.1 - d2 * 1.4, .18, 2.)),
+    max(brushAt(uv, 1.1 - d3 * 1.4, .3, 3.), brushAt(uv, 1.1 - d4 * 1.4, .15, 4.))
+  );
+
+  c = mix(c, vec3(0.), clamp(max(sm, big), 0., 1.));
+  c *= .94 + .06 * sin(uv.y * r.y * 6.283);
+
+  vec2 raw = gl_FragCoord.xy / r;
+  float dx = min(raw.x - .22, .90 - raw.x);
+  float dy = min(raw.y - .29, .86 - raw.y);
+  float cycle = floor(t * .4);
+  float edge = mix(smoothstep(.22, 0., max(min(dx, dy), 0.)), 1., step(.75, h(vec2(cycle, 13.))))
+    * smoothstep(.85, 1., sin(t * 2.5) * .5 + .5)
+    * (.7 + .3 * h(vec2(cycle, 7.)));
+
+  float scanY = floor(gl_FragCoord.y);
+  float rowNoise = h(vec2(scanY, floor(t * 30.)));
+  c *= 1. - edge * max(step(.45, rowNoise), step(.3, h(vec2(gl_FragCoord.x + scanY * 7., floor(t * 45.)))) * step(.2, rowNoise));
+
+  gl_FragColor = vec4(clamp(c, 0., 1.), 1.);
+}`
+
+function useGL(ref: React.RefObject<HTMLCanvasElement | null>) {
+  const raf = useRef(0)
+
+  useEffect(() => {
+    const c = ref.current
+
+    if (!c) {
+      return
+    }
+
+    const gl = c.getContext('webgl')
+
+    if (!gl) {
+      return
+    }
+
+    const sh = (type: number, src: string) => {
+      const s = gl.createShader(type)!
+      gl.shaderSource(s, src)
+      gl.compileShader(s)
+
+      return s
+    }
+
+    const p = gl.createProgram()!
+    gl.attachShader(p, sh(gl.VERTEX_SHADER, VERT))
+    gl.attachShader(p, sh(gl.FRAGMENT_SHADER, FRAG))
+    gl.linkProgram(p)
+    gl.useProgram(p)
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    )
+
+    const a = gl.getAttribLocation(p, 'a')
+    gl.enableVertexAttribArray(a)
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0)
+
+    const uT = gl.getUniformLocation(p, 't')
+    const uR = gl.getUniformLocation(p, 'r')
+
+    const resize = () => {
+      const rect = c.getBoundingClientRect()
+      const dpr = Math.min(devicePixelRatio, 2)
+
+      c.width = rect.width * dpr
+      c.height = rect.height * dpr
+
+      gl.viewport(0, 0, c.width, c.height)
+    }
+
+    resize()
+
+    const ro = new ResizeObserver(resize)
+    ro.observe(c)
+
+    const t0 = performance.now()
+
+    let visible = !document.hidden
+    let inView = true
+    let raf2 = 0
+
+    const tick = () => {
+      gl.uniform1f(uT, (performance.now() - t0) / 1e3)
+      gl.uniform2f(uR, c.width, c.height)
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+
+      raf2 = requestAnimationFrame(tick)
+    }
+
+    const start = () => {
+      if (visible && inView && !raf2) {
+        raf2 = requestAnimationFrame(tick)
+      }
+    }
+
+    const stop = () => {
+      if (raf2) {
+        cancelAnimationFrame(raf2)
+        raf2 = 0
+      }
+    }
+
+    const onVisibility = () => {
+      visible = !document.hidden
+      visible ? start() : stop()
+    }
+
+    const io = new IntersectionObserver(
+      entries => {
+        inView = entries.some(e => e.isIntersecting)
+        inView ? start() : stop()
+      },
+      { threshold: 0 }
+    )
+
+    io.observe(c)
+    document.addEventListener('visibilitychange', onVisibility)
+
+    start()
+    raf.current = raf2
+
+    return () => {
+      stop()
+      io.disconnect()
+      document.removeEventListener('visibilitychange', onVisibility)
+      ro.disconnect()
+    }
+  }, [ref])
+}
+
+export function TV({ className }: { className?: string }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  useGL(canvasRef)
+
+  return (
+    <div className={['relative', className].filter(Boolean).join(' ')}>
+      <svg className="relative h-full w-full" fill="none" viewBox="0 0 210 173">
+        <path
+          d="M30.8342 2.44471 6.08268 36.683c-.24437.338-.38254.7412-.39689 1.158L1.57754 157.126c-.03891 1.129.82339 2.087 1.95096 2.167l162.4835 11.463c.433.031.866-.074 1.238-.3l35.718-21.69c.607-.369.986-1.02 1.008-1.73l4.102-130.9871c.035-1.1269-.826-2.0806-1.951-2.1604L32.6847 1.58029c-.7248-.05144-1.4247.27551-1.8505.86442Z"
+          fill="#FDFD0D"
+          stroke="#FDFD0D"
+          strokeWidth="3.15"
+        />
+
+        <path
+          d="M203.09 17.1483 35.6844 5.83395l-4.2 121.94805 168.4906 13.076z"
+          fill="#000"
+          stroke="#FDFD0D"
+          strokeWidth="4.2"
+        />
+
+        <path
+          d="M190.491 29.7483 48.2859 18.434l-4.2 98.848 143.2901 10.976z"
+          fill="#FDFD0D"
+        />
+      </svg>
+
+      <canvas
+        className="absolute inset-0 h-full w-full"
+        ref={canvasRef}
+        style={{
+          clipPath:
+            'polygon(23% 10.65%, 90.71% 17.2%, 89.23% 74.13%, 20.99% 67.79%)'
+        }}
+      />
+    </div>
+  )
+}

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/Data Display/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
+}