@hero-design/rn 7.7.0 → 7.9.0

package/playground/src/Button.tsx

@@ -1,170 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-
-import { Button, Typography, useTheme } from '@hero-design/rn';
-
-const ButtonPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <ScrollView style={{ padding: theme.space.small }}>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Variants
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: theme.colors.primary,
-            paddingVertical: theme.space.large,
-            marginBottom: theme.space.medium,
-          }}
-        >
-          <Button
-            text="Basic Transparent"
-            variant="basic-transparent"
-            onPress={() => {}}
-          />
-        </View>
-        <Button
-          text="Primary (Filled)"
-          variant="filled"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Secondary (Filled)"
-          variant="filled"
-          intent="secondary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Primary (Outlined)"
-          variant="outlined"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Secondary (Outlined)"
-          variant="outlined"
-          intent="secondary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        With Icon
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <Button
-          text="Add Item"
-          variant="filled"
-          intent="primary"
-          icon="add"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Delete"
-          variant="filled"
-          intent="primary"
-          icon="trash-bin-outlined"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="More"
-          variant="outlined"
-          intent="secondary"
-          rightIcon="arrow-down"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Loading
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: theme.colors.primary,
-            paddingVertical: theme.space.large,
-            marginBottom: theme.space.medium,
-          }}
-        >
-          <Button
-            text="Basic Transparent (Loading)"
-            variant="basic-transparent"
-            onPress={() => {}}
-            loading
-          />
-        </View>
-        <Button
-          text="Filled (Loading)"
-          variant="filled"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          loading
-        />
-        <Button
-          text="Outlined (Loading)"
-          variant="outlined"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          loading
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Disabled
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <Button
-          text="Basic Transparent (Disabled)"
-          variant="basic-transparent"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-        <Button
-          text="Filled (Disabled)"
-          variant="filled"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-        <Button
-          text="Outlined (Disabled)"
-          variant="outlined"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-      </View>
-    </ScrollView>
-  );
-};
-
-export default ButtonPlayground;

package/playground/src/Card.tsx

