@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/components/organisms/text-bubble/text-bubble.test.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {TextBubble} from './text-bubble.component';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-
-describe('test text-bubble', () => {
-  const testDate = ToddleDateTime.fromISO('2016-05-25T09:08:34.123', {
-    locale: 'en-GB',
-  });
-
-  it('given the visualState is ERROR return a red colored text-bubble AND white text', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'umhf34'}
-          visualState="ERROR"
-          bubbleAlignment="SENT"
-          text="TEST color"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visualState is WARNING return an orange colored text-bubble AND white text', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'2383'}
-          visualState="WARNING"
-          bubbleAlignment="SENT"
-          text="TEST color"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'986'}
-          visualState="DEFAULT"
-          bubbleAlignment="SENT"
-          text="TEST color"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the bubbleAlignment is SENT return a text-bubble with right-bottom tip', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'30'}
-          visualState="DEFAULT"
-          bubbleAlignment="SENT"
-          text="TEST Bubble"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visualState is RECEIVE return a text-bubble with left-bottom tip', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'12'}
-          visualState="DEFAULT"
-          bubbleAlignment="RECEIVE"
-          text="TEST Bubble"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visualState is RECEIVE return a textBubble with left-bottom tip', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'2'}
-          visualState="DEFAULT"
-          bubbleAlignment="RECEIVE"
-          text="TEST Bubble"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={true}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('return a text bubble, that will be send, but does not get send due to an error. It will show the failed text bubble', () => {
-    const tree = renderer
-      .create(
-        <TextBubble
-          id={'5'}
-          visualState="DEFAULT"
-          bubbleAlignment="SENT"
-          text="TEST Bubble"
-          timestamp={testDate}
-          onFail={() => alert('resend the message')}
-          onDelete={() => alert('delete the message')}
-          onEdit={() => alert('edit the message')}
-          sendOrReceived={false}
-        />
-      )
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/utilities/toddle-datetime/interfaces/duration.interface.d.ts

@@ -1,22 +0,0 @@
-export interface DurationObjectUnits {
-    years?: number | undefined;
-    quarters?: number | undefined;
-    months?: number | undefined;
-    weeks?: number | undefined;
-    days?: number | undefined;
-    hours?: number | undefined;
-    minutes?: number | undefined;
-    seconds?: number | undefined;
-    milliseconds?: number | undefined;
-}
-export interface DurationLikeObject extends DurationObjectUnits {
-    year?: number | undefined;
-    quarter?: number | undefined;
-    month?: number | undefined;
-    week?: number | undefined;
-    day?: number | undefined;
-    hour?: number | undefined;
-    minute?: number | undefined;
-    second?: number | undefined;
-    millisecond?: number | undefined;
-}

package/src/utilities/toddle-datetime/interfaces/duration.interface.tsx

@@ -1,23 +0,0 @@
-export interface DurationObjectUnits {
-  years?: number | undefined;
-  quarters?: number | undefined;
-  months?: number | undefined;
-  weeks?: number | undefined;
-  days?: number | undefined;
-  hours?: number | undefined;
-  minutes?: number | undefined;
-  seconds?: number | undefined;
-  milliseconds?: number | undefined;
-}
-
-export interface DurationLikeObject extends DurationObjectUnits {
-  year?: number | undefined;
-  quarter?: number | undefined;
-  month?: number | undefined;
-  week?: number | undefined;
-  day?: number | undefined;
-  hour?: number | undefined;
-  minute?: number | undefined;
-  second?: number | undefined;
-  millisecond?: number | undefined;
-}

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.d.ts

@@ -1,22 +0,0 @@
-import { ConversionAccuracy } from '../types/toddle-datetime.type';
-export interface LocaleOptions {
-    /**
-     *  @default system's locale
-     */
-    locale?: string | undefined;
-}
-export interface DateTimeOptions extends LocaleOptions {
-    /**
-     * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
-     * @default local
-     */
-    zone?: string | undefined;
-    /**
-     * Override the zone with a fixed-offset zone specified in the string itself, if it specifies one.
-     * @default false
-     */
-    setZone?: boolean | undefined;
-}
-export interface DiffOptions {
-    conversionAccuracy?: ConversionAccuracy | undefined;
-}

package/src/utilities/toddle-datetime/interfaces/toddle-datetime.interface.tsx

@@ -1,25 +0,0 @@
-import {ConversionAccuracy} from '../types/toddle-datetime.type';
-
-export interface LocaleOptions {
-  /**
-   *  @default system's locale
-   */
-  locale?: string | undefined;
-}
-
-export interface DateTimeOptions extends LocaleOptions {
-  /**
-   * Use this zone if no offset is specified in the input string itself. Will also convert the time to this zone.
-   * @default local
-   */
-  zone?: string | undefined;
-  /**
-   * Override the zone with a fixed-offset zone specified in the string itself, if it specifies one.
-   * @default false
-   */
-  setZone?: boolean | undefined;
-}
-
-export interface DiffOptions {
-  conversionAccuracy?: ConversionAccuracy | undefined;
-}

package/src/utilities/toddle-datetime/toddle-datetime.class.d.ts

@@ -1,50 +0,0 @@
-import { Duration as LuxonDuration } from 'luxon';
-import { LocaleOptions, DateTimeOptions, DiffOptions } from './interfaces/toddle-datetime.interface';
-import { DurationLike, DurationUnits } from './types/duration.type';
-import { DateTimeFormatOptions, DateTimeJSOptions, DateTimeUnit } from './types/toddle-datetime.type';
-import { DurationObjectUnits } from './interfaces/duration.interface';
-export declare class Duration {
-    private duration;
-    constructor(duration: LuxonDuration);
-    toObject(): DurationObjectUnits;
-}
-export declare class ToddleDateTime {
-    private dateTime;
-    private constructor();
-    /**
-     * Create a ToddleDateTime for the current instant, in the system's time zone.
-     *
-     * Use Settings to override these default values if needed.
-     * @example
-     * ToddleDateTime.now().toISO() //~> now in the ISO format
-     */
-    static now(): ToddleDateTime;
-    static local(opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, day: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, day: number, hour: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, day: number, hour: number, minute: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static local(year: number, month: number, day: number, hour: number, minute: number, second: number, milliseconds: number, opts?: DateTimeJSOptions): ToddleDateTime;
-    static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime;
-    static fromSeconds(seconds: number, options?: DateTimeJSOptions): ToddleDateTime;
-    static get DATE_MED(): DateTimeFormatOptions;
-    get hour(): number;
-    get minute(): number;
-    get second(): number;
-    get millisecond(): number;
-    get day(): number;
-    get weekdayShort(): string;
-    plus(duration: DurationLike): ToddleDateTime;
-    minus(duration: DurationLike): ToddleDateTime;
-    startOf(unit: DateTimeUnit): ToddleDateTime;
-    endOf(unit: DateTimeUnit): ToddleDateTime;
-    toFormat(format: string, options?: LocaleOptions): string;
-    toISO(): string | null;
-    toISODate(): string | null;
-    toString(): string;
-    toLocaleString(formatOptions?: DateTimeFormatOptions, options?: LocaleOptions): string;
-    timestamp(): number;
-    diff(otherDateTime: ToddleDateTime, unit?: DurationUnits, options?: DiffOptions): Duration;
-}

package/src/utilities/toddle-datetime/toddle-datetime.class.tsx

@@ -1,206 +0,0 @@
-import {DateTime as LuxonDateTime, Duration as LuxonDuration} from 'luxon';
-
-import {
-  LocaleOptions,
-  DateTimeOptions,
-  DiffOptions,
-} from './interfaces/toddle-datetime.interface';
-
-import {DurationLike, DurationUnits} from './types/duration.type';
-import {
-  DateTimeFormatOptions,
-  DateTimeJSOptions,
-  DateTimeUnit,
-} from './types/toddle-datetime.type';
-import {DurationObjectUnits} from './interfaces/duration.interface';
-
-export class Duration {
-  private duration: LuxonDuration;
-
-  constructor(duration: LuxonDuration) {
-    this.duration = duration;
-  }
-
-  toObject(): DurationObjectUnits {
-    return this.duration.toObject();
-  }
-}
-
-export class ToddleDateTime {
-  private dateTime: LuxonDateTime;
-
-  private constructor(dateTime?: LuxonDateTime) {
-    this.dateTime = dateTime || LuxonDateTime.local();
-  }
-
-  // STATIC MEMBERS
-  /**
-   * Create a ToddleDateTime for the current instant, in the system's time zone.
-   *
-   * Use Settings to override these default values if needed.
-   * @example
-   * ToddleDateTime.now().toISO() //~> now in the ISO format
-   */
-  static now(): ToddleDateTime {
-    return new ToddleDateTime(LuxonDateTime.local());
-  }
-
-  static local(opts?: DateTimeJSOptions): ToddleDateTime;
-  static local(year: number, opts?: DateTimeJSOptions): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    day: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    day: number,
-    hour: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    day: number,
-    hour: number,
-    minute: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    day: number,
-    hour: number,
-    minute: number,
-    second: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(
-    year: number,
-    month: number,
-    day: number,
-    hour: number,
-    minute: number,
-    second: number,
-    milliseconds: number,
-    opts?: DateTimeJSOptions
-  ): ToddleDateTime;
-  static local(...args: any[]): ToddleDateTime {
-    const dateTime = LuxonDateTime.local(...args);
-    return new ToddleDateTime(dateTime);
-  }
-
-  static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime {
-    return new ToddleDateTime(LuxonDateTime.fromISO(date, options));
-  }
-
-  static fromSeconds(
-    seconds: number,
-    options?: DateTimeJSOptions
-  ): ToddleDateTime {
-    return new ToddleDateTime(LuxonDateTime.fromSeconds(seconds, options));
-  }
-
-  // FORMAT PRESETS
-
-  static get DATE_MED(): DateTimeFormatOptions {
-    return LuxonDateTime.DATE_MED;
-  }
-
-  // GET
-
-  get hour(): number {
-    return this.dateTime.hour;
-  }
-
-  get minute(): number {
-    return this.dateTime.minute;
-  }
-
-  get second(): number {
-    return this.dateTime.second;
-  }
-
-  get millisecond(): number {
-    return this.dateTime.millisecond;
-  }
-
-  get day(): number {
-    return this.dateTime.day;
-  }
-
-  get weekdayShort(): string {
-    return this.dateTime.toFormat('EEE');
-  }
-
-  // TRANSFORM
-
-  plus(duration: DurationLike): ToddleDateTime {
-    return new ToddleDateTime(this.dateTime.plus(duration));
-  }
-
-  minus(duration: DurationLike): ToddleDateTime {
-    return new ToddleDateTime(this.dateTime.minus(duration));
-  }
-
-  startOf(unit: DateTimeUnit): ToddleDateTime {
-    this.dateTime = this.dateTime.startOf(unit);
-    return this;
-  }
-
-  endOf(unit: DateTimeUnit): ToddleDateTime {
-    this.dateTime = this.dateTime.endOf(unit);
-    return this;
-  }
-
-  // OUTPUT
-
-  toFormat(format: string, options?: LocaleOptions): string {
-    return this.dateTime.toFormat(format, options);
-  }
-
-  toISO(): string | null {
-    return this.dateTime.toISO();
-  }
-
-  toISODate(): string | null {
-    return this.dateTime.toISODate();
-  }
-
-  toString(): string {
-    return this.dateTime.toString();
-  }
-
-  toLocaleString(
-    formatOptions?: DateTimeFormatOptions,
-    options?: LocaleOptions
-  ): string {
-    return this.dateTime.toLocaleString(formatOptions, options);
-  }
-
-  timestamp(): number {
-    return this.dateTime.toUnixInteger();
-  }
-
-  // COMPARE
-
-  diff(
-    otherDateTime: ToddleDateTime,
-    unit?: DurationUnits,
-    options?: DiffOptions
-  ): Duration {
-    const luxonDuration = this.dateTime.diff(
-      otherDateTime.dateTime,
-      unit,
-      options
-    );
-    return new Duration(luxonDuration);
-  }
-}

package/src/utilities/toddle-datetime/toddle-datetime.preview.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const ToddleDateTimePreview: ({}: {}) => React.JSX.Element;

package/src/utilities/toddle-datetime/toddle-datetime.preview.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import {ToddleDateTime} from './toddle-datetime.class';
-import {ScrollView, View} from 'react-native';
-import {Paragraph} from '../../components/atoms/paragraph-components';
-import {Heading2, Heading4} from '../../components/atoms/heading-components';
-
-export const ToddleDateTimePreview = ({}: {}) => {
-  const now = ToddleDateTime.now();
-  const fromISO = ToddleDateTime.fromISO('2016-05-25T09:08:34.123');
-  const timestamp = 1688729520;
-
-  return (
-    <View
-      style={{
-        marginTop: 24,
-        alignContent: 'center',
-        justifyContent: 'center',
-        paddingBottom: 100,
-      }}
-    >
-      <Heading2 bold={true} textAlign={'center'} addStyle={{marginBottom: 50}}>
-        ToddleDateTime
-      </Heading2>
-      <Heading4 addStyle={{paddingHorizontal: 16, marginBottom: 24}}>
-        ToddleDateTime is a wrapper around Luxon, and provides less
-        functionality. This can and or will expand through time. You can find
-        the implemented methods below:
-      </Heading4>
-      <ScrollView contentContainerStyle={{padding: 16}}>
-        <Heading4 bold={true}>.now()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Create a DateTime for the current instant, in the system's time zone.
-        </Paragraph>
-
-        <Heading4 bold={true}>
-          .fromISO(date: string, options?: DateTimeOptions)
-        </Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Create a ToddleDateTime from an ISO 8601 string
-        </Paragraph>
-
-        <Heading4 bold={true}>.local()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Create a local ToddleDateTime
-        </Paragraph>
-
-        <Heading4 bold={true}>.timestamp()</Heading4>
-        <Paragraph>
-          Returns the epoch milliseconds of this ToddleDateTime.
-        </Paragraph>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          {fromISO.timestamp()}
-        </Paragraph>
-
-        <Heading4 bold={true}>.fromSeconds(seconds, options?)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Create a ToddleDateTime from a number of seconds since the epoch
-          (meaning since 1 January 1970 00:00:00 UTC). Uses the default zone.
-        </Paragraph>
-
-        <Heading4 bold={true}>.DATE_MED()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          ToddleDateTime.toLocaleString format like 'Oct 14, 1983'
-        </Paragraph>
-
-        <Heading4 bold={true}>.hour()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the hour of the day (0-23)
-        </Paragraph>
-
-        <Heading4 bold={true}>.minute()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the minute of the hour (0-59).
-        </Paragraph>
-
-        <Heading4 bold={true}>.second()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the second of the minute (0-59).
-        </Paragraph>
-
-        <Heading4 bold={true}>.millisecond()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the millisecond of the second (0-999).
-        </Paragraph>
-
-        <Heading4 bold={true}>.day()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the day of the month (1-30ish).
-        </Paragraph>
-
-        <Heading4 bold={true}>.weekdayShort()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Get the human readable short weekday, such as 'Mon'. Defaults to the
-          system's locale if no locale has been specified
-        </Paragraph>
-
-        <Heading4 bold={true}>.plus(duration)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          {`Adding hours, minutes, seconds, or milliseconds increases the timestamp by the right number of milliseconds. Adding days, months, or years shifts the calendar, accounting for DSTs and leap years along the way. Thus, dt.plus({ hours: 24 }) may result in a different time than dt.plus({ days: 1 }) if there's a DST shift in between.`}
-        </Paragraph>
-
-        <Heading4 bold={true}>.minus(duration)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          See ToddleDateTime plus()
-        </Paragraph>
-
-        <Heading4 bold={true}>.startOf(unit)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          "Set" this ToddleDateTime to the beginning of the given unit.
-        </Paragraph>
-
-        <Heading4 bold={true}>.endOf(unit)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          "Set" this ToddleDateTime to the end (meaning the last millisecond) of
-          a unit of time
-        </Paragraph>
-
-        <Heading4 bold={true}>.toFormat(format, options?)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns a string representation of this ToddleDateTime formatted
-          according to the specified format string.
-        </Paragraph>
-
-        <Heading4 bold={true}>.toISO()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns an ISO 8601-compliant string representation of this
-          ToddleDateTime
-        </Paragraph>
-
-        <Heading4 bold={true}>.toISODate()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns an ISO 8601-compliant string representation of this
-          ToddleDateTime's date component
-        </Paragraph>
-
-        <Heading4 bold={true}>.toString()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns a string representation of this DateTime appropriate for
-          debugging
-        </Paragraph>
-
-        <Heading4 bold={true}>
-          .toLocaleString(formatOptions?, options?)
-        </Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns a localized string representing this date.
-        </Paragraph>
-
-        <Heading4 bold={true}>.timestamp()</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Returns the epoch seconds (as a whole number) of this ToddleDateTime.{' '}
-        </Paragraph>
-        <Heading4 bold={true}>.diff(otherDateTime, unit?, options?)</Heading4>
-        <Paragraph addStyle={{marginBottom: 12}}>
-          Return the difference between two ToddleDateTimes as a Duration.
-        </Paragraph>
-      </ScrollView>
-    </View>
-  );
-};