@nuskin/routine-feature 0.0.1

package/lib/commonjs/index.js

@@ -0,0 +1,232 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RoutineStack = RoutineStack;
+exports.useRoutine = useRoutine;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _mobileNavigation = require("@nuskin/mobile-navigation");
+
+var _mobileUi = require("@ns/mobile-ui");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Stack = (0, _mobileNavigation.createNativeStackNavigator)();
+const SECTIONS = [{
+  title: 'My Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title Onessssss',
+    uri: 'https://picsum.photos/id/1/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/10/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1002/200'
+  }]
+}, {
+  title: 'Featured Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title 1',
+    uri: 'https://picsum.photos/id/1011/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/1012/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1013/200'
+  }]
+}, {
+  title: 'Suggested Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title 1',
+    uri: 'https://picsum.photos/id/1020/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/1024/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1027/200'
+  }]
+}];
+
+const ListItem = _ref => {
+  let {
+    item,
+    index
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.item, index === 0 ? {
+      marginLeft: 0
+    } : {}]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: {
+      uri: item.uri
+    },
+    style: styles.itemPhoto,
+    resizeMode: "cover"
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.itemText
+  }, item.text));
+};
+
+const Routines = () => {
+  const handleOnPress = () => {// console.log('onPress', section)
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
+    style: styles.container,
+    testID: "routineStack"
+  }, /*#__PURE__*/_react.default.createElement(_mobileUi.VeraHeader, {
+    left: /*#__PURE__*/_react.default.createElement(_mobileUi.Logo, {
+      accessibilityLabel: "logo"
+    }),
+    right: /*#__PURE__*/_react.default.createElement(_mobileUi.HeaderCart, {
+      accessibilityLabel: "crt-btn"
+    }),
+    title: "Routines",
+    accessibilityLabel: "header"
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      backgroundColor: 'white'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.SectionList, {
+    stickySectionHeadersEnabled: false,
+    sections: SECTIONS,
+    renderSectionHeader: _ref2 => {
+      let {
+        section
+      } = _ref2;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: styles.sectionHeader
+      }, section.title), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+        horizontal: true,
+        data: section.data,
+        renderItem: _ref3 => {
+          let {
+            item,
+            index
+          } = _ref3;
+          return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+            onPress: handleOnPress
+          }, /*#__PURE__*/_react.default.createElement(ListItem, {
+            item: item,
+            index: index
+          }));
+        },
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: {
+          paddingHorizontal: 15
+        }
+      }));
+    },
+    renderItem: _ref4 => {
+      let {
+        item,
+        section,
+        index
+      } = _ref4;
+
+      if (section.horizontal) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(ListItem, {
+        item: item,
+        index: index
+      });
+    }
+  })));
+};
+
+function RoutineDetails() {
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "Routine"));
+}
+
+function RoutineStack(LOG, _ref5) {
+  let {
+    navigation
+  } = _ref5;
+  (0, _react.useEffect)(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      LOG.info('User navigated to the RoutineStack page.');
+    });
+    return unsubscribe;
+  }, [navigation]);
+  return /*#__PURE__*/_react.default.createElement(Stack.Navigator, null, /*#__PURE__*/_react.default.createElement(Stack.Screen, {
+    name: "Routines",
+    component: Routines,
+    options: {
+      headerShown: false
+    }
+  }), /*#__PURE__*/_react.default.createElement(Stack.Screen, {
+    name: "RoutineDetails",
+    component: RoutineDetails,
+    options: {
+      headerShown: false
+    }
+  }));
+}
+
+function useRoutine() {//
+}
+
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9F9F9'
+  },
+  sectionHeader: {
+    textTransform: 'uppercase',
+    fontWeight: '600',
+    fontSize: 14,
+    // color: '#f4f4f4',
+    marginTop: 20,
+    paddingHorizontal: 15,
+    marginBottom: 5
+  },
+  item: {
+    margin: 10,
+    borderRadius: 14
+  },
+  itemPhoto: {
+    width: 230,
+    height: 160,
+    borderRadius: 14
+  },
+  itemText: {
+    color: 'rgba(255, 255, 255, 1)',
+    fontWeight: 'bold',
+    marginTop: 5,
+    position: 'absolute',
+    left: 16,
+    bottom: 16
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["Stack","SECTIONS","title","horizontal","data","key","text","uri","ListItem","item","index","styles","marginLeft","itemPhoto","itemText","Routines","handleOnPress","container","flex","backgroundColor","section","sectionHeader","paddingHorizontal","RoutineDetails","alignItems","justifyContent","RoutineStack","LOG","navigation","unsubscribe","addListener","info","headerShown","useRoutine","StyleSheet","create","textTransform","fontWeight","fontSize","marginTop","marginBottom","margin","borderRadius","width","height","color","position","left","bottom"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  FlatList,\n  Image,\n  SafeAreaView,\n  SectionList,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  View,\n} from 'react-native';\nimport { createNativeStackNavigator } from '@nuskin/mobile-navigation';\nimport { VeraHeader, Logo, HeaderCart } from '@ns/mobile-ui';\n\nconst Stack = createNativeStackNavigator();\n\nconst SECTIONS = [\n  {\n    title: 'My Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title Onessssss',\n        uri: 'https://picsum.photos/id/1/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/10/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1002/200',\n      },\n    ],\n  },\n  {\n    title: 'Featured Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title 1',\n        uri: 'https://picsum.photos/id/1011/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/1012/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1013/200',\n      },\n    ],\n  },\n  {\n    title: 'Suggested Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title 1',\n        uri: 'https://picsum.photos/id/1020/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/1024/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1027/200',\n      },\n    ],\n  },\n];\n\nconst ListItem = ({ item, index }) => {\n  return (\n    <View style={[styles.item, index === 0 ? { marginLeft: 0 } : {}]}>\n      <Image\n        source={{\n          uri: item.uri,\n        }}\n        style={styles.itemPhoto}\n        resizeMode=\"cover\"\n      />\n      <Text style={styles.itemText}>{item.text}</Text>\n    </View>\n  );\n};\n\nconst Routines = () => {\n  const handleOnPress = () => {\n    // console.log('onPress', section)\n  };\n\n  return (\n    <SafeAreaView style={styles.container} testID=\"routineStack\">\n      <VeraHeader\n        left={<Logo accessibilityLabel=\"logo\" />}\n        right={<HeaderCart accessibilityLabel=\"crt-btn\" />}\n        title=\"Routines\"\n        accessibilityLabel=\"header\"\n      />\n      <View style={{ flex: 1, backgroundColor: 'white' }}>\n        <SectionList\n          stickySectionHeadersEnabled={false}\n          sections={SECTIONS}\n          renderSectionHeader={({ section }) => (\n            <>\n              <Text style={styles.sectionHeader}>{section.title}</Text>\n              <FlatList\n                horizontal\n                data={section.data}\n                renderItem={({ item, index }) => (\n                  <TouchableOpacity onPress={handleOnPress}>\n                    <ListItem item={item} index={index} />\n                  </TouchableOpacity>\n                )}\n                showsHorizontalScrollIndicator={false}\n                contentContainerStyle={{ paddingHorizontal: 15 }}\n              />\n            </>\n          )}\n          renderItem={({ item, section, index }) => {\n            if (section.horizontal) {\n              return null;\n            }\n            return <ListItem item={item} index={index} />;\n          }}\n        />\n      </View>\n    </SafeAreaView>\n  );\n};\n\nfunction RoutineDetails() {\n  return (\n    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n      <Text>Routine</Text>\n    </View>\n  );\n}\n\nfunction RoutineStack(LOG, { navigation }) {\n  useEffect(() => {\n    const unsubscribe = navigation.addListener('focus', () => {\n      LOG.info('User navigated to the RoutineStack page.');\n    });\n    return unsubscribe;\n  }, [navigation]);\n\n  return (\n    <Stack.Navigator>\n      <Stack.Screen\n        name=\"Routines\"\n        component={Routines}\n        options={{ headerShown: false }}\n      />\n      <Stack.Screen\n        name=\"RoutineDetails\"\n        component={RoutineDetails}\n        options={{ headerShown: false }}\n      />\n    </Stack.Navigator>\n  );\n}\n\nfunction useRoutine() {\n  //\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F9F9F9',\n  },\n  sectionHeader: {\n    textTransform: 'uppercase',\n    fontWeight: '600',\n    fontSize: 14,\n    // color: '#f4f4f4',\n    marginTop: 20,\n    paddingHorizontal: 15,\n    marginBottom: 5,\n  },\n  item: {\n    margin: 10,\n    borderRadius: 14,\n  },\n  itemPhoto: {\n    width: 230,\n    height: 160,\n    borderRadius: 14,\n  },\n  itemText: {\n    color: 'rgba(255, 255, 255, 1)',\n    fontWeight: 'bold',\n    marginTop: 5,\n    position: 'absolute',\n    left: 16,\n    bottom: 16,\n  },\n});\n\nexport { RoutineStack, useRoutine };\n"]}

