@hero-design/rn 7.7.0 → 7.9.0

package/playground/src/Switch.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-
-import { Switch, Typography, useTheme } from '@hero-design/rn';
-
-type StateIndex = 'switchOne' | 'switchTwo' | 'switchThree' | 'switchFour';
-
-type SwitchStates = {
-  switchOne: boolean;
-  switchTwo: boolean;
-  switchThree: boolean;
-  switchFour: boolean;
-};
-
-const SwitchPlayground = () => {
-  const theme = useTheme();
-
-  const [isChecked, setIsChecked] = React.useState<SwitchStates>({
-    switchOne: true,
-    switchTwo: false,
-    switchThree: true,
-    switchFour: false,
-  });
-
-  const toggleState = React.useCallback(
-    (switchId: StateIndex) =>
-      setIsChecked({
-        ...isChecked,
-        [switchId]: !isChecked[switchId],
-      }),
-    [isChecked]
-  );
-
-  return (
-    <View
-      style={{
-        margin: theme.space.medium,
-      }}
-    >
-      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
-        Medium size
-      </Typography.Text>
-      <Switch
-        checked={isChecked.switchOne}
-        onPress={() => toggleState('switchOne')}
-      />
-      <Switch
-        style={{ marginTop: theme.space.small }}
-        checked={isChecked.switchTwo}
-        onPress={() => toggleState('switchTwo')}
-      />
-      <Switch checked disabled style={{ marginTop: theme.space.small }} />
-      <Switch disabled style={{ marginTop: theme.space.small }} />
-
-      <Typography.Text style={{ marginVertical: theme.space.xsmall }}>
-        Small size
-      </Typography.Text>
-      <Switch
-        size="small"
-        checked={isChecked.switchThree}
-        onPress={() => toggleState('switchThree')}
-      />
-      <Switch
-        style={{ marginTop: theme.space.small }}
-        size="small"
-        checked={isChecked.switchFour}
-        onPress={() => toggleState('switchFour')}
-      />
-      <Switch
-        checked
-        disabled
-        style={{ marginTop: theme.space.small }}
-        size="small"
-      />
-      <Switch disabled style={{ marginTop: theme.space.small }} size="small" />
-    </View>
-  );
-};
-
-export default SwitchPlayground;

