improved stories

CHANGELOG.md

@@ -1,5 +1,14 @@
 # @sikka/hawa
 
+## 0.24.0
+
+### Minor Changes
+
+- Improved imports in all stories
+- Removed unused story docs
+- `Elements` bundling code is now more readable
+- Optimized imports within `Navbar`, `Sidebar`, `Stats`, `AppLayout`, `LandingCard`, `PricingCard`, `DestroyableCard`, and `AppTopbar`
+
 ## 0.23.11
 
 ### Patch Changes

components/blocks/cards/LandingCard.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 
-import { Card, CardHeader, CardTitle, CardDescription } from "@/components/elements/card/Card";
+import { Card, CardHeader, CardTitle, CardDescription } from "@elements/card";
 
 interface LandingCardTypes {
   title?: string;

components/blocks/cards/PricingCard.tsx

@@ -1,15 +1,13 @@
 import React, { FC } from "react";
 
-import {
-  Button,
-  Card,
-  Chip,
-  Separator,
-  Skeleton,
-  Tooltip
-} from "@elements/index";
+import { Button } from "@elements/button";
+import { Card } from "@elements/card";
+import { Chip } from "@elements/chip";
+import { Separator } from "@elements/separator";
+import { Skeleton } from "@elements/skeleton";
+import { Tooltip } from "@elements/tooltip";
 
-import { PricingCardProps } from "@_types/index";
+import { PricingCardProps } from "@_types/pricingTypes";
 
 import { cn } from "../../util";
 

components/elements/destroyableCard/DestroyableCard.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useRef, useState } from "react";
 
-import { Card, CardContent } from "@/components/elements/card/Card";
+import { Card, CardContent } from "@elements/card";
 
 import { DirectionType } from "@_types/commonTypes";
 

components/layout/AppLayout.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { Button, DropdownMenu, MenuItemType, Tooltip } from "@elements/index";
+import { Button } from "@elements/button";
+import { DropdownMenu, MenuItemType } from "@elements/dropdownMenu";
+import { Tooltip } from "@elements/tooltip";
 
 import { DirectionType } from "@_types/commonTypes";
 

components/layout/AppTopbar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DropdownMenu, MenuItemType } from "@elements/index";
+import { DropdownMenu, MenuItemType } from "@elements/dropdownMenu";
 
 import { DirectionType } from "@_types/commonTypes";
 

components/layout/DocsLayout.tsx

@@ -1,12 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import {
-  Button,
-  Logos,
-  Sheet,
-  SheetContent,
-  SheetTrigger
-} from "@elements/index";
+import { Button } from "@elements/button";
+import { Logos } from "@elements/logos";
+import { Sheet, SheetContent, SheetTrigger } from "@elements/sheet";
 
 import { DirectionType } from "@_types/commonTypes";
 

components/layout/Navbar.tsx

@@ -4,7 +4,7 @@ import {
   CollapsibleTrigger,
   CollapsibleContent,
   Collapsible
-} from "@/components/elements/collapsible";
+} from "@elements/collapsible";
 
 import { cn } from "../util";
 

components/layout/Sidebar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
-import { Chip, ChipColors } from "@elements/index";
+import { Chip, ChipColors } from "@elements/chip";
 
 import { DirectionType } from "@_types/commonTypes";
 

components/layout/Stats.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 
-import { Skeleton, Card, CardContent, CardTitle } from "@elements/index";
+import { Card, CardContent, CardTitle } from "@elements/card";
+import { Skeleton } from "@elements/skeleton";
 
 import { cn } from "../util";
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.23.11",
+  "version": "0.24.0",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

stories/BlocksStories/CardsStories/ActionCard.stories.tsx

@@ -1,37 +1,24 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ActionCard } from "../../../components/blocks";
-import { Button } from "../../../components/elements";
+import { ActionCard } from "@blocks/cards";
+
+import { Button } from "@elements/button";
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: "Blocks/Cards/Action Card",
   component: ActionCard,
-  parameters: {
-    layout: "centered"
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    // backgroundColor: { control: "color" },
-  }
+  parameters: { layout: "centered" }
 } satisfies Meta<typeof ActionCard>;
 
 export default meta;
 type Story = StoryObj<typeof ActionCard>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const Template = (args: any) => (
-  <div className="hawa-flex hawa-h-64 hawa-flex-col hawa-gap-2">
-    {" "}
-    <ActionCard {...args}>tet</ActionCard>
-  </div>
-);
-
 export const Default: Story = {
-  render: (args) => <Template {...args} />,
+  render: (args: any) => (
+    <div className="hawa-flex hawa-h-64 hawa-flex-col hawa-gap-2">
+      <ActionCard {...args}>tet</ActionCard>
+    </div>
+  ),
   args: {
     title: "Bismillah",
     subtitle: "By the name of Allah",
@@ -51,16 +38,3 @@ export const Default: Story = {
     )
   }
 };
