From 27ee460d236bebc7b0e75d23777068c8be70fba8 Mon Sep 17 00:00:00 2001 From: Ahmed Ibrahim Date: Wed, 7 Aug 2024 08:36:13 +0300 Subject: [PATCH] feat(luna): impl. input component --- .github/workflows/staging.yml | 4 +- luna/src/components/Input/Input.stories.tsx | 20 +++-- luna/src/components/Input/Input.tsx | 84 ++++++++++----------- luna/src/locales/ar-eg.json | 2 +- luna/src/tailwind.css | 2 +- luna/tailwind.config.js | 20 ++++- 6 files changed, 72 insertions(+), 60 deletions(-) diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml index 10cf3fd1..4dd5cad1 100644 --- a/.github/workflows/staging.yml +++ b/.github/workflows/staging.yml @@ -45,9 +45,9 @@ jobs: - name: Pull Luna from Vercel run: yarn vercel:ci pull "luna" "luna/" --token=${{ secrets.VERCEL_TOKEN }} - name: Build Luna using Vercel - run: yarn build:luna:vercel + run: yarn build:luna:vercel --prod - name: Deploy Luna to Vercel - run: yarn deploy:luna:vercel --token=${{ secrets.VERCEL_TOKEN }} + run: yarn deploy:luna:vercel --prod --token=${{ secrets.VERCEL_TOKEN }} # Nebula Deployment - name: Pull Nebula from Vercel run: yarn vercel:ci pull "nebula" "nebula/" --token=${{ secrets.VERCEL_TOKEN }} diff --git a/luna/src/components/Input/Input.stories.tsx b/luna/src/components/Input/Input.stories.tsx index 82ba8036..4d6b519c 100644 --- a/luna/src/components/Input/Input.stories.tsx +++ b/luna/src/components/Input/Input.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Input } from "@/components/Input"; -import { Form } from "@/components/Form"; import React, { ComponentProps } from "react"; import { Direction } from "@/components/Direction"; import ar from "@/locales/ar-eg.json"; @@ -9,10 +8,8 @@ import ar from "@/locales/ar-eg.json"; const Wrapper: React.FC> = (props) => { return ( -
-
- -
+
+
); @@ -21,16 +18,23 @@ const Wrapper: React.FC> = (props) => { const meta: Meta = { title: "Input", component: Wrapper, - parameters: { - layout: "centered", + parameters: { layout: "centered" }, +}; + +export const Idle: StoryObj = { + args: { + id: "name", + label: ar["global.form.email.label"], + placeholder: ar["global.form.email.placeholder"], }, }; -export const Primary: StoryObj = { +export const Error: StoryObj = { args: { id: "name", label: ar["global.form.email.label"], placeholder: ar["global.form.email.placeholder"], + error: ar["errors.email.invlaid"], }, }; diff --git a/luna/src/components/Input/Input.tsx b/luna/src/components/Input/Input.tsx index eb7686b5..51635241 100644 --- a/luna/src/components/Input/Input.tsx +++ b/luna/src/components/Input/Input.tsx @@ -1,5 +1,5 @@ -import React, { useMemo } from "react"; -import { FieldValues, RegisterOptions, useFormContext } from "react-hook-form"; +import React from "react"; +import { ChangeHandler } from "react-hook-form"; import { motion, AnimatePresence } from "framer-motion"; import cn from "classnames"; @@ -9,67 +9,59 @@ export const Input: React.FC<{ placeholder?: string; autoComplete?: string; type: "text" | "password"; - validation?: RegisterOptions; -}> = ({ label, type, id, placeholder, autoComplete, validation }) => { - const { - register, - formState: { errors }, - } = useFormContext(); - - const error = errors[id]; - - const errorMessage = useMemo(() => { - if (!error) return null; - const mesage = error.message; - if (!mesage || typeof mesage !== "string") return null; - return mesage; - }, [error]); - + onChange?: ChangeHandler; + onBlur?: ChangeHandler; + name?: string; + error?: string | null; +}> = ({ + label, + type, + id, + placeholder, + autoComplete, + onChange, + onBlur, + name, + error, +}) => { return ( -
-
- - - {errorMessage ? ( - - ) : null} - -
+
+ + + {error ? : null} +
); }; const InputError: React.FC<{ message: string }> = ({ message }) => { return ( - - - — - + {message} ); diff --git a/luna/src/locales/ar-eg.json b/luna/src/locales/ar-eg.json index 58954c55..9b91f174 100644 --- a/luna/src/locales/ar-eg.json +++ b/luna/src/locales/ar-eg.json @@ -10,7 +10,7 @@ "page.select.type.options.student": "انا ارغب في تعلم الانجليزية", "page.select.gender.title": "أنا....", "global.form.email.label": "الايميــــــل/البريد الإلكـــــــتروني", - "global.form.email.placeholder": "مثل: mohamed@google.com", + "global.form.email.placeholder": "example@gmail.com", "global.form.password.label": "كلــــــمة الســـــــر", "global.logout": "تسجيـــــــل خــــروج", "errors.invalid": "خطـــــــــــأ", diff --git a/luna/src/tailwind.css b/luna/src/tailwind.css index 6f4a43ed..c5f1cf0b 100644 --- a/luna/src/tailwind.css +++ b/luna/src/tailwind.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Mada:wght@200..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap"); @tailwind base; @tailwind components; diff --git a/luna/tailwind.config.js b/luna/tailwind.config.js index 8868bf4b..5ab60090 100644 --- a/luna/tailwind.config.js +++ b/luna/tailwind.config.js @@ -3,13 +3,13 @@ import { violet, blackA, mauve, green } from "@radix-ui/colors"; /** @type {import('tailwindcss').Config} */ export default { corePlugins: { - preflight: false, + preflight: true, }, prefix: "ui-", content: ["./src/**/*.{ts,tsx}"], theme: { fontFamily: { - mada: ["Mada", "sans-serif"], + cairo: ["Cairo", "sans-serif"], }, extend: { colors: { @@ -17,6 +17,11 @@ export default { ...violet, ...green, ...blackA, + "dark-100": "#181B22", + inputbg: "rgba(235, 237, 242, 0.32)", + "blue-normal": "#3A5BAA", + "red-light": "rgba(238, 48, 36, 0.08)", + "red-border": "#EE3024", }, keyframes: { overlayShow: { @@ -35,6 +40,17 @@ export default { overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)", }, + fontSize: { + arsm: "0.875rem", + arxl: "1.125rem", + }, + lineHeight: { + normal: "13px", + }, + spacing: { + lg: "16px", + xl: "24px", + }, }, }, plugins: [],