From 73308af061af5e17ac7d4a73fa027a2f303c70dd Mon Sep 17 00:00:00 2001 From: Kirill Rogovoy Date: Fri, 23 Jul 2021 11:02:26 +0300 Subject: Update graph data when Emacs node changes + minor improvements --- .../components/auto-image/auto-image.story.tsx | 33 -- app_expo/components/auto-image/auto-image.tsx | 46 -- app_expo/components/bullet-item/bullet-item.tsx | 41 -- app_expo/components/button/button.presets.ts | 58 -- app_expo/components/button/button.props.ts | 35 -- app_expo/components/button/button.story.tsx | 33 -- app_expo/components/button/button.tsx | 36 -- app_expo/components/checkbox/checkbox.props.ts | 44 -- app_expo/components/checkbox/checkbox.story.tsx | 121 ---- app_expo/components/checkbox/checkbox.tsx | 53 -- app_expo/components/form-row/form-row.presets.ts | 71 --- app_expo/components/form-row/form-row.props.tsx | 23 - app_expo/components/form-row/form-row.story.tsx | 107 ---- app_expo/components/form-row/form-row.tsx | 13 - app_expo/components/graph-ui/graph-ui.story.tsx | 15 - app_expo/components/graph-ui/graph-ui.tsx | 48 -- app_expo/components/graph/graph.story.tsx | 15 - app_expo/components/graph/graph.tsx | 355 ------------ app_expo/components/graph/graphbak.tsx | 448 --------------- app_expo/components/graph/graphgood.tsx | 440 --------------- app_expo/components/header/header.props.ts | 45 -- app_expo/components/header/header.story.tsx | 43 -- app_expo/components/header/header.tsx | 61 -- app_expo/components/icon/icon.props.ts | 21 - app_expo/components/icon/icon.story.tsx | 19 - app_expo/components/icon/icon.tsx | 19 - app_expo/components/icon/icons/arrow-left.png | Bin 329 -> 0 bytes app_expo/components/icon/icons/arrow-left@2x.png | Bin 329 -> 0 bytes app_expo/components/icon/icons/bullet.png | Bin 204 -> 0 bytes app_expo/components/icon/icons/bullet@2x.png | Bin 204 -> 0 bytes app_expo/components/icon/icons/index.ts | 6 - app_expo/components/index.ts | 16 - .../components/local-button/local-button.story.tsx | 15 - app_expo/components/local-button/local-button.tsx | 50 -- app_expo/components/local/local.story.tsx | 15 - app_expo/components/local/local.tsx | 36 -- app_expo/components/screen/screen.presets.ts | 66 --- app_expo/components/screen/screen.props.ts | 46 -- app_expo/components/screen/screen.tsx | 66 --- app_expo/components/switch/switch.props.ts | 39 -- app_expo/components/switch/switch.story.tsx | 116 ---- app_expo/components/switch/switch.tsx | 114 ---- .../components/text-field/text-field.story.tsx | 159 ------ app_expo/components/text-field/text-field.tsx | 98 ---- app_expo/components/text/text.presets.ts | 48 -- app_expo/components/text/text.props.ts | 37 -- app_expo/components/text/text.story.tsx | 92 --- app_expo/components/text/text.tsx | 28 - app_expo/components/tweaks/tweaks.story.tsx | 15 - app_expo/components/tweaks/tweaks.tsx | 617 --------------------- app_expo/components/wallpaper/wallpaper.presets.ts | 34 -- app_expo/components/wallpaper/wallpaper.props.ts | 19 - app_expo/components/wallpaper/wallpaper.story.tsx | 16 - app_expo/components/wallpaper/wallpaper.tsx | 25 - 54 files changed, 4016 deletions(-) delete mode 100644 app_expo/components/auto-image/auto-image.story.tsx delete mode 100644 app_expo/components/auto-image/auto-image.tsx delete mode 100644 app_expo/components/bullet-item/bullet-item.tsx delete mode 100644 app_expo/components/button/button.presets.ts delete mode 100644 app_expo/components/button/button.props.ts delete mode 100644 app_expo/components/button/button.story.tsx delete mode 100644 app_expo/components/button/button.tsx delete mode 100644 app_expo/components/checkbox/checkbox.props.ts delete mode 100644 app_expo/components/checkbox/checkbox.story.tsx delete mode 100644 app_expo/components/checkbox/checkbox.tsx delete mode 100644 app_expo/components/form-row/form-row.presets.ts delete mode 100644 app_expo/components/form-row/form-row.props.tsx delete mode 100644 app_expo/components/form-row/form-row.story.tsx delete mode 100644 app_expo/components/form-row/form-row.tsx delete mode 100644 app_expo/components/graph-ui/graph-ui.story.tsx delete mode 100644 app_expo/components/graph-ui/graph-ui.tsx delete mode 100644 app_expo/components/graph/graph.story.tsx delete mode 100644 app_expo/components/graph/graph.tsx delete mode 100644 app_expo/components/graph/graphbak.tsx delete mode 100644 app_expo/components/graph/graphgood.tsx delete mode 100644 app_expo/components/header/header.props.ts delete mode 100644 app_expo/components/header/header.story.tsx delete mode 100644 app_expo/components/header/header.tsx delete mode 100644 app_expo/components/icon/icon.props.ts delete mode 100644 app_expo/components/icon/icon.story.tsx delete mode 100644 app_expo/components/icon/icon.tsx delete mode 100644 app_expo/components/icon/icons/arrow-left.png delete mode 100644 app_expo/components/icon/icons/arrow-left@2x.png delete mode 100644 app_expo/components/icon/icons/bullet.png delete mode 100644 app_expo/components/icon/icons/bullet@2x.png delete mode 100644 app_expo/components/icon/icons/index.ts delete mode 100644 app_expo/components/index.ts delete mode 100644 app_expo/components/local-button/local-button.story.tsx delete mode 100644 app_expo/components/local-button/local-button.tsx delete mode 100644 app_expo/components/local/local.story.tsx delete mode 100644 app_expo/components/local/local.tsx delete mode 100644 app_expo/components/screen/screen.presets.ts delete mode 100644 app_expo/components/screen/screen.props.ts delete mode 100644 app_expo/components/screen/screen.tsx delete mode 100644 app_expo/components/switch/switch.props.ts delete mode 100644 app_expo/components/switch/switch.story.tsx delete mode 100644 app_expo/components/switch/switch.tsx delete mode 100644 app_expo/components/text-field/text-field.story.tsx delete mode 100644 app_expo/components/text-field/text-field.tsx delete mode 100644 app_expo/components/text/text.presets.ts delete mode 100644 app_expo/components/text/text.props.ts delete mode 100644 app_expo/components/text/text.story.tsx delete mode 100644 app_expo/components/text/text.tsx delete mode 100644 app_expo/components/tweaks/tweaks.story.tsx delete mode 100644 app_expo/components/tweaks/tweaks.tsx delete mode 100644 app_expo/components/wallpaper/wallpaper.presets.ts delete mode 100644 app_expo/components/wallpaper/wallpaper.props.ts delete mode 100644 app_expo/components/wallpaper/wallpaper.story.tsx delete mode 100644 app_expo/components/wallpaper/wallpaper.tsx (limited to 'app_expo/components') diff --git a/app_expo/components/auto-image/auto-image.story.tsx b/app_expo/components/auto-image/auto-image.story.tsx deleted file mode 100644 index af74efe..0000000 --- a/app_expo/components/auto-image/auto-image.story.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* eslint-disable */ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { AutoImage } from './auto-image' - -declare let module - -const bowser = require('../../screens/welcome/bowser.png') -const morty = { - uri: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg', -} - -storiesOf('AutoImage', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - - - - - - - - - - - - - - )) diff --git a/app_expo/components/auto-image/auto-image.tsx b/app_expo/components/auto-image/auto-image.tsx deleted file mode 100644 index a8bfe37..0000000 --- a/app_expo/components/auto-image/auto-image.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useLayoutEffect, useState } from 'react' -import { - Image as RNImage, - ImageProps as DefaultImageProps, - ImageURISource, - Platform, -} from 'react-native' - -type ImageProps = DefaultImageProps & { - source: ImageURISource -} - -/** - * An Image wrapper component that autosizes itself to the size of the actual image. - * You can always override by passing a width and height in the style. - * If passing only one of width/height this image component will use the actual - * size of the other dimension. - * - * This component isn't required, but is provided as a convenience so that - * we don't have to remember to explicitly set image sizes on every image instance. - * - * To use as a stand-in replacement import { AutoImage as Image } and remove the - * Image import from react-native. Now all images in that file are handled by this - * component and are web-ready if not explicitly sized in the style property. - */ -export function AutoImage(props: ImageProps) { - const [imageSize, setImageSize] = useState({ width: 0, height: 0 }) - - useLayoutEffect(() => { - if (props.source?.uri) { - RNImage.getSize(props.source.uri as any, (width, height) => { - setImageSize({ width, height }) - }) - } else if (Platform.OS === 'web') { - // web requires a different method to get it's size - RNImage.getSize(props.source as any, (width, height) => { - setImageSize({ width, height }) - }) - } else { - const { width, height } = RNImage.resolveAssetSource(props.source) - setImageSize({ width, height }) - } - }, []) - - return -} diff --git a/app_expo/components/bullet-item/bullet-item.tsx b/app_expo/components/bullet-item/bullet-item.tsx deleted file mode 100644 index f6b2f17..0000000 --- a/app_expo/components/bullet-item/bullet-item.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react' -import { View, ViewStyle, ImageStyle, TextStyle } from 'react-native' -import { Text } from '../text/text' -import { Icon } from '../icon/icon' -import { spacing, typography } from '../../theme' - -const BULLET_ITEM: ViewStyle = { - flexDirection: 'row', - marginTop: spacing[4], - paddingBottom: spacing[4], - borderBottomWidth: 1, - borderBottomColor: '#3A3048', -} -const BULLET_CONTAINER: ViewStyle = { - marginRight: spacing[4] - 1, - marginTop: spacing[2], -} -const BULLET: ImageStyle = { - width: 8, - height: 8, -} -const BULLET_TEXT: TextStyle = { - flex: 1, - fontFamily: typography.primary, - color: '#BAB6C8', - fontSize: 15, - lineHeight: 22, -} - -export interface BulletItemProps { - text: string -} - -export function BulletItem(props: BulletItemProps) { - return ( - - - - - ) -} diff --git a/app_expo/components/button/button.presets.ts b/app_expo/components/button/button.presets.ts deleted file mode 100644 index bc0ad3f..0000000 --- a/app_expo/components/button/button.presets.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { ViewStyle, TextStyle } from 'react-native' -import { color, spacing } from '../../theme' - -/** - * All text will start off looking like this. - */ -const BASE_VIEW: ViewStyle = { - paddingVertical: spacing[2], - paddingHorizontal: spacing[2], - borderRadius: 4, - justifyContent: 'center', - alignItems: 'center', -} - -const BASE_TEXT: TextStyle = { - paddingHorizontal: spacing[3], -} - -/** - * All the variations of text styling within the app. - * - * You want to customize these to whatever you need in your app. - */ -export const viewPresets: Record = { - /** - * A smaller piece of secondard information. - */ - primary: { ...BASE_VIEW, backgroundColor: color.palette.orange } as ViewStyle, - - /** - * A button without extras. - */ - link: { - ...BASE_VIEW, - paddingHorizontal: 0, - paddingVertical: 0, - alignItems: 'flex-start', - } as ViewStyle, -} - -export const textPresets: Record = { - primary: { - ...BASE_TEXT, - fontSize: 9, - color: color.palette.white, - } as TextStyle, - link: { - ...BASE_TEXT, - color: color.text, - paddingHorizontal: 0, - paddingVertical: 0, - } as TextStyle, -} - -/** - * A list of preset names. - */ -export type ButtonPresetNames = keyof typeof viewPresets diff --git a/app_expo/components/button/button.props.ts b/app_expo/components/button/button.props.ts deleted file mode 100644 index 810e0aa..0000000 --- a/app_expo/components/button/button.props.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { StyleProp, TextStyle, TouchableOpacityProps, ViewStyle } from 'react-native' -import { ButtonPresetNames } from './button.presets' -import { TxKeyPath } from '../../i18n' - -export interface ButtonProps extends TouchableOpacityProps { - /** - * Text which is looked up via i18n. - */ - tx?: TxKeyPath - - /** - * The text to display if not using `tx` or nested components. - */ - text?: string - - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - - /** - * An optional style override useful for the button text. - */ - textStyle?: StyleProp - - /** - * One of the different types of text presets. - */ - preset?: ButtonPresetNames - - /** - * One of the different types of text presets. - */ - children?: React.ReactNode -} diff --git a/app_expo/components/button/button.story.tsx b/app_expo/components/button/button.story.tsx deleted file mode 100644 index 54dc2a9..0000000 --- a/app_expo/components/button/button.story.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react' -import { ViewStyle, TextStyle, Alert } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Button } from './button' - -declare let module - -const buttonStyleArray: ViewStyle[] = [{ paddingVertical: 100 }, { borderRadius: 0 }] - -const buttonTextStyleArray: TextStyle[] = [{ fontSize: 20 }, { color: '#a511dc' }] - -storiesOf('Button', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - ) : ( - - )} - - - - {rightIcon ? ( - - ) : ( - - )} - - ) -} diff --git a/app_expo/components/icon/icon.props.ts b/app_expo/components/icon/icon.props.ts deleted file mode 100644 index 1f3ed2e..0000000 --- a/app_expo/components/icon/icon.props.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ImageStyle, StyleProp, ViewStyle } from 'react-native' -import { IconTypes } from './icons' - -export interface IconProps { - /** - * Style overrides for the icon image - */ - style?: StyleProp - - /** - * Style overrides for the icon container - */ - - containerStyle?: StyleProp - - /** - * The name of the icon - */ - - icon?: IconTypes -} diff --git a/app_expo/components/icon/icon.story.tsx b/app_expo/components/icon/icon.story.tsx deleted file mode 100644 index 31c8499..0000000 --- a/app_expo/components/icon/icon.story.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Icon } from './icon' - -declare let module - -storiesOf('Icon', module) - .addDecorator((fn) => {fn()}) - .add('Names', () => ( - - - - - - - - - )) diff --git a/app_expo/components/icon/icon.tsx b/app_expo/components/icon/icon.tsx deleted file mode 100644 index f596bb2..0000000 --- a/app_expo/components/icon/icon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react' -import { View, ImageStyle } from 'react-native' -import { AutoImage as Image } from '../auto-image/auto-image' -import { IconProps } from './icon.props' -import { icons } from './icons' - -const ROOT: ImageStyle = { - resizeMode: 'contain', -} - -export function Icon(props: IconProps) { - const { style: styleOverride, icon, containerStyle } = props - - return ( - - - - ) -} diff --git a/app_expo/components/icon/icons/arrow-left.png b/app_expo/components/icon/icons/arrow-left.png deleted file mode 100644 index 9d607d7..0000000 Binary files a/app_expo/components/icon/icons/arrow-left.png and /dev/null differ diff --git a/app_expo/components/icon/icons/arrow-left@2x.png b/app_expo/components/icon/icons/arrow-left@2x.png deleted file mode 100644 index 9d607d7..0000000 Binary files a/app_expo/components/icon/icons/arrow-left@2x.png and /dev/null differ diff --git a/app_expo/components/icon/icons/bullet.png b/app_expo/components/icon/icons/bullet.png deleted file mode 100644 index 8fc256f..0000000 Binary files a/app_expo/components/icon/icons/bullet.png and /dev/null differ diff --git a/app_expo/components/icon/icons/bullet@2x.png b/app_expo/components/icon/icons/bullet@2x.png deleted file mode 100644 index 8fc256f..0000000 Binary files a/app_expo/components/icon/icons/bullet@2x.png and /dev/null differ diff --git a/app_expo/components/icon/icons/index.ts b/app_expo/components/icon/icons/index.ts deleted file mode 100644 index 792e408..0000000 --- a/app_expo/components/icon/icons/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const icons = { - back: require('./arrow-left.png'), - bullet: require('./bullet.png'), -} - -export type IconTypes = keyof typeof icons diff --git a/app_expo/components/index.ts b/app_expo/components/index.ts deleted file mode 100644 index d93e972..0000000 --- a/app_expo/components/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -export * from './bullet-item/bullet-item' -export * from './button/button' -export * from './checkbox/checkbox' -export * from './form-row/form-row' -export * from './header/header' -export * from './icon/icon' -export * from './screen/screen' -export * from './switch/switch' -export * from './text/text' -export * from './text-field/text-field' -export * from './wallpaper/wallpaper' -export * from './auto-image/auto-image' -export * from './graph/graph' -export * from './tweaks/tweaks' -export * from './local-button/local-button' -export * from './graph-ui/graph-ui' diff --git a/app_expo/components/local-button/local-button.story.tsx b/app_expo/components/local-button/local-button.story.tsx deleted file mode 100644 index 0d35ab2..0000000 --- a/app_expo/components/local-button/local-button.story.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { color } from '../../theme' -import { LocalButton } from './local-button' - -storiesOf('LocalButton', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - - - )) diff --git a/app_expo/components/local-button/local-button.tsx b/app_expo/components/local-button/local-button.tsx deleted file mode 100644 index c1021a3..0000000 --- a/app_expo/components/local-button/local-button.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react' -import { StyleProp, TextStyle, View, ViewStyle } from 'react-native' -import { observer } from 'mobx-react-lite' -import { color, typography } from '../../theme' -import { Text } from '../' -import { flatten } from 'ramda' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface LocalButtonProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - local - setLocal -} - -/** - * Describe your component here - */ -export const LocalButton = observer(function LocalButton(props: LocalButtonProps) { - const { style, local, setLocal } = props - const styles = flatten([CONTAINER, style]) - - return ( - - { - setLocal(!local) - }} - size={30} - style={{ textAlign: 'center' }} - > - {!local ? 'Global Graph' : 'Local Graph'} - - - ) -}) diff --git a/app_expo/components/local/local.story.tsx b/app_expo/components/local/local.story.tsx deleted file mode 100644 index 2bfa065..0000000 --- a/app_expo/components/local/local.story.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { color } from '../../theme' -import { Local } from './local' - -storiesOf('Local', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - - - )) diff --git a/app_expo/components/local/local.tsx b/app_expo/components/local/local.tsx deleted file mode 100644 index 1478057..0000000 --- a/app_expo/components/local/local.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react' -import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native' -import { observer } from 'mobx-react-lite' -import { color, typography } from '../../theme' -import { Text } from '../' -import { flatten } from 'ramda' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface LocalProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp -} - -/** - * Describe your component here - */ -export const LocalButton = observer(function LocalButton(props: LocalProps): boolean { - const { style } = props - const styles = flatten([CONTAINER, style]) - - return ( - - ) -}) diff --git a/app_expo/components/screen/screen.presets.ts b/app_expo/components/screen/screen.presets.ts deleted file mode 100644 index aa8d8cf..0000000 --- a/app_expo/components/screen/screen.presets.ts +++ /dev/null @@ -1,66 +0,0 @@ -import { ViewStyle } from 'react-native' -import { color } from '../../theme' - -/** - * All screen keyboard offsets. - */ -export const offsets = { - none: 0, -} - -/** - * The variations of keyboard offsets. - */ -export type KeyboardOffsets = keyof typeof offsets - -/** - * All the variations of screens. - */ -export const presets = { - /** - * No scrolling. Suitable for full-screen carousels and components - * which have built-in scrolling like FlatList. - */ - fixed: { - outer: { - backgroundColor: color.background, - flex: 1, - height: '100%', - } as ViewStyle, - inner: { - justifyContent: 'flex-start', - alignItems: 'stretch', - height: '100%', - width: '100%', - } as ViewStyle, - }, - - /** - * Scrolls. Suitable for forms or other things requiring a keyboard. - * - * Pick this one if you don't know which one you want yet. - */ - scroll: { - outer: { - backgroundColor: color.background, - flex: 1, - height: '100%', - } as ViewStyle, - inner: { justifyContent: 'flex-start', alignItems: 'stretch' } as ViewStyle, - }, -} - -/** - * The variations of screens. - */ -export type ScreenPresets = keyof typeof presets - -/** - * Is this preset a non-scrolling one? - * - * @param preset The preset to check - */ -export function isNonScrolling(preset?: ScreenPresets) { - // any of these things will make you scroll - return !preset || !presets[preset] || preset === 'fixed' -} diff --git a/app_expo/components/screen/screen.props.ts b/app_expo/components/screen/screen.props.ts deleted file mode 100644 index 1371c64..0000000 --- a/app_expo/components/screen/screen.props.ts +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react' -import { StyleProp, ViewStyle } from 'react-native' -import { KeyboardOffsets, ScreenPresets } from './screen.presets' - -export interface ScreenProps { - /** - * Children components. - */ - children?: React.ReactNode - - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - - /** - * One of the different types of presets. - */ - preset?: ScreenPresets - - /** - * An optional background color - */ - backgroundColor?: string - - /** - * An optional status bar setting. Defaults to light-content. - */ - statusBar?: 'light-content' | 'dark-content' - - /** - * Should we not wrap in SafeAreaView? Defaults to false. - */ - unsafe?: boolean - - /** - * By how much should we offset the keyboard? Defaults to none. - */ - keyboardOffset?: KeyboardOffsets - - /** - * Should keyboard persist on screen tap. Defaults to handled. - * Only applies to scroll preset. - */ - keyboardShouldPersistTaps?: 'handled' | 'always' | 'never' -} diff --git a/app_expo/components/screen/screen.tsx b/app_expo/components/screen/screen.tsx deleted file mode 100644 index dafe36e..0000000 --- a/app_expo/components/screen/screen.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react' -import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from 'react-native' -import { useSafeAreaInsets } from 'react-native-safe-area-context' -import { ScreenProps } from './screen.props' -import { isNonScrolling, offsets, presets } from './screen.presets' - -const isIos = Platform.OS === 'ios' - -function ScreenWithoutScrolling(props: ScreenProps) { - const insets = useSafeAreaInsets() - const preset = presets.fixed - const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} - const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } - - return ( - - - {props.children} - - ) -} - -function ScreenWithScrolling(props: ScreenProps) { - const insets = useSafeAreaInsets() - const preset = presets.scroll - const style = props.style || {} - const backgroundStyle = props.backgroundColor ? { backgroundColor: props.backgroundColor } : {} - const insetStyle = { paddingTop: props.unsafe ? 0 : insets.top } - - return ( - - - - - {props.children} - - - - ) -} - -/** - * The starting component on every screen in the app. - * - * @param props The screen props - */ -export function Screen(props: ScreenProps) { - if (isNonScrolling(props.preset)) { - return - } else { - return - } -} diff --git a/app_expo/components/switch/switch.props.ts b/app_expo/components/switch/switch.props.ts deleted file mode 100644 index 2549a95..0000000 --- a/app_expo/components/switch/switch.props.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { StyleProp, ViewStyle } from 'react-native' - -export interface SwitchProps { - /** - * On or off. - */ - value?: boolean - /** - * Fires when the on/off switch triggers. - * - * @param newValue The new value we're switching to. - */ - onToggle?: (newValue: boolean) => void - - /** - * A style override to apply to the container. Useful for margins and paddings. - */ - style?: StyleProp - - /** - * Additional track styling when on. - */ - trackOnStyle?: StyleProp - - /** - * Additional track styling when off. - */ - trackOffStyle?: StyleProp - - /** - * Additional thumb styling when on. - */ - thumbOnStyle?: StyleProp - - /** - * Additional thumb styling when off. - */ - thumbOffStyle?: StyleProp -} diff --git a/app_expo/components/switch/switch.story.tsx b/app_expo/components/switch/switch.story.tsx deleted file mode 100644 index b10f8c6..0000000 --- a/app_expo/components/switch/switch.story.tsx +++ /dev/null @@ -1,116 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { View, ViewStyle } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Toggle } from 'react-powerplug' -import { Switch } from './switch' - -declare let module - -const styleArray: ViewStyle[] = [{ borderColor: '#686868' }] - -const trackOffStyle: ViewStyle[] = [ - { backgroundColor: '#686868' }, - { - height: 80, - borderRadius: 0, - }, -] -const trackOnStyle: ViewStyle[] = [ - { - backgroundColor: '#b1008e', - borderColor: '#686868', - }, - { - height: 80, - borderRadius: 0, - }, -] -const thumbOffStyle: ViewStyle[] = [ - { - backgroundColor: '#b1008e', - borderColor: '#686868', - }, - { - height: 80, - borderRadius: 0, - }, -] -const thumbOnStyle: ViewStyle[] = [ - { backgroundColor: '#f0c' }, - { - height: 80, - borderRadius: 0, - borderColor: '#686868', - }, -] - -storiesOf('Switch', module) - .addDecorator((fn) => {fn()}) - .add('Behaviour', () => ( - - - - {({ on, toggle }) => } - - - - - - - - - - )) - .add('Styling', () => ( - - - - {({ on, toggle }) => ( - - - - )} - - - - - - {({ on, toggle }) => ( - - - - )} - - - - )) diff --git a/app_expo/components/switch/switch.tsx b/app_expo/components/switch/switch.tsx deleted file mode 100644 index 845d964..0000000 --- a/app_expo/components/switch/switch.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react' -import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from 'react-native' -import { color } from '../../theme' -import { SwitchProps } from './switch.props' - -// dimensions -const THUMB_SIZE = 30 -const WIDTH = 56 -const MARGIN = 2 -const OFF_POSITION = -0.5 -const ON_POSITION = WIDTH - THUMB_SIZE - MARGIN -const BORDER_RADIUS = (THUMB_SIZE * 3) / 4 - -// colors -const ON_COLOR = color.primary -const OFF_COLOR = color.palette.offWhite -const BORDER_ON_COLOR = ON_COLOR -const BORDER_OFF_COLOR = 'rgba(0, 0, 0, 0.1)' - -// animation -const DURATION = 250 - -// the track always has these props -const TRACK = { - height: THUMB_SIZE + MARGIN, - width: WIDTH, - borderRadius: BORDER_RADIUS, - borderWidth: MARGIN / 2, - backgroundColor: color.background, -} - -// the thumb always has these props -const THUMB: ViewStyle = { - position: 'absolute', - width: THUMB_SIZE, - height: THUMB_SIZE, - borderColor: BORDER_OFF_COLOR, - borderRadius: THUMB_SIZE / 2, - borderWidth: MARGIN / 2, - backgroundColor: color.background, - shadowColor: BORDER_OFF_COLOR, - shadowOffset: { width: 1, height: 2 }, - shadowOpacity: 1, - shadowRadius: 2, - elevation: 2, -} - -const makeAnimatedValue = (switchOn) => new Animated.Value(switchOn ? 1 : 0) - -export function Switch(props: SwitchProps) { - const [timer] = React.useState(makeAnimatedValue(props.value)) - const startAnimation = React.useMemo( - () => (newValue: boolean) => { - const toValue = newValue ? 1 : 0 - const easing = Easing.out(Easing.circle) - Animated.timing(timer, { - toValue, - duration: DURATION, - easing, - useNativeDriver: true, - }).start() - }, - [timer], - ) - - const [previousValue, setPreviousValue] = React.useState(props.value) - React.useEffect(() => { - if (props.value !== previousValue) { - startAnimation(props.value) - setPreviousValue(props.value) - } - }, [props.value]) - - const handlePress = React.useMemo( - () => () => props.onToggle && props.onToggle(!props.value), - [props.onToggle, props.value], - ) - - if (!timer) { - return null - } - - const translateX = timer.interpolate({ - inputRange: [0, 1], - outputRange: [OFF_POSITION, ON_POSITION], - }) - - const style = props.style - - const trackStyle = [ - TRACK, - { - backgroundColor: props.value ? ON_COLOR : OFF_COLOR, - borderColor: props.value ? BORDER_ON_COLOR : BORDER_OFF_COLOR, - }, - props.value ? props.trackOnStyle : props.trackOffStyle, - ] - - const thumbStyle = [ - THUMB, - { - transform: [{ translateX }], - }, - props.value ? props.thumbOnStyle : props.thumbOffStyle, - ] - - return ( - - - - - - ) -} diff --git a/app_expo/components/text-field/text-field.story.tsx b/app_expo/components/text-field/text-field.story.tsx deleted file mode 100644 index 5f4d408..0000000 --- a/app_expo/components/text-field/text-field.story.tsx +++ /dev/null @@ -1,159 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Text, TextField } from '../' -import { State } from 'react-powerplug' -import { ViewStyle, TextStyle, Alert } from 'react-native' - -declare let module - -const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }] - -const inputStyleArray: TextStyle[] = [ - { - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - }, - { - borderWidth: 10, - borderRadius: 4, - borderColor: '#7fff00', - }, -] -let alertWhenFocused = true - -storiesOf('TextField', module) - .addDecorator((fn) => {fn()}) - .add('Labelling', () => ( - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="Name" - placeholder="omg your name" - /> - )} - - - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - placeholderTx="storybook.placeholder" - labelTx="storybook.field" - /> - )} - - - - )) - .add('Style Overrides', () => ( - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="First Name" - style={{ paddingTop: 0, paddingHorizontal: 40 }} - /> - )} - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="Last Name" - style={{ paddingBottom: 0 }} - /> - )} - - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="Name" - inputStyle={{ - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - borderWidth: 10, - borderRadius: 4, - borderColor: 'hotpink', - }} - /> - )} - - - - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="Name" - style={styleArray} - inputStyle={inputStyleArray} - /> - )} - - - - - )) - .add('Ref Forwarding', () => ( - - - - {({ state, setState }) => ( - setState({ value })} - value={state.value} - label="Name" - inputStyle={{ - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - borderWidth: 10, - borderRadius: 4, - borderColor: 'hotpink', - }} - forwardedRef={(ref) => ref} - onFocus={() => { - if (alertWhenFocused) { - // Prevent text field focus from being repeatedly triggering alert - alertWhenFocused = false - Alert.alert('Text field focuesed with forwarded ref!') - } - }} - /> - )} - - - - - )) diff --git a/app_expo/components/text-field/text-field.tsx b/app_expo/components/text-field/text-field.tsx deleted file mode 100644 index 1d56b95..0000000 --- a/app_expo/components/text-field/text-field.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import React from 'react' -import { StyleProp, TextInput, TextInputProps, TextStyle, View, ViewStyle } from 'react-native' -import { color, spacing, typography } from '../../theme' -import { translate, TxKeyPath } from '../../i18n' -import { Text } from '../text/text' - -// the base styling for the container -const CONTAINER: ViewStyle = { - paddingVertical: spacing[3], -} - -// the base styling for the TextInput -const INPUT: TextStyle = { - fontFamily: typography.primary, - color: color.text, - minHeight: 44, - fontSize: 18, - backgroundColor: color.palette.white, -} - -// currently we have no presets, but that changes quickly when you build your app. -const PRESETS: { [name: string]: ViewStyle } = { - default: {}, -} - -export interface TextFieldProps extends TextInputProps { - /** - * The placeholder i18n key. - */ - placeholderTx?: TxKeyPath - - /** - * The Placeholder text if no placeholderTx is provided. - */ - placeholder?: string - - /** - * The label i18n key. - */ - labelTx?: TxKeyPath - - /** - * The label text if no labelTx is provided. - */ - label?: string - - /** - * Optional container style overrides useful for margins & padding. - */ - style?: StyleProp - - /** - * Optional style overrides for the input. - */ - inputStyle?: StyleProp - - /** - * Various look & feels. - */ - preset?: keyof typeof PRESETS - - forwardedRef?: any -} - -/** - * A component which has a label and an input together. - */ -export function TextField(props: TextFieldProps) { - const { - placeholderTx, - placeholder, - labelTx, - label, - preset = 'default', - style: styleOverride, - inputStyle: inputStyleOverride, - forwardedRef, - ...rest - } = props - - const containerStyles = [CONTAINER, PRESETS[preset], styleOverride] - const inputStyles = [INPUT, inputStyleOverride] - const actualPlaceholder = placeholderTx ? translate(placeholderTx) : placeholder - - return ( - - - - - ) -} diff --git a/app_expo/components/text/text.presets.ts b/app_expo/components/text/text.presets.ts deleted file mode 100644 index 4693417..0000000 --- a/app_expo/components/text/text.presets.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { TextStyle } from 'react-native' -import { color, typography } from '../../theme' - -/** - * All text will start off looking like this. - */ -const BASE: TextStyle = { - fontFamily: typography.primary, - color: color.text, - fontSize: 15, -} - -/** - * All the variations of text styling within the app. - * - * You want to customize these to whatever you need in your app. - */ -export const presets = { - /** - * The default text styles. - */ - default: BASE, - - /** - * A bold version of the default text. - */ - bold: { ...BASE, fontWeight: 'bold' } as TextStyle, - - /** - * Large headers. - */ - header: { ...BASE, fontSize: 24, fontWeight: 'bold' } as TextStyle, - - /** - * Field labels that appear on forms above the inputs. - */ - fieldLabel: { ...BASE, fontSize: 13, color: color.dim } as TextStyle, - - /** - * A smaller piece of secondard information. - */ - secondary: { ...BASE, fontSize: 9, color: color.dim } as TextStyle, -} - -/** - * A list of preset names. - */ -export type TextPresets = keyof typeof presets diff --git a/app_expo/components/text/text.props.ts b/app_expo/components/text/text.props.ts deleted file mode 100644 index 79ee12c..0000000 --- a/app_expo/components/text/text.props.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { StyleProp, TextProps as TextProperties, TextStyle } from 'react-native' -import i18n from 'i18n-js' -import { TextPresets } from './text.presets' -import { TxKeyPath } from '../../i18n' - -export interface TextProps extends TextProperties { - /** - * Children components. - */ - children?: React.ReactNode - - /** - * Text which is looked up via i18n. - */ - tx?: TxKeyPath - - /** - * Optional options to pass to i18n. Useful for interpolation - * as well as explicitly setting locale or translation fallbacks. - */ - txOptions?: i18n.TranslateOptions - - /** - * The text to display if not using `tx` or nested components. - */ - text?: string - - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - - /** - * One of the different types of text presets. - */ - preset?: TextPresets -} diff --git a/app_expo/components/text/text.story.tsx b/app_expo/components/text/text.story.tsx deleted file mode 100644 index edfe24d..0000000 --- a/app_expo/components/text/text.story.tsx +++ /dev/null @@ -1,92 +0,0 @@ -/* eslint-disable react-native/no-inline-styles */ -/* eslint-disable react-native/no-color-literals */ - -import * as React from 'react' -import { View, ViewStyle } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { color } from '../../theme' -import { Text } from './text' - -declare let module - -const VIEWSTYLE = { - flex: 1, - backgroundColor: color.storybookDarkBg, -} -const viewStyleArray: ViewStyle[] = [VIEWSTYLE, { backgroundColor: '#7fff00' }] - -storiesOf('Text', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - Hello! - - Check out{'\n'} - my{'\n'} - line height - - The quick brown fox jumped over the slow lazy dog. - $123,456,789.00 - - - - - Osnap! I'm puffy. - - - - - Behold! - - - - )) - .add('Passing Content', () => ( - - - - - - - - - - - - - - - Passing strings as children. - - - - - - {' '} - Hello bolded World. - - - - - )) - .add('Styling', () => ( - - - - - {' '} - Hello bolded World. - - - - - )) diff --git a/app_expo/components/text/text.tsx b/app_expo/components/text/text.tsx deleted file mode 100644 index d9ffc8c..0000000 --- a/app_expo/components/text/text.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react' -import { Text as ReactNativeText } from 'react-native' -import { presets } from './text.presets' -import { TextProps } from './text.props' -import { translate } from '../../i18n' - -/** - * For your text displaying needs. - * - * This component is a HOC over the built-in React Native one. - */ -export function Text(props: TextProps) { - // grab the props - const { preset = 'default', tx, txOptions, text, children, style: styleOverride, ...rest } = props - - // figure out which content to use - const i18nText = tx && translate(tx, txOptions) - const content = i18nText || text || children - - const style = presets[preset] || presets.default - const styles = [style, styleOverride] - - return ( - - {content} - - ) -} diff --git a/app_expo/components/tweaks/tweaks.story.tsx b/app_expo/components/tweaks/tweaks.story.tsx deleted file mode 100644 index 770d50f..0000000 --- a/app_expo/components/tweaks/tweaks.story.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { color } from '../../theme' -import { Tweaks } from './tweaks' - -storiesOf('Tweaks', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - - - )) diff --git a/app_expo/components/tweaks/tweaks.tsx b/app_expo/components/tweaks/tweaks.tsx deleted file mode 100644 index ea35805..0000000 --- a/app_expo/components/tweaks/tweaks.tsx +++ /dev/null @@ -1,617 +0,0 @@ -import * as React from 'react' -import { - ScrollView, - StyleProp, - TextStyle, - TouchableOpacity, - View, - ViewStyle, - StyleSheet, - Button, -} from 'react-native' -import { observer } from 'mobx-react-lite' -import { color, typography } from '../../theme' -import { Text } from '../' -import { flatten } from 'ramda' -import Slider from '@react-native-community/slider' -import { useState } from 'react' -import Accordion from 'react-native-collapsible/Accordion' -import * as Animatable from 'react-native-animatable' -import Icon from 'react-native-vector-icons/MaterialCommunityIcons' -import { Switch } from 'react-native-elements' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface TweaksProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - physics - setPhysics -} - -/** - * Describe your component here - */ -export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element { - const { style, physics, setPhysics } = props - // const styles = flatten([CONTAINER, style]) - - const content = [ - { - title: 'Physics', - content: ( - - - { - setPhysics({ ...physics, gravityOn: !physics.gravityOn }) - }} - /> - - { - setPhysics({ ...physics, gravity: value }) - }} - value={physics.gravity} - step={0.01} - /> - - { - setPhysics({ ...physics, charge: value }) - }} - value={physics.charge} - step={1} - /> - - { - setPhysics({ ...physics, linkStrength: value }) - }} - value={physics.linkStrength} - step={0.01} - /> - - { - setPhysics({ ...physics, linkIts: value }) - }} - value={physics.linkIts} - step={1} - /> - - { - setPhysics({ ...physics, collision: !physics.collision }) - }} - /> - - { - setPhysics({ ...physics, alphaDecay: value }) - }} - value={physics.alphaDecay} - step={0.01} - /> - - { - setPhysics({ ...physics, alphaTarget: value }) - }} - value={physics.alphaTarget} - step={0.1} - /> - - { - setPhysics({ ...physics, velocityDecay: value }) - }} - value={physics.velocityDecay} - step={0.01} - /> - - { - setPhysics({ ...physics, galaxy: !physics.galaxy }) - }} - /> - - ), - }, - { - title: 'Visual', - content: ( - - - { - setPhysics({ ...physics, colorful: !physics.colorful }) - }} - /> - - { - setPhysics({ ...physics, hover: !physics.hover }) - }} - /> - - { - setPhysics({ ...physics, linkOpacity: value }) - }} - value={physics.linkOpacity} - step={0.01} - /> - - { - setPhysics({ ...physics, linkWidth: value }) - }} - value={physics.linkWidth} - step={0.1} - /> - - { - setPhysics({ ...physics, nodeRel: value }) - }} - value={physics.nodeRel} - step={0.01} - /> - - { - setPhysics({ ...physics, particles: value }) - }} - value={physics.particles} - step={1} - /> - - { - setPhysics({ ...physics, particleWidth: value }) - }} - value={physics.particleWidth} - step={0.1} - /> - - { - setPhysics({ ...physics, labels: !physics.labels }) - }} - /> - - { - setPhysics({ ...physics, labelScale: value }) - }} - value={physics.labelScale} - step={0.1} - /> - - ), - }, - { - title: 'Modes', - content: , - }, - ] - - const [activeSections, setActiveSections] = useState([]) - - const setSections = (sections) => { - setActiveSections(sections.includes(undefined) ? [] : sections) - } - - const renderHeader = (section, _, isActive) => { - return ( - - {section.title} - - ) - } - - const renderContent = (section, _, isActive) => { - return ( - - {section.content} - - ) - } - const [tweaks, setTweaks] = useState(true) - if (true) { - if (tweaks) { - return ( - - - { - setTweaks(false) - }} - > - - - - - - - - ) - } else { - return ( - { - setTweaks(true) - }} - style={{ - position: 'absolute', - top: 50, - left: 50, - width: 30, - color: '#ffffff', - zIndex: 100, - }} - > - - - ) - } - } else { - return ( - - - - { - setPhysics({ ...physics, charge: value }) - }} - value={physics.charge} - step={1} - /> - - { - setPhysics({ ...physics, linkStrength: value }) - }} - value={physics.linkStrength} - step={0.1} - /> - - { - setPhysics({ ...physics, linkIts: value }) - }} - value={physics.linkIts} - step={1} - /> - - { - setPhysics({ ...physics, collision: !physics.collision }) - }} - /> - - - { - setPhysics({ ...physics, particles: value }) - }} - value={physics.particles} - step={1} - /> - - - { - setPhysics({ ...physics, collapse: !physics.collapse }) - }} - /> - - { - setPhysics({ ...physics, threedim: !physics.threedim }) - }} - /> - - ) - } -}) - -const styles = StyleSheet.create({ - container: { - display: 'flex', - backgroundColor: '#2a2e38', - position: 'absolute', - zIndex: 5, - marginLeft: '2%', - marginTop: '2%', - maxWidth: 275, - borderRadius: 10, - borderStyle: 'solid', - borderWidth: 10, - borderColor: '#2a2e38', - maxHeight: '80%', - paddingBottom: 20, - }, - title: { - textAlign: 'left', - fontSize: 22, - fontWeight: '300', - marginBottom: 20, - paddingLeft: 10, - }, - header: { - backgroundColor: '#2a2e38', - padding: 10, - paddingBottom: 20, - textAlign: 'left', - }, - headerText: { - textAlign: 'left', - paddingLeft: 30, - fontSize: 16, - fontWeight: '500', - }, - content: { - padding: 20, - paddingLeft: 60, - backgroundColor: '#000000', - }, - active: { - backgroundColor: '#2a2e38', - }, - inactive: { - backgroundColor: '#2a2e38', - }, - selectors: { - marginBottom: 10, - flexDirection: 'row', - justifyContent: 'center', - }, - selector: { - backgroundColor: '#2a2e38', - padding: 10, - }, - activeSelector: { - fontWeight: 'bold', - }, - selectTitle: { - fontSize: 14, - fontWeight: '500', - padding: 10, - }, - multipleToggle: { - flexDirection: 'row', - justifyContent: 'center', - marginVertical: 30, - alignItems: 'center', - }, - multipleToggle__title: { - fontSize: 16, - marginRight: 8, - }, - slider: { - minimumTrackTintColor: '#a991f1', - thumbTintColor: '#a991f1', - height: 40, - width: '90%', - }, - switch: { - width: '5', - height: 20, - marginVertical: 10, - }, -}) diff --git a/app_expo/components/wallpaper/wallpaper.presets.ts b/app_expo/components/wallpaper/wallpaper.presets.ts deleted file mode 100644 index 148ad5c..0000000 --- a/app_expo/components/wallpaper/wallpaper.presets.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { ImageStyle } from 'react-native' - -/** - * All wallpaper will start off looking like this. - */ -const BASE: ImageStyle = { - position: 'absolute', - top: 0, - left: 0, - bottom: 0, - right: 0, -} - -/** - * All the variations of wallpaper styling within the app. - * - * You want to customize these to whatever you need in your app. - */ -export const presets = { - /** - * The default wallpaper styles. - */ - stretch: { - ...BASE, - resizeMode: 'stretch', - width: null, // Have to set these to null because android ¯\_(ツ)_/¯ - height: null, - } as ImageStyle, -} - -/** - * A list of preset names. - */ -export type WallpaperPresets = keyof typeof presets diff --git a/app_expo/components/wallpaper/wallpaper.props.ts b/app_expo/components/wallpaper/wallpaper.props.ts deleted file mode 100644 index 9d97f12..0000000 --- a/app_expo/components/wallpaper/wallpaper.props.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ImageStyle, StyleProp } from 'react-native' -import { WallpaperPresets } from './wallpaper.presets' - -export interface WallpaperProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp - - /** - * An optional background image to override the default image. - */ - backgroundImage?: string - - /** - * One of the different types of wallpaper presets. - */ - preset?: WallpaperPresets -} diff --git a/app_expo/components/wallpaper/wallpaper.story.tsx b/app_expo/components/wallpaper/wallpaper.story.tsx deleted file mode 100644 index 14a5f62..0000000 --- a/app_expo/components/wallpaper/wallpaper.story.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Wallpaper } from './wallpaper' - -declare let module - -storiesOf('Wallpaper', module) - .addDecorator((fn) => {fn()}) - .add('Style Presets', () => ( - - - - - - )) diff --git a/app_expo/components/wallpaper/wallpaper.tsx b/app_expo/components/wallpaper/wallpaper.tsx deleted file mode 100644 index f5e24f1..0000000 --- a/app_expo/components/wallpaper/wallpaper.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { AutoImage as Image } from '../auto-image/auto-image' -import { presets } from './wallpaper.presets' -import { WallpaperProps } from './wallpaper.props' - -//const defaultImage = require("./bg.png") - -/** - * For your text displaying needs. - * - * This component is a HOC over the built-in React Native one. - */ -export function Wallpaper(props: WallpaperProps) { - // grab the props - const { preset = 'stretch', style: styleOverride, backgroundImage } = props - - // assemble the style - const presetToUse = presets[preset] || presets.stretch - const styles = [presetToUse, styleOverride] - - // figure out which image to use - //const source = backgroundImage || defaultImage - - return null // -} -- cgit v1.2.3