globalfy-design-system 0.1.0

package/src/components/atoms/Logo/Logo.types.ts

@@ -0,0 +1,3 @@
+export type LogoProps = {
+  variant?: "mobile" | "desktop";
+};

package/src/components/atoms/Logo/images/globalfy_desktop.svg

@@ -0,0 +1,9 @@
+<svg width="371" height="98" viewBox="0 0 371 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.4982 7.76469e-10H77.5008C77.8196 7.76469e-10 78.1253 0.119503 78.3507 0.33222C78.5762 0.544937 78.7028 0.833443 78.7028 1.13427V74.0087C78.7028 74.1572 78.6716 74.3042 78.6111 74.4413C78.5506 74.5784 78.4619 74.7028 78.3501 74.8074C78.2384 74.9119 78.1058 74.9945 77.96 75.0505C77.8142 75.1064 77.6582 75.1346 77.5008 75.1333H63.4982C63.1821 75.1333 62.879 75.0148 62.6555 74.8039C62.432 74.593 62.3064 74.307 62.3064 74.0087V1.13427C62.3051 0.985775 62.3349 0.838497 62.3942 0.700936C62.4535 0.563375 62.541 0.438256 62.6518 0.332801C62.7626 0.227345 62.8945 0.143642 63.0397 0.0865211C63.185 0.0294006 63.3408 -5.51734e-06 63.4982 7.76469e-10Z" fill="#0B9F59"/>
+<path d="M98.8022 71.7855C94.692 69.6803 91.2471 66.4741 88.8516 62.5245C86.4274 58.4425 85.1856 53.7665 85.2648 49.0189C85.1856 44.2714 86.4274 39.5953 88.8516 35.5133C91.2401 31.5508 94.6861 28.3336 98.8022 26.2234C103.268 24.0153 108.183 22.8667 113.164 22.8667C118.146 22.8667 123.06 24.0153 127.526 26.2234C131.62 28.3463 135.048 31.5616 137.428 35.5133C139.845 39.5979 141.084 44.2728 141.005 49.0189C141.084 53.7651 139.845 58.44 137.428 62.5245C135.04 66.4627 131.614 69.6668 127.526 71.7855C123.058 73.9879 118.145 75.1334 113.164 75.1334C108.184 75.1334 103.27 73.9879 98.8022 71.7855ZM122.473 59.2446C124.897 56.6721 126.109 53.2603 126.109 49.0093C126.109 44.7582 124.897 41.3529 122.473 38.7933C121.288 37.5283 119.846 36.53 118.246 35.8647C116.645 35.1995 114.921 34.8824 113.188 34.9345C111.447 34.8858 109.716 35.2042 108.106 35.869C106.496 36.5338 105.045 37.5302 103.845 38.7933C101.409 41.34 100.191 44.7518 100.191 49.0286C100.191 53.3054 101.409 56.7107 103.845 59.2446C105.046 60.5063 106.498 61.5016 108.107 62.1663C109.717 62.8311 111.448 63.1503 113.188 63.1033C114.921 63.1543 116.644 62.8366 118.245 62.1714C119.846 61.5062 121.287 60.5086 122.473 59.2446Z" fill="#0B9F59"/>
+<path d="M270.093 7.76469e-10H284.095C284.414 7.76469e-10 284.72 0.119503 284.945 0.33222C285.171 0.544937 285.297 0.833443 285.297 1.13427V74.0087C285.297 74.1572 285.266 74.3042 285.206 74.4413C285.145 74.5784 285.056 74.7028 284.945 74.8074C284.833 74.9119 284.7 74.9945 284.554 75.0505C284.409 75.1064 284.253 75.1346 284.095 75.1333H270.093C269.936 75.1333 269.781 75.1042 269.637 75.0477C269.492 74.9912 269.361 74.9083 269.25 74.8039C269.139 74.6995 269.052 74.5755 268.992 74.4391C268.932 74.3026 268.901 74.1564 268.901 74.0087V1.13427C268.9 0.985775 268.929 0.838497 268.989 0.700936C269.048 0.563375 269.135 0.438256 269.246 0.332801C269.357 0.227345 269.489 0.143642 269.634 0.0865211C269.779 0.0294006 269.935 -5.51734e-06 270.093 7.76469e-10V7.76469e-10Z" fill="#0B9F59"/>
+<path d="M199.77 35.3062C197.378 31.3298 193.934 28.0982 189.822 25.9707C186.104 24.042 182.017 22.9378 177.837 22.7329C177.056 22.6747 176.284 22.5971 175.473 22.5971C174.663 22.5971 173.891 22.6747 173.1 22.7329C169.595 22.9286 166.153 23.7424 162.929 25.137V1.13422C162.932 0.839274 162.819 0.555099 162.615 0.342938C162.411 0.130777 162.132 0.00761637 161.839 0L148.697 0C148.397 0 148.11 0.119498 147.898 0.332205C147.687 0.544912 147.568 0.833405 147.568 1.13422V74.0054C147.57 74.3045 147.69 74.5905 147.902 74.8011C148.113 75.0117 148.399 75.1299 148.697 75.1299H161.839C162.136 75.1299 162.421 75.0114 162.63 74.8005C162.84 74.5896 162.958 74.3036 162.958 74.0054V72.5997C166.919 74.311 171.191 75.1728 175.502 75.1299C180.481 75.2053 185.401 74.0395 189.822 71.7369C193.917 69.5999 197.346 66.3697 199.732 62.4014C202.151 58.2968 203.39 53.599 203.312 48.8296C203.393 44.0803 202.167 39.4007 199.77 35.3062ZM184.814 59.1345C183.624 60.404 182.18 61.4059 180.576 62.0742C178.973 62.7426 177.247 63.0622 175.512 63.0122C173.77 63.0593 172.038 62.7385 170.427 62.0706C168.816 61.4026 167.363 60.4023 166.162 59.1345C164.545 57.3965 163.439 55.2422 162.968 52.9108C162.325 50.2382 162.325 47.4501 162.968 44.7774C163.439 42.449 164.545 40.2978 166.162 38.5634C167.362 37.2942 168.815 36.2929 170.426 35.6248C172.037 34.9568 173.77 34.6368 175.512 34.6858C177.247 34.6339 178.974 34.9527 180.577 35.6211C182.181 36.2896 183.625 37.2925 184.814 38.5634C187.233 41.1486 188.442 44.5771 188.442 48.849C188.442 53.1209 187.233 56.5494 184.814 59.1345Z" fill="#0B9F59"/>
+<path d="M246.962 23.9998V25.3699C243.034 23.6837 238.798 22.8327 234.523 22.8709C229.524 22.7879 224.583 23.9413 220.136 26.2287C216.02 28.3393 212.574 31.5571 210.185 35.5205C207.761 39.6033 206.519 44.2803 206.598 49.0288C206.519 53.7773 207.761 58.4543 210.185 62.5371C212.583 66.4804 216.028 69.6803 220.136 71.7807C224.583 74.0651 229.525 75.2151 234.523 75.1288C238.797 75.17 243.033 74.3223 246.962 72.6394V74.0096C246.962 74.3064 247.08 74.5911 247.29 74.801C247.5 75.0109 247.784 75.1288 248.081 75.1288H261.224C261.52 75.1288 261.805 75.0109 262.015 74.801C262.224 74.5911 262.342 74.3064 262.342 74.0096V23.9998C262.342 23.702 262.225 23.4164 262.015 23.2049C261.806 22.9935 261.521 22.8734 261.224 22.8709H248.081C247.783 22.8734 247.499 22.9935 247.289 23.2049C247.08 23.4164 246.962 23.702 246.962 23.9998ZM243.809 59.2372C242.622 60.5015 241.181 61.4993 239.58 62.1646C237.979 62.83 236.256 63.1477 234.523 63.0968C232.783 63.1437 231.051 62.8244 229.442 62.1596C227.832 61.4947 226.38 60.4991 225.179 59.2372C222.73 56.6642 221.506 53.2518 221.506 48.9999C221.506 44.7479 222.73 41.3355 225.179 38.7625C226.379 37.4991 227.831 36.5026 229.441 35.8376C231.051 35.1727 232.782 34.8542 234.523 34.9029C236.256 34.8508 237.98 35.1679 239.581 35.8333C241.182 36.4987 242.623 37.4972 243.809 38.7625C245.406 40.4891 246.497 42.6222 246.962 44.9281C247.605 47.6045 247.605 50.3952 246.962 53.0717C246.494 55.3767 245.404 57.5092 243.809 59.2372Z" fill="#0B9F59"/>
+<path d="M59.027 71.5841V24.0143C59.027 23.7147 58.9025 23.4273 58.6807 23.2146C58.4588 23.0018 58.1574 22.881 57.8423 22.8785H43.9215C43.6064 22.881 43.3051 23.0018 43.0832 23.2146C42.8613 23.4273 42.7368 23.7147 42.7368 24.0143V25.4802C38.5526 23.7346 34.0289 22.8449 29.4595 22.8687C24.1879 22.8107 18.9824 23.9877 14.3029 26.2957C9.95219 28.4157 6.30929 31.6464 3.78319 35.6252C1.22982 39.7238 -0.0782596 44.4151 0.00426171 49.1777C-0.0849198 53.9548 1.22713 58.661 3.7934 62.7691C6.31417 66.7437 9.95455 69.9686 14.3029 72.0792C18.9973 74.3833 24.2175 75.5505 29.5003 75.477C34.2033 75.425 38.8471 74.4742 43.1555 72.6811C43.1589 76.1303 41.816 79.458 39.3868 82.0203C36.8233 84.5832 34.6785 85.8259 30.6749 85.8259C30.3597 85.8284 30.0584 85.9492 29.8365 86.162C29.6146 86.3747 29.4901 86.6622 29.4901 86.9617V96.864C29.4914 97.0153 29.5243 97.1648 29.5867 97.3039C29.6492 97.4431 29.74 97.5691 29.8539 97.6747C29.9679 97.7803 30.1027 97.8634 30.2506 97.9192C30.3985 97.975 30.5566 98.0024 30.7157 97.9999C35.6001 97.9328 40.401 96.7861 44.7386 94.6506C49.0755 92.513 52.7031 89.2732 55.2175 85.2919C57.7873 81.1848 59.1029 76.4785 59.0168 71.7006C59.0168 71.7006 59.027 71.6326 59.027 71.5841ZM42.7368 52.9348C42.2771 55.374 41.0936 57.6375 39.3255 59.4586C38.0706 60.7304 36.5457 61.7343 34.8519 62.4037C33.1581 63.0732 31.3339 63.393 29.5003 63.3419C27.6612 63.3893 25.8321 63.0679 24.1323 62.3989C22.4324 61.7298 20.8998 60.728 19.6343 59.4586C17.0537 56.8698 15.76 53.4428 15.7532 49.1777C15.7464 44.9126 17.0401 41.4857 19.6343 38.8968C20.901 37.6289 22.4338 36.6281 24.1334 35.9592C25.833 35.2902 27.6614 34.9681 29.5003 35.0136C31.3337 34.9644 33.1572 35.285 34.8508 35.9543C36.5443 36.6237 38.0694 37.6265 39.3255 38.8968C41.0881 40.7177 42.271 42.9766 42.7368 45.411C43.295 47.8909 43.295 50.4549 42.7368 52.9348Z" fill="#0B9F59"/>
+<path d="M370.545 71.5399V31.5538C370.545 31.4035 370.515 31.2548 370.455 31.1161C370.396 30.9774 370.308 30.8516 370.198 30.7458C370.088 30.64 369.958 30.5564 369.814 30.4998C369.671 30.4432 369.517 30.4147 369.362 30.416H355.709C355.556 30.416 355.404 30.4455 355.262 30.5028C355.12 30.5601 354.992 30.6441 354.884 30.7498C354.775 30.8556 354.69 30.9811 354.632 31.1191C354.574 31.2571 354.545 31.4048 354.547 31.5538V63.2159C353.915 63.2159 353.544 63.2159 353.414 63.2159C349.133 62.6422 347.109 61.592 344.793 59.3262C342.477 57.0605 341.705 53.8223 341.525 49.9715V38.6525C341.527 38.5003 341.497 38.3494 341.436 38.2089C341.376 38.0685 341.287 37.9415 341.174 37.8356L333.415 30.5424L325.867 23.0256C325.76 22.9157 325.631 22.828 325.488 22.7678C325.345 22.7077 325.191 22.6763 325.035 22.6755H312.866C313.125 20.2132 314.177 17.8927 315.873 16.0436C316.95 14.8725 318.264 13.9289 319.734 13.2715C321.203 12.614 322.796 12.2568 324.414 12.2219C324.714 12.2095 324.998 12.0854 325.207 11.8755C325.416 11.6655 325.534 11.3857 325.536 11.0939V0.980678C325.541 0.751808 325.461 0.528806 325.313 0.350929C325.164 0.173053 324.956 0.0517067 324.724 0.00825201H324.514C324.427 -0.00275067 324.34 -0.00275067 324.253 0.00825201C319.505 0.0981054 314.841 1.24245 310.62 3.3534C306.871 5.2305 303.654 7.97096 301.251 11.3346C298.848 14.6982 297.332 18.5822 296.837 22.6463H289.739C289.43 22.6489 289.134 22.7699 288.917 22.983C288.699 23.1961 288.577 23.484 288.577 23.7841V37.0674C288.577 37.2155 288.607 37.3622 288.665 37.4991C288.724 37.6359 288.809 37.7603 288.917 37.865C289.025 37.9698 289.153 38.0529 289.294 38.1096C289.436 38.1662 289.587 38.1954 289.739 38.1954H296.606V74.2432C296.606 74.3922 296.637 74.5397 296.696 74.6772C296.755 74.8147 296.841 74.9395 296.95 75.0443C297.059 75.1492 297.189 75.2321 297.331 75.2882C297.473 75.3443 297.625 75.3726 297.779 75.3713H311.432C311.586 75.3726 311.738 75.3443 311.88 75.2882C312.022 75.2321 312.152 75.1492 312.261 75.0443C312.37 74.9395 312.456 74.8147 312.515 74.6772C312.574 74.5397 312.605 74.3922 312.605 74.2432V38.1954H325.536V48.8921C325.536 48.8921 325.536 48.9699 325.536 49.0185C325.454 53.8042 326.745 58.5177 329.265 62.6325C331.735 66.6057 335.292 69.8371 339.54 71.9678C343.816 74.1324 348.551 75.3073 353.374 75.4004H354.567C354.191 77.8731 353.019 80.1673 351.218 81.9546C348.702 84.5218 346.667 85.8443 342.758 85.8443C342.603 85.843 342.45 85.8715 342.306 85.9281C342.163 85.9847 342.032 86.0683 341.922 86.1741C341.812 86.2798 341.725 86.4057 341.665 86.5444C341.606 86.6831 341.575 86.8318 341.575 86.982V96.8716C341.574 97.0218 341.603 97.1707 341.663 97.3094C341.722 97.4482 341.809 97.5739 341.92 97.6792C342.03 97.7845 342.161 97.8671 342.305 97.9221C342.449 97.9772 342.603 98.0035 342.758 97.9996C347.539 97.916 352.233 96.7435 356.461 94.5767C360.737 92.4638 364.325 89.2424 366.826 85.2706C369.342 81.154 370.633 76.4417 370.555 71.6566C370.555 71.6566 370.545 71.5885 370.545 71.5399Z" fill="#0B9F59"/>
+</svg>

