@crystallize/design-system 1.12.0 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -70,15 +70,14 @@
     "@storybook/addons": "^6.5.15",
     "@storybook/react": "7.0.7",
     "@storybook/react-vite": "7.0.7",
-    "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "7.0.7",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/prettier": "2.7.2",
     "@types/react": "17.0.1",
     "@types/react-dom": "17.0.1",
-    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/testing-library__jest-dom": "5.14.5",
     "@vitejs/plugin-react": "^3.0.1",
     "concurrently": "^7.6.0",
     "hex-rgb": "4.3.0",
@@ -88,7 +87,7 @@
     "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
+    "typescript": "4.9.4",
     "vite": "4.3.4",
     "vitest": "0.30.1",
     "tsconfig": "0.0.0"

package/src/button/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { Button } from '.';
 
 const meta: Meta<typeof Button> = {

package/src/card/card.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { Card } from '.';
 
 const meta: Meta<typeof Card> = {

package/src/checkbox/checkbox.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Label } from '../label';
 import { Checkbox } from './checkbox';

package/src/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { ComponentProps, forwardRef } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 
 import './checkbox.css';
 

package/src/colors/Colors.stories.tsx

@@ -1,10 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { cx } from 'class-variance-authority';
 import { useDarkMode } from 'storybook-dark-mode';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import rawColors from './colors.json';
-import colorPairing from './color-pairing.json';
 import colorDefaults from './color-defaults.json';
+import colorPairing from './color-pairing.json';
+import rawColors from './colors.json';
 import type { Color, ColorName, Colors } from './types';
 
 const meta: Meta = {

package/src/dialog/config.tsx

@@ -1,6 +1,6 @@
 import { unmountComponentAtNode, render as DOMRender } from 'react-dom';
-import { ConfirmDialog } from './confirm-dialog';
 
+import { ConfirmDialog } from './confirm-dialog';
 import { destroyFns } from './destroyFns';
 import type { ConfigUpdate, DialogFuncProps } from './types';
 

package/src/dialog/index.tsx

@@ -1,7 +1,7 @@
+import { confirm, withWarning, withConfirm, withDialog, withError, withInfo } from './config';
 import { destroyFns } from './destroyFns';
 import { DialogBase } from './dialog';
 import type { DialogFuncProps } from './types';
-import { confirm, withWarning, withConfirm, withDialog, withError, withInfo } from './config';
 
 type DialogType = typeof DialogBase & DialogFuncProps;
 

package/src/dropdown-menu/dropdown-menu-item.tsx

@@ -1,6 +1,6 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { cx } from 'class-variance-authority';
 import type { ReactNode } from 'react';
+import { cx } from 'class-variance-authority';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
   children: ReactNode;

package/src/dropdown-menu/dropdown-menu-label.tsx

@@ -1,5 +1,5 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import type { ReactNode } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 type DropdownMenuLabelProps = {
   children: ReactNode;

package/src/icon-button/IconButton.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { IconButton } from '.';
 import { Card } from '../card';
 import { Icon } from '../iconography';

package/src/iconography/Icon.stories.tsx

@@ -1,4 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
+
 import { Icon } from '.';
 import { Card } from '../card';
 

package/src/inline-radio/inline-radio.stories.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { InlineRadio } from './inline-radio';
-import { Icon } from '../iconography';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Icon } from '../iconography';
+import { InlineRadio } from './inline-radio';
+
 const meta: Meta<typeof InlineRadio.Group> = {
   title: 'Components/InlineRadio',
   component: InlineRadio.Group,

package/src/inline-radio/inline-radio.tsx

@@ -1,6 +1,6 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { cx, cva, VariantProps } from 'class-variance-authority';
 import type { ComponentProps } from 'react';
+import { cx, cva, VariantProps } from 'class-variance-authority';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
 import './inline-radio.css';
 

package/src/input/input.tsx

@@ -1,5 +1,5 @@
-import { cva, VariantProps } from 'class-variance-authority';
 import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
 
 import './input.css';
 

package/src/input-with-label/input-with-label.tsx

@@ -1,9 +1,9 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, forwardRef, ReactNode } from 'react';
 import { cva, cx, VariantProps } from 'class-variance-authority';
 
+import { Triangle } from '../iconography/triangle';
 import { Input } from '../input';
 import { Label } from '../label';
-import { Triangle } from '../iconography/triangle';
 
 const inputWithLabelStyles = cva(['c-input-with-label'], {
   variants: {

package/src/label/label.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { Label } from './label';
 
 const meta: Meta<typeof Label> = {

package/src/progress/Progress.stories.tsx

@@ -1,5 +1,6 @@
-import type { StoryObj, Meta } from '@storybook/react';
 import { useEffect, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
 import { Progress } from '.';
 
 const meta: Meta<typeof Progress> = {

package/src/progress/progress.tsx

@@ -1,5 +1,5 @@
-import * as ProgressPrimitives from '@radix-ui/react-progress';
 import { cx } from 'class-variance-authority';
+import * as ProgressPrimitives from '@radix-ui/react-progress';
 
 import './progress.css';
 

package/src/radio/radio.stories.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Radio } from './radio';
 import { Label } from '../label';
+import { Radio } from './radio';
 
 const meta: Meta<typeof Radio.Group> = {
   title: 'Components/Radio',

package/src/radio/radio.tsx

@@ -1,5 +1,5 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import type { ComponentProps } from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
 import './radio.css';
 

package/src/rich-text-editor/plugins/ActionsPlugin/index.css

@@ -0,0 +1,3 @@
+.c-rte-actions-plugin {
+  @apply z-50 flex items-center;
+}

package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx

@@ -38,8 +38,7 @@ export default function ActionsPlugin({
   const actionMenuAnchorRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={actionMenuAnchorRef} className="z-50 flex items-center ">
-      <div></div>
+    <div ref={actionMenuAnchorRef} className="c-rte-actions-plugin">
       <ActionMenu container={actionMenuAnchorRef.current}>
         {!prepend
           ? null

package/src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 import * as React from 'react';
+import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
 
 const URL_MATCHER =
   /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/CopyButton/index.tsx

@@ -57,8 +57,12 @@ export function CopyButton({ editor, getCodeDOMNode }: Props) {
   }
 
   return (
-    <button className="menu-item" onClick={handleClick} aria-label={tr('actionCopyCode')}>
-      {isCopyCompleted ? <i className="format success" /> : <i className="format copy" />}
+    <button className="c-rte-code-button" onClick={handleClick} aria-label={tr('actionCopyCode')}>
+      {isCopyCompleted ? (
+        <i className="c-rte-code-button__icon c-rte-icon-success" />
+      ) : (
+        <i className="c-rte-code-button__icon c-rte-icon-copy" />
+      )}
     </button>
   );
 }

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import './index.css';
+
 import * as React from 'react';
 import { useState } from 'react';
 import { $getNearestNodeFromDOMNode, LexicalEditor } from 'lexical';
@@ -98,7 +98,7 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
           /**
            * Remove EOF from prettier output. This is useful when
            * using prettier on files, but becomes weird when the code
-           * is embedded within a larger portion of text.
+           * is embedded within a larger portion of text (like we do)
            */
           parsed = parsed.replace(/[\r\n]+$/, '');
 
@@ -133,17 +133,21 @@ export function PrettierButton({ lang, editor, getCodeDOMNode }: Props) {
   }
 
   return (
-    <div className="prettier-wrapper">
+    <div className="c-rte-prettier-wrapper">
       <button
-        className="menu-item"
+        className="c-rte-code-button"
         onClick={handleClick}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         aria-label={tr('actionFormatCode')}
       >
-        {syntaxError ? <i className="format prettier-error" /> : <i className="format prettier" />}
+        {syntaxError ? (
+          <i className="c-rte-code-button__icon c-rte-icon-prettier-error" />
+        ) : (
+          <i className="c-rte-code-button__icon c-rte-icon-prettier" />
+        )}
       </button>
-      {tipsVisible ? <pre className="code-error-tips">{syntaxError}</pre> : null}
+      {tipsVisible ? <pre className="c-rte-code-error-tips">{syntaxError}</pre> : null}
     </div>
   );
 }

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css

@@ -1,4 +1,4 @@
-.code-action-menu-container {
+.c-rte-code-action-menu-container {
   height: 35.8px;
   font-size: 10px;
   color: rgba(0, 0, 0, 0.5);
@@ -9,11 +9,11 @@
   user-select: none;
 }
 
-.code-action-menu-container .code-highlight-language {
+.c-rte-code-highlight-language {
   margin-right: 4px;
 }
 
-.code-action-menu-container button.menu-item {
+.c-rte-code-button {
   border: 1px solid transparent;
   border-radius: 4px;
   padding: 4px;
@@ -24,23 +24,38 @@
   align-items: center;
   color: rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
-}
 
-.code-action-menu-container button.menu-item i.format {
-  height: 16px;
-  width: 16px;
-  opacity: 0.6;
-  display: flex;
-  color: rgba(0, 0, 0, 0.5);
-  background-size: contain;
+  &:hover {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    opacity: 0.9;
+  }
+
+  &:active {
+    background-color: rgba(223, 232, 250);
+    border: 1px solid rgba(0, 0, 0, 0.45);
+  }
+
+  &__icon {
+    height: 16px;
+    width: 16px;
+    opacity: 0.6;
+    display: flex;
+    color: rgba(0, 0, 0, 0.5);
+    background-size: contain;
+  }
 }
 
-.code-action-menu-container button.menu-item:hover {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  opacity: 0.9;
+.c-rte-prettier-wrapper {
+  position: relative;
 }
 
-.code-action-menu-container button.menu-item:active {
-  background-color: rgba(223, 232, 250);
-  border: 1px solid rgba(0, 0, 0, 0.45);
+.c-rte-code-error-tips {
+  padding: 5px;
+  border-radius: 4px;
+  color: #fff;
+  background: #222;
+  margin-top: 4px;
+  position: absolute;
+  top: 26px;
+  right: 0;
 }

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import './index.css';
 import { useEffect, useRef, useState } from 'react';
 import { $getNearestNodeFromDOMNode } from 'lexical';
 import { createPortal } from 'react-dom';
@@ -119,8 +118,8 @@ function CodeActionMenuContainer({ anchorElem }: { anchorElem: HTMLElement }): J
   return (
     <>
       {isShown ? (
-        <div className="code-action-menu-container" style={{ ...position }}>
-          <div className="code-highlight-language">{codeFriendlyName}</div>
+        <div className="c-rte-code-action-menu-container" style={{ ...position }}>
+          <div className="c-rte-code-highlight-language">{codeFriendlyName}</div>
           <CopyButton editor={editor} getCodeDOMNode={getCodeDOMNode} />
           {canBePrettier(normalizedLang) ? (
             <PrettierButton editor={editor} getCodeDOMNode={getCodeDOMNode} lang={normalizedLang} />
@@ -139,7 +138,7 @@ function getMouseInfo(event: MouseEvent): {
 
   if (target && target instanceof HTMLElement) {
     const codeDOMNode = target.closest<HTMLElement>('code.CrystallizeRTEditorTheme__code');
-    const isOutside = !(codeDOMNode || target.closest<HTMLElement>('div.code-action-menu-container'));
+    const isOutside = !(codeDOMNode || target.closest<HTMLElement>('div.c-rte-code-action-menu-container'));
 
     return { codeDOMNode, isOutside };
   } else {

package/src/rich-text-editor/plugins/DimensionsDetectorPlugin/index.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react';
+
+type Dimensions = {
+  isSmallWidth: boolean;
+  width: number;
+};
+
+type DimensionDetectorPluginProps = {
+  onChange: (p: Dimensions) => void;
+};
+
+export function DimensionDetectorPlugin({ onChange }: DimensionDetectorPluginProps) {
+  const [dimensions, setDimensions] = useState<Dimensions>();
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const el = ref.current;
+      const resizeObserver = new ResizeObserver(entries => {
+        const [first] = entries;
+        if (first) {
+          const [contentBox] = first.contentBoxSize;
+          if (contentBox) {
+            const width = contentBox.inlineSize;
+            setDimensions({
+              width,
+              /**
+               * 600 is (currently) the point before action button crashes with
+               * the rest of the toolbar buttons.
+               */
+              isSmallWidth: width < 600,
+            });
+          }
+        }
+      });
+      resizeObserver.observe(el);
+
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dimensions) {
+      onChange(dimensions);
+    }
+  }, [dimensions, onChange]);
+
+  return <div ref={ref} style={{ height: 1, marginTop: -1 }} />;
+}

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.css

@@ -1,4 +1,4 @@
-.draggable-block-menu {
+.c-rte-draggable-block-menu {
   border-radius: 4px;
   padding: 2px 1px;
   cursor: grab;
@@ -7,24 +7,24 @@
   left: 0;
   top: 0;
   will-change: transform;
-}
 
-.draggable-block-menu .icon {
-  width: 16px;
-  height: 16px;
-  opacity: 0.3;
-  background-image: url(../../images/icons/draggable-block-menu.svg);
-}
+  &:active {
+    cursor: grabbing;
+  }
 
-.draggable-block-menu:active {
-  cursor: grabbing;
-}
+  &:hover {
+    background-color: #efefef;
+  }
 
-.draggable-block-menu:hover {
-  background-color: #efefef;
+  &__icon {
+    width: 16px;
+    height: 16px;
+    opacity: 0.3;
+    background-image: url(../../images/icons/draggable-block-menu.svg);
+  }
 }
 
-.draggable-block-target-line {
+.c-rte-draggable-block-target-line {
   pointer-events: none;
   background: deepskyblue;
   height: 4px;

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import './index.css';
+
 import * as React from 'react';
 import { DragEvent as ReactDragEvent, useEffect, useRef, useState } from 'react';
 import {
@@ -323,15 +323,15 @@ function useDraggableBlockMenu(editor: LexicalEditor, anchorElem: HTMLElement, i
   return createPortal(
     <>
       <div
-        className="icon draggable-block-menu"
+        className="c-rte-draggable-block-menu"
         ref={menuRef}
         draggable={true}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
       >
-        <div className={isEditable ? 'icon' : ''} />
+        <div className={isEditable ? 'c-rte-draggable-block-menu__icon' : ''} />
       </div>
-      <div className="draggable-block-target-line" ref={targetLineRef} />
+      <div className="c-rte-draggable-block-target-line" ref={targetLineRef} />
     </>,
     anchorElem,
   );

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css

@@ -1,4 +1,4 @@
-.link-editor {
+.c-rte-link-editor {
   position: absolute;
   top: 0;
   left: 0;
@@ -11,30 +11,96 @@
   border-radius: 8px;
   transition: opacity 0.5s;
   will-change: transform;
+  @apply !rounded-lg border border-solid border-gray-100-800 !shadow-lg;
 }
 
-.link-editor .button {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  padding: 6px;
-  border-radius: 8px;
-  cursor: pointer;
-  margin: 0 2px;
+.c-rte-link-editor-link-input {
+  @apply my-2 flex max-w-full flex-nowrap items-center justify-between gap-4 border-gray px-6 py-2 text-sm text-s-blue-600-300;
+
+  a {
+    @apply block overflow-hidden text-ellipsis whitespace-nowrap text-s-blue-600-300 no-underline;
+
+    &:hover {
+      @apply underline;
+    }
+  }
+}
+
+.c-rte-link-editor-link-preview {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.c-rte-link-editor-input-group {
+  @apply border-0 border-b border-solid border-gray-100-800 px-3;
 }
 
-.link-editor .button.hovered {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  background-color: #eee;
+.c-rte-link-editor-button-wrap {
+  @apply flex justify-end px-6 py-2;
+}
+
+.c-rte-link-editor-preview-attrs {
+  @apply mt-1 flex gap-1;
+}
+
+.c-rte-link-editor-preview-attr {
+  @apply rounded-md bg-purple-50-900 px-1 py-0.5 text-[10px] text-gray-600-300;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+@keyframes c-rte-glimmer-animation {
+  0% {
+    background: #f9f9f9;
+  }
+  .50% {
+    background: #eeeeee;
+  }
+  .100% {
+    background: #f9f9f9;
+  }
+}
+
+.c-rte-link-preview {
+}
+
+.c-rte-link-preview-image-wrapper {
+  @apply bg-purple-50-900 text-center;
+}
+
+.c-rte-link-preview-image {
+  @apply m-auto block max-h-[250px] max-w-full;
+}
+
+.c-rte-link-preview-title {
+  @apply mx-6 mt-4 font-semibold leading-5 text-gray-700-200;
+}
+
+.c-rte-link-preview-description {
+  @apply mx-6 mb-4 mt-2 text-sm leading-5;
+}
+
+.c-rte-link-preview-glimmer {
+  background: #f9f9f9;
+  border-radius: 8px;
+  height: 18px;
+  margin-bottom: 8px;
+  margin-left: 12px;
+  margin-right: 12px;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-name: c-rte-glimmer-animation;
 }
 
-.link-editor .button i,
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  vertical-align: -0.25em;
+.c-rte-link-preview__replace-text-btn {
+  @apply mb-4 ml-5;
 }