chore(react): cleanup exports

2024-01-08 13:26:14 +01:00
parent 30c975e39f
commit 61f8e00541
61 changed files with 386 additions and 475 deletions
@@ -3,10 +3,10 @@ import cc from 'classcat';
 import { shallow } from 'zustand/shallow';

 import { useStore } from '../../hooks/useStore';
-import { type ReactFlowState } from '../../types';
-import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
 import { containerStyle } from '../../styles/utils';
+import { type BackgroundProps, BackgroundVariant } from './types';
+import { type ReactFlowState } from '../../types';

 const defaultSize = {
  [BackgroundVariant.Dots]: 1,
@@ -16,7 +16,7 @@ const defaultSize = {

 const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });

-function Background({
+function BackgroundComponent({
  id,
  variant = BackgroundVariant.Dots,
  // only used for dots and cross
@@ -87,6 +87,6 @@ function Background({
  );
 }

-Background.displayName = 'Background';
+BackgroundComponent.displayName = 'Background';

-export default memo(Background);
+export const Background = memo(BackgroundComponent);
@@ -1,2 +1,2 @@
-export { default as Background } from './Background';
-export * from './types';
+export { Background } from './Background';
+export { BackgroundVariant, type BackgroundProps } from './types';
@@ -1,14 +1,11 @@
-import type { FC, PropsWithChildren } from 'react';
 import cc from 'classcat';

 import type { ControlButtonProps } from './types';

-const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
-  <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
-    {children}
-  </button>
-);
-
-ControlButton.displayName = 'ControlButton';
-
-export default ControlButton;
+export function ControlButton({ children, className, ...rest }: ControlButtonProps) {
+  return (
+    <button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
+      {children}
+    </button>
+  );
+}
@@ -1,19 +1,18 @@
-import { memo, type FC, type PropsWithChildren } from 'react';
+import { memo } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';

 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useReactFlow } from '../../hooks/useReactFlow';
-import Panel from '../../components/Panel';
+import { Panel } from '../../components/Panel';
 import { type ReactFlowState } from '../../types';

-import PlusIcon from './Icons/Plus';
-import MinusIcon from './Icons/Minus';
-import FitviewIcon from './Icons/FitView';
-import LockIcon from './Icons/Lock';
-import UnlockIcon from './Icons/Unlock';
-import ControlButton from './ControlButton';
-
+import { PlusIcon } from './Icons/Plus';
+import { MinusIcon } from './Icons/Minus';
+import { FitViewIcon } from './Icons/FitView';
+import { LockIcon } from './Icons/Lock';
+import { UnlockIcon } from './Icons/Unlock';
+import { ControlButton } from './ControlButton';
 import type { ControlProps } from './types';

 const selector = (s: ReactFlowState) => ({
@@ -22,7 +21,7 @@ const selector = (s: ReactFlowState) => ({
  maxZoomReached: s.transform[2] >= s.maxZoom,
 });

-const Controls: FC<PropsWithChildren<ControlProps>> = ({
+function ControlsComponent({
  style,
  showZoom = true,
  showFitView = true,
@@ -35,7 +34,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
  className,
  children,
  position = 'bottom-left',
-}) => {
+}: ControlProps) {
  const store = useStoreApi();
  const { isInteractive, minZoomReached, maxZoomReached } = useStore(selector, shallow);
  const { zoomIn, zoomOut, fitView } = useReactFlow();
@@ -101,7 +100,7 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
          title="fit view"
          aria-label="fit view"
        >
-          <FitviewIcon />
+          <FitViewIcon />
        </ControlButton>
      )}
      {showInteractive && (
@@ -117,8 +116,8 @@ const Controls: FC<PropsWithChildren<ControlProps>> = ({
      {children}
    </Panel>
  );
-};
+}

-Controls.displayName = 'Controls';
+ControlsComponent.displayName = 'Controls';

-export default memo(Controls);
+export const Controls = memo(ControlsComponent);
@@ -1,9 +1,7 @@
-function FitViewIcon() {
+export function FitViewIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
      <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
    </svg>
  );
 }
-
-export default FitViewIcon;
@@ -1,9 +1,7 @@
-function LockIcon() {
+export function LockIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
      <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
    </svg>
  );
 }
-
-export default LockIcon;
@@ -1,9 +1,7 @@
-function MinusIcon() {
+export function MinusIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
      <path d="M0 0h32v4.2H0z" />
    </svg>
  );
 }
-
-export default MinusIcon;
@@ -1,9 +1,7 @@
-function PlusIcon() {
+export function PlusIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
      <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
    </svg>
  );
 }
-
-export default PlusIcon;
@@ -1,9 +1,7 @@
-function UnlockIcon() {
+export function UnlockIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
      <path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
    </svg>
  );
 }
