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

package/src/lib/responsiveMappers.ts

@@ -0,0 +1,69 @@
+import { Alignment, Gap, Padding, PaddingPerSide } from '../types'
+import {
+  isPaddingHorizontalOrVerticalAxis,
+  isPaddingPerSide,
+  isPaddingPerSideValue,
+} from './typeUtils'
+
+const directionClasses: Record<'horizontal' | 'vertical', string> = {
+  horizontal: 'flex-row',
+  vertical: 'flex-col',
+}
+
+export const directionToFlexMapper = (direction: 'horizontal' | 'vertical') =>
+  directionClasses[direction]
+export const gapMapper = (gap: Gap) => `gap-${gap}`
+
+const paddingPerSideMapper = (padding: PaddingPerSide): string => {
+  if (isPaddingHorizontalOrVerticalAxis(padding)) {
+    const { x, y } = padding
+    return `px-${x} py-${y}`
+  }
+
+  if (isPaddingPerSideValue(padding)) {
+    const { top, right, bottom, left } = padding
+    return `pt-${top} pr-${right} pb-${bottom} pl-${left}`
+  }
+
+  return ''
+}
+
+export const paddingMapper = (padding: Padding): string => {
+  if (isPaddingPerSide(padding)) return paddingPerSideMapper(padding)
+  return `p-${padding}`
+}
+export const colSpanMapper = (colSpan: number) => `col-span-${colSpan}`
+
+const alignmentClasses: Record<Alignment, string> = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch',
+  baseline: 'items-baseline',
+}
+
+export const alignmentMapper = (alignment: Alignment) =>
+  alignmentClasses[alignment]
+
+const justifyClasses: Record<
+  'start' | 'center' | 'end' | 'space-between' | 'space-evenly',
+  string
+> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+  'space-between': 'justify-between',
+  'space-evenly': 'justify-evenly',
+}
+
+export const justifyMapper = (justify: keyof typeof justifyClasses) =>
+  justifyClasses[justify]
+
+const wrapClasses: Record<'nowrap' | 'wrap' | 'wrap-reverse', string> = {
+  nowrap: 'flex-nowrap',
+  wrap: 'flex-wrap',
+  'wrap-reverse': 'flex-wrap-reverse',
+}
+
+export const wrapMapper = (wrap: 'nowrap' | 'wrap' | 'wrap-reverse') =>
+  wrapClasses[wrap]

package/src/lib/responsiveUtils.ts

@@ -0,0 +1,23 @@
+import { Breakpoint, breakpoints, Gap, ResponsiveValue, Size } from '../types'
+import { isResponsiveValueObject, isSize } from './typeUtils'
+
+export const gapMapper = (gap: Gap) => `gap-${gap}`
+
+export const resolveSizeForBreakpoint = (
+  currentBreakpoint: Breakpoint,
+  size: ResponsiveValue<Size>,
+  fallback: Size = 'medium'
+): Size => {
+  if (!isResponsiveValueObject<Size>(size)) {
+    return isSize(size) ? size : fallback
+  }
+
+  const currentBreakpointIndex = breakpoints.indexOf(currentBreakpoint)
+
+  for (let i = currentBreakpointIndex; i >= 0; i--) {
+    const breakpoint = breakpoints[i]
+    if (size[breakpoint]) return size[breakpoint]
+  }
+
+  return fallback
+}

package/src/lib/storybookUtils.tsx

@@ -0,0 +1,26 @@
+import { Grid } from '../components/Grid'
+
+/**
+ * Create a list of sample children for testing and rendering in storybook
+ */
+export function createSampleChildren(count: number, attachTestIds?: boolean) {
+  return Array.from({ length: count }).map((_, index) => {
+    return (
+      <div
+        key={index}
+        className="bg-muted text-body flex min-w-[100px] items-center justify-center rounded-md p-4 text-center"
+        data-testid={attachTestIds ? `sample-child-${index + 1}` : undefined}
+      >
+        {index + 1}
+      </div>
+    )
+  })
+}
+
+export function createSampleGridChildren(count: number) {
+  return createSampleChildren(count).map((child) => (
+    <Grid.Item key={child.key} {...child.props}>
+      {child}
+    </Grid.Item>
+  ))
+}

package/src/lib/typeUtils.ts

