@sikka/hawa 0.0.283 → 0.0.284

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.283",
+  "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;
 }

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;
+}