package/src/components/atoms/Logo/images/globalfy_mobile.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="98" viewBox="0 0 82 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.9687 71.5399V31.5538C81.9687 31.4035 81.938 31.2548 81.8784 31.1161C81.8189 30.9774 81.7316 30.8516 81.6216 30.7458C81.5117 30.64 81.3812 30.5564 81.2377 30.4998C81.0942 30.4432 80.9407 30.4147 80.7858 30.416H67.1327C66.9792 30.416 66.8271 30.4455 66.6854 30.5028C66.5437 30.5601 66.415 30.6441 66.3069 30.7498C66.1988 30.8556 66.1134 30.9811 66.0555 31.1191C65.9977 31.2571 65.9686 31.4048 65.9699 31.5538V63.2159C65.3384 63.2159 64.9675 63.2159 64.8371 63.2159C60.5568 62.6422 58.5319 61.592 56.2162 59.3262C53.9006 57.0605 53.1288 53.8223 52.9483 49.9715V38.6525C52.9502 38.5003 52.9201 38.3494 52.8597 38.2089C52.7994 38.0685 52.7102 37.9415 52.5975 37.8356L44.8387 30.5424L37.2904 23.0256C37.1833 22.9157 37.0544 22.828 36.9114 22.7678C36.7684 22.7077 36.6142 22.6763 36.4584 22.6755H24.2889C24.5479 20.2132 25.6002 17.8927 27.2962 16.0436C28.3736 14.8725 29.6877 13.9289 31.157 13.2715C32.6262 12.614 34.2192 12.2568 35.8369 12.2219C36.1374 12.2095 36.4215 12.0854 36.6305 11.8755C36.8395 11.6655 36.9573 11.3857 36.9596 11.0939V0.980678C36.9639 0.751808 36.8848 0.528806 36.7363 0.350929C36.5877 0.173053 36.3793 0.0517067 36.1476 0.00825201H35.9371C35.8506 -0.00275067 35.763 -0.00275067 35.6765 0.00825201C30.9283 0.0981054 26.2646 1.24245 22.0434 3.3534C18.2947 5.2305 15.0778 7.97096 12.6747 11.3346C10.2716 14.6982 8.75579 18.5822 8.26001 22.6463H1.16282C0.853505 22.6489 0.557753 22.7699 0.339966 22.983C0.122179 23.1961 -1.12978e-05 23.484 7.83496e-10 23.7841V37.0674C7.83496e-10 37.2155 0.0300648 37.3622 0.0885019 37.4991C0.146939 37.6359 0.2326 37.7603 0.340578 37.865C0.448555 37.9698 0.576755 38.0529 0.717835 38.1096C0.858914 38.1662 1.01012 38.1954 1.16282 38.1954H8.02947V74.2432C8.02947 74.3922 8.05986 74.5397 8.11892 74.6772C8.17798 74.8147 8.26453 74.9395 8.37357 75.0443C8.48261 75.1492 8.61198 75.2321 8.75422 75.2882C8.89646 75.3443 9.04875 75.3726 9.2023 75.3713H22.8554C23.0089 75.3726 23.1612 75.3443 23.3035 75.2882C23.4457 75.2321 23.5751 75.1492 23.6841 75.0443C23.7932 74.9395 23.8797 74.8147 23.9388 74.6772C23.9978 74.5397 24.0282 74.3922 24.0282 74.2432V38.1954H36.9596V48.8921C36.9596 48.8921 36.9596 48.9699 36.9596 49.0185C36.8772 53.8042 38.1683 58.5177 40.6886 62.6325C43.1583 66.6057 46.7149 69.8371 50.9635 71.9678C55.2398 74.1324 59.9745 75.3073 64.797 75.4004H65.9899C65.6147 77.8731 64.4428 80.1673 62.6418 81.9546C60.1257 84.5218 58.0908 85.8443 54.1813 85.8443C54.0264 85.843 53.8729 85.8715 53.7294 85.9281C53.586 85.9847 53.4555 86.0683 53.3455 86.1741C53.2355 86.2798 53.1482 86.4057 53.0887 86.5444C53.0291 86.6831 52.9984 86.8318 52.9984 86.982V96.8716C52.9971 97.0218 53.0268 97.1707 53.086 97.3094C53.1452 97.4482 53.2326 97.5739 53.343 97.6792C53.4534 97.7845 53.5846 97.8671 53.7286 97.9221C53.8726 97.9772 54.0266 98.0035 54.1813 97.9996C58.9624 97.916 63.6564 96.7435 67.8845 94.5767C72.16 92.4638 75.7479 89.2424 78.2496 85.2706C80.7656 81.154 82.0563 76.4417 81.9787 71.6566C81.9787 71.6566 81.9687 71.5885 81.9687 71.5399Z" fill="#0B9F59"/>
+</svg>