@@ -1,342 +0,0 @@
-import React, { ComponentProps } from 'react';
-import {
-  View,
-  ViewProps,
-  StyleSheet,
-  TouchableOpacity,
-  ScrollView,
-} from 'react-native';
-import palette from '@hero-design/colors';
-import {
-  scale,
-  Card,
-  Typography,
-  Icon,
-  Divider,
-  useTheme,
-} from '@hero-design/rn';
-
-type DashboardCardProps = ViewProps & {
-  icon: ComponentProps<typeof Icon>['icon'];
-  title: string;
-  subtitle: string;
-};
-type PendingItemProps = {
-  count: number;
-  title: string;
-  onPress?: () => void;
-  wrapperTestID?: string;
-  countTestID?: string;
-};
-
-const PendingItem = ({
-  count,
-  title,
-  onPress,
-  wrapperTestID,
-  countTestID,
-}: Omit<PendingItemProps, 'isLoading'>) => {
-  const theme = useTheme();
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      style={{ flex: 1, padding: theme.space.small }}
-      testID={wrapperTestID}
-    >
-      <Typography.Text
-        fontSize="xlarge"
-        fontWeight="semi-bold"
-        style={{
-          textAlign: 'center',
-          paddingBottom: theme.space.small,
-          color: palette.redLight15,
-        }}
-        testID={countTestID}
-      >
-        {count}
-      </Typography.Text>
-      <Typography.Text
-        style={{ textAlign: 'center', color: palette.greyDark75 }}
-      >
-        {title}
-      </Typography.Text>
-    </TouchableOpacity>
-  );
-};
-
-const ApprovalCard = ({ style }: ViewProps) => {
-  const theme = useTheme();
-
-  return (
-    <Card
-      style={StyleSheet.flatten([
-        { backgroundColor: palette.greyLight90 },
-        style,
-      ])}
-    >
-      <View
-        style={{
-          backgroundColor: palette.redLight60,
-          display: 'flex',
-          flexDirection: 'row',
-          padding: theme.space.medium,
-        }}
-      >
-        <Icon
-          icon="multiple-users"
-          style={{ marginRight: theme.space.small }}
-        />
-        <Typography.Text fontWeight="semi-bold" fontSize="large">
-          Awaiting your approval
-        </Typography.Text>
-      </View>
-      <View
-        style={{ flex: 1, flexDirection: 'row', padding: theme.space.small }}
-      >
-        <PendingItem count={1} title="Timesheets" />
-        <PendingItem count={2} title="Leave Requests" />
-        <PendingItem count={7} title="Expense Claims" />
-      </View>
-    </Card>
-  );
-};
-
-const DashboardCard = ({
-  style,
-  icon,
-  title,
-  subtitle,
-}: DashboardCardProps) => {
-  const theme = useTheme();
-
-  return (
-    <Card style={StyleSheet.flatten([{ padding: theme.space.small }, style])}>
-      <View style={{ flex: 1, alignItems: 'flex-end' }}>
-        <Icon icon={icon} />
-      </View>
-      <View
-        style={{
-          flex: 1,
-          justifyContent: 'flex-end',
-          margin: theme.space.small,
-        }}
-      >
-        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-          {title}
-        </Typography.Text>
-        <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
-      </View>
-    </Card>
-  );
-};
-
-const InductionCard = (props: ViewProps) => (
-  <DashboardCard
-    icon="file-verified"
-    title="Induction Content"
-    subtitle="2 files to acknowledge"
-    {...props}
-  />
-);
-const PoliciesCard = (props: ViewProps) => (
-  <DashboardCard
-    icon="file-secured"
-    title="Policies"
-    subtitle="1 to acknowledge"
-    {...props}
-  />
-);
-
-const CertificationsCard = (props: ViewProps) => (
-  <DashboardCard
-    icon="file-certified"
-    title="Certifications"
-    subtitle="1 to update"
-    {...props}
-  />
-);
-
-const RostersCard = (props: ViewProps) => {
-  const theme = useTheme();
-  const { style, ...otherProps } = props;
-
-  return (
-    <Card
-      {...otherProps}
-      style={StyleSheet.flatten([
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          backgroundColor: palette.greyLight90,
-          padding: theme.space.small,
-        },
-        style,
-      ])}
-    >
-      <View style={{ padding: theme.space.small }}>
-        <View
-          style={{
-            padding: theme.space.small,
-            backgroundColor: theme.colors.infoLight,
-            borderRadius: theme.radii.rounded,
-          }}
-        >
-          <Icon icon="calendar-clock" />
-        </View>
-      </View>
-      <View style={{ flex: 1, marginLeft: theme.space.small }}>
-        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-          Rosters
-        </Typography.Text>
-        <Typography.Text fontSize="large">3 shifts this week</Typography.Text>
-      </View>
-      <Icon icon="arrow-right" />
-    </Card>
-  );
-};
-
-const MyLeaveCard = (props: ViewProps) => {
-  const theme = useTheme();
-  const { style, ...otherProps } = props;
-
-  return (
-    <Card
-      {...otherProps}
-      style={StyleSheet.flatten([
-        {
-          backgroundColor: palette.greyLight90,
-        },
-        style,
-      ])}
-    >
-      <View
-        style={{
-          padding: theme.space.medium,
-          justifyContent: 'space-between',
-          flexDirection: 'row',
-        }}
-      >
-        <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-          My Leave
-        </Typography.Text>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Typography.Text fontSize="large" fontWeight="semi-bold">
-            Add / view
-          </Typography.Text>
-          <Icon
-            icon="circle-add-outlined"
-            size="xsmall"
-            style={{ marginLeft: theme.space.small }}
-          />
-        </View>
-      </View>
-      <Divider />
-      <View style={{ padding: theme.space.medium }}>
-        <Typography.Text
-          fontSize="large"
-          fontWeight="semi-bold"
-          style={{ marginBottom: theme.space.small }}
-        >
-          Leave Balances
-        </Typography.Text>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Typography.Text fontSize="large">Jury Duty</Typography.Text>
-          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
-        </View>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Typography.Text fontSize="large">Annual Leave</Typography.Text>
-          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
-        </View>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Typography.Text fontSize="large">
-            Values Champion Award
-          </Typography.Text>
-          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
-        </View>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-          <Typography.Text fontSize="large">
-            Family and Domestic
-          </Typography.Text>
-          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
-        </View>
-      </View>
-    </Card>
-  );
-};
-
-const DataCard = ({ style }: ViewProps) => {
-  const theme = useTheme();
-
-  return (
-    <Card variant="data" style={style}>
-      <View style={{ padding: theme.space.medium }}>
-        <Typography.Text fontSize="small" intent="subdued">
-          Update Key Results
-        </Typography.Text>
-        <Typography.Text
-          fontSize="xlarge"
-          fontWeight="semi-bold"
-          style={{ marginTop: theme.space.small }}
-        >
-          CX Global Ready
-        </Typography.Text>
-        <Typography.Text fontSize="small">From 20% to 25%</Typography.Text>
-        <Typography.Text
-          fontSize="small"
-          intent="subdued"
-          style={{ marginTop: theme.space.small }}
-        >
-          Making progress
-        </Typography.Text>
-      </View>
-    </Card>
-  );
-};
-
-const CardPlayground = () => {
-  const theme = useTheme();
-
-  return (
-    <ScrollView contentContainerStyle={{ padding: theme.space.medium }}>
-      <View style={{ flexDirection: 'row', height: scale(216) }}>
-        <View style={{ flex: 1, marginRight: theme.space.medium }}>
-          <InductionCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.primaryLight,
-            }}
-          />
-        </View>
-        <View style={{ flex: 1 }}>
-          <PoliciesCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.infoLight,
-              marginBottom: theme.space.medium,
-            }}
-            testID="policies"
-          />
-          <CertificationsCard
-            style={{
-              flex: 1,
-              backgroundColor: theme.colors.infoLight,
-            }}
-            testID="certifications"
-          />
-        </View>
-      </View>
-      <RostersCard style={{ marginTop: theme.space.medium }} />
-      <MyLeaveCard style={{ marginTop: theme.space.medium }} />
-      <ApprovalCard style={{ marginTop: theme.space.medium }} />
-      <DataCard
-        style={{
-          marginTop: theme.space.medium,
-          backgroundColor: palette.greyLight90,
-        }}
-      />
-    </ScrollView>
-  );
-};
-
-export default CardPlayground;

