@reactberry/system 2.0.0-beta

package/src/elements/box.ts

@@ -0,0 +1,163 @@
+"use client";
+import {
+  BackgroundProps,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  GridProps,
+  LayoutProps,
+  PositionProps,
+  ShadowProps,
+  SpaceProps,
+  background,
+  border,
+  color,
+  compose,
+  flexbox,
+  grid,
+  layout,
+  position,
+  shadow,
+  space,
+} from "styled-system";
+
+import styled, { css } from "styled-components";
+import {
+  gap,
+  skin,
+  shape,
+  aspect,
+  cursor,
+  hover,
+  $size,
+  focus,
+  $shadow,
+  disabled,
+} from "./utils";
+
+// Base interface that both Box and Text can use
+export interface BaseElementProps
+  extends ColorProps,
+    SpaceProps,
+    LayoutProps,
+    PositionProps,
+    BackgroundProps,
+    BorderProps,
+    FlexboxProps,
+    GridProps,
+    ShadowProps {
+  children?: React.ReactNode;
+  gap?: any;
+  skin?: string;
+  shape?: string;
+  aspect?: number | number[] | string[] | {};
+  cursor?: string;
+  hover?: string | object;
+  focus?: string | object;
+  ref?: any;
+  as?: any;
+  $size?: any;
+  $shadow?: string;
+  disabled?: boolean | undefined;
+  interactive?: {
+    hover?: Record<string, any>;
+    focus?: Record<string, any>;
+    active?: Record<string, any>;
+    disabled?: Record<string, any>;
+    visited?: Record<string, any>;
+    // Add any other interactive states you need
+  };
+  [key: string]: any;
+}
+
+// Box interface forbids typography props
+export interface BoxProps extends BaseElementProps {}
+
+const newArr: any = [];
+const mergeResult = [newArr].concat(
+  color.propNames,
+  space.propNames,
+  flexbox.propNames,
+  layout.propNames,
+  position.propNames,
+  background.propNames,
+  border.propNames,
+  grid.propNames,
+  shadow.propNames,
+);
+
+const processInteractiveStyles = (state: string, styles: any) => {
+  return (props: any) => {
+    const systemStyles = compose(
+      color,
+      space,
+      layout,
+      position,
+      background,
+      border,
+      flexbox,
+      grid,
+      shadow,
+      skin,
+      shape,
+      aspect,
+      cursor,
+      $size,
+      $shadow,
+    )({ ...props, ...styles });
+
+    return css`
+      &${`:${state}`} {
+        ${systemStyles}
+      }
+    `;
+  };
+};
+
+const Box = styled("div").withConfig({
+  shouldForwardProp: (prop) =>
+    ![
+      ...mergeResult,
+      "gap",
+      "skin",
+      "shape",
+      "aspect",
+      "cursor",
+      "interactive",
+    ].includes(prop),
+})<BoxProps>`
+  ${(props) => {
+    return compose(
+      color,
+      space,
+      layout,
+      position,
+      background,
+      border,
+      flexbox,
+      grid,
+      shadow,
+      gap,
+      skin,
+      shape,
+      aspect,
+      cursor,
+      $size,
+      $shadow,
+    )(props);
+  }}
+  &:hover {
+    ${(p) => p.hover && hover}
+  }
+  &:focus,
+  &:focus-within {
+    ${(p) => p.focus && focus}
+  }
+  ${(p) => p.disabled && disabled}
+  ${(p) =>
+    p.interactive &&
+    Object.entries(p.interactive).map(([state, styles]) =>
+      processInteractiveStyles(state, styles),
+    )}
+`;
+export default Box;

package/src/elements/button.ts

