@tactics/toddle-styleguide 0.0.1 → 0.0.2

package/index.tsx

@@ -0,0 +1,47 @@
+import {Avatar} from './src/components/atoms/avatar/avatar.component';
+import {Button} from './src/components/atoms/button/button.component';
+import {CancelLink} from './src/components/atoms/cancel-link/cancel-link.component';
+import {Check} from './src/components/atoms/check-switch/check-switch.component';
+import {Checkbox} from './src/components/atoms/checkbox/checkbox.component';
+import {ChildListItem} from './src/components/atoms/child-list-item/child-list-item.component';
+import {ContactItem} from './src/components/atoms/contact-item/contact-item.component';
+import {FilterTab} from './src/components/atoms/filter-tab/filter-tab.component';
+import {FormAction} from './src/components/atoms/form-actions/form-action.component';
+import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
+import {Info} from './src/components/atoms/info/info.component';
+import {Pill} from './src/components/atoms/pill/pill.component';
+import {Popover} from './src/components/atoms/popover/popover.component';
+import {PressableIcon} from './src/components/atoms/pressable-icon/pressable-icon.component';
+import {QuickFilter} from './src/components/atoms/quick-filter/quick-filter.component';
+import {SelectListItem} from './src/components/atoms/select-list-item/select-list-item.component';
+import {Snackbar} from './src/components/atoms/snackbar/snackbar.component';
+import {Tag} from './src/components/atoms/tag/tag.component';
+import {TextBubble} from './src/components/atoms/text-bubble/text-bubble.component';
+import {TextInput} from './src/components/atoms/text-input/text-input.component';
+import {TimeTracker} from './src/components/atoms/time-tracker/time-tracker.component';
+import {WideButton} from './src/components/atoms/wide-button/wide-button.component';
+
+export {
+    Avatar,
+    Button,
+    CancelLink,
+    Check,
+    Checkbox,
+    ChildListItem,
+    ContactItem,
+    FilterTab,
+    FormAction,
+    ImageBubble,
+    Info,
+    Pill,
+    Popover,
+    PressableIcon,
+    QuickFilter,
+    SelectListItem,
+    Snackbar,
+    Tag,
+    TextBubble,
+    TextInput,
+    TimeTracker,
+    WideButton
+};

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "0.0.1",
-  "main": "node_modules/expo/AppEntry.js",
+  "version": "0.0.2",
+  "main": "index.tsx",
+  "types": "types/index.d.ts",
   "scripts": {
     "expo": "node_modules/.bin/expo",
     "start": "node_modules/.bin/tsc && node_modules/.bin/expo start",
@@ -9,7 +10,8 @@
     "ios": "node_modules/.bin/tsc && node_modules/.bin/expo start --ios",
     "web": "node_modules/.bin/tsc && node_modules/.bin/expo start --web",
     "test": "node_modules/.bin/jest",
-    "format": "yarn prettier --write src/."
+    "format": "yarn prettier --write src/.",
+    "types": "node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --jsx react-native --outDir types --skipLibCheck"
   },
   "dependencies": {
     "@callstack/react-theme-provider": "^3.0.8",
@@ -41,7 +43,7 @@
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
-    "@types/react-native": "^0.70.6",
+    "@types/react-native": "^0.70.7",
     "@types/react-test-renderer": "^18.0.0",
     "jest": "^29.2.2",
     "jest-expo": "^46.0.1",

package/src/components/atoms/avatar/avatar.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Image, ImageSourcePropType, View, Text, ImageStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './avatar.styles';

package/src/components/atoms/button/button.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './button.styles';

package/src/components/atoms/cancel-link/cancel-link.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './cancel-link.styles';

package/src/components/atoms/check-switch/check-switch.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useRef} from 'react';
+import * as React from 'react';
+import { useContext, useRef } from 'react';
+
 import {View, Animated, Pressable, Easing} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './check-switch.styles';

package/src/components/atoms/checkbox/checkbox.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './checkbox.styles';