-
-export default UnlockIcon;
@@ -1,3 +1,3 @@
-export { default as Controls } from './Controls';
-export { default as ControlButton } from './ControlButton';
-export * from './types';
+export { Controls } from './Controls';
+export { ControlButton } from './ControlButton';
+export type { ControlProps, ControlButtonProps } from './types';
@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import type { PanelPosition } from '@xyflow/system';

 import type { FitViewOptions } from '../../types';
@@ -13,6 +13,7 @@ export type ControlProps = HTMLAttributes<HTMLDivElement> & {
  onFitView?: () => void;
  onInteractiveChange?: (interactiveStatus: boolean) => void;
  position?: PanelPosition;
+  children?: ReactNode;
 };

 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
@@ -6,11 +6,11 @@ import { shallow } from 'zustand/shallow';
 import { getNodesBounds, getBoundsOfRects, XYMinimap, type Rect, type XYMinimapInstance } from '@xyflow/system';

 import { useStore, useStoreApi } from '../../hooks/useStore';
-import Panel from '../../components/Panel';
+import { Panel } from '../../components/Panel';
 import type { ReactFlowState } from '../../types';

-import type { MiniMapProps } from './types';
 import MiniMapNodes from './MiniMapNodes';
+import type { MiniMapProps } from './types';

 const defaultWidth = 200;
 const defaultHeight = 150;
@@ -37,7 +37,7 @@ const selector = (s: ReactFlowState) => {

 const ARIA_LABEL_KEY = 'react-flow__minimap-desc';

-function MiniMap({
+function MiniMapComponent({
  style,
  className,
  nodeStrokeColor,
@@ -171,6 +171,6 @@ function MiniMap({
  );
 }

-MiniMap.displayName = 'MiniMap';
+MiniMapComponent.displayName = 'MiniMap';

-export default memo(MiniMap);
+export const MiniMap = memo(MiniMapComponent);
@@ -3,7 +3,7 @@ import cc from 'classcat';

 import type { MiniMapNodeProps } from './types';

-function MiniMapNode({
+function MiniMapNodeComponent({
  id,
  x,
  y,
@@ -42,4 +42,4 @@ function MiniMapNode({
  );
 }

-export default memo(MiniMapNode);
+export const MiniMapNode = memo(MiniMapNodeComponent);
@@ -5,8 +5,8 @@ import { NodeOrigin, getNodePositionWithOrigin } from '@xyflow/system';
 import { shallow } from 'zustand/shallow';

 import { useStore } from '../../hooks/useStore';
+import { MiniMapNode } from './MiniMapNode';
 import type { ReactFlowState } from '../../types';
-import MiniMapNode from './MiniMapNode';
 import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMapNodeProps } from './types';

 declare const window: any;
@@ -1,2 +1,2 @@
-export { default as MiniMap } from './MiniMap';
+export { MiniMap } from './MiniMap';
 export * from './types';
@@ -6,8 +6,8 @@ import { getNodesBounds, Rect, Position, internalsSymbol, getNodeToolbarTransfor
 import { Node, ReactFlowState } from '../../types';
 import { useStore } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
-import NodeToolbarPortal from './NodeToolbarPortal';
-import { NodeToolbarProps } from './types';
+import { NodeToolbarPortal } from './NodeToolbarPortal';
+import type { NodeToolbarProps } from './types';

 const nodeEqualityFn = (a?: Node, b?: Node) =>
  a?.computed?.positionAbsolute?.x !== b?.computed?.positionAbsolute?.x ||
@@ -35,7 +35,7 @@ const storeSelector = (state: ReactFlowState) => ({
  selectedNodesCount: state.nodes.filter((node) => node.selected).length,
 });

-function NodeToolbar({
+export function NodeToolbar({
  nodeId,
  children,
  className,
@@ -96,5 +96,3 @@ function NodeToolbar({
    </NodeToolbarPortal>
  );
 }
-
-export default NodeToolbar;
@@ -6,7 +6,7 @@ import { useStore } from '../../hooks/useStore';

 const selector = (state: ReactFlowState) => state.domNode?.querySelector('.react-flow__renderer');

-function NodeToolbarPortal({ children }: { children: ReactNode }) {
+export function NodeToolbarPortal({ children }: { children: ReactNode }) {
  const wrapperRef = useStore(selector);

  if (!wrapperRef) {
@@ -15,5 +15,3 @@ function NodeToolbarPortal({ children }: { children: ReactNode }) {

  return createPortal(children, wrapperRef);
 }
-
-export default NodeToolbarPortal;
@@ -1,2 +1,2 @@
-export { default as NodeToolbar } from './NodeToolbar';
-export * from './types';
+export { NodeToolbar } from './NodeToolbar';
+export type { NodeToolbarProps } from './types';