@@ -0,0 +1,49 @@
+"use client";
+import { variant, compose } from "styled-system";
+import styled from "styled-components";
+import Text, { TextProps } from "./text";
+import { disabled } from "./utils";
+
+export interface ButtonProps extends TextProps {
+  children?: React.ReactNode;
+  variant?: string;
+  $size?: string;
+  disabled?: boolean;
+}
+
+const buttonStyle = variant({
+  key: "skins.button",
+  prop: "variant",
+});
+
+const buttonSize = variant({
+  key: "skins.button.sizes",
+  prop: "$size",
+});
+
+const Button = styled(Text).attrs<ButtonProps>((props) => ({
+  role: "button",
+  border: "none",
+  $size: "medium",
+  shape: "rounded",
+  variant: "default",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  tabIndex: 0,
+  ...props,
+}))<ButtonProps>`
+  transition: 0.2s ease;
+
+  /* Prevent text jiggling during scale animations */
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: subpixel-antialiased;
+  transform-style: preserve-3d;
+
+  ${compose(buttonStyle, buttonSize)}
+  ${(p) => p.disabled && disabled}
+`;
+
+export default Button;

package/src/elements/field.ts

@@ -0,0 +1,129 @@
+"use client";
+import { variant, compose } from "styled-system";
+import styled, { css } from "styled-components";
+import Text, { TextProps } from "./text";
+import { disabled } from "./utils";
+
+export interface FieldProps extends TextProps {
+  children?: React.ReactNode;
+  variant?: string;
+  $size?: string;
+  type?: string;
+  placeholder?: string;
+  autoComplete?: string;
+}
+
+const fieldStyle = variant({
+  key: "skins.field",
+  prop: "variant",
+});
+
+const fieldSize = variant({
+  key: "skins.field.sizes",
+  prop: "$size",
+});
+
+// Build array of props that shouldn't be forwarded to DOM
+const newArr: any = [];
+const fieldPropsToOmit = [newArr].concat("variant", "shape", "$size");
+
+const selectStyling = css`
+  appearance: none;
+  /* SVG background image */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23212121'%3E%3Cpath d='M12,15a1,1,0,0,1-.707-.293l-4-4A1,1,0,1,1,8.707,9.293L12,12.586l3.293-3.293a1,1,0,0,1,1.414,1.414l-4,4A1,1,0,0,1,12,15Z' fill='gray'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+  background-size: 1.5em;
+  background-position: calc(100% - 0.5em) center;
+  background-repeat: no-repeat;
+  padding-right: 2em;
+`;
+
+const rangeStyling = css`
+  --color: ${(p: any) => p.theme.colors.primary};
+  --track: ${(p: any) => p.theme.colors.transparent.light[2]};
+  --shadow: ${(p: any) => p.theme.colors.dark};
+
+  /*********** Baseline, reset styles ***********/
+
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  padding: 0;
+
+  /* Removes default focus */
+  &:hover,
+  &:focus {
+    outline: none;
+  }
+
+  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
+  /* slider track */
+  &::-webkit-slider-runnable-track {
+    background-color: var(--track);
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* slider thumb */
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    margin-top: -4px; /* Centers thumb on the track */
+    background-color: var(--color);
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &:focus::-webkit-slider-thumb {
+    outline: 3px solid var(--color);
+    outline-offset: 0.125rem;
+  }
+
+  /*********** Firefox styles ***********/
+  /* slider track */
+  &::-moz-range-track {
+    background-color: var(--track);
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* slider thumb */
+  &::-moz-range-thumb {
+    background-color: var(--color);
+    border: none; /*Removes extra border that FF applies*/
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  &:focus::-moz-range-thumb {
+    outline: 3px solid var(--shadow);
+    //outline-offset: 0.125rem;
+  }
+`;
+
+const Field = styled(Text)
+  .withConfig({
+    shouldForwardProp: (prop) => !fieldPropsToOmit.includes(prop),
+  })
+  .attrs<FieldProps>((props) => ({
+    as: "input",
+    type: "text",
+    shape: "rounded",
+    variant: "default",
+    display: "inline-flex",
+    $size: "medium",
+    placeholder: "",
+    ...props,
+  }))<FieldProps>`
+  ${compose(fieldStyle, fieldSize)}
+  ${(p) => p.disabled && disabled}
+  ${(p) => p.as === "select" && selectStyling}
+  ${(p) => p.type === "range" && rangeStyling}
+    transition: 0.2s ease;
+`;
+
+export default Field;

package/src/elements/index.ts

@@ -0,0 +1,8 @@
+export { default as Box } from "./box";
+export type { BoxProps, BaseElementProps } from "./box";
+export { default as Button } from "./button";
+export type { ButtonProps } from "./button";
+export { default as Field } from "./field";
+export type { FieldProps } from "./field";
+export { default as Text } from "./text";
+export type { TextProps } from "./text";

