@sikka/hawa 0.0.283 → 0.0.285

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

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +1,17 @@
 import React from "react";
 import "../stories-styles.css";
 declare const _default: {
-    controls: {
-        hideNoControlsWarning: boolean;
-        exclude: any[];
-    };
     parameters: {
-        customIcon: () => React.JSX.Element;
-        toolbar: {
-            visibility: string;
+        chromatic: {
+            disableSnapshot: boolean;
         };
-        layout: string;
+        controls: {
+            expand: boolean;
+            disable: boolean;
+            hideNoControlsWarning: boolean;
+            exclude: any[];
+        };
+        customIcon: () => React.JSX.Element;
         options: {
             showPanel: boolean;
         };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.283",
+  "version": "0.0.285",
   "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",
@@ -55,6 +56,7 @@
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "babel-loader": "^8.2.2",
+    "chromatic": "^6.22.0",
     "framer-motion": "^4.1.7",
     "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.18",

package/src/blocks/Account/UserProfileForm.tsx

@@ -83,6 +83,7 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
               required: props.texts.passwordRequiredText,
             }}
           />
+
           <Controller
             control={control}
             name="confirmPassword"
@@ -101,49 +102,8 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
               required: props.texts.confirmPasswordRequiredText,
             }}
           />
-          {inputs.length > 0 &&
-            inputs.map((singleInput: any) => {
-              if (singleInput.type === "textArea") {
-                return (
-                  <Controller
-                    control={control}
-                    name={singleInput.name}
-                    render={({ field }) => (
-                      <HawaTextField
-                        width="full"
-                        type="text"
-                        defaultValue={singleInput.defaultValue ?? null}
-                        label={singleInput.label ?? null}
-                        placeholder={singleInput.placeHolder ?? null}
-                      />
-                    )}
-                    rules={singleInput.rules ?? null}
-                  />
-                )
-              }
-              return (
-                <Controller
-                  control={control}
-                  name={singleInput.name}
-                  render={({ field }) => (
-                    <HawaTextField
-                      width="full"
-                      type={singleInput.type}
-                      defaultValue={singleInput.defaultValue ?? null}
-                      label={singleInput.label ?? null}
-                      placeholder={singleInput.placeHolder ?? null}
-                    />
-                  )}
-                  rules={singleInput.rules ?? null}
-                />
-              )
-            })}
 
-          <HawaButton
-            color="primary"
-            width="full"
-            // type="submit"
-          >
+          <HawaButton color="primary" width="full">
             {props.texts.updateProfile}
           </HawaButton>
         </form>

package/src/elements/HawaButton.tsx

@@ -27,6 +27,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean
   badge?: any
   edgeCorner?: any
+  disabled?: boolean
 }
 
 const disabledSyles = "cursor-default pointer-events-none"
@@ -71,7 +72,8 @@ const colorStyles = {
     dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
   },
   outlined: {
-    default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
+    default:
+      "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
     primary: "text-black hover:bg-gray-50  dark:text-white",
     secondary:
       " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",

package/src/elements/HawaPhoneInput.tsx

@@ -73,18 +73,18 @@ export const HawaPhoneInput: FC<HawaPhoneInputTypes> = (props) => {
   return (
     <div className="mb-3 flex flex-col">
       {props.label && (
-        <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
-          {props.label}
-        </label>
+        <label className="mb-2 block text-sm font-medium">{props.label}</label>
       )}
       <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,8 +155,10 @@ 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
-            bg-background p-2 text-[0.875rem] text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:text-white "
+          className="block w-full rounded-r  border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500"
+
+          // 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 && (
           <p className="mb-1 mt-1 text-xs text-red-600 dark:text-red-500">

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/elements/HawaTextField.tsx

@@ -64,7 +64,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
       {props.label && (
         <label
           // htmlFor="first_name"
-          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+          className="mb-2 block text-sm font-medium "
         >
           {props.label}
         </label>

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