@cgi-learning-hub/ui/dist/components/stories/Stepper.stories.es.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import { jsx as e, jsxs as r, Fragment as k } from "react/jsx-runtime";
import { useState as b } from "react";
import { c as g, S as y, b as P, a as T } from "../../Stepper-DE2l91K0.js";
import { B as o } from "../../Box-BI4osO9v.js";
import { T as m } from "../../Typography-Dy8r_tT2.js";
import { B as c } from "../../Button-DDV5EfwJ.js";
const d = ["Paramètres", "Créer un groupe", "Validation"], z = (h) => {
  const [t, s] = b(0), [a, u] = b(/* @__PURE__ */ new Set()), p = (n) => n === 1, x = (n) => a.has(n), C = () => {
    let n = a;
    x(t) && (n = new Set(n.values()), n.delete(t)), s((l) => l + 1), u(n);
  }, S = () => {
    s((n) => n - 1);
  }, f = () => {
    if (!p(t))
      throw new Error("You can't skip a step that isn't optional.");
    s((n) => n + 1), u((n) => {
      const l = new Set(n.values());
      return l.add(t), l;
    });
  }, w = () => {
    s(0);
  };
  return /* @__PURE__ */ r(o, { sx: { width: "100%" }, children: [
    /* @__PURE__ */ e(g, { activeStep: t, ...h, children: d.map((n, l) => {
      const v = {}, i = {};
      return p(l) && (i.optional = /* @__PURE__ */ e(m, { variant: "caption", children: "Optionnel" })), x(l) && (v.completed = !1), /* @__PURE__ */ e(y, { ...v, children: /* @__PURE__ */ e(P, { ...i, children: n }) }, n);
    }) }),
    t === d.length ? /* @__PURE__ */ r(k, { children: [
      /* @__PURE__ */ e(m, { sx: { mt: 2, mb: 1 }, children: "Toutes les étapes sont complétées - vous avez terminé" }),
      /* @__PURE__ */ r(o, { sx: { display: "flex", flexDirection: "row", pt: 2 }, children: [
        /* @__PURE__ */ e(o, { sx: { flex: "1 1 auto" } }),
        /* @__PURE__ */ e(c, { onClick: w, children: "Réinitialiser" })
      ] })
    ] }) : /* @__PURE__ */ r(k, { children: [
      /* @__PURE__ */ r(m, { sx: { mt: 2, mb: 1 }, children: [
        "Étape ",
        t + 1
      ] }),
      /* @__PURE__ */ r(o, { sx: { display: "flex", flexDirection: "row", pt: 2 }, children: [
        /* @__PURE__ */ e(
          c,
          {
            color: "inherit",
            disabled: t === 0,
            onClick: S,
            sx: { mr: 1 },
            children: "Précédent"
          }
        ),
        /* @__PURE__ */ e(o, { sx: { flex: "1 1 auto" } }),
        p(t) && /* @__PURE__ */ e(c, { color: "inherit", onClick: f, sx: { mr: 1 }, children: "Passer" }),
        /* @__PURE__ */ e(c, { onClick: C, children: t === d.length - 1 ? "Terminer" : "Suivant" })
      ] })
    ] })
  ] });
}, j = (h) => {
  const [t, s] = b(0), [a, u] = b({}), p = () => d.length, x = () => Object.keys(a).length, C = () => t === p() - 1, S = () => x() === p(), f = () => {
    const i = C() && !S() ? (
      // It's the last step, but not all steps have been completed,
      // find the first step that has been completed
      d.findIndex((L, B) => !(B in a))
    ) : t + 1;
    s(i);
  }, w = () => {
    s((i) => i - 1);
  }, n = (i) => () => {
    s(i);
  }, l = () => {
    u({
      ...a,
      [t]: !0
    }), f();
  }, v = () => {
    s(0), u({});
  };
  return /* @__PURE__ */ r(o, { sx: { width: "100%" }, children: [
    /* @__PURE__ */ e(g, { nonLinear: !0, activeStep: t, children: d.map((i, L) => /* @__PURE__ */ e(y, { completed: a[L], children: /* @__PURE__ */ e(T, { color: "inherit", onClick: n(L), children: i }) }, i)) }),
    /* @__PURE__ */ e("div", { children: S() ? /* @__PURE__ */ r(k, { children: [
      /* @__PURE__ */ e(m, { sx: { mt: 2, mb: 1 }, children: "Toutes les étapes sont complétées - vous avez terminé" }),
      /* @__PURE__ */ r(o, { sx: { display: "flex", flexDirection: "row", pt: 2 }, children: [
        /* @__PURE__ */ e(o, { sx: { flex: "1 1 auto" } }),
        /* @__PURE__ */ e(c, { onClick: v, children: "Réinitialiser" })
      ] })
    ] }) : /* @__PURE__ */ r(k, { children: [
      /* @__PURE__ */ r(m, { sx: { mt: 2, mb: 1, py: 1 }, children: [
        "Étape ",
        t + 1
      ] }),
      /* @__PURE__ */ r(o, { sx: { display: "flex", flexDirection: "row", pt: 2 }, children: [
        /* @__PURE__ */ e(
          c,
          {
            color: "inherit",
            disabled: t === 0,
            onClick: w,
            sx: { mr: 1 },
            children: "Précédent"
          }
        ),
        /* @__PURE__ */ e(o, { sx: { flex: "1 1 auto" } }),
        /* @__PURE__ */ e(c, { onClick: f, sx: { mr: 1 }, children: "Suivant" }),
        t !== d.length && (a[t] ? /* @__PURE__ */ r(
          m,
          {
            variant: "caption",
            sx: { display: "inline-block" },
            children: [
              "Étape ",
              t + 1,
              " déjà complétée"
            ]
          }
        ) : /* @__PURE__ */ e(c, { onClick: l, children: x() === p() - 1 ? "Terminer" : "Compléter l'étape" }))
      ] })
    ] }) })
  ] });
}, E = {
  title: "Components/Stepper",
  component: g,
  parameters: {
    docs: {
      description: {
        component: "Les steppers transmettent les progrès par le biais d'étapes numérotées. Ils permettent d'obtenir un flux de travail semblable à celui d'un assistant."
      }
    }
  },
  argTypes: {
    alternativeLabel: {
      control: "boolean",
      description: "Positionne le label de l'étape sous l'icône"
    },
    nonLinear: {
      control: "boolean",
      description: "Si cette option est activée, le stepper n'aidera pas à contrôler les étapes d'un flux linéaire"
    },
    orientation: {
      control: "radio",
      options: ["horizontal", "vertical"],
      description: "Orientation du composant"
    }
  }
}, F = {
  render: (h) => /* @__PURE__ */ e(z, { ...h }),
  args: {
    alternativeLabel: !1,
    nonLinear: !1,
    orientation: "horizontal"
  }
}, V = {
  render: (h) => /* @__PURE__ */ e(j, { ...h }),
  args: {
    alternativeLabel: !1,
    nonLinear: !0,
    orientation: "horizontal"
  }
};
export {
  F as Linear,
  V as NonLinear,
  E as default
};