precise ui

ไลบรารีคอมโพเนนต์ปฏิกิริยาที่มีความคิดเห็นที่สมบูรณ์พร้อมการพึ่งพาน้อยที่สุดที่ขับเคลื่อนโดย Zeiss

ไลบรารีส่วนประกอบ UI มีทั้งองค์ประกอบการออกแบบระดับต่ำมากเช่นเดียวกับองค์ประกอบการออกแบบระดับสูงรวมกัน โดยทั่วไปความตั้งใจของห้องสมุดคือการทำให้การพัฒนาง่ายขึ้นโดยการเปิดเผยส่วนประกอบที่ตอบสนองข้อกำหนดการออกแบบและให้ความสะดวกในการเขียนโปรแกรม การออกแบบ UI ที่ทำซ้ำได้ควรใช้เวลาเพียงไม่กี่นาทีแทนที่จะเป็นชั่วโมง

ดู https://precise-ui.io สำหรับอ่างล้างจานในครัวของเรา (เช่นหน้าสาธิตที่แสดงส่วนประกอบทั้งหมดรวมถึงเอกสารของพวกเขา)

เริ่มต้น

โดยพื้นฐานแล้วการใช้งานทั่วไปควรเป็นนัยในขณะที่ความยืดหยุ่นถูกจัดทำโดยข้อความที่ชัดเจน เช่นนี้เราตั้งเป้าหมายเพื่อความเรียบง่าย (ความเห็น) ในขณะที่สามารถปรับแต่งให้มากที่สุด แม้ว่าการออกแบบมาตรฐานจะตั้งไว้สำหรับเป้าหมายหลักของเราเอง แต่เราต้องการบรรลุอิสระอย่างเต็มที่ในพื้นที่นั้น ด้วยเหตุนี้เราจึงปรับปรุงวิธีการที่เราทำตามวิธีและวิธีการเปิดเผยส่วนประกอบเพื่อเปิดใช้งานการปรับแต่งใด ๆ ที่อาจต้องการ

UI ที่แม่นยำสามารถรวมเข้ากับโครงการส่วนหน้าของคุณได้อย่างง่ายดายโดยใช้ NPM หรือเส้นด้าย หากต้องการเริ่มใช้โปรดทำตามคำแนะนำด้านล่าง:

การติดตั้ง

1. ประการแรกคุณต้องติดตั้ง:

npm i precise-ui

หรือใช้เส้นด้าย

yarn add precise-ui

2. จากนั้นตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งการพึ่งพาเพียร์ทั้งหมด:

npm i react styled-components

การใช้งาน

ทุกอย่างพร้อมตอนนี้คุณสามารถเริ่มนำเข้าคอมโพเนตที่แม่นยำ-UI

 import { TextField } from 'precise-ui' ;

< TextField label = "Label" />

คุณสามารถดูรายการส่วนประกอบที่มีอยู่ทั้งหมดในเว็บไซต์ของเรา

การบริจาค

ทุกคนยินดีที่จะให้การสนับสนุน UI ที่แม่นยำ อย่างไรก็ตามก่อนที่คุณจะเริ่มให้แน่ใจว่าคุณอ่านคำแนะนำการบริจาคของเรา

หากคุณรู้สึกไม่แน่ใจว่าคุณควรมีส่วนร่วมหรือไม่อาจเป็นจรรยาบรรณของเราสามารถช่วยคุณได้

ปัญหาและการสนับสนุน

หากคุณมีการใช้งานและคำถามทั่วไปคุณสามารถถามคำถามเกี่ยวกับ สแต็กล้น โดยใช้แท็ก precise-ui และคุณจะได้รับความช่วยเหลือโดยเร็วที่สุด

นอกจากนี้เมื่อสร้างปัญหาใหม่ที่นี่โปรดใช้หนึ่งในเทมเพลตที่ให้ไว้:

• รายงานข้อผิดพลาด
• ข้อเสนอคุณสมบัติ

การพัฒนา

ส่วนต่อไปนี้จะแนะนำคุณผ่านกระบวนการพัฒนา UI ที่แม่นยำ

การติดตั้ง

สำหรับการพัฒนาคุณจะต้องมี NPM และ Node.js 8+ หลังจากโคลนนิ่งที่เก็บติดตั้งการพึ่งพาทั้งหมดผ่าน

npm install

นี่คือตัวอย่างที่รวดเร็วในการเริ่มต้น สิ่งที่คุณต้องการคือการวิ่ง:

npm start

ด้วยเหตุนี้สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์การพัฒนาที่ใช้อ่างล้างมือในครัว (แอปพลิเคชันตัวอย่างของเรา) ซึ่งทำงานในพื้นที่และสามารถเข้าถึงได้ผ่านทาง LocalHost: 6060 หมายเหตุ: พอร์ตนี้สามารถเปลี่ยนแปลงได้ หน้าเว็บที่มีอยู่มีส่วนประกอบที่รวมอยู่ทั้งหมดและเอกสารที่มีประโยชน์บางอย่างที่หวังไว้สำหรับสิ่งเหล่านี้

