@usefui/components 1.5.1

package/src/tabs/index.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import React, { Children } from "react";
+import { TabsProvider, useTabs } from "./hooks";
+import { Button, IButtonProperties } from "../button";
+import { TabWrapper } from "./styles";
+import { IReactChildren, ComponentVariantEnum } from "../../../../types";
+
+export interface ITabsProperties extends React.ComponentProps<"div"> {
+  value?: string;
+  defaultOpen?: string;
+}
+
+export interface ITabsComposition {
+  Root: typeof TabsRoot;
+  Trigger: typeof TabsTrigger;
+  Content: typeof TabsContent;
+}
+
+/**
+ * Tabs are components for a set of tab panels that allows the user to switch between them.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the tabs can be navigated and activated using the keyboard.
+ * - Ensure that the focus is managed correctly when switching between tabs.
+ * - Ensure that the active tab is visibly indicated and that its content is visible and focusable.
+ *
+ * @param {ITabsProperties} props - The props for the Tabs component.
+ * @param {string} props.defaultOpen - The value of the tab panel that should be open by default.
+ * @param {ReactNode} props.children - The content to be rendered inside the tabs component.
+ * @returns {ReactElement} The Tabs component.
+ */
+const Tabs = (props: ITabsProperties) => {
+  const { defaultOpen, children, ...restProps } = props;
+  const { methods } = useTabs();
+  const { applyValue } = methods;
+
+  const childArray = Children.toArray(children);
+  const firstChild = childArray[0];
+
+  React.useEffect(() => {
+    if (React.isValidElement<{ value: string }>(firstChild)) {
+      if (childArray.length > 0 && applyValue)
+        applyValue(firstChild.props.value);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (defaultOpen && applyValue) applyValue(defaultOpen);
+  }, []);
+
+  return (
+    <TabWrapper role="tablist" {...restProps}>
+      {children}
+    </TabWrapper>
+  );
+};
+Tabs.displayName = "Tabs";
+
+const TabsRoot = ({ children }: IReactChildren) => {
+  return <TabsProvider>{children}</TabsProvider>;
+};
+TabsRoot.displayName = "Tabs.Root";
+
+/**
+ * Tabs.Trigger is used to triggers the expansion and collapse of the associated Tabs.Content component.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive title for the trigger that accurately conveys the content of the associated tab panel.
+ * - Ensure that the trigger can be operated using only the keyboard.
+ * - Ensure that the focus is properly managed when the trigger is activated.
+ *
+ * @param {IButtonProperties} props - The props for the Tabs.Trigger component.
+ * @param {string} props.value - The value used to bind the Tabs.Trigger and Tabs.Content components.
+ * @param {ReactNode} props.children - The content to be rendered inside the tabs trigger.
+ * @returns {ReactElement} The Tabs.Trigger component.
+ */
+const TabsTrigger = (props: IButtonProperties) => {
+  const { value, onClick, children, ...restProps } = props;
+  const { states, methods } = useTabs();
+  const { applyValue, getTabsId } = methods;
+
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getTabsId && getTabsId({ value, type: "trigger" }),
+    content: getTabsId && getTabsId({ value, type: "content" }),
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (applyValue) applyValue(value);
+    if (onClick) onClick(event);
+  };
+
+  return (
+    <Button
+      type="button"
+      role="tab"
+      title={`${value}-tab`}
+      id={String(IdHandler.trigger)}
+      value={value}
+      onClick={handleClick}
+      aria-selected={hasSameValueAsContext}
+      data-controls={IdHandler.content}
+      data-state={hasSameValueAsContext ? "active" : "inactive"}
+      variant={props.variant ?? ComponentVariantEnum.Ghost}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+TabsTrigger.displayName = "Tabs.Trigger";
+
+/**
+ * Tabs.Content is used to contains the content of the associated Tabs.Trigger component.
+ *
+ * **Best practices:**
+ *
+ * - Ensure that the content is hidden when the associated tab panel is collapsed.
+ * - Ensure that the content is properly focused when the associated tab panel is expanded.
+ *
+ * @param {ITabsProperties} props - The props for the Tabs.Content component.
+ * @param {string} props.value - The value used to bind the Tabs.Content and Tabs.Trigger components.
+ * @param {ReactNode} props.children - The content to be rendered inside the tab.
+ * @returns {ReactElement} The Tabs.Content component.
+ */
+const TabsContent = (props: ITabsProperties) => {
+  const { value, children, ...restProps } = props;
+  const { states, methods } = useTabs();
+  const { getTabsId } = methods;
+
+  const hasSameValueAsContext = value === states.value;
+  const IdHandler = {
+    trigger: getTabsId && getTabsId({ value, type: "trigger" }),
+    content: getTabsId && getTabsId({ value, type: "content" }),
+  };
+
+  return (
+    <div
+      tabIndex={0}
+      role="tabpanel"
+      title={`${value}-tabpanel`}
+      id={String(IdHandler.content)}
+      data-value={value}
+      data-state={hasSameValueAsContext ? "active" : "inactive"}
+      aria-labelledby={IdHandler.trigger ?? restProps["aria-labelledby"]}
+      {...restProps}
+    >
+      {hasSameValueAsContext && children}
+    </div>
+  );
+};
+TabsContent.displayName = "Tabs.Content";
+
+Tabs.Root = TabsRoot;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+
+export { TabsRoot, Tabs, TabsTrigger, TabsContent };

package/src/tabs/styles/index.ts

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const TabWrapper = styled.div<any>`
+  button {
+    &[aria-selected="true"] {
+      color: var(--font-color) !important;
+    }
+  }
+`;

package/src/toggle/Toggle.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Toggle } from "..";
+import { ComponentVariantEnum } from "../../../../types";
+
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Toggle>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: ({ ...args }) => {
+    const [checked, setChecked] = React.useState(false);
+    const variant = checked
+      ? ComponentVariantEnum.Secondary
+      : ComponentVariantEnum.Border;
+
+    return <Toggle variant={variant} onClick={() => setChecked(!checked)} />;
+  },
+};
+export const DefaultChecked: Story = {
+  render: ({ ...args }) => {
+    const [checked, setChecked] = React.useState(true);
+    const variant = checked
+      ? ComponentVariantEnum.Secondary
+      : ComponentVariantEnum.Border;
+
+    return (
+      <Toggle
+        defaultChecked
+        variant={variant}
+        onClick={() => setChecked(!checked)}
+      />
+    );
+  },
+};
+export const Group: Story = {
+  render: ({ ...args }) => {
+    const [checkedItems, setCheckedItems] = React.useState<object>({
+      primary: false,
+      secondary: true,
+      tertiary: false,
+    });
+
+    const getVariant = (label) => {
+      return Boolean(checkedItems[label])
+        ? ComponentVariantEnum.Secondary
+        : ComponentVariantEnum.Border;
+    };
+    const handleCheckedItem = (event: any) => {
+      checkedItems[event.target.name] = !checkedItems[event.target.name];
+      setCheckedItems({ ...checkedItems });
+    };
+
+    return (
+      <div className="flex justify-start align-center g-medium-30">
+        {[
+          Object.keys(checkedItems).map((item) => (
+            <Toggle
+              key={item}
+              name={item}
+              variant={getVariant(item)}
+              onClick={handleCheckedItem}
+            />
+          )),
+        ]}
+      </div>
+    );
+  },
+};
+export const Sizes: Story = {
+  render: ({ ...args }) => {
+    const [checkedItems, setCheckedItems] = React.useState<object>({
+      large: false,
+      medium: false,
+      small: false,
+    });
+
+    const getVariant = (label) => {
+      return Boolean(checkedItems[label])
+        ? ComponentVariantEnum.Secondary
+        : ComponentVariantEnum.Border;
+    };
+    const handleCheckedItem = (event: any) => {
+      checkedItems[event.target.name] = !checkedItems[event.target.name];
+      setCheckedItems({ ...checkedItems });
+    };
+
+    return (
+      <div className="flex justify-start align-center g-medium-30">
+        {[
+          Object.keys(checkedItems).map((item) => (
+            <Toggle
+              key={item}
+              name={item}
+              variant={getVariant(item)}
+              sizing={item}
+              onClick={handleCheckedItem}
+            >
+              {item}
+            </Toggle>
+          )),
+        ]}
+      </div>
+    );
+  },
+};

