@reactberry/system 2.0.0-beta

package/src/blocks/FamilyDrawer/views/KeyView.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Text } from "@/design-system/elements";
+import {
+  IconBan,
+  IconCCheck,
+  IconLock,
+  IconOWarning,
+  IconUserFocus,
+} from "@/design-system/icons";
+import { FamilyDrawerView } from "../index";
+
+interface KeyViewProps {
+  setView: (view: FamilyDrawerView) => void;
+}
+
+export const KeyView: React.FC<KeyViewProps> = ({ setView }) => {
+  return (
+    <Box>
+      <ViewHeader
+        icon={<Box as={IconLock} size="2.5rem" color="secondary" />}
+        title="Private Key"
+        description="Your Private Key is the key used to back up your wallet. Keep it secret and secure at all times."
+      />
+
+      <Box
+        mt="medium"
+        pt="medium"
+        borderTop="1px solid"
+        borderColor="base"
+      >
+        <Box display="flex" flexDirection="column" gap="medium">
+          <SecurityItem
+            icon={<Box as={IconCCheck} size="1.25rem" />}
+            text="Keep your private key safe"
+          />
+          <SecurityItem
+            icon={<Box as={IconBan} size="1.25rem" />}
+            text="Don't share it with anyone else"
+          />
+          <SecurityItem
+            icon={<Box as={IconOWarning} size="1.25rem" />}
+            text="If you lose it, we can't recover it"
+          />
+        </Box>
+      </Box>
+
+      <Box mt="large" display="flex" gap="medium">
+        <Button
+          variant="ghost"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          skin="translucent"
+        >
+          <Text fontSize="medium" fontWeight="semibold">
+            Cancel
+          </Text>
+        </Button>
+        <Button
+          variant="primary"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          display="flex"
+          alignItems="center"
+          gap="small"
+        >
+          <Box as={IconUserFocus} size="1.25rem" />
+          <Text fontSize="medium" fontWeight="semibold">
+            Reveal
+          </Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+interface ViewHeaderProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const ViewHeader: React.FC<ViewHeaderProps> = ({ icon, title, description }) => {
+  return (
+    <Box>
+      <Box display="flex" alignItems="flex-start" justifyContent="space-between">
+        {icon}
+      </Box>
+      <Text
+        as="h2"
+        fontSize="xlarge"
+        fontWeight="semibold"
+        color="primary"
+        mt="small"
+      >
+        {title}
+      </Text>
+      <Text
+        fontSize="medium"
+        color="secondary"
+        lineHeight="relaxed"
+        mt="small"
+      >
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+interface SecurityItemProps {
+  icon: React.ReactNode;
+  text: string;
+}
+
+const SecurityItem: React.FC<SecurityItemProps> = ({ icon, text }) => {
+  return (
+    <Box display="flex" alignItems="center" gap="medium">
+      <Box color="secondary">
+        {icon}
+      </Box>
+      <Text fontSize="small" fontWeight="medium" color="secondary">
+        {text}
+      </Text>
+    </Box>
+  );
+};

package/src/blocks/FamilyDrawer/views/PhraseView.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Text } from "@/design-system/elements";
+import {
+  IconBan,
+  IconCCheck,
+  IconOWarning,
+  IconText,
+  IconUserFocus,
+} from "@/design-system/icons";
+import { FamilyDrawerView } from "../index";
+
+interface PhraseViewProps {
+  setView: (view: FamilyDrawerView) => void;
+}
+
+export const PhraseView: React.FC<PhraseViewProps> = ({ setView }) => {
+  return (
+    <Box>
+      <ViewHeader
+        icon={<Box as={IconText} size="2.5rem" color="secondary" />}
+        title="Secret Recovery Phrase"
+        description="Your Secret Recovery Phrase is the key used to back up your wallet. Keep it secret at all times."
+      />
+
+      <Box
+        mt="medium"
+        pt="medium"
+        borderTop="1px solid"
+        borderColor="base"
+      >
+        <Box display="flex" flexDirection="column" gap="medium">
+          <SecurityItem
+            icon={<Box as={IconCCheck} size="1.25rem" />}
+            text="Keep your Secret Phrase safe"
+          />
+          <SecurityItem
+            icon={<Box as={IconBan} size="1.25rem" />}
+            text="Don't share it with anyone else"
+          />
+          <SecurityItem
+            icon={<Box as={IconOWarning} size="1.25rem" />}
+            text="If you lose it, we can't recover it"
+          />
+        </Box>
+      </Box>
+
+      <Box mt="large" display="flex" gap="medium">
+        <Button
+          variant="ghost"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          skin="translucent"
+        >
+          <Text fontSize="medium" fontWeight="semibold">
+            Cancel
+          </Text>
+        </Button>
+        <Button
+          variant="primary"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          display="flex"
+          alignItems="center"
+          gap="small"
+        >
+          <Box as={IconUserFocus} size="1.25rem" />
+          <Text fontSize="medium" fontWeight="semibold">
+            Reveal
+          </Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+interface ViewHeaderProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const ViewHeader: React.FC<ViewHeaderProps> = ({ icon, title, description }) => {
+  return (
+    <Box>
+      <Box display="flex" alignItems="flex-start" justifyContent="space-between">
+        {icon}
+      </Box>
+      <Text
+        as="h2"
+        fontSize="xlarge"
+        fontWeight="semibold"
+        color="primary"
+        mt="small"
+      >
+        {title}
+      </Text>
+      <Text
+        fontSize="medium"
+        color="secondary"
+        lineHeight="relaxed"
+        mt="small"
+      >
+        {description}
+      </Text>
+    </Box>
+  );
+};
+
+interface SecurityItemProps {
+  icon: React.ReactNode;
+  text: string;
+}
+
+const SecurityItem: React.FC<SecurityItemProps> = ({ icon, text }) => {
+  return (
+    <Box display="flex" alignItems="center" gap="medium">
+      <Box color="secondary">
+        {icon}
+      </Box>
+      <Text fontSize="small" fontWeight="medium" color="secondary">
+        {text}
+      </Text>
+    </Box>
+  );
+};

package/src/blocks/FamilyDrawer/views/RemoveView.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Text } from "@/design-system/elements";
+import { IconOWarning } from "@/design-system/icons";
+import { FamilyDrawerView } from "../index";
+
+interface RemoveViewProps {
+  setView: (view: FamilyDrawerView) => void;
+}
+
+export const RemoveView: React.FC<RemoveViewProps> = ({ setView }) => {
+  return (
+    <Box>
+      <ViewHeader
+        icon={<Box as={IconOWarning} size="2.5rem" color="danger" />}
+        title="Are you sure?"
+        description="You haven't backed up your wallet yet. If you remove it, you could lose access forever. We suggest tapping and backing up your wallet first with a valid recovery method."
+      />
+
+      <Box mt="large" display="flex" gap="medium">
+        <Button
+          variant="ghost"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          skin="translucent"
+        >
+          <Text fontSize="medium" fontWeight="semibold">
+            Cancel
+          </Text>
+        </Button>
+        <Button
+          variant="primary"
+          $size="medium"
+          onClick={() => setView("default")}
+          flex="1"
+          skin="danger"
+          color="white"
+        >
+          <Text fontSize="medium" fontWeight="semibold">
+            Continue
+          </Text>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+interface ViewHeaderProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+const ViewHeader: React.FC<ViewHeaderProps> = ({ icon, title, description }) => {
+  return (
+    <Box>
+      <Box display="flex" alignItems="flex-start" justifyContent="space-between">
+        {icon}
+      </Box>
+      <Text
+        as="h2"
+        fontSize="xlarge"
+        fontWeight="semibold"
+        color="primary"
+        mt="small"
+      >
+        {title}
+      </Text>
+      <Text
+        fontSize="medium"
+        color="secondary"
+        lineHeight="relaxed"
+        mt="small"
+      >
+        {description}
+      </Text>
+    </Box>
+  );
+};

package/src/blocks/FieldSet/index.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { Box, Text } from "@/design-system/elements";
+import Field, { FieldProps } from "@/design-system/elements/field";
+import { TextareaHTMLAttributes, forwardRef } from "react";
+
+type CommonProps = {
+  error?: any;
+  as?: React.ElementType;
+  label: string | React.ReactNode;
+  description?: string;
+  children?: React.ReactNode;
+  watch?: any;
+  required?: boolean;
+  name: string;
+  layout?: "column" | "row";
+  fontSize?: string | number;
+  labelWidth?: string | number;
+  containerProps?: {
+    [key: string]: any;
+  };
+  [key: string]: any;
+};
+
+type FieldSetProps = CommonProps &
+  (
+    | Omit<FieldProps, "color">
+    | Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "color">
+  );
+
+const FieldSet = forwardRef<any, FieldSetProps>(function FieldSet(
+  {
+    name,
+    error,
+    label,
+    required,
+    description,
+    children,
+    watch,
+    as,
+    layout = "column",
+    fontSize = "medium",
+    labelWidth,
+    containerProps = {},
+    ...rest
+  },
+  ref,
+) {
+  const isRowLayout = layout === "row";
+
+  const labelElement = (
+    <Text
+      as="label"
+      htmlFor={name}
+      fontWeight={600}
+      mb={isRowLayout ? "0" : description ? "0" : "xsmall"}
+      color="currentColor"
+      fontSize={fontSize}
+      width={isRowLayout ? labelWidth : undefined}
+      flex={isRowLayout && !labelWidth ? "none" : undefined}
+      minWidth={isRowLayout ? "fit-content" : undefined}
+      mr={isRowLayout ? "small" : undefined}
+    >
+      {typeof label === "string" ? (
+        label + (required ? " *" : "")
+      ) : (
+        <>
+          {label}
+          {required && (
+            <Text as="span" color="currentColor">
+              {" *"}
+            </Text>
+          )}
+        </>
+      )}
+    </Text>
+  );
+
+  const fieldElement = watch ? (
+    <Box display="flex" alignItems="center" gap="small" width="100%">
+      <Field
+        ref={ref}
+        id={name}
+        name={name}
+        as={as || "input"}
+        variant="default"
+        $size={fontSize}
+        width={"100%"}
+        {...rest}
+      >
+        {as && as !== "input" ? children : null}
+      </Field>
+      <Text
+        height="2rem"
+        width="2.5rem"
+        fontSize="small"
+        flex="none"
+        bg="transparent.light.1"
+        display="flex"
+        alignItems="center"
+        justifyContent={"center"}
+        textAlign="center"
+        shape="rounded"
+      >
+        {watch}
+      </Text>
+    </Box>
+  ) : (
+    <Field
+      ref={ref}
+      id={name}
+      name={name}
+      as={as || "input"}
+      variant="default"
+      $size={fontSize}
+      width={"100%"}
+      {...rest}
+    >
+      {as && as !== "input" ? children : null}
+    </Field>
+  );
+
+  return (
+    <Box
+      as="fieldset"
+      m="0"
+      p="0"
+      border="none"
+      display={"flex"}
+      flexDirection={isRowLayout ? "row" : "column"}
+      alignItems={isRowLayout ? "center" : "stretch"}
+      width="100%"
+      gap={isRowLayout ? "none" : undefined}
+      {...containerProps}
+    >
+      {isRowLayout ? (
+        <>
+          {labelElement}
+          <Box display="flex" flexDirection="column" width="100%">
+            {description && (
+              <Text as="p" fontSize="small" color="secondary" mb="xsmall">
+                {description}
+              </Text>
+            )}
+            {fieldElement}
+            {error && (
+              <Text pt="xxsmall" fontSize="xsmall" color="red">
+                {error}
+              </Text>
+            )}
+          </Box>
+        </>
+      ) : (
+        <>
+          {labelElement}
+          {description && (
+            <Text as="p" fontSize="xsmall" color="secondary" mb="xsmall">
+              {description}
+            </Text>
+          )}
+          {fieldElement}
+          {error && (
+            <Text pt="xxsmall" fontSize="xsmall" color="red">
+              {error}
+            </Text>
+          )}
+        </>
+      )}
+    </Box>
+  );
+});
+
+export default FieldSet;

package/src/blocks/Filesystem/index.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import React, { useState } from "react"
+import { AnimatePresence, motion } from "motion/react"
+import { Box, Button, Text } from "@/design-system/elements"
+import {
+  Icon24Folder,
+  IconArrowSmRight,
+  IconDocFolder,
+  IconFile,
+} from "@/design-system/icons"
+
+export type FilesystemNode = {
+  name: string
+  nodes?: FilesystemNode[]
+  id?: string
+}
+
+export interface FilesystemProps {
+  nodes: FilesystemNode[]
+  initiallyOpenNames?: string[]
+  onSelectNode?: (node: FilesystemNode) => void
+  renderNode?: (
+    node: FilesystemNode,
+    defaultContent: React.ReactNode
+  ) => React.ReactNode
+}
+
+interface FilesystemItemProps {
+  node: FilesystemNode
+  initiallyOpenNames?: string[]
+  onSelectNode?: (node: FilesystemNode) => void
+  renderNode?: (
+    node: FilesystemNode,
+    defaultContent: React.ReactNode
+  ) => React.ReactNode
+  depth?: number
+}
+
+const TOGGLE_ICON_SIZE = "1.25rem"
+const ITEM_ICON_SIZE = "1.125rem"
+const CHILDREN_VARIANTS = {
+  open: { opacity: 1, height: "auto" },
+  collapsed: { opacity: 0, height: 0 },
+}
+
+const TRANSITION = { duration: 0.15, ease: [0.4, 0, 0.2, 1] }
+
+function FilesystemItem({
+  node,
+  initiallyOpenNames,
+  onSelectNode,
+  renderNode,
+  depth = 0,
+}: FilesystemItemProps) {
+  const [isOpen, setIsOpen] = useState(
+    () => !!initiallyOpenNames && initiallyOpenNames.includes(node.name)
+  )
+
+  const hasChildren = !!node.nodes && node.nodes.length > 0
+  const isFolder = !!node.nodes
+
+  return (
+    <Box as={motion.li} layout transition={TRANSITION}>
+      <Box
+        as="div"
+        display="flex"
+        alignItems="center"
+        gap="xxs"
+        py="xxs"
+        cursor="pointer"
+        title={node.name}
+        onClick={() => {
+          if (hasChildren) {
+            setIsOpen((open) => !open)
+          }
+          if (onSelectNode) {
+            onSelectNode(node)
+          }
+        }}
+      >
+        {hasChildren ? (
+          <Button
+            as="button"
+            type="button"
+            onClick={(event: Event) => {
+              event.stopPropagation()
+              setIsOpen((open) => !open)
+              if (onSelectNode) {
+                onSelectNode(node)
+              }
+            }}
+            variant=""
+            $size=""
+            size={TOGGLE_ICON_SIZE}
+          >
+            <Box
+              as={motion.span}
+              animate={{ rotate: isOpen ? 90 : 0 }}
+              transition={TRANSITION}
+            >
+              <Box
+                as={IconArrowSmRight}
+                size={TOGGLE_ICON_SIZE}
+                color="tertiary"
+              />
+            </Box>
+          </Button>
+        ) : (
+          // Spacer so folder / file icons line up with rows that have toggles
+          <Box size={TOGGLE_ICON_SIZE} flex="none" />
+        )}
+        {renderNode ? (
+          renderNode(
+            node,
+            <>
+              <Box
+                as={isFolder ? Icon24Folder : IconFile}
+                size={ITEM_ICON_SIZE}
+                color={"secondary"}
+                flex="none"
+              />
+              <Text as="span" fontSize="s" color="primary" lineClamp={1}>
+                {node.name}
+              </Text>
+            </>
+          )
+        ) : (
+          <>
+            <Box
+              as={isFolder ? Icon24Folder : IconFile}
+              size={ITEM_ICON_SIZE}
+              color={"secondary"}
+              flex="none"
+            />
+            <Text as="span" fontSize="s" color="primary" lineClamp={1}>
+              {node.name}
+            </Text>
+          </>
+        )}
+      </Box>
+
+      <AnimatePresence initial={false}>
+        {isOpen && hasChildren && (
+          <Box
+            as={motion.ul}
+            m={0}
+            p={0}
+            listStyleType="none"
+            initial="collapsed"
+            animate="open"
+            exit="collapsed"
+            variants={CHILDREN_VARIANTS}
+            transition={TRANSITION}
+            overflow="hidden"
+          >
+            {node.nodes!.map((child, index) => (
+              <FilesystemItem
+                key={`${child.id ?? child.name}-${index}`}
+                node={child}
+                initiallyOpenNames={initiallyOpenNames}
+                onSelectNode={onSelectNode}
+                renderNode={renderNode}
+                depth={depth + 1}
+              />
+            ))}
+          </Box>
+        )}
+      </AnimatePresence>
+    </Box>
+  )
+}
+
+const Filesystem: React.FC<FilesystemProps> = ({
+  nodes,
+  initiallyOpenNames,
+  onSelectNode,
+  renderNode,
+}) => {
+  if (!nodes || nodes.length === 0) return null
+
+  return (
+    <Box as="ul" m={0} p={0} style={{ listStyle: "none" }}>
+      {nodes.map((node, index) => (
+        <FilesystemItem
+          key={`${node.id ?? node.name}-${index}`}
+          node={node}
+          initiallyOpenNames={initiallyOpenNames}
+          onSelectNode={onSelectNode}
+          renderNode={renderNode}
+          depth={0}
+        />
+      ))}
+    </Box>
+  )
+}
+
+export default Filesystem