package/src/components/atoms/Logo/index.ts

@@ -0,0 +1,2 @@
+export * from "./Logo";
+export * from "./Logo.types";

package/src/components/atoms/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup } from ".";
+
+const meta = {
+  title: "Components/Atoms/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"]
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    options: [
+      { value: "option1", id: "id1", label: "Option 1" },
+      { value: "option2", id: "id2", label: "Option 2" }
+    ]
+  }
+};

package/src/components/atoms/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { RadioGroup } from "./RadioGroup";
+
+describe("RadioGroup Component", () => {
+  const options = [
+    { value: "value1", id: "id1", label: "Label1" },
+    { value: "value2", id: "id2", label: "Label2" }
+  ];
+
+  test("should render the correct radio inputs and labels", () => {
+    const { getAllByRole, getByText } = render(
+      <RadioGroup options={options} />
+    );
+    const radios = getAllByRole("radio");
+    expect(radios.length).toBe(options.length);
+
+    options.forEach((option) => {
+      expect(getByText(option.label)).toBeInTheDocument();
+      const labelOne = getByText("Label1");
+      const labelTwo = getByText("Label2");
+      expect(labelOne).toBeInTheDocument();
+      expect(labelTwo).toBeInTheDocument();
+    });
+  });
+
+  test("should render a radio group component with label on the left", () => {
+    const oneOption = [{ value: "value2", id: "id2", label: "Label2" }];
+    const { getByRole } = render(
+      <RadioGroup options={oneOption} labelPosition="left" />
+    );
+    const radioGroupItem = getByRole("radio");
+    expect(radioGroupItem).toBeInTheDocument();
+    expect(radioGroupItem.nextSibling).toBeNull();
+    expect(radioGroupItem.previousSibling).not.toBeNull();
+  });
+
+  test("should render a radio group component with label on the right", () => {
+    const oneOption = [{ value: "value2", id: "id2", label: "Label2" }];
+    const { getByRole } = render(
+      <RadioGroup options={oneOption} labelPosition="right" />
+    );
+    const radioGroupItem = getByRole("radio");
+    expect(radioGroupItem).toBeInTheDocument();
+    expect(radioGroupItem.nextSibling).not.toBeNull();
+    expect(radioGroupItem.previousSibling).toBeNull();
+  });
+});

