diff options
Diffstat (limited to 'app/components')
![app/components/icon/icons/[email protected]](/org-roam-ui/diff/app/components/icon/icons/arrow-left@2x.png?id=5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb&id2=f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79){kind=link}
![app/components/icon/icons/[email protected]](/org-roam-ui/diff/app/components/icon/icons/bullet@2x.png?id=5f4611d65e40eae3ca6191a15f68d69ea5a1c4cb&id2=f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79){kind=link}
54 files changed, 0 insertions, 4423 deletions
diff --git a/app/components/auto-image/auto-image.story.tsx b/app/components/auto-image/auto-image.story.tsx deleted file mode 100644 index 76e9dab..0000000 --- a/app/components/auto-image/auto-image.story.tsx +++ /dev/null @@ -1,37 +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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="With require()"> - <AutoImage source={bowser} /> - <AutoImage source={bowser} style={{ width: 150 }} /> - <AutoImage source={bowser} style={{ width: 150, height: 150 }} /> - <AutoImage source={bowser} style={{ height: 150 }} /> - <AutoImage - source={bowser} - style={{ height: 150, resizeMode: 'contain' }} - /> - </UseCase> - <UseCase text="With URL"> - <AutoImage source={morty} /> - <AutoImage source={morty} style={{ width: 150 }} /> - <AutoImage source={morty} style={{ width: 150, height: 150 }} /> - <AutoImage source={morty} style={{ height: 150 }} /> - <AutoImage - source={morty} - style={{ height: 150, resizeMode: 'contain' }} - /> - </UseCase> - </Story> - )) diff --git a/app/components/auto-image/auto-image.tsx b/app/components/auto-image/auto-image.tsx deleted file mode 100644 index a8bfe37..0000000 --- a/app/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 <RNImage {...props} style={[imageSize, props.style]} /> -} diff --git a/app/components/bullet-item/bullet-item.tsx b/app/components/bullet-item/bullet-item.tsx deleted file mode 100644 index f6b2f17..0000000 --- a/app/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 ( - <View style={BULLET_ITEM}> - <Icon icon="bullet" containerStyle={BULLET_CONTAINER} style={BULLET} /> - <Text style={BULLET_TEXT} text={props.text} /> - </View> - ) -} diff --git a/app/components/button/button.presets.ts b/app/components/button/button.presets.ts deleted file mode 100644 index bc0ad3f..0000000 --- a/app/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<string, ViewStyle> = { - /** - * 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<ButtonPresetNames, TextStyle> = { - 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/components/button/button.props.ts b/app/components/button/button.props.ts deleted file mode 100644 index 5f26136..0000000 --- a/app/components/button/button.props.ts +++ /dev/null @@ -1,40 +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<ViewStyle> - - /** - * An optional style override useful for the button text. - */ - textStyle?: StyleProp<TextStyle> - - /** - * 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/components/button/button.story.tsx b/app/components/button/button.story.tsx deleted file mode 100644 index 5dc21c1..0000000 --- a/app/components/button/button.story.tsx +++ /dev/null @@ -1,51 +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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary button."> - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - /> - </UseCase> - <UseCase - text="Disabled" - usage="The disabled behaviour of the primary button." - > - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - disabled - /> - </UseCase> - <UseCase text="Array Style" usage="Button with array style"> - <Button - text="Click It" - preset="primary" - onPress={() => Alert.alert('pressed')} - style={buttonStyleArray} - textStyle={buttonTextStyleArray} - /> - </UseCase> - </Story> - )) diff --git a/app/components/button/button.tsx b/app/components/button/button.tsx deleted file mode 100644 index 03b8f85..0000000 --- a/app/components/button/button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react' -import { TouchableOpacity } from 'react-native' -import { Text } from '../text/text' -import { viewPresets, textPresets } from './button.presets' -import { ButtonProps } from './button.props' - -/** - * For your text displaying needs. - * - * This component is a HOC over the built-in React Native one. - */ -export function Button(props: ButtonProps) { - // grab the props - const { - preset = 'primary', - tx, - text, - style: styleOverride, - textStyle: textStyleOverride, - children, - ...rest - } = props - - const viewStyle = viewPresets[preset] || viewPresets.primary - const viewStyles = [viewStyle, styleOverride] - const textStyle = textPresets[preset] || textPresets.primary - const textStyles = [textStyle, textStyleOverride] - - const content = children || <Text tx={tx} text={text} style={textStyles} /> - - return ( - <TouchableOpacity style={viewStyles} {...rest}> - {content} - </TouchableOpacity> - ) -} diff --git a/app/components/checkbox/checkbox.props.ts b/app/components/checkbox/checkbox.props.ts deleted file mode 100644 index 4a212e3..0000000 --- a/app/components/checkbox/checkbox.props.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { StyleProp, ViewStyle } from 'react-native' -import { TxKeyPath } from '../../i18n' - -export interface CheckboxProps { - /** - * Additional container style. Useful for margins. - */ - style?: StyleProp<ViewStyle> - - /** - * Additional outline style. - */ - outlineStyle?: StyleProp<ViewStyle> - - /** - * Additional fill style. Only visible when checked. - */ - fillStyle?: StyleProp<ViewStyle> - - /** - * Is the checkbox checked? - */ - value?: boolean - - /** - * The text to display if there isn't a tx. - */ - text?: string - - /** - * The i18n lookup key. - */ - tx?: TxKeyPath - - /** - * Multiline or clipped single line? - */ - multiline?: boolean - - /** - * Fires when the user tabs to change the value. - */ - onToggle?: (newValue: boolean) => void -} diff --git a/app/components/checkbox/checkbox.story.tsx b/app/components/checkbox/checkbox.story.tsx deleted file mode 100644 index 9d1429a..0000000 --- a/app/components/checkbox/checkbox.story.tsx +++ /dev/null @@ -1,132 +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 { Checkbox } from './checkbox' -import { Toggle } from 'react-powerplug' - -declare let module - -const arrayStyle: ViewStyle[] = [ - { paddingVertical: 40 }, - { alignSelf: 'flex-end' }, -] -const arrayOutlineStyle: ViewStyle[] = [ - { borderColor: '#b443c9' }, - { borderWidth: 25 }, -] -const arrayFillStyle: ViewStyle[] = [{ backgroundColor: '#55e0ff' }] - -storiesOf('Checkbox', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Behaviour', () => ( - <Story> - <UseCase - text="The Checkbox" - usage="Use the checkbox to represent on/off states." - > - <Toggle initial={false}> - {({ on, toggle }) => ( - <Checkbox value={on} onToggle={toggle} text="Toggle me" /> - )} - </Toggle> - </UseCase> - <UseCase text="value = true" usage="This is permanently on."> - <Checkbox value={true} text="Always on" /> - </UseCase> - <UseCase text="value = false" usage="This is permanantly off."> - <Checkbox value={false} text="Always off" /> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="multiline = true" usage="For really really long text"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="We’re an App Design & Development Team. Experts in mobile & web technologies. We create beautiful, functional mobile apps and websites." - value={on} - multiline - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".style" usage="Override the container style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Hello there!" - value={on} - style={{ - backgroundColor: 'purple', - marginLeft: 40, - paddingVertical: 30, - paddingLeft: 60, - }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".outlineStyle" usage="Override the outline style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Outline is the box frame" - value={on} - outlineStyle={{ - borderColor: 'green', - borderRadius: 10, - borderWidth: 4, - width: 60, - height: 20, - }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - <UseCase text=".fillStyle" usage="Override the fill style"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Fill er up" - value={on} - fillStyle={{ backgroundColor: 'red', borderRadius: 8 }} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - - <UseCase text="Array style" usage="Use array styles"> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Checkbox - text="Check it twice" - value={on} - onToggle={toggle} - style={arrayStyle} - outlineStyle={arrayOutlineStyle} - fillStyle={arrayFillStyle} - /> - </View> - )} - </Toggle> - </UseCase> - </Story> - )) diff --git a/app/components/checkbox/checkbox.tsx b/app/components/checkbox/checkbox.tsx deleted file mode 100644 index d788114..0000000 --- a/app/components/checkbox/checkbox.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react' -import { TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native' -import { Text } from '../text/text' -import { color, spacing } from '../../theme' -import { CheckboxProps } from './checkbox.props' - -const ROOT: ViewStyle = { - flexDirection: 'row', - paddingVertical: spacing[1], - alignSelf: 'flex-start', -} - -const DIMENSIONS = { width: 16, height: 16 } - -const OUTLINE: ViewStyle = { - ...DIMENSIONS, - marginTop: 2, // finicky and will depend on font/line-height/baseline/weather - justifyContent: 'center', - alignItems: 'center', - borderWidth: 1, - borderColor: color.primaryDarker, - borderRadius: 1, -} - -const FILL: ViewStyle = { - width: DIMENSIONS.width - 4, - height: DIMENSIONS.height - 4, - backgroundColor: color.primary, -} - -const LABEL: TextStyle = { paddingLeft: spacing[2] } - -export function Checkbox(props: CheckboxProps) { - const numberOfLines = props.multiline ? 0 : 1 - - const rootStyle = [ROOT, props.style] - const outlineStyle = [OUTLINE, props.outlineStyle] - const fillStyle = [FILL, props.fillStyle] - - const onPress = props.onToggle - ? () => props.onToggle && props.onToggle(!props.value) - : null - - return ( - <TouchableOpacity - activeOpacity={1} - disabled={!props.onToggle} - onPress={onPress} - style={rootStyle} - > - <View style={outlineStyle}> - {props.value && <View style={fillStyle} />} - </View> - <Text - text={props.text} - tx={props.tx} - numberOfLines={numberOfLines} - style={LABEL} - /> - </TouchableOpacity> - ) -} diff --git a/app/components/form-row/form-row.presets.ts b/app/components/form-row/form-row.presets.ts deleted file mode 100644 index 0c796c2..0000000 --- a/app/components/form-row/form-row.presets.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { ViewStyle } from 'react-native' -import { color, spacing } from '../../theme' - -/** - * The size of the border radius. - */ -const RADIUS = 8 - -/** - * The default style of the container. - */ -const ROOT: ViewStyle = { - borderWidth: 1, - borderColor: color.line, - padding: spacing[2], -} - -/** - * What each of the presets look like. - */ -export const PRESETS = { - /** - * Rounded borders on the the top only. - */ - top: { - ...ROOT, - borderTopLeftRadius: RADIUS, - borderTopRightRadius: RADIUS, - borderBottomWidth: 0, - }, - /** - * No rounded borders. - */ - middle: { - ...ROOT, - borderBottomWidth: 0, - }, - /** - * Rounded borders on the bottom. - */ - bottom: { - ...ROOT, - borderBottomLeftRadius: RADIUS, - borderBottomRightRadius: RADIUS, - }, - /** - * Rounded borders everywhere. - */ - soloRound: { - ...ROOT, - borderRadius: RADIUS, - }, - /** - * Straight borders everywhere. - */ - soloStraight: { - ...ROOT, - }, - /** - * Transparent borders useful to keep things lined up. - */ - clear: { - ...ROOT, - borderColor: color.transparent, - }, -} - -/** - * The names of the presets supported by FormRow. - */ -export type FormRowPresets = keyof typeof PRESETS diff --git a/app/components/form-row/form-row.props.tsx b/app/components/form-row/form-row.props.tsx deleted file mode 100644 index 55b632e..0000000 --- a/app/components/form-row/form-row.props.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' -import { StyleProp, ViewStyle } from 'react-native' -import { FormRowPresets } from './form-row.presets' - -/** - * The properties you can pass to FormRow. - */ -export interface FormRowProps { - /** - * Children components. - */ - children?: React.ReactNode - - /** - * Override the container style... useful for margins and padding. - */ - style?: StyleProp<ViewStyle> - - /** - * The type of border. - */ - preset: FormRowPresets -} diff --git a/app/components/form-row/form-row.story.tsx b/app/components/form-row/form-row.story.tsx deleted file mode 100644 index 97e43a2..0000000 --- a/app/components/form-row/form-row.story.tsx +++ /dev/null @@ -1,115 +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, FormRow } from '../' -import { color } from '../../theme/color' -import { ViewStyle } from 'react-native' - -declare let module - -const TEXT_STYLE_OVERRIDE = { - color: color.storybookTextColor, -} -const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }] - -storiesOf('FormRow', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Assembled', () => ( - <Story> - <UseCase - text="Fully Assembled" - usage="FormRow has many parts designed to fit together. Here is what it looks like all assembled." - > - <FormRow preset="top"> - <Text preset="fieldLabel" style={TEXT_STYLE_OVERRIDE}> - Hello! I am at the top - </Text> - </FormRow> - <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi - officia quo rerum impedit asperiores hic ex quae, quam dolores vel - odit doloribus, tempore atque deserunt possimus incidunt, obcaecati - numquam officiis. - </Text> - </FormRow> - <FormRow preset="middle"> - <Text preset="secondary" style={TEXT_STYLE_OVERRIDE}> - ...one more thing - </Text> - </FormRow> - <FormRow preset="bottom"> - <Text style={TEXT_STYLE_OVERRIDE}>🎉 Footers!</Text> - </FormRow> - </UseCase> - <UseCase text="Alternatives" usage="Less commonly used presets."> - <FormRow preset="clear"> - <Text style={TEXT_STYLE_OVERRIDE}> - My borders are still there, but they are clear. This causes the text - to still align properly due to the box model of flexbox. - </Text> - </FormRow> - <FormRow preset="soloRound"> - <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text> - </FormRow> - <FormRow - preset="soloStraight" - style={{ marginTop: 10, backgroundColor: '#ffe' }} - > - <Text style={TEXT_STYLE_OVERRIDE}> - I'm square and have a custom style. - </Text> - </FormRow> - </UseCase> - </Story> - )) - .add('Presets', () => ( - <Story> - <UseCase text="top" usage="The top of a form."> - <FormRow preset="top"> - <Text style={TEXT_STYLE_OVERRIDE}>Curved borders at the top.</Text> - <Text style={TEXT_STYLE_OVERRIDE}>Nothing below</Text> - </FormRow> - </UseCase> - <UseCase text="middle" usage="A row in the middle of a form."> - <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}> - No curves and empty at the bottom. - </Text> - </FormRow> - </UseCase> - <UseCase text="bottom" usage="The bottom of a form."> - <FormRow preset="bottom"> - <Text style={TEXT_STYLE_OVERRIDE}>Curved at the bottom</Text> - <Text style={TEXT_STYLE_OVERRIDE}>Line at the top.</Text> - </FormRow> - </UseCase> - <UseCase text="soloRound" usage="A standalone curved form row."> - <FormRow preset="soloRound"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves all around.</Text> - </FormRow> - </UseCase> - <UseCase text="soloStraight" usage="A standalone straight form row."> - <FormRow preset="soloStraight"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text> - </FormRow> - </UseCase> - <UseCase text="clear" usage="Identical dimensions but transparent edges."> - <FormRow preset="clear"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text> - </FormRow> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="Style array" usage="Form row with an array of styles"> - <FormRow preset="soloStraight" style={arrayStyle}> - <Text style={TEXT_STYLE_OVERRIDE}>Array style.</Text> - </FormRow> - </UseCase> - </Story> - )) diff --git a/app/components/form-row/form-row.tsx b/app/components/form-row/form-row.tsx deleted file mode 100644 index c6453bc..0000000 --- a/app/components/form-row/form-row.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' -import { View } from 'react-native' -import { PRESETS } from './form-row.presets' -import { FormRowProps } from './form-row.props' - -/** - * A horizontal container component used to hold a row of a form. - */ -export function FormRow(props: FormRowProps) { - const viewStyle = [PRESETS[props.preset], props.style] - - return <View style={viewStyle}>{props.children}</View> -} diff --git a/app/components/graph-ui/graph-ui.story.tsx b/app/components/graph-ui/graph-ui.story.tsx deleted file mode 100644 index 7564c93..0000000 --- a/app/components/graph-ui/graph-ui.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 { GraphUi } from './graph-ui' - -storiesOf('GraphUi', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary."> - <GraphUi style={{ backgroundColor: color.error }} /> - </UseCase> - </Story> - )) diff --git a/app/components/graph-ui/graph-ui.tsx b/app/components/graph-ui/graph-ui.tsx deleted file mode 100644 index 36a675a..0000000 --- a/app/components/graph-ui/graph-ui.tsx +++ /dev/null @@ -1,48 +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 { LocalButton, Text, Tweaks } from '../' -import { flatten } from 'ramda' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface GraphUiProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - physics - setPhysics -} - -/** - * Describe your component here - */ -export const GraphUi = observer(function GraphUi(props: GraphUiProps) { - const { style, physics, setPhysics } = props - const styles = flatten([CONTAINER, style]) - - return ( - <View - style={{ - height: '100%', - width: '100%', - borderStyle: 'solid', - borderWidth: 5, - position: 'relative', - }} - > - <Tweaks physics={physics} setPhysics={setPhysics} /> - <LocalButton physics={physics} setPhysics={setPhysics} /> - </View> - ) -}) diff --git a/app/components/graph/graph.story.tsx b/app/components/graph/graph.story.tsx deleted file mode 100644 index 3b094d9..0000000 --- a/app/components/graph/graph.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 { Graph } from './graph' - -storiesOf('Graph', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary."> - <Graph style={{ backgroundColor: color.error }} /> - </UseCase> - </Story> - )) diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx deleted file mode 100644 index 7b175a1..0000000 --- a/app/components/graph/graph.tsx +++ /dev/null @@ -1,574 +0,0 @@ -import * as React from 'react' -import { useState, useEffect, useRef, useMemo, useCallback } 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 data from "../../data/miserables.json" -//import genRandomTree from "../../data/randomdata"; -//import gData from "../../data/rando.json" - -import { - ForceGraph2D, - ForceGraph3D, - ForceGraphVR, - ForceGraphAR, -} from 'react-force-graph' -import * as d3 from 'd3-force-3d' -//import * as three from "three" -import SpriteText from 'three-spritetext' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface GraphProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - physics - gData - setPhysics - nodeIds: string[] - threeDim - setThreeDim - local - setLocal -} - -/** - * Describe your component here - */ -export const Graph = observer(function Graph(props: GraphProps): JSX.Element { - const { - style, - physics, - setPhysics, - gData, - threeDim, - setThreeDim, - local, - setLocal, - } = props - const styles = flatten([CONTAINER, style]) - - const fgRef = useRef() - - const GROUPS: number = 12 - const NODE_R: number = 8 - //const gData = genRandomTree(200); - - //const [charge, setCharge] = useState(-30); - //const [link, setLink] = useState(-30); - - useEffect(() => { - const fg = fgRef.current - //fg.d3Force('center').strength(0.05); - if (physics.gravityOn) { - fg.d3Force('x', d3.forceX().strength(physics.gravity)) - fg.d3Force('y', d3.forceY().strength(physics.gravity)) - if (threeDim) { - if (physics.galaxy) { - fg.d3Force('x', d3.forceX().strength(physics.gravity / 5)) - fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5)) - } else { - fg.d3Force('x', d3.forceX().strength(physics.gravity)) - fg.d3Force('z', d3.forceZ().strength(physics.gravity)) - } - } else { - fg.d3Force('z', null) - } - } else { - fg.d3Force('x', null) - fg.d3Force('y', null) - threeDim ? fg.d3Force('z', null) : null - } - fg.d3Force('link').strength(physics.linkStrength) - fg.d3Force('link').iterations(physics.linkIts) - physics.collision - ? fg.d3Force('collide', d3.forceCollide().radius(20)) - : fg.d3Force('collide', null) - fg.d3Force('charge').strength(physics.charge) - }) - - // For the expandable version of the graph - - /* const nodesById = useMemo(() => { - * const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) - * console.log(nodesById) - * // link parent/children - * gData.nodes.forEach((node) => { - * typeof physics.rootId === "number" - * ? (node.collapsed = node.index !== physics.rootId) - * : (node.collapsed = node.id !== physics.rootId) - * node.childLinks = [] - * }) - * gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)) - * return nodesById - * }, [gData]) - * const getPrunedTree = useCallback(() => { - * const visibleNodes = [] - * const visibleLinks = [] - * ;(function traverseTree(node = nodesById[physics.rootId]) { - * visibleNodes.push(node) - * if (node.collapsed) return - * visibleLinks.push(...node.childLinks) - * node.childLinks - * .map((link) => - * typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex], - * ) // get child node - * .forEach(traverseTree) - * })() - - * return { nodes: visibleNodes, links: visibleLinks } - * }, [nodesById]) - * const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - */ - const handleNodeClick = useCallback((node) => { - node.collapsed = !node.collapsed // toggle collapse state - setPrunedTree(getPrunedTree()) - }, []) - - //highlighting - const [highlightNodes, setHighlightNodes] = useState(new Set()) - const [highlightLinks, setHighlightLinks] = useState(new Set()) - const [hoverNode, setHoverNode] = useState(null) - - const updateHighlight = () => { - setHighlightNodes(highlightNodes) - setHighlightLinks(highlightLinks) - } - - const handleBackgroundClick = (event) => { - highlightNodes.clear() - highlightLinks.clear() - - setSelectedNode(null) - updateHighlight() - } - - const handleNodeHover = (node) => { - console.log('hover') - if (!selectedNode) { - highlightNodes.clear() - highlightLinks.clear() - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - - setHoverNode(node || null) - updateHighlight() - } - } - - const handleLinkHover = (link) => { - highlightNodes.clear() - highlightLinks.clear() - - if (link) { - highlightLinks.add(link) - highlightNodes.add(link.source) - highlightNodes.add(link.target) - } - - updateHighlight() - } - - // Normally the graph doesn't update when you just change the physics parameters - // This forces the graph to make a small update when you do - useEffect(() => { - fgRef.current.d3ReheatSimulation() - }, [physics]) - /* const paintRing = useCallback((node, ctx) => { - * // add ring just for highlighted nodes - * ctx.beginPath(); - * ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false); - * ctx.fillStyle = node === hoverNode ? 'red' : 'orange'; - * ctx.fill(); - * }, [hoverNode]); - */ - - /* autoPauseRedraw={false} -linkWidth={link => highlightLinks.has(link) ? 5 : 1} -linkDirectionalParticles={4} -linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0} -nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined} -nodeCanvasObject={paintRing} -onNodeHover={handleNodeHover} -onLinkHover={handleLinkHover} - nodeRelSize={NODE_R} */ - - //nodeColor={(node) => - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - //} - - const [selectedNode, setSelectedNode] = useState({}) - - //shitty handler to check for doubleClicks - const [doubleClick, setDoubleClick] = useState(0) - const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] }) - - useEffect(() => { - localGraphData.nodes.length && !local && setLocal(true) - }, [localGraphData]) - - const getLocalGraphData = (node) => { - console.log(localGraphData) - localGraphData.nodes.length - ? setLocalGraphData({ nodes: [], links: [] }) - : null - let g = localGraphData - console.log(g.nodes) - if (!node.local) { - g = { nodes: [], links: [] } - console.log('length is 0') - node.local = true //keep track of these boys - g.nodes.push(node) //only add the clicked node if its the first - } - node.links.length && - node.links.forEach((neighborLink) => { - if (!neighborLink.local) { - console.log('0') - neighborLink.local = true - g.links.push(neighborLink) - console.log(neighborLink) - const targetNode = gData.nodes[neighborLink.targetIndex] - const sourceNode = gData.nodes[neighborLink.sourceIndex] - if (targetNode.id !== sourceNode.id) { - if (targetNode.id === node.id) { - console.log('1. I am the target, the source is ') - console.log(sourceNode) - if (!sourceNode.local) { - console.log('2. The source is not local') - sourceNode.local = true - g.nodes.push(sourceNode) - } else { - console.log('2.5 The source is already local') - } - } else { - console.log('3. I am the source') - if (!targetNode.local) { - console.log('4. The target is not local.') - targetNode.local = true - g.nodes.push(targetNode) - } else { - console.log('The target is already local') - } - } - } - } - }) - setLocalGraphData(g) - } - - const selectClick = (node, event) => { - window.open('org-protocol://roam-node?node=' + node.id, '_self') - highlightNodes.clear() - highlightLinks.clear() - console.log(localGraphData) - if (event.timeStamp - doubleClick < 400) { - getLocalGraphData(node) - } - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - - setSelectedNode(node || null) - updateHighlight() - setDoubleClick(event.timeStamp) - } - - useEffect(() => { - if (local && selectedNode) { - getLocalGraphData(selectedNode) - } - }, [local]) - return ( - <View style={style}> - {!threeDim ? ( - <ForceGraph2D - ref={fgRef} - //autoPauseRedraw={false} - //graphData={gData} - graphData={local ? localGraphData : gData} - //nodeAutoColorBy={physics.colorful ? (node)=>node.index%GROUPS : undefined} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return 'rgb(100, 100, 100, 1)' - } else { - return highlightNodes.has(node) - ? '#a991f1' - : 'rgb(50, 50, 50, 0.5)' - } - } - : (node) => { - if ( - node.neighbors.length === 1 || - node.neighbors.length === 2 - ) { - return [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][node.neighbors[0].index % 11] - } else { - return [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][node.index % 11] - } - } - } - //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return 'rgb(50, 50, 50, 0.8)' - } else { - return highlightLinks.has(link) - ? '#a991f1' - : 'rgb(50, 50, 50, 0.2)' - } - } - : (link) => - [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][gData.nodes[link.sourceIndex].index % 11] - } - linkDirectionalParticles={physics.particles} - onNodeClick={selectClick} - nodeLabel={(node) => node.title} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => { - return highlightNodes.has(node) - ? node.neighbors.length + 5 - : node.neighbors.length + 3 - }} - linkDirectionalParticleWidth={physics.particleWidth} - nodeCanvasObject={(node, ctx, globalScale) => { - if (physics.labels) { - if ( - globalScale > physics.labelScale || - highlightNodes.has(node) - ) { - const label = node.title.substring( - 0, - Math.min(node.title.length, 30), - ) - const fontSize = 12 / globalScale - ctx.font = `${fontSize}px Sans-Serif` - const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map( - (n) => n + fontSize * 0.5, - ) // some padding - const fadeFactor = Math.min( - (3 * (globalScale - physics.labelScale)) / physics.labelScale, - 1, - ) - - ctx.fillStyle = - 'rgba(20, 20, 20, ' + - (highlightNodes.size === 0 - ? 0.5 * fadeFactor - : highlightNodes.has(node) - ? 0.5 - : 0.15 * fadeFactor) + - ')' - ctx.fillRect( - node.x - bckgDimensions[0] / 2, - node.y - bckgDimensions[1] / 2, - ...bckgDimensions, - ) - - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - ctx.fillStyle = - 'rgb(255, 255, 255, ' + - (highlightNodes.size === 0 - ? fadeFactor - : highlightNodes.has(node) - ? 1 - : 0.3 * fadeFactor) + - ')' - ctx.fillText(label, node.x, node.y) - - node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint - } - } - }} - nodeCanvasObjectMode={() => 'after'} - onNodeHover={physics.hover ? handleNodeHover : null} - //onLinkHover={physics.hover ? handleLinkHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - onBackgroundClick={handleBackgroundClick} - backgroundColor={'#242730'} - /> - ) : ( - <ForceGraph3D - ref={fgRef} - graphData={!local ? gData : localGraphData} - //graphData={gData} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return 'rgb(100, 100, 100, 1)' - } else { - return highlightNodes.has(node) - ? 'purple' - : 'rgb(50, 50, 50, 0.5)' - } - } - : (node) => { - if ( - node.neighbors.length === 1 || - node.neighbors.length === 2 - ) { - return [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][node.neighbors[0].index % 11] - } else { - return [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][node.index % 11] - } - } - } - //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return 'rgb(50, 50, 50, 0.8)' - } else { - return highlightLinks.has(link) - ? 'purple' - : 'rgb(50, 50, 50, 0.2)' - } - } - : (link) => - [ - '#ff665c', - '#e69055', - '#7bc275', - '#4db5bd', - '#FCCE7B', - '#51afef', - '#1f5582', - '#C57BDB', - '#a991f1', - '#5cEfFF', - '#6A8FBF', - ][gData.nodes[link.sourceIndex].index % 11] - } - linkDirectionalParticles={physics.particles} - nodeLabel={(node) => node.title} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => - highlightNodes.has(node) - ? node.neighbors.length * 3 - : node.neighbors.length * 2 - } - linkDirectionalParticleWidth={physics.particleWidth} - onNodeHover={physics.hover ? handleNodeHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - nodeThreeObject={ - !physics.labels - ? undefined - : (node) => { - if (highlightNodes.has(node)) { - console.log(node.title) - const sprite = new SpriteText(node.title.substring(0, 30)) - console.log('didnt crash here 2') - sprite.color = '#ffffff' - sprite.textHeight = 8 - return sprite - } else { - return undefined - } - } - } - nodeThreeObjectExtend={true} - onNodeClick={selectClick} - onBackgroundClick={handleBackgroundClick} - backgroundColor={'#242730'} - /> - )} - </View> - ) -}) diff --git a/app/components/graph/graphbak.tsx b/app/components/graph/graphbak.tsx deleted file mode 100644 index 5291678..0000000 --- a/app/components/graph/graphbak.tsx +++ /dev/null @@ -1,448 +0,0 @@ - -import * as React from "react" -import { useState, useEffect, useRef, useMemo, useCallback } 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 data from "../../data/miserables.json" -//import genRandomTree from "../../data/randomdata"; -//import rando from "../../data/rando.json" - -import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph" -import * as d3 from "d3-force-3d" -import * as three from "three" -import SpriteText from "three-spritetext" - -const CONTAINER: ViewStyle = { - justifyContent: "center", -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface GraphProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - physics - gData - setPhysics - nodeIds: string[] -} - -/** - * Describe your component here - */ -export const Graph = observer(function Graph(props: GraphProps): JSX.Element { - const { style, physics, setPhysics, gData, nodeIds } = props - const styles = flatten([CONTAINER, style]) - - const fgRef = useRef() - - const GROUPS: number = 12 - const NODE_R: number = 8 - //const gData = genRandomTree(200); - - //const [charge, setCharge] = useState(-30); - //const [link, setLink] = useState(-30); - - useEffect(() => { - const fg = fgRef.current - //fg.d3Force('center').strength(0.05); - if (physics.gravityOn) { - fg.d3Force("x", d3.forceX().strength(physics.gravity)) - fg.d3Force("y", d3.forceY().strength(physics.gravity)) - if (physics.threedim) { - if (physics.galaxy) { - fg.d3Force("y", d3.forceY().strength(physics.gravity / 5)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5)) - } else { - fg.d3Force("y", d3.forceY().strength(physics.gravity)) - fg.d3Force("z", d3.forceZ().strength(physics.gravity)) - } - } else { - fg.d3Force("z", null) - } - } else { - fg.d3Force("x", null) - fg.d3Force("y", null) - physics.threedim ? fg.d3Force("z", null) : null - } - fg.d3Force("link").strength(physics.linkStrength) - fg.d3Force("link").iterations(physics.linkIts) - physics.collision - ? fg.d3Force("collide", d3.forceCollide().radius(20)) - : fg.d3Force("collide", null) - fg.d3Force("charge").strength(physics.charge) - }) - - // For the expandable version of the graph - - const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) - console.log(nodesById) - // link parent/children - gData.nodes.forEach((node) => { - typeof physics.rootId === "number" - ? (node.collapsed = node.index !== physics.rootId) - : (node.collapsed = node.id !== physics.rootId) - node.childLinks = [] - }) - gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)) - return nodesById - }, [gData]) - - const getPrunedTree = useCallback(() => { - const visibleNodes = [] - const visibleLinks = [] - ;(function traverseTree(node = nodesById[physics.rootId]) { - visibleNodes.push(node) - if (node.collapsed) return - visibleLinks.push(...node.childLinks) - node.childLinks - .map((link) => - typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex], - ) // get child node - .forEach(traverseTree) - })() - - return { nodes: visibleNodes, links: visibleLinks } - }, [nodesById]) - - const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - - const handleNodeClick = useCallback((node) => { - node.collapsed = !node.collapsed // toggle collapse state - setPrunedTree(getPrunedTree()) - }, []) - - //highlighting - const [highlightNodes, setHighlightNodes] = useState(new Set()) - const [highlightLinks, setHighlightLinks] = useState(new Set()) - const [hoverNode, setHoverNode] = useState(null) - - const updateHighlight = () => { - setHighlightNodes(highlightNodes) - setHighlightLinks(highlightLinks) - } - - const handleBackgroundClick = (event) => { - highlightNodes.clear() - highlightLinks.clear() - - setSelectedNode(null) - updateHighlight() - } - - const handleNodeHover = (node) => { - console.log("hover") - if (!selectedNode) { - highlightNodes.clear() - highlightLinks.clear() - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - - setHoverNode(node || null) - updateHighlight() - } - } - - const handleLinkHover = (link) => { - highlightNodes.clear() - highlightLinks.clear() - - if (link) { - highlightLinks.add(link) - highlightNodes.add(link.source) - highlightNodes.add(link.target) - } - - updateHighlight() - } - - // Normally the graph doesn't update when you just change the physics parameters - // This forces the graph to make a small update when you do - useEffect(() => { - fgRef.current.d3ReheatSimulation() - }, [physics]) - /* const paintRing = useCallback((node, ctx) => { - * // add ring just for highlighted nodes - * ctx.beginPath(); - * ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false); - * ctx.fillStyle = node === hoverNode ? 'red' : 'orange'; - * ctx.fill(); - * }, [hoverNode]); - */ - - /* autoPauseRedraw={false} -linkWidth={link => highlightLinks.has(link) ? 5 : 1} -linkDirectionalParticles={4} -linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0} -nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined} -nodeCanvasObject={paintRing} -onNodeHover={handleNodeHover} -onLinkHover={handleLinkHover} - nodeRelSize={NODE_R} */ - - //nodeColor={(node) => - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - //} - - const [selectedNode, setSelectedNode] = useState({}) - - //shitty handler to check for doubleClicks - const [doubleClick, setDoubleClick] = useState(0) - const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] }) - - useEffect(() => { - !physics.local && setPhysics({ ...physics, local: true }) - }, [localGraphData]) - - const getLocalGraphData = (node) { - console.log(localGraphData) - localGraphData.nodes.length ? setLocalGraphData({nodes: [], links: []}) : null; - let g = localGraphData - console.log(g.nodes) - if (g.nodes.length === 0) { - console.log("length is 0") - node.local = true //keep track of these boys - g.nodes.push(node) //only add the clicked node if its the first - } - node.links.forEach((neighborLink) => { - if (!neighborLink.local) { - console.log("0") - neighborLink.local = true - g.links.push(neighborLink) - const targetNode = gData.nodes[neighborLink.targetIndex] - const sourceNode = gData.nodes[neighborLink.sourceIndex] - if (targetNode.id === node.id) { - console.log("1. I am the target, the source is ") - console.log(sourceNode) - if (!sourceNode.local) { - console.log("2. The source is not local") - sourceNode.local = true - g.nodes.push(sourceNode) - } else { - console.log("2.5 The source is already local") - } - } else { - console.log("3. I am the source") - if (!targetNode.local) { - console.log("4. The target is not local.") - targetNode.local = true - g.nodes.push(targetNode) - } else { - console.log("The target is already local") - } - } - } - }) - setLocalGraphData(g) - }; - - const selectClick = (node, event) => { - highlightNodes.clear() - highlightLinks.clear() - console.log(localGraphData) - if (event.timeStamp - doubleClick < 400) { - getLocalGraphData(node); - } - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - - setSelectedNode(node || null) - updateHighlight() - setDoubleClick(event.timeStamp) - } - - return ( - <View> - {!physics.threedim ? ( - <ForceGraph2D - ref={fgRef} - autoPauseRedraw={false} - //graphData={gData} - graphData={physics.local ? localGraphData : (physics.collapse ? prunedTree : gData)} - nodeAutoColorBy={physics.colorful ? "id" : undefined} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" - } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - } - linkAutoColorBy={physics.colorful ? "target" : undefined} - //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" - } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - //highlightLinks.has(link) ? "purple" : "grey" - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - linkDirectionalParticles={physics.particles} - onNodeClick={!physics.collapse ? selectClick : handleNodeClick} - nodeLabel={(node) => node.title} - //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} - //d3VelocityDecay={visco} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => - highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3 - } - linkDirectionalParticleWidth={physics.particleWidth} - nodeCanvasObject={(node, ctx, globalScale) => { - if (physics.labels) { - if (globalScale > physics.labelScale || highlightNodes.has(node)) { - const label = node.title.substring(0, Math.min(node.title.length, 30)) - const fontSize = 12 / globalScale - ctx.font = `${fontSize}px Sans-Serif` - const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding - const fadeFactor = Math.min( - (3 * (globalScale - physics.labelScale)) / physics.labelScale, - 1, - ) - - ctx.fillStyle = - "rgba(20, 20, 20, " + - (highlightNodes.size === 0 - ? 0.5 * fadeFactor - : highlightNodes.has(node) - ? 0.5 - : 0.15 * fadeFactor) + - ")" - ctx.fillRect( - node.x - bckgDimensions[0] / 2, - node.y - bckgDimensions[1] / 2, - ...bckgDimensions, - ) - - ctx.textAlign = "center" - ctx.textBaseline = "middle" - ctx.fillStyle = - "rgb(255, 255, 255, " + - (highlightNodes.size === 0 - ? fadeFactor - : highlightNodes.has(node) - ? 1 - : 0.3 * fadeFactor) + - ")" - ctx.fillText(label, node.x, node.y) - - node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint - } - } - }} - nodeCanvasObjectMode={() => "after"} - onNodeHover={physics.hover ? handleNodeHover : null} - //onLinkHover={physics.hover ? handleLinkHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - onBackgroundClick={handleBackgroundClick} - /> - ) : ( - <ForceGraph3D - ref={fgRef} - autoPauseRedraw={false} - graphData={gData} - //graphData={physics.collapse ? prunedTree : gData} - nodeAutoColorBy={physics.colorful ? "id" : undefined} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" - } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - } - linkAutoColorBy={physics.colorful ? "target" : undefined} - //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" - } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - //highlightLinks.has(link) ? "purple" : "grey" - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - linkDirectionalParticles={physics.particles} - //onNodeClick={!physics.collapse ? null : handleNodeClick} - nodeLabel={(node) => node.title} - //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} - //d3VelocityDecay={visco} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => - highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3 - } - linkDirectionalParticleWidth={physics.particleWidth} - onNodeHover={physics.hover ? handleNodeHover : null} - //onLinkHover={physics.hover ? handleLinkHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - nodeThreeObject={ - !physics.labels - ? undefined - : (node) => { - if (highlightNodes.has(node)) { - console.log(node.title) - const sprite = new SpriteText(node.title.substring(0, 30)) - console.log("didnt crash here 2") - sprite.color = "#ffffff" - sprite.textHeight = 8 - return sprite - } else { - return undefined - } - } - } - nodeThreeObjectExtend={true} - /> - )} - </View> - ) -}) diff --git a/app/components/graph/graphgood.tsx b/app/components/graph/graphgood.tsx deleted file mode 100644 index b204176..0000000 --- a/app/components/graph/graphgood.tsx +++ /dev/null @@ -1,474 +0,0 @@ -import * as React from 'react' -import { useState, useEffect, useRef, useMemo, useCallback } 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 data from "../../data/miserables.json" -//import genRandomTree from "../../data/randomdata"; -//import rando from "../../data/rando.json" - -import { - ForceGraph2D, - ForceGraph3D, - ForceGraphVR, - ForceGraphAR, -} from 'react-force-graph' -import * as d3 from 'd3-force-3d' -import * as three from 'three' -import SpriteText from 'three-spritetext' - -const CONTAINER: ViewStyle = { - justifyContent: 'center', -} - -const TEXT: TextStyle = { - fontFamily: typography.primary, - fontSize: 14, - color: color.primary, -} - -export interface GraphProps { - /** - * An optional style override useful for padding & margin. - */ - style?: StyleProp<ViewStyle> - physics - setPhysics - gData - nodeIds: string[] -} - -/** - * Describe your component here - */ -export const Graph = observer(function Graph(props: GraphProps): JSX.Element { - const { style, physics, setPhysics, gData, nodeIds } = props - const styles = flatten([CONTAINER, style]) - - const fgRef = useRef() - - const GROUPS: number = 12 - const NODE_R: number = 8 - //const gData = genRandomTree(200); - - //const [charge, setCharge] = useState(-30); - //const [link, setLink] = useState(-30); - - useEffect(() => { - const fg = fgRef.current - //fg.d3Force('center').strength(0.05); - if (physics.gravityOn) { - fg.d3Force('x', d3.forceX().strength(physics.gravity)) - fg.d3Force('y', d3.forceY().strength(physics.gravity)) - if (physics.threedim) { - if (physics.galaxy) { - fg.d3Force('y', d3.forceY().strength(physics.gravity / 5)) - fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5)) - } else { - fg.d3Force('y', d3.forceY().strength(physics.gravity)) - fg.d3Force('z', d3.forceZ().strength(physics.gravity)) - } - } else { - fg.d3Force('z', null) - } - } else { - fg.d3Force('x', null) - fg.d3Force('y', null) - physics.threedim ? fg.d3Force('z', null) : null - } - fg.d3Force('link').strength(physics.linkStrength) - fg.d3Force('link').iterations(physics.linkIts) - physics.collision - ? fg.d3Force('collide', d3.forceCollide().radius(20)) - : fg.d3Force('collide', null) - fg.d3Force('charge').strength(physics.charge) - }) - - // For the expandable version of the graph - - const nodesById = useMemo(() => { - const nodesById = Object.fromEntries( - gData.nodes.map((node) => [node.index, node]), - ) - console.log(nodesById) - // link parent/children - gData.nodes.forEach((node) => { - typeof physics.rootId === 'number' - ? (node.collapsed = node.index !== physics.rootId) - : (node.collapsed = node.id !== physics.rootId) - node.childLinks = [] - }) - gData.links.forEach((link) => - nodesById[link.sourceIndex].childLinks.push(link), - ) - return nodesById - }, [gData]) - const getPrunedTree = useCallback(() => { - const visibleNodes = [] - const visibleLinks = [] - ;(function traverseTree(node = nodesById[physics.rootId]) { - visibleNodes.push(node) - if (node.collapsed) return - visibleLinks.push(...node.childLinks) - node.childLinks - .map((link) => - typeof link.targetIndex === 'object' - ? link.targetIndex - : nodesById[link.targetIndex], - ) // get child node - .forEach(traverseTree) - })() - - return { nodes: visibleNodes, links: visibleLinks } - }, [nodesById]) - - const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - - const handleNodeClick = useCallback((node) => { - node.collapsed = !node.collapsed // toggle collapse state - setPrunedTree(getPrunedTree()) - }, []) - - //highlighting - const [highlightNodes, setHighlightNodes] = useState(new Set()) - const [highlightLinks, setHighlightLinks] = useState(new Set()) - const [hoverNode, setHoverNode] = useState(null) - - const updateHighlight = () => { - setHighlightNodes(highlightNodes) - setHighlightLinks(highlightLinks) - } - - const handleBackgroundClick = (event) => { - highlightNodes.clear() - highlightLinks.clear() - - setSelectedNode(null) - updateHighlight() - } - - const handleNodeHover = (node) => { - console.log('hover') - if (!selectedNode) { - highlightNodes.clear() - highlightLinks.clear() - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - - setHoverNode(node || null) - updateHighlight() - } - } - - const handleLinkHover = (link) => { - highlightNodes.clear() - highlightLinks.clear() - - if (link) { - highlightLinks.add(link) - highlightNodes.add(link.source) - highlightNodes.add(link.target) - } - - updateHighlight() - } - - // Normally the graph doesn't update when you just change the physics parameters - // This forces the graph to make a small update when you do - useEffect(() => { - fgRef.current.d3ReheatSimulation() - }, [physics]) - /* const paintRing = useCallback((node, ctx) => { - * // add ring just for highlighted nodes - * ctx.beginPath(); - * ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false); - * ctx.fillStyle = node === hoverNode ? 'red' : 'orange'; - * ctx.fill(); - * }, [hoverNode]); - */ - - /* autoPauseRedraw={false} -linkWidth={link => highlightLinks.has(link) ? 5 : 1} -linkDirectionalParticles={4} -linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0} -nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined} -nodeCanvasObject={paintRing} -onNodeHover={handleNodeHover} -onLinkHover={handleLinkHover} - nodeRelSize={NODE_R} */ - - //nodeColor={(node) => - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - //} - - const [selectedNode, setSelectedNode] = useState({}) - - //shitty handler to check for doubleClicks - const [doubleClick, setDoubleClick] = useState(0) - const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] }) - - const updateLocalGraph = (node) => { - console.log(localGraphData) - // localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null - let g = localGraphData - if (!node.local) { - node.local = true - g.nodes.push(node) - } - node.neighbors.forEach((neighbor) => { - if (neighbor !== node || !neighbor.local) { - const newNode: boolean = g.nodes.every((existingNode) => { - if (existingNode === neighbor) { - return false - } else { - return true - } - }) - if (newNode) { - neighbor.local = true - g.nodes.push(neighbor) - } - } - }) - - node.links.forEach((neighborLink) => { - const newLink: boolean = g.links.every((existingLink) => { - if (existingLink === neighborLink) { - return false - } else { - return true - } - }) - newLink && g.links.push(neighborLink) - }) - setLocalGraphData(g) - setPhysics({ ...physics, local: true }) - } - - const selectClick = (node, event) => { - highlightNodes.clear() - highlightLinks.clear() - console.log(localGraphData) - if (event.timeStamp - doubleClick < 400) { - updateLocalGraph(node) - } - if (node) { - highlightNodes.add(node) - node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) - node.links.forEach((link) => highlightLinks.add(link)) - } - setSelectedNode(node || null) - updateHighlight() - setDoubleClick(event.timeStamp) - } - - return ( - <View> - {!physics.threedim ? ( - <ForceGraph2D - ref={fgRef} - autoPauseRedraw={false} - //graphData={gData} - graphData={ - physics.local - ? localGraphData - : physics.collapse - ? prunedTree - : gData - } - nodeAutoColorBy={physics.colorful ? 'id' : undefined} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return 'rgb(100, 100, 100, 1)' - } else { - return highlightNodes.has(node) - ? 'purple' - : 'rgb(50, 50, 50, 0.5)' - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - } - linkAutoColorBy={physics.colorful ? 'target' : undefined} - //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return 'rgb(50, 50, 50, 0.8)' - } else { - return highlightLinks.has(link) - ? 'purple' - : 'rgb(50, 50, 50, 0.2)' - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - //highlightLinks.has(link) ? "purple" : "grey" - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - linkDirectionalParticles={physics.particles} - onNodeClick={!physics.collapse ? selectClick : handleNodeClick} - nodeLabel={(node) => node.title} - //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} - //d3VelocityDecay={visco} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => - highlightNodes.has(node) - ? node.neighbors.length + 5 - : node.neighbors.length + 3 - } - linkDirectionalParticleWidth={physics.particleWidth} - nodeCanvasObject={(node, ctx, globalScale) => { - if (physics.labels) { - if ( - globalScale > physics.labelScale || - highlightNodes.has(node) - ) { - const label = node.title.substring( - 0, - Math.min(node.title.length, 30), - ) - const fontSize = 12 / globalScale - ctx.font = `${fontSize}px Sans-Serif` - const textWidth = ctx.measureText(label).width - const bckgDimensions = [textWidth * 1.1, fontSize].map( - (n) => n + fontSize * 0.5, - ) // some padding - const fadeFactor = Math.min( - (3 * (globalScale - physics.labelScale)) / physics.labelScale, - 1, - ) - - ctx.fillStyle = - 'rgba(20, 20, 20, ' + - (highlightNodes.size === 0 - ? 0.5 * fadeFactor - : highlightNodes.has(node) - ? 0.5 - : 0.15 * fadeFactor) + - ')' - ctx.fillRect( - node.x - bckgDimensions[0] / 2, - node.y - bckgDimensions[1] / 2, - ...bckgDimensions, - ) - - ctx.textAlign = 'center' - ctx.textBaseline = 'middle' - ctx.fillStyle = - 'rgb(255, 255, 255, ' + - (highlightNodes.size === 0 - ? fadeFactor - : highlightNodes.has(node) - ? 1 - : 0.3 * fadeFactor) + - ')' - ctx.fillText(label, node.x, node.y) - - node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint - } - } - }} - nodeCanvasObjectMode={() => 'after'} - onNodeHover={physics.hover ? handleNodeHover : null} - //onLinkHover={physics.hover ? handleLinkHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - onBackgroundClick={handleBackgroundClick} - /> - ) : ( - <ForceGraph3D - ref={fgRef} - autoPauseRedraw={false} - graphData={gData} - //graphData={physics.collapse ? prunedTree : gData} - nodeAutoColorBy={physics.colorful ? 'id' : undefined} - nodeColor={ - !physics.colorful - ? (node) => { - if (highlightNodes.size === 0) { - return 'rgb(100, 100, 100, 1)' - } else { - return highlightNodes.has(node) - ? 'purple' - : 'rgb(50, 50, 50, 0.5)' - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - } - linkAutoColorBy={physics.colorful ? 'target' : undefined} - //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} - linkColor={ - !physics.colorful - ? (link) => { - if (highlightLinks.size === 0) { - return 'rgb(50, 50, 50, 0.8)' - } else { - return highlightLinks.has(link) - ? 'purple' - : 'rgb(50, 50, 50, 0.2)' - } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - : undefined - //highlightLinks.has(link) ? "purple" : "grey" - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - linkDirectionalParticles={physics.particles} - //onNodeClick={!physics.collapse ? null : handleNodeClick} - nodeLabel={(node) => node.title} - //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} - //d3VelocityDecay={visco} - linkWidth={(link) => - highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth - } - linkOpacity={physics.linkOpacity} - nodeRelSize={physics.nodeRel} - nodeVal={(node) => - highlightNodes.has(node) - ? node.neighbors.length + 5 - : node.neighbors.length + 3 - } - linkDirectionalParticleWidth={physics.particleWidth} - onNodeHover={physics.hover ? handleNodeHover : null} - //onLinkHover={physics.hover ? handleLinkHover : null} - d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} - d3VelocityDecay={physics.velocityDecay} - nodeThreeObject={ - !physics.labels - ? undefined - : (node) => { - if (highlightNodes.has(node)) { - console.log(node.title) - const sprite = new SpriteText(node.title.substring(0, 30)) - console.log('didnt crash here 2') - sprite.color = '#ffffff' - sprite.textHeight = 8 - return sprite - } else { - return undefined - } - } - } - nodeThreeObjectExtend={true} - /> - )} - </View> - ) -}) diff --git a/app/components/header/header.props.ts b/app/components/header/header.props.ts deleted file mode 100644 index f142656..0000000 --- a/app/components/header/header.props.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { StyleProp, TextStyle, ViewStyle } from 'react-native' -import { IconTypes } from '../icon/icons' -import { TxKeyPath } from '../../i18n' - -export interface HeaderProps { - /** - * Main header, e.g. POWERED BY IGNITE - */ - headerTx?: TxKeyPath - - /** - * header non-i18n - */ - headerText?: string - - /** - * Icon that should appear on the left - */ - leftIcon?: IconTypes - - /** - * What happens when you press the left icon - */ - onLeftPress?(): void - - /** - * Icon that should appear on the right - */ - rightIcon?: IconTypes - - /** - * What happens when you press the right icon - */ - onRightPress?(): void - - /** - * Container style overrides. - */ - style?: StyleProp<ViewStyle> - - /** - * Title style overrides. - */ - titleStyle?: StyleProp<TextStyle> -} diff --git a/app/components/header/header.story.tsx b/app/components/header/header.story.tsx deleted file mode 100644 index db87b89..0000000 --- a/app/components/header/header.story.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react' -import { View, Alert } from 'react-native' -import { storiesOf } from '@storybook/react-native' -import { StoryScreen, Story, UseCase } from '../../../storybook/views' -import { Header } from './header' -import { color } from '../../theme' - -declare let module - -const VIEWSTYLE = { - flex: 1, - backgroundColor: color.storybookDarkBg, -} - -storiesOf('Header', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Behavior', () => ( - <Story> - <UseCase noPad text="default" usage="The default usage"> - <View style={VIEWSTYLE}> - <Header headerTx="demoScreen.howTo" /> - </View> - </UseCase> - <UseCase noPad text="leftIcon" usage="A left nav icon"> - <View style={VIEWSTYLE}> - <Header - headerTx="demoScreen.howTo" - leftIcon="back" - onLeftPress={() => Alert.alert('left nav')} - /> - </View> - </UseCase> - <UseCase noPad text="rightIcon" usage="A right nav icon"> - <View style={VIEWSTYLE}> - <Header - headerTx="demoScreen.howTo" - rightIcon="bullet" - onRightPress={() => Alert.alert('right nav')} - /> - </View> - </UseCase> - </Story> - )) diff --git a/app/components/header/header.tsx b/app/components/header/header.tsx deleted file mode 100644 index 25e0914..0000000 --- a/app/components/header/header.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react' -import { View, ViewStyle, TextStyle } from 'react-native' -import { HeaderProps } from './header.props' -import { Button } from '../button/button' -import { Text } from '../text/text' -import { Icon } from '../icon/icon' -import { spacing } from '../../theme' -import { translate } from '../../i18n/' - -// static styles -const ROOT: ViewStyle = { - flexDirection: 'row', - paddingHorizontal: spacing[4], - alignItems: 'center', - paddingTop: spacing[5], - paddingBottom: spacing[5], - justifyContent: 'flex-start', -} -const TITLE: TextStyle = { textAlign: 'center' } -const TITLE_MIDDLE: ViewStyle = { flex: 1, justifyContent: 'center' } -const LEFT: ViewStyle = { width: 32 } -const RIGHT: ViewStyle = { width: 32 } - -/** - * Header that appears on many screens. Will hold navigation buttons and screen title. - */ -export function Header(props: HeaderProps) { - const { - onLeftPress, - onRightPress, - rightIcon, - leftIcon, - headerText, - headerTx, - style, - titleStyle, - } = props - const header = headerText || (headerTx && translate(headerTx)) || '' - - return ( - <View style={[ROOT, style]}> - {leftIcon ? ( - <Button preset="link" onPress={onLeftPress}> - <Icon icon={leftIcon} /> - </Button> - ) : ( - <View style={LEFT} /> - )} - <View style={TITLE_MIDDLE}> - <Text style={[TITLE, titleStyle]} text={header} /> - </View> - {rightIcon ? ( - <Button preset="link" onPress={onRightPress}> - <Icon icon={rightIcon} /> - </Button> - ) : ( - <View style={RIGHT} /> - )} - </View> - ) -} diff --git a/app/components/icon/icon.props.ts b/app/components/icon/icon.props.ts deleted file mode 100644 index 1f3ed2e..0000000 --- a/app/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<ImageStyle> - - /** - * Style overrides for the icon container - */ - - containerStyle?: StyleProp<ViewStyle> - - /** - * The name of the icon - */ - - icon?: IconTypes -} diff --git a/app/components/icon/icon.story.tsx b/app/components/icon/icon.story.tsx deleted file mode 100644 index 31c8499..0000000 --- a/app/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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Names', () => ( - <Story> - <UseCase text="back" usage="The icon for going back"> - <Icon icon="back" /> - </UseCase> - <UseCase text="bullet" usage="The icon for a bullet point"> - <Icon icon="bullet" /> - </UseCase> - </Story> - )) diff --git a/app/components/icon/icon.tsx b/app/components/icon/icon.tsx deleted file mode 100644 index f596bb2..0000000 --- a/app/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 ( - <View style={containerStyle}> - <Image style={[ROOT, styleOverride]} source={icons[icon]} /> - </View> - ) -} diff --git a/app/components/icon/icons/arrow-left.png b/app/components/icon/icons/arrow-left.png Binary files differdeleted file mode 100644 index 9d607d7..0000000 --- a/app/components/icon/icons/arrow-left.png +++ /dev/null diff --git a/app/components/icon/icons/[email protected] b/app/components/icon/icons/[email protected] Binary files differdeleted file mode 100644 index 9d607d7..0000000 --- a/app/components/icon/icons/[email protected] +++ /dev/null diff --git a/app/components/icon/icons/bullet.png b/app/components/icon/icons/bullet.png Binary files differdeleted file mode 100644 index 8fc256f..0000000 --- a/app/components/icon/icons/bullet.png +++ /dev/null diff --git a/app/components/icon/icons/[email protected] b/app/components/icon/icons/[email protected] Binary files differdeleted file mode 100644 index 8fc256f..0000000 --- a/app/components/icon/icons/[email protected] +++ /dev/null diff --git a/app/components/icon/icons/index.ts b/app/components/icon/icons/index.ts deleted file mode 100644 index 792e408..0000000 --- a/app/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/components/index.ts b/app/components/index.ts deleted file mode 100644 index d93e972..0000000 --- a/app/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/components/local-button/local-button.story.tsx b/app/components/local-button/local-button.story.tsx deleted file mode 100644 index 0d35ab2..0000000 --- a/app/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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary."> - <LocalButton style={{ backgroundColor: color.error }} /> - </UseCase> - </Story> - )) diff --git a/app/components/local-button/local-button.tsx b/app/components/local-button/local-button.tsx deleted file mode 100644 index 27b514b..0000000 --- a/app/components/local-button/local-button.tsx +++ /dev/null @@ -1,52 +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<ViewStyle> - 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 ( - <View style={[style, { height: 50, width: 150 }]}> - <Icon.Button - name={!local ? 'graph-outline' : 'graph'} - backgroundColor="#a991f1" - onPress={() => { - setLocal(!local) - }} - size={30} - style={{ textAlign: 'center' }} - > - {!local ? 'Global Graph' : 'Local Graph'} - </Icon.Button> - </View> - ) -}) diff --git a/app/components/local/local.story.tsx b/app/components/local/local.story.tsx deleted file mode 100644 index 2bfa065..0000000 --- a/app/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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary."> - <Local style={{ backgroundColor: color.error }} /> - </UseCase> - </Story> - )) diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx deleted file mode 100644 index 200ec01..0000000 --- a/app/components/local/local.tsx +++ /dev/null @@ -1,48 +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<ViewStyle> -} - -/** - * Describe your component here - */ -export const LocalButton = observer(function LocalButton( - props: LocalProps, -): boolean { - const { style } = props - const styles = flatten([CONTAINER, style]) - - return ( - <Icon - color="#a99f1f" - name="graph" - style={{ position: 'absolute', zIndex: 100, width: 500 }} - /> - ) -}) diff --git a/app/components/screen/screen.presets.ts b/app/components/screen/screen.presets.ts deleted file mode 100644 index aa8d8cf..0000000 --- a/app/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/components/screen/screen.props.ts b/app/components/screen/screen.props.ts deleted file mode 100644 index 1371c64..0000000 --- a/app/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<ViewStyle> - - /** - * 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/components/screen/screen.tsx b/app/components/screen/screen.tsx deleted file mode 100644 index e593dde..0000000 --- a/app/components/screen/screen.tsx +++ /dev/null @@ -1,78 +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 ( - <KeyboardAvoidingView - style={[preset.outer, backgroundStyle]} - behavior={isIos ? 'padding' : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} - > - <StatusBar barStyle={props.statusBar || 'light-content'} /> - <View style={[preset.inner, style, insetStyle]}>{props.children}</View> - </KeyboardAvoidingView> - ) -} - -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 ( - <KeyboardAvoidingView - style={[preset.outer, backgroundStyle]} - behavior={isIos ? 'padding' : undefined} - keyboardVerticalOffset={offsets[props.keyboardOffset || 'none']} - > - <StatusBar barStyle={props.statusBar || 'light-content'} /> - <View style={[preset.outer, backgroundStyle, insetStyle]}> - <ScrollView - style={[preset.outer, backgroundStyle]} - contentContainerStyle={[preset.inner, style]} - keyboardShouldPersistTaps={ - props.keyboardShouldPersistTaps || 'handled' - } - > - {props.children} - </ScrollView> - </View> - </KeyboardAvoidingView> - ) -} - -/** - * The starting component on every screen in the app. - * - * @param props The screen props - */ -export function Screen(props: ScreenProps) { - if (isNonScrolling(props.preset)) { - return <ScreenWithoutScrolling {...props} /> - } else { - return <ScreenWithScrolling {...props} /> - } -} diff --git a/app/components/switch/switch.props.ts b/app/components/switch/switch.props.ts deleted file mode 100644 index 2549a95..0000000 --- a/app/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<ViewStyle> - - /** - * Additional track styling when on. - */ - trackOnStyle?: StyleProp<ViewStyle> - - /** - * Additional track styling when off. - */ - trackOffStyle?: StyleProp<ViewStyle> - - /** - * Additional thumb styling when on. - */ - thumbOnStyle?: StyleProp<ViewStyle> - - /** - * Additional thumb styling when off. - */ - thumbOffStyle?: StyleProp<ViewStyle> -} diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx deleted file mode 100644 index bbd29ee..0000000 --- a/app/components/switch/switch.story.tsx +++ /dev/null @@ -1,119 +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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Behaviour', () => ( - <Story> - <UseCase - text="The Toggle Switch" - usage="Use the switch to represent on/off states." - > - <Toggle initial={false}> - {({ on, toggle }) => <Switch value={on} onToggle={toggle} />} - </Toggle> - </UseCase> - <UseCase text="value = true" usage="This is permanently on."> - <Switch value={true} /> - </UseCase> - <UseCase text="value = false" usage="This is permanantly off."> - <Switch value={false} /> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="Custom Styling" usage="Promise me this won't happen."> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Switch - trackOnStyle={{ - backgroundColor: 'green', - borderColor: 'black', - }} - trackOffStyle={{ - backgroundColor: 'red', - borderColor: 'maroon', - }} - thumbOnStyle={{ backgroundColor: 'cyan' }} - thumbOffStyle={{ backgroundColor: 'pink' }} - value={on} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - - <UseCase text="Style array" usage="This either."> - <Toggle initial={false}> - {({ on, toggle }) => ( - <View> - <Switch - style={styleArray} - trackOffStyle={trackOffStyle} - trackOnStyle={trackOnStyle} - thumbOffStyle={thumbOffStyle} - thumbOnStyle={thumbOnStyle} - // trackOnStyle={{ backgroundColor: "green", borderColor: "black" }} - // trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }} - // thumbOnStyle={{ backgroundColor: "cyan" }} - // thumbOffStyle={{ backgroundColor: "pink" }} - - value={on} - onToggle={toggle} - /> - </View> - )} - </Toggle> - </UseCase> - </Story> - )) diff --git a/app/components/switch/switch.tsx b/app/components/switch/switch.tsx deleted file mode 100644 index bad81fc..0000000 --- a/app/components/switch/switch.tsx +++ /dev/null @@ -1,119 +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<Animated.Value>(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<boolean>(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 ( - <TouchableWithoutFeedback onPress={handlePress} style={style}> - <Animated.View style={trackStyle}> - <Animated.View style={thumbStyle} /> - </Animated.View> - </TouchableWithoutFeedback> - ) -} diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx deleted file mode 100644 index 20c73a4..0000000 --- a/app/components/text-field/text-field.story.tsx +++ /dev/null @@ -1,168 +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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Labelling', () => ( - <Story> - <UseCase - text="Normal text" - usage="Use placeholder and label to set the text." - > - <State initial={{ value: '' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - placeholder="omg your name" - /> - )} - </State> - </UseCase> - - <UseCase - text="i18n text" - usage="Use placeholderTx and labelTx for i18n lookups" - > - <State initial={{ value: '' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - placeholderTx="storybook.placeholder" - labelTx="storybook.field" - /> - )} - </State> - </UseCase> - </Story> - )) - .add('Style Overrides', () => ( - <Story> - <UseCase - noPad - text="Container Styles" - usage="Useful for applying margins when laying out a form to remove padding if the form brings its own." - > - <State initial={{ value: 'Inigo' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="First Name" - style={{ paddingTop: 0, paddingHorizontal: 40 }} - /> - )} - </State> - <State initial={{ value: 'Montoya' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Last Name" - style={{ paddingBottom: 0 }} - /> - )} - </State> - </UseCase> - <UseCase - text="Input Styles" - usage="Useful for 1-off exceptions. Try to steer towards presets for this kind of thing." - > - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - inputStyle={{ - backgroundColor: 'rebeccapurple', - color: 'white', - padding: 40, - borderWidth: 10, - borderRadius: 4, - borderColor: 'hotpink', - }} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - - <UseCase - text="Style array" - usage="Useful for 1-off exceptions, but using style arrays." - > - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => setState({ value })} - value={state.value} - label="Name" - style={styleArray} - inputStyle={inputStyleArray} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - </Story> - )) - .add('Ref Forwarding', () => ( - <Story> - <UseCase text="Ref Forwarding" usage=""> - <State initial={{ value: 'fancy colour' }}> - {({ state, setState }) => ( - <TextField - onChangeText={(value) => 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!') - } - }} - /> - )} - </State> - <Text text="* attention designers: i am so sorry" preset="secondary" /> - </UseCase> - </Story> - )) diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx deleted file mode 100644 index 4da1591..0000000 --- a/app/components/text-field/text-field.tsx +++ /dev/null @@ -1,107 +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<ViewStyle> - - /** - * Optional style overrides for the input. - */ - inputStyle?: StyleProp<TextStyle> - - /** - * 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 ( - <View style={containerStyles}> - <Text preset="fieldLabel" tx={labelTx} text={label} /> - <TextInput - placeholder={actualPlaceholder} - placeholderTextColor={color.palette.lighterGrey} - underlineColorAndroid={color.transparent} - {...rest} - style={inputStyles} - ref={forwardedRef} - /> - </View> - ) -} diff --git a/app/components/text/text.presets.ts b/app/components/text/text.presets.ts deleted file mode 100644 index 4693417..0000000 --- a/app/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/components/text/text.props.ts b/app/components/text/text.props.ts deleted file mode 100644 index 79ee12c..0000000 --- a/app/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<TextStyle> - - /** - * One of the different types of text presets. - */ - preset?: TextPresets -} diff --git a/app/components/text/text.story.tsx b/app/components/text/text.story.tsx deleted file mode 100644 index 4535194..0000000 --- a/app/components/text/text.story.tsx +++ /dev/null @@ -1,97 +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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="default" usage="Used for normal body text."> - <View style={VIEWSTYLE}> - <Text>Hello!</Text> - <Text style={{ paddingTop: 10 }}> - Check out{'\n'} - my{'\n'} - line height - </Text> - <Text style={{ paddingTop: 10 }}> - The quick brown fox jumped over the slow lazy dog. - </Text> - <Text>$123,456,789.00</Text> - </View> - </UseCase> - <UseCase text="bold" usage="Used for bolded body text."> - <View style={VIEWSTYLE}> - <Text preset="bold">Osnap! I'm puffy.</Text> - </View> - </UseCase> - <UseCase text="header" usage="Used for major section headers."> - <View style={VIEWSTYLE}> - <Text preset="header">Behold!</Text> - </View> - </UseCase> - </Story> - )) - .add('Passing Content', () => ( - <Story> - <UseCase - text="text" - usage="Used when you want to pass a value but don't want to open a child." - > - <View style={VIEWSTYLE}> - <Text text="Heyo!" /> - </View> - </UseCase> - <UseCase text="tx" usage="Used for looking up i18n keys."> - <View style={VIEWSTYLE}> - <Text tx="common.ok" /> - <Text tx="common.cancel" /> - </View> - </UseCase> - <UseCase - text="children" - usage="Used like you would normally use a React Native <Text> component." - > - <View style={VIEWSTYLE}> - <Text>Passing strings as children.</Text> - </View> - </UseCase> - <UseCase - text="nested children" - usage="You can embed them and change styles too." - > - <View style={VIEWSTYLE}> - <Text> - {' '} - Hello <Text preset="bold">bolded</Text> World. - </Text> - </View> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="Style array" usage="Text with style array"> - <View style={viewStyleArray}> - <Text> - {' '} - Hello <Text preset="bold">bolded</Text> World. - </Text> - </View> - </UseCase> - </Story> - )) diff --git a/app/components/text/text.tsx b/app/components/text/text.tsx deleted file mode 100644 index b04b654..0000000 --- a/app/components/text/text.tsx +++ /dev/null @@ -1,36 +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 ( - <ReactNativeText {...rest} style={styles}> - {content} - </ReactNativeText> - ) -} diff --git a/app/components/tweaks/tweaks.story.tsx b/app/components/tweaks/tweaks.story.tsx deleted file mode 100644 index 770d50f..0000000 --- a/app/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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="Primary" usage="The primary."> - <Tweaks style={{ backgroundColor: color.error }} /> - </UseCase> - </Story> - )) diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx deleted file mode 100644 index 1985174..0000000 --- a/app/components/tweaks/tweaks.tsx +++ /dev/null @@ -1,651 +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<ViewStyle> - 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: ( - <View> - <Text preset="fieldLabel" text="Gravity" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.gravityOn} - onValueChange={() => { - setPhysics({ ...physics, gravityOn: !physics.gravityOn }) - }} - /> - <Text preset="fieldLabel" text={'Gravity: ' + physics.gravity} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={1} - onValueChange={(value) => { - setPhysics({ ...physics, gravity: value }) - }} - value={physics.gravity} - step={0.01} - /> - <Text - preset="fieldLabel" - text={'Repulsive force: ' + physics.charge} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={-400} - maximumValue={100} - onValueChange={(value) => { - setPhysics({ ...physics, charge: value }) - }} - value={physics.charge} - step={1} - /> - <Text - preset="fieldLabel" - text={'Link Force: ' + physics.linkStrength} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={2} - onValueChange={(value) => { - setPhysics({ ...physics, linkStrength: value }) - }} - value={physics.linkStrength} - step={0.01} - /> - <Text - preset="fieldLabel" - text={"'Link Iterations': " + physics.linkIts} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={1} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, linkIts: value }) - }} - value={physics.linkIts} - step={1} - /> - <Text preset="fieldLabel" text="Collision" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.collision} - onValueChange={() => { - setPhysics({ ...physics, collision: !physics.collision }) - }} - /> - <Text - preset="fieldLabel" - text={'Alpha Decay: ' + physics.alphaDecay} - /> - <Slider - style={styles.slider} - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - minimumValue={0} - maximumValue={1} - onValueChange={(value) => { - setPhysics({ ...physics, alphaDecay: value }) - }} - value={physics.alphaDecay} - step={0.01} - /> - <Text - preset="fieldLabel" - text={'Alhpa Target: ' + physics.alphaTarget} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={1} - onValueChange={(value) => { - setPhysics({ ...physics, alphaTarget: value }) - }} - value={physics.alphaTarget} - step={0.1} - /> - <Text - preset="fieldLabel" - text={'Viscosity: ' + physics.velocityDecay} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={1} - onValueChange={(value) => { - setPhysics({ ...physics, velocityDecay: value }) - }} - value={physics.velocityDecay} - step={0.01} - /> - <Text preset="fieldLabel" text={'Galaxy Mode (3D-only)'} /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.galaxy} - onValueChange={() => { - setPhysics({ ...physics, galaxy: !physics.galaxy }) - }} - /> - </View> - ), - }, - { - title: 'Visual', - content: ( - <View> - <Text preset="fieldLabel" text="Colorful" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.colorful} - onValueChange={() => { - setPhysics({ ...physics, colorful: !physics.colorful }) - }} - /> - <Text preset="fieldLabel" text="Hover highlight" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.hover} - onValueChange={() => { - setPhysics({ ...physics, hover: !physics.hover }) - }} - /> - <Text - preset="fieldLabel" - text={'Line Opacity: ' + physics.linkOpacity} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={1} - onValueChange={(value) => { - setPhysics({ ...physics, linkOpacity: value }) - }} - value={physics.linkOpacity} - step={0.01} - /> - <Text preset="fieldLabel" text={'Line width: ' + physics.linkWidth} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0.1} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, linkWidth: value }) - }} - value={physics.linkWidth} - step={0.1} - /> - <Text preset="fieldLabel" text={'Node size: ' + physics.nodeRel} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={1} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, nodeRel: value }) - }} - value={physics.nodeRel} - step={0.01} - /> - <Text preset="fieldLabel" text={'Particles: ' + physics.particles} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, particles: value }) - }} - value={physics.particles} - step={1} - /> - <Text - preset="fieldLabel" - text={'Particle Size: ' + physics.particleWidth} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={1} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, particleWidth: value }) - }} - value={physics.particleWidth} - step={0.1} - /> - <Text preset="fieldLabel" text="Labels" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.labels} - onValueChange={() => { - setPhysics({ ...physics, labels: !physics.labels }) - }} - /> - <Text - preset="fieldLabel" - text={'Scale when labels become visible: ' + physics.labelScale} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0.1} - maximumValue={5} - onValueChange={(value) => { - setPhysics({ ...physics, labelScale: value }) - }} - value={physics.labelScale} - step={0.1} - /> - </View> - ), - }, - { - title: 'Modes', - content: <View></View>, - }, - ] - - const [activeSections, setActiveSections] = useState([]) - - const setSections = (sections) => { - setActiveSections(sections.includes(undefined) ? [] : sections) - } - - const renderHeader = (section, _, isActive) => { - return ( - <Animatable.View - duration={400} - style={[styles.header, isActive ? styles.active : styles.inactive]} - transition="backgroundColor" - > - <Text style={styles.headerText}>{section.title}</Text> - </Animatable.View> - ) - } - - const renderContent = (section, _, isActive) => { - return ( - <Animatable.View - duration={400} - style={[styles.content, isActive ? styles.active : styles.inactive]} - transition="backgroundColor" - > - {section.content} - </Animatable.View> - ) - } - const [tweaks, setTweaks] = useState(true) - if (true) { - if (tweaks) { - return ( - <View style={styles.container}> - <View - style={{ height: 30, width: '100%', backgroundColor: '#2a2e38' }} - > - <TouchableOpacity - style={{ - width: 30, - color: '#a991f1', - textAlign: 'center', - marginLeft: 'auto', - padding: 5, - }} - onPress={() => { - setTweaks(false) - }} - > - <Icon name="close-circle" color="#ffffff" size={20} /> - </TouchableOpacity> - </View> - <ScrollView> - <Accordion - activeSections={activeSections} - sections={content} - touchAbleComponent={TouchableOpacity} - expandMultiple={true} - renderHeader={renderHeader} - renderContent={renderContent} - duration={200} - onChange={setSections} - renderAsFlatList={false} - /> - </ScrollView> - </View> - ) - } else { - return ( - <TouchableOpacity - onPress={() => { - setTweaks(true) - }} - style={{ - position: 'absolute', - top: 50, - left: 50, - width: 30, - color: '#ffffff', - zIndex: 100, - }} - > - <Icon name="cog" color="#ffffff" size={30} /> - </TouchableOpacity> - ) - } - } else { - return ( - <View - style={{ - position: 'absolute', - top: '5%', - left: '5%', - zIndex: 100, - width: 300, - backgroundColor: '#000000', - padding: 20, - }} - > - <Text preset="bold" text="Physics" /> - <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={-400} - maximumValue={100} - onValueChange={(value) => { - setPhysics({ ...physics, charge: value }) - }} - value={physics.charge} - step={1} - /> - <Text - preset="fieldLabel" - text={'Link Force: ' + physics.linkStrength} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={2} - onValueChange={(value) => { - setPhysics({ ...physics, linkStrength: value }) - }} - value={physics.linkStrength} - step={0.1} - /> - <Text - preset="fieldLabel" - text={"'Link Iterations': " + physics.linkIts} - /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={1} - maximumValue={10} - onValueChange={(value) => { - setPhysics({ ...physics, linkIts: value }) - }} - value={physics.linkIts} - step={1} - /> - <Text preset="fieldLabel" text="Collision" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.collision} - onValueChange={() => { - setPhysics({ ...physics, collision: !physics.collision }) - }} - /> - <Text preset="bold" text="Visual" /> - <Text preset="fieldLabel" text={'Particles: ' + physics.particles} /> - <Slider - minimumTrackTintColor="#a991f1" - maximumTrackTintColor="#242730" - thumbTintColor="#a991f1" - style={styles.slider} - minimumValue={0} - maximumValue={5} - onValueChange={(value) => { - setPhysics({ ...physics, particles: value }) - }} - value={physics.particles} - step={1} - /> - <Text preset="bold" text="Modes" /> - <Text preset="fieldLabel" text="Expandable Graph" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.collapse} - onValueChange={() => { - setPhysics({ ...physics, collapse: !physics.collapse }) - }} - /> - <Text preset="fieldLabel" text="3D" /> - <Switch - color="#a991f1" - trackColor={{ - false: '#62686E', - true: '#a991f1', - }} - style={styles.switch} - value={physics.threedim} - onValueChange={() => { - setPhysics({ ...physics, threedim: !physics.threedim }) - }} - /> - </View> - ) - } -}) - -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/components/wallpaper/wallpaper.presets.ts b/app/components/wallpaper/wallpaper.presets.ts deleted file mode 100644 index 148ad5c..0000000 --- a/app/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/components/wallpaper/wallpaper.props.ts b/app/components/wallpaper/wallpaper.props.ts deleted file mode 100644 index 9d97f12..0000000 --- a/app/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<ImageStyle> - - /** - * 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/components/wallpaper/wallpaper.story.tsx b/app/components/wallpaper/wallpaper.story.tsx deleted file mode 100644 index 14a5f62..0000000 --- a/app/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) => <StoryScreen>{fn()}</StoryScreen>) - .add('Style Presets', () => ( - <Story> - <UseCase text="default/stretch" usage="Full screen wallpaper image."> - <Wallpaper /> - </UseCase> - </Story> - )) diff --git a/app/components/wallpaper/wallpaper.tsx b/app/components/wallpaper/wallpaper.tsx deleted file mode 100644 index f5e24f1..0000000 --- a/app/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 //<Image source={source} style={styles} /> -} |
![app/components/icon/icons/[email protected]](/org-roam-ui/tree/app/components/icon/icons/arrow-left@2x.png?id=f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79){kind=link}
![app/components/icon/icons/[email protected]](/org-roam-ui/tree/app/components/icon/icons/bullet@2x.png?id=f0bf4e7afdcd8b02a62be45ab3e7d047ed865a79){kind=link}