chordia-ui 3.2.2 → 3.2.3

package/src/components/onboarding/UploadEvaluate.jsx

@@ -0,0 +1,255 @@
+import { useState } from 'react';
+import { Upload, CircleUser, Compass, Link2 } from 'lucide-react';
+
+const FF = 'var(--font-sans)';
+
+// ─── Styles ───
+
+const containerStyle = {
+  padding: '40px 48px',
+  fontFamily: FF,
+  minHeight: '100vh',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+};
+
+const headingStyle = {
+  fontSize: 'var(--text-4xl)',
+  fontWeight: 'var(--font-bold)',
+  fontFamily: FF,
+  color: 'var(--text-ink)',
+  margin: 0,
+  letterSpacing: 'var(--tracking-tight)',
+  lineHeight: 'var(--leading-tight)',
+};
+
+const subtitleStyle = {
+  fontSize: 14,
+  fontStyle: 'normal',
+  fontWeight: 400,
+  lineHeight: '140%',
+  color: 'var(--color-text-secondary)',
+  margin: '8px 0 0',
+  fontFamily: FF,
+};
+
+const gridStyle = {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: 12,
+  marginTop: '36px',
+};
+
+const cardStyle = {
+  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
+};
+
+const cardHoverStyle = {
+  ...cardStyle,
+  boxShadow: 'var(--shadow-sm)',
+};
+
+const iconWrapperStyle = {
+  width: 40,
+  height: 40,
+  borderRadius: 'var(--radius)',
+  background: 'var(--paper-secondary)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--text-base)',
+};
+
+const cardTitleStyle = {
+  color: 'var(--grey-strong)',
+  fontSize: 20,
+  fontStyle: 'normal',
+  fontWeight: 600,
+  lineHeight: 'normal',
+  fontFamily: FF,
+  margin: 0,
+};
+
+const cardDescStyle = {
+  fontSize: 13,
+  fontStyle: 'normal',
+  fontWeight: 400,
+  lineHeight: '140%',
+  color: 'var(--text-base)',
+  margin: 0,
+  fontFamily: FF,
+  flex: '1 0 0',
+};
+
+const btnStyle = {
+  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: FF,
+  color: 'var(--grey-white)',
+  border: 'none',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  outline: 'none',
+  boxSizing: 'border-box',
+};
+
+const progressBarBg = {
+  flex: 1,
+  height: 8,
+  borderRadius: 4,
+  background: 'var(--border)',
+  overflow: 'hidden',
+};
+
+const progressBarFill = (pct) => ({
+  width: `${pct}%`,
+  height: '100%',
+  borderRadius: 4,
+  background: 'var(--color-green)',
+  transition: 'width 0.4s ease-out',
+});
+
+const recommendedBadge = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  fontSize: 'var(--text-xs)',
+  fontWeight: 'var(--font-semibold)',
+  color: 'var(--rail-compliance)',
+  fontFamily: FF,
+  marginLeft: 12,
+};
+
+// ─── Card Component ───
+
+function OnboardingCard({ icon, title, description, buttonLabel, onAction, recommended, children }) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      style={hovered ? cardHoverStyle : cardStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <div style={iconWrapperStyle}>{icon}</div>
+          <h3 style={cardTitleStyle}>{title}</h3>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginLeft: 52, marginTop: 4 }}>
+          {description && <p style={cardDescStyle}>{description}</p>}
+          {children}
+        </div>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', marginLeft: 52 }}>
+        <button
+          style={btnStyle}
+          onClick={onAction}
+          onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}
+          onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+        >
+          {buttonLabel}
+        </button>
+        {recommended && (
+          <span style={recommendedBadge}>
+            <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>
+            Recommended
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ───
+
+const UploadEvaluate = ({
+  userName = 'Will',
+  stepsCompleted = 4,
+  totalSteps = 6,
+  onUpload,
+  onContinue,
+  onExplore,
+  onConnect,
+}) => {
+  const progressPct = (stepsCompleted / totalSteps) * 100;
+
+  return (
+    <div style={containerStyle}>
+      <h1 style={headingStyle}>Welcome {userName}</h1>
+      <p style={subtitleStyle}>Get started with your project or explore new features</p>
+
+      <div style={gridStyle}>
+        {/* Upload and Evaluate Audio */}
+        <OnboardingCard
+          icon={<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={onUpload}
+        />
+
+        {/* Getting started with Chordia */}
+        <OnboardingCard
+          icon={<CircleUser size={24} />}
+          title="Getting started with Chordia"
+          description="Complete these steps to get the most out of Chordia."
+          buttonLabel="Continue"
+          onAction={onContinue}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
+            <div style={progressBarBg}>
+              <div style={progressBarFill(progressPct)} />
+            </div>
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FF, whiteSpace: 'nowrap' }}>
+              <strong style={{ color: 'var(--text-base)', fontWeight: 600 }}>{stepsCompleted}</strong> of {totalSteps} steps completed
+            </span>
+          </div>
+        </OnboardingCard>
+
+        {/* Explore Demo Projects */}
+        <OnboardingCard
+          icon={<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={onExplore}
+          recommended
+        />
+
+        {/* Connect Data Source */}
+        <OnboardingCard
+          icon={<Link2 size={24} />}
+          title="Connect Data Source"
+          description="Connect and integrate third-party tools with your external data sources."
+          buttonLabel="Connect"
+          onAction={onConnect}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UploadEvaluate;

package/src/components/onboarding/UploadInteraction.jsx

@@ -0,0 +1,186 @@
+import { useState, useRef } from 'react';
+import { CloudUpload } from 'lucide-react';
+
+const FF = 'var(--font-sans)';
+
+// ─── Styles ───
+
+const containerStyle = {
+  fontFamily: FF,
+};
+
+const sectionTitleStyle = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  margin: 0,
+  lineHeight: 'normal',
+};
+
+const sectionSubtitleStyle = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  color: 'var(--color-text-secondary)',
+  fontFamily: FF,
+  margin: '4px 0 0',
+  lineHeight: '140%',
+};
+
+const dropzoneStyle = {
+  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',
+};
+
+const dropzoneHoverStyle = {
+  ...dropzoneStyle,
+  borderColor: 'var(--color-green)',
+  background: 'var(--color-green-ring)',
+};
+
+const dropzoneIconWrap = {
+  width: 80,
+  height: 80,
+  borderRadius: 9999,
+  background: 'var(--focus-2)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  marginBottom: 20,
+};
+
+const dropzoneTextStyle = {
+  fontSize: 18,
+  fontWeight: 600,
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  textAlign: 'center',
+  lineHeight: '28px',
+  margin: 0,
+};
+
+const browseButtonStyle = {
+  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: FF,
+  color: 'var(--grey-strong)',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  outline: 'none',
+  marginTop: 16,
+  boxSizing: 'border-box',
+};
+
+const dropzoneHintStyle = {
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: FF,
+  color: 'var(--grey-muted)',
+  textAlign: 'center',
+  marginTop: 16,
+  lineHeight: '140%',
+};
+
+// ─── Component ───
+
+const UploadInteraction = ({ onFileSelect }) => {
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragOver(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const files = e.dataTransfer?.files;
+    if (files?.length) {
+      onFileSelect?.(files);
+    }
+  };
+
+  const handleBrowseClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e) => {
+    const files = e.target.files;
+    if (files?.length) {
+      onFileSelect?.(files);
+    }
+    e.target.value = '';
+  };
+
+  return (
+    <div style={containerStyle}>
+      <h2 style={sectionTitleStyle}>Evaluate Interaction</h2>
+      <p style={sectionSubtitleStyle}>
+        Upload another interaction to compare results and identify patterns across multiple evaluations.
+      </p>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".mp3,.wma,.wav"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+      />
+
+      <div
+        style={dragOver ? dropzoneHoverStyle : dropzoneStyle}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleBrowseClick}
+      >
+        <div style={dropzoneIconWrap}>
+          <CloudUpload size={32} color="var(--grey-strong)" />
+        </div>
+        <p style={dropzoneTextStyle}>Drop your file here, or</p>
+        <button
+          type="button"
+          style={browseButtonStyle}
+          onClick={(e) => { e.stopPropagation(); handleBrowseClick(); }}
+          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}
+          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--grey-white)'; }}
+        >
+          Browse files
+        </button>
+        <p style={dropzoneHintStyle}>Supports: MP3, WMA or WAV</p>
+      </div>
+    </div>
+  );
+};
+
+export default UploadInteraction;

package/src/tokens/colors.css

@@ -187,6 +187,19 @@
     --color-error-ring: rgba(237, 128, 119, 0.12);
     --color-error-bg: #F3F7F7;
 
+    /* ============================================
+       GREY SCALE (Figma Chordia Colors)
+       ============================================ */
+    --grey-white: #FFFFFF;
+    --grey-absent: #D9D9D9;
+    --grey-muted: #BDBDBD;
+    --grey-strong: var(--color-text);
+
+    /* ============================================
+       FOCUS / WARM SURFACES
+       ============================================ */
+    --focus-2: #FAF5E9;
+
     /* ============================================
        GRADIENTS
        ============================================ */