@sikka/hawa 0.0.94 → 0.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -14,7 +14,7 @@
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"
   },
-  "author": "SIKKA SOFTWARE",
+  "author": "Sikka Software",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -28,18 +28,25 @@
     "@storybook/addon-links": "^6.5.8",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.5.8",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.8",
     "@storybook/storybook-deployer": "^2.8.11",
     "@storybook/theming": "^6.5.8",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "babel-loader": "^8.2.2",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1",
     "emotion-theming": "^11.0.0",
     "framer-motion": "^4.1.7",
+    "html-webpack-plugin": "^5.5.0",
     "next-scripts": "^0.3.4",
     "postcss": "^8.4.18",
     "postcss-cli": "^10.0.0",
     "postcss-focus-visible": "^7.1.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "qs": "^6.10.3",
     "react": ">=17.0.1",
     "react-color": "^2.19.3",
@@ -55,7 +62,10 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "tailwindcss": "^3.2.1",
-    "tinycolor2": "^1.4.2"
+    "tinycolor2": "^1.4.2",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4",
+    "webpack": "^5.75.0"
   },
   "peerDependencies": {
     "crypto-js": "^4.1.1",
@@ -75,11 +85,13 @@
     "@storybook/react/webpack": "^5",
     "@storybook/core-common/webpack": "^5",
     "@storybook/core-server/webpack": "^5",
-    "@storybook/builder-webpack4/webpack": "^5",
-    "@storybook/manager-webpack4/webpack": "^5"
+    "@storybook/builder-webpack5/webpack": "^5",
+    "@storybook/manager-webpack5/webpack": "^5"
   },
   "dependencies": {
     "react-dropzone": "^12.0.4",
-    "react-icons": "^4.6.0"
+    "react-icons": "^4.6.0",
+    "rollup-plugin-swc": "^0.2.1",
+    "rollup-plugin-typescript2": "^0.34.1"
   }
 }

package/rollup.config.js

@@ -4,10 +4,12 @@ import babel from "rollup-plugin-babel";
 import external from "rollup-plugin-peer-deps-external";
 import { terser } from "rollup-plugin-terser";
 import postcss from "rollup-plugin-postcss";
+import typescript from "rollup-plugin-typescript2";
+import swc from "rollup-plugin-swc";
 
 export default [
   {
-    input: "src/index.js",
+    input: "src/index.ts",
     output: [
       { file: "lib/index.js", format: "cjs" },
       { file: "es/index.es.js", format: "es", exports: "named" }
@@ -22,8 +24,18 @@ export default [
         ]
       }),
       external(),
-      resolve(),
+      resolve({
+        extensions: [".tsx", ".ts"]
+      }),
+      typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
+      swc({
+        jsc: {
+          parser: {
+            syntax: "typescript"
+          }
+        }
+      }),
       commonjs()
     ]
   }

package/src/blocks/Account/{UserProfileForm.js → UserProfileForm.tsx}

@@ -1,16 +1,24 @@
-import React from "react";
-import { HawaButton, HawaTextField } from "../../elements";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import { HawaContainer } from "../../layout";
+import React from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
 
