feat: add tabs component

docs/ROADMAP.md

@@ -6,7 +6,7 @@ This roadmap is our plan for building a complete front-end framework. Each item
 
 [ ] **Badge:** Small signs that show if something is good or special.
 
-[ ] **Tabs:** Sections to organize our site, like folders.
+[x] **Tabs:** Sections to organize our site, like folders.
 
 [x] **Alert:** A notice to tell users important things.
 

packages/components/tabs/README.md

@@ -0,0 +1,32 @@
+# RCK | React Tabs Component
+
+> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
+
+for React applications. It's a powerhouse for developers, providing an efficient way to organize and showcase content while ensuring a streamlined user experience.
+
+With the Tabs component, developers can effortlessly create expandable sections of content, allowing users to toggle open or closed sections to focus on specific details. This functionality is a game-changer for handling extensive text, intricate descriptions, or any additional information without cluttering the user interface
+
+### Installation 
+
+To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/tabs` or `yarn add @react-ck/tabs`.
+
+You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.
+
+Wrap your app root with the theme provider and use this component:
+
+```tsx
+import { Manager } from "@react-ck/manager";
+import { Tabs } from "@react-ck/tabs";
+
+const myApp = () => (
+    <Manager>
+        <Tabs ... />
+    </Manager>
+);
+```
+
+<!-- storybook-ignore -->
+
+---
+
+Check the documentation website - [react-ck.js.org](https://react-ck.js.org).

packages/components/tabs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@react-ck/babel-config",
+};

packages/components/tabs/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

packages/components/tabs/index.ts

@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";

packages/components/tabs/jest.config.ts

@@ -0,0 +1 @@
+export { config as default } from "@react-ck/jest-config";

packages/components/tabs/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@react-ck/tabs",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "homepage": "https://github.com/abelflopes/react-ck/tree/master/packages/components/tabs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abelflopes/react-ck.git"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "lint:typescript": "tsc --noEmit",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "devDependencies": {
+    "@react-ck/babel-config": "^1.0.0",
+    "@react-ck/jest-config": "^1.0.0",
+    "@react-ck/typescript-config": "^1.0.0",
+    "@react-ck/webpack-config": "^1.0.0",
+    "@types/react": "^18.2.33"
+  },
+  "dependencies": {
+    "@react-ck/scss-utils": "^1.1.2",
+    "@react-ck/text": "^1.2.6",
+    "@react-ck/theme": "^1.4.1",
+    "classnames": "^2.3.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}

packages/components/tabs/specs/index.snapshot.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Tabs } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Snapshot Tabs", () => {
+  test("renders correctly", async () => {
+    const tree = renderer
+      .create(
+        <Tabs
+          items={[
+            { heading: "item 1", content: "content 1" },
+            { heading: "item 2", content: "content 2" },
+          ]}
+        />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/components/tabs/specs/index.unit.test.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Tabs } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Tabs", () => {
+  test("renders correctly", async () => {
+    const items = [
+      { heading: "item 1", content: "content 1" },
+      { heading: "item 2", content: "content 2" },
+    ];
+
+    render(<Tabs items={items} />);
+
+    await Promise.all(
+      items.map(async (item) => {
+        const header = await screen.findByText(item.heading);
+        const children = await screen.findByText(item.content);
+        expect(header).toBeInTheDocument();
+        expect(children).toBeInTheDocument();
+      }),
+    );
+  });
+});

packages/components/tabs/src/index.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import styles from "./styles/index.module.scss";
+
+export interface TabsItem {
+  heading: NonNullable<React.ReactNode>;
+  content: NonNullable<React.ReactNode>;
+}
+
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  items: TabsItem[];
+}
+
+/**
+ * Tabs is a way to navigate between multiple views of information. It’s used to fit more information in a smaller area.
+ * @param props - {@link TabsProps}
+ * @returns a React element
+ */
+
+export const Tabs = ({
+  items,
+  className,
+  ...otherProps
+}: Readonly<TabsProps>): React.ReactElement => {
+  const [current, setCurrent] = useState(0);
+
+  return (
+    <div className={classNames(className, styles.root)} {...otherProps}>
+      <div className={styles.track}>
+        {items.map(({ heading }, key) => (
+          <button
+            key={JSON.stringify(heading)}
+            className={classNames(styles.tab, {
+              [`${styles.tab_active}`]: key === current,
+            })}
+            onClick={() => {
+              setCurrent(key);
+            }}>
+            {heading}
+          </button>
+        ))}
+      </div>
+
+      {items[current]?.content}
+    </div>
+  );
+};

packages/components/tabs/src/styles/index.module.scss

@@ -0,0 +1,29 @@
+@import "@react-ck/theme";
+@import "@react-ck/scss-utils";
+@import "@react-ck/text";
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: get-spacing(1);
+}
+
+.track {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tab {
+  @include define-css-var(tabs, border-color, get-color(neutral-200));
+  @include text-base;
+
+  background: transparent;
+  padding: get-spacing(1) get-spacing(2);
+  border: none;
+  cursor: pointer;
+  border-bottom: solid #{get-css-var(spacing, border)} #{get-css-var(tabs, border-color)};
+}
+
+.tab_active {
+  @include define-css-var(tabs, border-color, get-color(highlight-primary));
+}

packages/components/tabs/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./*.d.ts", "./src/**/*", "./src/index.ts*"]
+}

packages/components/tabs/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@react-ck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}

packages/components/tabs/webpack.config.ts

@@ -0,0 +1,6 @@
+import { getWebpackConfig } from "@react-ck/webpack-config";
+import packageJson from "./package.json";
+
+export default getWebpackConfig({
+  cssHashSalt: packageJson.name,
+});

packages/docs/stories/package.json

@@ -44,6 +44,7 @@
     "@react-ck/textarea": "^1.0.0",
     "@react-ck/manager": "^1.0.0",
     "@react-ck/layers": "^1.0.0",
+    "@react-ck/tabs": "^1.0.0",
     "@react-ck/theme": "^1.0.0",
     "@react-ck/progress": "^1.0.0"
   }

packages/docs/stories/src/tabs.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Manager } from "@react-ck/manager";
+import { faker } from "@faker-js/faker";
+import { Text } from "@react-ck/text/src";
+import { configureStory } from "@react-ck/story-config";
+import { Tabs } from "@react-ck/tabs/src";
+
+type Story = StoryObj<typeof Tabs>;
+
+const meta: Meta<typeof Tabs> = {
+  title: "Generic/Tabs",
+  ...configureStory(Tabs, {
+    decorators: [
+      (Story) => (
+        <Manager>
+          <Story />
+        </Manager>
+      ),
+    ],
+  }),
+};
+
+export default meta;
+
+export const Component: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  args: {
+    items: [
+      {
+        heading: faker.lorem.word(),
+        content: <Text>{faker.lorem.sentence(50)}</Text>,
+      },
+      {
+        heading: faker.lorem.word(),
+        content: <Text>{faker.lorem.sentence(100)}</Text>,
+      },
+    ],
+  },
+};