@betterstart/cli 0.1.3 → 0.1.4

package/templates/tiptap/tiptap-ui-primitive/button/button.scss

@@ -0,0 +1,314 @@
+.tiptap-button {
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  height: 2rem;
+  min-width: 2rem;
+  border: none;
+  padding: 0.5rem;
+  gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+
+  // focus-visible
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[data-highlighted="true"],
+  &[data-focus-visible="true"] {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+    // outline: 2px solid var(--tt-button-active-icon-color);
+  }
+
+  &[data-weight="small"] {
+    width: 1.5rem;
+    min-width: 1.5rem;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  /* button size large */
+  &[data-size="large"] {
+    font-size: 0.9375rem;
+    height: 2.375rem;
+    min-width: 2.375rem;
+    padding: 0.625rem;
+  }
+
+  /* button size small */
+  &[data-size="small"] {
+    font-size: 0.75rem;
+    line-height: 1.2;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    padding: 0.3125rem;
+    border-radius: var(--tt-radius-md, 0.5rem);
+  }
+
+  /* trim / expand text of the button */
+  .tiptap-button-text {
+    padding: 0 0.125rem;
+    flex-grow: 1;
+    text-align: left;
+    line-height: 1.5rem;
+  }
+
+  &[data-text-trim="on"] {
+    .tiptap-button-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  /* global icon settings */
+  .tiptap-button-icon,
+  .tiptap-button-icon-sub,
+  .tiptap-button-dropdown-arrows,
+  .tiptap-button-dropdown-small {
+    flex-shrink: 0;
+  }
+
+  /* standard icon, what is used */
+  .tiptap-button-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* if 2 icons are used and this icon should be more subtle */
+  .tiptap-button-icon-sub {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &[data-size="large"] .tiptap-button-icon-sub {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-icon-sub {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  /* dropdown menus or arrows that are slightly smaller */
+  .tiptap-button-dropdown-arrows {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-arrows {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-arrows {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  /* dropdown menu for icon buttons only */
+  .tiptap-button-dropdown-small {
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &[data-size="large"] .tiptap-button-dropdown-small {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  &[data-size="small"] .tiptap-button-dropdown-small {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* button only has icons */
+  &:has(> svg):not(:has(> :not(svg))) {
+    gap: 0.125rem;
+
+    &[data-size="large"],
+    &[data-size="small"] {
+      gap: 0.125rem;
+    }
+  }
+
+  /* button only has 2 icons and one of them is dropdown small */
+  &:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(
+      :has(> svg:nth-of-type(3))
+    ):not(:has(> .tiptap-button-text)) {
+    gap: 0;
+    padding-right: 0.25rem;
+
+    &[data-size="large"] {
+      padding-right: 0.375rem;
+    }
+
+    &[data-size="small"] {
+      padding-right: 0.25rem;
+    }
+  }
+
+  /* Emoji is used in a button */
+  .tiptap-button-emoji {
+    width: 1rem;
+    display: flex;
+    justify-content: center;
+  }
+
+  &[data-size="large"] .tiptap-button-emoji {
+    width: 1.125rem;
+  }
+
+  &[data-size="small"] .tiptap-button-emoji {
+    width: 0.875rem;
+  }
+}
+
+/* --------------------------------------------
+----------- BUTTON COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-button {
+  background-color: var(--tt-button-default-bg-color);
+  color: var(--tt-button-default-text-color);
+
+  .tiptap-button-icon {
+    color: var(--tt-button-default-icon-color);
+  }
+
+  .tiptap-button-icon-sub {
+    color: var(--tt-button-default-icon-sub-color);
+  }
+
+  .tiptap-button-dropdown-arrows {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  .tiptap-button-dropdown-small {
+    color: var(--tt-button-default-dropdown-arrows-color);
+  }
+
+  /* hover state of a button */
+  &:hover:not([data-active-item="true"]):not([disabled]),
+  &[data-active-item="true"]:not([disabled]),
+  &[data-highlighted]:not([disabled]):not([data-highlighted="false"]) {
+    background-color: var(--tt-button-hover-bg-color);
+    color: var(--tt-button-hover-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-hover-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-hover-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-hover-dropdown-arrows-color);
+    }
+  }
+
+  /* Active state of a button */
+  &[data-active-state="on"]:not([disabled]),
+  &[data-state="open"]:not([disabled]) {
+    background-color: var(--tt-button-active-bg-color);
+    color: var(--tt-button-active-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-active-icon-color);
+    }
+
+    .tiptap-button-icon-sub {
+      color: var(--tt-button-active-icon-sub-color);
+    }
+
+    .tiptap-button-dropdown-arrows,
+    .tiptap-button-dropdown-small {
+      color: var(--tt-button-active-dropdown-arrows-color);
+    }
+
+    &:hover {
+      background-color: var(--tt-button-active-hover-bg-color);
+    }
+
+    /* Emphasized */
+    &[data-appearance="emphasized"] {
+      background-color: var(--tt-button-active-bg-color-emphasized);
+      color: var(--tt-button-active-text-color-emphasized);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-emphasized);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-emphasized);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-emphasized);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-emphasized);
+      }
+    }
+
+    /* Subdued */
+    &[data-appearance="subdued"] {
+      background-color: var(--tt-button-active-bg-color-subdued);
+      color: var(--tt-button-active-text-color-subdued);
+
+      .tiptap-button-icon {
+        color: var(--tt-button-active-icon-color-subdued);
+      }
+
+      .tiptap-button-icon-sub {
+        color: var(--tt-button-active-icon-sub-color-subdued);
+      }
+
+      .tiptap-button-dropdown-arrows,
+      .tiptap-button-dropdown-small {
+        color: var(--tt-button-active-dropdown-arrows-color-subdued);
+      }
+
+      &:hover {
+        background-color: var(--tt-button-active-hover-bg-color-subdued);
+
+        .tiptap-button-icon {
+          color: var(--tt-button-active-icon-color-subdued);
+        }
+      }
+    }
+  }
+
+  &:disabled {
+    background-color: var(--tt-button-disabled-bg-color);
+    color: var(--tt-button-disabled-text-color);
+
+    .tiptap-button-icon {
+      color: var(--tt-button-disabled-icon-color);
+    }
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/button/button.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { Fragment, forwardRef, useMemo } from 'react'
+// --- Lib ---
+import { cn, parseShortcutKeys } from '../../lib/tiptap-utils'
+// --- Tiptap UI Primitive ---
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
+
+import './button-colors.scss'
+import './button-group.scss'
+import './button.scss'
+
+export type ButtonVariant = 'ghost' | 'primary'
+export type ButtonSize = 'small' | 'default' | 'large'
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  showTooltip?: boolean
+  tooltip?: React.ReactNode
+  shortcutKeys?: string
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+export const ShortcutDisplay: React.FC<{ shortcuts: string[] }> = ({ shortcuts }) => {
+  if (shortcuts.length === 0) return null
+
+  return (
+    <div>
+      {shortcuts.map((key, index) => (
+        <Fragment key={index}>
+          {index > 0 && <kbd>+</kbd>}
+          <kbd>{key}</kbd>
+        </Fragment>
+      ))}
+    </div>
+  )
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className, children, tooltip, showTooltip = true, shortcutKeys, variant, size, ...props },
+    ref
+  ) => {
+    const shortcuts = useMemo<string[]>(() => parseShortcutKeys({ shortcutKeys }), [shortcutKeys])
+
+    if (!tooltip || !showTooltip) {
+      return (
+        <button
+          className={cn('tiptap-button', className)}
+          ref={ref}
+          data-style={variant}
+          data-size={size}
+          {...props}
+        >
+          {children}
+        </button>
+      )
+    }
+
+    return (
+      <Tooltip delay={200}>
+        <TooltipTrigger
+          className={cn('tiptap-button', className)}
+          ref={ref}
+          data-style={variant}
+          data-size={size}
+          {...props}
+        >
+          {children}
+        </TooltipTrigger>
+        <TooltipContent>
+          {tooltip}
+          <ShortcutDisplay shortcuts={shortcuts} />
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+export const ButtonGroup = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical'
+  }
+>(({ className, children, orientation = 'vertical', ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn('tiptap-button-group', className)}
+      data-orientation={orientation}
+      role="group"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+})
+ButtonGroup.displayName = 'ButtonGroup'
+
+export default Button

package/templates/tiptap/tiptap-ui-primitive/button/index.tsx

@@ -0,0 +1 @@
+export * from './button'

package/templates/tiptap/tiptap-ui-primitive/card/card.scss

@@ -0,0 +1,77 @@
+:root {
+  --tiptap-card-bg-color: var(--white);
+  --tiptap-card-border-color: var(--tt-gray-light-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-light-a-800);
+}
+
+.dark {
+  --tiptap-card-bg-color: var(--tt-gray-dark-50);
+  --tiptap-card-border-color: var(--tt-gray-dark-a-100);
+  --tiptap-card-group-label-color: var(--tt-gray-dark-a-800);
+}
+
+.tiptap-card {
+  --padding: 0.375rem;
+  --border-width: 1px;
+
+  border-radius: calc(var(--padding) + var(--tt-radius-lg));
+  box-shadow: var(--tt-shadow-elevated-md);
+  background-color: var(--tiptap-card-bg-color);
+  border: 1px solid var(--tiptap-card-border-color);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  align-items: center;
+
+  position: relative;
+  min-width: 0;
+  word-wrap: break-word;
+  background-clip: border-box;
+}
+
+.tiptap-card-header {
+  padding: 0.375rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: var(--border-width) solid var(--tiptap-card-border-color);
+}
+
+.tiptap-card-body {
+  padding: 0.375rem;
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+.tiptap-card-item-group {
+  position: relative;
+  display: flex;
+  vertical-align: middle;
+  min-width: max-content;
+
+  &[data-orientation="vertical"] {
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &[data-orientation="horizontal"] {
+    gap: 0.25rem;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.tiptap-card-group-label {
+  padding-top: 0.75rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-bottom: 0.25rem;
+  line-height: normal;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: normal;
+  text-transform: capitalize;
+  color: var(--tiptap-card-group-label-color);
+}

package/templates/tiptap/tiptap-ui-primitive/card/card.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { forwardRef } from 'react'
+import { cn } from '../../lib/tiptap-utils'
+import './card.scss'
+
+const Card = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('tiptap-card', className)} {...props} />
+  }
+)
+Card.displayName = 'Card'
+
+const CardHeader = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('tiptap-card-header', className)} {...props} />
+  }
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardBody = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('tiptap-card-body', className)} {...props} />
+  }
+)
+CardBody.displayName = 'CardBody'
+
+const CardItemGroup = forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical'
+  }
+>(({ className, orientation = 'vertical', ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-orientation={orientation}
+      className={cn('tiptap-card-item-group', className)}
+      {...props}
+    />
+  )
+})
+CardItemGroup.displayName = 'CardItemGroup'
+
+const CardGroupLabel = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('tiptap-card-group-label', className)} {...props} />
+  }
+)
+CardGroupLabel.displayName = 'CardGroupLabel'
+
+const CardFooter = forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('tiptap-card-footer', className)} {...props} />
+  }
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardBody, CardItemGroup, CardGroupLabel }