-export const UserProfileForm = (props) => {
-  const methods = useForm();
-  const { inputs } = props;
+type UserProfileFormTypes = {
+  inputs: any
+  texts: any
+  handleUpdateProfile: any
+}
+
+export const UserProfileForm: React.FunctionComponent<UserProfileFormTypes> = (
+  props
+) => {
+  const methods = useForm()
+  const { inputs } = props
   const {
     formState: { errors },
     handleSubmit,
-    control
-  } = methods;
+    control,
+  } = methods
 
   return (
     <HawaContainer>
@@ -22,13 +30,13 @@ export const UserProfileForm = (props) => {
             name="fullName"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="text"
-                value={field.value ?? ""}
                 label={props.texts.fullNameLabel}
                 placeholder={props.texts.fullNamePlaceholder}
                 helperText={errors.fullName?.message}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
           />
@@ -37,7 +45,7 @@ export const UserProfileForm = (props) => {
             name="phoneNumber"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="tel"
                 label="Phone Number"
                 placeholder="+966"
@@ -50,13 +58,13 @@ export const UserProfileForm = (props) => {
             name="email"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="text"
-                value={field.value ?? ""}
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
@@ -64,8 +72,8 @@ export const UserProfileForm = (props) => {
               pattern: {
                 value:
                   /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts.emailInvalidText
-              }
+                message: props.texts.emailInvalidText,
+              },
             }}
           />
           <Controller
@@ -73,17 +81,17 @@ export const UserProfileForm = (props) => {
             name="password"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="password"
-                value={field.value ?? ""}
                 label={props.texts.passwordLabel}
                 placeholder={props.texts.passwordPlaceholder}
                 helperText={errors.password?.message}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
-              required: props.texts.passwordRequiredText
+              required: props.texts.passwordRequiredText,
             }}
           />
           <Controller
@@ -91,21 +99,21 @@ export const UserProfileForm = (props) => {
             name="confirmPassword"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="password"
-                value={field.value ?? ""}
                 label={props.texts.confirmPasswordLabel}
                 placeholder={props.texts.confirmPasswordPlaceholder}
                 helperText={errors.confirmPassword?.message}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
-              required: props.texts.confirmPasswordRequiredText
+              required: props.texts.confirmPasswordRequiredText,
             }}
           />
           {inputs.length > 0 &&
-            inputs.map((singleInput) => {
+            inputs.map((singleInput: any) => {
               if (singleInput.type === "textArea") {
                 return (
                   <Controller
@@ -113,16 +121,16 @@ export const UserProfileForm = (props) => {
                     name={singleInput.name}
                     render={({ field }) => (
                       <HawaTextField
-                        fullWidth
+                        width="full"
                         type="text"
                         defaultValue={singleInput.defaultValue ?? null}
                         label={singleInput.label ?? null}
                         placeholder={singleInput.placeHolder ?? null}
-                        rules={singleInput.rules ?? null}
                       />
                     )}
+                    rules={singleInput.rules ?? null}
                   />
-                );
+                )
               }
               return (
                 <Controller
@@ -130,30 +138,23 @@ export const UserProfileForm = (props) => {
                   name={singleInput.name}
                   render={({ field }) => (
                     <HawaTextField
-                      fullWidth
+                      width="full"
                       type={singleInput.type}
                       defaultValue={singleInput.defaultValue ?? null}
                       label={singleInput.label ?? null}
                       placeholder={singleInput.placeHolder ?? null}
-                      rules={singleInput.rules ?? null}
                     />
                   )}
+                  rules={singleInput.rules ?? null}
                 />
-              );
+              )
             })}
 
-          <HawaButton
-            fullWidth
-            type="submit"
-            text={props.texts.updateProfile}
-          />
+          <HawaButton color="primary" width="full" type="submit">
+            {props.texts.updateProfile}
+          </HawaButton>
         </form>
       </FormProvider>
     </HawaContainer>
-  );
-};
-
-// texts: PropTypes.shape({
-//   emailLabel: PropTypes.string,
-
-// }),
+  )
+}

package/src/blocks/Account/UserSettingsForm.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type UserSettingsFormTypes = {
+  children: any
+  handleSaveSettings: any
+  saveSettingsText: string
+}
+
+export const UserSettingsForm: React.FunctionComponent<
+  UserSettingsFormTypes
+> = (props) => {
+  return (
+    <HawaContainer>
+      {" "}
+      {props.children}
+      <HawaButton
+        color="primary"
+        type="submit"
+        width="full"
+        onClick={props.handleSaveSettings}
+      >
+        {props.saveSettingsText}
+      </HawaButton>
+    </HawaContainer>
+  )
+}

package/src/blocks/Account/index.ts

@@ -0,0 +1,2 @@
+export * from "./UserProfileForm";
+export * from "./UserSettingsForm";

