@usefui/components 1.5.1 → 1.5.3

package/src/card/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { CardContainer, CardWrapper, CardsGrid } from "./styles";
+
+import type { IComponentSize, TComponentShape } from "../../../../types";
+
+export interface CardComposition {
+  Body: typeof CardBody;
+  Meta: typeof CardMeta;
+  Grid: typeof CardGrid;
+}
+
+interface CardGridProps extends React.ComponentProps<"div">, IComponentSize {}
+interface CardProps extends React.ComponentProps<"div"> {
+  shape?: TComponentShape;
+}
+
+const CardGrid = (props: CardGridProps) => {
+  const { sizing = "medium", children } = props;
+
+  return <CardsGrid data-size={sizing}>{children}</CardsGrid>;
+};
+CardGrid.displayName = "Card.Grid";
+
+const CardMeta = (props: React.ComponentProps<"div">) => {
+  const { children } = props;
+
+  return (
+    <div className="p-y-medium-20 p-x-medium-30" {...props}>
+      {children}
+    </div>
+  );
+};
+CardMeta.displayName = "Card.Meta";
+
+const CardBody = (props: CardProps) => {
+  const { shape = "smooth", children } = props;
+
+  return <CardWrapper data-shape={shape}>{children}</CardWrapper>;
+};
+CardBody.displayName = "Card.Body";
+
+const Card = (props: CardProps) => {
+  const { shape = "smooth", children } = props;
+
+  return <CardContainer data-shape={shape}> {children}</CardContainer>;
+};
+Card.displayName = "Card";
+
+Card.Grid = CardGrid;
+Card.Meta = CardMeta;
+Card.Body = CardBody;
+
+export { Card, CardGrid, CardBody, CardMeta };

package/src/card/styles/index.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import styled, { css } from "styled-components";
+
+const GridDefaultStyles = css`
+  display: grid;
+  grid-gap: var(--measurement-medium-30) var(--measurement-medium-30);
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  }
+`;
+
+const GridSizeStyles = css`
+  &[data-size="small"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--measurement-large-80), 1fr)
+    );
+  }
+  &[data-size="medium"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--measurement-large-90), 1fr)
+    );
+  }
+  &[data-size="large"] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(calc(var(--measurement-large-90) * 1.2), 1fr)
+    );
+  }
+`;
+const CardShapeStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-30);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-medium-60);
+  }
+`;
+const CardDefaultStyles = css`
+  ${CardShapeStyles}
+
+  box-sizing: border-box;
+`;
+
+export const CardContainer = styled.div`
+  width: 100%;
+  background-color: var(--font-color-alpha-10);
+
+  ${CardDefaultStyles}
+`;
+export const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--measurement-large-10);
+  padding: var(--measurement-medium-60);
+  background-color: var(--contrast-color);
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+  ${CardDefaultStyles}
+`;
+
+export const CardsGrid = styled.div`
+  ${GridDefaultStyles}
+  ${GridSizeStyles}
+`;

