Feature/adds flare collection

package.json

@@ -46,6 +46,7 @@
   },
   "homepage": "https://github.com/seasons/eclipse#readme",
   "devDependencies": {
+    "@apollo/client": "^3.2.1",
     "@commitlint/config-conventional": "^8.3.4",
     "@material-ui/core": "^4.11.1",
     "@react-native-community/bob": "^0.16.2",
@@ -69,28 +70,49 @@
     "eslint-plugin-prettier": "^3.1.3",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
+    "luxon": "^1.25.0",
+    "next": "9.5.3",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
     "react": "16.11.0",
+    "react-content-loader": "^5.0.4",
     "react-dom": "^17.0.1",
     "react-native": "0.62.2",
+    "react-native-animatable": "^1.3.3",
     "react-native-fade-in-image": "^1.5.0",
     "react-native-fast-image": "^8.3.4",
     "react-native-safe-area-context": "^3.1.9",
+    "react-native-scroll-bottom-sheet": "^0.7.0",
     "react-native-svg": "12.1.0",
     "react-native-web": "^0.14.8",
+    "react-navigation": "^4.4.0",
     "react-primitives": "^0.8.1",
+    "react-snaplist-carousel": "^3.2.2",
     "react-spring": "^8.0.27",
+    "react-tracking": "^7.3.0",
     "release-it": "^13.5.8",
+    "styled-bootstrap-grid": "^3.0.5",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
     "tsc-alias": "^1.1.5",
     "typescript": "^3.8.3",
     "watch": "^1.0.2"
   },
   "peerDependencies": {
+    "@apollo/client": "*",
+    "luxon": "*",
+    "next": "*",
     "react": "*",
-    "react-native": "*"
+    "react-content-loader": "*",
+    "react-native": "*",
+    "react-native-animatable": "*",
+    "react-navigation": "*",
+    "react-native-fast-image": "*",
+    "react-snaplist-carousel": "*",
+    "react-tracking": "*",
+    "react-native-scroll-bottom-sheet": "*",
+    "styled-bootstrap-grid": "*",
+    "styled-system": "*"
   },
   "jest": {
     "preset": "react-native",
@@ -168,6 +190,6 @@
     ]
   },
   "dependencies": {
-    "luxon": "^1.25.0"
+    "dripsy": "^1.4.6"
   }
 }

src/components/Account/AuthorizedCTA/AuthorizedCTA.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Box, Sans, Flex, Spacer } from "@/elements"
 import type { DateTime } from "luxon"
 import { Duration } from "luxon"