package/src/components/atoms/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,26 @@
+import {
+  RadioGroup as SCNRadioGroup,
+  RadioGroupItem as SCNRadioGroupItem
+} from "@/shadcn/components/ui/radio-group";
+import { RadioGroupProps } from "./RadioGroup.types";
+
+export const RadioGroup = ({
+  options,
+  labelPosition = "right"
+}: RadioGroupProps) => {
+  return (
+    <SCNRadioGroup>
+      {options.map((option) => (
+        <div key={option.value} className="flex gap-2 items-center">
+          {labelPosition === "left" && option.label}
+          <SCNRadioGroupItem
+            value={option.value}
+            id={option.id}
+            className="flex items-center justify-center h-5 w-5 border-globalfy-grey900 text-globalfy-white data-[state=checked]:bg-globalfy-primaryGreen data-[state=checked]:border-globalfy-primaryGreen"
+          />
+          {labelPosition === "right" && option.label}
+        </div>
+      ))}
+    </SCNRadioGroup>
+  );
+};

package/src/components/atoms/RadioGroup/RadioGroup.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export type RadioGroupOption = {
+  label: ReactNode;
+  value: string;
+  id: string;
+};
+
+export type RadioGroupProps = {
+  options: RadioGroupOption[];
+  labelPosition?: "left" | "right";
+};

