@reactberry/system 2.0.0-beta

package/src/blocks/Group/index.tsx

@@ -0,0 +1,152 @@
+"use client"
+import Box, { BoxProps } from "@/design-system/elements/box"
+import React from "react"
+import styled, { css } from "styled-components"
+
+interface GroupProps extends BoxProps {
+  type?: "buttons" | "avatars" | "tabs"
+  vertical?: boolean
+  children?: React.ReactNode
+  className?: string
+  [key: string]: any
+}
+
+const HorizontalButtons = css`
+  > .button {
+    text-align: center;
+    border-radius: 0;
+    margin: 0;
+    align-items: center;
+    margin-left: -1px;
+    z-index: 1;
+  }
+  .dropdown > :first-child {
+    text-align: center;
+    border-radius: 0;
+    margin: 0;
+    align-items: center;
+    margin-left: -1px;
+    z-index: 1;
+  }
+  > :first-child {
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    margin-left: 0;
+  }
+  .dropdown:first-child {
+    > :first-child {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      margin-left: 0;
+    }
+  }
+  > :last-child {
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+  }
+  .dropdown:last-child {
+    > :first-child {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+  > :hover {
+    z-index: 2;
+  }
+`
+
+const VerticalButtons = css`
+  > * {
+    justify-content: center;
+  }
+  > *:first-child {
+    border-radius: 8px 8px 0 0;
+  }
+  > *:last-child {
+    border-radius: 0 0 8px 8px;
+  }
+`
+
+const HorizontalTabs = css`
+  > * {
+    text-align: center;
+    align-items: center;
+    border: 1px solid transparent;
+  }
+  > *:first-child {
+    border-radius: 8px 0 0 0;
+  }
+`
+
+const VerticalTabs = css`
+  > * {
+    width: 100%;
+  }
+  > *:first-child {
+    border-radius: 0;
+  }
+`
+
+const HorizontalAvatars = css`
+  flex-direction: row-reverse;
+  > div {
+    /*border: 2px solid transparent;*/
+    margin-right: -0.75em;
+    transition: 0.125s ease-in-out;
+    z-index: 0;
+  }
+  &:hover {
+    > div {
+      &:hover {
+        /*border: 2px solid transparent;*/
+        transform: scale(1.05);
+        z-index: 1;
+      }
+    }
+  }
+`
+
+const VerticalAvatars = css`
+  justify-content: center;
+`
+
+const StyledBox = styled(Box)<GroupProps>`
+  ${(props) => props.type === "buttons" && HorizontalButtons};
+  ${(props) => props.type === "avatars" && HorizontalAvatars};
+  ${(props) => props.type === "tabs" && HorizontalTabs};
+  ${(props) =>
+    props.vertical
+      ? css`
+          display: flex;
+          flex-direction: column;
+          justify-content: start;
+          align-items: start;
+          ${props.type === "buttons" && VerticalButtons};
+          ${props.type === "avatars" && VerticalAvatars};
+          ${props.type === "tabs" && VerticalTabs};
+        `
+      : ""};
+`
+
+const Group: React.FC<GroupProps> = ({
+  children,
+  className,
+  type,
+  vertical,
+  ...props
+}) => {
+  return (
+    <StyledBox
+      className={className}
+      type={type}
+      vertical={vertical}
+      display="flex"
+      alignItems="center"
+      {...props}
+    >
+      {children}
+    </StyledBox>
+  )
+}
+
+export default Group

package/src/blocks/Heading/index.tsx

