කොම්පැනියක් තුළ React යෙදුමක් සහ Angular පරිපාලක පැනලයක් දෙකම භාවිතා කරන විට, එකම බ්රෑන්ඩ් නාමය තිබුණත් රූපලාවන්යයේ අඩුපාඩු පෙනෙන්නට ලැබුණා. React බොත්තමේ රේඩියස් 6px වූ අතර Angular එකේ 4px, ෆෝකස් රින්ග් වර්ණද තරමක් වෙනස් වුණා. මේ වෙනස්කම් කවදාවත් ගැටළුවක් නොවූවාය, නමුත් එක්වරක් ඒවා දැකලා පසු, දෙකම අලුත් කරගන්නට කාලයත් කුමාරකමත් ගත වුණා.
ඉතින් ලේඛකයා විසින් bpdm/ui නමින් නව Design System එකක් නිර්මාණය කළා. මෙහි ප්රධාන නීතියක් වන්නේ රූපලාවන්යය @bpdm/tokens හි CSS වරියන් (variables) ලෙස තනිව සුරකිනවා, React හෝ Angular කොඩ් එකක අභ්යන්තරයෙන් කිසිදා එය වෙනස් නොකරනවා. වර්ණ, අන්තර්ගත, රේඩියස්, transition easing වගේ සියලුම විස්තර tokens.css තුළින් ලබා ගනී. පසුබැසීමේ (structure) හා හැසිරීමේ (behaviour) කේතය දෙකම වෙනම පැකේජයක් ලෙස React (@bpdm/ui) සහ Angular (@bpdm/ng) වෙත ලබා දෙනවා.
මෙම පද්ධතිය Tailwind v4 සමඟ අනුකූල වේ. Tailwind import කරගෙන tokens.css එක import කිරීමෙන්, එකම token එක වෙනස් කරන විට දෙකම එකවර නව රූපලාවන්යයට පත් වේ. එමනිසා "Angular theme එක sync කරන්න" වැනි අමතර පියවරක් අවශ්ය නොවේ. දෙකම light හා dark theme දෙකක් ලබා දේ, අවශ්ය නම් variable override කරලා සම්පූර්ණ UI එකම නැවත skin කරගත හැක.
පහසුකමට අමතරව, ප්රවේශය (accessibility)ද දෙකම එකම ARIA pattern පරිදි නිර්මාණය කර ඇති අතර, React පාර්ශවයේ Radix, Angular පාර්ශවයේ CDK යොදාගෙන කීබෝර්ඩ් සහ screen‑reader හැසිරීම සමාන වේ. මේ වන විට 38 කොම්පොනන්ට් දෙකම දෙපැත්තේ පවතින අතර, මුදල් ඇතුළත් input, masked fields, KPI cards, status timelines වැනි back‑office අවශ්යතා සඳහා නිර්මාණය කර ඇත. සියලුම කොම්පොනන්ට් TypeScript‑ින් typed කර ඇති අතර tree‑shakeable, MIT license යටතේ ලබා ගත හැක.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ තරුණ සංවර්ධකයින්, විශ්වවිද්යාල සිසුන් සහ තාක්ෂණික ව්යාපාර සඳහා මේ Design System එක විශාල අවස්ථාවක්. එකම token set එකක් භාවිතා කිරීමෙන් React හෝ Angular ව්යාපෘතියක් ඇරඹුමට අවශ්ය කාලය අඩු වෙයි, UI consistency ගලපා ගැනීමට අමතර කාර්යබහුලතාවක් නැත. MIT license නිසා, ලෝකය පුරා නිදහස් ලෙස භාවිතා කරගත හැකි අතර, ශ්රී ලංකාවේ open‑source කාර්යශීලීත්වය වර්ධනයට දායක වේ. වැඩිම පරිමාණයේ UI library එකක් දේශීය සංවර්ධකයින්ට අත්හදා බැලීමට, ගොඩනැගීමට, සහ අභ්යන්තරයෙන් customisation කිරීමට හැකියාව ලබා දේ. එමඟින් තාක්ෂණික නිෂ්පාදනවල ගුණාත්මකභාවය, වේගය, සහ පාරිභෝගික‑මිතුරත්වය ඉහළ යයි.
මෙම පද්ධතිය තවමත් නවතම නිර්මාණයක් වන අතර, Angular පැකේජය React වඩා අඩු පරීක්ෂණයක් ගත කර ඇත. ඔබ භාවිතා කරමින් කිසිදු අසමතුලිතතාවක් දැනුම් දුන්නාම, එය තවත් වැඩි දියුණු කිරීමට ප්රධාන ආධාරයක් වනු ඇත. ඉදිරියේදී මේ Design System එකේ parity (සමානතාව) පවත්වාගෙන යාම අපේ අරමුණයි.