-
-// export const Large: Story = {
-//   args: {
-//     size: "large",
-//     label: "Button",
-//   },
-// };
-
-// export const Small: Story = {
-//   args: {
-//     label: "Button",
-//   },
-// };

stories/BlocksStories/CardsStories/AdCard.stories.tsx

@@ -1,47 +1,33 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { AdCard } from "../../../components/blocks";
+import { AdCard } from "@blocks/cards";
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: "Blocks/Cards/Ad Card",
   component: AdCard,
-  parameters: {
-    layout: "centered"
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ["autodocs"],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    // backgroundColor: { control: "color" },
-  }
+  parameters: { layout: "centered" }
 } satisfies Meta<typeof AdCard>;
 
 export default meta;
 type Story = StoryObj<typeof AdCard>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const Template = (args: any) => (
-  <>
-    <div>
-      <div className="hawa-m-2 hawa-ml-0 hawa-text-lg hawa-font-bold">
-        Horizontal
+export const Default: Story = {
+  render: (args: any) => (
+    <>
+      <div>
+        <div className="hawa-m-2 hawa-ml-0 hawa-text-lg hawa-font-bold">
+          Horizontal
+        </div>
+        <AdCard orientation="horizontal" {...args} />
       </div>
-      <AdCard orientation="horizontal" {...args} />
-    </div>
-    <div>
-      <div className="hawa-m-2 hawa-ml-0 hawa-text-lg hawa-font-bold">
-        Vertical
+      <div>
+        <div className="hawa-m-2 hawa-ml-0 hawa-text-lg hawa-font-bold">
+          Vertical
+        </div>
+        <AdCard orientation="vertical" {...args} />
       </div>
-      <AdCard orientation="vertical" {...args} />
-    </div>
-  </>
-);
-
-export const Default: Story = {
-  //   name: "Action Card",
-  render: (args) => <Template {...args} />,
+    </>
+  ),
   args: {
     handleCantHide: () => console.log("cant hide the ad, please sub to pro"),
     canHide: false,
@@ -55,16 +41,3 @@ export const Default: Story = {
     }
   }
 };
-
-// export const Large: Story = {
-//   args: {
-//     size: "large",
-//     label: "Button",
-//   },
-// };
-
-// export const Small: Story = {
-//   args: {
-//     label: "Button",
-//   },
-// };

stories/BlocksStories/CardsStories/DestroyableCard.stories.tsx

@@ -1,43 +1,33 @@
+import { Story } from "@storybook/blocks";
 import type { Meta, StoryObj } from "@storybook/react";
-import { DestroyableCard } from "../../../components";
-import { ArgsTable, Story } from "@storybook/blocks";
-import { setLocale, t } from "../../translations/i18n";
+
+import { DestroyableCard } from "@elements/destroyableCard";
+
+import { setLocale } from "../../translations/i18n";
 
 const meta = {
   title: "Blocks/Cards/Destroyable Card",
   component: DestroyableCard,
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: () => (
-        <>
-          <h1>{"<DestroyableCard/>"}</h1>
-          <ArgsTable />
-        </>
-      ),
-    },
-  },
-  tags: ["autodocs"],
+  parameters: { layout: "centered" }
 } satisfies Meta<typeof DestroyableCard>;
 
 export default meta;
 type Story = StoryObj<typeof DestroyableCard>;
 
-const Template = (args: any, globals: any) => {
-  const locale = globals.globals?.locale === "ar" ? "ar" : "en";
-  const direction = locale === "ar" ? "rtl" : "ltr";
-  setLocale(locale);
-
-  return (
-    <div dir={direction}>
-      <DestroyableCard direction={direction} {...args}>
-        <div>This is the custom content.</div>
-        <h1>Destroyable Card</h1>
-        <p>Click on the small X in the corner to hide/destroy this card</p>
-      </DestroyableCard>
-    </div>
-  );
-};
 export const Default: Story = {
-  render: Template.bind({}),
+  render: (args: any, globals: any) => {
+    const locale = globals.globals?.locale === "ar" ? "ar" : "en";
+    const direction = locale === "ar" ? "rtl" : "ltr";
+    setLocale(locale);
+
+    return (
+      <div dir={direction}>
+        <DestroyableCard direction={direction} {...args}>
+          <div>This is the custom content.</div>
+          <h1>Destroyable Card</h1>
+          <p>Click on the small X in the corner to hide/destroy this card</p>
+        </DestroyableCard>
+      </div>
+    );
+  }
 };