@sproutsocial/seeds-react-tabs 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@sproutsocial/seeds-react-tabs",
+  "version": "1.0.0",
+  "description": "Seeds React Tabs",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-button": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Tabs.stories.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon, type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import { Tabs, type TypeTabsProps } from "./";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { Meta, StoryObj } from "@storybook/react";
+
+interface TypeTabData {
+  id: string;
+  text: string;
+  icon: TypeIconName;
+}
+
+interface TypeTabsStoryState {
+  selected: string;
+  tabs?: TypeTabData[];
+}
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  args: {
+    fullWidth: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tabs>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [selectedId, setSelectedId] = useState("notifications");
+
+    return (
+      <Tabs
+        selectedId={selectedId}
+        onSelect={(selected) => setSelectedId(selected)}
+        fullWidth={args.fullWidth}
+      >
+        <Tabs.Button id="notifications">
+          <Icon name="bell-outline" mr="12px" aria-hidden />
+          <Text size="300" fontWeight="600">
+            Notifications
+          </Text>
+        </Tabs.Button>
+        <Tabs.Button id="issues">
+          <Icon name="triangle-exclamation-outline" mr="12px" aria-hidden />
+          <Text size="300" fontWeight="600">
+            Issues
+          </Text>
+        </Tabs.Button>
+      </Tabs>
+    );
+  },
+  name: "Default",
+};
+
+export const RemoveATab: Story = {
+  render: (args) => {
+    const [state, setState] = useState<TypeTabsStoryState>({
+      selected: "notifications",
+      tabs: [
+        {
+          id: "notifications",
+          text: "Notifications",
+          icon: "bell-outline",
+        },
+        {
+          id: "issues",
+          text: "Issues",
+          icon: "triangle-exclamation-outline",
+        },
+        {
+          id: "fun",
+          text: "Fun Tab",
+          icon: "x-twitter",
+        },
+        {
+          id: "drafts",
+          text: "Drafts",
+          icon: "paper-outline",
+        },
+      ],
+    });
+
+    return (
+      <React.Fragment>
+        <Button
+          onClick={() =>
+            setState({
+              ...state,
+              tabs: state.tabs?.slice(1),
+            })
+          }
+        >
+          Remove a tab <Icon name="x-outline" aria-hidden />
+        </Button>
+        <Tabs
+          selectedId={state.selected}
+          onSelect={(selected) =>
+            setState({
+              ...state,
+              selected,
+            })
+          }
+          fullWidth={args.fullWidth}
+        >
+          {state.tabs?.map((tab) => (
+            <Tabs.Button key={tab.id} id={tab.id}>
+              <Icon name={tab.icon} mr="12px" aria-hidden />
+              <Text size="300" fontWeight="600">
+                {tab.text}
+              </Text>
+            </Tabs.Button>
+          ))}
+        </Tabs>
+      </React.Fragment>
+    );
+  },
+  name: "Remove a tab",
+};

package/src/Tabs.tsx

