@sleeperhq/mini-core 1.0.0

package/README.md

@@ -0,0 +1,9 @@
+# Sleeper-Mini Core
+
+![Sleeper](https://user-images.githubusercontent.com/61988202/223927288-c54734de-39f9-40c5-bb24-d1b193c9c374.png)
+
+## Description
+
+This package contains built in sleeper UI components and dev server functionality for creating mini apps.
+
+Please see the main repo at [sleeper-mini](https://github.com/blitzstudios/sleeper-mini) for more information.

package/app.json

@@ -0,0 +1,9 @@
+{
+  "name": "template",
+  "displayName": "template",
+  "remoteIP": "192.168.86.190",
+  "localSocketPort": 8082,
+  "remoteSocketPort": 9092,
+  "remoteBundlePort": 9091,
+  "release": true
+}

package/index.ts

@@ -0,0 +1,6 @@
+import * as Sleeper from './src/components';
+import DevServer from './src/dev_server';
+import * as Types from './src/types';
+import './src/packages';
+
+export {Sleeper, DevServer, Types};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@sleeperhq/mini-core",
+  "version": "1.0.0",
+  "description": "Core library frameworks for developing Sleeper Mini Apps.",
+  "main": "index.ts",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/blitzstudios/sleeper-mini-core.git"
+  },
+  "keywords": [
+    "sleeper",
+    "mini",
+    "apps",
+    "fantasy",
+    "sports"
+  ],
+  "author": "Luke Herbold <luke@sleeper.app>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/blitzstudios/sleeper-mini-core/issues"
+  },
+  "homepage": "https://github.com/blitzstudios/sleeper-mini-core#readme",  
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@callstack/repack": "blitzstudios/repack.git#callstack-repack-v2.5.3-gitpkg",
+    "@react-native-community/netinfo": "^9.3.7",
+    "axios": "0.15.3",
+    "lodash": "4.17.21",
+    "react": "17.0.2",
+    "react-native": "0.66.5",
+    "react-native-linear-gradient": "2.5.6",
+    "react-native-svg": "13.7.0",
+    "react-native-udp": "^4.1.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.12.5",
+    "@react-native-community/eslint-config": "^2.0.0",
+    "@types/lodash": "^4.14.182",
+    "@types/react-native": "0.66.5",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.5",
+    "eslint": "7.14.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "react-test-renderer": "17.0.2",
+    "terser-webpack-plugin": "^5.3.3",
+    "typescript": "^4.7.2",
+    "webpack": "^5.73.0"
+  },
+  "resolutions": {
+    "react-devtools-core": "~4.25.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}

package/src/components/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  ColorValue,
+  GestureResponderEvent,
+  TextProps,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {Federated} from '@callstack/repack/client';
+import {Context} from '../types';
+
+const _SleeperModule = React.lazy(() =>
+  Federated.importModule('sleeper', 'index').catch(() => ({
+    default: props => {
+      console.log(
+        `[Sleeper] Failed to load <${props?.component}>. Check connection to the app.`,
+      );
+      return <View />;
+    },
+  })),
+);
+
+type ButtonProps = {
+  height?: number;
+  gradient?: (string | number)[];
+  start?: {x: number; y: number};
+  end?: {x: number; y: number};
+  disable?: boolean;
+  onPress?: (event: GestureResponderEvent) => void;
+  text?: string;
+};
+const Button = (props: ButtonProps) => {
+  return (
+    <React.Suspense fallback={<View />}>
+      <_SleeperModule component="Button" {...props} />
+    </React.Suspense>
+  );
+};
+
+const Text = (props: TextProps) => {
+  return (
+    <React.Suspense fallback={<View />}>
+      <_SleeperModule component="Text" {...props} />
+    </React.Suspense>
+  );
+};
+
+type JerseyProps = {
+  style: ViewStyle;
+  sport: 'nfl' | 'nba' | 'cbb' | 'cfb' | 'mlb';
+  number: string;
+  fill: ColorValue;
+};
+const Jersey = (props: JerseyProps) => {
+  return (
+    <React.Suspense fallback={<View />}>
+      <_SleeperModule component="Jersey" {...props} />
+    </React.Suspense>
+  );
+};
+
+export type {ButtonProps, Context, TextProps, JerseyProps};
+export {Button, Text, Jersey};

package/src/dev_server/index.tsx

@@ -0,0 +1,104 @@
+import React, {useEffect} from 'react';
+import {Platform} from 'react-native';
+import {ScriptManager, Federated} from '@callstack/repack/client';
+import NetInfo from '@react-native-community/netinfo';
+import dgram from 'react-native-udp';
+import {
+  localSocketPort,
+  remoteSocketPort,
+  remoteBundlePort as _remoteBundlePort,
+  release,
+  remoteIP,
+} from '../../app.json';
+import axios from 'axios';
+
+const remoteBundleHost = release ? remoteIP : 'localhost';
+const remoteBundlePort = release ? _remoteBundlePort : 8081;
+
+ScriptManager.shared.addResolver(async (scriptId, caller) => {
+  const extension =
+    scriptId === 'sleeper' ? '.container.bundle' : '.chunk.bundle';
+  const resolveURL = Federated.createURLResolver({
+    containers: {
+      sleeper: `http://${remoteBundleHost}:${remoteBundlePort}/[name]${extension}`,
+    },
+  });
+
+  // Try to resolve URL based on scriptId and caller
+  const url = resolveURL(scriptId, caller);
+  const query = release ? undefined : {platform: Platform.OS};
+
+  const response = await axios
+    .get(url + '?' + new URLSearchParams(query), {method: 'HEAD'})
+    .catch(() => ({
+      status: 404,
+    }));
+
+  console.log('[Sleeper] load script:', scriptId, caller);
+  if (response?.status === 200) {
+    return {url, query};
+  }
+});
+
+const DevServer = props => {
+  const onSocket = msg => {
+    const json = JSON.parse(msg.toString());
+    if (json?._connected) {
+      return;
+    }
+
+    props.onContextChanged(json);
+  };
+
+  const onError = err => {
+    console.error('[Sleeper] Socket error: ' + err);
+  };
+
+  const bindSocket = async socket => {
+    const netInfo = await NetInfo.fetch();
+    const netInfoDetails = netInfo?.details;
+
+    if (!netInfoDetails || !('ipAddress' in netInfoDetails)) {
+      console.error('[Sleeper] Failed to determine local IP address.');
+      return;
+    }
+
+    socket.bind({port: localSocketPort, address: netInfoDetails.ipAddress});
+  };
+
+  const pingServer = socket => {
+    // Continue to ping the sleeper app server until it responds.
+    return new Promise(() => {
+      NetInfo.fetch().then(netInfo => {
+        const netInfoDetails = netInfo?.details;
+        if (!netInfoDetails || !('ipAddress' in netInfoDetails)) {
+          console.error('[Sleeper] Failed to determine local IP address.');
+          return;
+        }
+
+        const json = JSON.stringify({_ip: netInfoDetails.ipAddress});
+
+        (async function ping() {
+          socket.send(json, undefined, undefined, remoteSocketPort, remoteIP);
+          setTimeout(ping, 5000);
+        })();
+      });
+    });
+  };
+
+  useEffect(() => {
+    const socket = dgram.createSocket({type: 'udp4'});
+    bindSocket(socket);
+    pingServer(socket);
+
+    socket.on('message', onSocket);
+    socket.on('error', onError);
+    return () => {
+      socket.removeAllListeners();
+    };
+  }, []);
+
+  return <></>;
+};
+
+export default DevServer;

package/src/packages/index.ts

@@ -0,0 +1,4 @@
+// preload shared packages that require initialization during startup
+import 'lodash';
+import 'react-native-svg';
+import 'react-native-linear-gradient';

package/src/types/index.ts

@@ -0,0 +1,116 @@
+export type Maybe<T> = T | null;
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+  Json: {[key: string]: any};
+  List: string[];
+  Map: {[key: string]: any};
+  MapWithSnowflakeKey: {[key: string]: any};
+  Set: string[];
+  Snowflake: string;
+  SnowflakeList: string[];
+  SnowflakeSet: string[];
+};
+
+export type User = {
+  __typename?: 'User';
+  async_bundles?: Maybe<Scalars['List']>;
+  avatar?: Maybe<Scalars['String']>;
+  cookies?: Maybe<Scalars['Int']>;
+  created?: Maybe<Scalars['Int']>;
+  currencies?: Maybe<Scalars['Map']>;
+  data_updated?: Maybe<Scalars['Map']>;
+  deleted?: Maybe<Scalars['Int']>;
+  display_name?: Maybe<Scalars['String']>;
+  email?: Maybe<Scalars['String']>;
+  is_bot?: Maybe<Scalars['Boolean']>;
+  metadata?: Maybe<Scalars['Json']>;
+  notifications?: Maybe<Scalars['Map']>;
+  pending?: Maybe<Scalars['Boolean']>;
+  phone?: Maybe<Scalars['String']>;
+  real_name?: Maybe<Scalars['String']>;
+  solicitable?: Maybe<Scalars['Boolean']>;
+  summoner_name?: Maybe<Scalars['String']>;
+  summoner_region?: Maybe<Scalars['String']>;
+  token?: Maybe<Scalars['String']>;
+  user_id?: Maybe<Scalars['Snowflake']>;
+  username?: Maybe<Scalars['String']>;
+  verification?: Maybe<Scalars['String']>;
+};
+
+export type League = {
+  __typename?: 'League';
+  avatar?: Maybe<Scalars['String']>;
+  company_id?: Maybe<Scalars['Snowflake']>;
+  display_order?: Maybe<Scalars['Int']>;
+  draft_id?: Maybe<Scalars['Snowflake']>;
+  group_id?: Maybe<Scalars['Snowflake']>;
+  last_author_avatar?: Maybe<Scalars['String']>;
+  last_author_display_name?: Maybe<Scalars['String']>;
+  last_author_id?: Maybe<Scalars['Snowflake']>;
+  last_author_is_bot?: Maybe<Scalars['Boolean']>;
+  last_message_attachment?: Maybe<Scalars['Json']>;
+  last_message_id?: Maybe<Scalars['Snowflake']>;
+  last_message_text?: Maybe<Scalars['String']>;
+  last_message_text_map?: Maybe<Scalars['Json']>;
+  last_message_time?: Maybe<Scalars['Int']>;
+  last_pinned_message_id?: Maybe<Scalars['Snowflake']>;
+  last_read_id?: Maybe<Scalars['Snowflake']>;
+  last_transaction_id?: Maybe<Scalars['Snowflake']>;
+  league_id?: Maybe<Scalars['Snowflake']>;
+  matchup_legs?: Maybe<Scalars['List']>;
+  metadata?: Maybe<Scalars['Map']>;
+  name?: Maybe<Scalars['String']>;
+  previous_league_id?: Maybe<Scalars['Snowflake']>;
+  roster_positions?: Maybe<Scalars['List']>;
+  scoring_settings?: Maybe<Scalars['Map']>;
+  season?: Maybe<Scalars['String']>;
+  season_type?: Maybe<Scalars['String']>;
+  settings?: Maybe<Scalars['Map']>;
+  sport?: Maybe<Scalars['String']>;
+  status?: Maybe<Scalars['String']>;
+  total_rosters?: Maybe<Scalars['Int']>;
+};
+
+export type NavigationType =
+  | 'DM'
+  | 'INBOX'
+  | 'MY_FEED'
+  | 'FRIENDS'
+  | 'LEAGUE'
+  | 'ASYNC_SPORT'
+  | 'CREATE_LEAGUE'
+  | 'LEAGUE_SYNC'
+  | 'DRAFTBOARDS'
+  | 'SOLO_OVER_UNDER'
+  | 'CHANNEL'
+  | 'MANAGE_CHANNELS';
+
+export type NavigationTypeId =
+  | 1 // DRAFTBOARDS
+  | 2 // CREATE_DM
+  | 3 // DM_SCREEN
+  | 4 // CREATE_LEAGUE
+  | 5 // MY_FEED
+  | 6 // MENTIONS
+  | 7; // FRIENDS
+
+export type Navigation = {
+  selectedNavType: NavigationType;
+  selectedNavTypeId: NavigationTypeId;
+  selectedNavData: {};
+};
+
+export type Actions = {
+  navigate: (navType?: NavigationType, navTypeId?: NavigationTypeId) => void;
+};
+
+export type Context = {
+  user?: User;
+  league?: League;
+  navigation?: Navigation;
+  actions?: Actions;
+};