package/playground/src/Tabs.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import {
-  Tabs,
-  Typography,
-  TabType,
-  Icon,
-  useTheme,
-  IconName,
-} from '@hero-design/rn';
-
-const CustomScreen = ({ title }: { title: string }) => (
-  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-    <Typography.Text>{title}</Typography.Text>
-  </View>
-);
-
-const CustomItem = ({
-  color,
-  icon,
-  title,
-}: {
-  color: string;
-  icon: IconName;
-  title: string;
-}) => {
-  const theme = useTheme();
-
-  return (
-    <View style={{ display: 'flex', flexDirection: 'row' }}>
-      <Icon
-        icon={icon}
-        size="small"
-        style={{ color, marginEnd: theme.space.small }}
-      />
-      <Typography.Text
-        fontWeight="semi-bold"
-        numberOfLines={1}
-        style={{ color }}
-      >
-        {title}
-      </Typography.Text>
-    </View>
-  );
-};
-
-const workTabs: TabType[] = [
-  {
-    key: 'activity',
-    activeItem: 'Activity',
-    component: <CustomScreen title="Activity" />,
-    showBadge: true,
-  },
-  {
-    key: 'news',
-    activeItem: `What's new`,
-    component: <CustomScreen title="News" />,
-  },
-];
-
-const WorkScreen = () => {
-  const [selectedTabKey, setSelectedTabKey] = React.useState('activity');
-
-  return (
-    <Tabs
-      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
-      selectedTabKey={selectedTabKey}
-      tabs={workTabs}
-    />
-  );
-};
-
-const tabs: TabType[] = [
-  {
-    key: 'work',
-    activeItem: ({ color }) => (
-      <CustomItem color={color} icon="home-outlined" title="Home" />
-    ),
-    inactiveItem: 'home-outlined',
-    component: <WorkScreen />,
-  },
-  {
-    key: 'personal',
-    activeItem: ({ color }) => (
-      <CustomItem color={color} icon="bell-outlined" title="Notifications" />
-    ),
-    inactiveItem: 'bell-outlined',
-    component: <CustomScreen title="Notifications Screen" />,
-    showBadge: true,
-  },
-  {
-    key: 'speaker',
-    activeItem: ({ color }) => (
-      <CustomItem color={color} icon="speaker-outlined" title="Shoutouts" />
-    ),
-    inactiveItem: 'speaker-outlined',
-    component: <CustomScreen title="Shoutouts Screen" />,
-  },
-  {
-    key: 'payslips',
-    activeItem: 'Payslips',
-    component: <CustomScreen title="Payslips Screen" />,
-  },
-  {
-    key: 'leave',
-    activeItem: 'Leave',
-    component: <CustomScreen title="Leave Screen" />,
-    showBadge: true,
-  },
-  {
-    key: 'rosters',
-    activeItem: 'Rosters',
-    component: <CustomScreen title="Rosters Screen" />,
-  },
-  {
-    key: 'timesheets',
-    activeItem: 'Timesheets',
-    component: <CustomScreen title="Timesheets Screen" />,
-  },
-];
-
-const TabsPlayground = () => {
-  const [selectedTabKey, setSelectedTabKey] = React.useState('work');
-
-  return (
-    <Tabs.Scroll
-      onTabPress={newTabKey => setSelectedTabKey(newTabKey)}
-      selectedTabKey={selectedTabKey}
-      tabs={tabs}
-      lazy
-      lazyPreloadDistance={3}
-    />
-  );
-};
-
-export default TabsPlayground;

package/playground/src/Tag.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Tag, useTheme } from '@hero-design/rn';
-
-const TagPlayground = () => {
-  const theme = useTheme();
-
-  return (
-    <View style={{ margin: theme.space.medium }}>
-      <View
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          marginBottom: theme.space.small,
-        }}
-      >
-        <Tag
-          content="APPROVED"
-          intent="success"
-          style={{ marginEnd: theme.space.small }}
-        />
-        <Tag
-          content="PENDING"
-          intent="warning"
-          style={{ marginEnd: theme.space.small }}
-        />
-      </View>
-      <View
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}
-      >
-        <Tag
-          content="DECLINED"
-          intent="danger"
-          style={{ marginEnd: theme.space.small }}
-        />
-        <Tag content="SUBMITTED" style={{ marginEnd: theme.space.small }} />
-      </View>
-    </View>
-  );
-};
-
-export default TagPlayground;

package/playground/src/TextInput.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { TextInput, useTheme } from '@hero-design/rn';
-
-const TextInputPlayground = () => {
-  const theme = useTheme();
-  return (
-    <View style={{ padding: theme.space.medium }}>
-      <TextInput label="Amount (AUD)" prefix="dollar-sign" />
-    </View>
-  );
-};
-
-export default TextInputPlayground;

package/playground/src/Toast.tsx

