@pautena/react-design-system 0.7.4 → 0.8.0

package/src/components/navigation/tab-card/tab-card.dummy.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { TabCard, TabData } from "./tab-card";
+import { Typography } from "@mui/material";
+import { TabCardPanel } from "./tab-card-panel";
+import { Label } from "~/components/data-display";
+
+export const DummyTabs = [
+  { text: "tab 1" },
+  { text: "tab 2.1", icon: <Label text="10" variant="success" sx={{ mr: 1 }} /> },
+  { text: "tab 2.2" },
+  { text: "tab 3", icon: <Label text="12" variant="error" sx={{ mr: 1 }} /> },
+];
+
+export interface TabCardDummyProps {
+  tabs: TabData[];
+  initialTab: number;
+  onChangeTab: (tab: TabData, index: number) => void;
+}
+
+export function TabCardDummy({ tabs, initialTab, onChangeTab }: TabCardDummyProps) {
+  return (
+    <TabCard tabs={tabs} initialTab={initialTab} onChangeTab={onChangeTab}>
+      <TabCardPanel index={0} sx={{ p: 2 }}>
+        <Typography>Panel 1</Typography>
+      </TabCardPanel>
+      <TabCardPanel index={[1, 2]} sx={{ p: 2 }}>
+        <Typography>Panel 2</Typography>
+      </TabCardPanel>
+      <TabCardPanel index={3} sx={{ p: 2 }}>
+        <Typography>Panel 3</Typography>
+      </TabCardPanel>
+    </TabCard>
+  );
+}

package/src/components/navigation/{tab/tab-card → tab-card}/tab-card.stories.tsx