package/playground/src/Checkbox.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Checkbox, Typography, useTheme } from '@hero-design/rn';
-
-type StateIndex = 'boxOne' | 'boxTwo';
-
-type CheckboxStates = {
-  boxOne: boolean;
-  boxTwo: boolean;
-};
-
-const CheckboxPlayground = () => {
-  const theme = useTheme();
-
-  const [isChecked, setIsChecked] = React.useState<CheckboxStates>({
-    boxOne: true,
-    boxTwo: false,
-  });
-
-  const toggleState = React.useCallback(
-    (checkboxId: StateIndex) =>
-      setIsChecked({
-        ...isChecked,
-        [checkboxId]: !isChecked[checkboxId],
-      }),
-    [isChecked]
-  );
-
-  return (
-    <View
-      style={{
-        margin: theme.space.medium,
-      }}
-    >
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Default usage
-      </Typography.Text>
-      <View>
-        <Checkbox
-          checked={isChecked.boxOne}
-          onPress={() => toggleState('boxOne')}
-        />
-        <Checkbox
-          style={{ marginTop: theme.space.small }}
-          checked={isChecked.boxTwo}
-          onPress={() => toggleState('boxTwo')}
-        />
-        <Checkbox style={{ marginTop: theme.space.small }} checked disabled />
-        <Checkbox style={{ marginTop: theme.space.small }} disabled />
-      </View>
-    </View>
-  );
-};
-
-export default CheckboxPlayground;

package/playground/src/Collapse.tsx

@@ -1,99 +0,0 @@
-import React, { useCallback } from 'react';
-import { Text, View } from 'react-native';
-import palette from '@hero-design/colors';
-import {
-  Avatar,
-  Typography,
-  useTheme,
-  Button,
-  Card,
-  Collapse,
-} from '@hero-design/rn';
-
-const CollapsePlayground = () => {
-  const theme = useTheme();
-  const source = { uri: 'https://i.pravatar.cc/300' };
-  const [isCollapsed, setIsCollapsed] = React.useState<boolean>(true);
-
-  const toggleContent = useCallback(() => {
-    setIsCollapsed(!isCollapsed);
-  }, [isCollapsed]);
-
-  return (
-    <View
-      style={{
-        marginVertical: theme.space.medium,
-        marginHorizontal: theme.space.medium,
-      }}
-    >
-      <Typography.Text style={{ marginBottom: theme.space.small }}>
-        Integrate as Accordion example
-      </Typography.Text>
-      <View>
-        <Card
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            backgroundColor: palette.greyLight90,
-            padding: theme.space.medium,
-            ...(isCollapsed
-              ? {}
-              : {
-                  borderBottomEndRadius: 0,
-                  borderBottomStartRadius: 0,
-                }),
-          }}
-        >
-          <View
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            <Avatar source={source} />
-            <View
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                marginLeft: theme.space.medium,
-              }}
-            >
-              <Typography.Text fontSize="large">Rob Dunn</Typography.Text>
-              <Typography.Text fontSize="small" intent="subdued">
-                3 OKRS
-              </Typography.Text>
-            </View>
-          </View>
-          <Button.Icon
-            icon={`carat-${isCollapsed ? 'left' : 'down'}`}
-            intent="text"
-            size="xsmall"
-            onPress={toggleContent}
-            style={{ padding: theme.space.small }}
-          />
-        </Card>
-        <Collapse
-          open={!isCollapsed}
-          style={{
-            backgroundColor: palette.greyLight90,
-          }}
-        >
-          <View
-            style={{
-              padding: theme.space.large,
-              borderTopWidth: theme.space.xxsmall,
-              borderTopColor: palette.greyLight85,
-            }}
-          >
-            <Text>Hidden Content</Text>
-          </View>
-        </Collapse>
-      </View>
-    </View>
-  );
-};
-
-export default CollapsePlayground;