format and merge

tokens-studio · Nov 27, 2024 · d518def · d518def
1 parent 4c3f557
commit d518def
Show file tree

Hide file tree

Showing 42 changed files with 1,795 additions and 1,853 deletions.
diff --git a/packages/graph-editor/src/components/DndList.tsx b/packages/graph-editor/src/components/DndList.tsx
@@ -25,21 +25,41 @@ interface ISortableContainer extends SortableContainerProps {
 
 export const DndTrigger: React.ComponentClass<ISortableHandleElement, unknown> =
   SortableHandle(
-    ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    ({
+      children,
+      className,
+    }: {
+      children: React.ReactNode;
+      className?: string;
+    }) => (
       <div className={`${styles.trigger} ${className || ''}`}>{children}</div>
     ),
   );
 
 export const DndItem: React.ComponentClass<ISortableItem, unknown> =
   SortableElement(
-    ({ children, className }: { children: React.ReactNode; className?: string }) => (
-      <div className={`${styles.item} ${className || ''}`}>{children}</div>
-    ),
+    ({
+      children,
+      className,
+    }: {
+      children: React.ReactNode;
+      className?: string;
+    }) => <div className={`${styles.item} ${className || ''}`}>{children}</div>,
   );
 
 export const DndList: React.ComponentClass<ISortableContainer, unknown> =
   SortableContainer(
-    ({ children, className }: { children: React.ReactNode; className?: string }) => {
-      return <div className={`${styles.container} ${className || ''}`}>{children}</div>;
+    ({
+      children,
+      className,
+    }: {
+      children: React.ReactNode;
+      className?: string;
+    }) => {
+      return (
+        <div className={`${styles.container} ${className || ''}`}>
+          {children}
+        </div>
+      );
     },
   );
diff --git a/packages/graph-editor/src/components/ErrorBoundaryContent.tsx b/packages/graph-editor/src/components/ErrorBoundaryContent.tsx
@@ -24,12 +24,18 @@ export const ErrorBoundaryContent: React.FunctionComponent = () => {
 
   return (
     <Stack
-      style={{ width: '100%', height: '100%', padding: 'var(--component-spacing-lg)' }}
+      style={{
+        width: '100%',
+        height: '100%',
+        padding: 'var(--component-spacing-lg)',
+      }}
       align="center"
       justify="center"
     >
       <Stack direction="column" gap={4} align="center" justify="center">
-        <Text style={{ font: 'var(--typography-body-xl)', textAlign: 'center' }}>
+        <Text
+          style={{ font: 'var(--typography-body-xl)', textAlign: 'center' }}
+        >
           Uh-oh, something went wrong!
         </Text>
         {graphRef ? (

diff --git a/packages/graph-editor/src/components/NodeHoverCard.tsx b/packages/graph-editor/src/components/NodeHoverCard.tsx
@@ -49,7 +49,11 @@ const NodeHoverCard = ({
     >
       <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
       <HoverCard.Portal>
-        <HoverCard.Content className={styles.hoverCardContent} side="right" sideOffset={5}>
+        <HoverCard.Content
+          className={styles.hoverCardContent}
+          side="right"
+          sideOffset={5}
+        >
           <Stack direction="column" gap={3}>
             <Stack direction="row" gap={2} align="center">
               {icon}

diff --git a/packages/graph-editor/src/components/colorPicker/index.tsx b/packages/graph-editor/src/components/colorPicker/index.tsx
@@ -56,4 +56,4 @@ export function ColorPickerPopover({
       )}
     </InputPopover>
   );
-}
+}
diff --git a/packages/graph-editor/src/components/commandPalette/index.tsx b/packages/graph-editor/src/components/commandPalette/index.tsx
@@ -42,9 +42,7 @@ const CommandItem = observer(
         value={item.text.toLowerCase()}
       >
         <Stack direction="row" gap={2} align="center">
-          <div className={styles.icon}>
-            {item.icon}
-          </div>
+          <div className={styles.icon}>{item.icon}</div>
           {item.text}
         </Stack>
       </Command.Item>
@@ -192,11 +190,14 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
 
 function NodePreview({ title, description, docs }) {
   return (
-    <Stack direction="column" justify="center" gap={3} className={styles.previewContainer}>
+    <Stack
+      direction="column"
+      justify="center"
+      gap={3}
+      className={styles.previewContainer}
+    >
       <Stack direction="column" gap={5}>
-        <Heading className={styles.previewTitle}>
-          {title}
-        </Heading>
+        <Heading className={styles.previewTitle}>{title}</Heading>
       </Stack>
       <Text size="small" muted className={styles.previewDescription}>
         {description}

diff --git a/packages/graph-editor/src/components/controls/withVariadicField.tsx b/packages/graph-editor/src/components/controls/withVariadicField.tsx
@@ -32,17 +32,9 @@ export const withVariadicField = (WrappedComponent) => {
     };
 
     return (
-      <DndList
-        lockAxis="y"
-        onSortEnd={onSortEnd}
-        className={styles.dndList}
-      >
+      <DndList lockAxis="y" onSortEnd={onSortEnd} className={styles.dndList}>
         {port._edges.map((edge, i) => (
-          <DndItem
-            key={`input-${i}`}
-            index={i}
-            className={styles.dndItem}
-          >
+          <DndItem key={`input-${i}`} index={i} className={styles.dndItem}>
             <DndTrigger>
               <GrabberIcon />
             </DndTrigger>

diff --git a/packages/graph-editor/src/components/debugger/player.tsx b/packages/graph-editor/src/components/debugger/player.tsx
@@ -89,7 +89,11 @@ const TimelinePlayer = (props: TimelinePlayerProps) => {
   };
 
   return (
-    <Stack align="center" gap={2} style={{ padding: 'var(--component-spacing-md)' }}>
+    <Stack
+      align="center"
+      gap={2}
+      style={{ padding: 'var(--component-spacing-md)' }}
+    >
       <IconButton
         icon={isPlaying ? <Pause /> : <Play />}
         onClick={handlePlayOrPause}

diff --git a/packages/graph-editor/src/components/flow/handles.tsx b/packages/graph-editor/src/components/flow/handles.tsx
@@ -1,5 +1,5 @@
 import { Position, Handle as RawHandle } from 'reactflow';
-import { Stack, Text, Tooltip } from '@tokens-studio/ui';
+import { Stack, Tooltip } from '@tokens-studio/ui';
 import { useIsValidConnection } from '../../hooks/useIsValidConnection.js';
 import React, { createContext, useContext } from 'react';
 import styles from './handles.module.css';
@@ -85,7 +85,6 @@ export const Handle = (props: HandleProps) => {
     color,
     isArray,
     type: dataType,
-    isConnected,
     backgroundColor,
     variadic,
     isAnchor,
@@ -103,16 +102,20 @@ export const Handle = (props: HandleProps) => {
     isArray && styles.isArray,
     shouldHideHandles && styles.shouldHideHandles,
     variadic && styles.variadic,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   const holderClasses = [
     styles.handleHolder,
     (collapsed || shouldHide) && styles.collapsed,
     isAnchor && styles.isAnchor,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
-    <div 
+    <div
       className={holderClasses}
       style={{
         flexDirection: type === 'target' ? 'row' : 'row-reverse',

diff --git a/packages/graph-editor/src/components/flow/nodes/loadingNode.tsx b/packages/graph-editor/src/components/flow/nodes/loadingNode.tsx
@@ -5,7 +5,12 @@ import React from 'react';
 export const LoadingNode = ({ id }) => {
   return (
     <NodeWrapper id={id} title="loading...">
-      <Stack direction="column" gap={2} align="center" style={{ padding: 'var(--component-spacing-2xl)' }}>
+      <Stack
+        direction="column"
+        gap={2}
+        align="center"
+        style={{ padding: 'var(--component-spacing-2xl)' }}
+      >
         <Spinner />
         <Text>Loading...</Text>
       </Stack>

diff --git a/packages/graph-editor/src/components/flow/wrapper/base.tsx b/packages/graph-editor/src/components/flow/wrapper/base.tsx
@@ -19,15 +19,14 @@ export const Collapser = ({ children, collapsed }) => {
 
   return (
     <div className={isCollapsed ? styles.collapserContainer : ''}>
-      <div className={styles.collapserContent}>
-        {children}
-      </div>
+      <div className={styles.collapserContent}>{children}</div>
     </div>
   );
 };
 
 export const BaseNodeWrapper = (props: NodeProps) => {
-  const { icon, title, subtitle, error, isAsync, children, controls, ...rest } = props;
+  const { icon, title, subtitle, error, isAsync, children, controls, ...rest } =
+    props;
 
   return (
     <div className={`${styles.nodeWrapper} ${error ? styles.error : ''}`}>
@@ -48,13 +47,9 @@ export const BaseNodeWrapper = (props: NodeProps) => {
               <Stack direction="row" gap={2} align="center">
                 {icon}
                 <Stack direction="column">
-                  <Text className={styles.title}>
-                    {title}
-                  </Text>
+                  <Text className={styles.title}>{title}</Text>
                   {subtitle && (
-                    <Text className={styles.subtitle}>
-                      {subtitle}
-                    </Text>
+                    <Text className={styles.subtitle}>{subtitle}</Text>
                   )}
                 </Stack>
                 {isAsync && <Spinner />}

diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -103,7 +103,11 @@ const NodeWrap = observer(({ node, icon }: INodeWrap) => {
       style={{ minWidth: '200px' }}
     >
       <Stack direction="column" gap={2}>
-        <Stack direction="column" gap={3} style={{ padding: 'var(--component-spacing-md) 0' }}>
+        <Stack
+          direction="column"
+          gap={3}
+          style={{ padding: 'var(--component-spacing-md) 0' }}
+        >
           <HandleContainer type="source" className={'source'} full>
             <PortArray ports={node.outputs} />
             {isInput && <DynamicOutput />}
@@ -210,7 +214,7 @@ export const InlineTypeLabel = ({ port }: { port: Port }) => {
   const handleInformation = useHandle();
 
   return (
-    <div 
+    <div
       className={`${styles.inlineTypeLabel} ${styles[handleInformation.type]}`}
     >
       {typeName}
@@ -246,7 +250,12 @@ const getColorPreview = (color: Color, showValue = false) => {
     <Stack direction="row" gap={2} justify="center" align="center">
       {colorSwatch}
       {showValue ? (
-        <Text style={{ font: 'var(--typography-body-small)', color: 'var(--color-neutral-1500)' }}>
+        <Text
+          style={{
+            font: 'var(--typography-body-small)',
+            color: 'var(--color-neutral-1500)',
+          }}
+        >
           {hex.toUpperCase()}
         </Text>
       ) : null}
@@ -268,7 +277,10 @@ const getValuePreview = (value, type) => {
             {value.length > 5 ? (
               <>
                 {value.slice(0, 5).map((val) => getColorPreview(val))}
-                <Text size="xsmall" style={{ color: 'var(--color-neutral-1200)' }}>
+                <Text
+                  size="xsmall"
+                  style={{ color: 'var(--color-neutral-1200)' }}
+                >
                   +{value.length - 5}
                 </Text>
               </>
@@ -343,7 +355,12 @@ const InputHandle = observer(
                     }}
                   >
                     {inlineValuesValue && (
-                      <Text style={{ font: 'var(--typography-body-md)', color: 'var(--color-neutral-1200)' }}>
+                      <Text
+                        style={{
+                          font: 'var(--typography-body-md)',
+                          color: 'var(--color-neutral-1200)',
+                        }}
+                      >
                         {getValuePreview(input.value[i], input.type.items)}
                       </Text>
                     )}
@@ -376,11 +393,21 @@ const InputHandle = observer(
                 handleInformation.type === 'source' ? 'row-reverse' : 'row',
             }}
           >
-            <Text style={{ font: 'var(--typography-body-sm)', color: 'var(--color-neutral-1500)' }}>
+            <Text
+              style={{
+                font: 'var(--typography-body-sm)',
+                color: 'var(--color-neutral-1500)',
+              }}
+            >
               {input.name}
             </Text>
             {inlineValuesValue && (
-              <Text style={{ font: 'var(--typography-body-xs)', color: 'var(--color-neutral-1200)' }}>
+              <Text
+                style={{
+                  font: 'var(--typography-body-xs)',
+                  color: 'var(--color-neutral-1200)',
+                }}
+              >
                 {getValuePreview(input.value, input.type)}
               </Text>
             )}

diff --git a/packages/graph-editor/src/components/menubar/index.tsx b/packages/graph-editor/src/components/menubar/index.tsx
@@ -47,7 +47,11 @@ export const MenuBar = observer(({ menu }: IMenuBar) => {
   );
 
   return (
-    <div style={{ padding: 'var(--component-spacing-sm) var(--component-spacing-md)' }}>
+    <div
+      style={{
+        padding: 'var(--component-spacing-sm) var(--component-spacing-md)',
+      }}
+    >
       {/** @ts-expect-error not a valid JSX element apparently */}
       <Menu mode={'horizontal'}>{items}</Menu>
     </div>

diff --git a/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx b/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx
@@ -1,4 +1,4 @@
-import { Stack, Text } from '@tokens-studio/ui';
+import { Text } from '@tokens-studio/ui';
 import React from 'react';
 
 export const NodeEntry = ({

diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
@@ -57,15 +57,14 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
         <Stack
           direction="column"
           gap={2}
-          style={{ padding: '0 var(--component-spacing-md)', paddingTop: 'var(--component-spacing-lg)' }}
+          style={{
+            padding: '0 var(--component-spacing-md)',
+            paddingTop: 'var(--component-spacing-lg)',
+          }}
         >
           <TextInput placeholder="Search…" value={search} onChange={onSearch} />
         </Stack>
-        <Accordion
-          type="multiple"
-          value={opened}
-          onValueChange={setOpened}
-        >
+        <Accordion type="multiple" value={opened} onValueChange={setOpened}>
           {data.groups.map((value) => {
             const filteredValues = value.items
               .filter((item) =>
@@ -100,9 +99,7 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
                   <NavArrowRight className={styles.chevron} />
                 </Accordion.Trigger>
                 <Accordion.Content>
-                  <Stack direction="column">
-                    {filteredValues}
-                  </Stack>
+                  <Stack direction="column">{filteredValues}</Stack>
                 </Accordion.Content>
               </Accordion.Item>
             );

diff --git a/packages/graph-editor/src/components/panels/graph/index.tsx b/packages/graph-editor/src/components/panels/graph/index.tsx
@@ -18,7 +18,12 @@ export function GraphPanel() {
     <Stack
       direction="column"
       gap={4}
-      style={{ height: '100%', flex: 1, padding: 'var(--component-spacing-md)', overflow: 'auto' }}
+      style={{
+        height: '100%',
+        flex: 1,
+        padding: 'var(--component-spacing-md)',
+        overflow: 'auto',
+      }}
     >
       <div style={{ padding: 'var(--component-spacing-md)' }}>
         <Settings annotations={graph.annotations} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,4 +56,4 @@ export function ColorPickerPopover({ @@
           )}
         </InputPopover>
       );
-    }
+    }