Merge pull request #48 from abusix/pla-711-create-panel-component-in-…

…hailstorm

Pla 711 create panel component

.prettierrc.cjs

@@ -4,4 +4,7 @@ module.exports = {
     semi: true,
     singleQuote: false,
     printWidth: 100,
+    // tailwind pluging config
+    plugins: ["prettier-plugin-tailwindcss"],
+    tailwindConfig: "./tailwind.config.cjs",
 };

package.json

@@ -91,8 +91,8 @@
         "eslint-plugin-storybook": "0.6.13",
         "eslint-plugin-tsdoc": "0.2.17",
         "jsdom": "^22.1.0",
-        "prettier": "^3.0.0",
-        "prettier-plugin-tailwindcss": "0.3.0",
+        "prettier": "^3.0.3",
+        "prettier-plugin-tailwindcss": "0.5.5",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

src/components/dialog/dialog.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import React, { useState } from "react";
-import { Dialog } from "./dialog";
 import { getStoryDescription, hiddenArgControl } from "../../util/storybook-utils";
+import { Dialog } from "./dialog";
 
 const SpanFooter = () => <span>test footer 🍭</span>;
 const footerOptions = { undefined, SpanFooter: <SpanFooter /> };
@@ -39,7 +39,7 @@ const meta: Meta<typeof Dialog> = {
                 <button
                     type="button"
                     onClick={toggleBtn}
-                    className="bg-neutral-100 py-2 px-4 shadow"
+                    className="bg-neutral-100 px-4 py-2 shadow"
                 >
                     show Modal
                 </button>

src/components/form-field/single-combobox/single-combobox-input.tsx

@@ -25,7 +25,7 @@ export const SingleComboboxInput = <TValue,>({
                 placeholder={placeholder}
                 displayValue={displayValue}
                 onChange={onChange}
-                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:bg-neutral-100 disabled:text-neutral-600 disabled:border-neutral-300"
+                className="paragraph-100 flex h-8 w-full items-center rounded border border-neutral-400 py-2 pl-3 pr-8 focus-visible:border-primary-400 focus-visible:ring-2 focus-visible:ring-primary-200 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:text-neutral-600"
             />
             {showButton ? (
                 <HeadlessCombobox.Button className="absolute inset-y-0 right-0 flex items-center px-1.5">

src/components/form-field/text-input/text-input.tsx

@@ -60,7 +60,7 @@ export const TextInput = ({
         <div className={classNames("relative w-full", formFieldGroupStyles)}>
             {LeftIcon ? (
                 <div
-                    className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10"
+                    className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3"
                     aria-hidden="true"
                 >
                     <LeftIcon className="text-gray-400 h-3.5 w-3.5 fill-neutral-600" />

src/components/index.ts

@@ -1,5 +1,4 @@
 export { Alert, AlertIntent } from "./alert";
-export { InlineAlert } from "./inline-alert";
 export { Avatar } from "./avatar";
 export { Badge } from "./badge";
 export { Button } from "./button";
@@ -8,9 +7,11 @@ export { Dialog } from "./dialog";
 export { DividerLine } from "./divider-line";
 export { FormField } from "./form-field";
 export { IconButton } from "./icon-button";
+export { InlineAlert } from "./inline-alert";
 export { LastChangedInfo } from "./last-changed-info";
 export { Menu } from "./menu";
 export { Page } from "./page";
+export { Panel } from "./panel";
 export { Section } from "./section";
 export { Sidebar } from "./sidebar";
 export { SidebarContainer } from "./sidebar-container";

src/components/panel/index.ts

@@ -0,0 +1 @@
+export { Panel } from "./panel";

src/components/panel/panel.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Panel } from "./panel";
+import { Button } from "../button/button";
+import { getStoryDescription } from "../../util/storybook-utils";
+import { Toggle } from "../toggle";
+
+const meta: Meta<typeof Panel> = {
+    title: "Panel",
+    parameters: {
+        ...getStoryDescription("Simple container used to group and organize elements in the UI."),
+        backgrounds: {
+            default: "light",
+        },
+    },
+    component: Panel,
+    args: {
+        className: "",
+        children: "Panel with text content",
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Panel>;
+
+export const Default: Story = {};
+
+const noop = () => undefined;
+export const WithComponents: Story = {
+    args: {
+        children: (
+            <>
+                <Button variant="primary" onClick={noop}>
+                    Button A
+                </Button>
+                <Toggle checked ariaLabel="test" onChange={noop} />
+                <Button variant="secondary" onClick={noop}>
+                    Button B
+                </Button>
+                <p> Paragraph content</p>
+            </>
+        ),
+    },
+};

src/components/panel/panel.tsx

@@ -0,0 +1,13 @@
+import React, { FC, ReactNode } from "react";
+import { classNames } from "../../util/class-names";
+
+interface PanelProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const Panel: FC<PanelProps> = ({ children, className }) => (
+    <div className={classNames("rounded border border-neutral-300 bg-neutral-0 p-5", className)}>
+        {children}
+    </div>
+);

src/components/section/section-panel.tsx

@@ -4,6 +4,10 @@ export interface SectionPanelProps {
     children: React.ReactNode;
 }
 
+/**
+ * @deprecated Use the dedicated Panel component
+ * Delete me on version 3
+ */
 export const SectionPanel = ({ children }: SectionPanelProps) => {
     return (
         <div className="relative rounded border border-neutral-300 bg-neutral-0 p-5">

src/components/section/section.tsx

@@ -15,6 +15,9 @@ const Section = ({ children }: SectionProps) => {
 Section.TitleGroup = SectionTitleGroup;
 Section.Title = SectionTitle;
 Section.Description = SectionDescription;
+/**
+ * @deprecated Use the dedicated Panel component
+ */
 Section.Panel = SectionPanel;
 
 export { Section };

src/components/table-virtualized/table-virtualized.tsx

@@ -14,17 +14,15 @@ import { useVirtualizer, VirtualizerOptions } from "@tanstack/react-virtual";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
+import { classNames } from "../../util/class-names";
+import { TableUnvirtualized } from "../table-unvirtualized";
 import { DraggableRow } from "./draggable-row/draggable-row";
-import { VirtualizedHeaderGroup } from "./header-group/header-group";
 import { ExpandableButtonCell } from "./expandable-button-cell/expandable-button-cell";
-import { TableUnvirtualized } from "../table-unvirtualized";
-import { classNames } from "../../util/class-names";
+import { VirtualizedHeaderGroup } from "./header-group/header-group";
 
-export interface TableVirtualizedProps<TableData> {
+export interface TableVirtualizedProps<TableData, TableValue = unknown> {
     data: TableData[];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    columnDefs: ColumnDef<TableData, any>[];
+    columnDefs: ColumnDef<TableData, TableValue>[];
     showPlaceholder?: boolean;
     placeholder?: React.ReactNode;
     isDraggableRowsEnabled?: boolean;