-import { Countdown, ButtonBar } from "@/components" //
+import { Countdown, ButtonBar } from "@/components"
 
 export const AuthorizedCTA: React.FC<{
   authorizedAt: DateTime

src/components/CarouselPageDots/CarouselPageDots.native.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@/elements/Box"
+import { Flex } from "@/elements/Flex"
+import { color } from "@/helpers"
+import React from "react"
+import styled from "styled-components/native"
+
+interface Props {
+  slideCount: number
+  currentSlide: number
+}
+
+export const CarouselPageDots: React.FC<Props> = ({
+  slideCount,
+  currentSlide,
+}) => {
+  return (
+    <Flex flexDirection="row" flexWrap="nowrap" alignItems="flex-start">
+      {[...Array(slideCount)]?.map((_image, index) => {
+        return <Pager active={currentSlide === index} ml={0.5} key={index} />
+      })}
+    </Flex>
+  )
+}
+
+const Pager = styled(Box)<{ active: boolean }>`
+  height: 8px;
+  border-width: 1;
+  border-color: ${color("black100")};
+  width: 8px;
+  background-color: ${(p) =>
+    p.active ? color("black100") : "rgba(0, 0, 0, 0)"};
+`

src/components/CarouselPageDots/CarouselPageDots.tsx

@@ -0,0 +1,32 @@
+import { Box } from "@/elements/Box"
+import { Flex } from "@/elements/Flex"
+import { color } from "@/helpers"
+import React from "react"
+import styled from "styled-components"
+
+interface Props {
+  slideCount: number
+  currentSlide: number
+}
+
+export const CarouselPageDots: React.FC<Props> = ({
+  slideCount,
+  currentSlide,
+}) => {
+  return (
+    <Flex flexDirection="row" flexWrap="nowrap" alignItems="flex-start">
+      {[...Array(slideCount)]?.map((_image, index) => {
+        return <Pager active={currentSlide === index} ml={0.5} key={index} />
+      })}
+    </Flex>
+  )
+}
+
+const Pager = styled(Box)<{ active: boolean }>`
+  height: 8px;
+  border-width: 1;
+  border-color: ${color("black100")};
+  width: 8px;
+  background-color: ${(p) =>
+    p.active ? color("black100") : "rgba(0, 0, 0, 0)"};
+`

src/components/CarouselPageDots/index.tsx

@@ -0,0 +1 @@
+export { CarouselPageDots } from "./CarouselPageDots"

src/components/CollectionBottomSheet/CollectionBottomSheet.native.tsx

@@ -0,0 +1,214 @@
+import React, { useMemo, useRef, useState } from "react"
+import { Box, Flex, Sans, Spacer } from "@/elements"
+import { color, space } from "@/helpers"
+import { Dimensions, FlatList, Linking, TouchableOpacity } from "react-native"
+import { useSafeAreaInsets } from "react-native-safe-area-context"
+import ScrollBottomSheet from "react-native-scroll-bottom-sheet"
+import { CarouselPageDots } from "@/components/CarouselPageDots"
+import { Handle } from "@/components/Handle"
+import { ReadMore } from "@/components/ReadMore"
+import { ProductGridItem } from "@/components/ProductGridItem/ProductGridItem"
+import { SNAP_PADDING } from "@/views/Collection/Collection"
+import type { PopUpData } from "@/types"
+
+const dimensions = Dimensions.get("window")
+
+interface CollectionBottomSheetProps {
+  currentImage: number
+  showPopUp: (data: PopUpData) => any
+  hidePopUp: () => void
+  authState: any
+  images: any[]
+  products: any[]
+  description: string
+  title: string
+  onEndReached: () => void
+  metaData?: []
+}
+
+const MetaDataCarousel = ({ data }) => {
+  return (
+    <FlatList
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      data={data}
+      keyExtractor={(item, index) => item?.title + index}
+      renderItem={({ item, index }) => (
+        <Flex flexDirection="row" flexWrap="nowrap">
+          {index !== 0 && (
+            <Box
+              style={{
+                height: "100%",
+                width: 1,
+                backgroundColor: color("black10"),
+              }}
+            />
+          )}
+          {item?.title === "Website" ? (
+            <TouchableOpacity
+              onPress={() => {
+                Linking.openURL(item?.text)
+              }}
+            >
+              <Box ml={index === 0 ? 0 : 3} mr={3}>
+                <Sans size="4" color="black50">
+                  {item?.title}
+                </Sans>
+                <Sans size="4">{item?.text}</Sans>
+              </Box>
+            </TouchableOpacity>
+          ) : (
+            <Box ml={index === 0 ? 0 : 3} mr={3}>
+              <Sans size="4" color="black50">
+                {item?.title}
+              </Sans>
+              <Sans size="4">{item?.text}</Sans>
+            </Box>
+          )}
+        </Flex>
+      )}
+    />
+  )
+}
+
+export const CollectionBottomSheet: React.FC<CollectionBottomSheetProps> = ({
+  images,
+  title,
+  description,
+  currentImage,
+  showPopUp,
+  hidePopUp,
+  authState,
+  products,
+  onEndReached,
+  metaData,
+}) => {
+  const [readMoreExpanded, setReadMoreExpanded] = useState(false)
+  const [flatListHeight, setFlatListHeight] = useState(0)
+  const insets = useSafeAreaInsets()
+  const bottomSheetRef: React.MutableRefObject<
+    ScrollBottomSheet<string>
+  > = useRef(null)
+
+  const imageContentHeight = dimensions.width
+
+  const content = useMemo(() => {
+    const numColumns = 2
+    const topSnapPoint = 0
+    const secondSnapPoint = imageContentHeight - insets.top - SNAP_PADDING
+    const hasImages = images?.length > 0
+    const snapPoints = hasImages
+      ? [topSnapPoint, secondSnapPoint]
+      : [topSnapPoint]
+    const initialSnapPoint = hasImages ? 1 : 0
+
+    return (
+      <ScrollBottomSheet<string>
+        topInset={SNAP_PADDING}
+        componentType="FlatList"
+        enableOverScroll
+        ListHeaderComponent={() => (
+          <Box px={2}>
+            <Spacer mb={1} />
+            <Flex
+              flexDirection="row"
+              alignItems="flex-start"
+              flexWrap="nowrap"
+              justifyContent={hasImages ? "space-between" : "flex-start"}
+            >
+              <Sans size="7" style={{ textDecorationLine: "underline" }}>
+                {title}
+              </Sans>
+              {hasImages && (
+                <Box pt={0.5}>
+                  <CarouselPageDots
+                    slideCount={images?.length}
+                    currentSlide={currentImage - 1}
+                  />
+                </Box>
+              )}
+            </Flex>
+            {!!description && (
+              <>
+                <Spacer mb={3} />
+                <Sans size="4">About</Sans>
+                <Spacer mb={0.5} />
+                <ReadMore
+                  readMoreExpanded={readMoreExpanded}
+                  setReadMoreExpanded={setReadMoreExpanded}
+                  content={description}
+                  maxChars={100}
+                />
+              </>
+            )}
+            {metaData?.length > 0 && (
+              <Box mt={3}>
+                <MetaDataCarousel data={metaData} />
+              </Box>
+            )}
+            <Spacer mb={3} />
+          </Box>
+        )}
+        ListFooterComponent={() => <Spacer mb={3} />}
+        containerStyle={{
+          backgroundColor: "white",
+          borderRadius: 20,
+          marginTop: insets.top + SNAP_PADDING,
+        }}
+        snapPoints={snapPoints}
+        initialSnapIndex={initialSnapPoint}
+        renderHandle={() => (
+          <Handle
+            style={{ marginTop: space(2), marginBottom: space(1) }}
+            backgroundColor="black10"
+          />
+        )}
+        keyExtractor={(item: any, index) => item?.node?.id + index}
+        data={products}
+        numColumns={numColumns}
+        onEndReachedThreshold={0.7}
+        onEndReached={onEndReached}
+        // @ts-ignore
+        renderItem={({ item }: { item: any }, i) => {
+          const product = item?.node
+          return (
+            <ProductGridItem
+              product={product}
+              showPopUp={showPopUp}
+              hidePopUp={hidePopUp}
+              authState={authState}
+              addLeftSpacing={i % numColumns !== 0}
+            />
+          ) as any
+        }}
+        onLayout={(e) => {
+          if (!flatListHeight) {
+            setFlatListHeight(e.nativeEvent.layout.height)
+          }
+        }}
+        ref={bottomSheetRef}
+        animationConfig={{
+          duration: 200,
+        }}
+      />
+    )
+  }, [
+    imageContentHeight,
+    currentImage,
+    insets,
+    onEndReached,
+    images,
+    description,
+    products,
+    hidePopUp,
+    showPopUp,
+    authState,
+    title,
+    flatListHeight,
+    readMoreExpanded,
+    setReadMoreExpanded,
+    metaData,
+  ])
+
+  return <>{content}</>
+}

src/components/CollectionBottomSheet/CollectionBottomSheet.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import type { PopUpData } from "@/types"
+
+interface CollectionBottomSheetProps {
+  currentImage: number
+  showPopUp: (data: PopUpData) => any
+  hidePopUp: () => void
+  authState: any
+  images: any[]
+  products: any[]
+  description: string
+  title: string
+  onEndReached: () => void
+  metaData?: []
+}
+
+export const CollectionBottomSheet: React.FC<CollectionBottomSheetProps> = () => {
+  return <></>
+}

src/components/CollectionBottomSheet/index.tsx

@@ -0,0 +1 @@
+export { CollectionBottomSheet } from "./CollectionBottomSheet"