⚠ This page is served via a proxy. Original site: https://github.com
This service does not collect credentials or authentication data.
Skip to content

Re-add exports of primitives #547

@punkpeye

Description

@punkpeye

Referring to the new major release https://park-ui.com/changelog

It looks like the new version no longer exports the building blocks of components.

Example, this is how I used to use Tooltip:

import { Tooltip } from '#app/components/ui/tooltip.tsx';
import { cva } from '#app/styled-system/css/index.js';
import { captureException } from '#app/utilities/sentry/captureException.ts';
import { Portal } from '@ark-ui/react';
import { CheckIcon, ClipboardIcon } from 'lucide-react';
import { useState } from 'react';

const copyButton = cva({
  base: {
    _focus: {
      outline: '1px solid #00d992',
    },
    _hover: {
      background: '#161f21',
      color: '#fff',
    },
    alignItems: 'center',
    background: '#161f21a6',
    borderRadius: '4px',
    cursor: 'pointer',
    display: 'flex',
    height: '32px',
    justifyContent: 'center',
    padding: '8px',
    width: '32px',
  },
  variants: {
    disabled: {
      true: {
        cursor: 'default',
        opacity: 0.5,
      },
    },
  },
});

export const CopyButton = ({ content }: { readonly content: string }) => {
  const [copied, setCopied] = useState(false);

  const copyToClipboard = async (text: string) => {
    try {
      await navigator.clipboard.writeText(content);

      setCopied(true);

      setTimeout(() => {
        setCopied(false);
      }, 1_000);
    } catch (error) {
      captureException({
        error,
        extra: {
          text,
        },
        message: 'could not copy text to clipboard',
      });
    }
  };

  return (
    <Tooltip.Root
      lazyMount
      openDelay={100}
    >
      <Tooltip.Trigger asChild>
        <button
          className={copyButton({
            disabled: copied,
          })}
          disabled={copied}
          onClick={() => {
            if (!copied) {
              copyToClipboard(content).catch((error) => {
                captureException({
                  error,
                  extra: {
                    text: content,
                  },
                  message: 'could not copy text to clipboard',
                });
              });
            }
          }}
          title="Copy"
          type="button"
        >
          {copied ? <CheckIcon size={14} /> : <ClipboardIcon size={14} />}
        </button>
      </Tooltip.Trigger>
      <Portal>
        <Tooltip.Positioner>
          <Tooltip.Arrow>
            <Tooltip.ArrowTip />
          </Tooltip.Arrow>
          <Tooltip.Content>Copy</Tooltip.Content>
        </Tooltip.Positioner>
      </Portal>
    </Tooltip.Root>
  );
};

Whereas now we are forced to use the abstracted https://park-ui.com/docs/components/tooltip

While the new version is nice for simple use cases, it makes it unusable for more complex applications.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions