@usefui/components 1.5.1

package/src/switch/hooks/index.tsx

@@ -0,0 +1,33 @@
+import React, { useState, createContext, useContext } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const SwitchContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useSwitch = () => useContext(SwitchContext);
+
+export const SwitchProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useSwitchProvider();
+
+  return (
+    <SwitchContext.Provider value={context}>{children}</SwitchContext.Provider>
+  );
+};
+
+function useSwitchProvider(): IComponentAPI {
+  const [checked, setChecked] = useState<boolean>(false);
+  const switchId = React.useId();
+
+  return {
+    id: switchId,
+    states: {
+      checked,
+    },
+    methods: {
+      toggleSwitch: (): boolean | void => setChecked(!checked),
+    },
+  };
+}

package/src/switch/index.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React from "react";
+import { SwitchProvider, useSwitch } from "./hooks";
+import { TriggerWrapper, Thumb } from "./styles";
+import {
+  IReactChildren,
+  IComponentStyling,
+  ComponentSizeEnum,
+  ComponentVariantEnum,
+  IComponentSize,
+  IComponentVariant,
+} from "../../../../types";
+
+export interface ISwitchComposition {
+  Root: typeof SwitchRoot;
+  Thumb: typeof SwitchThumb;
+}
+
+export interface ISwitchProperties
+  extends React.ComponentProps<"button">,
+    IComponentSize,
+    IComponentVariant,
+    IComponentStyling {
+  defaultChecked?: boolean;
+}
+export interface ISwitchThumbProperties
+  extends React.ComponentProps<"span">,
+    IComponentSize,
+    IComponentStyling {}
+
+/**
+ * Switch are toggle components that allows the user to turn a setting on or off.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each switch.
+ * - The interaction must have predictable behavior.
+ *
+ * @param {ISwitchProperties} props - The props for the Switch component.
+ * @param {boolean} props.raw - Whether the switch should be rendered without any styles.
+ * @param {ComponentSizeEnum} props.sizing - The size of the switch.
+ * @param {ComponentVariantEnum} props.variant - The variant of the switch.
+ * @param {boolean} props.defaultChecked - The initial state of the switch.
+ * @param {ReactNode} props.children - The content to be rendered inside the switch.
+ * @returns {ReactElement} The Switch component.
+ */
+const Switch = (props: ISwitchProperties) => {
+  const {
+    raw,
+    sizing = ComponentSizeEnum.Medium,
+    variant = ComponentVariantEnum.Primary,
+    value,
+    defaultChecked,
+    disabled,
+    onClick,
+    children,
+    ...restProps
+  } = props;
+  const { id, states, methods } = useSwitch();
+  const { toggleSwitch } = methods;
+
+  const handleClick = (event: any) => {
+    if (onClick) onClick(event);
+    if (toggleSwitch) toggleSwitch();
+  };
+
+  React.useEffect(() => {
+    if (defaultChecked && toggleSwitch) toggleSwitch();
+  }, [defaultChecked]);
+
+  return (
+    <TriggerWrapper
+      type="button"
+      role="switch"
+      title="switch-trigger"
+      onClick={handleClick}
+      value={String(states.checked)}
+      aria-label={`${id}-switch-trigger`}
+      aria-checked={Boolean(states.checked)}
+      data-disabled={String(disabled ?? false)}
+      data-variant={variant}
+      data-size={sizing}
+      data-raw={Boolean(raw)}
+      {...restProps}
+    >
+      <title>Switch</title>
+      {children}
+    </TriggerWrapper>
+  );
+};
+Switch.displayName = "Switch";
+
+const SwitchRoot = ({ children }: IReactChildren) => {
+  return <SwitchProvider>{children}</SwitchProvider>;
+};
+SwitchRoot.displayName = "Switch.Root";
+
+const SwitchThumb = (props: ISwitchThumbProperties) => {
+  const { raw, sizing } = props;
+  const { id, states } = useSwitch();
+
+  return (
+    <Thumb
+      role="presentation"
+      title="switch-thumb"
+      tabIndex={-1}
+      aria-hidden={true}
+      aria-label={`${id}-switch-thumb`}
+      data-checked={states.checked}
+      data-raw={Boolean(raw)}
+      data-size={sizing ?? ComponentSizeEnum.Medium}
+      {...props}
+    />
+  );
+};
+SwitchThumb.displayName = "Switch.Thumb";
+
+Switch.Root = SwitchRoot;
+Switch.Thumb = SwitchThumb;
+
+export { SwitchRoot, Switch, SwitchThumb };

package/src/switch/styles/index.ts

