polpo 0.1.13 → 0.1.16

package/src/components/tabs/tabs.styles.css

@@ -0,0 +1,164 @@
+@reference "polpo-tailwind-config/styles";
+
+.tab {
+    cursor: pointer;
+    user-select: none;
+    transition: all 300ms ease;
+}
+
+.tab-list {
+    --color: var(--color-gray-900);
+    --color-contrast: var(--color-gray-50);
+    --inner-radius: 0;
+    --outer-radius: 0;
+
+    display: grid;
+    grid-auto-flow: column;
+    gap: 1em;
+    align-items: center;
+    position: relative;
+    @apply text-label;
+    border-radius: var(--outer-radius);
+
+    .tab, .tabs-selector {
+        border-radius: var(--inner-radius);
+    }
+
+    &.size-small {
+        @apply text-small;
+    }
+
+    &.size-medium {
+        @apply text-label;
+    }
+
+    &.size-large {
+        @apply text-body;
+    }
+
+    .tabs-selector {
+        position: absolute;
+        background: var(--color);
+        color: var(--color-contrast);
+        border-radius: 1.5em;
+
+        &.active {
+            transition: all 300ms ease;
+        }
+    }
+
+    .tab {
+        border-radius: 1.5em;
+        padding: 0.5em 1em;
+        z-index: 1;
+        text-align: center;
+
+        &.is-open {
+            color: var(--color-contrast);
+        }
+
+        &:not(.is-open):hover {
+            color: var(--color-gray-900);
+        }
+    }
+
+    &.radius-none {
+        --outer-radius: 0;
+        --inner-radius:  0;
+    }
+
+    &.radius-small {
+        --outer-radius: 0.5em;
+        --inner-radius:  0.5em;
+    }
+
+    &.radius-medium {
+        --outer-radius: 1em;
+        --inner-radius:  0.8em;
+    }
+
+    &.radius-large {
+        --outer-radius: 1.5em;
+        --inner-radius:  1.3em;
+    }
+
+    &.radius-full {
+        --outer-radius: 1.8em;
+        --inner-radius:  1.6em;
+    }
+
+    &.vertical-direction {
+        grid-auto-flow: row;
+        align-items: unset;
+        align-content: start;
+    }
+
+    &.variant-solid {
+        background: var(--color-background-paper);
+        color: var(--color-foreground);
+        padding: 0.5em;
+    }
+
+    &.variant-ghost {
+        border: 1px solid var(--color);
+        padding: 0.5em;
+    }
+
+    &.variant-flat {
+    }
+
+    &.variant-line {
+        border-radius: 0;
+
+        &:not(.vertical-direction) {
+            border-bottom: 2px solid var(--color-border);
+        }
+
+        .tabs-selector {
+            border-radius: 0;
+        }
+
+        .tab {
+            border-radius: 0;
+
+            &.is-open {
+                color: var(--color);
+            }
+        }
+    }
+
+    &.color-primary {
+        --color: var(--color-primary-500);
+        --color-contrast: var(--color-primary-50);
+    }
+
+    &.color-secondary {
+        --color: var(--color-secondary-500);
+        --color-contrast: var(--color-secondary-50);
+    }
+
+    &.color-tertiary {
+        --color: var(--color-tertiary-500);
+        --color-contrast: var(--color-tertiary-50);
+    }
+
+    &.color-active {
+        --color: var(--color-active-500);
+        --color-contrast: var(--color-active-50);
+    }
+
+    &.color-warning {
+        --color: var(--color-warning-500);
+        --color-contrast: var(--color-warning-50);
+    }
+
+    &.color-alert {
+        --color: var(--color-alert-500);
+        --color-contrast: var(--color-alert-50);
+    }
+
+    &.color-info {
+        --color: var(--color-info-500);
+        --color-contrast: var(--color-info-50);
+    }
+}

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,119 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { useClassNames } from '../../hooks';
+
+import { TabsList as TabListComponent, TabListProps } from './tabs-list';
+import './tabs.styles.css';
+
+type TabsContextState = {
+  openTab: string;
+  changeOpenTab: (id: string) => void;
+};
+
+const TabsContext = createContext<TabsContextState | null>(null);
+
+const useTab = (id: string): [boolean, () => void] => {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error('You cant use this component out off an Tabs component');
+  }
+
+  const { openTab, changeOpenTab } = context;
+
+  return [openTab === id, () => changeOpenTab(id)];
+};
+
+const useTabsContext = (): TabsContextState => {
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error('You cant use this component out off an Tabs component');
+  }
+
+  return context;
+};
+
+type TabsProps = {
+  children: React.ReactNode;
+  defaultOpenTab: string;
+  onChange?: (id: string) => void;
+};
+
+export const Tabs = ({ children, defaultOpenTab, onChange }: TabsProps) => {
+  const [openTab, setOpenTab] = useState(defaultOpenTab);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(openTab);
+    }
+  }, [openTab, onChange]);
+
+  return (
+    <TabsContext.Provider
+      value={{
+        openTab,
+        changeOpenTab: id => setOpenTab(id),
+      }}
+    >
+      {children}
+    </TabsContext.Provider>
+  );
+};
+
+type TabProps = {
+  id: string;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+  ref?: React.RefObject<HTMLSpanElement | null>;
+};
+
+const Tab = ({ id, children, className = '', style = {}, onClick, ref }: TabProps) => {
+  const [isOpen, openTab] = useTab(id);
+  const tabClassNames = useClassNames({
+    tab: true,
+    [className]: !!className,
+    'is-open': isOpen,
+  });
+
+  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    openTab();
+
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <span className={tabClassNames} style={style} onClick={handleClick} ref={ref}>
+      {children}
+    </span>
+  );
+};
+
+type TabPanelProps = {
+  id: string;
+  children: React.ReactNode;
+};
+
+const TabPanel = ({ id, children }: TabPanelProps) => {
+  const [isOpen] = useTab(id);
+
+  return isOpen ? children : null;
+};
+
+const TabList = ({ children, ...props }: Omit<TabListProps, 'openTab'>) => {
+  const { openTab } = useTabsContext();
+
+  return (
+    <TabListComponent {...props} openTab={openTab}>
+      {children}
+    </TabListComponent>
+  );
+};
+
+Tabs.Tab = Tab;
+Tabs.TabPanel = TabPanel;
+Tabs.TabList = TabList;