package/lib/module/index.js

@@ -0,0 +1,217 @@
+import React, { useEffect } from 'react';
+import { FlatList, Image, SafeAreaView, SectionList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { createNativeStackNavigator } from '@nuskin/mobile-navigation';
+import { VeraHeader, Logo, HeaderCart } from '@ns/mobile-ui';
+const Stack = createNativeStackNavigator();
+const SECTIONS = [{
+  title: 'My Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title Onessssss',
+    uri: 'https://picsum.photos/id/1/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/10/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1002/200'
+  }]
+}, {
+  title: 'Featured Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title 1',
+    uri: 'https://picsum.photos/id/1011/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/1012/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1013/200'
+  }]
+}, {
+  title: 'Suggested Routines',
+  horizontal: true,
+  data: [{
+    key: '1',
+    text: 'Card Title 1',
+    uri: 'https://picsum.photos/id/1020/200'
+  }, {
+    key: '2',
+    text: 'Card Title 2',
+    uri: 'https://picsum.photos/id/1024/200'
+  }, {
+    key: '3',
+    text: 'Card Title 3',
+    uri: 'https://picsum.photos/id/1027/200'
+  }]
+}];
+
+const ListItem = _ref => {
+  let {
+    item,
+    index
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.item, index === 0 ? {
+      marginLeft: 0
+    } : {}]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: item.uri
+    },
+    style: styles.itemPhoto,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: styles.itemText
+  }, item.text));
+};
+
+const Routines = () => {
+  const handleOnPress = () => {// console.log('onPress', section)
+  };
+
+  return /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: styles.container,
+    testID: "routineStack"
+  }, /*#__PURE__*/React.createElement(VeraHeader, {
+    left: /*#__PURE__*/React.createElement(Logo, {
+      accessibilityLabel: "logo"
+    }),
+    right: /*#__PURE__*/React.createElement(HeaderCart, {
+      accessibilityLabel: "crt-btn"
+    }),
+    title: "Routines",
+    accessibilityLabel: "header"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      backgroundColor: 'white'
+    }
+  }, /*#__PURE__*/React.createElement(SectionList, {
+    stickySectionHeadersEnabled: false,
+    sections: SECTIONS,
+    renderSectionHeader: _ref2 => {
+      let {
+        section
+      } = _ref2;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+        style: styles.sectionHeader
+      }, section.title), /*#__PURE__*/React.createElement(FlatList, {
+        horizontal: true,
+        data: section.data,
+        renderItem: _ref3 => {
+          let {
+            item,
+            index
+          } = _ref3;
+          return /*#__PURE__*/React.createElement(TouchableOpacity, {
+            onPress: handleOnPress
+          }, /*#__PURE__*/React.createElement(ListItem, {
+            item: item,
+            index: index
+          }));
+        },
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: {
+          paddingHorizontal: 15
+        }
+      }));
+    },
+    renderItem: _ref4 => {
+      let {
+        item,
+        section,
+        index
+      } = _ref4;
+
+      if (section.horizontal) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(ListItem, {
+        item: item,
+        index: index
+      });
+    }
+  })));
+};
+
+function RoutineDetails() {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, null, "Routine"));
+}
+
+function RoutineStack(LOG, _ref5) {
+  let {
+    navigation
+  } = _ref5;
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      LOG.info('User navigated to the RoutineStack page.');
+    });
+    return unsubscribe;
+  }, [navigation]);
+  return /*#__PURE__*/React.createElement(Stack.Navigator, null, /*#__PURE__*/React.createElement(Stack.Screen, {
+    name: "Routines",
+    component: Routines,
+    options: {
+      headerShown: false
+    }
+  }), /*#__PURE__*/React.createElement(Stack.Screen, {
+    name: "RoutineDetails",
+    component: RoutineDetails,
+    options: {
+      headerShown: false
+    }
+  }));
+}
+
+function useRoutine() {//
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9F9F9'
+  },
+  sectionHeader: {
+    textTransform: 'uppercase',
+    fontWeight: '600',
+    fontSize: 14,
+    // color: '#f4f4f4',
+    marginTop: 20,
+    paddingHorizontal: 15,
+    marginBottom: 5
+  },
+  item: {
+    margin: 10,
+    borderRadius: 14
+  },
+  itemPhoto: {
+    width: 230,
+    height: 160,
+    borderRadius: 14
+  },
+  itemText: {
+    color: 'rgba(255, 255, 255, 1)',
+    fontWeight: 'bold',
+    marginTop: 5,
+    position: 'absolute',
+    left: 16,
+    bottom: 16
+  }
+});
+export { RoutineStack, useRoutine };
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":["React","useEffect","FlatList","Image","SafeAreaView","SectionList","StyleSheet","Text","TouchableOpacity","View","createNativeStackNavigator","VeraHeader","Logo","HeaderCart","Stack","SECTIONS","title","horizontal","data","key","text","uri","ListItem","item","index","styles","marginLeft","itemPhoto","itemText","Routines","handleOnPress","container","flex","backgroundColor","section","sectionHeader","paddingHorizontal","RoutineDetails","alignItems","justifyContent","RoutineStack","LOG","navigation","unsubscribe","addListener","info","headerShown","useRoutine","create","textTransform","fontWeight","fontSize","marginTop","marginBottom","margin","borderRadius","width","height","color","position","left","bottom"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport {\n  FlatList,\n  Image,\n  SafeAreaView,\n  SectionList,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  View,\n} from 'react-native';\nimport { createNativeStackNavigator } from '@nuskin/mobile-navigation';\nimport { VeraHeader, Logo, HeaderCart } from '@ns/mobile-ui';\n\nconst Stack = createNativeStackNavigator();\n\nconst SECTIONS = [\n  {\n    title: 'My Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title Onessssss',\n        uri: 'https://picsum.photos/id/1/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/10/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1002/200',\n      },\n    ],\n  },\n  {\n    title: 'Featured Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title 1',\n        uri: 'https://picsum.photos/id/1011/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/1012/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1013/200',\n      },\n    ],\n  },\n  {\n    title: 'Suggested Routines',\n    horizontal: true,\n    data: [\n      {\n        key: '1',\n        text: 'Card Title 1',\n        uri: 'https://picsum.photos/id/1020/200',\n      },\n      {\n        key: '2',\n        text: 'Card Title 2',\n        uri: 'https://picsum.photos/id/1024/200',\n      },\n\n      {\n        key: '3',\n        text: 'Card Title 3',\n        uri: 'https://picsum.photos/id/1027/200',\n      },\n    ],\n  },\n];\n\nconst ListItem = ({ item, index }) => {\n  return (\n    <View style={[styles.item, index === 0 ? { marginLeft: 0 } : {}]}>\n      <Image\n        source={{\n          uri: item.uri,\n        }}\n        style={styles.itemPhoto}\n        resizeMode=\"cover\"\n      />\n      <Text style={styles.itemText}>{item.text}</Text>\n    </View>\n  );\n};\n\nconst Routines = () => {\n  const handleOnPress = () => {\n    // console.log('onPress', section)\n  };\n\n  return (\n    <SafeAreaView style={styles.container} testID=\"routineStack\">\n      <VeraHeader\n        left={<Logo accessibilityLabel=\"logo\" />}\n        right={<HeaderCart accessibilityLabel=\"crt-btn\" />}\n        title=\"Routines\"\n        accessibilityLabel=\"header\"\n      />\n      <View style={{ flex: 1, backgroundColor: 'white' }}>\n        <SectionList\n          stickySectionHeadersEnabled={false}\n          sections={SECTIONS}\n          renderSectionHeader={({ section }) => (\n            <>\n              <Text style={styles.sectionHeader}>{section.title}</Text>\n              <FlatList\n                horizontal\n                data={section.data}\n                renderItem={({ item, index }) => (\n                  <TouchableOpacity onPress={handleOnPress}>\n                    <ListItem item={item} index={index} />\n                  </TouchableOpacity>\n                )}\n                showsHorizontalScrollIndicator={false}\n                contentContainerStyle={{ paddingHorizontal: 15 }}\n              />\n            </>\n          )}\n          renderItem={({ item, section, index }) => {\n            if (section.horizontal) {\n              return null;\n            }\n            return <ListItem item={item} index={index} />;\n          }}\n        />\n      </View>\n    </SafeAreaView>\n  );\n};\n\nfunction RoutineDetails() {\n  return (\n    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n      <Text>Routine</Text>\n    </View>\n  );\n}\n\nfunction RoutineStack(LOG, { navigation }) {\n  useEffect(() => {\n    const unsubscribe = navigation.addListener('focus', () => {\n      LOG.info('User navigated to the RoutineStack page.');\n    });\n    return unsubscribe;\n  }, [navigation]);\n\n  return (\n    <Stack.Navigator>\n      <Stack.Screen\n        name=\"Routines\"\n        component={Routines}\n        options={{ headerShown: false }}\n      />\n      <Stack.Screen\n        name=\"RoutineDetails\"\n        component={RoutineDetails}\n        options={{ headerShown: false }}\n      />\n    </Stack.Navigator>\n  );\n}\n\nfunction useRoutine() {\n  //\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#F9F9F9',\n  },\n  sectionHeader: {\n    textTransform: 'uppercase',\n    fontWeight: '600',\n    fontSize: 14,\n    // color: '#f4f4f4',\n    marginTop: 20,\n    paddingHorizontal: 15,\n    marginBottom: 5,\n  },\n  item: {\n    margin: 10,\n    borderRadius: 14,\n  },\n  itemPhoto: {\n    width: 230,\n    height: 160,\n    borderRadius: 14,\n  },\n  itemText: {\n    color: 'rgba(255, 255, 255, 1)',\n    fontWeight: 'bold',\n    marginTop: 5,\n    position: 'absolute',\n    left: 16,\n    bottom: 16,\n  },\n});\n\nexport { RoutineStack, useRoutine };\n"]}

