expo-snowui 1.0.0

package/package.json

@@ -0,0 +1,163 @@
+{
+  "name": "expo-snowui",
+  "version": "1.0.0",
+  "description": "GUI components and contexts shared by the snowsuite apps",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-snowui-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XBigTK13X/react-native-snowui.git"
+  },
+  "author": "XBigTK13X <xbigtk13x@gmail.com> (https://github.com/XBigTK13X)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/XBigTK13X/react-native-snowui/issues"
+  },
+  "homepage": "https://github.com/XBigTK13X/react-native-snowui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native-tvos/config-tv": "0.1.4",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "babel-preset-expo": "^54.0.2",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "npm:react-native-tvos@0.81.4-0",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.3"
+  },
+  "dependencies": {
+    "expo": "^54.0.9",
+    "expo-image": "^3.0.8",
+    "lodash": "^4.17.21",
+    "use-debounce": "^10.0.6"
+  }
+}

package/src/component/snow-break.js

@@ -0,0 +1,9 @@
+import { View } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowBreak(props) {
+    const { SnowStyle } = useStyleContext(props)
+    return <View style={SnowStyle.component.break} />
+}
+
+export default SnowBreak

package/src/component/snow-dropdown.js

@@ -0,0 +1,64 @@
+import { View } from 'react-native'
+import SnowGrid from './snow-grid'
+import SnowTextButton from './snow-text-button'
+import SnowLabel from './snow-label'
+
+/* spread props
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+snowStyle
+*/
+
+export function SnowDropdown(props) {
+    if (!props.options) {
+        return null
+    }
+    if (props.valueIndex === undefined || props.valueIndex === null) {
+        return null
+    }
+
+    const choose = (chosenIndex) => {
+        if (props.onValueChange) {
+            props.onValueChange(chosenIndex)
+        }
+    }
+
+    const renderItem = (item, itemIndex) => {
+        let selected = false
+        if (!props.skipDefaultFocus) {
+            if (itemIndex === props.valueIndex) {
+                selected = true
+            }
+        }
+        return <SnowTextButton
+            {...props}
+            fade={selected && props.fade}
+            selected={selected}
+            title={item.name ? item.name : item}
+            onPress={() => { choose(item.index ? item.index : itemIndex) }} />
+    }
+
+    if (props.title) {
+        return <View>
+            <SnowLabel center>{props.title}</SnowLabel>
+            <SnowGrid
+                shouldFocus={props.shouldFocus}
+                itemsPerRow={props.itemsPerRow}
+                items={props.options}
+                renderItem={renderItem}
+            />
+        </View>
+    }
+    return (
+        <SnowGrid
+            shouldFocus={props.shouldFocus}
+            itemsPerRow={props.itemsPerRow}
+            items={props.options}
+            renderItem={renderItem}
+        />
+    )
+}
+
+export default SnowDropdown

package/src/component/snow-fill-view.js

@@ -0,0 +1,36 @@
+import { ScrollView, View } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowFillView(props) {
+    // FlatList often overflows outside of the viewport without enabling scrolling.
+    // This commonly happens when any parent container is not set to flex: 1
+    const { SnowStyle } = useStyleContext(props)
+    if (props.scroll) {
+        let viewStyle = [SnowStyle.component.fillView.default]
+        let scrollStyle = []
+        if (props.flexStart) {
+            scrollStyle = [SnowStyle.component.fillView.flexStart]
+        }
+        if (props.style) {
+            viewStyle.push(props.style)
+        }
+        return <ScrollView
+            style={viewStyle}
+            contentContainerStyle={scrollStyle}
+            children={props.children}
+        />
+    }
+
+    let style = [SnowStyle.component.fillView.default]
+    if (props.flexStart) {
+        style.push(SnowStyle.component.fillView.flexStart)
+    }
+    if (props.style) {
+        style.push(props.style)
+    }
+    return (
+        <View style={style} children={props.children} />
+    )
+}
+
+export default SnowFillView

package/src/component/snow-grid.js

@@ -0,0 +1,74 @@
+import React from 'react'
+import {
+    View,
+    FlatList
+} from 'react-native'
+
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowGrid(props) {
+    if (!props.items && !props.children) {
+        return null
+    }
+    let items = props.items
+    if (!props.items) {
+        // Without this, if a ternary `{x?x:null}` nullable component will leave a gap in the grid
+        items = React.Children.toArray(props.children)
+    }
+    items = items.filter(child => child !== null)
+    if (!items || !items.length) {
+        return null
+    }
+
+    const { SnowStyle } = useStyleContext(props)
+
+
+    let itemsPerRow = 5
+    if (props.itemsPerRow) {
+        itemsPerRow = props.itemsPerRow
+    }
+
+    let itemStyle = [
+        { flexBasis: `${100 / itemsPerRow}%` }
+    ]
+    let gridStyle = []
+    if (props.gridStyle) {
+        gridStyle.push(props.gridStyle)
+    }
+
+    if (props.short) {
+        gridStyle.push(SnowStyle.component.grid.short)
+    }
+
+    let renderItem = (item, itemIndex) => {
+        return item
+    }
+    if (props.renderItem) {
+        renderItem = props.renderItem
+    }
+    let columnStyle = null
+    if (itemsPerRow > 1) {
+        // If you try to style the column when 1 item per row, flat list throws an error
+        columnStyle = SnowStyle.component.grid.list
+    }
+    return (
+        <View style={gridStyle}>
+            <FlatList
+                scrollEnabled={props.scroll === true}
+                numColumns={itemsPerRow}
+                contentContainerStyle={SnowStyle.component.grid.list}
+                columnWrapperStyle={columnStyle}
+                data={items}
+                renderItem={({ item, index, separators }) => {
+                    return (
+                        <View style={itemStyle}>
+                            {renderItem(item, index)}
+                        </View>
+                    )
+                }}
+            />
+        </View >
+    )
+}
+
+export default SnowGrid

