Minor fixes + story updates

components/elements/cards/ItemCard.tsx

@@ -5,9 +5,6 @@ import { Button } from "../Button";
 import { DropdownMenu, MenuItemType } from "../DropdownMenu";
 import { StopPropagationWrapper } from "../StopPropagationWrapper";
 
-
-// TODO: bring back the image and its button like from hawa-archive
-
 interface ItemCardTypes {
  headerActions?: MenuItemType[];
  // headerActions?: THeaderActions[]
@@ -26,7 +23,7 @@ interface ItemCardTypes {
  /** Enabling this blurs the image on hover and shows an action button */
  clickableImage?: boolean;
  /** The function of the action button on the image of the card */
- clickableImageAction?: () => void;
+ onImageClick?: () => void;
  /** The text of the action button on the image of the card */
  clickableImageActionText?: string;
  /** The icon of the action button on the image of the card */
@@ -47,7 +44,7 @@ export const ItemCard: FC<ItemCardTypes> = ({
  content,
  headerActions,
  clickableImage,
- clickableImageAction,
+ onImageClick,
  clickableImageActionText,
  clickableImageActionIcon,
  header,
@@ -116,17 +113,18 @@ export const ItemCard: FC<ItemCardTypes> = ({
  )}
  />
  {clickableImage && (
- <div className="hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-center hawa-opacity-0 hawa-transition-all group-hover:hawa-opacity-100 ">
- <Button
- // startIcon={clickableImageActionIcon}
- variant="secondary"
- onClick={clickableImageAction}
- className="hawa-flex hawa-flex-row hawa-gap-2"
- >
- {clickableImageActionIcon}
- {clickableImageActionText}
- </Button>
- </div>
+ <StopPropagationWrapper>
+ <div className="hawa-absolute hawa-left-0 hawa-top-0 hawa-flex hawa-h-full hawa-w-full hawa-items-center hawa-justify-center hawa-opacity-0 hawa-transition-all group-hover:hawa-opacity-100 ">
+ <Button
+ variant="secondary"
+ onClick={onImageClick}
+ className="hawa-flex hawa-flex-row hawa-gap-2"
+ >
+ {clickableImageActionIcon}
+ {clickableImageActionText || "Click"}
+ </Button>
+ </div>
+ </StopPropagationWrapper>
  )}
  </div>
  )}

components/layout/AppTabs.tsx

@@ -27,7 +27,7 @@ export const AppTabs: React.FC<AppTabsType> = ({ tabs, ...props }) => {
  );
 };
 
-const AppSingleTab = (props: any) => {
+const AppSingleTab = ({ tab, ...props }: any) => {
  return (
  <div
  onClick={props.onClick}
@@ -39,8 +39,8 @@ const AppSingleTab = (props: any) => {
  : "dark:hover:hawa-bg-gray-700 hover:hawa-bg-gray-200 hawa-cursor-pointer hawa-border-transparent"
  )}
  >
- {props.tab.icon && props.tab.icon}
- {props.tab.label}
+ {tab.icon && tab.icon}
+ {tab.label}
  </div>
  );
 };

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sikka/hawa",
- "version": "0.15.0",
+ "version": "0.15.1",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {

stories/BlocksStories/AuthStories/AppLanding.stories.tsx

@@ -28,7 +28,7 @@ const Template = (args: any, globals: any) => {
  setLocale(locale);
 
  return (
- <div className="hawa-max-w-md hawa-drop-shadow-lg">
+ <div className="hawa-max-w-md hawa-drop-shadow-xl">
  <AppLanding
  direction={direction}
  {...args}

stories/BlocksStories/AuthStories/Login.tsx

@@ -161,7 +161,6 @@ const LoginDocs = (args: any, globals: any) => {
 
  <div>
  <h2 id="Usage">Usage</h2>
- {/* TODO: use the codeblock component */}
  <CodeBlock
  code={`
 

stories/BlocksStories/AuthStories/Register.tsx

@@ -223,7 +223,6 @@ const RegisterDocs = (args: any, globals: any) => {
 
  <div>
  <h2 id="Usage">Usage</h2>
- {/* TODO: use the codeblock component */}
  <CodeBlock
  code={`
 

stories/LayoutStories/AppTabs.stories.tsx

@@ -1,13 +1,22 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { AppLayout, AppTopbar, AppTabs } from "../../components";
+import { AppTabs } from "../../components";
 import { ArgsTable, Story } from "@storybook/blocks";
 import { setLocale, t } from "../translations/i18n";
 import { useDarkMode } from "storybook-dark-mode";
-import { DownloadCloud, GalleryHorizontal, KeyRound, PanelTopClose, Settings2, Smile, User2, UserSquare } from "lucide-react";
+import {
+ DownloadCloud,
+ GalleryHorizontal,
+ KeyRound,
+ PanelTopClose,
+ Settings2,
+ Smile,
+ User2,
+ UserSquare,
+} from "lucide-react";
+import { useEffect, useState } from "react";
 
 const meta = {
- title: "Layout/AppTabs",
+ title: "Layout/App Tabs",
  tags: ["autodocs"],
  component: AppTabs,
  parameters: {
@@ -29,19 +38,66 @@ type Story = StoryObj<typeof AppTabs>;
 export const Default: Story = {
  render: (args: any, globals: any) => {
  const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+ const direction = locale === "ar" ? "rtl" : "ltr";
  const dark = useDarkMode();
+ setLocale(locale);
 
- return <AppTabs {...args} />;
+ return (
+ <div dir={direction}>
+ <AppTabs {...args} />
+ </div>
+ );
  },
  args: {
  tabs: [
- { icon: <User2 className="hawa-icon" />, label: "Users" },
- { icon: <KeyRound className="hawa-icon" />, label: "Roles" },
- { icon: <Smile className="hawa-icon" />, label: "Customers" },
- { icon: <UserSquare className="hawa-icon" />, label: "Clients" },
- { icon: <DownloadCloud className="hawa-icon" />, label: "Invoices" },
- { icon: <PanelTopClose className="hawa-icon" />, label: "Community" },
- { icon: <Settings2 className="hawa-icon" />, label: "Settings" },
+ { icon: <User2 className="hawa-icon" />, label: t("users") },
+ { icon: <KeyRound className="hawa-icon" />, label: t("roles") },
+ { icon: <Smile className="hawa-icon" />, label: t("customers") },
+ { icon: <UserSquare className="hawa-icon" />, label: t("clients") },
+ {
+ icon: <DownloadCloud className="hawa-icon" />,
+ label: t("invoices"),
+ },
+ {
+ icon: <PanelTopClose className="hawa-icon" />,
+ label: t("community"),
+ },
+ { icon: <Settings2 className="hawa-icon" />, label: t("settings") },
+ ],
+ },
+ argTypes: {},
+};
+export const WithHeader: Story = {
+ render: (args: any, globals: any) => {
+ const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+ const direction = locale === "ar" ? "rtl" : "ltr";
+
+ const dark = useDarkMode();
+ setLocale(locale);
+
+ return (
+ <div dir={direction} className="hawa-bg-gray-100">
+ <div className="hawa-p-4 hawa-pb-0 hawa-font-extrabold hawa-text-4xl">Title here</div>
+ <div className="hawa-p-4 hawa-py-0 hawa-font-normal hawa-text-md">Subtitle here</div>
+ <AppTabs {...args} />
+ </div>
+ );
+ },
+ args: {
+ tabs: [
+ { icon: <User2 className="hawa-icon" />, label: t("users") },
+ { icon: <KeyRound className="hawa-icon" />, label: t("roles") },
+ { icon: <Smile className="hawa-icon" />, label: t("customers") },
+ { icon: <UserSquare className="hawa-icon" />, label: t("clients") },
+ {
+ icon: <DownloadCloud className="hawa-icon" />,
+ label: t("invoices"),
+ },
+ {
+ icon: <PanelTopClose className="hawa-icon" />,
+ label: t("community"),
+ },
+ { icon: <Settings2 className="hawa-icon" />, label: t("settings") },
  ],
  },
  argTypes: {},

stories/translations/ar.json

@@ -9,6 +9,15 @@
  "descriptionRequired": "الوصف مطلوب",
  "requestType": "نوع التذكرة",
  "requestTypeRequired": "نوع التذكرة مطلوب",
+
+ "users": "المستخدمين",
+ "roles": "الصلاحيات",
+ "customers": "الزبائن",
+ "clients": "العملاء",
+ "invoices": "الفواتير",
+ "community": "المنتدى",
+ "settings": "الإعدادات",
+
  "yes": "نعم",
  "new": "جديد",
  "columns": "الأعمدة",
@@ -101,7 +110,6 @@
  "refCode": "رمز الإحالة",
  "account": "الحساب",
  "password": "كلمة المرور",
- "settings": "الإعدادات",
  "display": "المظهر",
  "option": "خيار",
  "checkEmail": "تحقق من بريدك الإلكتروني",

stories/translations/en.json

@@ -15,6 +15,13 @@
  "items": "Items",
  "dashboard": "Dashboard",
 
+ "users": "Users",
+ "roles": "Roles",
+ "customers": "Customers",
+ "clients": "Clients",
+ "invoices": "Invoices",
+ "community": "Community",
+ "settings": "Settings",
  "columns": "Columns",
  "analytics": "Analytics",
  "cancel": "Cancel",
@@ -101,7 +108,6 @@
  "existingUserText": "Existing User?",
  "account": "Account",
  "password": "Password",
- "settings": "Settings",
  "display": "Display",
  "option": "Option",
  "checkEmail": "Check your email",