package/src/components/atoms/child-list-item/child-list-item.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {ImageSourcePropType, Pressable, View, Text} from 'react-native';
 import {Initials} from '../../../models/initials.model';

package/src/components/atoms/child-list-item/child-list-item.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import render from 'react-test-renderer';
 import {ChildListItem} from './child-list-item.component';
 import {Avatar} from '../avatar/avatar.component';
-import {SelectListItem} from '../select-list-item/select-list.component-item';
+import {SelectListItem} from '../select-list-item/select-list-item.component';
 import renderer from 'react-test-renderer';
 import {VisualState} from '../../../types/visual-state.enum';
 

package/src/components/atoms/contact-item/contact-item.component.tsx

@@ -1,4 +1,5 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
 import {Stylesheet} from './contact-item.styles';
 import {Avatar} from '../avatar/avatar.component';
 import {Initials} from '../../../models/initials.model';

package/src/components/atoms/filter-tab/filter-tab.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useState} from 'react';
+import * as React from 'react';
+import { useContext, useState } from 'react';
+
 import {Animated, Pressable, Text, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './filter-tab.styles';

package/src/components/atoms/form-actions/form-action.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './form-action.styles';

package/src/components/atoms/image-bubble/image-bubble.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {View, Image, ImageSourcePropType, ImageStyle} from 'react-native';
 import {Stylesheet} from './image-bubble.styles';
 import {ThemeCtx} from '../../../context/theme.context';

package/src/components/atoms/info/info.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {Text, View} from 'react-native';
 import {Stylesheet} from './info.styles';

package/src/components/atoms/pill/pill.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {View, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './pill.styles';

package/src/components/atoms/popover/components/backdrop/backdrop.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useMemo} from 'react';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
+
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {Animated} from 'react-native';
 import {Stylesheet} from './backdrop.styles';

package/src/components/atoms/popover/components/foreground/foreground.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../../../context/theme.context';
 import {View} from 'react-native';
 import {Stylesheet} from './foreground.styles';

package/src/components/atoms/popover/components/modal/close/close.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {GestureResponderEvent, Pressable} from 'react-native';
 import {CrossIcon} from '../../../../../../icons/outline/cross/cross.icon';
 import {Stylesheet} from './close.styles';

package/src/components/atoms/popover/components/modal/heading/heading.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Text, View} from 'react-native';
 import {Stylesheet} from './heading.styles';
 import {ThemeCtx} from '../../../../../../context/theme.context';

package/src/components/atoms/popover/components/modal/modal.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useEffect, useMemo, useState} from 'react';
+import * as React from 'react';
+import { useContext, useMemo, useState } from 'react';
+
 import {Animated, Dimensions} from 'react-native';
 import {Stylesheet} from './modal.styles';
 import {Close} from './close/close.component';

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.component.tsx

@@ -1,5 +1,7 @@
-import React, {useContext} from 'react';
-import {Animated, ScrollView, Text, View} from 'react-native';
+import * as React from 'react';
+import { useContext } from 'react';
+
+import {ScrollView} from 'react-native';
 import {Stylesheet} from './scroll-content.styles';
 import {ThemeCtx} from '../../../../../../context/theme.context';
 

package/src/components/atoms/popover/popover.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useEffect, useState} from 'react';
+import * as React from 'react';
+import { useContext, useEffect, useState } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {Dimensions, View} from 'react-native';
 import {Stylesheet} from './popover.styles';

package/src/components/atoms/pressable-icon/pressable-icon.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, View} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './pressable-icon.styles';

package/src/components/atoms/quick-filter/quick-filter.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Pressable, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {VisualState} from '../../../types/visual-state.enum';

package/src/components/atoms/select-list-item/select-list-item-preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {SelectListItem} from './select-list.component-item';
+import {SelectListItem} from './select-list-item.component';
 import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
 import {OfficeBuildingIcon} from '../../../icons/outline/office-building/office-building.icon';
 

package/src/components/atoms/select-list-item/{select-list.component-item.tsx → select-list-item.component.tsx}

