chordia-ui 3.2.2 → 3.2.3

package/src/components/onboarding/GettingStarted.jsx

@@ -0,0 +1,520 @@
+import { useState } from 'react';
+import { MessageSquare, Database, Users, BookOpen, SlidersHorizontal, Briefcase } from 'lucide-react';
+import UploadInteraction from './UploadInteraction';
+import ConnectData from './ConnectData';
+
+const FF = 'var(--font-sans)';
+
+// ─── Steps Configuration ───
+
+const DEFAULT_STEPS = [
+  { id: 'workspace', label: 'Workspace Name', description: 'Give your project a title.', icon: Briefcase },
+  { id: 'interaction', label: 'Add Interaction', description: 'Connect data to see patterns.', icon: MessageSquare },
+  { id: 'connect', label: 'Connect Data', description: 'Link your platform for auto-evaluation.', icon: Database },
+  { id: 'invite', label: 'Invite Team', description: 'Add members to collaborate.', icon: Users },
+  { id: 'concepts', label: 'Learn Concepts', description: 'Explore conditions and evidence.', icon: BookOpen },
+  { id: 'scope', label: 'Define Scope', description: 'Customize evaluation signals.', icon: SlidersHorizontal },
+];
+
+// ─── Styles ───
+
+const pageStyle = {
+  fontFamily: FF,
+  background: 'var(--grey-white)',
+  minHeight: '100vh',
+  boxSizing: 'border-box',
+};
+
+const headerStyle = {
+  padding: '24px 48px',
+  borderBottom: '1px solid var(--border)',
+  background: 'var(--grey-white)',
+};
+
+const headerTopRow = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: 8,
+};
+
+const titleStyle = {
+  fontSize: 24,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  fontFamily: FF,
+  color: 'var(--grey-strong)',
+  margin: 0,
+  lineHeight: 'normal',
+};
+
+const subtitleStyle = {
+  fontSize: 14,
+  fontWeight: 400,
+  lineHeight: '140%',
+  color: 'var(--text-muted)',
+  margin: '4px 0 0',
+  fontFamily: FF,
+};
+
+const headerActions = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+};
+
+const remindBtnStyle = {
+  display: 'flex',
+  height: 36,
+  padding: '0 16px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 10,
+  background: 'transparent',
+  border: '1px solid var(--border-strong)',
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: FF,
+  color: 'var(--text-base)',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  outline: 'none',
+};
+
+const saveBtnStyle = {
+  display: 'flex',
+  height: 36,
+  padding: '0 20px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 10,
+  background: 'var(--grey-strong)',
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: FF,
+  color: 'var(--grey-white)',
+  border: 'none',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  outline: 'none',
+};
+
+const progressBarBg = {
+  width: '100%',
+  height: 6,
+  borderRadius: 3,
+  background: 'var(--border)',
+  overflow: 'hidden',
+  marginTop: 12,
+};
+
+const progressBarFill = (pct) => ({
+  width: `${pct}%`,
+  height: '100%',
+  borderRadius: 3,
+  background: 'var(--color-green)',
+  transition: 'width 0.4s ease-out',
+});
+
+const bodyStyle = {
+  display: 'flex',
+  flex: 1,
+  minHeight: 'calc(100vh - 140px)',
+};
+
+// ─── Sidebar Styles ───
+
+const sidebarStyle = {
+  width: 312,
+  minWidth: 312,
+  borderRight: '1px solid var(--border)',
+  padding: '24px 24px',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+};
+
+const stepsCountStyle = {
+  fontSize: 13,
+  fontWeight: 500,
+  color: 'var(--text-muted)',
+  fontFamily: FF,
+  margin: '0 0 12px',
+};
+
+const stepsListStyle = {
+  display: 'flex',
+  width: 264,
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: 8,
+  alignSelf: 'stretch',
+};
+
+const stepItemStyle = (isActive) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: '8px 4px',
+  cursor: 'pointer',
+  transition: 'var(--transition-fast)',
+  background: isActive ? 'var(--hover-warm)' : 'var(--grey-white)',
+  borderRadius: 8,
+  alignSelf: 'stretch',
+});
+
+const stepIconWrap = {
+  width: 40,
+  height: 40,
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+const stepLabelStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  color: 'var(--grey-strong)',
+  fontFamily: FF,
+  margin: 0,
+  lineHeight: '120%',
+};
+
+const stepDescStyle = {
+  fontSize: 12,
+  fontWeight: 400,
+  color: 'var(--text-muted)',
+  fontFamily: FF,
+  margin: '2px 0 0',
+  lineHeight: 1.3,
+};
+
+// ─── Content Styles ───
+
+const contentStyle = {
+  flex: 1,
+  padding: '40px 48px',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+};
+
+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 fieldLabelStyle = {
+  fontSize: 16,
+  fontWeight: 600,
+  fontStyle: 'normal',
+  color: 'var(--grey-strong)',
+  fontFamily: FF,
+  lineHeight: 'normal',
+  margin: 0,
+  display: 'block',
+};
+
+const inputStyle = {
+  width: '100%',
+  height: 44,
+  padding: '0 14px',
+  borderRadius: 6,
+  border: '1px solid var(--color-input-border)',
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  lineHeight: 'normal',
+  fontFamily: FF,
+  color: 'var(--color-text-secondary)',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+  outline: 'none',
+  transition: 'var(--transition-fast)',
+};
+
+const textareaWrapStyle = {
+  position: 'relative',
+  marginTop: 8,
+};
+
+const textareaStyle = {
+  width: '100%',
+  minHeight: 160,
+  padding: '12px 14px 28px 14px',
+  borderRadius: 6,
+  border: '1px solid var(--color-input-border)',
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: 'normal',
+  lineHeight: 'normal',
+  fontFamily: FF,
+  color: 'var(--color-text-secondary)',
+  background: 'var(--grey-white)',
+  boxSizing: 'border-box',
+  outline: 'none',
+  resize: 'vertical',
+  lineHeight: '140%',
+  transition: 'var(--transition-fast)',
+};
+
+const charCountStyle = {
+  position: 'absolute',
+  bottom: 10,
+  right: 14,
+  fontSize: 12,
+  fontWeight: 400,
+  color: 'var(--text-faint)',
+  fontFamily: FF,
+  margin: 0,
+  pointerEvents: 'none',
+};
+
+// ─── Step Indicator Icons ───
+
+function CompletedIcon() {
+  return (
+    <div
+      style={{
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        background: 'var(--grey-strong)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path d="M2.5 7.5L5.5 10.5L11.5 4" stroke="var(--grey-white)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </div>
+  );
+}
+
+function IncompleteIcon() {
+  return (
+    <div
+      style={{
+        width: 24,
+        height: 24,
+        borderRadius: '50%',
+        border: '2px solid var(--grey-muted)',
+        background: 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        gap: 2,
+        boxSizing: 'border-box',
+      }}
+    >
+      <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />
+      <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />
+      <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--grey-muted)' }} />
+    </div>
+  );
+}
+
+// ─── Step Item Component ───
+
+function StepItem({ step, isCompleted, isActive, onClick }) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      style={{
+        ...stepItemStyle(isActive),
+        ...(hovered && !isActive ? { background: 'var(--hover-warm-subtle)' } : {}),
+      }}
+      onClick={onClick}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <div style={stepIconWrap}>
+        {isCompleted ? <CompletedIcon /> : <IncompleteIcon />}
+      </div>
+      <div>
+        <p style={stepLabelStyle}>{step.label}</p>
+        <p style={stepDescStyle}>{step.description}</p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Workspace Name Step Content ───
+
+function WorkspaceNameContent({ workspaceName, setWorkspaceName, description, setDescription, maxDescLength }) {
+  const [nameFocused, setNameFocused] = useState(false);
+  const [descFocused, setDescFocused] = useState(false);
+
+  return (
+    <div>
+      <h2 style={sectionTitleStyle}>Name of your workspace</h2>
+      <p style={sectionSubtitleStyle}>Tell us about the project or company you're organizing here.</p>
+
+      <div style={{ marginTop: 28 }}>
+        <label style={fieldLabelStyle}>Workspace Name</label>
+        <input
+          type="text"
+          placeholder="e.g. Acme Marketing"
+          value={workspaceName}
+          onChange={(e) => setWorkspaceName(e.target.value)}
+          onFocus={() => setNameFocused(true)}
+          onBlur={() => setNameFocused(false)}
+          style={{
+            ...inputStyle,
+            marginTop: 8,
+            borderColor: nameFocused ? 'var(--color-green)' : 'var(--color-input-border)',
+            boxShadow: nameFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',
+          }}
+        />
+      </div>
+
+      <div style={{ marginTop: 24 }}>
+        <label style={fieldLabelStyle}>Description</label>
+        <div style={textareaWrapStyle}>
+          <textarea
+            placeholder="what's the goal of this workspace?"
+            value={description}
+            onChange={(e) => {
+              if (e.target.value.length <= maxDescLength) {
+                setDescription(e.target.value);
+              }
+            }}
+            onFocus={() => setDescFocused(true)}
+            onBlur={() => setDescFocused(false)}
+            style={{
+              ...textareaStyle,
+              borderColor: descFocused ? 'var(--color-green)' : 'var(--color-input-border)',
+              boxShadow: descFocused ? '0 0 0 3px var(--color-green-ring)' : 'none',
+            }}
+          />
+          <span style={charCountStyle}>{description.length}/{maxDescLength}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Component ───
+
+const GettingStarted = ({
+  steps = DEFAULT_STEPS,
+  completedSteps = ['workspace', 'invite'],
+  initialActiveStep = 'workspace',
+  onSaveNext,
+  onRemindLater,
+  onStepChange,
+}) => {
+  const [activeStepId, setActiveStepId] = useState(initialActiveStep);
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [description, setDescription] = useState('');
+  const maxDescLength = 1000;
+
+  const completedCount = completedSteps.length;
+  const totalCount = steps.length;
+  const progressPct = (completedCount / totalCount) * 100;
+
+  const handleStepClick = (stepId) => {
+    setActiveStepId(stepId);
+    onStepChange?.(stepId);
+  };
+
+  const handleSaveNext = () => {
+    onSaveNext?.({ stepId: activeStepId, workspaceName, description });
+  };
+
+  return (
+    <div style={pageStyle}>
+      {/* Header */}
+      <div style={headerStyle}>
+        <div style={headerTopRow}>
+          <div>
+            <h1 style={titleStyle}>Getting started with Chordia</h1>
+            <p style={subtitleStyle}>Complete these steps to get the most out of Chordia.</p>
+          </div>
+          <div style={headerActions}>
+            <button
+              style={remindBtnStyle}
+              onClick={onRemindLater}
+              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--hover-warm-subtle)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
+            >
+              Remind me Later
+            </button>
+            <button
+              style={saveBtnStyle}
+              onClick={handleSaveNext}
+              onMouseEnter={(e) => { e.currentTarget.style.opacity = '0.85'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.opacity = '1'; }}
+            >
+              Save &amp; Next
+            </button>
+          </div>
+        </div>
+        <div style={progressBarBg}>
+          <div style={progressBarFill(progressPct)} />
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={bodyStyle}>
+        {/* Sidebar */}
+        <div style={sidebarStyle}>
+          <p style={stepsCountStyle}>
+            {completedCount} of {totalCount} steps completed
+          </p>
+          <div style={stepsListStyle}>
+            {steps.map((step) => (
+              <StepItem
+                key={step.id}
+                step={step}
+                isCompleted={completedSteps.includes(step.id)}
+                isActive={activeStepId === step.id}
+                onClick={() => handleStepClick(step.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div style={contentStyle}>
+          {activeStepId === 'workspace' && (
+            <WorkspaceNameContent
+              workspaceName={workspaceName}
+              setWorkspaceName={setWorkspaceName}
+              description={description}
+              setDescription={setDescription}
+              maxDescLength={maxDescLength}
+            />
+          )}
+          {activeStepId === 'interaction' && (
+            <UploadInteraction />
+          )}
+          {activeStepId === 'connect' && (
+            <ConnectData />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GettingStarted;