@infonomic/uikit 2.0.0 → 2.1.1

package/src/components/button/control-buttons.module.css

@@ -0,0 +1,144 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+
+  .stop-button,
+  .play-button,
+  .directional-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border-style: none;
+    border-radius: 100%;
+    padding: 0;
+    margin: 0;
+    outline: none;
+    color: white;
+    background-color: var(--primary-500);
+    transition-property: all, color;
+    transition-duration: 0.3s, 1ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1), ease;
+    transition-delay: 0s, 0s;
+    cursor: pointer;
+  }
+
+  .directional-button span {
+    width: 40%;
+    padding-bottom: 3px;
+  }
+
+  .play-button span {
+    width: 80%;
+    height: 80%;
+  }
+
+  .stop-button span {
+    width: 50%;
+    height: 50%;
+  }
+
+  .directional-button span .icon path {
+    stroke: none;
+    fill: white;
+  }
+
+  .stop-button:hover,
+  .play-button:hover,
+  .stop-button:focus,
+  .play-button:focus,
+  .directional-button:hover,
+  .directional-button:focus {
+    color: white;
+    background-color: var(--primary-600);
+    transform: translateY(-5px);
+  }
+
+  /* Sizes */
+  .xs {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+  }
+
+  .sm {
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    min-height: 30px;
+  }
+
+  .md {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .lg {
+    width: 50px;
+    min-width: 50px;
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .xl {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  /* Up is default so no need to rotate */
+  .up:hover,
+  .up:focus {
+    transform: translateY(-5px);
+  }
+
+  .down span,
+  .down span {
+    transform: rotate(180deg);
+  }
+
+  .down:hover,
+  .down:focus {
+    transform: translateY(5px);
+  }
+
+  .left span,
+  .left span {
+    transform: rotate(-90deg);
+  }
+
+  .left:hover,
+  .left:focus {
+    transform: translateX(-5px);
+  }
+
+  .right span,
+  .right span {
+    transform: rotate(90deg);
+  }
+
+  .right:hover,
+  .right:focus {
+    transform: translateX(5px);
+  }
+
+  :global(.dark) .play-button,
+  :global(.dark) .stop-button,
+  :global(.dark) .directional-button {
+    background-color: var(--primary-500);
+  }
+
+  :global(.dark) .play-button:hover,
+  :global(.dark) .stop-button:hover,
+  :global(.dark) .play-button:focus,
+  :global(.dark) .stop-button:focus,
+  :global(.dark) .directional-button:hover,
+  :global(.dark) .directional-button:focus {
+    color: white;
+    background-color: var(--primary-600);
+  }
+}

package/src/components/button/control-buttons.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { DirectionalButton, PlayButton, StopButton } from './control-buttons.js'
+
+type Story = StoryObj<typeof DirectionalButton>
+
+const ControlsDemo = (): React.JSX.Element => {
+  return (
+    <>
+      <div className="ml-12 mb-6">
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Small</h2>
+        <div className="flex items-center gap-4 mb-6">
+          <DirectionalButton direction="left" size="sm" />
+          <StopButton size="sm" />
+          <PlayButton size="sm" />
+          <DirectionalButton direction="right" size="sm" />
+          <DirectionalButton direction="up" size="sm" />
+          <DirectionalButton direction="down" size="sm" />
+        </div>
+      </div>
+      <div className="ml-12 mb-6">
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Medium</h2>
+        <div className="flex items-center gap-4 mb-6">
+          <DirectionalButton direction="left" size="md" />
+          <StopButton size="md" />
+          <PlayButton size="md" />
+          <DirectionalButton direction="right" size="md" />
+          <DirectionalButton direction="up" size="md" />
+          <DirectionalButton direction="down" size="md" />
+        </div>
+      </div>
+      <div className="ml-12 mb-6">
+        <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Large</h2>
+        <div className="flex items-center gap-4 mb-6">
+          <DirectionalButton direction="left" size="lg" />
+          <StopButton size="lg" />
+          <PlayButton size="lg" />
+          <DirectionalButton direction="right" size="lg" />
+          <DirectionalButton direction="up" size="lg" />
+          <DirectionalButton direction="down" size="lg" />
+        </div>
+      </div>
+    </>
+  )
+}
+
+export const Controls: Story = {
+  render: () => <ControlsDemo />,
+}
+
+const meta: Meta<typeof DirectionalButton> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Button',
+  component: ControlsDemo,
+}
+
+export default meta

package/src/components/button/control-buttons.tsx

@@ -0,0 +1,137 @@
+'use client'
+import cx from 'classnames'
+import type React from 'react'
+import type { Size } from './@types/button.js'
+import styles from './control-buttons.module.css'
+
+type ButtonType = React.JSX.IntrinsicElements['button']
+
+interface ControlButtonProps extends ButtonType {
+  size?: Size
+  className?: string
+  onClick?: () => void
+  ref?: React.RefObject<HTMLButtonElement>
+}
+
+interface DirectionalButtonProps extends ControlButtonProps {
+  direction: 'up' | 'down' | 'left' | 'right'
+}
+
+export const DirectionalButton = ({
+  size = 'md',
+  direction,
+  className,
+  onClick,
+  ref,
+  ...rest
+}: DirectionalButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label={direction}
+      className={cx(
+        'control-button',
+        direction,
+        size,
+        styles['directional-button'],
+        styles[direction],
+        styles[size],
+        className
+      )}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 51 32">
+          <path
+            fill="currentColor"
+            d="M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export const PlayButton = ({
+  size = 'md',
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ControlButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label="play"
+      className={cx('control-button', 'play', size, styles['play-button'], styles[size], className)}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 32 32">
+          <path
+            d="M12 8L26 16L12 24V8Z"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}
+
+export const StopButton = ({
+  size = 'md',
+  className,
+  onClick,
+  ref,
+  ...rest
+}: ControlButtonProps) => {
+  const handleClick = (): void => {
+    if (onClick != null) {
+      onClick()
+    }
+  }
+
+  return (
+    <button
+      ref={ref}
+      {...rest}
+      onClick={handleClick}
+      type="button"
+      aria-label="stop"
+      className={cx('control-button', 'stop', size, styles['stop-button'], styles[size], className)}
+    >
+      <span>
+        <svg className="icon" focusable="false" aria-hidden="true" viewBox="0 0 32 32">
+          <rect
+            x="4"
+            y="4"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+          />
+        </svg>
+      </span>
+    </button>
+  )
+}

package/src/components/button/copy-button.module.css

@@ -0,0 +1,31 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .copy-button-container {
+    display: inline-block;
+  }
+
+  .copy-button {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+  }
+
+  .copy-button-foreground {
+    fill: var(--gray-700);
+  }
+
+  .copy-button-foreground-reversed {
+    fill: var(--gray-200);
+  }
+
+  .dark {
+    .copy-button-foreground {
+      fill: var(--gray-200);
+    }
+
+    .copy-button-foreground-reversed {
+      fill: var(--gray-700);
+    }
+  }
+}