package/src/components/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag.component';

package/src/components/tag/tag.component.tsx

@@ -0,0 +1,34 @@
+import { useClassNames } from '../../hooks';
+
+import './tag.styles.css';
+
+export enum TagRounded {
+  NONE = 'none',
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  FULL = 'full',
+}
+
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+  selected?: boolean;
+  rounded?: `${TagRounded}`;
+  noWrap?: boolean;
+  ref?: React.Ref<HTMLElement>;
+}
+
+export const Tag = ({ children, rounded = TagRounded.MEDIUM, selected = false, noWrap = false, ref }: TagProps) => {
+  const className = useClassNames({
+    tag: true,
+    [`rounded-${rounded}`]: Boolean(rounded),
+    'is-selected': selected,
+    'no-wrap': noWrap,
+  });
+
+  return (
+    <span className={className} ref={ref}>
+      {children}
+    </span>
+  );
+};

package/src/components/tag/tag.styles.css

@@ -0,0 +1,50 @@
+@reference "polpo-tailwind-config/styles";
+
+.tag {
+    --background: attr(data-background, var(--color-primary-500));
+    --text: attr(data-text, var(--color-primary-50));
+    --background-selected: attr(data-background-selected, var(--color-primary-700));
+    --text-selected: attr(data-text-selected, var(--color-primary-50));
+
+    padding: 0.4em 0.8em;
+    border-radius: 0.3em;
+    border: 1px solid;
+    background: var(--background);
+    color: var(--text);
+    transition: all 300ms ease;
+    display: inline-block;
+    @apply text-label;
+    user-select: none;
+
+    &.no-wrap {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.rounded-none {
+        border-radius: 0;
+    }
+
+    &.rounded-small {
+        border-radius: 0.25em;
+    }
+
+    &.rounded-medium {
+        border-radius: 0.5em;
+    }
+
+    &.rounded-large {
+        border-radius: 1em;
+    }
+
+    &.rounded-full {
+        border-radius: 100rem;
+    }
+
+    &:hover,
+    &.is-selected {
+        background: var(--background-selected);
+        color: var(--text-selected);
+    }
+}

package/src/components/tooltips/click-to-copy/click-to-copy.component.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+import { Tooltip, TooltipProps } from '../tooltip';
+
+type ClickToCopyProps = {
+  children?: React.ReactNode;
+  position?: TooltipProps['position'];
+  offset?: TooltipProps['offset'];
+  value: string;
+  tooltipText: string;
+  tooltipCopiedText?: string;
+  copiedTextTimeout?: number;
+};
+
+export const ClickToCopy = ({
+  children,
+  value,
+  position,
+  offset,
+  tooltipText,
+  tooltipCopiedText,
+  copiedTextTimeout = 500,
+}: ClickToCopyProps) => {
+  const [justCopied, setJustCopied] = useState(false);
+
+  const handleCopy = () => {
+    setJustCopied(true);
+    navigator.clipboard.writeText(value);
+    setTimeout(() => setJustCopied(false), copiedTextTimeout);
+  };
+
+  return (
+    <Tooltip
+      content={justCopied && tooltipCopiedText ? tooltipCopiedText : tooltipText}
+      position={position}
+      offset={offset}
+    >
+      <span onClick={handleCopy}>{children}</span>
+    </Tooltip>
+  );
+};

package/src/components/tooltips/click-to-copy/index.ts

@@ -0,0 +1 @@
+export * from './click-to-copy.component';

package/src/components/tooltips/index.ts

@@ -0,0 +1,2 @@
+export * from './click-to-copy';
+export * from './tooltip';

package/src/components/tooltips/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip.component';

package/src/components/tooltips/tooltip/tooltip.component.tsx

@@ -0,0 +1,64 @@
+import React, { cloneElement } from 'react';
+
+import { PositionContainer } from '../../../helpers';
+import { useClassNames, useEventListener, useModal } from '../../../hooks';
+import { Modal } from '../../modals';
+
+import './tooltip.styles.css';
+
+export type TooltipProps = {
+  position?:
+    | `${PositionContainer.TOP}`
+    | `${PositionContainer.LEFT}`
+    | `${PositionContainer.RIGHT}`
+    | `${PositionContainer.BOTTOM}`;
+  offset?: number | `${number}`;
+  disabled?: boolean;
+  children: React.ReactElement<{
+    ref: React.RefObject<HTMLElement | null>;
+  }>;
+  content: React.ReactNode;
+};
+
+export const Tooltip = ({
+  position = PositionContainer.TOP,
+  children,
+  content,
+  offset = 5,
+  disabled = false,
+}: TooltipProps) => {
+  const { containerRef, openModal, closeModal, isOpen } = useModal();
+
+  const classNames = useClassNames({
+    tooltip: true,
+    [position]: true,
+  });
+
+  useEventListener('mouseenter', () => openModal(), containerRef);
+  useEventListener('mouseleave', () => closeModal(), containerRef);
+
+  if (disabled) return children;
+
+  return (
+    <>
+      {cloneElement(children, { ref: containerRef })}
+
+      <Modal
+        backdrop='none'
+        id='tooltip'
+        isOpen={isOpen}
+        containerRef={containerRef}
+        onClose={closeModal}
+        position={position}
+        className={classNames}
+        closeOnClickOutside={false}
+        offset={6 + +offset}
+        windowOffset={10}
+        transitionDuration={100}
+        closeAnimationClassName='close-animation'
+      >
+        <span className='tooltip-content'>{content}</span>
+      </Modal>
+    </>
+  );
+};

package/src/components/tooltips/tooltip/tooltip.styles.css

@@ -0,0 +1,91 @@
+@reference "polpo-tailwind-config/styles";
+
+.tooltip {
+    color: var(--color-foreground);
+    @apply text-small;
+    line-height: 1em;
+    border-radius: 5px;
+    padding: 0.5em 1em;
+    display: block;
+    border: 1px solid;
+    pointer-events: none;
+
+    &::before {
+        content: '';
+        display: block;
+        background: var(--color-background-paper);
+        position: absolute;
+        z-index: 1;
+        width: 10px;
+        height: 10px;
+        border-left: 1px solid transparent;
+        border-top: 1px solid transparent;
+        border-right: 1px solid var(--color-foreground);
+        border-bottom: 1px solid var(--color-foreground);
+        border-radius: 0 0 3px 0;
+    }
+
+    &.left {
+        animation: fadeInRight 250ms ease-out;
+
+        &.close-animation {
+            animation: fadeOutLeft 250ms ease-out;
+            transform: translateX(-10px);
+            opacity: 0;
+        }
+
+        &::before {
+            top: 50%;
+            left: 100%;
+            transform: translate(-50%, -50%) rotate(-45deg);
+        }
+    }
+
+    &.right {
+        animation: fadeInLeft 250ms ease-out;
+
+        &.close-animation {
+            animation: fadeOutRight 250ms ease-out;
+            transform: translateX(10px);
+            opacity: 0;
+        }
+
+        &::before {
+            top: 50%;
+            right: 100%;
+            transform: translate(50%, -50%) rotate(135deg);
+        }
+    }
+
+    &.top {
+        animation: fadeInDown 250ms ease-out;
+
+        &.close-animation {
+            animation: fadeOutUp 250ms ease-out;
+            transform: translateY(-10px);
+            opacity: 0;
+        }
+
+        &::before {
+            top: 100%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+    }
+
+    &.bottom {
+        animation: fadeInUp 250ms ease-out;
+
+        &.close-animation {
+            animation: fadeOutDown 250ms ease-out;
+            transform: translateY(10px);
+            opacity: 0;
+        }
+
+        &::before {
+            left: 50%;
+            bottom: 100%;
+            transform: translate(-50%, 50%) rotate(-135deg);
+        }
+    }
+}

package/src/components/typography/index.ts

@@ -0,0 +1 @@
+export * from './typography.component';

package/src/components/typography/typography.component.tsx

@@ -0,0 +1,81 @@
+import React, { createElement, useMemo } from 'react';
+
+import { useClassNames } from '../../hooks';
+
+import {
+  TypographyColors,
+  TypographyVariant,
+  TypographyVariantsClassNames,
+  TypographyVariantsElements,
+  TypographyWeight,
+} from './typography.constants';
+import './typography.styles.css';
+
+export type TypographyProps = React.HTMLAttributes<HTMLElement | HTMLLabelElement> & {
+  variant?: `${TypographyVariant}`;
+  nowrap?: boolean | number;
+  as?: React.HTMLElementType;
+  weight?: `${TypographyWeight}`;
+  children: React.ReactNode;
+  noPadding?: boolean;
+  htmlFor?: string;
+  align?: React.CSSProperties['textAlign'];
+  family?: 'primary' | 'code';
+  recommendedWidth?: boolean;
+  color?: `${TypographyColors}`;
+  ref?: React.RefObject<HTMLElement>;
+  style?: React.CSSProperties;
+};
+
+export const Typography = ({
+  variant = TypographyVariant.BODY,
+  nowrap = false,
+  className: customClassname = '',
+  style = {},
+  children,
+  as,
+  weight,
+  family = 'primary',
+  noPadding = false,
+  align,
+  color,
+  htmlFor,
+  recommendedWidth = false,
+  ...props
+}: TypographyProps) => {
+  const className = useClassNames({
+    typography: true,
+    [TypographyVariantsClassNames[variant]]: TypographyVariantsClassNames[variant] !== undefined,
+    [customClassname]: !!customClassname,
+    [weight ?? '']: !!weight,
+    [color ?? '']: Boolean(color),
+    'no-padding': noPadding,
+    'code-family': family === 'code',
+    'recommended-width': recommendedWidth,
+    'nowrap-max-lines': typeof nowrap === 'number',
+    'nowrap-max-lines-2': nowrap === 2,
+    'nowrap-max-lines-3': nowrap === 3,
+    'nowrap-max-lines-4': nowrap === 4,
+    'nowrap-max-lines-5': nowrap === 5,
+    nowrap: nowrap === true,
+  });
+
+  const component = useMemo<React.HTMLElementType>(
+    () => TypographyVariantsElements[variant] ?? TypographyVariantsElements[TypographyVariant.BODY],
+    [variant],
+  );
+
+  return createElement(
+    as ?? component,
+    {
+      ...props,
+      className,
+      htmlFor,
+      style: {
+        textAlign: align,
+        ...style,
+      },
+    },
+    children,
+  );
+};