@speakeasy-api/moonshine 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/components/__beta__/CLIWizard/index.tsx

@@ -0,0 +1,357 @@
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronUp } from 'lucide-react'
+import { AnimatePresence, motion } from 'motion/react'
+import { cn } from '../../../lib/utils'
+import { Text } from '../../Text/index'
+import { Heading } from '../../Heading/index'
+import { TerminalCommand } from './terminal-command'
+import { Terminal } from './terminal'
+import { WizardStep } from '../../Wizard/types'
+
+/**
+ * TODO before moving out of beta:
+ * - Replace all these hardcoded colors with our design tokens:
+ *   bg-[#09090b], text-zinc-400, etc
+ * - Make sure we're using our standard border radius
+ * - Move the step circle sizes into our design tokens
+ */
+
+export interface CLIWizardProps {
+  steps: WizardStep[]
+  currentStep: number
+  completedSteps: number[]
+  onStepComplete?: (stepIndex: number) => void
+}
+
+const fadeUp = (i: number) => ({
+  initial: { opacity: 0, y: 10 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -10 },
+  transition: { delay: i * 0.1 },
+})
+
+const chevronVariants = {
+  up: { rotate: 0 },
+  down: { rotate: 180 },
+}
+
+export const ExpandChevron = ({
+  isCollapsed,
+}: {
+  isCollapsed: boolean | undefined
+}) => {
+  return (
+    <motion.div
+      initial="up"
+      animate={isCollapsed ? 'down' : 'up'}
+      variants={chevronVariants}
+      transition={{
+        duration: 0.2,
+        ease: [0.215, 0.61, 0.355, 1],
+      }}
+    >
+      <ChevronUp className="text-default h-4 w-4" />
+    </motion.div>
+  )
+}
+
+export function CLIWizard({
+  steps,
+  currentStep,
+  completedSteps,
+  onStepComplete,
+}: CLIWizardProps) {
+  const [activeStep, setActiveStep] = React.useState(
+    Math.min(currentStep - 1, steps.length - 1)
+  )
+  React.useEffect(() => {
+    setActiveStep(Math.min(currentStep - 1, steps.length - 1))
+  }, [currentStep, steps.length])
+
+  const [copiedCommands, setCopiedCommands] = React.useState<Set<string>>(
+    new Set()
+  )
+
+  const isStepComplete = (stepIndex: number) =>
+    completedSteps.includes(stepIndex + 1)
+
+  const currentStepCommands = steps[activeStep]?.commands || []
+  const activeCommandIndex = React.useMemo(() => {
+    return currentStepCommands.findIndex((cmd) => !copiedCommands.has(cmd.code))
+  }, [copiedCommands, currentStepCommands])
+
+  return (
+    <motion.div
+      layout
+      className="relative overflow-hidden select-none"
+      transition={{
+        duration: 0.3,
+        ease: [0.645, 0.045, 0.355, 1],
+      }}
+    >
+      <div className="w-full py-6">
+        <div className="flex items-center">
+          <Heading variant="lg" as="h2">
+            Getting Started
+          </Heading>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{
+            duration: 0.3,
+            ease: [0.645, 0.045, 0.355, 1],
+          }}
+          className="overflow-hidden"
+        >
+          <div className="mt-4 grid grid-cols-1 gap-8 pb-6 md:grid-cols-12">
+            <SidebarSteps
+              steps={steps}
+              activeStep={activeStep}
+              isStepComplete={isStepComplete}
+              onSelectStep={setActiveStep}
+            />
+
+            <div className="md:col-span-7">
+              <Terminal
+                path={
+                  currentStepCommands[activeCommandIndex]?.path ??
+                  '~/sdk-project'
+                }
+              >
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{
+                    duration: 0.3,
+                    ease: [0.645, 0.045, 0.355, 1],
+                  }}
+                >
+                  <div className="space-y-6">
+                    <AnimatePresence mode="wait">
+                      {currentStepCommands.map((command, i) => (
+                        <motion.div
+                          key={`${activeStep}-${command.id}`}
+                          {...fadeUp(i)}
+                        >
+                          <TerminalCommand
+                            code={command.code}
+                            language={command.language}
+                            comment={command.comment}
+                            copyable
+                            fontSize="small"
+                            path={command.path}
+                            isActive={
+                              !copiedCommands.has(command.code) &&
+                              i === activeCommandIndex
+                            }
+                            onSelectOrCopy={() => {
+                              const newCopied = new Set(copiedCommands)
+                              newCopied.add(command.code)
+                              setCopiedCommands(newCopied)
+
+                              const allCommandsCopied =
+                                currentStepCommands.every((c) =>
+                                  newCopied.has(c.code)
+                                )
+                              if (
+                                allCommandsCopied &&
+                                !isStepComplete(activeStep)
+                              ) {
+                                onStepComplete?.(activeStep + 1)
+                              }
+                            }}
+                          />
+                        </motion.div>
+                      ))}
+                    </AnimatePresence>
+                  </div>
+                </motion.div>
+              </Terminal>
+            </div>
+          </div>
+        </motion.div>
+      </AnimatePresence>
+    </motion.div>
+  )
+}
+
+interface SidebarStepsProps {
+  steps: WizardStep[]
+  activeStep: number
+  isStepComplete: (stepIndex: number) => boolean
+  onSelectStep: (stepIndex: number) => void
+}
+
+function SidebarSteps({
+  steps,
+  activeStep,
+  isStepComplete,
+  onSelectStep,
+}: SidebarStepsProps) {
+  return (
+    <div className="relative md:col-span-5">
+      <div className="space-y-4">
+        {steps.map((step, index) => {
+          const complete = isStepComplete(index)
+          const active = activeStep === index
+          // const isLastStep = index === steps.length - 1
+
+          return (
+            <div key={index}>
+              <div className="flex items-stretch">
+                <div className="flex flex-col items-center">
+                  <div className="flex h-6 items-center justify-center">
+                    <CircleOrCheck
+                      isComplete={complete}
+                      isActive={active}
+                      index={index}
+                    />
+                  </div>
+                  {/* TODO: Add line between steps, layout still needs work */}
+                  {/* {!isLastStep && (
+                    <LineBetweenSteps
+                      currentIndex={index}
+                      activeStep={activeStep}
+                      isStepComplete={isStepComplete}
+                    />
+                  )} */}
+                </div>
+
+                <div className="min-h-[48px] flex-1 pl-3">
+                  <button
+                    className="w-full text-left"
+                    onClick={() => onSelectStep(index)}
+                    aria-expanded={active}
+                    aria-controls={`step-content-${index}`}
+                  >
+                    <div className="flex h-6 items-center justify-between">
+                      <Heading variant="xs">{step.title}</Heading>
+                    </div>
+                  </button>
+
+                  <AnimatePresence mode="sync">
+                    {active && (
+                      <motion.div
+                        key={`desc-${index}`}
+                        id={`step-content-${index}`}
+                        initial={{ opacity: 0, height: 0 }}
+                        animate={{ opacity: 1, height: 'auto' }}
+                        exit={{ opacity: 0, height: 0 }}
+                        transition={{
+                          duration: 0.2,
+                          ease: [0.645, 0.045, 0.355, 1],
+                        }}
+                        className="mt-2 overflow-hidden"
+                      >
+                        <Text muted>{step.description}</Text>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// TODO: Add line between steps, layout still needs work
+// function LineBetweenSteps({
+//   currentIndex,
+//   activeStep,
+//   isStepComplete,
+// }: {
+//   currentIndex: number
+//   activeStep: number
+//   isStepComplete: (i: number) => boolean
+// }) {
+//   const stepComplete = isStepComplete(currentIndex)
+//   const nextIsActive = activeStep === currentIndex + 1
+
+//   const lineColor =
+//     stepComplete && nextIsActive ? 'bg-emerald-500' : 'bg-zinc-700'
+
+//   return <div className={`w-[1px] flex-1 ${lineColor} my-1`} />
+// }
+
+function CircleOrCheck({
+  isComplete,
+  isActive,
+  index,
+}: {
+  isComplete: boolean
+  isActive: boolean
+  index: number
+}) {
+  const variants = {
+    complete: {
+      circle: 'bg-emerald-600',
+      text: 'text-white',
+    },
+    active: {
+      circle: 'bg-surface-tertiary-inverse',
+      text: 'text-default-inverse',
+    },
+    default: {
+      circle: 'bg-surface-tertiary-default',
+      text: 'text-default',
+    },
+  }
+
+  const variant = isComplete ? 'complete' : isActive ? 'active' : 'default'
+  const { circle, text } = variants[variant]
+
+  return (
+    <div className="relative z-20 flex h-6 w-6 items-center justify-center">
+      <motion.div
+        className={cn('absolute inset-0 rounded-full', circle)}
+        initial={false}
+      />
+      <motion.div
+        className={cn(
+          'relative z-20 flex h-full w-full items-center justify-center rounded-full',
+          circle,
+          text
+        )}
+        initial={false}
+      >
+        <AnimatePresence mode="wait">
+          {isComplete ? (
+            <motion.div
+              key="check"
+              initial={{ opacity: 0, scale: 0.5 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.5 }}
+              transition={{ duration: 0.2 }}
+            >
+              <Check className="size-3" strokeWidth={2.5} />
+            </motion.div>
+          ) : (
+            <motion.div
+              key="number"
+              initial={{ opacity: 0, scale: 0.5 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.5 }}
+              transition={{ duration: 0.2 }}
+              className="flex h-full w-full items-center justify-center text-xs font-medium"
+            >
+              {index + 1}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+    </div>
+  )
+}
+
+export default CLIWizard

package/src/components/__beta__/CLIWizard/terminal-command.tsx

@@ -0,0 +1,108 @@
+/**
+ * TODO: Clean up before moving out of beta
+ * - Replace hardcoded colors with our tokens (the green highlight, hover states, etc)
+ * - Use our standard font size tokens instead of hardcoding small/medium/large
+ * - Add loading state for copy action
+ * - Add an animation around the active command
+ */
+
+import React from 'react'
+import { Check, Copy } from 'lucide-react'
+import { motion } from 'motion/react'
+import { TerminalPrompt, TerminalOutput } from './terminal'
+import { cn } from '../../../lib/utils'
+
+interface TerminalCommandProps {
+  code: string
+  language: string
+  onSelectOrCopy?: () => void
+  copyable?: boolean
+  fontSize?: 'small' | 'medium' | 'large'
+  isActive?: boolean
+  comment?: string
+  path?: string
+}
+
+export function TerminalCommand({
+  code,
+  onSelectOrCopy,
+  copyable = true,
+  fontSize = 'medium',
+  isActive = false,
+  comment,
+  path,
+}: TerminalCommandProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code)
+    setCopied(true)
+    onSelectOrCopy?.()
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div className="group relative">
+      <TerminalPrompt path={path} branch="main">
+        <button
+          onClick={handleCopy}
+          className="w-full text-left"
+          aria-label={copied ? 'Copied' : 'Copy command'}
+        >
+          <div
+            className={cn(
+              'relative -mx-2 rounded-md px-2 py-0.5 transition-colors',
+              isActive && 'bg-emerald-500/10',
+              !isActive && 'hover:bg-active'
+            )}
+          >
+            <div className="flex items-start gap-2">
+              <span className="text-emerald-500 select-none">$</span>
+              <span
+                className={cn(
+                  'text-default mt-0.5 flex-1 font-mono font-medium tracking-normal select-text',
+                  fontSize === 'small' && 'text-sm',
+                  fontSize === 'medium' && 'text-base',
+                  fontSize === 'large' && 'text-lg'
+                )}
+              >
+                {code}
+              </span>
+              {copyable && (
+                <span
+                  className={cn('mt-1.5 shrink-0', isActive && 'opacity-100')}
+                >
+                  {copied ? (
+                    <motion.div
+                      initial={{ scale: 0.8 }}
+                      animate={{ scale: 1 }}
+                      transition={{
+                        type: 'spring',
+                        stiffness: 200,
+                        damping: 10,
+                      }}
+                    >
+                      <Check className="h-3.5 w-3.5 text-emerald-500" />
+                    </motion.div>
+                  ) : (
+                    <Copy
+                      className={cn(
+                        'h-3.5 w-3.5 transition-colors',
+                        'text-body-muted group-hover:text-body'
+                      )}
+                    />
+                  )}
+                </span>
+              )}
+            </div>
+          </div>
+        </button>
+      </TerminalPrompt>
+      {comment && (
+        <TerminalOutput>
+          <span className="text-xs text-zinc-400"># {comment}</span>
+        </TerminalOutput>
+      )}
+    </div>
+  )
+}

package/src/components/__beta__/CLIWizard/terminal.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+/**
+ * TODO: Before moving out of beta
+ * - Need to replace these hardcoded colors with our tokens:
+ *   - All the terminal chrome colors (#27272a, #000000, etc)
+ *   - Use different colors for the termainal window, may offend windows users
+ */
+
+import * as React from 'react'
+import { TerminalIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+interface TerminalProps {
+  children: React.ReactNode
+  path?: string
+}
+
+export function Terminal({ children, path = '~' }: TerminalProps) {
+  return (
+    <div className="bg-surface-secondary-default border-neutral-softest flex h-full flex-col overflow-hidden rounded-lg border">
+      {/* Header */}
+      <div className="bg-surface-tertiary-default flex h-10 items-center justify-between px-4">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
+            <div className="h-2.5 w-2.5 rounded-full bg-red-500" />
+            <div className="h-2.5 w-2.5 rounded-full bg-yellow-500" />
+            <div className="h-2.5 w-2.5 rounded-full bg-green-500" />
+          </div>
+          <div className="ml-3 flex items-center gap-2 text-zinc-400">
+            <TerminalIcon className="h-3.5 w-3.5" />
+            <span className="text-xs font-medium">{path}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-grow space-y-6 overflow-y-auto p-4 font-mono text-sm">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface TerminalPromptProps {
+  path?: string
+  branch?: string
+  children: React.ReactNode
+  isActive?: boolean
+  time?: string
+}
+
+export function TerminalPrompt({
+  path = '~',
+  branch,
+  children,
+  time,
+}: TerminalPromptProps) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2 text-xs text-zinc-400">
+        <span className="text-zinc-500">{path}</span>
+        {branch && (
+          <>
+            <span>git:</span>
+            <span className="text-emerald-500">({branch})</span>
+          </>
+        )}
+        {time && <span className="text-zinc-400">({time})</span>}
+      </div>
+      <div className="rounded-lg">{children}</div>
+    </div>
+  )
+}
+
+interface TerminalOutputProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function TerminalOutput({ children, className }: TerminalOutputProps) {
+  return <div className={cn('pl-4 text-zinc-400', className)}>{children}</div>
+}

package/src/components/__beta__/README.md

@@ -0,0 +1,3 @@
+# Beta Components
+
+These components are in the beta phase and are not yet ready for production use.

package/src/components/index.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Welcome" />
+
+# `@speakeasy/moonshine`
+
+Speakeasy's design system is a reusable component library that helps Speakeasy contributors build out product experiences quickly and consistently.
+
+## Installation
+
+```bash
+pnpm add @speakeasy-api/moonshine
+```
+
+Reference the CSS file in your project:
+
+```ts
+import '@speakeasy-api/moonshine/moonshine.css'
+```
+
+
+Wrap your application in the `MoonshineConfigProvider` component, passing in the HTML element where the tailwind dark/light class is applied:
+
+```tsx
+import { MoonshineConfigProvider } from '@speakeasy-api/moonshine'
+
+<MoonshineConfigProvider themeElement={document.documentElement}>
+  <App />
+</MoonshineConfigProvider>
+```
+
+Then you can import components from the package:
+
+```tsx
+import { Grid } from '@speakeasy-api/moonshine'
+```
+
+The package is built with [vite](https://vitejs.dev/), and is distributed in both [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs) formats.

package/src/context/ConfigContext.tsx

@@ -0,0 +1,43 @@
+import { createContext } from 'react'
+import { Theme } from './theme'
+
+export interface ConfigContextType {
+  /*
+   * The current theme
+   */
+  theme: Theme
+
+  /*
+   * Update the current theme
+   */
+  setTheme: (theme: Theme) => void
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const ConfigContext = createContext<ConfigContextType | undefined>(
+  undefined
+)
+
+export interface MoonshineConfigProviderProps extends ConfigContextType {
+  children: React.ReactNode
+}
+
+/**
+ * Configures Speakeasy's design system, Moonshine, within a consuming application.
+ *
+ * @param {React.ReactNode} children - The components to be wrapped by the MoonshineConfigProvider.
+ * @param {Theme} theme - The current theme
+ * @param {function(Theme): void} setTheme - Function to update the theme
+ * @returns {React.ReactNode} - The components wrapped by the MoonshineConfigProvider.
+ */
+export function MoonshineConfigProvider({
+  children,
+  theme,
+  setTheme,
+}: MoonshineConfigProviderProps) {
+  return (
+    <ConfigContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ConfigContext.Provider>
+  )
+}