chordia-ui 3.2.6 → 3.2.8
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.
- package/dist/UploadInteraction.cjs.js +1 -1
- package/dist/UploadInteraction.cjs.js.map +1 -1
- package/dist/UploadInteraction.es.js +166 -121
- package/dist/UploadInteraction.es.js.map +1 -1
- package/dist/components/navigation.cjs.js +1 -1
- package/dist/components/navigation.cjs.js.map +1 -1
- package/dist/components/navigation.es.js +96 -86
- package/dist/components/navigation.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/navigation/Sidebar.jsx +27 -21
- package/src/components/onboarding/UploadInteraction.jsx +55 -2
- package/src/tokens/colors.css +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),x=require("react"),f=require("lucide-react"),l="var(--font-sans)",W={padding:"40px 48px",fontFamily:l,minHeight:"100vh",background:"var(--grey-white)",boxSizing:"border-box"},R={fontSize:"var(--text-4xl)",fontWeight:"var(--font-bold)",fontFamily:l,color:"var(--text-ink)",margin:0,letterSpacing:"var(--tracking-tight)",lineHeight:"var(--leading-tight)"},D={fontSize:14,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--color-text-secondary)",margin:"8px 0 0",fontFamily:l},F={display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginTop:"36px"},m={display:"flex",height:160,padding:24,flexDirection:"column",justifyContent:"space-between",alignItems:"flex-start",borderRadius:12,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",boxSizing:"border-box",transition:"var(--transition)",cursor:"default",gap:8},I={...m,boxShadow:"var(--shadow-sm)"},T={width:40,height:40,borderRadius:"var(--radius)",background:"var(--paper-secondary)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-base)"},H={color:"var(--grey-strong)",fontSize:20,fontStyle:"normal",fontWeight:600,lineHeight:"normal",fontFamily:l,margin:0},M={fontSize:13,fontStyle:"normal",fontWeight:400,lineHeight:"140%",color:"var(--text-base)",margin:0,fontFamily:l,flex:"1 0 0"},L={display:"flex",height:28,padding:10,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,background:"var(--grey-strong)",fontSize:14,fontStyle:"normal",fontWeight:600,lineHeight:1,fontFamily:l,color:"var(--grey-white)",border:"none",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",boxSizing:"border-box"},A={flex:1,height:8,borderRadius:4,background:"var(--border)",overflow:"hidden"},E=r=>({width:`${r}%`,height:"100%",borderRadius:4,background:"var(--color-green)",transition:"width 0.4s ease-out"}),U={display:"inline-flex",alignItems:"center",gap:4,fontSize:"var(--text-xs)",fontWeight:"var(--font-semibold)",color:"var(--rail-compliance)",fontFamily:l,marginLeft:12};function y({icon:r,title:g,description:n,buttonLabel:u,onAction:d,recommended:p,children:c}){const[h,s]=x.useState(!1);return e.jsxs("div",{style:h?I:m,onMouseEnter:()=>s(!0),onMouseLeave:()=>s(!1),children:[e.jsxs("div",{children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:T,children:r}),e.jsx("h3",{style:H,children:g})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,marginLeft:52,marginTop:4},children:[n&&e.jsx("p",{style:M,children:n}),c]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",marginLeft:52},children:[e.jsx("button",{style:L,onClick:d,onMouseEnter:o=>{o.currentTarget.style.opacity="0.85"},onMouseLeave:o=>{o.currentTarget.style.opacity="1"},children:u}),p&&e.jsxs("span",{style:U,children:[e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"})}),"Recommended"]})]})]})}const B=({userName:r="Will",stepsCompleted:g=4,totalSteps:n=6,onUpload:u,onContinue:d,onExplore:p,onConnect:c})=>{const h=g/n*100;return e.jsxs("div",{style:W,children:[e.jsxs("h1",{style:R,children:["Welcome ",r]}),e.jsx("p",{style:D,children:"Get started with your project or explore new features"}),e.jsxs("div",{style:F,children:[e.jsx(y,{icon:e.jsx(f.Upload,{size:24}),title:"Upload and Evaluate Audio",description:"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)",buttonLabel:"Upload",onAction:u}),e.jsx(y,{icon:e.jsx(f.CircleUser,{size:24}),title:"Getting started with Chordia",description:"Complete these steps to get the most out of Chordia.",buttonLabel:"Continue",onAction:d,children:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[e.jsx("div",{style:A,children:e.jsx("div",{style:E(h)})}),e.jsxs("span",{style:{fontSize:12,color:"var(--text-muted)",fontFamily:l,whiteSpace:"nowrap"},children:[e.jsx("strong",{style:{color:"var(--text-base)",fontWeight:600},children:g})," of ",n," steps completed"]})]})}),e.jsx(y,{icon:e.jsx(f.Compass,{size:24}),title:"Explore Demo Projects",description:"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.",buttonLabel:"Explore",onAction:p,recommended:!0}),e.jsx(y,{icon:e.jsx(f.Link2,{size:24}),title:"Connect Data Source",description:"Connect and integrate third-party tools with your external data sources.",buttonLabel:"Connect",onAction:c})]})]})},a="var(--font-sans)",$={fontFamily:a},P={fontSize:20,fontWeight:600,fontStyle:"normal",fontFamily:a,color:"var(--grey-strong)",margin:0,lineHeight:"normal"},q={fontSize:13,fontWeight:400,fontStyle:"normal",color:"var(--color-text-secondary)",fontFamily:a,margin:"4px 0 0",lineHeight:"140%"},j={display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",width:"100%",minHeight:320,borderRadius:16,border:"2px dashed var(--color-input-border)",background:"var(--grey-white)",boxSizing:"border-box",cursor:"pointer",transition:"var(--transition-fast)",marginTop:24,padding:"48px 24px"},O={...j,borderColor:"var(--color-green)",background:"var(--color-green-ring)"},V={width:80,height:80,borderRadius:9999,background:"var(--focus-2)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginBottom:20},G={fontSize:18,fontWeight:600,fontFamily:a,color:"var(--grey-strong)",textAlign:"center",lineHeight:"28px",margin:0},Y={display:"flex",height:32,padding:16,justifyContent:"center",alignItems:"center",gap:10,borderRadius:10,border:"1px solid var(--grey-absent)",background:"var(--grey-white)",fontSize:15,fontWeight:400,fontFamily:a,color:"var(--grey-strong)",cursor:"pointer",transition:"var(--transition-fast)",outline:"none",marginTop:16,boxSizing:"border-box"},N={fontSize:14,fontWeight:400,fontFamily:a,color:"var(--grey-muted)",textAlign:"center",marginTop:16,lineHeight:"140%"},X=({onFileSelect:r,showUploadQueuedMessage:g=!1,uploadSummary:n={successCount:0,failedCount:0,primaryFailureReason:""}})=>{const[u,d]=x.useState(!1),[p,c]=x.useState(!1),h=x.useRef(null),s=(n==null?void 0:n.successCount)||0,o=(n==null?void 0:n.failedCount)||0,w=(n==null?void 0:n.primaryFailureReason)||"",C=t=>{t.preventDefault(),d(!0)},z=()=>{d(!1)},S=t=>{var b;t.preventDefault(),d(!1),c(!1);const i=(b=t.dataTransfer)==null?void 0:b.files;i!=null&&i.length&&(r==null||r(i))},v=()=>{var t;(t=h.current)==null||t.click()},k=t=>{const i=t.target.files;i!=null&&i.length&&(c(!1),r==null||r(i)),t.target.value=""};return e.jsxs("div",{style:$,children:[e.jsx("h2",{style:P,children:"Evaluate Interaction"}),e.jsx("p",{style:q,children:"Upload interactions to generate insights, explore results, and identify patterns."}),e.jsx("input",{ref:h,type:"file",accept:"audio/mpeg,audio/wav,audio/x-ms-wma,audio/mp4,video/mp4,video/webm",multiple:!0,style:{display:"none"},onChange:k}),e.jsxs("div",{style:u?O:j,onDragOver:C,onDragLeave:z,onDrop:S,onClick:v,children:[e.jsx("div",{style:V,children:e.jsx(f.CloudUpload,{size:32,color:"var(--grey-strong)"})}),e.jsx("p",{style:G,children:"Drop your file here, or"}),e.jsx("button",{type:"button",style:Y,onClick:t=>{t.stopPropagation(),v()},onMouseEnter:t=>{t.currentTarget.style.background="var(--hover-warm-subtle)"},onMouseLeave:t=>{t.currentTarget.style.background="var(--grey-white)"},children:"Browse files"}),e.jsx("p",{style:N,children:"Supports: MP3, WAV, WMA, MP4, and WEBM"})]}),g&&!p&&e.jsxs("div",{style:{marginTop:16,borderRadius:10,border:"1px solid var(--border)",background:"var(--grey-light)",padding:"var(--spacing-2) var(--spacing-3)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:12},children:[e.jsx("p",{style:{fontSize:15,fontWeight:600,fontFamily:a,color:"var(--grey-strong)"},children:"Upload status"}),e.jsx("button",{type:"button",style:{display:"flex",alignItems:"center",justifyContent:"center",width:20,height:20,borderRadius:10,background:"var(--grey-light)",cursor:"pointer",border:"none",outline:"none",padding:0,margin:0},onClick:()=>c(!0),children:e.jsx(f.X,{size:14,color:"var(--grey-strong)"})})]}),e.jsx("p",{style:{fontSize:13,fontWeight:400,fontFamily:a,color:"var(--grey-strong)",marginTop:8},children:o>0&&s>0?`${s} file${s>1?"s are":" is"} successfully uploaded and ${o} file${o>1?"s are":" is"} failed.`:o>0?`${o} file${o>1?"s":""} failed to upload.`:s>1?`${s} files are queued for evaluation.`:"Your file is queued for evaluation."}),e.jsx("p",{className:"mt-1 text-xs text-gray-600",children:o>0?`Failed because ${w||"of a validation issue"}.`:"You can continue using the app while upload runs in the background. Results will appear in the project history once ready."})]})]})};exports.UploadEvaluate=B;exports.UploadInteraction=X;
|
|
2
2
|
//# sourceMappingURL=UploadInteraction.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadInteraction.cjs.js","sources":["../src/components/onboarding/UploadEvaluate.jsx","../src/components/onboarding/UploadInteraction.jsx"],"sourcesContent":["import { useState } from 'react';\nimport { Upload, CircleUser, Compass, Link2 } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n padding: '40px 48px',\n fontFamily: FF,\n minHeight: '100vh',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n};\n\nconst headingStyle = {\n fontSize: 'var(--text-4xl)',\n fontWeight: 'var(--font-bold)',\n fontFamily: FF,\n color: 'var(--text-ink)',\n margin: 0,\n letterSpacing: 'var(--tracking-tight)',\n lineHeight: 'var(--leading-tight)',\n};\n\nconst subtitleStyle = {\n fontSize: 14,\n fontStyle: 'normal',\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--color-text-secondary)',\n margin: '8px 0 0',\n fontFamily: FF,\n};\n\nconst gridStyle = {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n gap: 12,\n marginTop: '36px',\n};\n\nconst cardStyle = {\n display: 'flex',\n height: 160,\n padding: 24,\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'flex-start',\n borderRadius: 12,\n border: '1px solid var(--grey-absent)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n transition: 'var(--transition)',\n cursor: 'default',\n gap: 8\n};\n\nconst cardHoverStyle = {\n ...cardStyle,\n boxShadow: 'var(--shadow-sm)',\n};\n\nconst iconWrapperStyle = {\n width: 40,\n height: 40,\n borderRadius: 'var(--radius)',\n background: 'var(--paper-secondary)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--text-base)',\n};\n\nconst cardTitleStyle = {\n color: 'var(--grey-strong)',\n fontSize: 20,\n fontStyle: 'normal',\n fontWeight: 600,\n lineHeight: 'normal',\n fontFamily: FF,\n margin: 0,\n};\n\nconst cardDescStyle = {\n fontSize: 13,\n fontStyle: 'normal',\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--text-base)',\n margin: 0,\n fontFamily: FF,\n flex: '1 0 0',\n};\n\nconst btnStyle = {\n display: 'flex',\n height: 28,\n padding: 10,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n background: 'var(--grey-strong)',\n fontSize: 14,\n fontStyle: 'normal',\n fontWeight: 600,\n lineHeight: 1,\n fontFamily: FF,\n color: 'var(--grey-white)',\n border: 'none',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n boxSizing: 'border-box',\n};\n\nconst progressBarBg = {\n flex: 1,\n height: 8,\n borderRadius: 4,\n background: 'var(--border)',\n overflow: 'hidden',\n};\n\nconst progressBarFill = (pct) => ({\n width: `${pct}%`,\n height: '100%',\n borderRadius: 4,\n background: 'var(--color-green)',\n transition: 'width 0.4s ease-out',\n});\n\nconst recommendedBadge = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: 4,\n fontSize: 'var(--text-xs)',\n fontWeight: 'var(--font-semibold)',\n color: 'var(--rail-compliance)',\n fontFamily: FF,\n marginLeft: 12,\n};\n\n// ─── Card Component ───\n\nfunction OnboardingCard({ icon, title, description, buttonLabel, onAction, recommended, children }) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <div\n style={hovered ? cardHoverStyle : cardStyle}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n >\n <div>\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n <div style={iconWrapperStyle}>{icon}</div>\n <h3 style={cardTitleStyle}>{title}</h3>\n </div>\n <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginLeft: 52, marginTop: 4 }}>\n {description && <p style={cardDescStyle}>{description}</p>}\n {children}\n </div>\n </div>\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 52 }}>\n <button\n style={btnStyle}\n onClick={onAction}\n onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n >\n {buttonLabel}\n </button>\n {recommended && (\n <span style={recommendedBadge}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" /></svg>\n Recommended\n </span>\n )}\n </div>\n </div>\n );\n}\n\n// ─── Main Component ───\n\nconst UploadEvaluate = ({\n userName = 'Will',\n stepsCompleted = 4,\n totalSteps = 6,\n onUpload,\n onContinue,\n onExplore,\n onConnect,\n}) => {\n const progressPct = (stepsCompleted / totalSteps) * 100;\n\n return (\n <div style={containerStyle}>\n <h1 style={headingStyle}>Welcome {userName}</h1>\n <p style={subtitleStyle}>Get started with your project or explore new features</p>\n\n <div style={gridStyle}>\n {/* Upload and Evaluate Audio */}\n <OnboardingCard\n icon={<Upload size={24} />}\n title=\"Upload and Evaluate Audio\"\n description=\"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)\"\n buttonLabel=\"Upload\"\n onAction={onUpload}\n />\n\n {/* Getting started with Chordia */}\n <OnboardingCard\n icon={<CircleUser size={24} />}\n title=\"Getting started with Chordia\"\n description=\"Complete these steps to get the most out of Chordia.\"\n buttonLabel=\"Continue\"\n onAction={onContinue}\n >\n <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>\n <div style={progressBarBg}>\n <div style={progressBarFill(progressPct)} />\n </div>\n <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FF, whiteSpace: 'nowrap' }}>\n <strong style={{ color: 'var(--text-base)', fontWeight: 600 }}>{stepsCompleted}</strong> of {totalSteps} steps completed\n </span>\n </div>\n </OnboardingCard>\n\n {/* Explore Demo Projects */}\n <OnboardingCard\n icon={<Compass size={24} />}\n title=\"Explore Demo Projects\"\n description=\"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.\"\n buttonLabel=\"Explore\"\n onAction={onExplore}\n recommended\n />\n\n {/* Connect Data Source */}\n <OnboardingCard\n icon={<Link2 size={24} />}\n title=\"Connect Data Source\"\n description=\"Connect and integrate third-party tools with your external data sources.\"\n buttonLabel=\"Connect\"\n onAction={onConnect}\n />\n </div>\n </div>\n );\n};\n\nexport default UploadEvaluate;\n","import { useState, useRef } from 'react';\nimport { CloudUpload } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n fontFamily: FF,\n};\n\nconst sectionTitleStyle = {\n fontSize: 20,\n fontWeight: 600,\n fontStyle: 'normal',\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: 'normal',\n};\n\nconst sectionSubtitleStyle = {\n fontSize: 13,\n fontWeight: 400,\n fontStyle: 'normal',\n color: 'var(--color-text-secondary)',\n fontFamily: FF,\n margin: '4px 0 0',\n lineHeight: '140%',\n};\n\nconst dropzoneStyle = {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n minHeight: 320,\n borderRadius: 16,\n border: '2px dashed var(--color-input-border)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n marginTop: 24,\n padding: '48px 24px',\n};\n\nconst dropzoneHoverStyle = {\n ...dropzoneStyle,\n borderColor: 'var(--color-green)',\n background: 'var(--color-green-ring)',\n};\n\nconst dropzoneIconWrap = {\n width: 80,\n height: 80,\n borderRadius: 9999,\n background: 'var(--focus-2)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n marginBottom: 20,\n};\n\nconst dropzoneTextStyle = {\n fontSize: 18,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n textAlign: 'center',\n lineHeight: '28px',\n margin: 0,\n};\n\nconst browseButtonStyle = {\n display: 'flex',\n height: 32,\n padding: 16,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--grey-absent)',\n background: 'var(--grey-white)',\n fontSize: 15,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n marginTop: 16,\n boxSizing: 'border-box',\n};\n\nconst dropzoneHintStyle = {\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-muted)',\n textAlign: 'center',\n marginTop: 16,\n lineHeight: '140%',\n};\n\n// ─── Component ───\n\nconst UploadInteraction = ({ onFileSelect }) => {\n const [dragOver, setDragOver] = useState(false);\n const fileInputRef = useRef(null);\n\n const handleDragOver = (e) => {\n e.preventDefault();\n setDragOver(true);\n };\n\n const handleDragLeave = () => {\n setDragOver(false);\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n setDragOver(false);\n const files = e.dataTransfer?.files;\n if (files?.length) {\n onFileSelect?.(files);\n }\n };\n\n const handleBrowseClick = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = (e) => {\n const files = e.target.files;\n if (files?.length) {\n onFileSelect?.(files);\n }\n e.target.value = '';\n };\n\n return (\n <div style={containerStyle}>\n <h2 style={sectionTitleStyle}>Evaluate Interaction</h2>\n <p style={sectionSubtitleStyle}>\n Upload interactions to generate insights, explore results, and identify patterns.\n </p>\n\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\"audio/mpeg,audio/wav,audio/x-ms-wma,audio/mp4,video/mp4,video/webm\"\n multiple\n style={{ display: 'none' }}\n onChange={handleFileChange}\n />\n\n <div\n style={dragOver ? dropzoneHoverStyle : dropzoneStyle}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n onClick={handleBrowseClick}\n >\n <div style={dropzoneIconWrap}>\n <CloudUpload size={32} color=\"var(--grey-strong)\" />\n </div>\n <p style={dropzoneTextStyle}>Drop your file here, or</p>\n <button\n type=\"button\"\n style={browseButtonStyle}\n onClick={(e) => { e.stopPropagation(); handleBrowseClick(); }}\n onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}\n >\n Browse files\n </button>\n <p style={dropzoneHintStyle}>Supports: MP3, WAV, WMA, MP4, and WEBM</p>\n </div>\n </div>\n );\n};\n\nexport default UploadInteraction;\n"],"names":["FF","containerStyle","headingStyle","subtitleStyle","gridStyle","cardStyle","cardHoverStyle","iconWrapperStyle","cardTitleStyle","cardDescStyle","btnStyle","progressBarBg","progressBarFill","pct","recommendedBadge","OnboardingCard","icon","title","description","buttonLabel","onAction","recommended","children","hovered","setHovered","useState","jsxs","jsx","e","UploadEvaluate","userName","stepsCompleted","totalSteps","onUpload","onContinue","onExplore","onConnect","progressPct","Upload","CircleUser","Compass","Link2","sectionTitleStyle","sectionSubtitleStyle","dropzoneStyle","dropzoneHoverStyle","dropzoneIconWrap","dropzoneTextStyle","browseButtonStyle","dropzoneHintStyle","UploadInteraction","onFileSelect","dragOver","setDragOver","fileInputRef","useRef","handleDragOver","handleDragLeave","handleDrop","files","_a","handleBrowseClick","handleFileChange","CloudUpload"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UploadInteraction.cjs.js","sources":["../src/components/onboarding/UploadEvaluate.jsx","../src/components/onboarding/UploadInteraction.jsx"],"sourcesContent":["import { useState } from 'react';\nimport { Upload, CircleUser, Compass, Link2 } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n padding: '40px 48px',\n fontFamily: FF,\n minHeight: '100vh',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n};\n\nconst headingStyle = {\n fontSize: 'var(--text-4xl)',\n fontWeight: 'var(--font-bold)',\n fontFamily: FF,\n color: 'var(--text-ink)',\n margin: 0,\n letterSpacing: 'var(--tracking-tight)',\n lineHeight: 'var(--leading-tight)',\n};\n\nconst subtitleStyle = {\n fontSize: 14,\n fontStyle: 'normal',\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--color-text-secondary)',\n margin: '8px 0 0',\n fontFamily: FF,\n};\n\nconst gridStyle = {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr',\n gap: 12,\n marginTop: '36px',\n};\n\nconst cardStyle = {\n display: 'flex',\n height: 160,\n padding: 24,\n flexDirection: 'column',\n justifyContent: 'space-between',\n alignItems: 'flex-start',\n borderRadius: 12,\n border: '1px solid var(--grey-absent)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n transition: 'var(--transition)',\n cursor: 'default',\n gap: 8\n};\n\nconst cardHoverStyle = {\n ...cardStyle,\n boxShadow: 'var(--shadow-sm)',\n};\n\nconst iconWrapperStyle = {\n width: 40,\n height: 40,\n borderRadius: 'var(--radius)',\n background: 'var(--paper-secondary)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'var(--text-base)',\n};\n\nconst cardTitleStyle = {\n color: 'var(--grey-strong)',\n fontSize: 20,\n fontStyle: 'normal',\n fontWeight: 600,\n lineHeight: 'normal',\n fontFamily: FF,\n margin: 0,\n};\n\nconst cardDescStyle = {\n fontSize: 13,\n fontStyle: 'normal',\n fontWeight: 400,\n lineHeight: '140%',\n color: 'var(--text-base)',\n margin: 0,\n fontFamily: FF,\n flex: '1 0 0',\n};\n\nconst btnStyle = {\n display: 'flex',\n height: 28,\n padding: 10,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n background: 'var(--grey-strong)',\n fontSize: 14,\n fontStyle: 'normal',\n fontWeight: 600,\n lineHeight: 1,\n fontFamily: FF,\n color: 'var(--grey-white)',\n border: 'none',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n boxSizing: 'border-box',\n};\n\nconst progressBarBg = {\n flex: 1,\n height: 8,\n borderRadius: 4,\n background: 'var(--border)',\n overflow: 'hidden',\n};\n\nconst progressBarFill = (pct) => ({\n width: `${pct}%`,\n height: '100%',\n borderRadius: 4,\n background: 'var(--color-green)',\n transition: 'width 0.4s ease-out',\n});\n\nconst recommendedBadge = {\n display: 'inline-flex',\n alignItems: 'center',\n gap: 4,\n fontSize: 'var(--text-xs)',\n fontWeight: 'var(--font-semibold)',\n color: 'var(--rail-compliance)',\n fontFamily: FF,\n marginLeft: 12,\n};\n\n// ─── Card Component ───\n\nfunction OnboardingCard({ icon, title, description, buttonLabel, onAction, recommended, children }) {\n const [hovered, setHovered] = useState(false);\n\n return (\n <div\n style={hovered ? cardHoverStyle : cardStyle}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n >\n <div>\n <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n <div style={iconWrapperStyle}>{icon}</div>\n <h3 style={cardTitleStyle}>{title}</h3>\n </div>\n <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginLeft: 52, marginTop: 4 }}>\n {description && <p style={cardDescStyle}>{description}</p>}\n {children}\n </div>\n </div>\n <div style={{ display: 'flex', alignItems: 'center', marginLeft: 52 }}>\n <button\n style={btnStyle}\n onClick={onAction}\n onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}\n onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}\n >\n {buttonLabel}\n </button>\n {recommended && (\n <span style={recommendedBadge}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" /></svg>\n Recommended\n </span>\n )}\n </div>\n </div>\n );\n}\n\n// ─── Main Component ───\n\nconst UploadEvaluate = ({\n userName = 'Will',\n stepsCompleted = 4,\n totalSteps = 6,\n onUpload,\n onContinue,\n onExplore,\n onConnect,\n}) => {\n const progressPct = (stepsCompleted / totalSteps) * 100;\n\n return (\n <div style={containerStyle}>\n <h1 style={headingStyle}>Welcome {userName}</h1>\n <p style={subtitleStyle}>Get started with your project or explore new features</p>\n\n <div style={gridStyle}>\n {/* Upload and Evaluate Audio */}\n <OnboardingCard\n icon={<Upload size={24} />}\n title=\"Upload and Evaluate Audio\"\n description=\"Upload Audio Files to Run Evaluations: MP3, WMA or WAV (up to 50 files, max 325MB total)\"\n buttonLabel=\"Upload\"\n onAction={onUpload}\n />\n\n {/* Getting started with Chordia */}\n <OnboardingCard\n icon={<CircleUser size={24} />}\n title=\"Getting started with Chordia\"\n description=\"Complete these steps to get the most out of Chordia.\"\n buttonLabel=\"Continue\"\n onAction={onContinue}\n >\n <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>\n <div style={progressBarBg}>\n <div style={progressBarFill(progressPct)} />\n </div>\n <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FF, whiteSpace: 'nowrap' }}>\n <strong style={{ color: 'var(--text-base)', fontWeight: 600 }}>{stepsCompleted}</strong> of {totalSteps} steps completed\n </span>\n </div>\n </OnboardingCard>\n\n {/* Explore Demo Projects */}\n <OnboardingCard\n icon={<Compass size={24} />}\n title=\"Explore Demo Projects\"\n description=\"Explore how Chordia Compass transforms real data into insights with plans, dashboards, and evaluations.\"\n buttonLabel=\"Explore\"\n onAction={onExplore}\n recommended\n />\n\n {/* Connect Data Source */}\n <OnboardingCard\n icon={<Link2 size={24} />}\n title=\"Connect Data Source\"\n description=\"Connect and integrate third-party tools with your external data sources.\"\n buttonLabel=\"Connect\"\n onAction={onConnect}\n />\n </div>\n </div>\n );\n};\n\nexport default UploadEvaluate;\n","import { useState, useRef } from 'react';\nimport { CloudUpload, X } from 'lucide-react';\n\nconst FF = 'var(--font-sans)';\n\n// ─── Styles ───\n\nconst containerStyle = {\n fontFamily: FF,\n};\n\nconst sectionTitleStyle = {\n fontSize: 20,\n fontWeight: 600,\n fontStyle: 'normal',\n fontFamily: FF,\n color: 'var(--grey-strong)',\n margin: 0,\n lineHeight: 'normal',\n};\n\nconst sectionSubtitleStyle = {\n fontSize: 13,\n fontWeight: 400,\n fontStyle: 'normal',\n color: 'var(--color-text-secondary)',\n fontFamily: FF,\n margin: '4px 0 0',\n lineHeight: '140%',\n};\n\nconst dropzoneStyle = {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n minHeight: 320,\n borderRadius: 16,\n border: '2px dashed var(--color-input-border)',\n background: 'var(--grey-white)',\n boxSizing: 'border-box',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n marginTop: 24,\n padding: '48px 24px',\n};\n\nconst dropzoneHoverStyle = {\n ...dropzoneStyle,\n borderColor: 'var(--color-green)',\n background: 'var(--color-green-ring)',\n};\n\nconst dropzoneIconWrap = {\n width: 80,\n height: 80,\n borderRadius: 9999,\n background: 'var(--focus-2)',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n marginBottom: 20,\n};\n\nconst dropzoneTextStyle = {\n fontSize: 18,\n fontWeight: 600,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n textAlign: 'center',\n lineHeight: '28px',\n margin: 0,\n};\n\nconst browseButtonStyle = {\n display: 'flex',\n height: 32,\n padding: 16,\n justifyContent: 'center',\n alignItems: 'center',\n gap: 10,\n borderRadius: 10,\n border: '1px solid var(--grey-absent)',\n background: 'var(--grey-white)',\n fontSize: 15,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-strong)',\n cursor: 'pointer',\n transition: 'var(--transition-fast)',\n outline: 'none',\n marginTop: 16,\n boxSizing: 'border-box',\n};\n\nconst dropzoneHintStyle = {\n fontSize: 14,\n fontWeight: 400,\n fontFamily: FF,\n color: 'var(--grey-muted)',\n textAlign: 'center',\n marginTop: 16,\n lineHeight: '140%',\n};\n\n// ─── Component ───\n\nconst UploadInteraction = ({\n onFileSelect,\n showUploadQueuedMessage = false,\n uploadSummary = { successCount: 0, failedCount: 0, primaryFailureReason: '' },\n}) => {\n const [dragOver, setDragOver] = useState(false);\n const [isStatusDismissed, setIsStatusDismissed] = useState(false);\n const fileInputRef = useRef(null);\n const successCount = uploadSummary?.successCount || 0;\n const failedCount = uploadSummary?.failedCount || 0;\n const primaryFailureReason = uploadSummary?.primaryFailureReason || '';\n\n const handleDragOver = (e) => {\n e.preventDefault();\n setDragOver(true);\n };\n\n const handleDragLeave = () => {\n setDragOver(false);\n };\n\n const handleDrop = (e) => {\n e.preventDefault();\n setDragOver(false);\n setIsStatusDismissed(false);\n const files = e.dataTransfer?.files;\n if (files?.length) {\n onFileSelect?.(files);\n }\n };\n\n const handleBrowseClick = () => {\n fileInputRef.current?.click();\n };\n\n const handleFileChange = (e) => {\n const files = e.target.files;\n if (files?.length) {\n setIsStatusDismissed(false);\n onFileSelect?.(files);\n }\n e.target.value = '';\n };\n\n return (\n <div style={containerStyle}>\n <h2 style={sectionTitleStyle}>Evaluate Interaction</h2>\n <p style={sectionSubtitleStyle}>\n Upload interactions to generate insights, explore results, and identify patterns.\n </p>\n\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\"audio/mpeg,audio/wav,audio/x-ms-wma,audio/mp4,video/mp4,video/webm\"\n multiple\n style={{ display: 'none' }}\n onChange={handleFileChange}\n />\n\n <div\n style={dragOver ? dropzoneHoverStyle : dropzoneStyle}\n onDragOver={handleDragOver}\n onDragLeave={handleDragLeave}\n onDrop={handleDrop}\n onClick={handleBrowseClick}\n >\n <div style={dropzoneIconWrap}>\n <CloudUpload size={32} color=\"var(--grey-strong)\" />\n </div>\n <p style={dropzoneTextStyle}>Drop your file here, or</p>\n <button\n type=\"button\"\n style={browseButtonStyle}\n onClick={(e) => { e.stopPropagation(); handleBrowseClick(); }}\n onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}\n onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}\n >\n Browse files\n </button>\n <p style={dropzoneHintStyle}>Supports: MP3, WAV, WMA, MP4, and WEBM</p>\n </div>\n\n {showUploadQueuedMessage && !isStatusDismissed && (\n <div \n style={{\n marginTop: 16,\n borderRadius: 10,\n border: '1px solid var(--border)',\n background: 'var(--grey-light)',\n padding: 'var(--spacing-2) var(--spacing-3)',\n }}>\n <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>\n <p style={{ fontSize: 15, fontWeight: 600, fontFamily: FF, color: 'var(--grey-strong)' }}>Upload status</p>\n <button\n type=\"button\"\n style={{ \n display: 'flex',\n alignItems: 'center', justifyContent: 'center', width: 20, height: 20, borderRadius: 10, background: 'var(--grey-light)', cursor: 'pointer',\n border: 'none',\n outline: 'none',\n padding: 0,\n margin: 0,\n }}\n onClick={() => setIsStatusDismissed(true)}\n >\n <X size={14} color=\"var(--grey-strong)\" />\n </button>\n </div>\n <p style={{ fontSize: 13, fontWeight: 400, fontFamily: FF, color: 'var(--grey-strong)', marginTop: 8 }}>\n {failedCount > 0 && successCount > 0\n ? `${successCount} file${successCount > 1 ? 's are' : ' is'} successfully uploaded and ${failedCount} file${failedCount > 1 ? 's are' : ' is'} failed.`\n : failedCount > 0\n ? `${failedCount} file${failedCount > 1 ? 's' : ''} failed to upload.`\n : successCount > 1\n ? `${successCount} files are queued for evaluation.`\n : 'Your file is queued for evaluation.'}\n </p>\n <p className=\"mt-1 text-xs text-gray-600\">\n {failedCount > 0\n ? `Failed because ${primaryFailureReason || 'of a validation issue'}.`\n : 'You can continue using the app while upload runs in the background. Results will appear in the project history once ready.'}\n </p>\n </div>\n )}\n </div>\n );\n};\n\nexport default UploadInteraction;\n"],"names":["FF","containerStyle","headingStyle","subtitleStyle","gridStyle","cardStyle","cardHoverStyle","iconWrapperStyle","cardTitleStyle","cardDescStyle","btnStyle","progressBarBg","progressBarFill","pct","recommendedBadge","OnboardingCard","icon","title","description","buttonLabel","onAction","recommended","children","hovered","setHovered","useState","jsxs","jsx","e","UploadEvaluate","userName","stepsCompleted","totalSteps","onUpload","onContinue","onExplore","onConnect","progressPct","Upload","CircleUser","Compass","Link2","sectionTitleStyle","sectionSubtitleStyle","dropzoneStyle","dropzoneHoverStyle","dropzoneIconWrap","dropzoneTextStyle","browseButtonStyle","dropzoneHintStyle","UploadInteraction","onFileSelect","showUploadQueuedMessage","uploadSummary","dragOver","setDragOver","isStatusDismissed","setIsStatusDismissed","fileInputRef","useRef","successCount","failedCount","primaryFailureReason","handleDragOver","handleDragLeave","handleDrop","files","_a","handleBrowseClick","handleFileChange","CloudUpload","X"],"mappings":"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"}
|