@shoutem/ui 5.4.0 → 5.5.0

package/examples/components/Rows.js

@@ -1,200 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
-import { Image } from '../../components/Image';
-import { Row } from '../../components/Row';
-import { Caption, Subtitle, Text } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Rows() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Small list item">
-        <Row>
-          <Text numberOfLines={1}>
-            Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub
-            roof party.
-          </Text>
-        </Row>
-      </Stage>
-
-      <Stage title="Small list item + Avatar thumbnail">
-        <Row styleName="small">
-          <Image
-            styleName="small-avatar"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
-            }}
-          />
-          <Text>Add comment</Text>
-        </Row>
-      </Stage>
-
-      <Stage title="Small list item + Icon">
-        <Row styleName="small">
-          <Icon name="add-to-favorites-off" />
-          <Text>Add to favorites</Text>
-        </Row>
-      </Stage>
-
-      <Stage title="Small list item + Icon + Right Arrow">
-        <Row styleName="small">
-          <Icon name="web" />
-          <Text>About</Text>
-          <Icon styleName="disclosure" name="right-arrow" />
-        </Row>
-      </Stage>
-
-      <Stage title="Small list item + Icon + Description">
-        <Row styleName="small">
-          <Icon name="laptop" />
-          <View styleName="vertical">
-            <Subtitle>Bridges Rock Gym</Subtitle>
-            <Text numberOfLines={1}>
-              www.example.com/deal/link/that-is-really-long
-            </Text>
-          </View>
-          <Icon styleName="disclosure" name="right-arrow" />
-        </Row>
-      </Stage>
-
-      <Stage title="Small list item + Avatar + Description + Caption">
-        <Row>
-          <Image
-            styleName="small-avatar top"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-            }}
-          />
-          <View styleName="vertical">
-            <View styleName="horizontal space-between">
-              <Subtitle styleName="">Dustin Malone</Subtitle>
-              <Caption>20 minutes ago</Caption>
-            </View>
-            <Text styleName="multiline">
-              Banjo tote bag bicycle rights, High Life sartorial cray craft beer
-              whatever street art fap. Hashtag typewriter banh mi, squid
-              keffiyeh High.
-            </Text>
-          </View>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item">
-        <Row>
-          <Image
-            styleName="small rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png',
-            }}
-          />
-          <Subtitle styleName="top">
-            Portland ugh fashion axe Helvetica, YOLO Echo Park Austin gastropub
-            roof party.
-          </Subtitle>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item + Description">
-        <Row>
-          <Image
-            styleName="small rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-6.png',
-            }}
-          />
-          <View styleName="vertical stretch space-between">
-            <Subtitle>
-              Fact Check: Wisconsin Music, Film & Photography Debate
-            </Subtitle>
-            <Caption>20 hours ago</Caption>
-          </View>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item + Description + Icon">
-        <Row>
-          <Image
-            styleName="small rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-            }}
-          />
-          <View styleName="vertical stretch space-between">
-            <Subtitle>Wilco Cover David Bowie&#39;s "Space Oddity"</Subtitle>
-            <Caption>June 21 · 20:00</Caption>
-          </View>
-          <Button styleName="right-icon">
-            <Icon name="add-event" />
-          </Button>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item + Description + Icon + Label">
-        <Row>
-          <Image
-            styleName="small rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-            }}
-          />
-          <View styleName="vertical stretch space-between">
-            <Subtitle>Family Safari Vacation To The Home Of The Gods</Subtitle>
-            <View styleName="horizontal">
-              <Subtitle styleName="md-gutter-right">$120.00</Subtitle>
-              <Caption styleName="line-through">$150.00</Caption>
-            </View>
-          </View>
-          <Button styleName="right-icon">
-            <Icon name="add-to-cart" />
-          </Button>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item + Notification dot">
-        <Row>
-          <View styleName="notification-dot" />
-          <Image
-            styleName="small rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
-            }}
-          />
-          <View styleName="vertical stretch space-between">
-            <Subtitle>
-              Fact Check: Wisconsin Music, Film & Photography Debate
-            </Subtitle>
-            <Caption>20 hours ago</Caption>
-          </View>
-        </Row>
-      </Stage>
-
-      <Stage title="Medium list item + Description + Label">
-        <Row>
-          <Image
-            styleName="medium rounded-corners"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-1.png',
-            }}
-          />
-          <View styleName="vertical stretch space-between">
-            <Subtitle>Take A Romantic Break In A Boutique Hotel</Subtitle>
-            <View styleName="horizontal space-between">
-              <Caption>3 days ago</Caption>
-              <Caption>12:16</Caption>
-            </View>
-          </View>
-        </Row>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Spinners.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Spinner } from '../../components/Spinner';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Spinners() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Spinner">
-        <Spinner />
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Stage.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import PropTypes from 'prop-types';
-
-function Stage({ title, children }) {
-  // eslint-disable-next-line no-use-before-define
-  const { container, stage, titleStyle } = styles;
-
-  return (
-    <View style={container}>
-      <Text style={titleStyle}>{title}</Text>
-      <View style={stage}>{children}</View>
-    </View>
-  );
-}
-
-Stage.propTypes = {
-  children: PropTypes.node,
-  title: PropTypes.string,
-};
-
-Stage.defaultProps = {
-  children: undefined,
-  title: undefined,
-};
-
-const styles = {
-  container: {
-    marginVertical: 24,
-    flexDirection: 'column',
-  },
-  titleStyle: {
-    fontSize: 18,
-    color: '#444f6c',
-    margin: 8,
-  },
-  stage: {
-    paddingVertical: 40,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#f5f6f7',
-  },
-};
-
-export { Stage };