package/src/components/button/copy-button.stories.tsx

@@ -0,0 +1,50 @@
+import type React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { intent } from '../@types/shared.js'
+import { variant } from './@types/button.js'
+import { CopyButton } from './copy-button.js'
+
+type Story = StoryObj<typeof CopyButton>
+
+const CopyDemo = (): React.JSX.Element => {
+  return (
+    <div style={{ marginLeft: '12rem', marginTop: '4rem' }}>
+      {intent.map((i) => {
+        return (
+          <div
+            key={i}
+            style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}
+          >
+            {variant.map((v) => {
+              return (
+                <CopyButton
+                  text="I should be in your clipboard."
+                  key={`${i}-${v}`}
+                  intent={i}
+                  variant={v}
+                />
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export const Copy: Story = {
+  render: () => <CopyDemo />,
+}
+
+const meta: Meta<typeof CopyButton> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Button',
+  component: CopyButton,
+}
+
+export default meta

package/src/components/button/copy-button.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import cx from 'classnames'
+import type React from 'react'
+import { useEffect, useState } from 'react'
+
+import { CopyIcon } from '../../icons'
+import { Tooltip } from '../tooltip/tooltip.js'
+import type { ButtonProps } from './button.js'
+import { Button } from './button.js'
+
+import styles from './copy-button.module.css'
+
+interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
+  text: string
+  hoverText?: string
+  copiedText?: string
+  containerClassName?: string
+  svgClassName?: string
+}
+
+export function CopyButton({
+  text,
+  hoverText = 'Copy',
+  copiedText = 'Copied!',
+  variant,
+  size = 'sm',
+  intent,
+  fullWidth,
+  ripple,
+  className,
+  containerClassName,
+  svgClassName,
+  ...rest
+}: CopyButtonProps): React.JSX.Element {
+  const [copied, setCopied] = useState<boolean | undefined>(undefined)
+
+  const handleCopied = (): void => {
+    // TODO: Permissions check?
+    if (navigator.clipboard != null && navigator.permissions != null) {
+      void navigator.clipboard.writeText(text).then(() => {
+        setCopied(true)
+      })
+    } else if (document.queryCommandSupported('copy')) {
+      const element = document.createElement('textarea')
+      element.value = text
+      document.body.appendChild(element)
+      element.select()
+      document.execCommand('copy')
+      document.body.removeChild(element)
+      setCopied(true)
+    }
+  }
+
+  useEffect(() => {
+    if (copied === true) {
+      setTimeout(() => {
+        setCopied(undefined)
+      }, 900)
+    }
+  })
+
+  const svgColor =
+    intent === 'noeffect' ||
+    intent === 'secondary' ||
+    intent === 'warning' ||
+    variant === 'outlined' ||
+    variant === 'text'
+      ? styles['copy-button-foreground']
+      : styles['copy-button-foreground-reversed']
+
+  const tooltipText = copied != null && copied ? copiedText : hoverText
+
+  return (
+    <div className={cx(styles['copy-button-container'], containerClassName)}>
+      <Tooltip side="top" sideOffset={2} text={tooltipText} open={copied}>
+        <Button
+          variant={variant}
+          size={size}
+          intent={intent}
+          fullWidth={fullWidth}
+          ripple={ripple}
+          className={cx('copy-button', variant, size, intent, styles['copy-button'], className)}
+          onClick={handleCopied}
+          {...rest}
+        >
+          <CopyIcon svgClassName={cx(svgColor, svgClassName)} width="18px" height="18px" />
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}

package/src/components/button/icon-button.astro

@@ -0,0 +1,47 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/button.js'
+import Button from './button.astro'
+
+import styles from './button.module.css'
+
+interface Props extends HTMLAttributes<'button'>, Omit<HTMLAttributes<'a'>, 'type'> {
+  variant?: Variant
+  size?: Size
+  type?: 'submit' | 'reset' | 'button'
+  intent?: Intent
+  fullWidth?: boolean
+  ripple?: boolean
+  class?: string
+  as?: 'button' | 'a'
+  href?: string
+  square?: boolean
+  round?: boolean
+}
+
+const {
+  square = false,
+  round = true,
+  variant,
+  size,
+  type,
+  intent,
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<Button
+  class:list={[
+    'icon-button',
+    variant,
+    size,
+    intent,
+    { [styles.square]: square },
+    { [styles.round]: !square && round },
+    className
+  ]}
+  {...rest}
+>
+  <slot />
+</Button>

package/src/components/button/icon-button.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import cx from 'classnames'
+import type React from 'react'
+import { Button } from './button'
+import type { ButtonProps } from './button.js'
+
+import styles from './button.module.css'
+
+type IconButtonProps<C extends React.ElementType = 'button'> = ButtonProps<C> & {
+  square?: boolean
+  round?: boolean
+}
+
+export const IconButton = <C extends React.ElementType = 'button'>({
+  square = false,
+  round = true,
+  variant,
+  size = 'sm',
+  intent,
+  className,
+  children,
+  ...rest
+}: IconButtonProps<C>) => {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      intent={intent}
+      className={cx(
+        'icon-button',
+        variant,
+        size,
+        intent,
+        { [styles.square]: square },
+        { [styles.round]: !square && round },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/button/index.ts

@@ -0,0 +1,5 @@
+export * from './button'
+export * from './icon-button'
+export * from './copy-button'
+export * from './control-buttons'
+export * from './button-group'