package/src/components/atoms/RadioGroup/index.ts

@@ -0,0 +1 @@
+export * from "./RadioGroup";

package/src/components/atoms/Switch/Switch.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+
+const meta = {
+  title: "Components/Atoms/Switch",
+  component: Switch,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: "regular"
+  }
+};

package/src/components/atoms/Switch/Switch.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+
+import { Switch } from "./Switch";
+
+describe("Switch Component", () => {
+  test("should render a switch component", async () => {
+    const { getByRole } = await render(<Switch />);
+    const switchTest = getByRole("switch");
+
+    expect(switchTest).toBeTruthy();
+  });
+});

package/src/components/atoms/Switch/Switch.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { SwitchProps } from "./Switch.types";
+import { cva } from "class-variance-authority";
+import { classNames } from "@/utils/tailwind/classNames";
+import { Switch as SCNSwitch } from "@/shadcn/components/ui/switch";
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & SwitchProps
+>(({ className, variant, ...props }, ref) => {
+  const variants = cva(
+    "data-[state=checked]:bg-globalfy-primaryGreen data-[state=unchecked]:bg-globalfy-grey600",
+    {
+      variants: {
+        variant: {
+          regular: "",
+          large:
+            "h-[64px] w-[116px] [&>*]:h-[48px] [&>*]:w-[48px] [&>*]:data-[state=checked]:translate-x-14 [&>*]:data-[state=unchecked]:translate-x-2"
+        }
+      }
+    }
+  );
+
+  return (
+    <SCNSwitch
+      className={classNames(className, variants({ variant }))}
+      {...props}
+      ref={ref}
+    />
+  );
+});

