@useloops/design-system 1.4.552 → 1.4.554
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{Stack as r,Box as a}from"@mui/material";import n from"@number-flow/react";import{mergeSx as i}from"merge-sx";import{useState as s}from"react";import{TruncatedList as l}from"react-truncate-list";import m from"../../BrandCore/Icon/Icon.js";import p from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import c from"../../WebCore/Label/Label.js";import d from"../../WebCore/Menu/Menu.js";import u from"../../WebCore/ProgressBar/ProgressBar.js";import g from"../../WebCore/Skeleton/Skeleton.js";import h from"../../WebCore/Surface/Surface.js";import x from"../../WebCore/Typography/Typography.js";import y from"../TestStatus/TestStatus.js";const f=({animated:n=!0,status:f,menuItems:C,title:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{Stack as r,Box as a}from"@mui/material";import n from"@number-flow/react";import{mergeSx as i}from"merge-sx";import{useState as s}from"react";import{TruncatedList as l}from"react-truncate-list";import m from"../../BrandCore/Icon/Icon.js";import p from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import c from"../../WebCore/Label/Label.js";import d from"../../WebCore/Menu/Menu.js";import u from"../../WebCore/ProgressBar/ProgressBar.js";import g from"../../WebCore/Skeleton/Skeleton.js";import h from"../../WebCore/Surface/Surface.js";import x from"../../WebCore/Typography/Typography.js";import y from"../TestStatus/TestStatus.js";const f=({animated:n=!0,status:f,menuItems:C,title:S,tags:T,stats:k,user:v,slotProps:I,loading:j=!1,...N})=>{const[z,B]=s(!1);return e(h,{variation:"raised",borderradius:"lg",...N,sx:i({padding:e=>e.spacing(e.custom.padding.md),border:e=>`1px solid ${e.custom.palette.stroke.light}`,width:"100%",cursor:"pointer","&:hover .TestItem__Menu":{opacity:1}},N.sx),children:t(r,{component:"article",gap:2,children:[t(r,{component:"header",gap:1,justifyContent:"space-between",children:[t(r,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[j?e(g,{sx:{width:90,height:32}}):e(y,{status:f,...I?.status}),!j&&Boolean(C?.length)&&e(d,{trigger:e(p,{icon:e(m,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestItem__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"opacity 0.3s ease",opacity:0,"&:focus":{background:e=>`${e.custom.palette.interaction.press} !important`,opacity:1}}}),bindOn:["toggle"],menuItems:C,width:128,offset:[0,8],placement:"bottom-end",...I?.menu})]}),j?e(g,{}):e(x,{component:"h1",weight:"bold",...I?.title,sx:i({fontSize:e=>e.custom.typography.body.xl},I?.title?.sx),children:S})]}),e(a,{children:j?e(a,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,o)=>e(g,{sx:{maxWidth:50}},`test-item-skeleton-${o}`))}):Boolean(T?.length)&&e(l,{style:{display:"flex",flexWrap:"wrap",maxHeight:30,gap:"4px",listStyleType:"none",paddingInlineStart:0,margin:0,...z&&{maxHeight:"none"}},alwaysShowTruncator:z,renderTruncator:({hiddenItemsCount:t})=>t>0?e(c,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),B(!0)},...I?.tagsExpand,sx:i({background:e=>e.custom.palette.neutral[50]},I?.tagsExpand?.sx)}):e(p,{sizing:"sm",icon:e(m,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),B(!1)},...I?.tagsCollapse,sx:i({color:e=>e.custom.palette.icon.primary},I?.tagsCollapse?.sx)}),children:T.map(t=>e(c,{body:t,weight:"light",...I?.pill,sx:i({background:e=>e.custom.palette.neutral[50]},I?.pill?.sx)},t))})}),!j&&k?.progress&&e(h,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:t(r,{gap:2,children:[e(u,{variation:"determinate",value:k.progress.percentage}),t(a,{gap:{sm:.5,md:1},justifyContent:"stretch",sx:e=>({display:"grid",[e.breakpoints.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.breakpoints.down("lg")]:{gridTemplateColumns:"auto"},[e.containerQueries.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.containerQueries.down("lg")]:{gridTemplateColumns:"auto"}}),children:[e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Completed",primaryText:k.progress.completed.toString(),secondaryText:`of ${k.progress.total}`})}),e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Incomplete",primaryText:k.progress.incomplete.toString(),secondaryText:`${k.progress.incompletePercentage}%`})}),e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Duration",primaryText:k.progress.averageDuration,secondaryText:"average"})})]})]})}),t(a,{component:"footer",display:"flex",flexDirection:"row",justifyContent:v?"space-between":"end",gap:1,children:[v&&e(a,{display:"flex",alignItems:"center",gap:1,children:j?t(o,{children:[e(g,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e(g,{sx:{width:100}})]}):e(o,{children:e(x,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:v.activityDescription})})}),!j&&"draft"!==f&&t(a,{display:"flex",alignItems:"center",gap:2,flexShrink:0,children:[e(w,{animated:n,iconName:"data-bar",label:"answers",value:k?.count?.answers??0}),e(w,{animated:n,iconName:"comment-filled",label:"comments",value:k?.count?.comments??0,slotProps:{icon:{size:20}}})]})]})]})})},b=({animated:a,label:i,primaryText:s,secondaryText:l})=>{const m=s.match(/\d{1,2}:\d{2}/),p=s.split(":"),c=!isNaN(Number(s)),d=l.includes("%")&&!isNaN(Number(l.replace("%","")));return t(r,{sx:{background:e=>e.custom.palette.surface.default,minWidth:"92px",border:e=>`1px solid ${e.custom.palette.neutral[100]}`,borderRadius:1,padding:e=>`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`,color:e=>e.custom.palette.text.primary,flexShrink:0,height:"100%"},direction:{sm:"row",md:"row",lg:"column"},alignItems:"center",gap:{sm:1,md:1,lg:0},children:[e(x,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:i}),e(x,{component:"h3",sx:{fontSize:e=>({sm:e.custom.typography.body.sm,md:e.custom.typography.body.md,lg:e.custom.typography.body.xxl}),fontWeight:500,flexShrink:0},monospaced:!0,children:e(o,{children:e(o,m||c?{children:m?t(o,{children:[e(n,{value:Number(p[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:a}),":",e(n,{value:Number(p[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:a})]}):e(n,{value:Number(s),animated:a})}:{children:s})})}),e(x,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:d?t(o,{children:[e(n,{value:Number(l.replace("%","")),animated:a}),"%"]}):l})]})},w=({animated:o,iconName:r,label:s,value:l,slotProps:p})=>t(a,{display:"flex",alignItems:"center",gap:.5,children:[e(m,{name:r,...p?.icon,sx:i({color:e=>e.custom.palette.icon.secondary},p?.icon?.sx)}),t(x,{monospaced:!0,component:"p",sx:e=>({fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.primary,"& > span":{color:e=>e.custom.palette.text.secondary,[e.breakpoints.up("lg")]:{display:"inline"},[e.breakpoints.down("lg")]:{display:"none"},[e.containerQueries.up("lg")]:{display:"inline"},[e.containerQueries.down("lg")]:{display:"none"}}}),children:[e(n,{value:l,animated:o})," ",e("span",{children:s})]})]});export{f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),s=require("merge-sx"),a=require("react"),n=require("react-truncate-list"),o=require("../../BrandCore/Icon/Icon.js"),i=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var l=require("../../WebCore/Label/Label.js"),d=require("../../WebCore/Menu/Menu.js"),c=require("../../WebCore/ProgressBar/ProgressBar.js"),p=require("../../WebCore/Skeleton/Skeleton.js"),m=require("../../WebCore/Surface/Surface.js"),u=require("../../WebCore/Typography/Typography.js"),x=require("../TestStatus/TestStatus.js");function g(e){return e&&e.__esModule?e:{default:e}}var h=g(r);const j=({animated:r,label:s,primaryText:a,secondaryText:n})=>{const o=a.match(/\d{1,2}:\d{2}/),i=a.split(":"),l=!isNaN(Number(a)),d=n.includes("%")&&!isNaN(Number(n.replace("%","")));return e.jsxs(t.Stack,{sx:{background:e=>e.custom.palette.surface.default,minWidth:"92px",border:e=>`1px solid ${e.custom.palette.neutral[100]}`,borderRadius:1,padding:e=>`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`,color:e=>e.custom.palette.text.primary,flexShrink:0,height:"100%"},direction:{sm:"row",md:"row",lg:"column"},alignItems:"center",gap:{sm:1,md:1,lg:0},children:[e.jsx(u,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:s}),e.jsx(u,{component:"h3",sx:{fontSize:e=>({sm:e.custom.typography.body.sm,md:e.custom.typography.body.md,lg:e.custom.typography.body.xxl}),fontWeight:500,flexShrink:0},monospaced:!0,children:e.jsx(e.Fragment,{children:o||l?e.jsx(e.Fragment,{children:o?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(i[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r}),":",e.jsx(h.default,{value:Number(i[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r})]}):e.jsx(h.default,{value:Number(a),animated:r})}):e.jsx(e.Fragment,{children:a})})}),e.jsx(u,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:d?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(n.replace("%","")),animated:r}),"%"]}):n})]})},y=({animated:r,iconName:a,label:n,value:i,slotProps:l})=>e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:.5,children:[e.jsx(o.default,{name:a,...l?.icon,sx:s.mergeSx({color:e=>e.custom.palette.icon.secondary},l?.icon?.sx)}),e.jsxs(u,{monospaced:!0,component:"p",sx:e=>({fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.primary,"& > span":{color:e=>e.custom.palette.text.secondary,[e.breakpoints.up("lg")]:{display:"inline"},[e.breakpoints.down("lg")]:{display:"none"},[e.containerQueries.up("lg")]:{display:"inline"},[e.containerQueries.down("lg")]:{display:"none"}}}),children:[e.jsx(h.default,{value:i,animated:r})," ",e.jsx("span",{children:n})]})]});module.exports=({animated:r=!0,status:g,menuItems:h,title:f,tags:b,stats:S,user:w,slotProps:k,loading:v=!1,...C})=>{const[T,B]=a.useState(!1);return e.jsx(m,{variation:"raised",borderradius:"lg",...C,sx:s.mergeSx({padding:e=>e.spacing(e.custom.padding.md),border:e=>`1px solid ${e.custom.palette.stroke.light}`,width:"100%",cursor:"pointer","&:hover .TestItem__Menu":{opacity:1}},C.sx),children:e.jsxs(t.Stack,{component:"article",gap:2,children:[e.jsxs(t.Stack,{component:"header",gap:1,justifyContent:"space-between",children:[e.jsxs(t.Stack,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[v?e.jsx(p,{sx:{width:90,height:32}}):e.jsx(x,{status:g,...k?.status}),!v&&Boolean(h?.length)&&e.jsx(d.default,{trigger:e.jsx(i,{icon:e.jsx(o.default,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestItem__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"opacity 0.3s ease",opacity:0,"&:focus":{background:e=>`${e.custom.palette.interaction.press} !important`,opacity:1}}}),bindOn:["toggle"],menuItems:h,width:128,offset:[0,8],placement:"bottom-end",...k?.menu})]}),v?e.jsx(p,{}):e.jsx(u,{component:"h1",weight:"bold",...k?.title,sx:s.mergeSx({fontSize:e=>e.custom.typography.body.xl},k?.title?.sx),children:f})]}),e.jsx(t.Box,{children:v?e.jsx(t.Box,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,r)=>e.jsx(p,{sx:{maxWidth:50}},`test-item-skeleton-${r}`))}):Boolean(b?.length)&&e.jsx(n.TruncatedList,{style:{display:"flex",flexWrap:"wrap",maxHeight:30,gap:"4px",listStyleType:"none",paddingInlineStart:0,margin:0,...T&&{maxHeight:"none"}},alwaysShowTruncator:T,renderTruncator:({hiddenItemsCount:t})=>t>0?e.jsx(l,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),B(!0)},...k?.tagsExpand,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.tagsExpand?.sx)}):e.jsx(i,{sizing:"sm",icon:e.jsx(o.default,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),B(!1)},...k?.tagsCollapse,sx:s.mergeSx({color:e=>e.custom.palette.icon.primary},k?.tagsCollapse?.sx)}),children:b.map(t=>e.jsx(l,{body:t,weight:"light",...k?.pill,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.pill?.sx)},t))})}),!v&&S?.progress&&e.jsx(m,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:e.jsxs(t.Stack,{gap:2,children:[e.jsx(c,{variation:"determinate",value:S.progress.percentage}),e.jsxs(t.Box,{gap:{sm:.5,md:1},justifyContent:"stretch",sx:e=>({display:"grid",[e.breakpoints.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.breakpoints.down("lg")]:{gridTemplateColumns:"auto"},[e.containerQueries.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.containerQueries.down("lg")]:{gridTemplateColumns:"auto"}}),children:[e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Completed",primaryText:S.progress.completed.toString(),secondaryText:`of ${S.progress.total}`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Incomplete",primaryText:S.progress.incomplete.toString(),secondaryText:`${S.progress.incompletePercentage}%`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Duration",primaryText:S.progress.averageDuration,secondaryText:"average"})})]})]})}),e.jsxs(t.Box,{component:"footer",display:"flex",flexDirection:"row",justifyContent:w?"space-between":"end",gap:1,children:[w&&e.jsx(t.Box,{display:"flex",alignItems:"center",gap:1,children:v?e.jsxs(e.Fragment,{children:[e.jsx(p,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e.jsx(p,{sx:{width:100}})]}):e.jsx(e.Fragment,{children:e.jsx(u,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:w.activityDescription})})}),!v&&"draft"!==g&&e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:2,flexShrink:0,children:[e.jsx(y,{animated:r,iconName:"data-bar",label:"answers",value:S?.count?.answers??0}),e.jsx(y,{animated:r,iconName:"comment-filled",label:"comments",value:S?.count?.comments??0,slotProps:{icon:{size:20}}})]})]})]})})};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useloops/design-system",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.554",
|
|
4
4
|
"description": "The official React based Loops design system",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -154,7 +154,6 @@
|
|
|
154
154
|
"@faker-js/faker": "^9.4.0",
|
|
155
155
|
"@mui/icons-material": "^7.3.4",
|
|
156
156
|
"@mui/material": "^7.3.4",
|
|
157
|
-
"mui-tiptap": "^1.28.1",
|
|
158
157
|
"@rollup/plugin-babel": "^6.0.4",
|
|
159
158
|
"@rollup/plugin-commonjs": "^26.0.1",
|
|
160
159
|
"@rollup/plugin-json": "^6.1.0",
|
|
@@ -168,12 +167,6 @@
|
|
|
168
167
|
"@storybook/react-vite": "^10.0.8",
|
|
169
168
|
"@swc/core": "^1.10.18",
|
|
170
169
|
"@testing-library/react": "^16.3.0",
|
|
171
|
-
"@tiptap/extension-image": "^3.7.0",
|
|
172
|
-
"@tiptap/extension-placeholder": "^3.7.0",
|
|
173
|
-
"@tiptap/extension-table": "^3.7.0",
|
|
174
|
-
"@tiptap/extension-underline": "^3.7.0",
|
|
175
|
-
"@tiptap/react": "^3.7.0",
|
|
176
|
-
"@tiptap/starter-kit": "^3.7.0",
|
|
177
170
|
"@types/react": "^19.2.2",
|
|
178
171
|
"@types/react-dom": "^19.2.2",
|
|
179
172
|
"@types/stylis": "^4.2.6",
|
|
@@ -219,13 +212,6 @@
|
|
|
219
212
|
"@emotion/styled": "^11.14.1",
|
|
220
213
|
"@mui/icons-material": "^7.3.4",
|
|
221
214
|
"@mui/material": "^7.3.4",
|
|
222
|
-
"mui-tiptap": "^1.28.1",
|
|
223
|
-
"@tiptap/extension-image": "^3.7.0",
|
|
224
|
-
"@tiptap/extension-placeholder": "^3.7.0",
|
|
225
|
-
"@tiptap/extension-table": "^3.7.0",
|
|
226
|
-
"@tiptap/extension-underline": "^3.7.0",
|
|
227
|
-
"@tiptap/react": "^3.7.0",
|
|
228
|
-
"@tiptap/starter-kit": "^3.7.0",
|
|
229
215
|
"react": "^19.2.0",
|
|
230
216
|
"react-dom": "^19.2.0"
|
|
231
217
|
},
|
|
@@ -240,6 +226,12 @@
|
|
|
240
226
|
"@mui/lab": "^7.0.1-beta.18",
|
|
241
227
|
"@number-flow/react": "^0.5.10",
|
|
242
228
|
"@phrase/i18next-backend": "^1.2.0",
|
|
229
|
+
"@tiptap/extension-image": "^3.7.0",
|
|
230
|
+
"@tiptap/extension-placeholder": "^3.7.0",
|
|
231
|
+
"@tiptap/extension-table": "^3.7.0",
|
|
232
|
+
"@tiptap/extension-underline": "^3.7.0",
|
|
233
|
+
"@tiptap/react": "^3.7.0",
|
|
234
|
+
"@tiptap/starter-kit": "^3.7.0",
|
|
243
235
|
"@use-it/event-listener": "^0.1.7",
|
|
244
236
|
"@zxcvbn-ts/core": "^3.0.4",
|
|
245
237
|
"@zxcvbn-ts/language-common": "^3.0.4",
|
|
@@ -254,6 +246,7 @@
|
|
|
254
246
|
"material-ui-popup-state": "^5.3.3",
|
|
255
247
|
"merge-sx": "^3.2.4",
|
|
256
248
|
"motion": "^12.0.6",
|
|
249
|
+
"mui-tiptap": "^1.28.1",
|
|
257
250
|
"react-hook-form": "^7.53.2",
|
|
258
251
|
"react-intersection-observer": "^9.16.0",
|
|
259
252
|
"react-number-format": "^5.4.3",
|