@@ -1,114 +0,0 @@
-import React, { useState } from 'react';
-import { View, Button } from 'react-native';
-import { Toast, Typography, useTheme } from '@hero-design/rn';
-
-type ToastConfig = {
-  displayType: 'single' | 'stack';
-  position: 'top' | 'bottom';
-};
-
-const getRandomIntent = () => {
-  const intents = ['info', 'success', 'warning', 'error'] as const;
-  return intents[Math.floor(Math.random() * 4)];
-};
-
-const ToastDemo = ({
-  config,
-  updateConfig,
-}: {
-  config: ToastConfig;
-  updateConfig: (conf: ToastConfig) => void;
-}) => {
-  const theme = useTheme();
-  const [permaToastIds, setPermaToastIds] = useState<string[]>([]);
-  const toast = Toast.useToast();
-  return (
-    <View
-      style={{
-        flex: 1,
-        padding: theme.space.medium,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <Button
-        title="Add Random Toast"
-        onPress={() =>
-          toast.show({
-            content: Math.random().toString(),
-            intent: getRandomIntent(),
-            variant: 'round',
-            actionLabel: 'ACTION',
-            onAction: () => alert('Clicked'),
-          })
-        }
-      />
-      <Button
-        title="Add Perma Toast"
-        onPress={() => {
-          const id = toast.show({
-            content: `Perma Toast: ${Math.random().toString()}`,
-            intent: getRandomIntent(),
-            variant: 'round',
-            actionLabel: 'UNDO',
-            autoDismiss: false,
-          });
-          setPermaToastIds([id, ...permaToastIds]);
-        }}
-      />
-      <Button
-        title="Hide Oldest Perma Toast"
-        onPress={() => {
-          const id = permaToastIds[permaToastIds.length - 1];
-          toast.hide(id);
-          setPermaToastIds(permaToastIds.slice(0, -1));
-        }}
-      />
-      <Button
-        title="Clear all"
-        onPress={() => {
-          toast.clearAll();
-          setPermaToastIds([]);
-        }}
-      />
-      <View style={{ alignItems: 'center', marginTop: theme.space.large }}>
-        <Typography.Text fontSize="large">
-          Tap to change settings
-        </Typography.Text>
-        <Button
-          title={`Display Type: ${config.displayType}`}
-          onPress={() =>
-            updateConfig({
-              ...config,
-              displayType: config.displayType === 'stack' ? 'single' : 'stack',
-            })
-          }
-        />
-        <Button
-          title={`Position: ${config.position}`}
-          onPress={() =>
-            updateConfig({
-              ...config,
-              position: config.position === 'top' ? 'bottom' : 'top',
-            })
-          }
-        />
-      </View>
-    </View>
-  );
-};
-
-const ToastPlayground = () => {
-  const [config, setConfig] = useState<ToastConfig>({
-    displayType: 'single',
-    position: 'top',
-  });
-
-  return (
-    <Toast.Provider displayType={config.displayType} position={config.position}>
-      <ToastDemo config={config} updateConfig={conf => setConfig(conf)} />
-    </Toast.Provider>
-  );
-};
-
-export default ToastPlayground;

package/playground/src/Typography.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Typography, useTheme } from '@hero-design/rn';
-
-const TypographyPlayground = () => {
-  const theme = useTheme();
-
-  return (
-    <View style={{ padding: theme.space.large }}>
-      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
-        This is a title
-      </Typography.Text>
-      <Typography.Text fontSize="large">This is a subtitle</Typography.Text>
-      <Typography.Text>This is a 2nd subtitle</Typography.Text>
-      <Typography.Text fontWeight="light">This is body text</Typography.Text>
-      <Typography.Text intent="subdued" fontWeight="light">
-        This is subdued text
-      </Typography.Text>
-    </View>
-  );
-};
-
-export default TypographyPlayground;

package/playground/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "declaration": true,
-    "outDir": "types",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "jsx": "react-native",
-    "strict": true,
-    "allowUnreachableCode": false,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "skipLibCheck": true,
-    "types": ["jest"],
-    "typeRoots": ["./src"]
-  },
-  "include": ["src"],
-  "exclude": ["node_modules"],
-  "extends": "expo/tsconfig.base"
-}

package/src/components/Select/MultiSelect/Footer.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { FooterText } from './StyledMultiSelect';
-
-function Footer({ label, onPress }: { label: string; onPress: () => void }) {
-  return (
-    <TouchableOpacity onPress={onPress}>
-      <FooterText fontSize="large" fontWeight="semi-bold">
-        {label}
-      </FooterText>
-    </TouchableOpacity>
-  );
-}
-
-export default Footer;