@@ -0,0 +1,111 @@
+"use client";
+import Text, { TextProps } from "@/design-system/elements/text";
+import { ThemeContext } from "styled-components";
+import React, { useContext } from "react";
+
+type HeadingElements = {
+  title?: TextProps;
+  subtitle?: TextProps;
+  strap?: any;
+  [key: string]: any;
+};
+
+type HeadingProps = TextProps & {
+  children?: React.ReactNode;
+  title: string | React.ReactNode;
+  subtitle?: string | React.ReactNode;
+  strap?: any;
+  meta?: React.ReactNode;
+  elementProps?: HeadingElements;
+  props?: any;
+};
+
+export default function Heading({
+  children,
+  title = "Page Title",
+  subtitle,
+  strap,
+  meta,
+  $size = "medium",
+  color = "primary",
+  elementProps = {},
+  ...props
+}: HeadingProps) {
+  const theme: any = useContext(ThemeContext);
+
+  const headingSize: any = {
+    xsmall: {
+      title: "medium",
+      subtitle: "small",
+    },
+    small: {
+      title: "large",
+      subtitle: "small",
+    },
+    medium: {
+      title: "xlarge",
+      subtitle: "small",
+    },
+    large: {
+      title: "xlarge",
+      subtitle: "medium",
+    },
+    xlarge: {
+      title: "xxlarge",
+      subtitle: "medium",
+    },
+    xxlarge: {
+      title: "xxxlarge",
+      subtitle: "xlarge",
+    },
+    xxxlarge: {
+      title: "xxxlarge",
+      subtitle: "xlarge",
+    },
+  };
+
+  return (
+    <Text as="header" {...theme?.heading?.container} {...props}>
+      {strap && (
+        <Text
+          as="div"
+          m="0"
+          fontSize={headingSize[$size].subtitle}
+          fontWeight="600"
+          color="secondary"
+          {...theme?.heading?.strap}
+          {...elementProps.strap}
+        >
+          {strap}
+        </Text>
+      )}
+      <Text
+        as="h1"
+        m="0"
+        fontSize={headingSize[$size].title}
+        fontWeight="inherit"
+        lineHeight="1.5"
+        color={color}
+        {...theme?.heading?.title}
+        {...elementProps.title}
+      >
+        {title}
+      </Text>
+      {subtitle && (
+        <Text
+          as="p"
+          m="0"
+          fontSize={headingSize[$size].subtitle}
+          fontWeight="400"
+          color="tertiary"
+          {...theme?.heading?.subtitle}
+          {...elementProps.subtitle}
+        >
+          {subtitle}
+        </Text>
+      )}
+      {meta && meta}
+      {children}
+    </Text>
+  );
+}

package/src/blocks/HorizontalScroller/index.tsx