การกำหนดเวอร์ชัน

การเพิ่มเวอร์ชันสามารถทำได้ผ่าน npm เช่นกัน

npm version

นี่จะแสดงเวอร์ชันปัจจุบันและขอเวอร์ชันใหม่ เป็นผลให้ข้อมูลใน package.json ได้รับการปรับปรุง นอกจากนี้แท็ก Git จะถูกสร้างขึ้นด้วยข้อมูล (นำหน้าโดยอัตโนมัติโดยใช้ "V") กระบวนการนี้อาจเป็นไปโดยอัตโนมัติเช่นโดยระบุเวอร์ชันใหม่โดยตรง ตัวอย่างเช่นหากเวอร์ชันใหม่ของเราคือ "1.2.3" เราแค่ใช้คำสั่งต่อไปนี้:

npm version --new-version 1.2.3

การประชุม

เราไม่ใช้การส่งออกเริ่มต้น แต่ควรตั้งชื่อการส่งออกทุกครั้งอย่างถูกต้อง สำหรับส่วนประกอบชื่อของการส่งออกเท่ากับชื่อไฟล์หรือโฟลเดอร์

โฟลเดอร์

ทุกองค์ประกอบหลักที่เปิดเผยจะต้องวางไว้ในโฟลเดอร์ของตัวเองด้านล่าง components ส่วนประกอบที่วางไว้ใน *.part.tsx ไฟล์ถูกพิจารณาว่าเป็นส่วนประกอบภายในที่สร้างขึ้นสำหรับการจัดหาโครงสร้างภายใน (จำเป็น) เท่านั้น

ส่วนประกอบผู้ช่วยออกแบบที่เปิดเผยทุกชิ้นจะต้องวางไว้ในไฟล์ในโฟลเดอร์ quarks ผู้ช่วยออกแบบเริ่มต้นด้วยคำนำหน้า Styled เช่นเดียวกับส่วนประกอบสไตล์ธรรมดาที่ควรจะเป็น

ส่วนประกอบที่มีลำดับสูงกว่า (HOC) ควรอยู่ในโฟลเดอร์ hoc อนุสัญญาการตั้งชื่อคือการเปิดเผย HOC ด้วย with หน้า

ส่วนประกอบที่เกี่ยวข้องกับบริบทอยู่ในโฟลเดอร์ contexts

ต้องวางยูทิลิตี้การใช้งานธรรมดาใน utils แม้ว่าเพื่อความสะดวกเนื้อหาทั้งหมดของ UTIL จะถูกส่งออกโมดูลของพวกเขาควรอ้างอิงโดยตรงจากส่วนประกอบใด ๆ ยูทิลิตี้จะต้องมีความยั่งยืนด้วยตนเองเช่นการอ้างอิงส่วนประกอบด้านหลังเป็นสิ่งต้องห้าม

การตั้งชื่อ

ในขณะที่ส่วนประกอบ ไร้สัญชาติ ควรถูกสร้างขึ้นเป็น const ส่วนประกอบของ statefull ควรถูกสร้างเป็น class ในกรณีก่อนหน้านี้มีเพียงอินเทอร์เฟซที่มีชื่อของส่วนประกอบที่มี Props ควรสร้าง (เพื่อประกาศการพิมพ์ของอุปกรณ์ประกอบฉาก) ในกรณีหลังจะมีการสร้างอินเทอร์เฟซเพิ่มเติมที่มีชื่อของส่วนประกอบที่มีสถานะต่อ State ด้วยเช่นกัน อินเทอร์เฟซนี้มีข้อมูลประเภทสำหรับสถานะภายในของส่วนประกอบ

ส่วนประกอบของฟิลด์อินพุตควรได้รับการต่อท้ายด้วย Field อุปกรณ์ประกอบฉากของพวกเขาควรขยายอินเทอร์เฟซ InputProps

อุปกรณ์ประกอบฉากของเหตุการณ์ควรได้รับการแก้ไข on และควรมีอาร์กิวเมนต์เดียวเท่านั้น อาร์กิวเมนต์นี้จะต้องเป็นวัตถุที่ติดตามอินเทอร์เฟซซึ่งมีชื่อที่เพียงพอสำหรับเหตุการณ์มักจะประกอบด้วยชื่อขององค์ประกอบประเภทเหตุการณ์และการต่อท้ายกับ Event เช่นสำหรับ onChange ของ TextField ที่เรามี TextFieldChangeEvent

เรามีคลาสส่วนประกอบที่หลากหลาย เราควรจะสามารถแยกแยะความแตกต่างระหว่างคลาสส่วนประกอบที่แตกต่างกันได้อย่างง่ายดายโดยดูคำต่อท้ายของส่วนประกอบ เรามี:

• *Control ส่วนประกอบการทำงานของรัฐ
• *Panel เอาต์ที่จะใช้
• *Field ฟิลด์อินพุต

