docs: Added demo screens for Badge, Collapse, Fade, Progress, Scale F…

…ade, Skeleton, Slide, Slide Fade, and Spinner
agrawal-rohit · Dec 16, 2023 · ffe53ef · ffe53ef
1 parent 5437c64
commit ffe53ef
Show file tree

Hide file tree

Showing 24 changed files with 739 additions and 374 deletions.
diff --git a/App.tsx b/App.tsx
diff --git a/demo/components/badge-demo.tsx b/demo/components/badge-demo.tsx
@@ -0,0 +1,169 @@
+import {
+  Text,
+  Stack,
+  HStack,
+  VStack,
+  Icon,
+  Badge,
+  IconProps,
+  withBadge,
+  AvatarProps,
+  Avatar,
+  Box,
+} from "../../src";
+import DemoSection from "./demo-section";
+
+const BadgedIcon = withBadge<IconProps>(1, {
+  size: "s",
+  placement: "topRight",
+  colorScheme: "danger",
+})(Icon);
+
+const BadgedIconTwo = withBadge<IconProps>(
+  <Icon iconFamily="Ionicons" iconName="pencil" size="xs" color="white" />,
+  {
+    size: "s",
+    placement: "bottomRight",
+  }
+)(Icon);
+
+const OnlineAvatar = withBadge<AvatarProps>(undefined, {
+  placement: "bottomRight",
+  backgroundColor: "success.500",
+  size: "s",
+  minW: 15,
+  h: 15,
+  offset: -1,
+})(Avatar);
+
+const BadgeDemo = () => {
+  return (
+    <Stack spacing="6">
+      <DemoSection label="Badge Sizes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              xs
+            </Text>
+            <Badge size="xs">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              s
+            </Text>
+            <Badge size="s">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              m
+            </Text>
+            <Badge size="m">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              l
+            </Text>
+            <Badge size="l">Go</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Badge Sizes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Rounded
+            </Text>
+            <Badge variant="rounded">Go</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Square
+            </Text>
+            <Badge variant="square">Go</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Color Schemes">
+        <HStack w="100%" justifyContent="space-between">
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Primary
+            </Text>
+            <Badge colorScheme="primary">Start</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Warning
+            </Text>
+            <Badge colorScheme="warning">Wait</Badge>
+          </Stack>
+
+          <Stack alignItems="center" spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Danger
+            </Text>
+            <Badge colorScheme="danger">Stop</Badge>
+          </Stack>
+        </HStack>
+      </DemoSection>
+
+      <DemoSection label="Badge Content">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Empty
+            </Text>
+            <Badge />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Text/Number
+            </Text>
+            <Badge>123</Badge>
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Custom Component
+            </Text>
+            <Badge>
+              <Icon
+                size="xs"
+                iconName="edit"
+                iconFamily="Entypo"
+                color="neutral.50"
+              />
+            </Badge>
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Attached Badges">
+        <Box
+          w="100%"
+          flexDirection="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <BadgedIcon size="l" iconFamily="FontAwesome" iconName="bell" />
+          <OnlineAvatar
+            size="s"
+            isCached={false}
+            src="https://pbs.twimg.com/profile_images/1419369145058041856/eshLFaDy_400x400.jpg"
+          />
+          <BadgedIconTwo size="l" iconFamily="FontAwesome" iconName="inbox" />
+        </Box>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default BadgeDemo;
diff --git a/demo/components/collapse-demo.tsx b/demo/components/collapse-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, Collapse } from "../../src";
+
+const CollapseDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <Collapse show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </Collapse>
+    </VStack>
+  );
+};
+
+export default CollapseDemo;
diff --git a/demo/components/fade-demo.tsx b/demo/components/fade-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, Fade } from "../../src";
+
+const FadeDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <Fade show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </Fade>
+    </VStack>
+  );
+};
+
+export default FadeDemo;
diff --git a/demo/components/progress-demo.tsx b/demo/components/progress-demo.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from "react";
+import { Text, Stack, VStack, Progress } from "../../src";
+import DemoSection from "./demo-section";
+
+const ProgressDemo = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const progressTimer = setInterval(() => {
+      if (progress < 100) setProgress(progress + 10);
+    }, 500);
+    return () => clearInterval(progressTimer);
+  }, [progress]);
+
+  return (
+    <Stack spacing="6">
+      <DemoSection label="Progress Sizes">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              xs
+            </Text>
+            <Progress size="xs" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              s
+            </Text>
+            <Progress size="s" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              m
+            </Text>
+            <Progress size="m" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              l
+            </Text>
+            <Progress size="l" value={progress} />
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Progress Variants">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Filled
+            </Text>
+            <Progress variant="filled" value={progress} />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Outline
+            </Text>
+            <Progress variant="outline" value={progress} />
+          </Stack>
+        </VStack>
+      </DemoSection>
+
+      <DemoSection label="Color Schemes">
+        <VStack spacing="4">
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Primary
+            </Text>
+            <Progress value={progress} colorScheme="primary" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Warning
+            </Text>
+            <Progress value={progress} colorScheme="warning" />
+          </Stack>
+
+          <Stack spacing="3.5">
+            <Text variant="p4" textDecorationLine="underline">
+              Danger
+            </Text>
+            <Progress value={progress} colorScheme="danger" />
+          </Stack>
+        </VStack>
+      </DemoSection>
+    </Stack>
+  );
+};
+
+export default ProgressDemo;
diff --git a/demo/components/scale-fade-demo.tsx b/demo/components/scale-fade-demo.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { VStack, Box, Button, Text, ScaleFade } from "../../src";
+
+const ScaleFadeDemo = () => {
+  const [show, setShow] = useState(true);
+
+  return (
+    <VStack spacing="6">
+      <Button
+        size="s"
+        variant="outline"
+        alignSelf="flex-end"
+        onPress={() => setShow(!show)}
+      >
+        {show ? "Hide" : "Show"}
+      </Button>
+
+      <ScaleFade show={show}>
+        <Box mb="4" p="4" bgColor="primary.500" borderRadius="m">
+          <Text variant="p3" color="white">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla purus
+            mi, aliquet sed augue ac, ullamcorper vulputate nisi.
+          </Text>
+        </Box>
+      </ScaleFade>
+    </VStack>
+  );
+};
+
+export default ScaleFadeDemo;