@@ -1,7 +1,9 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {Pressable, Text, View} from 'react-native';
-import {Stylesheet} from './select-list.styles-item';
+import {Stylesheet} from './select-list-item.styles';
 import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
 
 type SelectListProps = {

package/src/components/atoms/select-list-item/select-list-item.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import render from 'react-test-renderer';
-import {SelectListItem} from './select-list.component-item';
+import {SelectListItem} from './select-list-item.component';
 import {FilterIcon} from '../../../icons/outline/filter/filter.icon';
 import {OfficeBuildingIcon} from '../../../icons/outline/office-building/office-building.icon';
 

package/src/components/atoms/snackbar/snackbar.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {Text, View} from 'react-native';
 import {Stylesheet} from './snackbar.styles';

package/src/components/atoms/tag/tag.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext, useState} from 'react';
+import * as React from 'react';
+import { useContext, useState } from 'react';
+
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './tag.styles';
 import {View, Text, Pressable} from 'react-native';

package/src/components/atoms/text-bubble/text-bubble.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {View, Text} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 

package/src/components/atoms/text-input/text-input.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {View, TextInput as NativeTextInput} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './text-input.styles';

package/src/components/atoms/time-tracker/time-tracker.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Stylesheet} from '../time-tracker/time-tracker.styles';
 import {Text, View} from 'react-native';
 import {VisualState} from '../../../types/visual-state.enum';

package/src/components/atoms/wide-button/wide-button.component.tsx

@@ -1,4 +1,6 @@
-import React, {useContext} from 'react';
+import * as React from 'react';
+import { useContext } from 'react';
+
 import {Text, Pressable} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './wide-button.styles';

package/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
   "typeRoots": ["./types"]
 }

package/types/index.d.ts

@@ -0,0 +1,23 @@
+import { Avatar } from './src/components/atoms/avatar/avatar.component';
+import { Button } from './src/components/atoms/button/button.component';
+import { CancelLink } from './src/components/atoms/cancel-link/cancel-link.component';
+import { Check } from './src/components/atoms/check-switch/check-switch.component';
+import { Checkbox } from './src/components/atoms/checkbox/checkbox.component';
+import { ChildListItem } from './src/components/atoms/child-list-item/child-list-item.component';
+import { ContactItem } from './src/components/atoms/contact-item/contact-item.component';
+import { FilterTab } from './src/components/atoms/filter-tab/filter-tab.component';
+import { FormAction } from './src/components/atoms/form-actions/form-action.component';
+import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
+import { Info } from './src/components/atoms/info/info.component';
+import { Pill } from './src/components/atoms/pill/pill.component';
+import { Popover } from './src/components/atoms/popover/popover.component';
+import { PressableIcon } from './src/components/atoms/pressable-icon/pressable-icon.component';
+import { QuickFilter } from './src/components/atoms/quick-filter/quick-filter.component';
+import { SelectListItem } from './src/components/atoms/select-list-item/select-list-item.component';
+import { Snackbar } from './src/components/atoms/snackbar/snackbar.component';
+import { Tag } from './src/components/atoms/tag/tag.component';
+import { TextBubble } from './src/components/atoms/text-bubble/text-bubble.component';
+import { TextInput } from './src/components/atoms/text-input/text-input.component';
+import { TimeTracker } from './src/components/atoms/time-tracker/time-tracker.component';
+import { WideButton } from './src/components/atoms/wide-button/wide-button.component';
+export { Avatar, Button, CancelLink, Check, Checkbox, ChildListItem, ContactItem, FilterTab, FormAction, ImageBubble, Info, Pill, Popover, PressableIcon, QuickFilter, SelectListItem, Snackbar, Tag, TextBubble, TextInput, TimeTracker, WideButton };

package/types/src/components/atoms/avatar/avatar.component.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
+declare type AvatarProps = {
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
+};
+declare const Avatar: React.FC<AvatarProps>;
+export { Avatar as Avatar };

package/types/src/components/atoms/avatar/avatar.styles.d.ts