package/examples/components/Tiles.js

@@ -1,324 +0,0 @@
-import React from 'react';
-import { Button } from '../../components/Button';
-import { Icon } from '../../components/Icon';
-import { Image } from '../../components/Image';
-import { ImageBackground } from '../../components/ImageBackground';
-import { Overlay } from '../../components/Overlay';
-import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
-import { Tile } from '../../components/Tile';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Tiles() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Tile">
-        <Tile styleName="small clear">
-          <Image
-            styleName="medium-square"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-12.png',
-            }}
-          />
-          <View styleName="content">
-            <Subtitle numberOfLines={2}>
-              When The Morning Dawns - DJ Silver Sample Album
-            </Subtitle>
-            <Caption>20 hours ago</Caption>
-          </View>
-        </Tile>
-      </Stage>
-
-      <Stage title="Tile + Icon">
-        <Tile styleName="small clear">
-          <ImageBackground
-            styleName="medium-square"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-2.png',
-            }}
-          >
-            <Overlay styleName="rounded-small">
-              <Icon name="play" />
-            </Overlay>
-          </ImageBackground>
-          <View styleName="content">
-            <Subtitle numberOfLines={2}>
-              When The Morning Dawns - DJ Silver Sample Album
-            </Subtitle>
-            <Caption>20 hours ago</Caption>
-          </View>
-        </Tile>
-      </Stage>
-
-      <Stage title="Large (featured) tile">
-        <ImageBackground
-          styleName="featured"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-4.png',
-          }}
-        >
-          <Tile>
-            <Title styleName="md-gutter-bottom">
-              MIKE PATTON TEAMING WITH JOHN KAADA FOR COLLAB ALBUM BACTERIA CULT
-            </Title>
-            <Caption>Sophia Jackson 21 hours ago</Caption>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Large (featured) tile + Button + Sale tag">
-        <ImageBackground
-          styleName="featured"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-          }}
-        >
-          <Tile>
-            <Overlay styleName="image-overlay">
-              <Heading>-20%</Heading>
-            </Overlay>
-            <Title styleName="md-gutter-top">
-              COOL BLACK AND WHITE STYLISH WATCHES
-            </Title>
-            <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
-            <Heading>$250.00</Heading>
-            <Button styleName="md-gutter-top">
-              <Icon name="cart" />
-              <Text>ADD TO BASKET</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Large (featured) tile + Button">
-        <ImageBackground
-          styleName="featured"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
-          }}
-        >
-          <Tile>
-            <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
-            <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
-            <Heading>99.99</Heading>
-            <Button styleName="md-gutter-top">
-              <Text>CLAIM COUPON</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Large list item">
-        <Tile>
-          <Image
-            styleName="large-banner"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-5.png',
-            }}
-          />
-          <View styleName="content">
-            <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
-            <View styleName="horizontal space-between">
-              <Caption>1 hour ago</Caption>
-              <Caption>15:34</Caption>
-            </View>
-          </View>
-        </Tile>
-      </Stage>
-
-      <Stage title="Large list item + Icon + Timestamp">
-        <Tile>
-          <ImageBackground
-            styleName="large-banner"
-            source={{
-              uri:
-                'https://shoutem.github.io/img/ui-toolkit/examples/image-7.png',
-            }}
-          >
-            <Overlay styleName="rounded-small">
-              <Icon name="play" />
-            </Overlay>
-          </ImageBackground>
-          <View styleName="content">
-            <Title>MAUI BY AIR THE BEST WAY AROUND THE ISLAND</Title>
-            <View styleName="horizontal space-between">
-              <Caption>1 hour ago</Caption>
-              <Caption>15:34</Caption>
-            </View>
-          </View>
-        </Tile>
-      </Stage>
-
-      <Stage title="Large list item + Price tag">
-        <ImageBackground
-          styleName="large-banner"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        >
-          <Tile>
-            <Title styleName="md-gutter-bottom">
-              SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
-            </Title>
-            <Overlay>
-              <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
-            </Overlay>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Large list item + Action icon">
-        <ImageBackground
-          styleName="large-banner"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        >
-          <Tile>
-            <View virtual styleName="actions">
-              <Button styleName="tight clear">
-                <Icon name="add-to-favorites-off" />
-              </Button>
-            </View>
-            <Title>HOW TO MAINTAIN YOUR MENTAL HEALTH IN 2016</Title>
-            <Caption>6557 Americo Hills Apt. 118</Caption>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail square + Price tag">
-        <ImageBackground
-          styleName="large-square"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        >
-          <Tile>
-            <Title styleName="md-gutter-bottom">
-              SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
-            </Title>
-            <Overlay>
-              <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
-            </Overlay>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail square + Button">
-        <ImageBackground
-          styleName="large-square"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
-          }}
-        >
-          <Tile>
-            <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
-            <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
-            <Heading>99.99</Heading>
-            <Button styleName="md-gutter-top">
-              <Text>CLAIM COUPON</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail square + Button + Sale tag">
-        <ImageBackground
-          styleName="large-square"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-          }}
-        >
-          <Tile>
-            <Overlay styleName="image-overlay">
-              <Heading>-20%</Heading>
-            </Overlay>
-            <Title styleName="md-gutter-top">
-              COOL BLACK AND WHITE STYLISH WATCHES
-            </Title>
-            <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
-            <Heading>$250.00</Heading>
-            <Button styleName="md-gutter-top">
-              <Icon name="cart" />
-              <Text>ADD TO BASKET</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail large + Price tag">
-        <ImageBackground
-          styleName="large-portrait"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-3.png',
-          }}
-        >
-          <Tile>
-            <Title styleName="md-gutter-bottom">
-              SMOKED SALMON, CLASSIC CONDIMENTS, BRIOCHE
-            </Title>
-            <Overlay>
-              <Subtitle styleName="sm-gutter-horizontal">$18.30</Subtitle>
-            </Overlay>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail large + Button">
-        <ImageBackground
-          styleName="large-portrait"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-9.png',
-          }}
-        >
-          <Tile>
-            <Title>MIKE PATTON TEAMING WITH JOHN KAADA</Title>
-            <Subtitle styleName="line-through sm-gutter-top">150.00</Subtitle>
-            <Heading>99.99</Heading>
-            <Button styleName="md-gutter-top">
-              <Text>CLAIM COUPON</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-
-      <Stage title="Detail large + Button + Sale tag">
-        <ImageBackground
-          styleName="large-portrait"
-          source={{
-            uri:
-              'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png',
-          }}
-        >
-          <Tile>
-            <Overlay styleName="image-overlay">
-              <Heading>-20%</Heading>
-            </Overlay>
-            <Title styleName="md-gutter-top">
-              COOL BLACK AND WHITE STYLISH WATCHES
-            </Title>
-            <Subtitle styleName="line-through sm-gutter-top">$280.00</Subtitle>
-            <Heading>$250.00</Heading>
-            <Button styleName="md-gutter-top">
-              <Icon name="cart" />
-              <Text>ADD TO BASKET</Text>
-            </Button>
-          </Tile>
-        </ImageBackground>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Typography.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Caption, Heading, Subtitle, Text, Title } from '../../components/Text';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Typography() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="Heading">
-        <Heading>Mobile App Creator</Heading>
-      </Stage>
-
-      <Stage title="Title">
-        <Title>MOBILE APP CREATOR</Title>
-      </Stage>
-
-      <Stage title="Subtitle">
-        <Subtitle>Mobile App Creator</Subtitle>
-      </Stage>
-
-      <Stage title="Text">
-        <Text>Mobile App Creator</Text>
-      </Stage>
-
-      <Stage title="Caption">
-        <Caption>Mobile App Creator</Caption>
-      </Stage>
-    </View>
-  );
-}

package/examples/components/Videos.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Video } from '../../components/Video';
-import { View } from '../../components/View';
-import { Stage } from './Stage';
-
-export function Videos() {
-  return (
-    <View styleName="vertical collapsed">
-      <Stage title="YouTube video">
-        <Video
-          source={{ uri: 'https://www.youtube.com/embed/2zuisMXzyaI' }}
-          width={320}
-          height={180}
-        />
-      </Stage>
-      <Stage title="Vimeo video">
-        <Video
-          source={{ uri: 'https://vimeo.com/182267614' }}
-          width={320}
-          height={180}
-        />
-      </Stage>
-      <Stage title="Stream video">
-        <Video
-          source={{
-            uri:
-              'https://archive.org/download/Sintel/sintel-2048-stereo_512kb.mp4',
-          }}
-          width={320}
-          height={180}
-        />
-      </Stage>
-    </View>
-  );
-}

package/examples/components/index.js

@@ -1 +0,0 @@
-export { Examples } from './Examples';