contentoh-components-library 21.6.60 → 21.6.61

package/src/components/organisms/ServicesNavigation/ServiceToolbar.jsx

@@ -0,0 +1,143 @@
+import { Box, Button, Stack, Typography } from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
+
+import {
+  COLORS,
+  FONT_STACK,
+  TITLE_STACK,
+  PersonAvatar,
+  ServiceIcon,
+  StatusChip,
+  outlineButtonSx,
+  primaryButtonSx,
+} from "./ui";
+import { ROLE_LABELS, fullName, groupLabel, isMine } from "./model";
+
+/*
+  Barra del servicio abierto. Ocupa el lugar de la barra de pestañas: dice en
+  qué servicio estás, su estatus y su equipo, y lleva la acción de guardar.
+  No hay botón de «siguiente»: quien produce ya sabe qué le toca, y la lista
+  lateral lo marca con el punto rosa.
+*/
+
+const Team = ({ assignees = {}, userId }) => (
+  <Stack direction="row" alignItems="center" spacing={1.5} sx={{ flexWrap: "wrap", rowGap: 0.5 }}>
+    {Object.entries(ROLE_LABELS).map(([role, label]) => {
+      const user = assignees[role];
+      const isMe = Boolean(user) && user.id_user === userId;
+      return (
+        <Stack key={role} direction="row" alignItems="center" spacing={0.75}>
+          <PersonAvatar user={user} isMe={isMe} size={24} title={user ? `${label}: ${fullName(user)}` : `${label}: sin asignar`} />
+          <Box sx={{ lineHeight: 1.1 }}>
+            <Typography sx={{ fontFamily: FONT_STACK, fontSize: 10, color: COLORS.s4, textTransform: "uppercase", letterSpacing: "0.05em" }}>
+              {label}
+            </Typography>
+            <Typography sx={{ fontFamily: FONT_STACK, fontSize: 12, fontWeight: isMe ? 700 : 400, color: user ? COLORS.s5 : COLORS.s3 }}>
+              {user ? (isMe ? "Tú" : user.name) : "Sin asignar"}
+            </Typography>
+          </Box>
+        </Stack>
+      );
+    })}
+  </Stack>
+);
+
+export const ServiceToolbar = ({
+  service,
+  isSummary = false,
+  summaryCounts,
+  onOpenRail,
+  userId,
+}) => {
+  const canSave = !isSummary && service && isMine(service, userId);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        columnGap: 2,
+        rowGap: 1.25,
+        pb: 1.5,
+        mb: 2,
+        borderBottom: `2px solid ${COLORS.s2}`,
+      }}
+    >
+      {onOpenRail && (
+        <Button onClick={onOpenRail} startIcon={<MenuIcon sx={{ fontSize: 18 }} />} sx={outlineButtonSx}>
+          Servicios
+        </Button>
+      )}
+
+      <Stack direction="row" alignItems="center" spacing={1.25} sx={{ minWidth: 0, flex: "1 1 260px" }}>
+        <Box
+          sx={{
+            width: 36,
+            height: 36,
+            borderRadius: "10px",
+            bgcolor: COLORS.s2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+          }}
+        >
+          <ServiceIcon icon={isSummary ? "summary" : service?.icon} sx={{ fontSize: 20, color: COLORS.magenta_s2 }} />
+        </Box>
+        <Box sx={{ minWidth: 0 }}>
+          <Typography
+            sx={{
+              fontFamily: FONT_STACK,
+              fontSize: 11,
+              fontWeight: 700,
+              letterSpacing: "0.06em",
+              textTransform: "uppercase",
+              color: COLORS.s4,
+            }}
+          >
+            {isSummary ? "Todos los servicios" : groupLabel(service?.group)}
+          </Typography>
+          <Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
+            <Typography
+              component="h3"
+              sx={{
+                fontFamily: TITLE_STACK,
+                fontWeight: 500,
+                fontSize: 20,
+                lineHeight: "26px",
+                color: COLORS.s5,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {isSummary ? "Resumen" : service?.display_name}
+            </Typography>
+            {!isSummary && service && <StatusChip status={service.status} oval />}
+          </Stack>
+        </Box>
+      </Stack>
+
+      {isSummary ? (
+        summaryCounts && (
+          <Typography sx={{ fontFamily: FONT_STACK, fontSize: 13, color: COLORS.s4 }}>
+            {summaryCounts.total} servicios · {summaryCounts.pending} te{" "}
+            {summaryCounts.pending === 1 ? "toca" : "tocan"} a ti
+          </Typography>
+        )
+      ) : (
+        <Team assignees={service?.assignees} userId={userId} />
+      )}
+
+      <Stack direction="row" spacing={1} sx={{ ml: "auto" }}>
+        {canSave && (
+          <Button variant="contained" startIcon={<SaveOutlinedIcon sx={{ fontSize: 18 }} />} sx={primaryButtonSx}>
+            Guardar
+          </Button>
+        )}
+      </Stack>
+    </Box>
+  );
+};

