@tactics/toddle-styleguide 2.0.4 → 3.0.1

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

@@ -1,107 +1,50 @@
-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';
+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;
+    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;
+    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/types/duration.type.d.ts

@@ -1,4 +1,4 @@
-import {DurationLikeObject} from '../interfaces/duration.interface';
+import { DurationLikeObject } from '../interfaces/duration.interface';
 export type DurationUnit = keyof DurationLikeObject;
 export type DurationUnits = DurationUnit | DurationUnit[];
 export type DurationLike = DurationLikeObject | number;

package/src/utilities/toddle-datetime/types/toddle-datetime.type.d.ts

@@ -1,14 +1,5 @@
-import {DateTimeOptions} from '../interfaces/toddle-datetime.interface';
+import { DateTimeOptions } from '../interfaces/toddle-datetime.interface';
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions;
-export type DateTimeUnit =
-  | 'year'
-  | 'quarter'
-  | 'month'
-  | 'week'
-  | 'day'
-  | 'hour'
-  | 'minute'
-  | 'second'
-  | 'millisecond';
+export type DateTimeUnit = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
 export type DateTimeJSOptions = Omit<DateTimeOptions, 'setZone'>;
 export type ConversionAccuracy = 'casual' | 'longterm';

package/tsconfig.json

@@ -6,7 +6,8 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "target": "ES5"
+    "target": "ES5",
+    "noImplicitAny": false
   },
   "typeRoots": ["./types"]
 }

package/src/components/organisms/day-select/day-select.component.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-type DaySelectProps = {
-  onSelectDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  selectedDate: ToddleDateTime;
-};
-declare const DaySelect: ({
-  onSelectDate,
-  selectedDate,
-  startDate,
-}: DaySelectProps) => React.JSX.Element;
-export {DaySelect as DaySelect};

package/src/components/organisms/day-select/day-select.component.tsx

@@ -1,122 +0,0 @@
-import React, {useContext, useEffect, useRef, useState} from 'react';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {View} from 'react-native';
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-import {ThemeCtx} from '../../../context/theme.context';
-import {Stylesheet} from './day-select.styles';
-import {Day} from '../../molecules/day/day.component';
-import Swipeable from 'react-native-gesture-handler/Swipeable';
-import {Icon} from '../../../icons';
-
-type DaySelectProps = {
-  onSelectDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  selectedDate: ToddleDateTime;
-};
-
-const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
-  const swipeableRef = useRef<Swipeable>(null);
-
-  const createWeekDays = (day: ToddleDateTime) => {
-    let week = [];
-    for (let i = 0; i <= 6; i++) {
-      week.push(day.plus({days: i}));
-    }
-
-    return week;
-  };
-
-  const [weekData, setWeekData] = useState(
-    createWeekDays(startDate.startOf('week'))
-  );
-
-  useEffect(() => {
-    setWeekData(createWeekDays(startDate.startOf('week')));
-  }, [startDate]);
-
-  const onSwipeLeft = () => {
-    let firstDayOfWeek = weekData.shift();
-    if (!firstDayOfWeek) return;
-    onSelectDate(selectedDate.minus({weeks: 1}));
-    setWeekData(createWeekDays(firstDayOfWeek.minus({weeks: 1})));
-  };
-
-  const onSwipeRight = () => {
-    let firstDayOfWeek = weekData.shift();
-    if (!firstDayOfWeek) return;
-    onSelectDate(selectedDate.plus({weeks: 1}));
-    setWeekData(createWeekDays(firstDayOfWeek.plus({weeks: 1})));
-  };
-
-  const isThisDaySelected = (date: ToddleDateTime) => {
-    return date.toFormat('yyyy-MM-dd') === selectedDate.toFormat('yyyy-MM-dd');
-  };
-
-  const onClick = (date: ToddleDateTime) => {
-    onSelectDate(date);
-  };
-
-  const renderLeftActions = () => {
-    return (
-      <View style={styles.actionContainer}>
-        <Icon
-          name={'chevron-left'}
-          style="regular"
-          color={context.colors.ui.grey}
-        />
-      </View>
-    );
-  };
-
-  const renderRightActions = () => {
-    return (
-      <View style={styles.actionContainer}>
-        <Icon
-          name={'chevron-right'}
-          style="regular"
-          color={context.colors.ui.grey}
-        />
-      </View>
-    );
-  };
-
-  const onSwipeOpen = (direction: string) => {
-    if (direction == 'left') {
-      onSwipeLeft();
-    } else if (direction == 'right') {
-      onSwipeRight();
-    }
-
-    if (swipeableRef.current) {
-      swipeableRef.current.close();
-    }
-  };
-
-  return (
-    <GestureHandlerRootView>
-      <Swipeable
-        ref={swipeableRef}
-        renderLeftActions={renderLeftActions}
-        renderRightActions={renderRightActions}
-        onSwipeableOpen={onSwipeOpen}
-        containerStyle={styles.container}
-        childrenContainerStyle={styles.childrenContainer}
-        overshootFriction={8}
-      >
-        {weekData.map((weekday, index) => {
-          return (
-            <Day
-              key={index}
-              date={weekday}
-              onSelect={onClick}
-              isSelected={isThisDaySelected(weekday)}
-            />
-          );
-        })}
-      </Swipeable>
-    </GestureHandlerRootView>
-  );
-};
-export {DaySelect as DaySelect};

package/src/components/organisms/day-select/day-select.preview.d.ts

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

package/src/components/organisms/day-select/day-select.preview.tsx

@@ -1,23 +0,0 @@
-import React, {useState} from 'react';
-import {DaySelect} from './day-select.component';
-import {View} from 'react-native';
-
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
-
-export const DaySelectPreview = ({}: {}) => {
-  const [startOfWeek, setStartOfWeek] = useState(ToddleDateTime.local());
-
-  const [selectedDate, setSelectedDate] = useState<ToddleDateTime>(
-    ToddleDateTime.local()
-  );
-
-  return (
-    <View>
-      <DaySelect
-        startDate={startOfWeek}
-        onSelectDate={setSelectedDate}
-        selectedDate={selectedDate}
-      />
-    </View>
-  );
-};

package/src/components/organisms/day-select/day-select.styles.d.ts

@@ -1,18 +0,0 @@
-export function Stylesheet(context: any): {
-  container: {
-    backgroundColor: any;
-    padding: number;
-    flexDirection: 'row';
-    justifyContent: 'space-evenly';
-    borderRadius: number;
-    overflow: 'hidden';
-  };
-  childrenContainer: {
-    flexDirection: 'row';
-    justifyContent: 'space-evenly';
-  };
-  actionContainer: {
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-};

package/src/components/organisms/day-select/day-select.styles.js

@@ -1,22 +0,0 @@
-import {StyleSheet} from 'react-native';
-import {Scale} from '../../../theme/scale';
-
-export const Stylesheet = (context) =>
-  StyleSheet.create({
-    container: {
-      backgroundColor: context.colors.ui.xlightgrey,
-      padding: Scale.s,
-      flexDirection: 'row',
-      justifyContent: 'space-evenly',
-      borderRadius: Scale.m,
-      overflow: 'hidden',
-    },
-    childrenContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-evenly',
-    },
-    actionContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-  });