package/src/elements/text.ts

@@ -0,0 +1,47 @@
+"use client";
+import { typography, TypographyProps, compose } from "styled-system";
+import styled from "styled-components";
+import Box, { BaseElementProps } from "./box";
+import {
+  textTransform,
+  textDecoration,
+  textOverflow,
+  truncate,
+  lineClamp,
+  disabled,
+} from "./utils";
+
+export interface TextProps extends BaseElementProps, TypographyProps {
+  children?: React.ReactNode;
+  truncate?: boolean;
+  textTransform?: string;
+  textDecoration?: string;
+  lineClamp?: number;
+}
+
+const newArr: any = [];
+const mergeResult = [newArr].concat(typography.propNames);
+
+const Text = styled(Box)
+  .withConfig({
+    shouldForwardProp: (prop) =>
+      ![
+        ...mergeResult,
+        "textTransform",
+        "textDecoration",
+        "textOverflow",
+        "truncate",
+        "lineClamp",
+      ].includes(prop),
+  })
+  .attrs<TextProps>((props) => ({
+    as: "span",
+    ...props,
+  }))<TextProps>`
+  ${(p) => (p.truncate ? truncate : null)}
+  ${(p) => (p.lineClamp ? lineClamp : null)}
+  ${() => compose(typography, textTransform, textDecoration, textOverflow)}
+  ${(p) => p.disabled && disabled}
+`;
+
+export default Text;

package/src/elements/utils.js

@@ -0,0 +1,97 @@
+import { style, variant } from "styled-system"
+import { css } from "styled-components"
+
+export const disabled = css`
+  opacity: 0.5;
+  pointer-events: none;
+`
+
+// used by Box
+
+export const gap = style({
+  prop: "gap",
+  cssProperty: "gap",
+  key: "space",
+})
+
+export const aspect = style({
+  prop: "aspect",
+  cssProperty: "aspectRatio",
+})
+
+export const $size = variant({
+  key: "controlSizes",
+  prop: "$size",
+})
+
+export const skin = variant({
+  key: "skins",
+  prop: "skin",
+})
+
+export const hover = variant({
+  key: "skins",
+  prop: "hover",
+})
+
+export const $shadow = variant({
+  key: "shadows",
+  prop: "$shadow",
+})
+
+export const focus = variant({
+  key: "skins",
+  prop: "focus",
+})
+
+export const shape = variant({
+  key: "shapes",
+  prop: "shape",
+  cssProperty: "border-radius",
+})
+
+export const cursor = style({
+  prop: "cursor",
+  cssProperty: "cursor",
+})
+
+// used by Text
+export const textTransform = style({
+  prop: "textTransform",
+  cssProperty: "text-transform",
+})
+
+export const textDecoration = style({
+  prop: "textDecoration",
+  cssProperty: "text-decoration",
+})
+
+export const textOverflow = style({
+  prop: "textOverflow",
+  cssProperty: "text-overflow",
+})
+
+export const outline = css`
+  box-shadow: 0 0 0px 1px ${(p) =>
+    p.theme.colors.palette.neutrals[8]}, 0 0 0px 4px ${(p) =>
+    p.theme.colors.palette.blues[5]}
+}`
+
+export const lineClamp = css`
+  max-width: 100%;
+  display: -webkit-box;
+  text-wrap: balance;
+  -webkit-line-clamp: ${(p) => p.lineClamp || 1};
+  overflow: hidden;
+  word-break: break-word;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+`
+
+export const truncate = css`
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+`

package/src/hooks/use-copy-to-clipboard.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+
+export interface useCopyToClipboardProps {
+  timeout?: number;
+}
+
+export function useCopyToClipboard({
+  timeout = 2000,
+}: useCopyToClipboardProps) {
+  const [isCopied, setIsCopied] = React.useState<boolean>(false);
+
+  const copyToClipboard = (value: string) => {
+    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
+      return;
+    }
+
+    if (!value) {
+      return;
+    }
+
+    navigator.clipboard.writeText(value).then(() => {
+      setIsCopied(true);
+
+      setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    });
+  };
+
+  return { isCopied, copyToClipboard };
+}

