@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Combobox/helper.ts

@@ -1,201 +0,0 @@
-import type {MenuOption} from '../Menu';
-
-
-export const defaultOptions: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label: 'Option three',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-    iconLeft: 'camera',
-  },
-  {
-    key: '7',
-    label: 'Option seven',
-    iconLeft: 'coffee',
-  },
-  {key: '8', label: 'Option eight', iconLeft: 'user'},
-  {
-    key: '9',
-    label: 'Option nine',
-    iconLeft: 'face-party',
-  },
-];
-
-export const currencyOptions: MenuOption[] = [
-  {
-    key: 'USD',
-    label: 'USD',
-    iconLeft: 'dollar-sign',
-  },
-  {
-    key: 'JPY',
-    label: 'JPY',
-    iconLeft: 'yen-sign',
-  },
-  {
-    key: 'KRW',
-    label: 'KRW',
-    iconLeft: 'won-sign',
-  },
-  {
-    key: 'KRW',
-    label: 'KRW',
-    iconLeft: 'won-sign',
-  },
-  {
-    key: 'GBP',
-    label: 'GBP',
-    iconLeft: 'sterling-sign',
-  },
-  {
-    key: 'INR',
-    label: 'INR',
-    iconLeft: 'indian-rupee-sign',
-  },
-  {
-    key: 'EUR',
-    label: 'EUR',
-    iconLeft: 'euro-sign',
-  },
-  {
-    key: 'CHF',
-    label: 'CHF',
-    iconLeft: 'franc-sign',
-  },
-];
-
-export const phoneNumberOptions: MenuOption[] = [
-  {
-    key: 'US',
-    label: '+1 (United States)',
-  },
-  {
-    key: 'GB',
-    label: '+44 (United Kingdom)',
-  },
-  {
-    key: 'JP',
-    label: '+81 (Japan)',
-  },
-  {
-    key: 'KR',
-    label: '+82 (South Korea)',
-  },
-  {
-    key: 'IN',
-    label: '+91 (India)',
-  },
-  {
-    key: 'FR',
-    label: '+33 (France)',
-  },
-  {
-    key: 'DE',
-    label: '+49 (Germany)',
-  },
-];
-
-/**
- * Format phone numbers according to country-specific patterns
- * @param {string} phoneNumber - The phone number to format
- * @param {string} locale - The locale/country code (e.g., 'US', 'GB', 'JP')
- * @returns {string} - Formatted phone number
- */
-export const formatPhoneNumber = (phoneNumber: string, locale: string = 'US'): string => {
-  // Remove all non-numeric characters
-  const cleaned = phoneNumber.replace(/\D/g, '');
-
-  // Format patterns for different locales
-  const patterns = {
-    // North America
-    US: {
-      // United States
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '($1) $2-$3',
-      countryCode: '+1',
-    },
-    CA: {
-      // Canada
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '($1) $2-$3',
-      countryCode: '+1',
-    },
-    // Europe
-    GB: {
-      // United Kingdom
-      pattern: /(\d{2})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+44',
-    },
-    DE: {
-      // Germany
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+49',
-    },
-    FR: {
-      // France
-      pattern: /(\d{1})(\d{2})(\d{2})(\d{2})(\d{2})/,
-      format: '$1 $2 $3 $4 $5',
-      countryCode: '+33',
-    },
-    // Asia
-    JP: {
-      // Japan
-      pattern: /(\d{2})(\d{4})(\d{4})/,
-      format: '$1-$2-$3',
-      countryCode: '+81',
-    },
-    KR: {
-      // South Korea
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1-$2-$3',
-      countryCode: '+82',
-    },
-    CN: {
-      // China
-      pattern: /(\d{3})(\d{4})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+86',
-    },
-    IN: {
-      // India
-      pattern: /(\d{3})(\d{3})(\d{4})/,
-      format: '$1 $2 $3',
-      countryCode: '+91',
-    },
-  } as const;
-
-  // Get the formatting rule for the locale
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly US: { readonly pattern: RegExp; readonly format: "($1) $2-$3"; readonly countryCode: "+1"; }; readonly CA: { readonly pattern: RegExp; readonly format: "($1) $2-$3"; readonly countryCode: "+1"; }; ... 6 more ...; readonly IN: { ...; }; }'.
-  const rule = patterns[locale] || patterns.US; // Default to US formatting
-
-  // If number starts with country code, remove it for formatting
-  let numberToFormat = cleaned;
-  const countryCode = rule.countryCode.replace('+', '');
-  if (cleaned.startsWith(countryCode)) {
-    numberToFormat = cleaned.slice(countryCode.length);
-  }
-
-  // Format the number according to the pattern
-  const formatted = numberToFormat.replace(rule.pattern, rule.format);
-
-  return formatted;
-};

package/lib/components/Combobox/index.ts

@@ -1 +0,0 @@
-export * from './Combobox';

