@usefui/components 1.6.0 → 1.7.1

package/src/dropdown/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { DropdownMenu } from "..";
+import { Badge, Divider, DropdownMenu, Page } from "..";
 import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
 
 // Duplicated doc: The JSDoc content isn't rendering on Storybook.
@@ -23,15 +23,18 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30 flex align-center justify-center w-100 h-100">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof DropdownMenu>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
+
 export const Default: Story = {
   args: {
     raw: false,
@@ -63,24 +66,30 @@ export const Default: Story = {
   },
   render: ({ ...args }) => (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
       <DropdownMenu>
+        <DropdownMenu.Trigger variant="secondary">Actions</DropdownMenu.Trigger>
+
         <DropdownMenu.Content>
-          {["🐻", "🐻‍❄️", "🦊", "🐱", "🐶"].map((item) => (
-            <DropdownMenu.Item key={item}>{item}</DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </DropdownMenu.Root>
-  ),
-};
-export const DefaultOpen: Story = {
-  render: ({ ...args }) => (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
-      <DropdownMenu>
-        <DropdownMenu.Content defaultOpen>
-          <DropdownMenu.Item>🐻🐻‍❄️🦊🐱🐶</DropdownMenu.Item>
+          <DropdownMenu.Item className="flex justify-between align-center">
+            Cut
+            <Badge variant="border">
+              <span className="fs-small-50">⌘X</span>
+            </Badge>
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item className="flex justify-between align-center">
+            Copy
+            <Badge variant="border">
+              <span className="fs-small-50">⌘C</span>
+            </Badge>
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item className="flex justify-between align-center">
+            Paste
+            <Badge variant="border">
+              <span className="fs-small-50">⌘V</span>
+            </Badge>
+          </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
     </DropdownMenu.Root>
@@ -89,10 +98,39 @@ export const DefaultOpen: Story = {
 export const RadioItem: Story = {
   render: ({ ...args }) => (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger>🐻‍❄️</DropdownMenu.Trigger>
       <DropdownMenu>
-        <DropdownMenu.Content>
-          <DropdownMenu.Item radio>🐻🐻‍❄️🦊🐱🐶</DropdownMenu.Item>
+        <DropdownMenu.Trigger variant="secondary">Actions</DropdownMenu.Trigger>
+
+        <DropdownMenu.Content className="flex flex-column g-small-60">
+          <DropdownMenu.Item
+            className="flex justify-between align-center"
+            radio
+          >
+            Cut
+            <Badge variant="border">
+              <span className="fs-small-50">⌘X</span>
+            </Badge>
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className="flex justify-between align-center"
+            radio
+          >
+            Copy
+            <Badge variant="border">
+              <span className="fs-small-50">⌘C</span>
+            </Badge>
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className="flex justify-between align-center"
+            radio
+          >
+            Paste
+            <Badge variant="border">
+              <span className="fs-small-50">⌘V</span>
+            </Badge>
+          </DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>
     </DropdownMenu.Root>

package/src/dropdown/index.tsx

@@ -203,38 +203,49 @@ const DropdownMenuContent = React.forwardRef<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [states.open]);
 
+  React.useEffect(() => {
+    if (!states.open) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && methods.toggleOpen) {
+        methods.toggleOpen();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [states.open]);
+
+  if (!states.open) return null;
   return (
-    <>
-      {states.open && (
-        <ContentWrapper
-          ref={contentRef}
-          id={id.split("|").at(-1)}
-          role="menu"
-          tabIndex={-1}
-          aria-labelledby={id.split("|").at(0)}
-          data-state={applyDataState(Boolean(states.open))}
-          data-sizing={sizing}
-          data-side={
-            hasEnoughHorizontalSpace
-              ? ComponentSideEnum.Left
-              : ComponentSideEnum.Right
-          }
-          data-align={
-            hasEnoughHorizontalSpace
-              ? ComponentSideEnum.Left
-              : ComponentSideEnum.Right
-          }
-          data-raw={Boolean(raw)}
-          style={{
-            top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
-            left: hasEnoughHorizontalSpace ? positions.ltr : positions.rtl,
-          }}
-          {...restProps}
-        >
-          {children}
-        </ContentWrapper>
-      )}
-    </>
+    <ContentWrapper
+      ref={contentRef}
+      id={id.split("|").at(-1)}
+      role="menu"
+      tabIndex={-1}
+      aria-labelledby={id.split("|").at(0)}
+      data-state={applyDataState(Boolean(states.open))}
+      data-sizing={sizing}
+      data-side={
+        hasEnoughHorizontalSpace
+          ? ComponentSideEnum.Left
+          : ComponentSideEnum.Right
+      }
+      data-align={
+        hasEnoughHorizontalSpace
+          ? ComponentSideEnum.Left
+          : ComponentSideEnum.Right
+      }
+      data-raw={Boolean(raw)}
+      style={{
+        top: hasEnoughVerticalSpace ? positions.ttb : positions.btt,
+        left: hasEnoughHorizontalSpace ? positions.ltr : positions.rtl,
+      }}
+      {...restProps}
+    >
+      {children}
+    </ContentWrapper>
   );
 });
 DropdownMenuContent.displayName = "DropdownMenu.Content";

package/src/dropdown/styles/index.ts

@@ -1,13 +1,5 @@
-import styled, { css, keyframes } from "styled-components";
+import styled, { css } from "styled-components";
 
-const FadeIn = keyframes`
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
 const ContentWrapperSizes = css`
   --small: var(--measurement-large-60);
   --medium: var(--measurement-large-80);
@@ -39,6 +31,17 @@ export const ContentWrapper = styled.ul<any>`
   --medium: var(--measurement-large-80);
   --large: var(--measurement-large-90);
 
+  @keyframes slide-in {
+    0% {
+      opacity: 0;
+      transform: translateY(calc(var(--measurement-small-60) * -1));
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   &[data-raw="false"] {
     position: fixed;
     margin: 0;
@@ -51,11 +54,11 @@ export const ContentWrapper = styled.ul<any>`
     border-radius: var(--measurement-medium-30);
 
     z-index: var(--depth-default-100);
-    animation-duration: 0.2s;
-    animation-name: ${FadeIn};
-    animation-fill-mode: backwards;
 
     ${ContentWrapperSizes}
+    animation-duration: 0.2s;
+    animation-name: slide-in;
+    animation-fill-mode: backwards;
   }
 `;
 
@@ -66,20 +69,28 @@ export const ItemWrapper = styled.li<any>`
   user-select: none;
 
   &[data-raw="false"] {
-    font-size: var(--fontsize-small-80);
-    padding: var(--measurement-medium-30);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
     border-radius: var(--measurement-medium-20);
+
     text-align: left;
-    color: var(--font-color-alpha-60);
+    font-weight: 600;
+    letter-spacing: calc(
+      var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+    );
+    font-size: var(--fontsize-medium-10);
+    color: var(--font-color);
+
     outline: none;
-    transition: all ease-in-out 0.2s;
     cursor: pointer;
 
+    transition: all ease-in-out 0.2s;
+
     &:hover,
     &:focus,
-    &:active {
-      color: var(--font-color);
-      background-color: var(--font-color-alpha-10);
+    &:active,
+    &:focus-within,
+    &:has(:active) {
+      background-color: var(--contrast-color);
     }
   }
 

package/src/field/Field.stories.tsx

@@ -10,9 +10,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Field>;
@@ -121,13 +123,19 @@ export const ComposedError = {
 export const Sizes = {
   render: ({ ...args }) => {
     return (
-      <div className="flex g-medium-30">
-        {["large", "medium", "small"].map((item) => (
-          <Field.Root key={item}>
-            <Field placeholder={item} sizing={item} />
-          </Field.Root>
-        ))}
-      </div>
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+            {["large", "medium", "small"].map((item) => (
+              <Field.Root key={item}>
+                <Field.Wrapper style={{ width: 325 }}>
+                  <Field sizing={item} placeholder={item} variant="secondary" />
+                </Field.Wrapper>
+              </Field.Root>
+            ))}
+          </div>
+        </Page.Content>
+      </Page>
     );
   },
 };
@@ -136,15 +144,17 @@ export const Shapes = {
     return (
       <Page>
         <Page.Content>
-          <div className="flex align-center justify-center flex-wrap h-100 g-medium-30">
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
             {["square", "smooth", "round"].map((item) => (
               <Field.Root key={item}>
-                <Field
-                  shape={item}
-                  sizing="medium"
-                  placeholder={item}
-                  variant="secondary"
-                />
+                <Field.Wrapper style={{ width: 325 }}>
+                  <Field
+                    shape={item}
+                    sizing="medium"
+                    placeholder={item}
+                    variant="secondary"
+                  />
+                </Field.Wrapper>
               </Field.Root>
             ))}
           </div>
@@ -158,15 +168,17 @@ export const Variants = {
     return (
       <Page>
         <Page.Content>
-          <div className="flex align-center justify-center flex-wrap h-100 g-medium-30">
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
             {["primary", "secondary", "ghost"].map((item) => (
               <Field.Root key={item}>
-                <Field
-                  shape="smooth"
-                  sizing="medium"
-                  placeholder={item}
-                  variant={item}
-                />
+                <Field.Wrapper style={{ width: 325 }}>
+                  <Field
+                    shape="smooth"
+                    sizing="medium"
+                    placeholder={item}
+                    variant={item}
+                  />
+                </Field.Wrapper>
               </Field.Root>
             ))}
           </div>
@@ -175,3 +187,150 @@ export const Variants = {
     );
   },
 };
+export const Text = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Text</Field.Label>
+                <Field variant="secondary" placeholder="Placeholder..." />
+                <Field.Meta variant="hint">
+                  This is a hint text to help user.
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+export const Number = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Number</Field.Label>
+                <Field.Number placeholder="100" min={0} max={100} />
+                <Field.Meta variant="hint">
+                  This is a hint text to help user.
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+
+export const Date = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Date</Field.Label>
+                <Field.Date
+                  variant="secondary"
+                  // defaultValue={new Date()}
+                  locale="en-US"
+                  withTime
+                />
+                <Field.Meta variant="hint">
+                  This is a hint text to help user.
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+export const File = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Upload file</Field.Label>
+                <Field.File
+                  variant="secondary"
+                  sizing="medium"
+                  trigger={
+                    <span className="fs-small-50 flex align-center justify-center w-100 h-100">
+                      Upload
+                    </span>
+                  }
+                  onFileChange={(files) => console.log(files)}
+                  multiple
+                />
+                <Field.Meta variant="hint">
+                  SVG, PNG, JPG or GIF (max. 800x400px).
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+export const Password = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Password</Field.Label>
+                <Field.Password variant="secondary" sizing="medium" />
+                <Field.Meta variant="hint">
+                  Must be at least 8 characters.
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+export const Tag = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content>
+          <div className="flex flex-column align-center justify-center flex-wrap h-100 w-100 g-medium-30">
+            <Field.Root>
+              <Field.Wrapper style={{ width: 325 }}>
+                <Field.Label>Tags</Field.Label>
+                <Field.Tag
+                  defaultValue={["Design", "Engineering"]}
+                  onChange={(tags) => console.log(tags)}
+                  placeholder="Type and press Enter…"
+                  allowed={["Design", "Engineering", "UI", "UX", "AI"]}
+                />
+                <Field.Meta variant="hint">
+                  This is a hint text to help user.
+                </Field.Meta>
+              </Field.Wrapper>
+            </Field.Root>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};