@sikka/hawa 0.1.1 → 0.1.3

package/package.json

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

package/src/blocks/Account/UserProfileForm.tsx

@@ -1,7 +1,8 @@
 import React, { FC } from "react"
-import { HawaButton, HawaPhoneInput, HawaTextField } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
+import { HawaPhoneInput, HawaTextField } from "../../elements"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type UserProfileFormTypes = {
   inputs: any
@@ -19,95 +20,98 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer>
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit((e) => props.handleUpdateProfile(e))}>
-          <Controller
-            control={control}
-            name="fullName"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="text"
-                label={props.texts.fullNameLabel}
-                placeholder={props.texts.fullNamePlaceholder}
-                helpertext={errors.fullName?.message}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
-          />
-          <Controller
-            control={control}
-            name="phoneNumber"
-            render={({ field }) => <HawaPhoneInput label="Phone number" />}
-          />
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="text"
-                label={props.texts.emailLabel}
-                helpertext={errors.email?.message}
-                placeholder={props.texts.emailPlaceholder}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
-            rules={{
-              required: props.texts.emailRequiredText,
-              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,
-              },
-            }}
-          />
-          <Controller
-            control={control}
-            name="password"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="password"
-                label={props.texts.passwordLabel}
-                placeholder={props.texts.passwordPlaceholder}
-                helpertext={errors.password?.message}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
-            rules={{
-              required: props.texts.passwordRequiredText,
-            }}
-          />
+    <Card>
+      <form onSubmit={handleSubmit((e) => props.handleUpdateProfile(e))}>
+        <CardContent headless>
+          <FormProvider {...methods}>
+            <Controller
+              control={control}
+              name="fullName"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="text"
+                  label={props.texts.fullNameLabel}
+                  placeholder={props.texts.fullNamePlaceholder}
+                  helpertext={errors.fullName?.message}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="phoneNumber"
+              render={({ field }) => <HawaPhoneInput label="Phone number" />}
+            />
+            <Controller
+              control={control}
+              name="email"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="text"
+                  label={props.texts.emailLabel}
+                  helpertext={errors.email?.message}
+                  placeholder={props.texts.emailPlaceholder}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              )}
+              rules={{
+                required: props.texts.emailRequiredText,
+                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,
+                },
+              }}
+            />
+            <Controller
+              control={control}
+              name="password"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="password"
+                  label={props.texts.passwordLabel}
+                  placeholder={props.texts.passwordPlaceholder}
+                  helpertext={errors.password?.message}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              )}
+              rules={{
+                required: props.texts.passwordRequiredText,
+              }}
+            />
 
-          <Controller
-            control={control}
-            name="confirmPassword"
-            render={({ field }) => (
-              <HawaTextField
-                width="full"
-                type="password"
-                label={props.texts.confirmPasswordLabel}
-                placeholder={props.texts.confirmPasswordPlaceholder}
-                helpertext={errors.confirmPassword?.message}
-                {...field}
-                value={field.value ?? ""}
-              />
-            )}
-            rules={{
-              required: props.texts.confirmPasswordRequiredText,
-            }}
-          />
-
-          <HawaButton color="primary" width="full">
+            <Controller
+              control={control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <HawaTextField
+                  width="full"
+                  type="password"
+                  label={props.texts.confirmPasswordLabel}
+                  placeholder={props.texts.confirmPasswordPlaceholder}
+                  helpertext={errors.confirmPassword?.message}
+                  {...field}
+                  value={field.value ?? ""}
+                />
+              )}
+              rules={{
+                required: props.texts.confirmPasswordRequiredText,
+              }}
+            />
+          </FormProvider>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full" type="submit">
             {props.texts.updateProfile}
