@sikka/hawa 0.0.287 → 0.1.0-next

package/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import "../styles/globals.css";
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/README.md

@@ -1,60 +1,38 @@
-<p align="center">
-  <img src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/hawa-logo.png" alt="Hawa | هواء" />
-</p>
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-# Hawa | هواء
+## Getting Started
 
-[![NPM](https://img.shields.io/npm/v/@sikka/hawa.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
-[![NPM](https://img.shields.io/npm/dt/@sikka/hawa.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@sikka/hawa)
-
-> Opinionated UI Kit for web apps and websites built with TailwindCSS
-
-## Install
+First, run the development server:
 
 ```bash
-npm install --save @sikka/hawa
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
 ```
 
-# Roadmap
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-- Organize code
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-</br>
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-# Contributing
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
-To contribute, clone this github repository and run the development server
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-```bash
-git clone git@github.com:sikka-software/hawa.git
-cd hawa
-npm install
-```
+## Learn More
 
-</br>
+To learn more about Next.js, take a look at the following resources:
 
-# TESTING
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-Run development server
-
-```bash
-git clone git@github.com:sikka-software/hawa.git
-cd hawa
-npm install
-npm run storybook
-```
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## License
+## Deploy on Vercel
 
-MIT © [SIKKA SOFTWARE](https://sikka.sa)
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-<!--start: logo-->
-<p align="center">
-  <a href="https://sikka.io">
-    <img width="44" alt="Sikka" src="https://i.postimg.cc/8cK4tnKQ/sikka-symbol-black.png">
-  </a>
-</p>
-<p align="center">
-  <sub>An open source project by <a href="https://sikka.io">Sikka</a></sub>
-</p>
-<!--end: logo-->
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/components/elements/Button.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../util";
+import { Loading } from "./Loading";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center select-none rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        light: "bg-primary/20 text-primary hover:bg-primary/40",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        neoBrutalism:
+          "cursor-pointer transition-all uppercase font-mono  dark:bg-black font-bold py-2 px-4 rounded border-2 border-primary shadow-color-primary transition-[transform_50ms, box-shadow_50ms] active:translate-x-0.5 active:translate-y-0.5 active:shadow-color-primary-active",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        heightless: "px-4 py-4",
+        xs: "h-fit py-1 text-[10px] px-2 ",
+        sm: "h-9 text-[11px] rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        xl: "h-14 rounded-md px-10",
+        icon: "h-10 w-10",
+        smallIcon: "h-7 w-7",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isLoading?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      isLoading,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = "button";
+
+    // Determine the color for the HawaLoading component based on the variant
+    const loadingColor =
+      variant === "outline" || variant === "ghost" || variant === "neoBrutalism"
+        ? "bg-primary"
+        : "bg-primary-foreground";
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      >
+        {isLoading ? (
+          <Loading
+            design="dots-pulse"
+            color={loadingColor} // Apply the computed color here
+            size={size === "sm" ? "xs" : "button"}
+          />
+        ) : (
+          children
+        )}
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/{src/elements/HawaLoading.tsx → components/elements/Loading.tsx}

@@ -1,83 +1,81 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type LoadingTypes = {
-  size?: "button" | "sm" | "normal" | "lg" | "xl"
-  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots"
-  color?: any
-}
-
-export const HawaLoading: FC<LoadingTypes> = ({
-  design = "spinner",
-  size = "sm",
-  color,
-  ...props
-}) => {
-  let sizeStyles = {
-    button: "h-4 w-4",
-    sm: "h-6 w-6",
-    normal: "h-8 w-8",
-    lg: "h-14 w-14",
-    xl: "h-24 w-24",
-  }
-
-  let animationStyles = {
-    pulse: "animate-in fade-in duration-1000",
-    bounce: "animate-bounce",
-  }
-  switch (design.split("-")[0]) {
-    case "dots":
-      return (
-        <div className="flex flex-row space-x-2 ">
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-100 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "bg-buttonPrimary-500"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-200 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-buttonPrimary-500"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-300 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-buttonPrimary-500"
-            )}
-          ></div>
-        </div>
-      )
-
-    default:
-      return (
-        <div className="flex flex-row gap-x-3">
-          <div aria-label="Loading..." role="status">
-            <svg
-              className={clsx(sizeStyles[size], "animate-spin")}
-              viewBox="3 3 18 18"
-            >
-              <path
-                className="fill-gray-200"
-                d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-              ></path>
-              <path
-                // className="fill-buttonPrimary-500 "
-                className={color ? color : "fill-buttonPrimary-500"}
-                d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
-              ></path>
-            </svg>
-          </div>
-        </div>
-      )
-  }
-}
+import React, { FC } from "react";
+import clsx from "clsx";
+
+type LoadingTypes = {
+  size?: "button" | "xs" | "sm" | "normal" | "lg" | "xl";
+  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots";
+  color?: any;
+};
+
+export const Loading: FC<LoadingTypes> = ({
+  design = "spinner",
+  size = "sm",
+  color,
+  ...props
+}) => {
+  let sizeStyles = {
+    button: "h-4 w-4",
+    xs: "h-1 w-1",
+    sm: "h-6 w-6",
+    normal: "h-8 w-8",
+    lg: "h-14 w-14",
+    xl: "h-24 w-24",
+  };
+
+  let animationStyles: any = {
+    pulse: "animate-in fade-in duration-1000",
+    bounce: "animate-bounce",
+  };
+  switch (design.split("-")[0]) {
+    case "dots":
+      return (
+        <div className="flex flex-row gap-2">
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-100 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "bg-primary"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-200 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "bg-primary"
+            )}
+          ></div>
+          <div
+            className={clsx(
+              "animate-bounce rounded-full delay-300 repeat-infinite",
+              size === "button" ? "h-2 w-2" : sizeStyles[size],
+              animationStyles[design.split("-")[1]],
+              color ? color : "bg-primary"
+            )}
+          ></div>
+        </div>
+      );
+
+    default:
+      return (
+        <div className="flex flex-row gap-x-3">
+          <div aria-label="Loading..." role="status">
+            <svg
+              className={clsx(sizeStyles[size], "animate-spin")}
+              viewBox="3 3 18 18"
+            >
+              <path
+                className="fill-primary/20"
+                d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
+              ></path>
+              <path
+                className={color ? color : "fill-primary"}
+                d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      );
+  }
+};

package/components/elements/index.tsx

@@ -0,0 +1 @@
+export * from "./Button"

package/components/index.tsx

@@ -0,0 +1,4 @@
+export * from "./elements";
+// export * from "./layout"
+// export * from "./blocks"
+// export * from "./hooks"