package/src/copy-button/CopyButton.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, CopyButton } from "..";
+
+/**
+ * CopyButton are used to copy stored values when clicked.
+ */
+const meta = {
+  title: "Components/CopyButton",
+  component: CopyButton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CopyButton>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    value: "Hello, world!",
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="p-large-30">
+        <CopyButton variant="border" sizing="medium" {...args}>
+          Click to copy
+        </CopyButton>
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/copy-button/index.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React from "react";
+
+import { Tooltip, Button } from "../";
+import type { IButtonProperties } from "../";
+
+type TooltipValueProperties = {
+  copyLabel?: string;
+  copiedLabel?: string;
+};
+interface CopyButtonProperties extends IButtonProperties {
+  delay?: number;
+  value: string;
+  tooltip?: TooltipValueProperties;
+}
+
+/**
+ * CopyButton are used to copy stored values when clicked.
+ *
+ * @param {IButtonProperties} props - The props for the CopyButton component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.rawicon - Define whether the component is styles its svg children.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.value - The value copied when the CopyButton is clicked.
+ * @param {number} props.delay - The delay used to rendered the state change.
+ * @param {TooltipValueProperties} props.tooltip - The values used to convey the copy state.
+ * @param {ReactNode} props.children - The content to be rendered inside the CopyButton.
+ * @returns {ReactElement} The CopyButton component.
+ */
+export const CopyButton = ({
+  value,
+  delay,
+  tooltip,
+  children,
+  ...restProps
+}: CopyButtonProperties) => {
+  const timerRef = React.useRef<number | null>(null);
+  const [copied, setCopied] = React.useState(false);
+
+  const tooltipLabels = React.useMemo(() => {
+    return {
+      copy: tooltip?.copyLabel ?? "Copy",
+      copied: tooltip?.copiedLabel ?? "Copied!",
+    };
+  }, [tooltip]);
+
+  const copyToClipboard = async () => {
+    if (value == null) return;
+
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+    } catch {
+      // Best-effort fallback for older browsers
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+
+      try {
+        document.execCommand("copy");
+        setCopied(true);
+      } finally {
+        document.body.removeChild(ta);
+      }
+    }
+
+    if (timerRef.current != null) window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(() => setCopied(false), delay ?? 1000);
+  };
+
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current != null) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <Tooltip content={copied ? tooltipLabels.copied : tooltipLabels.copy}>
+      <Button
+        data-testId="copy-code"
+        aria-label="copy-code"
+        disabled={value == null}
+        aria-disabled={value == null}
+        variant={restProps?.variant ?? "ghost"}
+        onClick={copyToClipboard}
+        {...restProps}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+};
+CopyButton.displayName = "CopyButton";

package/src/dialog/index.tsx

@@ -38,7 +38,7 @@ export interface IDialogItemProperties
  *
  * @param {IDialogItemProperties} props - The props for the Dialog component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
  * @param {boolean} props.open - Whether the dialog is open or not.
  * @param {ReactNode} props.children - The content to be rendered inside the dialog.
  * @returns {ReactElement} The Dialog component.

package/src/dropdown/index.tsx

@@ -132,7 +132,7 @@ DropdownMenuTrigger.displayName = "DropdownMenu.Trigger";
  *
  * @param {IDropdownContentProperties} props - The props for the DropdownMenu.Content component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the component.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
  * @param {boolean} props.defaultOpen - The initial open state of the dropdown menu. Defaults to false.
  * @param {ReactNode} props.children - The content to be rendered inside the dropdown menu.
  * @returns {ReactElement} The DropdownMenu.Content component.

package/src/field/Field.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Field } from "..";
+import { Field, Page } from "..";
 import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
 
 const meta = {
@@ -131,16 +131,47 @@ export const Sizes = {
     );
   },
 };
+export const Shapes = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex align-center justify-center flex-wrap h-100 g-medium-30">
+            {["square", "smooth", "round"].map((item) => (
+              <Field.Root key={item}>
+                <Field
+                  shape={item}
+                  sizing="medium"
+                  placeholder={item}
+                  variant="secondary"
+                />
+              </Field.Root>
+            ))}
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
 export const Variants = {
   render: ({ ...args }) => {
     return (
-      <div className="flex g-medium-30">
-        {["primary", "secondary", "ghost"].map((item) => (
-          <Field.Root key={item}>
-            <Field placeholder={item} variant={item} />
-          </Field.Root>
-        ))}
-      </div>
+      <Page>
+        <Page.Content>
+          <div className="flex align-center justify-center flex-wrap h-100 g-medium-30">
+            {["primary", "secondary", "ghost"].map((item) => (
+              <Field.Root key={item}>
+                <Field
+                  shape="smooth"
+                  sizing="medium"
+                  placeholder={item}
+                  variant={item}
+                />
+              </Field.Root>
+            ))}
+          </div>
+        </Page.Content>
+      </Page>
     );
   },
 };

package/src/field/index.tsx