package/src/component/snow-header.js

@@ -0,0 +1,18 @@
+import { Text, View } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+import SnowText from './snow-text'
+
+export function SnowHeader(props) {
+    const { SnowStyle } = useStyleContext(props)
+    return (
+        <SnowText
+            skipDefault
+            center={props.center}
+            noSelect={props.noSelect}
+            style={SnowStyle.component.header}
+            children={props.children}
+        />
+    )
+}
+
+export default SnowHeader

package/src/component/snow-image-button.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import { TouchableOpacity, View, Platform } from 'react-native';
+import SnowText from './snow-text'
+import { Image } from 'expo-image'
+import { useStyleContext } from '../context/snow-style-context'
+
+/* spread props
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+onPress
+onLongPress
+*/
+
+export function SnowImageButton(props) {
+    const { SnowStyle } = useStyleContext(props)
+
+    const [focused, setFocused] = React.useState(false)
+    const touchRef = React.useRef(null)
+
+    React.useEffect(() => {
+        if (props.shouldFocus) {
+            touchRef.current.focus()
+        }
+    }, [])
+
+    let fontStyle = [SnowStyle.component.imageButton.text]
+    let title = props.title
+    if (title && title.length > 20) {
+        fontStyle.push(SnowStyle.component.imageButton.smallText)
+    }
+
+    if (title && title.length > 40) {
+        title = title.substring(0, 40) + '...'
+    }
+
+    const wrapperStyle = [SnowStyle.component.imageButton.wrapper]
+    const imageStyle = [SnowStyle.component.imageButton.image]
+    if (props.wide) {
+        wrapperStyle.push(SnowStyle.component.imageButton.wrapperWide)
+        imageStyle.push(SnowStyle.component.imageButton.imageWide)
+    }
+    if (props.square) {
+        wrapperStyle.push(SnowStyle.component.imageButton.wrapperSquare)
+        imageStyle.push(SnowStyle.component.imageButton.imageSquare)
+    }
+
+    let textWrapperStyle = [SnowStyle.component.imageButton.textWrapper]
+
+    if (props.dull) {
+        textWrapperStyle.push(SnowStyle.component.imageButton.dull)
+    }
+    if (props.selected) {
+        wrapperStyle.push(SnowStyle.component.imageButton.selected)
+        textWrapperStyle.push(SnowStyle.component.imageButton.selected)
+    }
+    if (focused && Platform.isTV) {
+        wrapperStyle.push(SnowStyle.component.imageButton.focused)
+        textWrapperStyle.push(SnowStyle.component.imageButton.focused)
+    }
+
+    let imageSource = null
+    if (props.imageUrl) {
+        imageSource = { uri: props.imageUrl }
+    }
+    if (props.imageSource) {
+        imageSource = props.imageSource
+    }
+
+    return (
+        <View>
+            <TouchableOpacity
+                {...props}
+                ref={touchRef}
+                activeOpacity={1.0}
+                onFocus={() => { setFocused(true) }}
+                onBlur={() => { setFocused(false) }}
+                style={wrapperStyle}
+                focusable={true}
+                hasTVPreferredFocus={props.shouldFocus}
+            >
+                <Image
+                    style={imageStyle}
+                    contentFit="contain"
+                    source={imageSource}
+                    placeholder={props.placeholder}
+                />
+                <View style={textWrapperStyle}>
+                    <SnowText style={fontStyle}>{title}</SnowText>
+                </View>
+
+            </TouchableOpacity>
+        </View>
+    )
+}
+
+export default SnowImageButton