package/src/blocks/AuthForms/AppLanding.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout/HawaContainer"
+
+type AppLandingTypes = {
+  handleSignIn: any
+  handleSignUp: any
+  handleLanguage: any
+  texts: {
+    signIn: string
+    signUp: string
+    lang: string
+  }
+}
+export const AppLanding: React.FunctionComponent<AppLandingTypes> = (props) => {
+  return (
+    <HawaContainer>
+      {props.handleSignIn && (
+        <HawaButton color="primary" width="full" onClick={props.handleSignIn}>
+          {props.texts.signIn}
+        </HawaButton>
+      )}
+      {props.handleSignUp && (
+        <HawaButton color="primary" width="full" onClick={props.handleSignUp}>
+          {props.texts.signUp}
+        </HawaButton>
+      )}
+      <HawaButton color="primary" width="full" onClick={props.handleLanguage}>
+        {props.texts.lang}
+      </HawaButton>
+    </HawaContainer>
+  )
+}

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
+import { Controller, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
+
+type CodeConfirmationTypes = {
+  showError: any
+  errorTitle: any
+  errorText: any
+  texts: any
+  handleSignIn: any
+}
+export const CodeConfirmation: React.FunctionComponent<
+  CodeConfirmationTypes
+> = (props) => {
+  const methods = useForm()
+  const {
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = methods
+
+  return (
+    <HawaContainer>
+      {" "}
+      {props.showError && (
+        <HawaAlert
+          title={props.errorTitle}
+          text={props.errorText}
+          severity="error"
+        />
+      )}
+      <form onSubmit={handleSubmit(props.handleSignIn)}>
+        <Controller
+          control={control}
+          name="code"
+          render={({ field }) => (
+            <HawaTextField
+              width="full"
+              type="number"
+              label={props.texts.codeLabel}
+              helperText={errors.email?.message}
+              placeholder={props.texts.codePlaceholder}
+              {...field}
+              value={field.value ?? ""}
+            />
+          )}
+          rules={{
+            required: props.texts.codeRequiredText,
+          }}
+        />
+
+        <HawaButton color="primary" type="submit" width="full">
+          {props.texts.confirmText}
+        </HawaButton>
+      </form>
+    </HawaContainer>
+  )
+}

package/src/blocks/AuthForms/{NewPasswordForm.js → NewPasswordForm.tsx}

@@ -1,26 +1,49 @@
-import React, { useState } from "react";
-import { HawaTextField, HawaAlert, HawaButton } from "../../elements";
-import { Controller, FormProvider, useForm } from "react-hook-form";
-import PropTypes from "prop-types";
-import { HawaContainer } from "../../layout";
+import React, { useState } from "react"
+import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
+import { Controller, FormProvider, useForm } from "react-hook-form"
+import { HawaContainer } from "../../layout"
 
-export const NewPasswordForm = (props) => {
-  const [matchError, setMatchError] = useState(false);
-  const methods = useForm();
+type NewPasswordTypes = {
+  handleNewPassword: any
+  passwordChanged: any
+  errorText: any
+  texts: {
+    emailLabel: string
+    emailPlaceholder: string
+    emailRequiredText: string
+    passwordPlaceholder: string
+    updatePassword: string
+    passwordRequiredText: string
+    passwordLabel: string
+    confirmPasswordPlaceholder: string
+    confirmPasswordLabel: string
+    confirmPasswordRequiredText: string
+    passwordMatchError: string
+    forgotPasswordText: string
+    passwordChanged: string
+  }
+  handleSignIn: any
+}
+
+export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (
+  props
+) => {
+  const [matchError, setMatchError] = useState(false)
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
-    control
-  } = methods;
+    control,
+  } = methods
 
-  const handleSubmission = (e) => {
-    console.log("handling subb", e);
+  const handleSubmission = (e: any) => {
+    console.log("handling subb", e)
     if (e.password === e.confirmPassword) {
-      props.handleNewPassword();
+      props.handleNewPassword()
     } else {
-      setMatchError(true);
+      setMatchError(true)
     }
-  };
+  }
 
   return (
     <HawaContainer>
@@ -38,17 +61,17 @@ export const NewPasswordForm = (props) => {
               name="password"
               render={({ field }) => (
                 <HawaTextField
-                  fullWidth
+                  width="full"
                   type="password"
-                  value={field.value ?? ""}
                   label={props.texts.passwordLabel}
                   placeholder={props.texts.passwordPlaceholder}
                   helperText={errors.password?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{
-                required: props.texts.passwordRequiredText
+                required: props.texts.passwordRequiredText,
               }}
             />
             <Controller
@@ -56,53 +79,26 @@ export const NewPasswordForm = (props) => {
               name="confirmPassword"
               render={({ field }) => (
                 <HawaTextField
-                  fullWidth
+                  width="full"
                   type="password"
-                  value={field.value ?? ""}
                   label={props.texts.confirmPasswordLabel}
                   placeholder={props.texts.confirmPasswordPlaceholder}
                   helperText={errors.confirmPassword?.message}
                   {...field}
+                  value={field.value ?? ""}
                 />
               )}
               rules={{
-                required: props.texts.confirmPasswordRequiredText
+                required: props.texts.confirmPasswordRequiredText,
               }}
             />
 
-            <HawaButton
-              type="submit"
-              fullWidth
-              text={props.texts.updatePassword}
-            />
+            <HawaButton color="primary" type="submit" width="full">
+              {props.texts.updatePassword}
+            </HawaButton>
           </form>
         </FormProvider>
       )}
     </HawaContainer>
-  );
-};
-NewPasswordForm.propTypes = {
-  /**
-   *  An object of all the texts in the blocks
-   */
-  texts: PropTypes.shape({
-    emailLabel: PropTypes.string,
-    emailPlaceholder: PropTypes.string,
-    emailRequiredText: PropTypes.string,
-    passwordPlaceholder: PropTypes.string,
-    updatePassword: PropTypes.string,
-    passwordRequiredText: PropTypes.string,
-    passwordLabel: PropTypes.string,
-    confirmPasswordPlaceholder: PropTypes.string,
-    confirmPasswordLabel: PropTypes.string,
-    confirmPasswordRequiredText: PropTypes.string,
-    passwordMatchError: PropTypes.string,
-    forgotPasswordText: PropTypes.string,
-    passwordChanged: PropTypes.string
-  }),
-  /**
-   * A boolean to replace the form with a success message
-   */
-  passwordChanged: PropTypes.bool,
-  handleNewPassword: PropTypes.func
-};
+  )
+}

package/src/blocks/AuthForms/{ResetPasswordForm.js → ResetPasswordForm.tsx}

@@ -1,17 +1,34 @@
-import React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { HawaButton, HawaTextField } from "../../elements";
-import PropTypes from "prop-types";
-import { HawaContainer } from "../../layout";
+import React from "react"
+import { Controller, useForm } from "react-hook-form"
+import { HawaButton, HawaTextField } from "../../elements"
+import { HawaContainer } from "../../layout"
 
-export const ResetPasswordForm = (props) => {
-  const methods = useForm();
+type ResetPasswordType = {
+  handleResetPassword: any
+  passwordChanged: any
+  errorText: any
+  sent: any
+  handleSignIn: any
+  texts: {
+    emailLabel: string
+    emailPlaceholder: string
+    emailRequiredText: string
+    emailInvalidText: string
+    emailSentText: string
+    resetPassword: string
+  }
+}
+
+export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
+  props
+) => {
+  const methods = useForm()
   const {
     formState: { errors },
     handleSubmit,
     register,
-    control
-  } = methods;
+    control,
+  } = methods
   return (
     <HawaContainer>
       {" "}
@@ -22,13 +39,13 @@ export const ResetPasswordForm = (props) => {
             name="email"
             render={({ field }) => (
               <HawaTextField
-                fullWidth
+                width="full"
                 type="text"
-                value={field.value ?? ""}
                 label={props.texts.emailLabel}
                 helperText={errors.email?.message}
                 placeholder={props.texts.emailPlaceholder}
                 {...field}
+                value={field.value ?? ""}
               />
             )}
             rules={{
@@ -36,37 +53,17 @@ export const ResetPasswordForm = (props) => {
               pattern: {
                 value:
                   /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts.emailInvalidText
-              }
+                message: props.texts.emailInvalidText,
+              },
             }}
           />
-          <HawaButton
-            fullWidth
-            type="submit"
-            text={props.texts.resetPassword}
-          />{" "}
+          <HawaButton color="primary" width="full" type="submit">
+            {props.texts.resetPassword}
+          </HawaButton>
         </form>
       ) : (
         <div className="text-center">{props.texts.emailSentText}</div>
       )}
     </HawaContainer>
-  );
-};
-ResetPasswordForm.propTypes = {
-  /**
-   *  An object of all the texts in the blocks
-   */
-  texts: PropTypes.shape({
-    emailLabel: PropTypes.string,
-    emailPlaceholder: PropTypes.string,
-    emailRequiredText: PropTypes.string,
-    emailInvalidText: PropTypes.string,
-    emailSentText: PropTypes.string,
-    resetPassword: PropTypes.string
-  }),
-  /**
-   * a boolean to replace the form with a success message
-   */
-  sent: PropTypes.bool,
-  handleResetPassword: PropTypes.func
-};
+  )
+}