@sikka/hawa 0.0.281 → 0.0.284

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -1 +1,21 @@
+import React from "react";
 import "../stories-styles.css";
+declare const _default: {
+    controls: {
+        hideNoControlsWarning: boolean;
+        exclude: any[];
+    };
+    parameters: {
+        customIcon: () => React.JSX.Element;
+        toolbar: {
+            visibility: string;
+        };
+        layout: string;
+        options: {
+            showPanel: boolean;
+        };
+    };
+    title: string;
+};
+export default _default;
+export declare const Overview: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.281",
+  "version": "0.0.284",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -46,6 +46,7 @@
     "@storybook/addon-links": "^6.5.8",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.5.8",
+    "@storybook/api": "^7.3.2",
     "@storybook/builder-webpack5": "^6.5.13",
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.8",

package/src/elements/HawaPhoneInput.tsx

@@ -80,11 +80,13 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
       <div dir="ltr" className="flex flex-row ">
         <Select
           classNames={{
-            control: () => "w-[64px] border rounded-l bg-background text-right pr-2",
-            placeholder: (state) => "text-muted-foreground text-right pr-2",
+            // container: () => "cursor-pointer z-10 border rounded-l bg-background",
+            control: () =>
+              "w-[64px] text-right pr-2 cursor-pointer z-10 border rounded-l bg-background",
+            placeholder: (state) => "text-muted-foreground text-right ",
             input: (state) =>
-              "bg-transparent text-white  p-2  rounded-l text-[0.875rem]",
-            valueContainer: () => " rounded-l h-auto text-[0.875rem]",
+              "bg-transparent cursor-pointer dark:text-white p-2 rounded-l text-[0.875rem] ",
+            valueContainer: () => "rounded-l h-auto text-[0.875rem]",
             // container: () => "bg-orange-400 border-none",
             // control: () => "bg-blue-500",
             // menu: () => "bg-red-900",
@@ -155,7 +157,7 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
           placeholder="531045453"
           // text-gray-900 dark:text-gray-300
           // 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
-          className="block w-full appearance-none rounded rounded-l-none border border-l-0
+          className="block  w-full  appearance-none rounded rounded-l-none border border-l-0
             bg-background p-2 text-[0.875rem] text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white "
         />
         {props.helperText && (

package/src/elements/HawaSelect.tsx

@@ -116,7 +116,7 @@ type SelectTypes = {
 }
 export const HawaSelect: FC<SelectTypes> = (props) => {
   return (
-    <div className=" w-96">
+    <div className=" w-full">
       {props.label && (
         <div className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}
@@ -125,12 +125,14 @@ export const HawaSelect: FC<SelectTypes> = (props) => {
       {!props.isCreatable && (
         <Select
           classNames={{
-            // control: () => "text-white",
-            placeholder: (state) => "px-2 text-muted-foreground",
-            input: (state) => "text-white px-2",
+            // control: () => "bg-blue-500 w-full",
+            // container: () => "bg-red-500 w-full",
+            placeholder: () => "px-2 text-muted-foreground",
+            input: () => "text-white px-2",
             valueContainer: () => "text-white dark:text-muted-foreground",
             singleValue: () => "text-black dark:text-white px-2",
-            indicatorsContainer: () => " px-2 cursor-pointer text-muted-foreground",
+            indicatorsContainer: () =>
+              " px-2 cursor-pointer text-muted-foreground",
           }}
           unstyled
           isDisabled={props.disabled}

package/src/elements/HawaSnackbar.tsx

@@ -108,7 +108,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
         </div>
         <button
           type="button"
-          className="right-0 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          className="right-0 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
           data-dismiss-target="#toast-default"
           aria-label="Close"
           onClick={() => {
@@ -118,6 +118,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
         >
           <span className="sr-only">Close</span>
           <svg
+            aria-label="Close Button"
             aria-hidden="true"
             className="h-5 w-5"
             fill="currentColor"

package/src/styles.css

@@ -1213,9 +1213,6 @@ video {
 .w-9 {
   width: 2.25rem;
 }
-.w-96 {
-  width: 24rem;
-}
 .w-\[12px\] {
   width: 12px;
 }
@@ -2005,6 +2002,9 @@ video {
 .p-2\.5 {
   padding: 0.625rem;
 }
+.p-20 {
+  padding: 5rem;
+}
 .p-3 {
   padding: 0.75rem;
 }
@@ -2138,6 +2138,9 @@ video {
 .pt-1 {
   padding-top: 0.25rem;
 }
+.pt-10 {
+  padding-top: 2.5rem;
+}
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -3037,6 +3040,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
+:is(.dark .dark\:bg-background) {
+  background-color: hsl(var(--background));
+}
 :is(.dark .dark\:bg-blue-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));

package/src/translations/ar.json

@@ -0,0 +1,22 @@
+{
+  "plain": "سادة",
+  "plain-subtitle": "هذا إشعار يظهر لما نبغى نعطي المستخدم خبر عن حدوث شيء معين",
+  "emailLabel": "البريد الإلكتروني",
+  "emailPlaceholder": "ادخل البريد الإلكتروني",
+  "emailRequiredText": "البريد الإلكتروني مطلوب",
+  "emailInvalidText": "البريد الإلكتروني غير صحيح",
+  "usernameLabel": "اسم المستخدم",
+  "usernamePlaceholder": "ادخل المستخدم",
+  "usernameRequired": " اسم المستخدم مطلوب",
+  "phoneRequiredText": "رقم الجوال مطلوب",
+  "passwordLabel": "كلمة المرور",
+  "passwordPlaceholder": "أدخل كلمة المرور",
+  "passwordRequiredText": "كبمة المرور مطلوبة",
+  "forgotPasswordText": "نسيت كلمة المرور؟",
+  "newUserText": "مستخدم جديد؟",
+  "signUpText": "تسجيل جديد",
+  "signInText": "تسجيل الدخول",
+  "googleButtonLabel": "Sign in with Google",
+  "githubButtonLabel": "Sign in with Github",
+  "twitterButtonLabel": "Sign in with Twitter"
+}

package/src/translations/en.json

@@ -0,0 +1,22 @@
+{
+  "plain": "Plain",
+  "plain-subtitle": "This is an snackbar-style notification in plain style",
+  "emailLabel": "Email",
+  "emailPlaceholder": "Enter your email",
+  "emailRequiredText": "Email is required",
+  "emailInvalidText": "Invalid email address",
+  "usernameLabel": "Username",
+  "usernamePlaceholder": "Enter your username",
+  "usernameRequired": " Username is required",
+  "phoneRequiredText": "Phone is required",
+  "passwordLabel": "Password",
+  "passwordPlaceholder": "Enter password",
+  "passwordRequiredText": "Password is required",
+  "forgotPasswordText": "Forgot password?",
+  "newUserText": "New user?",
+  "signUpText": "Sign up",
+  "signInText": "Sign in",
+  "googleButtonLabel": "Sign in with Google",
+  "githubButtonLabel": "Sign in with Github",
+  "twitterButtonLabel": "Sign in with Twitter"
+}

package/src/translations/i18n.js

@@ -0,0 +1,15 @@
+const translations = {
+  en: require("./en.json"),
+  ar: require("./ar.json")
+  // ... you can add more languages here.
+};
+
+let currentLocale = "en"; // default language
+
+export function setLocale(locale) {
+  currentLocale = locale;
+}
+
+export function t(key) {
+  return translations[currentLocale][key] || key;
+}