package/src/component/snow-image-grid.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import { View } from 'react-native'
+import SnowGrid from './snow-grid'
+import SnowImageButton from './snow-image-button'
+import SnowLabel from './snow-label'
+
+/* spread props
+snowStyle
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+*/
+
+export function SnowImageGrid(props) {
+    if (!props.items || !props.items.length) {
+        return null
+    }
+    const [toggledItems, setToggledItems] = React.useState({})
+    const itemsPerRow = props.itemsPerRow || 5
+    const renderItem = (item, itemIndex) => {
+        let imageUrl = null
+        if (props.getItemImageUrl) {
+            imageUrl = props.getItemImageUrl(item)
+        }
+        let imageSource = null
+        if (props.getItemImageSource) {
+            imageSource = props.getItemImageSource(item)
+        }
+        const itemName = props.getItemName(item)
+
+        let toggled = toggledItems.hasOwnProperty(item.id)
+
+        let isDull = false
+        if (!props.disableToggle) {
+            if (props.getItemToggleStatus && props.getItemToggleStatus(item)) {
+                isDull = true
+            }
+        }
+
+        return <SnowImageButton
+            {...props}
+            wide={props.wideImage}
+            dull={isDull}
+            imageUrl={imageUrl}
+            imageSource={imageSource}
+            onPress={() => { if (props.onPress) { props.onPress(item) } }}
+            onLongPress={() => {
+                if (props.onLongPress) {
+                    props.onLongPress(item)
+                }
+                if (props.longPressToggle) {
+                    setToggledItems((prev) => {
+                        let result = { ...prev }
+                        if (toggled) {
+                            delete result[item.id]
+                        }
+                        else {
+                            result[item.id] = true
+                        }
+
+                        return result
+                    })
+                }
+            }}
+            title={itemName}
+        />
+    }
+
+    return (
+        <View>
+            {props.title ?
+                <SnowLabel>
+                    {props.title} ({props.items.length})
+                </SnowLabel>
+                : null}
+            <SnowGrid
+                shouldFocus={props.shouldFocus}
+                items={props.items}
+                renderItem={renderItem}
+                itemsPerRow={itemsPerRow}
+            />
+        </View>
+    )
+}
+
+export default SnowImageGrid

package/src/component/snow-input.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import { TextInput } from 'react-native'
+import { useDebouncedCallback } from 'use-debounce'
+import { useStyleContext } from '../context/snow-style-context'
+
+/* spreadble props
+secureTextEntry
+nextFocusLeft
+nextFocusRight
+nextFocusUp
+nextFocusDown
+*/
+
+export function SnowInput(props) {
+    const { SnowStyle, SnowConfig } = useStyleContext(props)
+    let textStyle = [SnowStyle.component.input.text]
+    if (props.short) {
+        textStyle.push(SnowStyle.component.input.small)
+    }
+
+    let onDebounce = null
+    if (props.onDebounce) {
+        onDebounce = useDebouncedCallback(props.onDebounce, SnowConfig.inputDebounceMilliseconds)
+    }
+    return <TextInput
+        {...props}
+        style={textStyle}
+        focusable={true}
+        editable={true}
+        onChangeText={(val) => {
+            if (props.onValueChange) {
+                props.onValueChange(val)
+            }
+            if (onDebounce) {
+                onDebounce(val)
+            }
+        }}
+        onSubmitEditing={() => {
+            if (props.onSubmit) {
+                props.onSubmit()
+            }
+        }}
+        value={props.value}
+    />
+}
+
+export default SnowInput

package/src/component/snow-label.js

@@ -0,0 +1,18 @@
+import { View, Text } from 'react-native'
+import { useStyleContext } from '../context/snow-style-context'
+import SnowText from './snow-text'
+
+export function SnowLabel(props) {
+    const { SnowStyle } = useStyleContext(props)
+    return (
+        <SnowText
+            skipDefault
+            center={props.center}
+            noSelect={props.noSelect}
+            style={SnowStyle.component.label}
+            children={props.children}
+        />
+    )
+}
+
+export default SnowLabel

package/src/component/snow-modal.js

@@ -0,0 +1,46 @@
+import { Modal } from 'react-native'
+import SnowFillView from './snow-fill-view'
+import { useStyleContext } from '../context/snow-style-context'
+
+export function SnowModal(props) {
+    const { SnowStyle } = useStyleContext(props)
+
+    let style = [SnowStyle.component.modal.prompt]
+    if (props.transparent) {
+        style.push(SnowStyle.component.modal.transparent)
+    }
+    if (props.center) {
+        style.push(SnowStyle.component.modal.center)
+    }
+    if (props.contentStyle) {
+        style.push(props.contentStyle)
+    }
+    if (props.wrapper === false) {
+        return (
+            <Modal
+                navigationBarTranslucent
+                statusBarTranslucent
+                transparent={props.transparent}
+                style={style}
+                onRequestClose={props.onRequestClose}
+                children={props.children} />
+        )
+    }
+    let modalStyle = [SnowStyle.component.modal.prompt]
+    if (props.modalStyle) {
+        modalStyle.push(modalStyle)
+    }
+    return <Modal
+        style={modalStyle}
+        navigationBarTranslucent
+        statusBarTranslucent
+        transparent={props.transparent}
+        onRequestClose={props.onRequestClose}>
+        <SnowFillView
+            scroll={props.scroll}
+            children={props.children}
+            style={style} />
+    </Modal>
+}
+
+export default SnowModal