package/src/components/organisms/ServicesNavigation/ServicesNavigation.stories.js

@@ -0,0 +1,101 @@
+import { ServicesNavigation } from "./index";
+import { DEMO_PRODUCT, DEMO_USERS, TWENTY_SERVICES, buildServices } from "./catalog";
+import { SUMMARY } from "./model";
+
+/*
+  Prototipo de la navegación por servicios en la edición de producto.
+  Datos de ejemplo: no le pega a ninguna API.
+
+  Cada historia es el mismo producto visto por una persona distinta. Lo que hay
+  que probar es la navegación: la lista lateral, «Míos / Todos», el Resumen y,
+  en las de imágenes, el selector de servicio dentro de la vista.
+*/
+
+export default {
+  title: "Prototipos/Navegación por servicios",
+  // Id sin acento, para que la liga de cada historia se pueda compartir.
+  id: "prototipos-navegacion-servicios",
+  component: ServicesNavigation,
+  parameters: { layout: "fullscreen" },
+};
+
+// Como en la app: la edición vive en una caja de altura fija.
+const Template = (args) => (
+  <div style={{ height: "100vh", display: "flex", overflow: "hidden" }}>
+    <ServicesNavigation {...args} />
+  </div>
+);
+
+const { ana, carlos, diana, helena } = DEMO_USERS;
+
+const FOUR_SERVICES = buildServices([
+  ["datasheet", "AS", { especialist: ana }],
+  ["description", "RA/AS", { especialist: ana }],
+  ["images", "PA"],
+  ["translation", "CA", { especialist: diana }],
+]);
+
+/** El producto solo lleva Traducción: no hay lista, abre directo en ella. */
+export const SoloTraduccion = Template.bind({});
+SoloTraduccion.storyName = "Solo Traducción";
+SoloTraduccion.args = {
+  product: DEMO_PRODUCT,
+  services: buildServices([["translation", "CA", { especialist: diana }]]),
+  currentUser: diana,
+  currentUserRole: "Especialista de traducción",
+};
+
+/** Caso de hoy (3 o 4 servicios), visto por la coordinadora: ve todos. */
+export const CuatroServiciosCoordinadora = Template.bind({});
+CuatroServiciosCoordinadora.storyName = "4 servicios · coordinadora";
+CuatroServiciosCoordinadora.args = {
+  product: DEMO_PRODUCT,
+  services: FOUR_SERVICES,
+  currentUser: helena,
+  currentUserRole: "Coordinadora",
+};
+
+/** Mismo producto, visto por la especialista de textos: «Míos» por omisión. */
+export const CuatroServiciosEspecialistaTextos = Template.bind({});
+CuatroServiciosEspecialistaTextos.storyName = "4 servicios · especialista de textos";
+CuatroServiciosEspecialistaTextos.args = {
+  product: DEMO_PRODUCT,
+  services: FOUR_SERVICES,
+  currentUser: ana,
+  currentUserRole: "Especialista de textos",
+};
+
+/** 20 servicios; el especialista de imágenes solo ve sus 3 hasta que pide «Todos». */
+export const VeinteServiciosEspecialistaImagenes = Template.bind({});
+VeinteServiciosEspecialistaImagenes.storyName = "20 servicios · especialista de imágenes";
+VeinteServiciosEspecialistaImagenes.args = {
+  product: DEMO_PRODUCT,
+  services: TWENTY_SERVICES,
+  currentUser: carlos,
+  currentUserRole: "Especialista de imágenes",
+};
+
+/** 20 servicios vistos por la coordinadora: entra al Resumen. */
+export const VeinteServiciosCoordinadora = Template.bind({});
+VeinteServiciosCoordinadora.storyName = "20 servicios · coordinadora";
+VeinteServiciosCoordinadora.args = {
+  product: DEMO_PRODUCT,
+  services: TWENTY_SERVICES,
+  currentUser: helena,
+  currentUserRole: "Coordinadora",
+  initialService: SUMMARY,
+};
+
+/** La lista contraída a íconos, para dejarle todo el ancho al editor. */
+export const VeinteServiciosListaContraida = Template.bind({});
+VeinteServiciosListaContraida.storyName = "20 servicios · lista contraída";
+VeinteServiciosListaContraida.args = {
+  ...VeinteServiciosEspecialistaImagenes.args,
+  initialCollapsed: true,
+};
+
+/** En celular la lista se abre como panel con el botón «Servicios». */
+export const VeinteServiciosCelular = Template.bind({});
+VeinteServiciosCelular.storyName = "20 servicios · celular";
+VeinteServiciosCelular.args = VeinteServiciosEspecialistaImagenes.args;
+VeinteServiciosCelular.parameters = { viewport: { defaultViewport: "mobile2" } };