ข้อยกเว้นสำหรับอนุสัญญานี้สามารถเกิดขึ้นได้เนื่องจากเหตุผลต่าง ๆ (ประวัติศาสตร์ความงาม, ... ) แต่ควรให้เหตุผลและพูดคุยอย่างถูกต้องเสมอ

การจัดรูปแบบรหัส

มีไม่มากที่จะเขียน เราใช้ Prettier และการตรวจสอบของเราว่ารหัสได้รับการรับรองอย่างเหมาะสมหรือไม่ แค่วิ่ง

npm run prettier

หากคุณมีข้อสงสัยว่ารหัสของคุณเปลี่ยนไปตามการจัดรูปแบบที่เราต้องการ

การทดสอบหน่วย

การเปลี่ยนแปลงใด ๆ จะต้องอยู่ใน บริษัท ด้วยการทดสอบหน่วยที่เกี่ยวข้อง เพื่อเรียกใช้การทดสอบเราใช้คำสั่งต่อไปนี้:

npm run test

สิ่งนี้จะเรียกใช้ linter การทดสอบหน่วยแบบสแตนด์อโลนมีให้ผ่าน test:unit ในทำนองเดียวกันเรายังสามารถรายงานความครอบคลุมของรหัสได้อย่างง่ายดาย:

npm run test:unit --coverage

สำหรับการทดสอบหน่วยเราใช้ความตลกขบขัน เราขอแนะนำให้ใช้การทดสอบสแน็ปช็อต (ซึ่งทำผ่านเอนไซม์และ Serializer JSON Snapshot)

การทดสอบภาพ

ภาพสแน็ปช็อตจะอยู่ใน /integration/__image_snapshots__

เมื่อการทดสอบทำงานจะแสดงผลส่วนประกอบจาก [componentName]/Example.md ทำให้ภาพหน้าจอและเปรียบเทียบกับภาพหน้าจอเวอร์ชันก่อนหน้า

ควรติดตั้งการทดสอบนักเทียบท่าในพื้นที่

npm run test:visual

เมื่อส่วนประกอบถูกเปลี่ยนแปลงเพิ่มหรือลบสแน็ปช็อตควรได้รับการอัปเดต เพื่ออัปเดตสแนปชอต:

npm run test:visual -- -u

ในบางกรณี (เช่นส่วนประกอบที่มีภาพเคลื่อนไหว) จำเป็นต้องข้ามการทดสอบ สามารถทำได้ด้วยวิธีต่อไป: Update Example.md ไฟล์:

 ```js { "props": { "data-skip": true } }

<Component />

ในบางกรณีจำเป็นต้องบอกให้การทดสอบด้วยภาพรอก่อนทำสแน็ปช็อต สามารถทำได้ด้วยวิธีต่อไป: Update Example.md ไฟล์:

 ```js { "props": { "data-wait": 500 } }

<Component />

การเพิ่มไอคอนใหม่

รายการของไอคอนที่นำเข้าทั้งหมดอยู่ใน /tools/icongen.config หลังจากแก้ไขรายการคุณควรเรียกใช้ npm run icongen หรือจะทำงานบน Prepush

ทำการเปิดตัว

รหัสที่สามารถรวบรวมได้ทั้งหมดจะรวมอยู่ในสาขา develop เพื่อให้การเปิดตัวเพียงแค่สร้างการเปิดตัว GitHub (โดยปกติจะคัดลอกรายการปัจจุบันจากไฟล์ CHANGELOG.md )

เวิร์กโฟลว์มาตรฐานจึงดูเหมือนว่า:

1. โคลนที่เก็บ
2. สร้างสาขา
3. ทำงาน
4. ผลักดันการเปลี่ยนแปลงของคุณ
5. สร้างส้อม / สาขาของคุณเพื่อ develop
6. เมื่อ "เพียงพอ" คุณสมบัติที่รวมอยู่ใน develop ทำให้การเปิดตัว GitHub
7. สำหรับการเปลี่ยนแปลงครั้งต่อไปเพื่อ develop สอบให้แน่ใจว่าได้เปลี่ยน / เพิ่มหมายเลขเวอร์ชัน

หากต้องการทราบเกี่ยวกับเวอร์ชันที่วางจำหน่ายในปัจจุบันคุณมีสองตัวเลือก ไม่ว่าคุณจะไปที่หน้า NPM หรือคุณใช้ GitHub รุ่น ทั้งสองเชื่อมโยงกันที่ด้านบนของ readme.md ด้วย

ใบอนุญาต

UI ที่แม่นยำได้รับการปล่อยตัวโดยใช้ใบอนุญาต MIT สำหรับข้อมูลเพิ่มเติมดูไฟล์ใบอนุญาต

เรากำลังใช้ไอคอนบางอย่างจากไอคอน UI วัสดุ รหัสและการออกแบบของพวกเขาครอบคลุมโดยใบอนุญาตของวัสดุ UI (MIT) ที่เกี่ยวข้อง