Added skeleton to HawaStats + other improvements

docs/documentation/iframe.html

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.306fc6dc.iframe.bundle.js"></script><script src="260.8023bed2.iframe.bundle.js"></script><script src="main.521ab24f.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.306fc6dc.iframe.bundle.js"></script><script src="260.268b26a9.iframe.bundle.js"></script><script src="main.1879cd19.iframe.bundle.js"></script></body></html>

docs/documentation/project.json

@@ -1 +1 @@
-{"generatedAt":1692775721056,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.5.0"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addons":{"version":"6.5.16"},"@storybook/api":{"version":"7.3.2"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/storybook-deployer":{"version":"2.8.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"storybook-dark-mode":{"version":"3.0.1"},"@storybook/addon-postcss":{"options":{"cssLoaderOptions":{"importLoaders":1},"postcssLoaderOptions":{}},"version":"2.0.0"}}}
+{"generatedAt":1692792261138,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.5.0"},"storybookVersion":"6.5.16","language":"typescript","storybookPackages":{"@storybook/addon-actions":{"version":"6.5.16"},"@storybook/addons":{"version":"6.5.16"},"@storybook/api":{"version":"7.3.2"},"@storybook/builder-webpack5":{"version":"6.5.16"},"@storybook/manager-webpack5":{"version":"6.5.16"},"@storybook/react":{"version":"6.5.16"},"@storybook/storybook-deployer":{"version":"2.8.16"},"@storybook/theming":{"version":"6.5.16"}},"framework":{"name":"react"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-docs":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"storybook-dark-mode":{"version":"3.0.1"},"@storybook/addon-postcss":{"options":{"cssLoaderOptions":{"importLoaders":1},"postcssLoaderOptions":{}},"version":"2.0.0"}}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

src/elements/Button.tsx

@@ -6,7 +6,7 @@ import { cn } from "../util"
 import { HawaLoading } from "./HawaLoading"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center 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",
+  "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: {

src/elements/HawaAlert.tsx

@@ -168,7 +168,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
           <button
             type="button"
             className={clsx(
-              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900  dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900",
               closeButtonStyle[props.severity],
               direction === "rtl" ? "left-2" : "right-2"
             )}

src/elements/HawaRadio.tsx

@@ -22,9 +22,9 @@ export const HawaRadio: FC<RadioTypes> = ({
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-primary  active dark:bg-primary dark:text-black"
+    "inline-block py-2 px-4  w-full text-primary-foreground bg-primary  active dark:bg-primary "
   let inactiveTabStyle =
-    "inline-block py-2 px-4 w-full dark:bg-background bg-gray-100  hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full transition-all hover:bg-primary/10 dark:bg-background bg-primary/5  hover:text-gray-900  dark:hover:bg-primary/10 dark:hover:text-white dark:bg-primary/5"
   let orientationStyle = {
     horizontal: "flex flex-row",
     vertical: "flex flex-col",
@@ -37,7 +37,7 @@ export const HawaRadio: FC<RadioTypes> = ({
             props.options?.length > 2
               ? "flex-wrap xs:max-w-full xs:flex-nowrap"
               : "",
-            " max-w-fit  whitespace-nowrap rounded border  text-center text-sm font-medium",
+            " max-w-fit  whitespace-nowrap rounded border  text-center text-sm font-medium select-none",
             orientationStyle[orientation]
           )}
         >

src/elements/HawaStats.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
-import clsx from "clsx"
-import { HawaLoading } from "./HawaLoading"
 import { Card, CardContent, CardHeader, CardTitle } from "./Card"
+import { Skeleton } from "./Skeleton"
 
 type StatTypes = {
   label?: string
@@ -28,41 +27,19 @@ export const HawaStats: FC<StatTypes> = ({ variant = "default", ...props }) => {
         {props.icon && props.icon}
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{props.number}</div>
-        {props.helperText && (
-          <p className="text-xs text-muted-foreground">{props.helperText}</p>
+        {props.isLoading ? (
+          <Skeleton className="h-8 w-3/4" />
+        ) : (
+          <div className="text-2xl font-bold">{props.number}</div>
+        )}
+        {props.isLoading ? (
+          <Skeleton className="mt-2 h-4 w-1/2" />
+        ) : (
+          props.helperText && (
+            <p className="text-xs text-muted-foreground">{props.helperText}</p>
+          )
         )}
       </CardContent>
     </Card>
-
-    // <Card>
-
-    //   <CardContent
-    //     // headless
-    //     className={clsx(
-    //       // defaultStyle,
-    //       // widthStyles[props.width],
-    //       statStyles[variant],
-    //       props.handleClick ? "cursor-pointer" : "cursor-default",
-    //       props.handleClick && variant === "dropshadow"
-    //         ? "hover:drop-shadow-lg"
-    //         : ""
-    //     )}
-    //     onClick={props.handleClick}
-    //   >
-    //     {props.icon && <div className="mb-2">{props.icon} </div>}
-    //     {/* <div>{props.label}</div> */}
-    //     {props.isLoading ? (
-    //       <HawaLoading />
-    //     ) : (
-    //       <div className="text-2xl font-bold">{props.number}</div>
-    //     )}
-    //     {props.helperText ? (
-    //       <div className="text-xs text-muted-foreground">
-    //         {props.helperText}
-    //       </div>
-    //     ) : null}
-    //   </CardContent>
-    // </Card>
   )
 }

src/elements/HawaTextField.tsx

@@ -53,7 +53,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center gap-2"
   let defaultInputStyle =
-    "block w-full rounded border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
+    "block w-full rounded border bg-background p-2 text-sm text-black dark:text-white focus:border-blue-500 focus:ring-blue-500"
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",

src/elements/index.ts

@@ -60,4 +60,5 @@ export * from "./Label"
 export * from "./Input"
 export * from "./Tooltip"
 export * from "./Card"
+export * from "./Skeleton"
 export * from "./InterfaceSettings"

src/stories/ElementsStories/Stats.stories.js

@@ -41,6 +41,21 @@ const Template = (args) => {
         {...args}
         number="15,231.89 SAR"
         label="Total Revenue"
+        icon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="h-4 w-4 text-muted-foreground"
+          >
+            <rect width="20" height="14" x="2" y="5" rx="2" />
+            <path d="M2 10h20" />
+          </svg>
+        }
         helperText="+20.1% from last month"
         handleClick={() => console.log("somthing")}
         isLoading={true}
@@ -51,14 +66,42 @@ const Template = (args) => {
         label="Subscriptions"
         helperText="+180.1% from last month"
         handleClick={() => console.log("somthing")}
-        icon={<AiFillGoogleCircle />}
+        icon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="h-4 w-4 text-muted-foreground"
+          >
+            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+          </svg>
+        }
       />
       <HawaStats
         {...args}
         number="+2350"
         label="Subscriptions"
         // helperText="+180.1% from last month"
-        icon={<AiFillGoogleCircle />}
+        icon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="h-4 w-4 text-muted-foreground"
+          >
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+          </svg>
+        }
       />
     </div>
   );

src/tailwind.css

@@ -2,6 +2,53 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
+/* 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 346.8 77.2% 49.8%;
+    --radius: 1rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+} */
 
 @layer base {
   :root {
@@ -165,7 +212,7 @@
 
 @layer components {
   .clickable-link {
-    @apply cursor-pointer text-primary/80 underline underline-offset-4 hover:text-primary transition-all;
+    @apply cursor-pointer text-primary/80 underline underline-offset-4 transition-all hover:text-primary;
   }
 }
 @layer utilities {