{"id":23119408,"url":"https://github.com/matheusandrade23/maps-ui","last_synced_at":"2025-08-17T00:31:49.367Z","repository":{"id":108339107,"uuid":"549013508","full_name":"MatheusAndrade23/maps-ui","owner":"MatheusAndrade23","description":"Personal Design System with many customizable components, developed with React, documented with Storybook and published on NPM.","archived":false,"fork":false,"pushed_at":"2022-11-01T00:23:49.000Z","size":5188,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T08:10:37.986Z","etag":null,"topics":["javascript","library","maps-ui","monorepo","npm-package","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://matheusandrade23.github.io/Maps-Ui/?path=/docs/home--page","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MatheusAndrade23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-10T14:37:27.000Z","updated_at":"2025-01-02T14:17:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"04d078e5-1f1b-4121-b2d1-fa410de37de1","html_url":"https://github.com/MatheusAndrade23/maps-ui","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.0625,"last_synced_commit":"ed808f941142b725589e082eb9a4c38a2f0094fc"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/MatheusAndrade23/maps-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatheusAndrade23%2Fmaps-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatheusAndrade23%2Fmaps-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatheusAndrade23%2Fmaps-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatheusAndrade23%2Fmaps-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MatheusAndrade23","download_url":"https://codeload.github.com/MatheusAndrade23/maps-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MatheusAndrade23%2Fmaps-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270791255,"owners_count":24645781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-16T02:00:11.002Z","response_time":91,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","library","maps-ui","monorepo","npm-package","react","storybook","typescript"],"created_at":"2024-12-17T05:35:40.595Z","updated_at":"2025-08-17T00:31:49.027Z","avatar_url":"https://github.com/MatheusAndrade23.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eMaps Ui 🗺️\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/MatheusAndrade23/Maps-Ui?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/stars/MatheusAndrade23/Maps-Ui?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/MatheusAndrade23/Maps-Ui?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/forks/MatheusAndrade23/Maps-Ui?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/v/release/MatheusAndrade23/Maps-Ui?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/@maps-ui/react?color=blue\u0026style=for-the-badge\"/\u003e\n  \u003cimg src=\"https://img.shields.io/github/repo-size/MatheusAndrade23/Maps-Ui?color=blue\u0026label=size\u0026style=for-the-badge\"/\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" style=\"display: inline_block\"\u003e\u003cbr /\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/84635540/197596655-b1acc048-b0f4-4a01-9d9e-3655f1dce0b2.jpg\" width=\"400px\" alt=\"FreePick Map Image\"/\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#intro\"\u003eIntroduction\u003c/a\u003e •\n \u003ca href=\"#docs\"\u003eDocumentation\u003c/a\u003e •\n \u003ca href=\"#publication\"\u003ePublication\u003c/a\u003e •\n \u003ca href=\"#tecs\"\u003eTechnologies\u003c/a\u003e •\n \u003ca href=\"#packages\"\u003ePackages\u003c/a\u003e •\n \u003ca href=\"#footer\"\u003eFooter\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003ePersonal Design System with many customizable components, developed with React, documented with Storybook and published on npm.\u003c/h3\u003e\n\n---\n\n\u003ch2 id=\"intro\"\u003eIntroduction\u003c/h2\u003e\n\n### To install the components package:\n\n```sh\nnpm install @maps-ui/react\n```\n\n### To use the components:\n\n```js\nimport { Button, Box, Tooltip, TooltipProvider } from '@maps-ui/react'\n\nexport const MyPage = () =\u003e {\n  return (\n    \u003cTooltipProvider\u003e\n      \u003cBox as=\"section\" css={{ padding: '55px' }}\u003e\n        \u003cTooltip content=\"Send Content\"\u003e\n          \u003cButton variant=\"secondary\"\u003eSend\u003c/Button\u003e\n        \u003c/Tooltip\u003e\n      \u003c/Box\u003e\n    \u003c/TooltipProvider\u003e\n  )\n}\n```\n\n### Result:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/84635540/197596732-f20ca6bd-623d-49c3-b0c2-74803305b95f.gif\"/\u003e\n\n\u003ch2 id=\"docs\"\u003eDocumentation\u003c/h2\u003e\n\nTo access the complete documentation and see how to use and customize each component, \u003ca href=\"https://matheusandrade23.github.io/Maps-Ui/?path=/docs/home--page\"\u003eclick here.\u003c/a\u003e\n\n\u003ch2 id=\"publication\"\u003ePublication\u003c/h2\u003e\n\nThe project was published on `npm`, Node package manager, so anyone who wants can download it and use it in their applications. \u003ca href=\"https://www.npmjs.com/package/@maps-ui/react\"\u003eClick here to visit.\u003c/a\u003e\n\n\u003ch2 id=\"tecs\"\u003eTechnologies\u003c/h2\u003e\n\n- **JS e TS** ➡️ Languages ​​used\n- **React** ➡️ Library for creating components\n- **Stitches** ➡️ Library for styling the components\n- **Storybook** ➡️ Library for component documentation\n- **Radix-Ui** ➡️ Library that helped in the creation of some more complex components\n- **NPM** ➡️ Platform on which the project was published\n\n\u003cdiv style=\"display: inline_block\"\u003e\u003cbr /\u003e\n  \u003cimg align=\"center\" alt=\"npm\" height=\"35\" width=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/npm/npm-original-wordmark.svg\" /\u003e\n  \u003cimg align=\"center\" alt=\"JS\" height=\"35\" width=\"45\" src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg\"\u003e\n  \u003cimg align=\"center\" alt=\"TS\" height=\"35\" width=\"45\" src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-plain.svg\"\u003e\n  \u003cimg align=\"center\" alt=\"React\" height=\"35\" width=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\"\u003e\n  \u003cimg align=\"center\" alt=\"Storybook\" height=\"35\" width=\"45\" src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/storybook/storybook-original.svg\"\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"s\"\u003ePackages\u003c/h2\u003e\n\nMaps Ui consists of 2 packages: **Tokens** and **React**. The components are in the React package: `npm i @maps-ui/react` and the Tokens, which consist of colors, font sizes and weights, spacings and so on, are in the other package: `npm i @maps-ui/ tokens`.\n\n- \u003ca href=\"https://github.com/MatheusAndrade23/Maps-Ui/tree/main/packages/react\"\u003eClick here to see how to use the components.\u003c/a\u003e\n\n- \u003ca href=\"https://github.com/MatheusAndrade23/Maps-Ui/tree/main/packages/tokens\"\u003eClick here to see how to use the tokens.\u003c/a\u003e\n\n\u003cbr /\u003e\n\n---\n\n\u003cp align=\"center\"\u003e🌟 If you liked it, consider giving it a star! 🌟\u003c/p\u003e\n\u003cdiv id=\"footer\" align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/matheus-andrade23/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003ca href = \"mailto:matheusandrade.ma2003@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Gmail-%23333?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheusandrade23%2Fmaps-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatheusandrade23%2Fmaps-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatheusandrade23%2Fmaps-ui/lists"}