@@ -0,0 +1,109 @@
+import {
+  Breakpoint,
+  breakpoints,
+  Direction,
+  PaddingPerAxis,
+  PaddingPerSide,
+  PaddingPerSides,
+  ResponsiveValue,
+  Size,
+  sizes,
+} from '../types'
+import { Group } from '../components/Table'
+
+/**
+ * Create a range of numbers from 0 to N
+ * @example
+ * type Range0to100 = Range<100> // [0, 1, 2, ..., 100]
+ */
+export type Range<
+  N extends number,
+  Arr extends unknown[] = [],
+> = Arr['length'] extends N
+  ? [...Arr, N][number]
+  : Range<N, [...Arr, Arr['length']]>
+
+export function isResponsiveValueObject<T>(
+  value: unknown
+): value is ResponsiveValue<T> & Record<Breakpoint, T> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    Object.keys(value).every((key) => isBreakpoint(key))
+  )
+}
+
+export function isSize(value: unknown): value is Size {
+  return (
+    typeof value === 'string' && (sizes as readonly string[]).includes(value)
+  )
+}
+
+export function isDirection(value: unknown): value is Direction {
+  return (
+    typeof value === 'string' &&
+    (['row', 'column'] as readonly string[]).includes(value)
+  )
+}
+
+/**
+ * Checks if the value is an object with x and y properties
+ */
+export function isPaddingHorizontalOrVerticalAxis(
+  value: unknown
+): value is PaddingPerAxis {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    // x or y must be present
+    ('x' in value || 'y' in value)
+  )
+}
+
+export function isPaddingPerSideValue(
+  value: unknown
+): value is PaddingPerSides {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    ('top' in value || 'right' in value || 'bottom' in value || 'left' in value)
+  )
+}
+
+export function isPaddingPerSide(value: unknown): value is PaddingPerSide {
+  return isPaddingHorizontalOrVerticalAxis(value) || isPaddingPerSides(value)
+}
+
+export function isPaddingPerSides(value: unknown): value is PaddingPerSides {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'top' in value &&
+    'right' in value &&
+    'bottom' in value &&
+    'left' in value
+  )
+}
+
+/**
+ * Asserts that a condition is true, otherwise throws an error
+ * Can be used to narrow types
+ */
+export function assert(condition: unknown, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message)
+  }
+}
+
+function isBreakpoint(key: string): key is Breakpoint {
+  return (breakpoints as readonly string[]).includes(key)
+}
+
+export function isGroupOf<T extends object>(data: unknown): data is Group<T> {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'key' in data &&
+    'items' in data
+  )
+}

package/src/lib/utils.ts

