start ui web

START UI [WEB] هو مستودع لبداية الواجهة الأمامية التي تم إنشاؤها وصيانتها من قبل فريق Beatstudio وغيرهم من المساهمين. إنه يمثل مكدس فريقنا المحدث الذي نستخدمه عند إنشاء تطبيقات الويب لعملائنا.

الوثائق

للحصول على معلومات مفصلة حول كيفية استخدام هذا المشروع ، يرجى الرجوع إلى الوثائق. تحتوي الوثائق على جميع المعلومات اللازمة حول التثبيت والاستخدام وبعض الأدلة.

العرض التوضيحي

تتوفر عرضًا مباشرًا للقراءة فقط لما ستحصل عليه عند بدء تشغيل مشروع مع Start UI [Web] على demo.start-ui.com.

التقنيات

؟ TypeScript ، ⚛ React ، ⚫ NextJs ، ⚡ شقرا ui ،؟ TRPC ، ▲ prisma ، ️ Transtack Query ، Storybook ،؟ الكاتب المسرحي؟ رد فعل هوك ،؟ رد فعل i18next

متطلبات

• nodejs> = 20
• PNPM
• Docker (أو قاعدة بيانات postgresql)

ابدء

pnpm create start-ui --web myApp

هذا سوف SCAFFOLD مجلد جديد مع أحدث إصدار من Start UI [الويب]؟

تثبيت

1. تكرار ملف .env.example إلى ملف .env جديد ، وتحديث متغيرات البيئة

cp .env.example .env

ملحوظة

نصائح سريعة للتنمية المحلية

• لا تقم بتحديث متغير البريد الإلكتروني eMail_server ، لأنه سيتم استخدام القيمة الافتراضية لالتقاط رسائل البريد الإلكتروني أثناء التطوير.

2. تثبيت التبعيات

pnpm install

3. الإعداد وبدء DB مع Docker

pnpm dk:init

ملحوظة

لا تريد استخدام Docker؟

قم بإعداد قاعدة بيانات postgresql (محليًا أو عبر الإنترنت) واستبدل متغير بيئة Database_url . ثم يمكنك تشغيل pnpm db:push لتحديث مخطط قاعدة البيانات الخاص بك ثم تشغيل pnpm db:seed لبذرة قاعدة البيانات الخاصة بك.

تطوير

 # Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

رسائل البريد الإلكتروني في التطوير

Maildev للقبض على رسائل البريد الإلكتروني

في التطوير ، لن يتم إرسال رسائل البريد الإلكتروني وسيتم اللحاق بها بواسطة MailDev.

يتوفر MailDev UI عند 0.0.0.0:1080.

معاينة رسائل البريد الإلكتروني

تم تصميم قوالب رسائل البريد الإلكتروني مع مكونات react-email في مجلد src/emails .

يمكنك معاينة قالب بريد إلكتروني على http://localhost:3000/devtools/email/{template} حيث {template} هو اسم ملف القالب في مجلد src/emails/templates .

مثال: رمز تسجيل الدخول

معاينة ترجمة البريد الإلكتروني

أضف اللغة في عنوان URL للمعاينة مثل http://localhost:3000/devtools/email/{template}/{language} حيث {language} هو مفتاح اللغة ( en ، fr ، ...)

معاينة الدعائم البريد الإلكتروني

يمكنك إضافة معاملات البحث إلى عنوان URL للمعاينة لتمريرها كدعائم إلى القالب. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

قصص

pnpm storybook

تحديث كتابة السمة

عند إضافة أو تحديث مكونات السمة ، وتغيرات المكونات ، والأحجام ، والألوان وغيرها من أسس السمات ، يمكنك تمديد كتابة السمات الداخلية لتوفير الإكمال التلقائي اللطيف.

فقط قم بتشغيل الأمر التالي بعد تحديث السمة:

pnpm theme:generate-typing

إنشاء مكونات الرموز المخصصة من ملفات SVG

ضع ملفات SVG المخصصة في مجلد src/components/Icons/svg-sources ثم قم بتشغيل الأمر التالي:

pnpm theme:generate-icons

تحذير

يجب أن تكون جميع رموز SVG ملفات SVG مسبوقة بواسطة icon- (مثال: icon-externel-link ) بحجم 24 × 24 بكسل ، شكل واحد فقط ومملوء بلون #000 (سيتم استبداله بـ currentColor ).

تحديث مفتاح تخزين وضع اللون

يمكنك تحديث مفتاح التخزين المستخدم للكشف عن وضع اللون عن طريق تحديث هذا الثابت في ملف src/theme/config.ts :

 export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode' ; // Update the key according to your needs

اختبارات E2E

اختبارات E2E هي الإعداد مع الكاتب المسرحي.

pnpm e2e     # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution

تتم كتابة الاختبارات في مجلد e2e ؛ يوجد أيضًا مجلد e2e/utils يحتوي على بعض الأدوات للمساعدة في كتابة اختبارات.

إظهار تلميح على بيئات التطوير

قم بإعداد متغير env NEXT_PUBLIC_ENV_NAME باسم البيئة.

 NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="?"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

الترجمات

قم بإعداد امتداد حليف I18N

أوصينا باستخدام المكون الإضافي I18N Ally لـ VS Code لإدارة الترجمات.

قم بإنشاء أو تحرير ملف .vscode/settings.json مع الإعدادات التالية:

{
  "i18n-ally.localesPaths" : [ " src/locales " ],
  "i18n-ally.keystyle" : " nested " ,
  "i18n-ally.enabledFrameworks" : [ " general " , " react " , " i18next " ],
  "i18n-ally.namespace" : true ,
  "i18n-ally.defaultNamespace" : " common " ,
  "i18n-ally.extract.autoDetect" : true ,
  "i18n-ally.keysInUse" : [ " common.languages.* " ]
}

إنتاج

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

نشر مع Docker

1. قم ببناء صورة Docker (استبدل start-ui-web باسم مشروعك)

 docker build -t start-ui-web .

2. قم بتشغيل صورة Docker (استبدل start-ui-web باسم مشروعك)

 docker run -p 80:3000 start-ui-web

سيتم عرض التطبيق على المنفذ 80 (http: // localhost)