@@ -0,0 +1,36 @@
+export function Stylesheet(Context: any, size: any, isBlocked: any): StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    container: ({
+        overflow: string;
+        backgroundColor: any;
+        justifyContent: string;
+        alignItems: string;
+        width?: undefined;
+        height?: undefined;
+        borderRadius?: undefined;
+    } | {
+        width: number;
+        height: number;
+        borderRadius: number;
+        overflow?: undefined;
+        backgroundColor?: undefined;
+        justifyContent?: undefined;
+        alignItems?: undefined;
+    })[];
+    image: {
+        position: string;
+        width: string;
+        height: string;
+        borderRadius: number;
+    }[];
+    text: ({
+        color: any;
+        textTransform: string;
+    } | {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        color?: undefined;
+        textTransform?: undefined;
+    })[];
+}>;
+import { StyleSheet } from "react-native";

package/types/src/components/atoms/button/button.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type ButtonProps = {
+    label: string;
+    icon?: any;
+    disabled?: boolean;
+    onPress?: () => void;
+};
+declare const Button: ({ label, icon, disabled, onPress }: ButtonProps) => JSX.Element;
+export { Button as Button };

package/types/src/components/atoms/button/button.styles.d.ts

@@ -0,0 +1,20 @@
+export function Stylesheet(context: any, disabled: any): {
+    container: {
+        backgroundColor: any;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+    };
+    label: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+    iconGap: {
+        marginRight: number;
+    };
+};

package/types/src/components/atoms/cancel-link/cancel-link.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type CancelLinkProps = {
+    label: string;
+    onPress: () => void;
+};
+declare const CancelLink: ({ label, onPress }: CancelLinkProps) => JSX.Element;
+export { CancelLink as CancelLink };

package/types/src/components/atoms/cancel-link/cancel-link.styles.d.ts

@@ -0,0 +1,17 @@
+export function Stylesheet(context: any): {
+    container: {
+        backgroundColor: string;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+        borderRadius: number;
+    };
+    label: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+};

package/types/src/components/atoms/check-switch/check-switch.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type CheckProps = {
+    value: boolean;
+    onToggle: () => void;
+};
+export declare const Check: ({ value, onToggle }: CheckProps) => JSX.Element;
+export {};

package/types/src/components/atoms/check-switch/check-switch.styles.d.ts

@@ -0,0 +1,30 @@
+export function Stylesheet(context: any, value: any): {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    toggleContainer: {
+        width: number;
+        height: number;
+        paddingLeft: number;
+        paddingRight: number;
+        borderRadius: number;
+        backgroundColor: any;
+        justifyContent: "center";
+    };
+    thumbStyle: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        borderRadius: number;
+        shadowColor: any;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+    };
+};

package/types/src/components/atoms/checkbox/checkbox.component.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type CheckboxProps = {
+    value: boolean;
+    onValueChange: () => void;
+    label: string;
+};
+declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => JSX.Element;
+export { Checkbox as Checkbox };

package/types/src/components/atoms/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,32 @@
+export function Stylesheet(context: any): {
+    element: {
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    input: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        marginRight: number;
+    };
+    check: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        borderRadius: number;
+    };
+    label: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+    };
+};

package/types/src/components/atoms/child-list-item/child-list-item.component.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ImageSourcePropType } from 'react-native';
+import { Initials } from '../../../models/initials.model';
+import { VisualState } from '../../../types/visual-state.enum';
+declare type ChildListItemProps = {
+    id: string;
+    name: string;
+    label: string;
+    selectable: boolean;
+    isSelected: boolean;
+    onPressArrow: () => void;
+    onPressText: () => void;
+    onSelect: (id: string) => void;
+    sourceAvatar: ImageSourcePropType | Initials;
+    textTimeTracker: string;
+    visualStateTimeTracker: VisualState;
+};
+declare const ChildListItem: ({ id, name, label, selectable, isSelected, onPressArrow, onPressText, onSelect, sourceAvatar, textTimeTracker, visualStateTimeTracker, }: ChildListItemProps) => JSX.Element;
+export { ChildListItem as ChildListItem };