@@ -0,0 +1,171 @@
+import * as React from "react";
+import Container, { TabItem, TabButton } from "./styles";
+import type { TypeTabButtonsProps, TypeTabsProps } from "./TabsTypes";
+
+interface TypeTabButtonRef {
+  current: null | React.ElementRef<"button">;
+}
+interface TypeTabButtonContext {
+  onActivate: (arg0: string) => void;
+  onTabMount: (id: string, ref: TypeTabButtonRef) => void;
+  onTabUpdate: (previousId: string, nextId: string) => void;
+  onTabUnmount: (id: string) => void;
+  selectedId: string;
+  fullWidth?: boolean;
+}
+
+const TabButtonContext = React.createContext<Partial<TypeTabButtonContext>>({});
+
+class TabItemButton extends React.Component<TypeTabButtonsProps> {
+  static override contextType = TabButtonContext;
+  // @ts-notes - using the legacy syntax here because `declare` does not play well with babel
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  context!: React.ContextType<typeof TabButtonContext>;
+
+  buttonRef: TypeTabButtonRef = React.createRef<React.ElementRef<"button">>();
+
+  override componentDidMount() {
+    this.context.onTabMount?.(this.props.id, this.buttonRef);
+  }
+
+  override componentDidUpdate(prevProps: TypeTabButtonsProps) {
+    if (prevProps.id !== this.props.id) {
+      this.context.onTabUpdate?.(prevProps.id, this.props.id);
+    }
+  }
+
+  override componentWillUnmount() {
+    this.context.onTabUnmount?.(this.props.id);
+  }
+
+  override render() {
+    const { children, id, ...rest } = this.props;
+    const { selectedId, onActivate, fullWidth } = this.context;
+    const isSelected = selectedId === id;
+
+    return (
+      <TabItem key={id} fullWidth={fullWidth} isSelected={isSelected}>
+        <TabButton
+          innerRef={this.buttonRef}
+          id={id}
+          onClick={() => onActivate?.(id)}
+          isSelected={isSelected}
+          tabIndex={isSelected ? 0 : -1}
+          fullWidth={fullWidth}
+          data-qa-tab-button={id}
+          data-qa-tab-button-state={isSelected}
+          aria-selected={isSelected}
+          role="tab"
+          // TODO: Add a TabPanel subcomponent for use with tabs
+          // aria-controls={tabPanelId}
+          {...rest}
+        >
+          {children}
+        </TabButton>
+      </TabItem>
+    );
+  }
+}
+
+/**
+ * Render a group of buttons in a tab-heading style
+ */
+class Tabs extends React.Component<TypeTabsProps> {
+  static Button = TabItemButton;
+  buttonRefs: Record<string, TypeTabButtonRef | null | undefined> = {};
+  tabList: string[] = [];
+
+  getSelectedId = () => this.props.selectedId;
+  onActivate = (id: string) => this.props.onSelect(id);
+  onTabMount = (id: string, ref: TypeTabButtonRef) => {
+    if (!this.tabList.includes(id)) {
+      this.tabList.push(id);
+      this.buttonRefs[id] = ref;
+    }
+  };
+
+  onTabUpdate = (previousId: string, newId: string) => {
+    if (this.tabList.includes(previousId)) {
+      this.tabList = this.tabList.map((id) => (id === previousId ? newId : id));
+      this.buttonRefs[newId] = this.buttonRefs[previousId];
+      this.buttonRefs[previousId] = undefined;
+    }
+  };
+
+  onTabUnmount = (id: string) => {
+    if (this.tabList.includes(id)) {
+      this.tabList = this.tabList.filter((currentId) => currentId !== id);
+      this.buttonRefs[id] = undefined;
+    }
+  };
+
+  selectNextTab = (id: string) => {
+    const buttonRef = this.buttonRefs[id];
+    this.props.onSelect(id);
+    buttonRef &&
+      buttonRef.current &&
+      buttonRef.current.focus &&
+      buttonRef.current.focus();
+  };
+
+  keyHandler = ({ keyCode }: React.KeyboardEvent<HTMLUListElement>) => {
+    switch (keyCode) {
+      // left arrow
+      case 37:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index - 1 >= 0 ? index - 1 : count - 1;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+
+      // right arrow
+      case 39:
+        this.tabList.forEach((id, index) => {
+          if (id === this.getSelectedId()) {
+            const count = this.tabList.length;
+            const nextIndex = index + 1 < count ? index + 1 : 0;
+            const nextId = this.tabList[nextIndex];
+            this.selectNextTab(nextId ? nextId : "");
+          }
+        });
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  override render() {
+    const { children, qa, onSelect, ...rest } = this.props;
+    return (
+      <Container
+        data-qa-tabs=""
+        onKeyUp={this.keyHandler}
+        onSelect={onSelect}
+        role="tablist"
+        {...qa}
+        {...rest}
+      >
+        <TabButtonContext.Provider
+          value={{
+            selectedId: this.getSelectedId(),
+            fullWidth: this.props.fullWidth,
+            onActivate: this.onActivate,
+            onTabMount: this.onTabMount,
+            onTabUpdate: this.onTabUpdate,
+            onTabUnmount: this.onTabUnmount,
+          }}
+        >
+          {children}
+        </TabButtonContext.Provider>
+      </Container>
+    );
+  }
+}
+
+export default Tabs;

package/src/TabsTypes.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type {
+  TypeStyledComponentsCommonProps,
+  TypeSystemCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+
+export interface TypeTabButtonsProps extends TypeButtonProps {
+  children: React.ReactNode;
+
+  /** Should be unique among sibling elements */
+  id: string;
+}
+
+export interface TypeTabsProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    Omit<
+      React.ComponentPropsWithoutRef<"ul">,
+      keyof TypeSystemCommonProps | "onSelect"
+    > {
+  children: React.ReactNode;
+  onSelect: (arg0: string) => void;
+
+  /** Whether or not the tabs should stretch to fill the width of their container */
+  fullWidth?: boolean;
+  qa?: object;
+
+  /** ID of the selected tab */
+  selectedId: string;
+}

package/src/__tests__/Tabs.typetest.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Tabs from "../";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TabsTypes() {
+  const tabOne = "Tab one";
+  const mockHandler = () => {};
+
+  return (
+    <>
+      <Tabs selectedId={tabOne} onSelect={mockHandler}>
+        <Tabs.Button id={tabOne}>{tabOne}</Tabs.Button>
+      </Tabs>
+      {/* @ts-expect-error - test that invalid onSelect is rejected */}
+      <Tabs selectedId={3} onSelect="invalid">
+        <Tabs.Button id={tabOne}>{tabOne}</Tabs.Button>
+      </Tabs>
+    </>
+  );
+}

package/src/__tests__/tabs.test.tsx

@@ -0,0 +1,271 @@
+import * as React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Tabs, type TypeTabsProps } from "../";
+
+const leftArrowKey = {
+  key: "ArrowLeft",
+  code: 37,
+  keyCode: 37,
+};
+
+const rightArrowKey = {
+  key: "ArrowRight",
+  code: 39,
+  keyCode: 39,
+};
+
+interface TypeButtonData {
+  id: string;
+  text: string;
+}
+
+const mapTabButton = (button: TypeButtonData) => (
+  <Tabs.Button key={button.id} id={button.id}>
+    {button.text}
+  </Tabs.Button>
+);
+
+interface TypeTestStatefulTabsProps {
+  children: React.ReactNode;
+  selectedId?: string;
+  onSelect?: (id: string) => void;
+}
+
+const TestStatefulTabs = ({
+  children,
+  selectedId = "1",
+  onSelect = jest.fn(),
+}: TypeTestStatefulTabsProps) => {
+  const [state, setState] = React.useState({
+    selectedId,
+  });
+  return (
+    <Tabs
+      selectedId={state.selectedId}
+      onSelect={(id) => {
+        onSelect(id);
+        setState({
+          selectedId: id,
+        });
+      }}
+    >
+      {children}
+    </Tabs>
+  );
+};
+
+describe("Tabs", () => {
+  it("should render selected tab", () => {
+    render(
+      <TestStatefulTabs>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+      </TestStatefulTabs>
+    );
+    const firstTab = screen.getByText(/first/i);
+    const secondTab = screen.getByText(/second/i);
+    expect(firstTab).toHaveAttribute("tabindex", "0");
+    expect(secondTab).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("should work when tab buttons aren't direct children", () => {
+    render(
+      <TestStatefulTabs>
+        <Box border="2px red solid">
+          <Tabs.Button id="1">First</Tabs.Button>
+        </Box>
+        <Box border="2px green solid">
+          <Tabs.Button id="2">Second</Tabs.Button>
+        </Box>
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+    const secondTab = screen.getByText(/second/i);
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(secondTab).toHaveFocus();
+  });
+
+  it("should handle left arrow key", () => {
+    const onSelect = jest.fn();
+    render(
+      <TestStatefulTabs onSelect={onSelect}>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+        <Tabs.Button id="3">Third</Tabs.Button>
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+    const secondTab = screen.getByText(/second/i);
+    const thirdTab = screen.getByText(/third/i);
+    fireEvent.keyUp(tabs, leftArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(thirdTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, leftArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(secondTab).toHaveFocus();
+  });
+
+  it("should handle right arrow key", () => {
+    const onSelect = jest.fn();
+    render(
+      <TestStatefulTabs onSelect={onSelect}>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+        <Tabs.Button id="3">Third</Tabs.Button>
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+    const firstTab = screen.getByText(/first/i);
+    const secondTab = screen.getByText(/second/i);
+    const thirdTab = screen.getByText(/third/i);
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(secondTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(thirdTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("1");
+    expect(firstTab).toHaveFocus();
+  });
+
+  it("should handle dynamically adding tabs", () => {
+    const onSelect = jest.fn();
+    const initialButtons = [
+      {
+        id: "1",
+        text: "First",
+      },
+      {
+        id: "2",
+        text: "Second",
+      },
+    ];
+    const addButton = initialButtons.concat({
+      id: "3",
+      text: "Third",
+    });
+    const { rerender } = render(
+      <TestStatefulTabs onSelect={onSelect}>
+        {initialButtons.map(mapTabButton)}
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+    const secondTab = screen.getByText(/second/i);
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(secondTab).toHaveFocus();
+    rerender(
+      <TestStatefulTabs onSelect={onSelect}>
+        {addButton.map(mapTabButton)}
+      </TestStatefulTabs>
+    );
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    const thirdTab = screen.getByText(/third/i);
+    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(thirdTab).toHaveFocus();
+  });
+
+  it("should handle dynamically removing tabs", () => {
+    const onSelect = jest.fn();
+    const initialButtons = [
+      {
+        id: "1",
+        text: "First",
+      },
+      {
+        id: "2",
+        text: "Second",
+      },
+      {
+        id: "3",
+        text: "Third",
+      },
+    ];
+    const removeButton = initialButtons.slice(1);
+    const { rerender } = render(
+      <TestStatefulTabs onSelect={onSelect}>
+        {initialButtons.map(mapTabButton)}
+      </TestStatefulTabs>
+    );
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+    const secondTab = screen.getByText(/second/i);
+    const thirdTab = screen.getByText(/third/i);
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(secondTab).toHaveFocus();
+    rerender(
+      <TestStatefulTabs onSelect={onSelect}>
+        {removeButton.map(mapTabButton)}
+      </TestStatefulTabs>
+    );
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("3");
+    expect(thirdTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("2");
+    expect(secondTab).toHaveFocus();
+  });
+
+  it("should handle dynamically changing tab ids", () => {
+    const onSelect = jest.fn();
+    const { rerender } = render(
+      <TestStatefulTabs onSelect={onSelect}>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="2">Second</Tabs.Button>
+        <Tabs.Button id="3">Third</Tabs.Button>
+        <Tabs.Button id="4">Fourth</Tabs.Button>
+      </TestStatefulTabs>
+    );
+
+    rerender(
+      <TestStatefulTabs onSelect={onSelect}>
+        <Tabs.Button id="1">First</Tabs.Button>
+        <Tabs.Button id="6">Second</Tabs.Button>
+        <Tabs.Button id="5">Third</Tabs.Button>
+        <Tabs.Button id="4">Fourth</Tabs.Button>
+      </TestStatefulTabs>
+    );
+
+    const tabs = screen.getByDataQaLabel({
+      tabs: "",
+    });
+
+    const secondTab = screen.getByText(/second/i);
+    const thirdTab = screen.getByText(/third/i);
+    const fourthTab = screen.getByText(/fourth/i);
+
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("6");
+    expect(secondTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("5");
+    expect(thirdTab).toHaveFocus();
+    onSelect.mockReset();
+    fireEvent.keyUp(tabs, rightArrowKey);
+    expect(onSelect).toHaveBeenCalledWith("4");
+    expect(fourthTab).toHaveFocus();
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import Tabs from "./Tabs";
+
+export default Tabs;
+export { Tabs };
+export * from "./TabsTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}