Untitled

const { widget } = figma;
const { useEffect, AutoLayout, Text } = widget;

// Import required components
import ProgressStep from "./components/ProgressStep";
import Label from "./components/Label";
import HintText from "./components/HintText";

// Define types for progress steps
type StepLayout = 'horizontal' | 'vertical';

interface Step {
  id: number;
  title: string;
  description: string;
  state: 'Complete' | 'Active' | 'Incomplete';
}

function ProgressIndicator() {
  useEffect(() => {
    const createComponent = async () => {
      try {
        // Sample steps data
        const steps: Step[] = [
          {
            id: 1,
            title: "Personal Information",
            description: "Basic details and contact info",
            state: "Complete"
          },
          {
            id: 2,
            title: "Company Details",
            description: "Your organization information",
            state: "Active"
          },
          {
            id: 3,
            title: "Project Requirements",
            description: "Specific needs and timeline",
            state: "Incomplete"
          },
          {
            id: 4,
            title: "Review & Submit",
            description: "Verify and complete submission",
            state: "Incomplete"
          }
        ];

        const node = await figma.createNodeFromJSXAsync(
          <AutoLayout
            direction="vertical"
            spacing={48}
            padding={32}
            width={800}
          >
            {/* Horizontal Layout */}
            <AutoLayout
              direction="vertical"
              spacing={8}
              width="fill-parent"
            >
              <Label
                label="Horizontal Progress"
                state="default"
              />
              <AutoLayout
                direction="horizontal"
                spacing={0}
                width="fill-parent"
                verticalAlignItems="center"
              >
                {steps.map((step, index) => (
                  <AutoLayout
                    key={step.id}
                    width={`${100 / steps.length}%`}
                    horizontalAlignItems="center"
                  >
                    <ProgressStep
                      type="Numbered"
                      state={step.state}
                      size="md"
                      stepNumber={step.id}
                      title={step.title}
                      description={step.description}
                    />
                    {index < steps.length - 1 && (
                      <HintText
                        text="―――――"
                        state={step.state === "Complete" ? "success" : "default"}
                      />
                    )}
                  </AutoLayout>
                ))}
              </AutoLayout>
            </AutoLayout>

            {/* Vertical Layout */}
            <AutoLayout
              direction="vertical"
              spacing={8}
              width="fill-parent"
            >
              <Label
                label="Vertical Progress"
                state="default"
              />
              <AutoLayout
                direction="vertical"
                spacing={0}
                width="fill-parent"
              >
                {steps.map((step, index) => (
                  <AutoLayout
                    key={step.id}
                    direction="vertical"
                    spacing={4}
                    padding={{
                      top: index === 0 ? 0 : 8,
                      bottom: index === steps.length - 1 ? 0 : 8
                    }}
                  >
                    <ProgressStep
                      type="LineText"
                      state={step.state}
                      size="md"
                      stepNumber={step.id}
                      title={step.title}
                      description={step.description}
                    />
                    {index < steps.length - 1 && (
                      <AutoLayout
                        padding={{ left: 20 }}
                      >
                        <HintText
                          text="|"
                          state={step.state === "Complete" ? "success" : "default"}
                        />
                      </AutoLayout>
                    )}
                  </AutoLayout>
                ))}
              </AutoLayout>
            </AutoLayout>
          </AutoLayout>
        );

        figma.currentPage.appendChild(node);
        figma.viewport.scrollAndZoomIntoView([node]);
      } catch (error) {
        figma.notify(`Error creating progress indicator: ${error.message}`);
      }
    };

    createComponent();
  });

  return <Text>Progress Indicator Component</Text>;
}

widget.register(ProgressIndicator);