@@ -3,10 +3,10 @@ import { Meta, StoryObj } from "@storybook/react";
 import { DummyTabs, TabCardDummy, TabCardDummyProps } from "./tab-card.dummy";
 
 export default {
-  title: "Components/Navigation/Tab card",
+  title: "Components/Navigation/TabCard",
   component: TabCardDummy,
   parameters: {
-    layout: "fullscreen",
+    layout: "centered",
   },
   render: (props: TabCardDummyProps) => {
     return <TabCardDummy {...props} />;

package/src/components/navigation/tab-card/tab-card.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
+import { screen, render } from "~/tests/testing-library";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+
+describe("TabCard", () => {
+  function renderComponent({ initialTab = 0 } = {}) {
+    const onChangeTab = vi.fn();
+    render(<TabCardDummy tabs={DummyTabs} initialTab={initialTab} onChangeTab={onChangeTab} />);
+    return { onChangeTab };
+  }
+
+  it('initialTab is not set the "panel 1" is displayed', () => {
+    renderComponent();
+
+    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
+  });
+
+  it('initialTab is set to 3 the "panel 3" is displayed', () => {
+    renderComponent({ initialTab: 3 });
+
+    expect(screen.getByText(/panel 3/i)).toBeInTheDocument();
+  });
+
+  it("should render the tab labels", () => {
+    renderComponent();
+
+    expect(screen.getByText(/10/i)).toBeVisible();
+    expect(screen.getByText(/12/i)).toBeVisible();
+  });
+
+  describe("click tab", () => {
+    it.each([
+      [/tab 1/i, /panel 1/i],
+      [/tab 2.1/i, /panel 2/i],
+      [/tab 2.2/i, /panel 2/i],
+      [/tab 3/i, /panel 3/i],
+    ])(
+      'click the tab "%s" the "%s" panel is displayed',
+      async (tabName: RegExp, expectedText: RegExp) => {
+        renderComponent();
+
+        const tab = screen.getByRole("tab", { name: tabName });
+        await userEvent.click(tab);
+
+        expect(screen.getByText(expectedText)).toBeInTheDocument();
+        expect(tab).toHaveAttribute("aria-selected", "true");
+      },
+    );
+
+    it('click the tab "tab 2" and click again the tab "tab 1" the "panel 1" is displayed', async () => {
+      renderComponent();
+
+      const tab1 = screen.getByRole("tab", { name: /tab 1/i });
+      const tab2 = screen.getByRole("tab", { name: /tab 2.1/i });
+      await userEvent.click(tab2);
+      await userEvent.click(tab1);
+
+      expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
+      expect(screen.getByRole("tab", { name: /tab 1/i, selected: true })).toBeVisible();
+      expect(screen.getByRole("tab", { name: /tab 2.1/i, selected: false })).toBeVisible();
+    });
+
+    it("should call onChangeTab", async () => {
+      const { onChangeTab } = renderComponent();
+
+      await userEvent.click(screen.getByRole("tab", { name: /tab 2.2/i }));
+
+      expect(onChangeTab).toHaveBeenCalledTimes(1);
+      expect(onChangeTab).toHaveBeenCalledWith({ text: "tab 2.2" }, 2);
+    });
+  });
+});

package/src/components/navigation/tab-card/tab-card.tsx

@@ -0,0 +1,81 @@
+import { Paper, Tabs, Tab, styled, Box } from "@mui/material";
+import React, { PropsWithChildren, ReactElement, SyntheticEvent, useState } from "react";
+import { TabCardContextProvider } from "./tab-card.context";
+import { useGetDefaultThemeColor } from "~/utils";
+
+export interface TabData {
+  text: string;
+  icon?: ReactElement;
+}
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => (
+  <Tabs {...props} TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }} />
+))(({ theme }) => ({
+  minHeight: theme.spacing(5),
+  "& .MuiTabs-indicator": {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+  "& .MuiTabs-indicatorSpan": {
+    maxWidth: 40,
+    width: "100%",
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+
+const StyledTab = styled(Tab)(({ theme }) => ({
+  textTransform: "none",
+  fontWeight: theme.typography.fontWeightRegular,
+  marginRight: theme.spacing(1),
+  color: theme.palette.text.secondary,
+  paddingTop: 0,
+  paddingBottom: 0,
+  minHeight: theme.spacing(5),
+  "&.Mui-selected": {
+    color: theme.palette.text.secondary,
+    fontWeight: theme.typography.fontWeightBold,
+  },
+}));
+
+export type TabCardProps = PropsWithChildren<{
+  tabs: TabData[];
+  initialTab?: number;
+  onChangeTab?: (tab: TabData, index: number) => void;
+}>;
+
+export const TabCard = ({
+  children,
+  tabs,
+  initialTab = 0,
+  onChangeTab = () => null,
+}: TabCardProps) => {
+  const bgColor = useGetDefaultThemeColor();
+  const [selectedTab, setSelectedTab] = useState(initialTab);
+
+  const handleChangeTab = (_: SyntheticEvent<Element, Event>, index: number) => {
+    setSelectedTab(index);
+    onChangeTab(tabs[index], index);
+  };
+
+  return (
+    <TabCardContextProvider value={[selectedTab, setSelectedTab]}>
+      <Paper variant="outlined">
+        <Box bgcolor={bgColor}>
+          <StyledTabs value={selectedTab} onChange={handleChangeTab}>
+            {tabs.map(({ text, icon }) => (
+              <StyledTab iconPosition="start" disableRipple key={text} label={text} icon={icon} />
+            ))}
+          </StyledTabs>
+        </Box>
+        {children}
+      </Paper>
+    </TabCardContextProvider>
+  );
+};

package/src/components/navigation/{tab/tab-panel → tab-panel}/tab-panel.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { TabPanel } from "./tab-panel";
-import { TabProvider } from "../../../../providers";
+import { TabProvider } from "../../../providers";
 
 describe("TabPanel", () => {
   function renderInstance(initialValue: number) {

package/src/components/value-displays/value-rating/value-rating.tsx

@@ -1,9 +1,8 @@
-import { Box, IconButton, Rating } from "@mui/material";
+import { Box, Rating } from "@mui/material";
 import React from "react";
 import { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from "../value-base";
 import { BaseValueProps, EditableValueProps } from "../value-base/value-displays.types";
 import { getValueContentLabelId, ValueContent } from "../value-content";
-import EditIcon from "@mui/icons-material/Edit";
 
 export type ValueRatingProps = BaseValueProps<number> & {
   maxRating?: number;

package/src/generators/object-details/object-details.tsx

@@ -18,8 +18,6 @@ import {
 } from "../generators.model";
 import { newBreakpointsCounter } from "~/utils/breakpoints";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { ValueContent } from "~/components/value-displays/value-content";
-import { ArrayFieldType } from "../generators.model";
 
 interface SingleDetailValueFactoryOptions {
   dense?: boolean;

package/dist/cjs/types/components/navigation/tab/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./tab-panel";
-export * from "./tab-card";

package/dist/cjs/types/components/navigation/tab/tab-card/tab-card.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from "react";
-export type TabCardProps = PropsWithChildren<{
-    tabs: string[];
-}>;
-export declare const TabCard: ({ children, tabs }: TabCardProps) => JSX.Element;

package/dist/cjs/types/components/navigation/tab/tab-card/tab-card.dummy.d.ts

@@ -1,6 +0,0 @@
-export declare const DummyTabs: string[];
-export interface TabCardDummyProps {
-    tabs: string[];
-    initialTab: number;
-}
-export declare function TabCardDummy({ tabs, initialTab }: TabCardDummyProps): JSX.Element;

package/dist/esm/types/components/navigation/tab/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./tab-panel";
-export * from "./tab-card";

package/dist/esm/types/components/navigation/tab/tab-card/tab-card.d.ts

@@ -1,5 +0,0 @@
-import { PropsWithChildren } from "react";
-export type TabCardProps = PropsWithChildren<{
-    tabs: string[];
-}>;
-export declare const TabCard: ({ children, tabs }: TabCardProps) => JSX.Element;

package/dist/esm/types/components/navigation/tab/tab-card/tab-card.dummy.d.ts

@@ -1,6 +0,0 @@
-export declare const DummyTabs: string[];
-export interface TabCardDummyProps {
-    tabs: string[];
-    initialTab: number;
-}
-export declare function TabCardDummy({ tabs, initialTab }: TabCardDummyProps): JSX.Element;

package/src/components/navigation/tab/index.ts

@@ -1,2 +0,0 @@
-export * from "./tab-panel";
-export * from "./tab-card";

package/src/components/navigation/tab/tab-card/tab-card.dummy.tsx

@@ -1,30 +0,0 @@
-import React from "react";
-import { TabCard } from "./tab-card";
-import { TabPanel } from "../tab-panel";
-import { Typography } from "@mui/material";
-import { TabProvider } from "../../../../providers";
-
-export const DummyTabs = ["tab 1", "tab 2.1", "tab 2.2", "tab 3"];
-
-export interface TabCardDummyProps {
-  tabs: string[];
-  initialTab: number;
-}
-
-export function TabCardDummy({ tabs, initialTab }: TabCardDummyProps) {
-  return (
-    <TabProvider initialValue={initialTab}>
-      <TabCard tabs={tabs}>
-        <TabPanel index={0}>
-          <Typography>Panel 1</Typography>
-        </TabPanel>
-        <TabPanel index={[1, 2]}>
-          <Typography>Panel 2</Typography>
-        </TabPanel>
-        <TabPanel index={3}>
-          <Typography>Panel 3</Typography>
-        </TabPanel>
-      </TabCard>
-    </TabProvider>
-  );
-}

package/src/components/navigation/tab/tab-card/tab-card.test.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-import { screen, render } from "~/tests/testing-library";
-import userEvent from "@testing-library/user-event";
-
-describe("TabCard", () => {
-  function renderInstance(initialValue = 0) {
-    return render(<TabCardDummy tabs={DummyTabs} initialTab={initialValue} />);
-  }
-
-  it('initialTab is not set the "panel 1" is displayed', () => {
-    renderInstance();
-
-    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-  });
-
-  it('initialTab is set to 3 the "panel 3" is displayed', () => {
-    renderInstance(3);
-
-    expect(screen.getByText(/panel 3/i)).toBeInTheDocument();
-  });
-
-  it.each([
-    [/tab 1/i, /panel 1/i],
-    [/tab 2.1/i, /panel 2/i],
-    [/tab 2.2/i, /panel 2/i],
-    [/tab 3/i, /panel 3/i],
-  ])(
-    'click the tab "%s" the "%s" panel is displayed',
-    async (tabName: RegExp, expectedText: RegExp) => {
-      renderInstance();
-
-      const tab = screen.getByRole("tab", { name: tabName });
-      await userEvent.click(tab);
-
-      expect(screen.getByText(expectedText)).toBeInTheDocument();
-      expect(tab).toHaveAttribute("aria-selected", "true");
-    },
-  );
-
-  it('click the tab "tab 2" and click again the tab "tab 1" the "panel 1" is displayed', async () => {
-    renderInstance();
-
-    const tab1 = screen.getByRole("tab", { name: /tab 1/i });
-    const tab2 = screen.getByRole("tab", { name: /tab 2.1/i });
-    await userEvent.click(tab2);
-    await userEvent.click(tab1);
-
-    expect(screen.getByText(/panel 1/i)).toBeInTheDocument();
-    expect(tab1).toHaveAttribute("aria-selected", "true");
-    expect(tab2).toHaveAttribute("aria-selected", "false");
-  });
-});

package/src/components/navigation/tab/tab-card/tab-card.tsx

@@ -1,27 +0,0 @@
-import { Paper, Tabs, Tab, styled, tabsClasses } from "@mui/material";
-import React, { PropsWithChildren } from "react";
-import { useTab } from "~/providers";
-
-const StyledTabs = styled(Tabs)(({ theme }) => ({
-  [`&.${tabsClasses.root}`]: {
-    backgroundColor: theme.palette.grey[100],
-  },
-}));
-
-export type TabCardProps = PropsWithChildren<{
-  tabs: string[];
-}>;
-
-export const TabCard = ({ children, tabs }: TabCardProps) => {
-  const [tab, setTab] = useTab();
-  return (
-    <Paper>
-      <StyledTabs value={tab} onChange={(_, index: number) => setTab(index)}>
-        {tabs.map((tab) => (
-          <Tab key={tab} label={tab} />
-        ))}
-      </StyledTabs>
-      {children}
-    </Paper>
-  );
-};