@momo-webplatform/mobase 0.0.3 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,23 +1,94 @@
-# Nextra Docs Template 
+<p align="center">
+  <a href="https://momo.vn/">
+      <img width="100%" src="https://homepage.momocdn.net/img/momo-upload-api-240307154531-638454231312111578.jpeg" alt="Mobase UI library" />
+  </a>
+</p>
 
-This is a template for creating documentation with [Nextra](https://nextra.site).
+# Mobase
 
-[**Live Demo →**](https://nextra-docs-template.vercel.app)
+[![](https://img.shields.io/npm/v/@momo-webplatform/mobase?style=plastic)](https://www.npmjs.com/package/@momo-webplatform/mobase)
+[![](https://img.shields.io/npm/dw/@momo-webplatform/mobase?style=plastic)](https://www.npmjs.com/package/@momo-webplatform/mobase)
 
-[![](.github/screenshot.png)](https://nextra-docs-template.vercel.app)
+Mobase is MoMo website design system, a collection of guidelines, components and tools for creating intuitive, user-first experiences.
 
-## Quick Start
+With Mobase, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.
 
-Click the button to clone this repository and deploy it on Vercel:
+<a href="https://dev1.momo.vn:3000/"><strong>Get Started with Mobase &rarr;</strong></a>
 
-[![](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false)
+## Getting Started
 
-## Local Development
+Visit <a href="https://dev1.momo.vn:3000/" target="_blank">Mobase Docs</a> to get started.
 
-First, run `pnpm i` to install the dependencies.
+### Setup Tailwind CSS
 
-Then, run `pnpm dev` to start the development server and visit localhost:3000.
+Install Tailwind CSS:
 
-## License
+```bash
+pnpm i autoprefixer postcss tailwindcss
+pnpm tailwindcss init -p
+```
 
-This project is licensed under the MIT License.
+Point Tailwind CSS to files you have `className=".."` in:
+
+```javascript
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}" /* src folder, for example */],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+Add Tailwind CSS to a CSS file:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### Install Mobase React
+
+1. Run the following command to install `@momo-webplatform/mobase`:
+
+```bash
+npm i @momo-webplatform/mobase
+```
+
+2. Add the Mobase plugin to `tailwind.config.js`, and include content from `@momo-webplatform/mobase`:
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    // ...
+    "node_modules/@momo-webplatform/mobase/lib/esm/**/*.js",
+  ],
+  plugins: [
+    // ...
+  ],
+};
+```
+
+### Try it out
+
+How you use Mobase React depends on your project setup. In general, you can just import the components you want to use from `@momo-webplatform/mobase` and use them in a React `.jsx` file:
+
+```tsx
+import { Button } from "@momo-webplatform/mobase";
+
+export default function MyPage() {
+  return (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  );
+}
+```
+
+## Figma
+
+If you need the Figma files for the components you can check out our website for more information:
+
+🎨 [Get access to the Figma design files](https://dev1.momo.vn:3000/figma/)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.3",
-  "description": "Nextra docs template",
+  "version": "0.0.4",
+  "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -13,10 +13,6 @@
     "build-storybook": "storybook build",
     "release": "standard-version -a"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shuding/nextra-docs-template.git"
-  },
   "publishConfig": {
     "access": "public"
   },
@@ -26,10 +22,7 @@
   ],
   "author": "MoMo - Front-end dev",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/shuding/nextra-docs-template/issues"
-  },
-  "homepage": "https://github.com/shuding/nextra-docs-template#readme",
+  "homepage": "https://momo.vn/",
   "dependencies": {
     "@floating-ui/react": "^0.26.2",
     "@heroicons/react": "1.0.6",