package/src/hooks/use-enter-submit.tsx

@@ -0,0 +1,23 @@
+import { useRef, type RefObject } from "react";
+
+export function useEnterSubmit(): {
+	  formRef: RefObject<HTMLFormElement | null>;
+	  onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+} {
+	  const formRef = useRef<HTMLFormElement | null>(null);
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>,
+  ): void => {
+    if (
+      event.key === "Enter" &&
+      !event.shiftKey &&
+      !event.nativeEvent.isComposing
+    ) {
+      formRef.current?.requestSubmit();
+      event.preventDefault();
+    }
+  };
+
+  return { formRef, onKeyDown: handleKeyDown };
+}

package/src/hooks/use-local-storage.ts

@@ -0,0 +1,42 @@
+import { useCallback, useState } from "react";
+
+export const useLocalStorage = <T,>(
+  key: string,
+  initialValue: T,
+): [T, (value: T) => void] => {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+
+    try {
+      const item = window.localStorage.getItem(key);
+      if (!item) return initialValue;
+
+      try {
+        return JSON.parse(item) as T;
+      } catch {
+        return item as T;
+      }
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = useCallback(
+    (value: T) => {
+      try {
+        setStoredValue(value);
+        if (typeof window !== "undefined") {
+          window.localStorage.setItem(key, JSON.stringify(value));
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [key],
+  );
+
+  return [storedValue, setValue];
+};

package/src/hooks/use-sidebar.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+
+const LOCAL_STORAGE_PREFIX = "panel_";
+
+interface SidebarState {
+  isOpen: boolean;
+}
+
+interface SidebarContextValue {
+  getSidebarState: (id: string) => SidebarState;
+  toggleSidebar: (id: string) => void;
+  isLoading: boolean;
+}
+
+const SidebarContext = React.createContext<SidebarContextValue | undefined>(
+  undefined,
+);
+
+export function useSidebar(id: string) {
+  const context = React.useContext(SidebarContext);
+
+  if (!context) {
+    console.warn("useSidebar must be used within a SidebarProvider");
+    return {
+      isSidebarOpen: false,
+      toggleSidebar: () => {},
+      isLoading: true,
+    };
+  }
+
+  return {
+    isSidebarOpen: context.getSidebarState(id).isOpen,
+    toggleSidebar: () => context.toggleSidebar(id),
+    isLoading: context.isLoading,
+  };
+}
+
+export function SidebarProvider({ children }: { children: React.ReactNode }) {
+  const [sidebarStates, setSidebarStates] = React.useState<
+    Record<string, SidebarState>
+  >({});
+  const [isLoading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    let isMounted = true;
+
+    try {
+      const storedStates: Record<string, SidebarState> = {};
+      for (let index = 0; index < localStorage.length; index += 1) {
+        const key = localStorage.key(index);
+        if (key?.startsWith(LOCAL_STORAGE_PREFIX)) {
+          const id = key.slice(LOCAL_STORAGE_PREFIX.length);
+          storedStates[id] = JSON.parse(localStorage.getItem(key) || "{}");
+        }
+      }
+
+      if (isMounted) {
+        setSidebarStates(storedStates);
+      }
+    } catch (error) {
+      console.error("Failed to load sidebar states:", error);
+    } finally {
+      if (isMounted) {
+        setLoading(false);
+      }
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const getSidebarState = React.useCallback(
+    (id: string): SidebarState => sidebarStates[id] || { isOpen: false },
+    [sidebarStates],
+  );
+
+  const toggleSidebar = React.useCallback(
+    (id: string) => {
+      setSidebarStates((prevStates) => {
+        const current = prevStates[id] || { isOpen: false };
+        const nextState = {
+          ...prevStates,
+          [id]: { isOpen: !current.isOpen },
+        };
+
+        try {
+          localStorage.setItem(
+            `${LOCAL_STORAGE_PREFIX}${id}`,
+            JSON.stringify(nextState[id]),
+          );
+        } catch (error) {
+          console.error("Failed to save sidebar state:", error);
+        }
+
+        return nextState;
+      });
+    },
+    [],
+  );
+
+  return (
+    <SidebarContext.Provider value={{ getSidebarState, toggleSidebar, isLoading }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+}