package/lib/components/ConditionalWrapper/ConditionalWrapper.stories.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import {BodyLarge} from '../../components/Text';
-
-import {ConditionalWrapper} from './';
-
-
-export default {
-  title: 'Utils/Conditional Wrapper',
-  tags: ['autodocs'],
-  component: ConditionalWrapper,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { ConditionalWrapper } from "@spaced-out/ui-design-system/lib/components/ConditionalWrapper";
-\`\`\`
-The \`ConditionalWrapper\` component is a utility component that conditionally wraps its children with a wrapper component or element based on a condition.
-
-### Usage
-\`\`\`jsx
-import React from 'react';
-import { ConditionalWrapper } from './ConditionalWrapper';
-
-const MyComponent = () => {
-  return (
-    <ConditionalWrapper condition={condition} wrapper={(children) => (
-      <div className="wrapper-class">{children}</div>
-    )}>
-      <BodyLarge>This is my content</BodyLarge>
-    </ConditionalWrapper>
-  );
-};
-
-export default MyComponent;
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export const Example = (): React.ReactElement<React.ComponentProps<'div'>> => (<div>
-  <ConditionalWrapper
-    condition={true}
-    wrapper={(children) => <div>{children}</div>}
-  >
-    <BodyLarge>This content is conditionally wrapped</BodyLarge>
-  </ConditionalWrapper>
-</div>);

package/lib/components/ConditionalWrapper/ConditionalWrapper.ts

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-
-export type ConditionalWrapperProps = {
-  condition?: boolean;
-  wrapper?: (children: React.ReactNode) => React.ReactNode;
-  children?: React.ReactNode;
-};
-
-export const ConditionalWrapper = (
-  {
-    condition,
-    wrapper,
-    children,
-  }: ConditionalWrapperProps,
-) => condition ? wrapper?.(children) : children;

package/lib/components/ConditionalWrapper/index.ts

@@ -1 +0,0 @@
-export {ConditionalWrapper} from './ConditionalWrapper';

package/lib/components/DateRangePicker/Calendar.tsx

@@ -1,110 +0,0 @@
-import * as React from 'react';
-import moment from 'moment';
-
-import type {DateRange} from '../../types';
-import {
-  formatIsoDate,
-  getDaysInMonth,
-  inDateRange,
-  isEndOfRange,
-  isStartDateEndDateSame,
-  isStartOfRange,
-  MARKERS,
-  NAVIGATION_ACTION,
-  WEEKDAYS,
-} from '../../utils';
-import {
-  getTranslation,
-  isAfter,
-  isBefore,
-  isSame,
-} from '../../utils/date-range-picker';
-import {BodySmall, TEXT_COLORS} from '../Text';
-
-import {Day} from './Day';
-
-import css from './Calendar.module.css';
-
-
-type CalendarProps = {
-  value: string;
-  marker: typeof MARKERS[keyof typeof MARKERS];
-  minDate?: string;
-  maxDate?: string;
-  hoverDay: string;
-  dateRange: DateRange;
-  inHoverRange: (day: string) => boolean;
-  handlers: {
-    onDayClick: (day: string) => void;
-    onDayHover: (day: string) => void;
-    onMonthNavigate: (
-      marker: typeof MARKERS[keyof typeof MARKERS],
-      action: typeof NAVIGATION_ACTION[keyof typeof NAVIGATION_ACTION],
-    ) => void;
-  };
-  today: string;
-  t: ((key: string, fallback: string) => string) | null | undefined;
-};
-
-export const Calendar = (
-  {
-    value,
-// @ts-ignore - TS6133 - 'marker' is declared but its value is never read.
-    marker,
-    minDate,
-    maxDate = formatIsoDate(),
-    handlers,
-    hoverDay,
-    dateRange,
-    inHoverRange,
-    today,
-    t,
-  }: CalendarProps,
-) => (<div className={css.calendar}>
-  <div className={css.calendarRow}>
-    {WEEKDAYS.map((day) => (
-      <BodySmall
-        key={day}
-        className={css.calendarRowItem}
-        color={TEXT_COLORS.tertiary}
-      >
-        {getTranslation(t, day)}
-      </BodySmall>
-    ))}
-  </div>
-  {getDaysInMonth(value).map((week, index) => (
-    <div key={week[index]} className={css.calendarRow}>
-      {week.map((date: string) => {
-        const isRangeValid = isStartDateEndDateSame(dateRange);
-        const isStart = isStartOfRange(dateRange, date);
-        const isEnd = isEndOfRange(dateRange, date);
-        const highlighted =
-          inDateRange(dateRange, date) || inHoverRange(date);
-        const {onDayClick, onDayHover} = handlers;
-        const dateValue = moment.utc(date);
-
-        return (
-          <Day
-            key={date}
-            date={date}
-            filled={isStart || isEnd}
-            onClick={() => onDayClick(date)}
-            onHover={() => onDayHover(date)}
-            outlined={isSame(date, today, 'd')}
-            disabled={
-              (minDate && isBefore(date, minDate)) ||
-              isAfter(date, maxDate) ||
-              !isSame(date, value, 'month')
-            }
-            endOfRange={isEnd && !isRangeValid}
-            highlighted={highlighted && !isRangeValid}
-            startOfRange={isStart && !isRangeValid}
-// @ts-ignore - TS2322 - Type 'number' is not assignable to type 'string'.
-            value={dateValue.date()}
-            hoverDay={hoverDay}
-          />
-        );
-      })}
-    </div>
-  ))}
-</div>);