@@ -0,0 +1,85 @@
+import { Breakpoint, ResponsiveValue } from '../types'
+import { clsx, type ClassValue } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+import { isResponsiveValueObject } from './typeUtils'
+
+const customTwMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        {
+          text: [
+            (value: string) =>
+              ['heading', 'body', 'codeline', 'display'].some((element) =>
+                value.includes(element)
+              ) &&
+              ['xs', 'sm', 'md', 'lg', 'xl', '2xl'].some((element) =>
+                value.includes(element)
+              ),
+          ],
+        },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs: ClassValue[]) {
+  return customTwMerge(clsx(inputs))
+}
+
+/**
+ * Given an object of responsive values for T and a mapper function, return a string of class names
+ * that correspond to the responsive values.
+ *
+ * @param value - The responsive value
+ * @param mapper - A function that takes the value and returns a string of class names
+ * @returns A string of class names
+ * @example
+ * const gapMapper = (gap: number) => `gap-${gap}`
+ * const gap = getResponsiveClasses({ sm: 0, md: 10 }, gapMapper)
+ * // => 'gap-0 md:gap-10'
+ */
+export function getResponsiveClasses<T>(
+  value: ResponsiveValue<T>,
+  mapper: (val: T, breakpoint: Breakpoint) => string
+): string {
+  if (isResponsiveValueObject(value)) {
+    return Object.entries(value)
+      .filter(([, val]) => val !== undefined)
+      .map(([breakpoint, val]) => {
+        const resolvedClasses = mapper(val as T, breakpoint as Breakpoint)
+        const classFragments = resolvedClasses.split(' ')
+
+        return classFragments
+          .map((fragment) => {
+            return breakpoint === 'xs' ? fragment : `${breakpoint}:${fragment}`
+          })
+          .join(' ')
+      })
+      .join(' ')
+  }
+  return mapper(value as T, 'xs')
+}
+
+/**
+ * Converts string to kebab case
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = (string: string) =>
+  string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+export const partitionBy = <T>(
+  array: T[],
+  predicate: (item: T) => boolean
+): [T[], T[]] => {
+  return array.reduce(
+    (acc: [T[], T[]], item: T): [T[], T[]] => {
+      const key = predicate(item) ? 0 : 1
+      acc[key].push(item)
+      return acc
+    },
+    [[], []]
+  )
+}

package/src/styles/codeSyntax.css

@@ -0,0 +1,59 @@
+.light {
+  --ch-0: light;
+  --ch-1: #56565a;
+  --ch-2: #baa039;
+  --ch-3: #fc7989;
+  --ch-4: #787878;
+  --ch-5: #3794ff;
+  --ch-6: #54bc93;
+  --ch-7: #9075fc;
+  --ch-8: #54bc93;
+  --ch-9: #fda4af;
+  --ch-10: #f0f6fc;
+  --ch-11: #490202;
+  --ch-12: #04260f;
+  --ch-13: #5a1e02;
+  --ch-14: #161b22;
+  --ch-15: #8b949e;
+  --ch-16: #0d1117;
+  --ch-17: #6e76811a;
+  --ch-18: #ffffff0b;
+  --ch-19: #3794ff;
+  --ch-20: #264f78;
+  --ch-21: #1f6feb;
+  --ch-22: #010409;
+  --ch-23: #30363d;
+  --ch-24: #6e7681;
+  --ch-25: #6e768166;
+  --ch-26: #0d1117e6;
+}
+
+.dark {
+  --ch-0: dark;
+  --ch-1: #71717a;
+  --ch-2: #fef3c7;
+  --ch-3: #fda4af;
+  --ch-4: #e4e4e7;
+  --ch-5: #7dd3fc;
+  --ch-6: #6ee7b7;
+  --ch-7: #c4b5fd;
+  --ch-8: #6ee7b7;
+  --ch-9: #fda4af;
+  --ch-10: #f0f6fc;
+  --ch-11: #490202;
+  --ch-12: #04260f;
+  --ch-13: #5a1e02;
+  --ch-14: #161b22;
+  --ch-15: #8b949e;
+  --ch-16: #0d1117;
+  --ch-17: #6e76811a;
+  --ch-18: #ffffff0b;
+  --ch-19: #3794ff;
+  --ch-20: #264f78;
+  --ch-21: #1f6feb;
+  --ch-22: #010409;
+  --ch-23: #30363d;
+  --ch-24: #6e7681;
+  --ch-25: #6e768166;
+  --ch-26: #0d1117e6;
+}

package/src/styles/globals.css

@@ -0,0 +1,51 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+::view-transition-old(workspace-content) {
+  animation: fade-out 0.3s ease-out;
+}
+
+::view-transition-new(workspace-content) {
+  animation: fade-in 0.3s ease-out;
+}
+
+::view-transition-old(create-dialog) {
+  animation: slide-out 0.3s ease-out;
+}
+
+::view-transition-new(create-dialog) {
+  animation: slide-in 0.3s ease-out;
+}

package/src/types.ts

@@ -0,0 +1,200 @@
+import { assertNever } from './lib/assert'
+
+// Button variants
+export const buttonVariants = [
+  'brand',
+  'primary',
+  'secondary',
+  'tertiary',
+  'destructive-primary',
+  'destructive-secondary',
+] as const
+export type ButtonVariant = (typeof buttonVariants)[number]
+
+// Button sizes
+export const buttonSizes = ['xs', 'sm', 'md', 'lg'] as const
+export type ButtonSize = (typeof buttonSizes)[number]
+
+// Button contexts
+export const buttonContexts = ['product', 'marketing'] as const
+export type ButtonContext = (typeof buttonContexts)[number]
+
+// Badge variants
+export const badgeVariants = [
+  'neutral',
+  'destructive',
+  'information',
+  'success',
+  'warning',
+] as const
+export type BadgeVariant = (typeof badgeVariants)[number]
+
+// Generic
+export type Orientation = 'horizontal' | 'vertical'
+
+export const sizes = ['small', 'medium', 'large', 'xl', '2xl'] as const
+export type Size = (typeof sizes)[number]
+
+// Breakpoints
+export const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
+export type Breakpoint = (typeof breakpoints)[number]
+export type ResponsiveValue<T> = T | { [key in Breakpoint]?: T }
+
+// Stack
+export const directionOptions = ['row', 'column'] as const
+export type Direction = (typeof directionOptions)[number]
+
+export const tailwindScale = [
+  0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24,
+  28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96,
+] as const
+
+// Gap
+export const gapValues = tailwindScale
+export type Gap = (typeof gapValues)[number]
+
+// Grid Columns
+export const gridColumnValues = tailwindScale
+export type Columns = (typeof gridColumnValues)[number]
+
+// Padding
+export const paddingValues = tailwindScale
+export type PaddingValue = (typeof paddingValues)[number]
+
+export type PaddingPerAxis = { x?: PaddingValue; y?: PaddingValue }
+export type PaddingPerSides = {
+  top?: PaddingValue
+  right?: PaddingValue
+  bottom?: PaddingValue
+  left?: PaddingValue
+}
+
+export type PaddingPerSide =
+  /**
+   * x, y
+   */
+  | PaddingPerAxis
+  /**
+   * top, right, bottom, left
+   */
+  | PaddingPerSides
+
+export type Padding = PaddingValue | PaddingPerSide
+
+export const alignmentOptions = [
+  'start',
+  'center',
+  'end',
+  'stretch',
+  'baseline',
+] as const
+/**
+ * Alignment is an abstraction / amalgamation of the CSS `justify-content`
+ * and `align-items` properties.
+ */
+export type Alignment = (typeof alignmentOptions)[number]
+
+export const supportedLanguages = [
+  'typescript',
+  'go',
+  'java',
+  'python',
+  'csharp',
+  'terraform',
+  'unity',
+  'php',
+  'swift',
+  'ruby',
+  'postman',
+  'json',
+] as const
+
+export type SupportedLanguage = (typeof supportedLanguages)[number]
+
+export function isSupportedLanguage(
+  language: string
+): language is SupportedLanguage {
+  return supportedLanguages.includes(language as SupportedLanguage)
+}
+
+export function prettyLanguageName(language: SupportedLanguage) {
+  switch (language) {
+    case 'typescript':
+      return 'TypeScript'
+    case 'go':
+      return 'Go'
+    case 'ruby':
+      return 'Ruby'
+    case 'python':
+      return 'Python'
+    case 'csharp':
+      return 'C#'
+    case 'php':
+      return 'PHP'
+    case 'java':
+      return 'Java'
+    case 'swift':
+      return 'Swift'
+    case 'postman':
+      return 'Postman'
+    case 'terraform':
+      return 'Terraform'
+    case 'unity':
+      return 'Unity'
+    case 'json':
+      return 'JSON'
+    default:
+      assertNever(language)
+  }
+}
+
+export type ViewTransition = {
+  ready: Promise<void>
+  finished: Promise<void>
+  updateCallbackDone: Promise<void>
+  skipTransition: () => void
+}
+
+export const wrapOptions = ['nowrap', 'wrap', 'wrap-reverse'] as const
+export type Wrap = (typeof wrapOptions)[number]
+
+export const programmingLanguages = [
+  'javascript',
+  'typescript',
+  'python',
+  'bash',
+  'json',
+  'go',
+  'dotnet',
+  'java',
+] as const
+export type ProgrammingLanguage = (typeof programmingLanguages)[number]
+
+export function isProgrammingLanguage(
+  language: string
+): language is ProgrammingLanguage {
+  return programmingLanguages.includes(language as ProgrammingLanguage)
+}
+
+// Workspace selector - shared by Navbar and WorkspaceSelector
+export interface Org {
+  id: string
+  label: string
+  slug: string
+  workspaces: Workspace[]
+}
+
+export interface Workspace {
+  id: string
+  slug: string
+  label: string
+  active: boolean
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface GlobalWorkspaceSelectorProps {
+  orgs: Org[]
+  value?: string
+  onSelect: (org: Org, workspace: Workspace) => void
+}