@altruist03/ui 0.1.0 → 0.2.0

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { ToggleButton } from './ToggleButton';
+import type { ToggleButtonOption, ToggleButtonProps } from './ToggleButton.types';
+
+const options: ToggleButtonOption[] = [
+  { value: '1d', label: '1D' },
+  { value: '1w', label: '1W' },
+  { value: '1m', label: '1M' },
+  { value: '3m', label: '3M' },
+  { value: '6m', label: '6M' },
+];
+
+const meta: Meta<typeof ToggleButton> = {
+  title: 'Design System/ToggleButton',
+  component: ToggleButton,
+  tags: [],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '24px', maxWidth: '420px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    options,
+    value: '1m',
+    size: 'sm',
+    disabled: false,
+    color: 'grey',
+  } as ToggleButtonProps,
+  argTypes: {
+    color: {
+      control: { type: 'radio' },
+      options: ['grey', 'white'],
+    },
+    value: {
+      control: { type: 'radio' },
+      options: options.map((opt) => opt.value),
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+    },
+    onChange: { action: 'changed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleButton>;
+
+export const Playground: Story = {
+  render: function PlaygroundRender(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <ToggleButton
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    );
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <ToggleButton options={options} value="1m" onChange={() => {}} />
+      <ToggleButton options={options} value="1w" onChange={() => {}} size="md" />
+      <ToggleButton options={options} value="6m" onChange={() => {}} size="lg" />
+      <ToggleButton options={options} value="1m" onChange={() => {}} disabled />
+      <ToggleButton
+        options={[
+          { value: '1d', label: '1D' },
+          { value: '1w', label: '1W', disabled: true },
+          { value: '1m', label: '1M' },
+        ]}
+        value="1m"
+        onChange={() => {}}
+      />
+
+      {/* Color: white */}
+      <ToggleButton options={options} value="1m" onChange={() => {}} color="white" />
+
+      {/* Pill variant */}
+      <ToggleButton
+        options={[
+          { value: 'view', label: 'View' },
+          { value: 'edit', label: 'Edit' },
+        ]}
+        value="view"
+        onChange={() => {}}
+        variant="pill"
+        size="md"
+      />
+    </div>
+  ),
+};

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,267 @@
+import React, { useState } from 'react';
+
+import { Button } from '../Button/Button';
+import { getToggleButtonTokensFromResolved } from '../../tokens';
+import type { ToggleButtonProps } from './ToggleButton.types';
+import { useTokens } from '../../ThemeProvider/ThemeContext';
+
+function parsePx(value: string): number {
+  const num = parseInt(String(value).replace(/px$/i, ''), 10);
+  return Number.isFinite(num) ? num : 0;
+}
+
+export const ToggleButton = ({
+  options,
+  value,
+  onChange,
+  size = 'sm',
+  color = 'grey',
+  variant = 'default',
+  disabled = false,
+  getOptionDisabled,
+  style,
+  ...rest
+}: ToggleButtonProps) => {
+  const resolvedTokens = useTokens();
+  const t = getToggleButtonTokensFromResolved(resolvedTokens);
+  const sizeTokens =
+    size === 'lg' ?
+      {
+        height: t.sizeLgHeight,
+        paddingX: t.sizeLgPaddingX,
+        paddingY: t.sizeLgPaddingY,
+        fontSize: t.sizeLgFontSize,
+        borderRadius: t.sizeLgBorderRadius,
+        borderWidth: t.sizeLgBorderWidth,
+      }
+    : size === 'md' ?
+      {
+        height: t.sizeMdHeight,
+        paddingX: t.sizeMdPaddingX,
+        paddingY: t.sizeMdPaddingY,
+        fontSize: t.sizeMdFontSize,
+        borderRadius: t.sizeMdBorderRadius,
+        borderWidth: t.sizeMdBorderWidth,
+      }
+    : {
+        height: t.sizeSmHeight,
+        paddingX: t.sizeSmPaddingX,
+        paddingY: t.sizeSmPaddingY,
+        fontSize: t.sizeSmFontSize,
+        borderRadius: t.sizeSmBorderRadius,
+        borderWidth: t.sizeSmBorderWidth,
+      };
+
+  if (variant === 'pill') {
+    return (
+      <PillToggleButton
+        options={options}
+        value={value}
+        onChange={onChange}
+        sizeTokens={sizeTokens}
+        tokens={t}
+        color={color}
+        disabled={disabled}
+        getOptionDisabled={getOptionDisabled}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  return (
+    <div
+      role="group"
+      aria-disabled={disabled}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: t.gap,
+        ...style,
+      }}
+      {...rest}
+    >
+      {options.map((option, index) => {
+        const isSelected = option.value === value;
+        const isOptionDisabled =
+          disabled || option.disabled || getOptionDisabled?.(option) === true;
+        const inactiveBackground =
+          color === 'white' ? t.inactive.backgroundWhite : t.inactive.background;
+        const borderColor = isSelected ? t.active.border : t.inactive.border;
+        const fontWeight = isSelected ? t.activeFontWeight : t.fontWeight;
+        const isFirst = index === 0;
+        const isLast = index === options.length - 1;
+        const showBoderRadis = isFirst || isLast;
+        const borderRadius =
+          isFirst ? `${sizeTokens.borderRadius} 0 0 ${sizeTokens.borderRadius}`
+          : isLast ? `0 ${sizeTokens.borderRadius} ${sizeTokens.borderRadius} 0`
+          : '0';
+
+        return (
+          <Button
+            key={option.value}
+            type="button"
+            size={size}
+            variant={isSelected ? 'blue' : 'grey'}
+            disabled={isOptionDisabled}
+            showBoderRadis={showBoderRadis}
+            aria-pressed={isSelected}
+            aria-label={option.label}
+            onClick={() => {
+              if (!isOptionDisabled) onChange?.(option.value);
+            }}
+            style={{
+              backgroundColor: isSelected ? t.active.background : inactiveBackground,
+              color: isSelected ? t.active.color : t.inactive.color,
+              border: `${sizeTokens.borderWidth} solid ${borderColor}`,
+              height: sizeTokens.height,
+              minHeight: sizeTokens.height,
+              maxHeight: sizeTokens.height,
+              padding: `${sizeTokens.paddingY} ${sizeTokens.paddingX}`,
+              borderRadius,
+              fontFamily: t.fontFamily,
+              fontSize: sizeTokens.fontSize,
+              lineHeight: t.lineHeight,
+              fontWeight,
+              boxSizing: 'border-box',
+            }}
+          >
+            {option.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+type PillToggleButtonProps = Pick<
+  ToggleButtonProps,
+  'options' | 'value' | 'onChange' | 'color' | 'disabled' | 'getOptionDisabled' | 'style'
+> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    sizeTokens: {
+      height: string;
+      paddingX: string;
+      paddingY: string;
+      fontSize: string;
+      borderRadius: string;
+      borderWidth: string;
+    };
+    tokens: ReturnType<typeof getToggleButtonTokensFromResolved>;
+  };
+
+function PillToggleButton({
+  options,
+  value,
+  onChange,
+  sizeTokens,
+  tokens: t,
+  color = 'grey',
+  disabled = false,
+  getOptionDisabled,
+  style,
+  ...rest
+}: PillToggleButtonProps) {
+  const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+  const selectedIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === value)
+  );
+  const trackPadding = 3;
+  const heightPx = parsePx(sizeTokens.height);
+  const trackRadius = heightPx > 0 ? `${heightPx / 2}px` : sizeTokens.borderRadius;
+  const inactiveTrackBg = color === 'white' ? '#F9FAFB' : (t.inactive.background ?? '#F3F4F6');
+  const segmentCount = Math.max(options.length, 1);
+
+  return (
+    <div
+      role="group"
+      aria-disabled={disabled}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'stretch',
+        boxSizing: 'border-box',
+        height: sizeTokens.height,
+        minHeight: sizeTokens.height,
+        padding: trackPadding,
+        borderRadius: trackRadius,
+        border: `${sizeTokens.borderWidth} solid ${t.inactive.border}`,
+        backgroundColor: inactiveTrackBg,
+        boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
+        ...style,
+      }}
+      {...rest}
+    >
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          top: trackPadding,
+          left: trackPadding,
+          width: `calc((100% - ${trackPadding * 2}px) / ${segmentCount})`,
+          height: `calc(100% - ${trackPadding * 2}px)`,
+          borderRadius: `calc(${trackRadius} - ${trackPadding}px)`,
+          backgroundColor: t.active.background,
+          boxShadow:
+            '0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12)',
+          transform: `translateX(calc(${selectedIndex} * 100%))`,
+          transition: 'transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease',
+          pointerEvents: 'none',
+          zIndex: 0,
+        }}
+      />
+
+      {options.map((option) => {
+        const isSelected = option.value === value;
+        const isHovered = hoveredValue === option.value && !isSelected;
+        const isOptionDisabled =
+          disabled || option.disabled || getOptionDisabled?.(option) === true;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            aria-pressed={isSelected}
+            aria-label={option.label}
+            disabled={isOptionDisabled}
+            onClick={() => {
+              if (!isOptionDisabled) onChange?.(option.value);
+            }}
+            onMouseEnter={() => {
+              if (!isOptionDisabled) setHoveredValue(option.value);
+            }}
+            onMouseLeave={() => setHoveredValue(null)}
+            style={{
+              position: 'relative',
+              zIndex: 1,
+              flex: '1 1 0',
+              minWidth: 0,
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100%',
+              padding: `0 ${sizeTokens.paddingX}`,
+              border: 'none',
+              borderRadius: `calc(${trackRadius} - ${trackPadding}px)`,
+              backgroundColor: isHovered ? 'rgba(0, 0, 0, 0.04)' : 'transparent',
+              color: isSelected ? t.active.color : t.inactive.color,
+              fontFamily: t.fontFamily,
+              fontSize: sizeTokens.fontSize,
+              lineHeight: t.lineHeight,
+              fontWeight: isSelected ? t.activeFontWeight : t.fontWeight,
+              cursor: isOptionDisabled ? 'not-allowed' : 'pointer',
+              opacity: isOptionDisabled ? 0.5 : 1,
+              transition: 'color 0.2s ease, background-color 0.15s ease, opacity 0.15s ease',
+              whiteSpace: 'nowrap',
+              userSelect: 'none',
+              WebkitTapHighlightColor: 'transparent',
+            }}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ToggleButton/ToggleButton.types.ts

@@ -0,0 +1,19 @@
+export interface ToggleButtonOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ToggleButtonProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'children'
+> {
+  options: ToggleButtonOption[];
+  value: string;
+  onChange?: (value: string) => void;
+  size?: 'sm' | 'md' | 'lg';
+  color?: 'grey' | 'white';
+  variant?: 'default' | 'pill';
+  disabled?: boolean;
+  getOptionDisabled?: (option: ToggleButtonOption) => boolean;
+}

package/src/components/UploadDropzone/UploadDropzone.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const UploadDropzone = ({ fileInputRef, handleFileSelect, uploadedFile, uploadFileError }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="w-full">
+      <div
+        className={`w-full border-2 border-dashed rounded-xl px-6 py-8 text-center cursor-pointer transition-all duration-200 flex flex-col items-center justify-center bg-[#fcfff7] border-[#d1d5db] ${uploadFileError ? 'border-red-400 bg-[#fcfff7]' : ''}`}
+        onClick={() => fileInputRef.current?.click()}
+        onDrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.currentTarget.classList.remove('border-[#52760a]', 'bg-[#fbffe9]');
+
+          const droppedFiles = Array.from(e.dataTransfer.files || []);
+          if (droppedFiles.length > 0) {
+            handleFileSelect(droppedFiles[0]);
+          }
+        }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.currentTarget.classList.add('border-[#52760a]', 'bg-[#fbffe9]');
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          e.currentTarget.classList.remove('border-[#52760a]', 'bg-[#fbffe9]');
+        }}
+      >
+        <div className="w-12 h-12 rounded-full bg-[#e7f3cf] flex items-center justify-center mb-4">
+          <i className="fas fa-cloud-upload-alt text-[#52760a] text-xl" />
+        </div>
+
+        <p className="text-sm font-medium text-[#111827] mb-1">
+          {t('Click to upload or drag and drop')}
+        </p>
+        <p className="text-xs text-[#6b7280] mb-5">XLSX, CSV {t('up to')} 10MB</p>
+
+        <button
+          type="button"
+          className="px-6 py-2 rounded-lg bg-[#52760a] text-white text-sm font-medium shadow-sm hover:bg-[#476507] transition-colors duration-150"
+          onClick={(e) => {
+            e.stopPropagation();
+            fileInputRef.current?.click();
+          }}
+        >
+          {t('Browse Files')}
+        </button>
+
+        {uploadedFile && (
+          <div className="mt-4 text-xs text-[#4b5563]">
+            <span className="font-medium">{t('Selected file')}:</span>{' '}
+            <span>{uploadedFile.name}</span>
+          </div>
+        )}
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".xlsx,.csv"
+          className="hidden"
+          onChange={(e) => {
+            const selectedFile = e.target.files?.[0];
+            if (selectedFile) {
+              handleFileSelect(selectedFile);
+            }
+            e.target.value = '';
+          }}
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UploadDropzone;

package/src/components/UploadDropzone2/UploadDropzone.stories.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { UploadDropzone } from "./UploadDropzone";
+import type { UploadDropzoneProps } from "./UploadDropzone.types";
+
+/** Wrapper to manage value/onChange for controlled UploadDropzone in stories */
+const ControlledUploadDropzone = (props: Omit<UploadDropzoneProps, "value" | "onChange">) => {
+  const [value, setValue] = useState<File | File[] | null>(null);
+  return (
+    <UploadDropzone
+      {...props}
+      value={value}
+      onChange={setValue}
+    />
+  );
+};
+
+const meta: Meta<typeof UploadDropzone> = {
+  title: "Design System/UploadDropzone",
+  component: ControlledUploadDropzone,
+  tags: [],
+  decorators: [
+    (Story) => (
+        <Story />
+    ),
+  ],
+  args: {
+    title: "Upload File",
+    instructionText: "Drag & drop or click to upload",
+    hintText: "Max file size - 5MB Allowed file extension - txt,csv,xlsx",
+    buttonText: "Browse File",
+    fullWidth: true,
+  } as UploadDropzoneProps,
+  argTypes: {
+    title: { control: { type: "text" } },
+    instructionText: { control: { type: "text" } },
+    hintText: { control: { type: "text" } },
+    buttonText: { control: { type: "text" } },
+    accept: { control: { type: "text" } },
+    multiple: { control: { type: "boolean" } },
+    disabled: { control: { type: "boolean" } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UploadDropzone>;
+
+export const Playground: Story = {
+  args: {
+    title: "Upload File",
+    instructionText: "Drag & drop or click to upload",
+    hintText: "Max file size - 5MB Allowed file extension - txt,csv,xlsx",
+    buttonText: "Browse File",
+  },
+};
+
+export const Showcase: Story = {
+  render: () => (
+   <>
+      <ControlledUploadDropzone
+        title="Upload File"
+        instructionText="Drag & drop or click to upload"
+        hintText="Max file size - 5MB Allowed file extension - txt,csv,xlsx"
+        buttonText="Browse File"
+        accept=".txt,.csv,.xlsx"
+      />
+
+      <ControlledUploadDropzone
+        title="Upload Document"
+        instructionText="Drop your file here or click to browse"
+        hintText="PDF, DOC, DOCX up to 10MB"
+        buttonText="Choose File"
+        accept=".pdf,.doc,.docx"
+      />
+
+      <ControlledUploadDropzone
+        title="Upload Multiple Files"
+        instructionText="Drag & drop or click to upload"
+        hintText="Max file size - 5MB per file"
+        buttonText="Browse Files"
+        multiple
+      />
+
+      <ControlledUploadDropzone
+        title="Upload File"
+        instructionText="Drag & drop or click to upload"
+        hintText="Max file size - 5MB"
+        buttonText="Browse File"
+        disabled
+      />
+    </>
+  ),
+};