-          </HawaButton>
-        </form>
-      </FormProvider>
-    </HawaContainer>
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
   )
 }

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { HawaContainer } from "../../layout"
+import { Card, CardContent } from "../../elements/Card"
 
 type UserSettingsFormTypes = {
   children: any
@@ -10,18 +10,11 @@ type UserSettingsFormTypes = {
 
 export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
-    <HawaContainer>
-      <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
-      <div className="flex flex-col gap-4 rounded  p-2">{props.children}</div>
-      {/* <HawaButton
-        color="primary"
-        // type="submit"
-        width="full"
-        margins="none"
-        onClick={props.handleSaveSettings}
-      >
-        {props.saveSettingsText}
-      </HawaButton> */}
-    </HawaContainer>
+    <Card>
+      <CardContent headless>
+        <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
+        <div className="flex flex-col gap-4 rounded  p-2">{props.children}</div>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/AuthForms/AppLanding.tsx

@@ -1,11 +1,13 @@
 import React, { FC } from "react"
-import { HawaButton } from "../../elements"
-import { HawaContainer } from "../../layout/HawaContainer"
+import { HawaRadio } from "../../elements"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type AppLandingTypes = {
   handleSignIn: () => void
   handleSignUp: () => void
   handleLanguage: () => void
+  handleColorMode: () => void
   texts: {
     signIn: string
     signUp: string
@@ -15,20 +17,72 @@ type AppLandingTypes = {
 }
 export const AppLanding: FC<AppLandingTypes> = (props) => {
   return (
-    <HawaContainer maxWidth={props.size}>
-      {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>
+    <div>
+      <Card>
+        <CardContent headless className="flex flex-col gap-6">
+          {props.handleSignIn && (
+            <Button onClick={props.handleSignIn}>{props.texts.signIn}</Button>
+          )}
+          {props.handleSignUp && (
+            <Button onClick={props.handleSignUp}>{props.texts.signUp}</Button>
+          )}
+        </CardContent>
+      </Card>
+      <div className="mt-6 flex flex-row justify-between">
+        <HawaRadio
+          onChangeTab={props.handleLanguage}
+          design="tabs"
+          options={[
+            { value: "ar", label: "عربي" },
+            { value: "en", label: "English" },
+          ]}
+        />
+        <HawaRadio
+          onChangeTab={props.handleColorMode}
+          design="tabs"
+          options={[
+            {
+              value: "light",
+              label: (
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 15 15"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
+                >
+                  <path
+                    d="M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+              ),
+            },
+            {
+              value: "dark",
+              label: (
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  className="h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
+                >
+                  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+                </svg>
+              ),
+            },
+          ]}
+        />
+      </div>
+    </div>
   )
 }

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -1,6 +1,7 @@
 import React, { useState, FC } from "react"
-import { HawaAlert, HawaButton, HawaPinInput } from "../../elements"
-import { HawaContainer } from "../../layout"
+import { HawaAlert, HawaPinInput } from "../../elements"
+import { Card, CardContent } from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type TConfirmation = {
   showError?: any
@@ -25,47 +26,47 @@ type TConfirmation = {
 export const CodeConfirmation: FC<TConfirmation> = (props) => {
   const [pins, setPins] = useState(null)
   return (
-    <HawaContainer>
-      {props.showError && (
-        <HawaAlert
-          title={props.errorTitle}
-          text={props.errorText}
-          severity="error"
-        />
-      )}
-      <div className="mb-4 dark:text-white">
-        <div className="text-lg font-bold">
-          {props.texts.checkYourPhone ?? "Please check your phone"}
+    <Card>
+      <CardContent headless>
+        {props.showError && (
+          <HawaAlert
+            title={props.errorTitle}
+            text={props.errorText}
+            severity="error"
+          />
+        )}
+        <div className="mb-4 dark:text-white">
+          <div className="text-lg font-bold">
+            {props.texts.checkYourPhone ?? "Please check your phone"}
+          </div>
+          <div className="text-muted-foreground">
+            <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
+            <span>{props.phoneNumber}</span>
+          </div>{" "}
         </div>
-        <div className="text-muted-foreground">
-          <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
-          <span>{props.phoneNumber}</span>
-        </div>{" "}
-      </div>
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          if (pins) {
-            props.submitConfirmation(pins)
-          }
-        }}
-      >
-        <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-        <div className=" py-2 text-center text-xs text-muted-foreground">
-          <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
-          <span className="cursor-pointer text-buttonPrimary-500">
-            {props.texts.resendCode ?? "Click to resend"}
-          </span>
-        </div>
-        <div className="mt-4  grid grid-cols-2 gap-2">
-          <HawaButton margins={"none"} variant="outlined" width="full">
-            {props.texts.cancel ?? "Cancel"}
-          </HawaButton>
-          <HawaButton margins={"none"} color="primary" width="full">
-            {props.texts.confirm ?? "Confirm"}
-          </HawaButton>
-        </div>
-      </form>
-    </HawaContainer>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            if (pins) {
+              props.submitConfirmation(pins)
+            }
+          }}
+        >
+          <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
+          <div className=" py-2 text-center text-xs text-muted-foreground">
+            <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
+            <span className="cursor-pointer text-buttonPrimary-500">
+              {props.texts.resendCode ?? "Click to resend"}
+            </span>
+          </div>
+          <div className="mt-4  grid grid-cols-2 gap-2">
+            <Button variant="secondary">
+              {props.texts.cancel ?? "Cancel"}
+            </Button>
+            <Button>{props.texts.confirm ?? "Confirm"}</Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
   )
 }

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -1,7 +1,15 @@
 import React, { useState, FC } from "react"
-import { HawaTextField, HawaAlert, HawaButton } from "../../elements"
+import { HawaTextField, HawaAlert } from "../../elements"
 import { Controller, FormProvider, useForm } from "react-hook-form"
-import { HawaContainer } from "../../layout"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../elements/Card"
+import { Button } from "../../elements/Button"
 
 type NewPasswordTypes = {
   handleNewPassword: () => void
@@ -37,65 +45,72 @@ export const NewPasswordForm: FC<NewPasswordTypes> = (props) => {
   }
 
   return (
-    <HawaContainer>
-      {" "}
+    <Card>
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />
       )}
       {props.passwordChanged ? (
-        <div className="text-center">{props.texts.passwordChanged}</div>
+        <CardContent headless>
+          <div className="text-center">{props.texts.passwordChanged}</div>
+        </CardContent>
       ) : (
         <FormProvider {...methods}>
           <form onSubmit={handleSubmit(handleSubmission)}>
-            <Controller
-              control={control}
-              name="password"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="password"
-                  autoComplete="new-password"
-                  label={props.texts.passwordLabel}
-                  placeholder={props.texts.passwordPlaceholder}
-                  helpertext={errors.password?.message}
-                  {...field}
-                  value={field.value ?? ""}
-                />
-              )}
-              rules={{
-                required: props.texts.passwordRequiredText,
-              }}
-            />
-            <Controller
-              control={control}
-              name="confirmPassword"
-              render={({ field }) => (
-                <HawaTextField
-                  width="full"
-                  type="password"
-                  autoComplete="new-password"
-                  label={props.texts.confirmPasswordLabel}
-                  placeholder={props.texts.confirmPasswordPlaceholder}
-                  helpertext={errors.confirmPassword?.message}
-                  {...field}
-                  value={field.value ?? ""}
-                />
-              )}
-              rules={{
-                required: props.texts.confirmPasswordRequiredText,
-              }}
-            />
+            <CardHeader>
+              <CardTitle>Create Password</CardTitle>
+              <CardDescription>
+                Set a new password for your account
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Controller
+                control={control}
+                name="password"
+                render={({ field }) => (
+                  <HawaTextField
+                    width="full"
+                    type="password"
+                    autoComplete="new-password"
+                    label={props.texts.passwordLabel}
+                    placeholder={props.texts.passwordPlaceholder}
+                    helpertext={errors.password?.message}
+                    {...field}
+                    value={field.value ?? ""}
+                  />
+                )}
+                rules={{
+                  required: props.texts.passwordRequiredText,
+                }}
+              />
+              <Controller
+                control={control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <HawaTextField
+                    width="full"
+                    type="password"
+                    autoComplete="new-password"
+                    label={props.texts.confirmPasswordLabel}
+                    placeholder={props.texts.confirmPasswordPlaceholder}
+                    helpertext={errors.confirmPassword?.message}
+                    {...field}
+                    value={field.value ?? ""}
+                  />
+                )}
+                rules={{
+                  required: props.texts.confirmPasswordRequiredText,
+                }}
+              />
+            </CardContent>
 
-            <HawaButton
-              color="primary"
-              // type="submit"
-              width="full"
-            >
-              {props.texts.updatePassword}
-            </HawaButton>
+            <CardFooter>
+              <Button className="w-full" type="submit">
+                {props.texts.updatePassword}
+              </Button>
+            </CardFooter>
           </form>
         </FormProvider>
       )}
-    </HawaContainer>
+    </Card>
   )
 }