package/src/toggle/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React from "react";
+import { Button, IButtonProperties } from "../button";
+
+export interface IToggleProperties extends IButtonProperties {
+  defaultChecked?: boolean;
+}
+
+/**
+ * Toggle are button that can be switched on or off.
+ *
+ * **Best practices:**
+ *
+ * - Define the checked state of toggles with different variants, labels.
+ * - The interaction must have predictable behavior.
+ *
+ * @param {IToggleProperties} props - The props for the Toggle component.
+ * @param {boolean} props.defaultChecked - The initial checked state of the toggle. Defaults to false.
+ * @param {ReactNode} props.children - The content to be rendered inside the toggle button.
+ * @returns {ReactElement} The Toggle component.
+ */
+export const Toggle = (props: IToggleProperties) => {
+  const { defaultChecked, onClick, disabled, children, ...restProps } = props;
+  const [checked, setChecked] = React.useState<boolean>(
+    defaultChecked ?? false
+  );
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) onClick(event);
+    if (!disabled) setChecked((prevChecked) => !prevChecked);
+  };
+
+  React.useEffect(() => {
+    if (defaultChecked !== undefined) {
+      setChecked(Boolean(defaultChecked));
+    }
+  }, [defaultChecked]);
+
+  return (
+    <Button
+      role="switch"
+      onClick={handleClick}
+      value={String(checked)}
+      aria-checked={checked}
+      data-checked={Boolean(checked)}
+      data-disabled={Boolean(disabled)}
+      disabled={disabled}
+      {...restProps}
+    >
+      {children}
+    </Button>
+  );
+};
+Toggle.displayName = "Toggle";