package/lib/typescript/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare function RoutineStack(LOG: any, { navigation }: {
+    navigation: any;
+}): JSX.Element;
+declare function useRoutine(): void;
+export { RoutineStack, useRoutine };

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "@nuskin/routine-feature",
+  "private": false,
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://code.tls.nuskin.io/ns-am/mobile/applications/luna-and-sol/shared2.git",
+    "directory": "packages/routine-feature"
+  },
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "rm -rf lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-native": ">=0.64.2"
+  },
+  "dependencies": {
+    "@nuskin/mobile-navigation": "0.0.1",
+    "@ns/mobile-ui": "0.0.1",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "react-native-builder-bob": "^0.18.1",
+    "typescript": "4.4.2"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ],
+    "transform": {
+      "^.+\\.(js|jsx|ts|tsx)?$": "babel-jest"
+    },
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "**/*.tsx",
+      "**/*.ts",
+      "!**/coverage/**",
+      "!**/node_modules/**",
+      "!**/__mocks__/**",
+      "!**/(styles|assets|helpers|e2e)/*"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "package.json",
+      "package-lock.json"
+    ],
+    "testResultsProcessor": "jest-sonar-reporter",
+    "coverageThreshold": {
+      "global": {
+        "branches": 0,
+        "functions": 0,
+        "lines": 0,
+        "statements": 0
+      }
+    },
+    "reporters": [
+      "default",
+      "jest-junit"
+    ],
+    "coverageReporters": [
+      "html",
+      "lcov",
+      "text-summary"
+    ],
+    "setupFiles": [
+      "./setupJest.js"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native-community",
+      "prettier",
+      "@nuskin/eslint-config-mobile"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ],
+      "react-hooks/exhaustive-deps": "off"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/",
+    "example/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "commithash": "ed329849d5652bd8c910df04813ebabeaae2a3a2",
+  "author": {
+    "name": "Norman Jarvis",
+    "email": "ncjarvis@nuskin.com",
+    "url": "https://code.tls.nuskin.io/ncjarvis"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,215 @@
+import React, { useEffect } from 'react';
+import {
+  FlatList,
+  Image,
+  SafeAreaView,
+  SectionList,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { createNativeStackNavigator } from '@nuskin/mobile-navigation';
+import { VeraHeader, Logo, HeaderCart } from '@ns/mobile-ui';
+
+const Stack = createNativeStackNavigator();
+
+const SECTIONS = [
+  {
+    title: 'My Routines',
+    horizontal: true,
+    data: [
+      {
+        key: '1',
+        text: 'Card Title Onessssss',
+        uri: 'https://picsum.photos/id/1/200',
+      },
+      {
+        key: '2',
+        text: 'Card Title 2',
+        uri: 'https://picsum.photos/id/10/200',
+      },
+
+      {
+        key: '3',
+        text: 'Card Title 3',
+        uri: 'https://picsum.photos/id/1002/200',
+      },
+    ],
+  },
+  {
+    title: 'Featured Routines',
+    horizontal: true,
+    data: [
+      {
+        key: '1',
+        text: 'Card Title 1',
+        uri: 'https://picsum.photos/id/1011/200',
+      },
+      {
+        key: '2',
+        text: 'Card Title 2',
+        uri: 'https://picsum.photos/id/1012/200',
+      },
+
+      {
+        key: '3',
+        text: 'Card Title 3',
+        uri: 'https://picsum.photos/id/1013/200',
+      },
+    ],
+  },
+  {
+    title: 'Suggested Routines',
+    horizontal: true,
+    data: [
+      {
+        key: '1',
+        text: 'Card Title 1',
+        uri: 'https://picsum.photos/id/1020/200',
+      },
+      {
+        key: '2',
+        text: 'Card Title 2',
+        uri: 'https://picsum.photos/id/1024/200',
+      },
+
+      {
+        key: '3',
+        text: 'Card Title 3',
+        uri: 'https://picsum.photos/id/1027/200',
+      },
+    ],
+  },
+];
+
+const ListItem = ({ item, index }) => {
+  return (
+    <View style={[styles.item, index === 0 ? { marginLeft: 0 } : {}]}>
+      <Image
+        source={{
+          uri: item.uri,
+        }}
+        style={styles.itemPhoto}
+        resizeMode="cover"
+      />
+      <Text style={styles.itemText}>{item.text}</Text>
+    </View>
+  );
+};
+
+const Routines = () => {
+  const handleOnPress = () => {
+    // console.log('onPress', section)
+  };
+
+  return (
+    <SafeAreaView style={styles.container} testID="routineStack">
+      <VeraHeader
+        left={<Logo accessibilityLabel="logo" />}
+        right={<HeaderCart accessibilityLabel="crt-btn" />}
+        title="Routines"
+        accessibilityLabel="header"
+      />
+      <View style={{ flex: 1, backgroundColor: 'white' }}>
+        <SectionList
+          stickySectionHeadersEnabled={false}
+          sections={SECTIONS}
+          renderSectionHeader={({ section }) => (
+            <>
+              <Text style={styles.sectionHeader}>{section.title}</Text>
+              <FlatList
+                horizontal
+                data={section.data}
+                renderItem={({ item, index }) => (
+                  <TouchableOpacity onPress={handleOnPress}>
+                    <ListItem item={item} index={index} />
+                  </TouchableOpacity>
+                )}
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={{ paddingHorizontal: 15 }}
+              />
+            </>
+          )}
+          renderItem={({ item, section, index }) => {
+            if (section.horizontal) {
+              return null;
+            }
+            return <ListItem item={item} index={index} />;
+          }}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+function RoutineDetails() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Routine</Text>
+    </View>
+  );
+}
+
+function RoutineStack(LOG, { navigation }) {
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      LOG.info('User navigated to the RoutineStack page.');
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Routines"
+        component={Routines}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="RoutineDetails"
+        component={RoutineDetails}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}
+
+function useRoutine() {
+  //
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F9F9F9',
+  },
+  sectionHeader: {
+    textTransform: 'uppercase',
+    fontWeight: '600',
+    fontSize: 14,
+    // color: '#f4f4f4',
+    marginTop: 20,
+    paddingHorizontal: 15,
+    marginBottom: 5,
+  },
+  item: {
+    margin: 10,
+    borderRadius: 14,
+  },
+  itemPhoto: {
+    width: 230,
+    height: 160,
+    borderRadius: 14,
+  },
+  itemText: {
+    color: 'rgba(255, 255, 255, 1)',
+    fontWeight: 'bold',
+    marginTop: 5,
+    position: 'absolute',
+    left: 16,
+    bottom: 16,
+  },
+});
+
+export { RoutineStack, useRoutine };