package/templates/tiptap/tiptap-ui-primitive/card/index.tsx

@@ -0,0 +1 @@
+export * from './card'

package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/dropdown-menu.scss

@@ -0,0 +1,63 @@
+.tiptap-dropdown-menu {
+  --tt-dropdown-menu-bg-color: var(--white);
+  --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
+  --tt-dropdown-menu-text-color: var(--tt-gray-light-a-600);
+
+  .dark & {
+    --tt-dropdown-menu-border-color: var(--tt-gray-dark-a-50);
+    --tt-dropdown-menu-bg-color: var(--tt-gray-dark-50);
+    --tt-dropdown-menu-text-color: var(--tt-gray-dark-a-600);
+  }
+}
+
+/* --------------------------------------------
+    --------- DROPDOWN MENU STYLING SETTINGS -----------
+    -------------------------------------------- */
+.tiptap-dropdown-menu {
+  z-index: 50;
+  outline: none;
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  max-height: var(--radix-dropdown-menu-content-available-height);
+
+  > * {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+  }
+
+  /* Animation states */
+  &[data-state="open"] {
+    animation:
+      fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation:
+      fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Position-based animations */
+  &[data-side="top"],
+  &[data-side="top-start"],
+  &[data-side="top-end"] {
+    animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="right"],
+  &[data-side="right-start"],
+  &[data-side="right-end"] {
+    animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="bottom"],
+  &[data-side="bottom-start"],
+  &[data-side="bottom-end"] {
+    animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="left"],
+  &[data-side="left-start"],
+  &[data-side="left-end"] {
+    animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}