package/src/toolbar/Toolbar.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Toolbar } from "..";
+import {
+  ComponentSizeEnum,
+  ComponentSideEnum,
+  ComponentHeightEnum,
+} from "../../../../types";
+
+const meta = {
+  title: "Components/Toolbar",
+  component: Toolbar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Toolbar>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default = {
+  args: {
+    raw: false,
+    defaultOpen: false,
+    showoncollapse: false,
+    showfirstchild: false,
+    shortcut: false,
+    hotkey: ":",
+    bindkey: null,
+  },
+  argTypes: {
+    side: {
+      options: [
+        ComponentSideEnum.Top,
+        ComponentSideEnum.Right,
+        ComponentSideEnum.Bottom,
+        ComponentSideEnum.Left,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+    height: {
+      options: [ComponentHeightEnum.Fullscreen, ComponentHeightEnum.Auto],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Toolbar.Root>
+      <Toolbar>
+        <Toolbar.Section>
+          <Toolbar.Item>🐻‍❄️</Toolbar.Item>
+        </Toolbar.Section>
+
+        <Toolbar.Trigger>&hArr;</Toolbar.Trigger>
+      </Toolbar>
+    </Toolbar.Root>
+  ),
+};
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <Toolbar.Root>
+      <Toolbar defaultOpen>
+        <Toolbar.Section>
+          <Toolbar.Item>🐻‍❄️</Toolbar.Item>
+        </Toolbar.Section>
+
+        <Toolbar.Trigger>&hArr;</Toolbar.Trigger>
+      </Toolbar>
+    </Toolbar.Root>
+  ),
+};
+export const Shortcut: Story = {
+  render: ({ ...args }) => (
+    <Toolbar.Root>
+      <Toolbar shortcut hotkey="t">
+        <Toolbar.Section>
+          <Toolbar.Item>🐻‍❄️</Toolbar.Item>
+        </Toolbar.Section>
+
+        <Toolbar.Trigger>&hArr;</Toolbar.Trigger>
+      </Toolbar>
+    </Toolbar.Root>
+  ),
+};

package/src/toolbar/hooks/index.tsx

@@ -0,0 +1,35 @@
+import React, { useState, createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const ToolbarContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useToolbar = () => useContext(ToolbarContext);
+
+export const ToolbarProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useToolbarProvider();
+
+  return (
+    <ToolbarContext.Provider value={context}>
+      {children}
+    </ToolbarContext.Provider>
+  );
+};
+
+function useToolbarProvider(): IComponentAPI {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const toolbarId = React.useId();
+
+  return {
+    id: toolbarId,
+    states: {
+      expanded,
+    },
+    methods: {
+      toggleToolbar: (state: boolean) => setExpanded(state ?? !expanded),
+    },
+  };
+}