@@ -0,0 +1,135 @@
+"use client";
+import { Box, Text } from "@/design-system/elements";
+import {
+  animate,
+  motion,
+  MotionValue,
+  useMotionValue,
+  useMotionValueEvent,
+  useScroll,
+} from "motion/react";
+import { useRef, ReactNode } from "react";
+
+interface HorizontalScrollerProps {
+  items: any[]; // Array of items to scroll through
+  renderItem: (item: any, index: number) => ReactNode; // Function to render each item
+  gap?: number | string; // Gap between items
+  progressIndicator?: boolean; // Whether to show progress indicator
+  withMask?: boolean; // Whether to apply gradient mask
+  title?: string;
+}
+
+export default function HorizontalScroller({
+  items,
+  renderItem,
+  gap = "small",
+  title,
+  progressIndicator = true,
+  withMask = true,
+}: HorizontalScrollerProps) {
+  const containerRef = useRef(null);
+  const { scrollXProgress } = useScroll({ container: containerRef });
+  const maskImage = useScrollOverflowMask(scrollXProgress);
+
+  return (
+    <Box width="100%" position="relative" maxWidth="100%" overflow="hidden">
+      <Box
+        position="relative"
+        display="flex"
+        alignItems={"center"}
+        justifyContent={"space-between"}
+        py="xsmall"
+      >
+        {title && (
+          <Text as="h3" m="0">
+            {title}
+          </Text>
+        )}
+        {progressIndicator && (
+          <Box
+            as={motion.svg}
+            color="brand"
+            size="2rem"
+            viewBox="0 0 100 100"
+            transform="rotate(-90deg)"
+            zIndex="1"
+          >
+            <circle
+              cx="50"
+              cy="50"
+              r="30"
+              pathLength="1"
+              stroke="rgba(255,255,255,0.2)"
+              strokeWidth="10%"
+              fill="none"
+            />
+            <motion.circle
+              cx="50"
+              cy="50"
+              r="30"
+              stroke="currentColor"
+              strokeWidth="10%"
+              fill="none"
+              style={{ pathLength: scrollXProgress }}
+            />
+          </Box>
+        )}
+      </Box>
+
+      <Box
+        as={motion.div}
+        ref={containerRef}
+        display="flex"
+        overflowX="scroll"
+        pb="medium"
+        gap={gap}
+        width="100%"
+        position="relative"
+        zIndex="2"
+        style={withMask ? { maskImage } : undefined}
+      >
+        {items.map((item, index) => (
+          <Box key={index}>{renderItem(item, index)}</Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+// Gradient mask function
+const left = `0%`;
+const right = `100%`;
+const leftInset = `20%`;
+const rightInset = `80%`;
+const transparent = `#0000`;
+const opaque = `#000`;
+
+function useScrollOverflowMask(scrollXProgress: MotionValue<number>) {
+  const maskImage = useMotionValue(
+    `linear-gradient(90deg, ${opaque}, ${opaque} ${left}, ${opaque} ${rightInset}, ${transparent})`
+  );
+
+  useMotionValueEvent(scrollXProgress, "change", (value) => {
+    if (value === 0) {
+      animate(
+        maskImage,
+        `linear-gradient(90deg, ${opaque}, ${opaque} ${left}, ${opaque} ${rightInset}, ${transparent})`
+      );
+    } else if (value === 1) {
+      animate(
+        maskImage,
+        `linear-gradient(90deg, ${transparent}, ${opaque} ${leftInset}, ${opaque} ${right}, ${opaque})`
+      );
+    } else if (
+      scrollXProgress.getPrevious() === 0 ||
+      scrollXProgress.getPrevious() === 1
+    ) {
+      animate(
+        maskImage,
+        `linear-gradient(90deg, ${transparent}, ${opaque} ${leftInset}, ${opaque} ${rightInset}, ${transparent})`
+      );
+    }
+  });
+
+  return maskImage;
+}

package/src/blocks/Icon/index.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { designSystemIcons, type DesignSystemIconName } from "@/design-system/icons";
+import { Box } from "@/design-system/elements";
+import { useMemo } from "react";
+
+interface IconComponentProps {
+  icon: string;
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+  size?: string | number | object;
+  [key: string]: any;
+}
+
+const Icon: React.FC<IconComponentProps> = ({
+  icon,
+  width = "24px",
+  height = "24px",
+  size = "24px",
+  color = "currentColor",
+  ...props
+}) => {
+  const LazyIcon = useMemo(
+    () => designSystemIcons[icon as DesignSystemIconName] ?? null,
+    [icon],
+  );
+
+  if (!LazyIcon) {
+    console.warn(`Icon ${icon} not found in design-system/icons`);
+    return null;
+  }
+
+  return (
+    <Box
+      as={LazyIcon}
+      width={size || width}
+      height={size || height}
+      color={color}
+      {...props}
+    />
+  );
+};
+
+export default Icon;

package/src/blocks/Indicator/index.tsx

@@ -0,0 +1,27 @@
+import { Text } from "@/design-system/elements";
+
+type IndicatorProps = {
+  [key: string]: any;
+};
+
+export const Indicator = ({ children, ...props }: IndicatorProps) => {
+  return (
+    <Text
+      as="div"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      p="6px"
+      fontSize="0.75rem"
+      lineHeight="0.5rem"
+      fontWeight="700"
+      shape="pill"
+      // width="fit-content"
+      // height="fit-content"
+      flex="none"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/blocks/InlineEditor/index.tsx

@@ -0,0 +1,216 @@
+"use client"
+import { IconPencil } from "@/design-system/icons"
+import { Box, Text, Button, Field } from "@/design-system/elements"
+import React, { useState, useRef, useEffect } from "react"
+import Textarea from "react-textarea-autosize"
+import Group from "../Group"
+import {
+  MaskedField,
+  maskPresets,
+  type MaskPresetType,
+} from "../MaskedField"
+
+import { IconDCheck, IconERemove } from "@/design-system/icons"
+
+type InlineEditorProps = {
+  id: string | number
+  initialText?: string | undefined | null
+  placeholder?: string
+  onSave: (id: string, text: string) => Promise<void>
+  label?: string | React.ReactNode
+  editLabel?: string
+  isDisabled?: boolean
+  fieldProps?: Record<string, any>
+  containerProps?: Record<string, any>
+  headerProps?: Record<string, any>
+  controlSize?: string
+  buttonConfig?: any
+  maskPreset?: string
+}
+
+const InlineEditor: React.FC<InlineEditorProps> = ({
+  id = "",
+  initialText,
+  placeholder = "",
+  onSave,
+  label,
+  editLabel,
+  isDisabled = false,
+  fieldProps = {},
+  containerProps = {},
+  headerProps = {},
+  controlSize = "small",
+  buttonConfig = {
+    edit: {
+      variant: "ghost",
+    },
+    save: {
+      variant: "success",
+    },
+    cancel: {
+      variant: "default",
+    },
+  },
+  maskPreset,
+}) => {
+  const [isEditing, setIsEditing] = useState<boolean>(false)
+  const [tempText, setTempText] = useState(initialText || "")
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleEditClick = () => {
+    setTempText(initialText || "")
+    setIsEditing(true)
+  }
+
+  const handleSaveClick = async () => {
+    setIsLoading(true)
+    try {
+      await onSave(String(id), String(tempText))
+      setIsEditing(false)
+    } catch (error) {
+      console.error("Error saving text:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCancelClick = () => {
+    setIsEditing(false)
+    setTempText(initialText || "")
+  }
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+  ) => {
+    setTempText(e.target.value)
+  }
+
+  const validMaskPreset =
+    maskPreset && maskPreset in maskPresets
+      ? (maskPreset as MaskPresetType)
+      : null
+
+  useEffect(() => {
+    if (isEditing && !validMaskPreset && textAreaRef.current) {
+      textAreaRef.current.focus()
+    }
+    setTempText(initialText || "")
+  }, [initialText, isEditing, validMaskPreset])
+
+  return (
+    <Text
+      as="div"
+      display={"flex"}
+      flexDirection={"column"}
+      gap="xxsmall"
+      py="xxsmall"
+      fontSize="s"
+      {...containerProps}
+    >
+      <Group
+        justifyContent={"space-between"}
+        width="100%"
+        py="xxsmall"
+        gap="xxsmall"
+        color="secondary"
+        {...headerProps}
+      >
+        {label && (
+          <Text fontWeight={600}>
+            {label} {isLoading && "(Wait...)"}
+          </Text>
+        )}
+        <Group flex="none" gap="xs" ml="auto">
+          {isEditing ? (
+            <>
+              <Button
+                $size={controlSize}
+                gap="xxsmall"
+                variant="ghost"
+                onClick={handleCancelClick}
+                {...buttonConfig.cancel}
+              >
+                <Box as={IconERemove} size="1em" />
+              </Button>
+              <Button
+                $size={controlSize}
+                gap="xxsmall"
+                variant="outline.dark"
+                onClick={handleSaveClick}
+                {...buttonConfig.save}
+              >
+                <Box as={IconDCheck} size="1.125em" />
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="ghost"
+              disabled={isDisabled}
+              onClick={handleEditClick}
+              $size={controlSize}
+              {...buttonConfig.edit}
+            >
+              <Box as={IconPencil} size="1em" /> {editLabel && editLabel}
+            </Button>
+          )}
+        </Group>
+      </Group>
+      {isEditing ? (
+        <Box
+          minWidth="0"
+          bg={isEditing ? "transparent.brand.3" : "transparent"}
+        >
+          {validMaskPreset ? (
+            <MaskedField
+              autoFocus
+              preset={validMaskPreset}
+              value={tempText || ""}
+              onChange={handleChange}
+              placeholder={placeholder}
+              disabled={isDisabled}
+              variant="ghost"
+              $size=""
+              width="100%"
+              {...fieldProps}
+            />
+          ) : (
+            <Field
+              autoFocus
+              as={Textarea}
+              ref={textAreaRef}
+              placeholder={placeholder}
+              value={tempText}
+              onChange={handleChange}
+              disabled={isDisabled}
+              flex="auto"
+              variant="ghost"
+              $size=""
+              minHeight={"2.25rem"}
+              maxHeight={"25rem"}
+              overflowY={"scroll"}
+              //p="xxsmall"
+              width="100%"
+              style={{ resize: "none" }}
+              {...fieldProps}
+            />
+          )}
+        </Box>
+      ) : (
+        <Box minHeight={"auto"} border="1px solid transparent" minWidth="0">
+          {initialText ? (
+            <Text style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
+              {initialText}
+            </Text>
+          ) : (
+            <Text color="secondary" fontStyle="italic">
+              {placeholder}
+            </Text>
+          )}
+        </Box>
+      )}
+    </Text>
+  )
+}
+
+export default InlineEditor