@crystallize/design-system 1.11.7 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.7",
+  "version": "1.13.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -58,39 +58,38 @@
     "@faker-js/faker": "7.6.0",
     "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
     "@mdx-js/react": "^2.2.1",
-    "@storybook/addon-actions": "7.0.0-beta.14",
-    "@storybook/addon-backgrounds": "7.0.0-beta.14",
-    "@storybook/addon-docs": "7.0.0-beta.14",
-    "@storybook/addon-essentials": "7.0.0-beta.14",
-    "@storybook/addon-highlight": "7.0.0-beta.14",
-    "@storybook/addon-interactions": "7.0.0-beta.14",
-    "@storybook/addon-links": "7.0.0-beta.14",
-    "@storybook/addon-measure": "7.0.0-beta.14",
-    "@storybook/addon-outline": "7.0.0-beta.14",
+    "@storybook/addon-actions": "7.0.7",
+    "@storybook/addon-backgrounds": "7.0.7",
+    "@storybook/addon-docs": "7.0.7",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-highlight": "7.0.7",
+    "@storybook/addon-interactions": "7.0.7",
+    "@storybook/addon-links": "7.0.7",
+    "@storybook/addon-measure": "7.0.7",
+    "@storybook/addon-outline": "7.0.7",
     "@storybook/addons": "^6.5.15",
-    "@storybook/react": "7.0.0-beta.14",
-    "@storybook/react-vite": "7.0.0-beta.14",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "7.0.0-beta.14",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@storybook/react": "7.0.7",
+    "@storybook/react-vite": "7.0.7",
+    "@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",
     "@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",
     "postcss": "^8.4.21",
-    "storybook": "7.0.0-beta.14",
+    "storybook": "7.0.7",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.1",
+    "typescript": "4.9.4",
+    "vite": "4.3.4",
+    "vitest": "0.30.1",
     "tsconfig": "0.0.0"
   },
   "keywords": [
@@ -116,7 +115,7 @@
     "build:storybook": "storybook build -s public",
     "build:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --minify",
     "build:tsup": "tsup src/index.ts --format esm,cjs --dts",
-    "build": "pnpm build:tw && pnpm build:tsup && pnpm build:storybook",
+    "build": "pnpm build:tw && pnpm build:tsup",
     "dev:tw": "tailwindcss --content ./src/**/*.tsx,!./src/**/*.stories.tsx -c ./tailwind.config.cjs -i src/index.css -o dist/index.css --watch & tsup src/index.ts --format esm --dts --watch",
     "dev:tsup": "tsup src/index.ts --format esm --dts --watch",
     "dev:storybook": "storybook dev -p 6006 --no-open -s public",

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/model/crystallize-to-lexical.ts

@@ -15,13 +15,12 @@ import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
 import { $createTableCellNode, $createTableNode, $createTableRowNode } from '@lexical/table';
 
 import type { CrystallizeRichTextNode, CrystallizeRichText } from '../types/crystallize-rich-text-types';
+import { parseInitialState } from './parse-initial-state';
 
 export function composeInitialState({ richText }: { richText: CrystallizeRichText }) {
   return function setLexicalState() {
     const root = $getRoot();
 
-    const richTextArray = Array.isArray(richText) ? richText : [richText];
-
     function handleNode({
       crystallizeContentNode,
       lexicalParent,
@@ -196,7 +195,9 @@ export function composeInitialState({ richText }: { richText: CrystallizeRichTex
       }
     }
 
-    richTextArray.forEach(crystallizeContentNode => handleNode({ crystallizeContentNode, lexicalParent: root }));
+    parseInitialState({ richText }).forEach(crystallizeContentNode =>
+      handleNode({ crystallizeContentNode, lexicalParent: root }),
+    );
   };
 }
 

package/src/rich-text-editor/model/parse-initial-state.test.ts

@@ -0,0 +1,48 @@
+/* eslint-disable no-console */
+
+import type { CrystallizeRichText } from '../rich-text-editor';
+import { parseInitialState } from './parse-initial-state';
+
+describe('RichTextEditor parseInitialState', () => {
+  it('ensures that the initial state is an array', async () => {
+    expect(
+      parseInitialState({
+        richText: {
+          kind: 'block',
+          type: 'paragraph',
+          textContent: 'hello',
+        },
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        textContent: 'hello',
+      },
+    ]);
+  });
+
+  it('ensures that all root nodes are block elements', async () => {
+    expect(
+      parseInitialState({
+        richText: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        kind: 'block',
+        type: 'paragraph',
+        children: [
+          {
+            kind: 'inline',
+            textContent: 'hello',
+          },
+        ],
+      } as CrystallizeRichText,
+    ]);
+  });
+});

package/src/rich-text-editor/model/parse-initial-state.ts

@@ -0,0 +1,20 @@
+import type { CrystallizeRichText, CrystallizeRichTextNode } from '../types/crystallize-rich-text-types';
+
+export function parseInitialState({ richText }: { richText: CrystallizeRichText }): CrystallizeRichTextNode[] {
+  let richTextArray = Array.isArray(richText) ? richText : [richText];
+
+  // Ensure all root items are block elements
+  richTextArray = richTextArray.map(rootNode => {
+    if (!rootNode.kind || rootNode.kind === 'inline') {
+      return {
+        type: 'paragraph',
+        kind: 'block',
+        children: [rootNode],
+      };
+    }
+
+    return rootNode;
+  });
+
+  return richTextArray;
+}

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;