@@ -10,6 +10,7 @@ import {
   IComponentSize,
   ComponentVariantEnum,
   IComponentVariant,
+  TComponentShape,
 } from "../../../../types";
 
 export enum MetaVariantEnum {
@@ -26,6 +27,7 @@ export interface IField
     IComponentSize,
     IComponentVariant,
     IComponentStyling {
+  shape?: TComponentShape;
   hint?: string;
   error?: string;
 }
@@ -58,6 +60,7 @@ export interface IFieldComposition {
  * @param {boolean} props.raw - Define whether the component is styled or not.
  * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
  * @param {string} props.variant - The style definition used by the component.
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
  * @param {string} props.error - The error message to display.
  * @param {string} props.hint - The hint message to display.
  * @returns {ReactElement} The Field component.
@@ -67,6 +70,7 @@ const Field = (props: IField) => {
     raw,
     sizing = ComponentSizeEnum.Medium,
     variant = ComponentVariantEnum.Primary,
+    shape = "smooth",
     error,
     hint,
     ...restProps
@@ -85,6 +89,7 @@ const Field = (props: IField) => {
         data-error={Boolean(error)}
         data-variant={variant}
         data-size={sizing}
+        data-shape={shape}
         data-raw={Boolean(raw)}
         {...restProps}
       />

package/src/field/styles/index.ts

@@ -1,21 +1,21 @@
 import styled, { css } from "styled-components";
 
-const FieldDefaultStyles = css`
+export const FieldDefaultStyles = css`
   outline: none;
-  cursor: pointer;
+  cursor: text;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+
+  font-size: var(--fontsize-medium-20);
 
-  font-size: var(--fontsize-small-80);
-  font-weight: 500;
   line-height: 1.1;
   letter-spacing: calc(
     var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
   );
 
   border: var(--measurement-small-10) solid transparent;
-  border-radius: var(--measurement-medium-30);
   backdrop-filter: blur(var(--measurement-small-10));
   color: var(--font-color-alpha-60);
   width: fit-content;
@@ -33,29 +33,37 @@ const FieldDefaultStyles = css`
   &:focus,
   &:active {
     color: var(--font-color);
-
     svg,
     span,
     img {
       opacity: 1;
     }
   }
+
   &::placeholder {
     color: var(--font-color-alpha-30);
   }
+
   &:disabled {
     cursor: not-allowed;
     opacity: 0.6;
   }
 `;
-const FieldVariantsStyles = css`
+export const FieldVariantsStyles = css`
   &[data-variant="primary"] {
     background-color: var(--font-color-alpha-10);
+    border-color: var(--font-color-alpha-10);
+
+    &:focus,
+    &:active {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
+    }
 
     &[data-error="true"] {
       color: var(--color-red);
       background-color: var(--alpha-red-10);
       border-color: var(--alpha-red-10);
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
     }
   }
 
@@ -66,7 +74,12 @@ const FieldVariantsStyles = css`
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-20);
+    }
+
+    &:focus,
+    &:active {
+      box-shadow: 0 0 0 var(--measurement-small-30) var(--font-color-alpha-10);
     }
 
     &[data-error="true"] {
@@ -77,6 +90,7 @@ const FieldVariantsStyles = css`
       &:focus,
       &:active {
         background-color: var(--alpha-red-10);
+        box-shadow: 0 0 0 var(--measurement-small-30) var(--alpha-red-10);
       }
     }
   }
@@ -100,26 +114,37 @@ const FieldVariantsStyles = css`
     }
   }
 `;
-const FieldSizeStyles = css`
+export const FieldSizeStyles = css`
   &[data-size="small"] {
-    gap: var(--measurement-medium-10);
+    font-size: var(--fontsize-small-60);
+
     padding: 0 var(--measurement-medium-30);
     min-width: var(--measurement-medium-60);
     min-height: var(--measurement-medium-80);
   }
   &[data-size="medium"] {
-    gap: var(--measurement-medium-30);
     padding: 0 var(--measurement-medium-30);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-90);
     width: fit-content;
   }
   &[data-size="large"] {
-    padding: var(--measurement-medium-20) var(--measurement-medium-40);
+    padding: var(--measurement-medium-50);
     min-width: var(--measurement-medium-90);
     min-height: var(--measurement-medium-90);
   }
 `;
+export const FieldShapeStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+  }
+`;
 
 export const Fieldset = styled.fieldset<any>`
   all: unset;
@@ -134,6 +159,7 @@ export const Input = styled.input<any>`
     ${FieldDefaultStyles}
     ${FieldVariantsStyles}
     ${FieldSizeStyles}
+    ${FieldShapeStyles}
 
   &[data-error="true"] {
       &::placeholder {

package/src/index.ts

@@ -2,8 +2,11 @@ export * from "./accordion";
 export * from "./avatar";
 export * from "./badge";
 export * from "./button";
+export * from "./breadcrumb";
+export * from "./card";
 export * from "./checkbox";
 export * from "./collapsible";
+export * from "./copy-button";
 export * from "./dialog";
 export * from "./divider";
 export * from "./dropdown";
@@ -12,11 +15,16 @@ export * from "./otp-field";
 export * from "./overlay";
 export * from "./page";
 export * from "./portal";
+export * from "./privacy-field";
+export * from "./resizable";
 export * from "./sheet";
 export * from "./scrollarea";
+export * from "./spinner";
+export * from "./skeleton";
 export * from "./switch";
 export * from "./table";
 export * from "./tabs";
+export * from "./text-area";
 export * from "./toggle";
 export * from "./toolbar";
 export * from "./tooltip";

package/src/page/index.tsx

@@ -73,7 +73,7 @@ PageNavigation.displayName = "Page.Navigation";
  * @param {string} props.shortcut - The key combination used as keyboard shortcuts to trigger the Page.Toolbar.
  * @param {string} props.hotkey - The key to use in the key combination for the keyboard shortcuts.
  * @param {KeyBindingEnum} props.bindkey - The modifier key to use in the key combination.
- * @param {ComponentSizeEnum} props.sizing - The size of the Page.Toolbar.
+ * @param {ComponentSizeEnum} props.sizing - The size of the Page.Toolbar. Defaults to "medium".
  * @param {ComponentHeightEnum} props.height - The height definition of the Page.Toolbar.
  * @param {TComponentSide} props.side - The side of the Page.Toolbar.
  * @param {boolean} props.defaultOpen - Whether the Page.Toolbar should be open by default.

package/src/privacy-field/PrivacyField.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Page, PrivacyField } from "..";
+
+/**
+ * PrivacyFields are used to hide sensitive values typed by users.
+ */
+const meta = {
+  title: "Components/PrivacyField",
+  component: PrivacyField,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PrivacyField>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    variant: "secondary",
+    textIcon: <p className="fs-small-60">txt</p>,
+    passwordIcon: <p className="fs-small-60">pwd</p>,
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content className="p-large-30">
+        <PrivacyField {...args} />
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/privacy-field/index.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+
+import { Field } from "../";
+import { Wrapper, Trigger } from "./styles";
+
+import type { IField } from "../";
+
+type PrivacyType = "password" | "text";
+interface PrivacyFieldProps extends IField {
+  defaultType?: PrivacyType;
+  textIcon: React.ReactNode;
+  passwordIcon: React.ReactNode;
+}
+
+/**
+ * PrivacyFields are used to hide sensitive values typed by users.
+ *
+ * @param {PrivacyFieldProps} props - The props for the PrivacyField component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.error - The error message to display.
+ * @param {string} props.hint - The hint message to display.
+ * @param {string} props.defaultType - The type of the PrivacyField when rendered.
+ * @param {ReactElement} props.textIcon - The Icon used to convey the text type information.
+ * @param {ReactElement} props.passwordIcon - The Icon used to convey the password type information.
+ * @returns {ReactElement} The PrivacyField component.
+ */
+export const PrivacyField = ({
+  defaultType,
+  textIcon,
+  passwordIcon,
+  ...restProps
+}: PrivacyFieldProps) => {
+  const [type, setType] = React.useState<PrivacyType>(
+    defaultType ?? "password"
+  );
+
+  const handleChangeType = React.useCallback(() => {
+    if (type === "text") setType("password");
+    if (type === "password") setType("text");
+  }, [type, setType]);
+
+  return (
+    <Wrapper className="flex">
+      <Field autoComplete="off" type={type} {...restProps} />
+      <Trigger variant="ghost" sizing="small" onClick={handleChangeType}>
+        {type === "text" && textIcon}
+        {type === "password" && passwordIcon}
+      </Trigger>
+    </Wrapper>
+  );
+};
+PrivacyField.displayName = "PrivacyField";

package/src/privacy-field/styles/index.ts

@@ -0,0 +1,17 @@
+"use client";
+
+import styled from "styled-components";
+import { Button, Field } from "../../";
+
+export const Wrapper = styled(Field.Wrapper)`
+  position: relative;
+
+  input {
+    width: 100% !important;
+  }
+`;
+export const Trigger = styled(Button)`
+  position: absolute !important;
+  right: var(--measurement-medium-50);
+  top: calc(var(--measurement-medium-50));
+`;