package/src/components/atoms/Switch/Switch.types.ts

@@ -0,0 +1,3 @@
+export type SwitchProps = {
+  variant?: "regular" | "large";
+};

package/src/components/atoms/Switch/index.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./Switch.types";

package/src/components/atoms/Typography/Typography.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Typography } from ".";
+
+const meta = {
+  title: "Components/Atoms/Typography",
+  component: Typography,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    children: "Typography"
+  }
+};

package/src/components/atoms/Typography/Typography.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+
+import { Typography } from "./Typography";
+
+describe("Typography Component", () => {
+  test("should render the provided children", async () => {
+    render(<Typography>Typography</Typography>);
+    expect(screen.getByText("Typography")).toBeTruthy();
+  });
+});

package/src/components/atoms/Typography/Typography.tsx

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+import { TypographyProps } from "./Typography.types";
+import { classNames } from "@/utils/tailwind/classNames";
+
+export const Typography = ({
+  children,
+  className,
+  font = "satoshi",
+  weight = "regular",
+  ...props
+}: TypographyProps) => {
+  const typographyVariants = cva("", {
+    variants: {
+      font: {
+        satoshi: "font-satoshi",
+        livvic: "font-livvic"
+      },
+      weight: {
+        light: "font-light",
+        regular: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+        black: "font-black"
+      }
+    }
+  });
+
+  return (
+    <p
+      {...props}
+      className={classNames(className, typographyVariants({ font, weight }))}
+    >
+      {children}
+    </p>
+  );
+};

package/src/components/atoms/Typography/Typography.types.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+
+export type TypographyProps = {
+  children: React.ReactNode;
+  font?: "satoshi" | "livvic";
+  weight?: "light" | "regular" | "medium" | "semibold" | "bold" | "black";
+} & HTMLAttributes<HTMLParagraphElement>;

package/src/components/atoms/Typography/index.ts

@@ -0,0 +1,2 @@
+export * from "./Typography";
+export * from "./Typography.types";

package/src/components/atoms/index.ts

@@ -0,0 +1,9 @@
+export * from "./Logo";
+export * from "./FieldMessage";
+export * from "./Typography";
+export * from "./Flag";
+export * from "./Icon";
+export * from "./Switch";
+export * from "./Checkbox";
+export * from "./Avatar";
+export * from "./RadioGroup";

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./atoms";

package/src/global.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/main.ts

@@ -0,0 +1 @@
+export * from "./components";

package/src/shadcn/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/shadcn/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/shadcn/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/shadcn/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/shadcn/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/shadcn/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check strokeWidth={4} className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };