@flowuent-org/diagramming-core 1.4.0 → 1.4.2

package/packages/molecules/src/lib/SvgIcons/icons.tsx

@@ -0,0 +1,324 @@
+import React from 'react';
+import { SvgIconProps } from './types';
+
+// Base SVG icon component
+const BaseIcon: React.FC<SvgIconProps & { children: React.ReactNode }> = ({ 
+  size = 15, 
+  color = '#86EFAC',
+  style,
+  children 
+}) => (
+  <svg 
+    width={size} 
+    height={size} 
+    viewBox="0 0 15 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    {children}
+  </svg>
+);
+
+// Article Analyzer Icon
+export const ArticleAnalyzerIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <svg 
+    width={size || 12} 
+    height={size ? (size * 15) / 12 : 15} 
+    viewBox="0 0 12 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <path 
+      d="M7.83333 0.5H1.83333C1.47971 0.5 1.14057 0.640476 0.890524 0.890524C0.640476 1.14057 0.5 1.47971 0.5 1.83333V12.5C0.5 12.8536 0.640476 13.1928 0.890524 13.4428C1.14057 13.6929 1.47971 13.8333 1.83333 13.8333H9.83333C10.187 13.8333 10.5261 13.6929 10.7761 13.4428C11.0262 13.1928 11.1667 12.8536 11.1667 12.5V3.83333L7.83333 0.5Z" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M7.16797 0.5V3.16667C7.16797 3.52029 7.30844 3.85943 7.55849 4.10948C7.80854 4.35952 8.14768 4.5 8.5013 4.5H11.168" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M4.5013 5.16699H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M8.5013 7.83398H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+    <path 
+      d="M8.5013 10.5H3.16797" 
+      stroke={color || "#D8B4FE"} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Start Node Icon
+export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+<g clipPath="url(#clip0_8650_35616)">
+<path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_8650_35616">
+<rect width="16" height="16" fill="white" transform="translate(6 6)"/>
+</clipPath>
+</defs>
+</svg>
+
+
+);
+
+// Navigation Icon
+  export const NavigationIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+    <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+  <g clipPath="url(#clip0_8650_35642)">
+  <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M7.33398 14H20.6673" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_8650_35642">
+  <rect width="16" height="16" fill="white" transform="translate(6 6)"/>
+  </clipPath>
+  </defs>
+  </svg>
+
+  );
+
+// Workflow node type icons
+export const ParallelIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const BranchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const GroupIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const ReturnIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const LoopIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const SwitchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const TryIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const CatchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const TryCatchIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const FunctionIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const CallIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const LetIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const SetIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const EmptyNodeIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+export const EntityIcon: React.FC<SvgIconProps> = ({ size, color = '#86EFAC', style }) => (
+  <BaseIcon size={size} color={color} style={style}>
+    <path 
+      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z" 
+      stroke={color} 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </BaseIcon>
+);
+
+// End Node Icon
+export const EndNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+<path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+
+);
+
+  export const FormattingNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+    <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+  <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M12.6673 12H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  );
+
+  export const ApiNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+);
+
+export const DecisionNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+    <path d="M10 9H18M10 14H16M10 19H14" stroke="#C4B5FD" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M18 14L21 11.5V16.5L18 14Z" stroke="#C4B5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+export const SmsNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+    <path d="M8.5 10H19.5C20.0523 10 20.5 10.4477 20.5 11V16.5C20.5 17.0523 20.0523 17.5 19.5 17.5H11.5L8.5 19.5V17.5H8C7.44772 17.5 7 17.0523 7 16.5V11C7 10.4477 7.44772 10 8 10H8.5Z" stroke="#67E8F9" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M10.5 13H17.5M10.5 15H15" stroke="#67E8F9" strokeLinecap="round"/>
+  </svg>
+);
+
+export const VoiceCallNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+    <path d="M11.5 9.5C11.5 9.5 12 11.5 13.5 13C15 14.5 17 15 17 15M11.5 9.5C10.5 9.8 9.5 10.5 9 11.5C8 13.5 8.5 16.5 10.5 18.5C12.5 20.5 15.5 21 17.5 20C18.5 19.5 19.2 18.5 19.5 17.5M11.5 9.5L13 8C13.5 7.5 14.5 7.5 15.5 8.2L16.8 9.2C17.5 9.7 17.7 10.7 17.2 11.4L16.5 12.5" stroke="#FDBA74" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+export const SubWorkflowNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" style={style}>
+    <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+    <rect x="8" y="9" width="12" height="10" rx="1.5" stroke="#A5B4FC" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M11 12H17M11 14.5H15M11 17H13" stroke="#A5B4FC" strokeLinecap="round"/>
+    <path d="M19 11L21 13L19 15" stroke="#A5B4FC" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);

package/packages/molecules/src/lib/SvgIcons/index.ts

@@ -0,0 +1,31 @@
+// Export types
+export type { SvgIconProps } from './types';
+
+// Export all icons from single icons file
+export {
+  ArticleAnalyzerIcon,
+  StartNodeIcon,
+  EndNodeIcon,
+  NavigationIcon,
+  ParallelIcon,
+  BranchIcon,
+  GroupIcon,
+  ReturnIcon,
+  LoopIcon,
+  SwitchIcon,
+  TryIcon,
+  CatchIcon,
+  TryCatchIcon,
+  FunctionIcon,
+  CallIcon,
+  LetIcon,
+  SetIcon,
+  EmptyNodeIcon,
+  EntityIcon,
+  FormattingNodeIcon,
+  ApiNodeIcon,
+  DecisionNodeIcon,
+  SmsNodeIcon,
+  VoiceCallNodeIcon,
+  SubWorkflowNodeIcon,
+} from './icons';

package/packages/molecules/src/lib/SvgIcons/types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export interface SvgIconProps {
+  size?: number;
+  color?: string;
+  style?: React.CSSProperties;
+}

package/packages/molecules/src/lib/TableWithInlineView/TableWithInlineView.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .table-with-inline-view {
+ * }
+*/

package/packages/molecules/src/lib/TableWithInlineView/TableWithInlineView.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import TableWithInlineView from './TableWithInlineView';
+
+describe('TableWithInlineView', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<TableWithInlineView />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/molecules/src/lib/TableWithInlineView/TableWithInlineView.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { GridValidRowModel } from '@mui/x-data-grid';
+import { Box, BulkEdit, TableView } from '@flowuent-labs/atoms';
+import { ColumnDescriptor } from '@flowuent-labs/interfaces';
+
+interface TableWithInlineViewProps {
+  mode?: 'bulk-edit' | 'key-value-edit';
+  records: Array<GridValidRowModel>;
+  columns?: Array<ColumnDescriptor>;
+  multiline?: boolean;
+  rows?: number;
+  fullWidth?: boolean;
+  defaultValue?: string;
+}
+
+declare module '@flowuent-labs/interfaces' {
+  interface DataGridVariantOverrides {
+    grayRow: true;
+  }
+}
+
+const TableWithInlineView = ({
+  mode = 'bulk-edit',
+  multiline = true,
+  rows = 5,
+  records,
+  fullWidth = true,
+  defaultValue = '',
+  columns = [],
+}: TableWithInlineViewProps) => {
+  return (
+    <>
+      {mode === 'bulk-edit' ? (
+        <TableView records={records} columns={columns} variant="grayRow" />
+      ) : (
+        <BulkEdit
+          multiline={multiline}
+          fullWidth={fullWidth}
+          rows={rows}
+          defaultValue={defaultValue}
+        />
+      )}
+    </>
+  );
+};
+
+export default TableWithInlineView;

package/packages/molecules/src/lib/UserCard/UserCard.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .user-card {
+ * }
+*/

package/packages/molecules/src/lib/UserCard/UserCard.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import UserCard from './UserCard';
+
+describe('UserCard', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<UserCard />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/molecules/src/lib/UserCard/UserCard.tsx

@@ -0,0 +1,22 @@
+import { Avatar, Box, Typography, Card, CardContent } from '@flowuent-labs/atoms';
+import styles from './UserCard.module.css';
+import { UserCardProps } from '@flowuent-labs/interfaces';
+
+const UserCard = (props: UserCardProps) => {
+  const { name, userName, email, phoneNumber, profileUrl } = props;
+  return (
+    <Card>
+      <CardContent>
+        <Box className={styles['user-card']}>
+          <Typography>{name}</Typography>
+          <Avatar src={profileUrl}>SK</Avatar>
+          <Typography>{userName}</Typography>
+          <Typography>{email}</Typography>
+          <Typography>{phoneNumber}</Typography>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default UserCard;

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .verb-selection {
+ * }
+*/

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import VerbSelection from './HTTPVerbSelection';
+
+describe('VerbSelection', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<VerbSelection />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/packages/molecules/src/lib/VerbSelection/HTTPVerbSelection.tsx

@@ -0,0 +1,72 @@
+import {
+  FormControl,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  SxProps,
+} from '@mui/material';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface HTTPVerbSelectionProps {
+  fullWidth?: boolean;
+  onChange: (e: SelectChangeEvent) => void;
+  options?: Array<Option>;
+  selectedValue?: string;
+  sx?: SxProps;
+}
+
+const HTTPVerbSelectionOptions = [
+  {
+    label: 'GET',
+    value: 'get',
+  },
+  {
+    label: 'POST',
+    value: 'post',
+  },
+  {
+    label: 'PUT',
+    value: 'put',
+  },
+  {
+    label: 'DELETE',
+    value: 'delete',
+  },
+];
+
+const HTTPVerbSelection = ({
+  fullWidth = false,
+  onChange,
+  options = HTTPVerbSelectionOptions,
+  selectedValue = '',
+  sx,
+}: HTTPVerbSelectionProps) => {
+  const { t } = useTranslation();
+  return (
+    <FormControl fullWidth={fullWidth}>
+      <Select
+        sx={sx}
+        value={selectedValue}
+        onChange={onChange}
+        IconComponent={ExpandMoreIcon}
+      >
+        {options.map((singleOption) => {
+          const { value, label } = singleOption;
+          return (
+            <MenuItem value={value} key={value}>
+              {t(`httpVerb.${value}`)}
+            </MenuItem>
+          );
+        })}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default HTTPVerbSelection;

package/packages/molecules/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/packages/molecules/tsconfig.lib.json

@@ -0,0 +1,30 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "../organisms/src/lib/UserList/store.ts"
+  ]
+}

package/packages/organisms/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/packages/organisms/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/packages/organisms/README.md

@@ -0,0 +1,7 @@
+# organisms
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test organisms` to execute the unit tests via [Jest](https://jestjs.io).

package/packages/organisms/project.json

@@ -0,0 +1,8 @@
+{
+  "name": "organisms",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/organisms/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {}
+}