@@ -0,0 +1,118 @@
+import styled, { css } from "styled-components";
+
+const SwitchDefaultStyles = css`
+  all: unset;
+
+  border: var(--measurement-small-10) solid transparent;
+  border-radius: var(--measurement-large-90);
+  transition: all 0.2s ease-in-out 0s;
+
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+const SwitchVariantsStyles = css`
+  &[data-variant="primary"] {
+    &[aria-checked="true"] {
+      background-color: var(--color-green);
+      border-color: var(--font-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="secondary"] {
+    &[aria-checked="true"] {
+      background-color: var(--font-color-alpha-10);
+      border-color: var(--font-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      background-color: var(--body-color-alpha-10);
+    }
+  }
+
+  &[data-variant="ghost"] {
+    &[aria-checked="true"] {
+      border-color: var(--font-color-alpha-10);
+      background-color: var(--body-color-alpha-10);
+    }
+    &[aria-checked="false"] {
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+`;
+const SwitchSizeStyles = css`
+  &[data-size="small"] {
+    width: calc(var(--measurement-medium-60) * 1.33);
+    height: var(--measurement-medium-50);
+
+    span {
+      width: var(--measurement-medium-40);
+      height: var(--measurement-medium-40);
+      &[data-checked="true"] {
+        transform: translateX(var(--measurement-medium-40));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-60));
+      }
+    }
+  }
+
+  &[data-size="medium"] {
+    width: calc(var(--measurement-medium-60) * 1.66);
+    height: var(--measurement-medium-60);
+
+    span {
+      width: var(--measurement-medium-50);
+      height: var(--measurement-medium-50);
+      &[data-checked="true"] {
+        transform: translateX(var(--measurement-medium-50));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-60));
+      }
+    }
+  }
+
+  &[data-size="large"] {
+    width: calc(var(--measurement-medium-60) * 2.33);
+    height: var(--measurement-medium-70);
+
+    span {
+      width: var(--measurement-medium-60);
+      height: var(--measurement-medium-60);
+      &[data-checked="true"] {
+        transform: translateX(calc(var(--measurement-medium-60) * 1.133));
+      }
+      &[data-checked="false"] {
+        transform: translateX(var(--measurement-small-80));
+      }
+    }
+  }
+`;
+
+export const TriggerWrapper = styled.button<any>`
+  &[data-raw="false"] {
+    ${SwitchDefaultStyles}
+    ${SwitchVariantsStyles}
+    ${SwitchSizeStyles}
+  }
+`;
+export const Thumb = styled.span<any>`
+  &[data-raw="false"] {
+    all: unset;
+    display: block;
+
+    background: var(--font-color-alpha-60);
+    border-radius: 100%;
+    transition: all 0.1s ease-in-out 0.2s;
+
+    &[data-checked="true"] {
+      background: var(--font-color);
+    }
+  }
+`;

package/src/table/index.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import React from "react";
+import { ScrollArea, IScrollAreaProperties } from "../scrollarea";
+import {
+  TableLayer,
+  TableWrapper,
+  RowWrapper,
+  HeadCellWrapper,
+  CellWrapper,
+} from "./styles";
+
+/**
+ * Table component that provides a scrollable table with styled elements.
+ *
+ * @param {IScrollAreaProperties & React.ComponentProps<"table">} props - The props for the Table component
+ * @returns {React.ReactElement} The Table component
+ */
+const Table = ({
+  children,
+  ...restProps
+}: IScrollAreaProperties & React.ComponentProps<"table">) => {
+  return (
+    <ScrollArea as={TableLayer} role="presentation" tabIndex={-1}>
+      <TableWrapper {...restProps} cellSpacing="0" cellPadding="0">
+        {children}
+      </TableWrapper>
+    </ScrollArea>
+  );
+};
+Table.displayName = "Table";
+
+/**
+ * Table head component
+ *
+ * @param {React.ComponentProps<"thead">} props - The props for the TableHead component
+ * @returns {React.ReactElement} The TableHead component
+ */
+const TableHead = ({
+  children,
+  ...restProps
+}: React.ComponentProps<"thead">) => {
+  return <thead {...restProps}>{children}</thead>;
+};
+TableHead.displayName = "Table.Head";
+
+/**
+ * Table body component
+ *
+ * @param {React.ComponentProps<"tbody">} props - The props for the TableBody component
+ * @returns {React.ReactElement} The TableBody component
+ */
+const TableBody = ({
+  children,
+  ...restProps
+}: React.ComponentProps<"tbody">) => {
+  return <tbody {...restProps}>{children}</tbody>;
+};
+TableBody.displayName = "Table.Body";
+
+/**
+ * Table head cell component
+ *
+ * @param {React.ComponentProps<"th">} props - The props for the TableHeadCell component
+ * @returns {React.ReactElement} The TableHeadCell component
+ */
+const TableHeadCell = ({
+  children,
+  ...restProps
+}: React.ComponentProps<"th">) => {
+  return (
+    <HeadCellWrapper colSpan={1} {...restProps}>
+      <div className="flex align-center g-medium-30">{children}</div>
+    </HeadCellWrapper>
+  );
+};
+TableHeadCell.displayName = "Table.HeadCell";
+
+/**
+ * Table row component
+ *
+ * @param {React.ComponentProps<"tr">} props - The props for the TableRow component
+ * @returns {React.ReactElement} The TableRow component
+ */
+const TableRow = ({ children, ...restProps }: React.ComponentProps<"tr">) => {
+  return (
+    <RowWrapper className="p-medium-30" {...restProps}>
+      {children}
+    </RowWrapper>
+  );
+};
+TableRow.displayName = "Table.Row";
+
+/**
+ * Table cell component
+ *
+ * @param {React.ComponentProps<"td">} props - The props for the TableCell component
+ * @returns {React.ReactElement} The TableCell component
+ */
+const TableCell = ({ children, ...restProps }: React.ComponentProps<"td">) => {
+  return (
+    <CellWrapper {...restProps}>
+      <div className="flex align-center g-medium-30">{children}</div>
+    </CellWrapper>
+  );
+};
+TableCell.displayName = "Table.Cell";
+
+/**
+ * Table footer component
+ *
+ * @param {React.ComponentProps<"tfoot">} props - The props for the TableFooter component
+ * @returns {React.ReactElement} The TableFooter component
+ */
+const TableFooter = ({
+  children,
+  ...restProps
+}: React.ComponentProps<"tfoot">) => {
+  return <tfoot {...restProps}>{children}</tfoot>;
+};
+TableFooter.displayName = "Table.Footer";
+
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.HeadCell = TableHeadCell;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+
+export {
+  Table,
+  TableHead,
+  TableHeadCell,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableFooter,
+};

package/src/table/styles/index.ts

@@ -0,0 +1,48 @@
+import styled, { css } from "styled-components";
+
+const CellStyles = css`
+  box-sizing: border-box;
+  border: none;
+  line-height: 1;
+  font-weight: 500;
+  padding: var(--measurement-medium-40) var(--measurement-medium-30);
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+`;
+
+export const TableLayer = styled.div`
+  border-radius: var(--measurement-medium-30);
+  border: var(--measurement-small-10) solid var(--font-color-alpha-10);
+`;
+export const TableWrapper = styled.table<any>`
+  border-collapse: collapse;
+
+  tbody {
+    tr {
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+`;
+export const RowWrapper = styled.tr<any>`
+  border-bottom: var(--measurement-small-10) solid var(--font-color-alpha-10);
+
+  transition: background-color linear 0.1s;
+
+  &:hover {
+    background-color: var(--font-color-alpha-10);
+  }
+`;
+export const HeadCellWrapper = styled.th<any>`
+  font-size: var(--fontsize-medium-10);
+  ${CellStyles}
+
+  div {
+    color: var(--font-color-alpha-60);
+  }
+`;
+export const CellWrapper = styled.td<any>`
+  ${CellStyles}
+`;

package/src/tabs/Tabs.stories.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Tabs } from "..";
+import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
+
+// Duplicated doc: The JSDoc content isn't rendering on Storybook.
+
+/**
+ * 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.
+ *
+ */
+const meta = {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Tabs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  args: {
+    raw: false,
+    defaultOpen: "",
+    value: "",
+  },
+  argTypes: {
+    variant: {
+      options: [
+        ComponentVariantEnum.Primary,
+        ComponentVariantEnum.Secondary,
+        ComponentVariantEnum.Tertiary,
+        ComponentVariantEnum.Mono,
+        ComponentVariantEnum.Border,
+        ComponentVariantEnum.Ghost,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Tabs.Root>
+      <Tabs>
+        <div className="flex g-medium-30">
+          <Tabs.Trigger value="🐻‍❄️">🐻‍❄️</Tabs.Trigger>
+          <Tabs.Trigger value="🐻">🐻</Tabs.Trigger>
+        </div>
+      </Tabs>
+      <Tabs.Content value="🐻‍❄️">🐻‍❄️</Tabs.Content>
+      <Tabs.Content value="🐻">🐻</Tabs.Content>
+    </Tabs.Root>
+  ),
+};
+export const DefaultOpen: Story = {
+  render: ({ ...args }) => (
+    <Tabs.Root>
+      <Tabs defaultOpen="🐻">
+        <div className="flex g-medium-30">
+          <Tabs.Trigger value="🐻‍❄️">🐻‍❄️</Tabs.Trigger>
+          <Tabs.Trigger value="🐻">🐻</Tabs.Trigger>
+        </div>
+      </Tabs>
+      <Tabs.Content value="🐻‍❄️">🐻‍❄️</Tabs.Content>
+      <Tabs.Content value="🐻">🐻</Tabs.Content>
+    </Tabs.Root>
+  ),
+};

package/src/tabs/hooks/index.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState } from "react";
+import { IReactChildren, IComponentAPI } from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const TabsContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useTabs = () => useContext(TabsContext);
+
+export const TabsProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useTabsProvider();
+
+  return (
+    <TabsContext.Provider value={context}>{children}</TabsContext.Provider>
+  );
+};
+
+function useTabsProvider(): IComponentAPI {
+  const [value, setValue] = useState<string | null>(null);
+  const tabsId = React.useId();
+
+  return {
+    id: tabsId,
+    states: {
+      value: value,
+    },
+    methods: {
+      applyValue: (value: string): string | void => setValue(value),
+      getTabsId: ({ value, type }: Record<string, string>): string =>
+        `${tabsId}-${type}-${value}`,
+    },
+  };
+}