From dfc3db7ae3c9de23b7351289f872a36da157e383 Mon Sep 17 00:00:00 2001 From: Mahdi Hazrati Date: Wed, 16 Oct 2024 10:26:47 +0330 Subject: [PATCH] Update and add wellcome --- .../workflows/deploy-npui-github-pages.yaml | 4 +- README.md | 182 ++++++- src/app/globals.css => globals.css | 0 package.json | 1 + src/app/layout.tsx | 2 +- src/stories/Configure.mdx | 446 ------------------ src/stories/Wellcome.mdx | 40 ++ 7 files changed, 225 insertions(+), 450 deletions(-) rename src/app/globals.css => globals.css (100%) delete mode 100644 src/stories/Configure.mdx create mode 100644 src/stories/Wellcome.mdx diff --git a/.github/workflows/deploy-npui-github-pages.yaml b/.github/workflows/deploy-npui-github-pages.yaml index af6dd30..b4bb7f2 100644 --- a/.github/workflows/deploy-npui-github-pages.yaml +++ b/.github/workflows/deploy-npui-github-pages.yaml @@ -1,5 +1,5 @@ # Workflow name -name: Build and Publish NPUI to GitHub Pages +name: Publish NPUI on: # Event for the workflow to run on @@ -21,7 +21,7 @@ jobs: # Manual Checkout - uses: actions/checkout@v4 - # Set up Node.js (using Node v20) + # Set up Node.js (using Node v21) - uses: actions/setup-node@v4 with: node-version: '21.x' # Updated to Node.js v20 diff --git a/README.md b/README.md index aab5457..e07f427 100644 --- a/README.md +++ b/README.md @@ -1 +1,181 @@ -# [NPUI](https://nextproduction.dev/npui/) \ No newline at end of file +# **🧩 [NPUI](https://nextproduction.dev/npui) - Open Component Library** + +**npui** is an open-source component library designed to allow developers to easily add and modify UI components directly into their project directories. Each component is created from scratch, styled with **Tailwind CSS**, and is fully customizable. + +npui provides an easy-to-use CLI tool that allows you to quickly add components to your project without needing to install the entire library. Simply run a command like `npx npui add table`, and the specified component will be added directly to your project. + +--- + +## **Features** +- **Tailwind CSS Styling**: All components are built using Tailwind CSS to ensure flexibility and customization. +- **Direct Component Addition**: Easily add components directly to your project directory using the CLI. +- **Component-Specific Dependencies**: Install only the dependencies that your components need. +- **Open for Modification**: Modify components as needed in your own project without the limitations of working within `node_modules`. + +--- + +## **Getting Started** + +To start using npui, follow these simple steps. + +### **1. Install Components Using CLI** + +You can add any component from npui directly to your project with the following command: + +```bash +npx npui add +``` + +For example, to add a `Table` component: + +```bash +npx npui add table +``` + +This command will: +- Fetch the **Table.jsx** component from the GitHub repository. +- Create an `npui/` directory in your project if it doesn't already exist. +- Add the `Table.jsx` file to the `npui/` directory. +- Install any necessary dependencies for the component (e.g., `react-table`, `classnames`). + +--- + +## **Example Usage** + +1. After running `npx npui add table`, you can import the component in your project like this: + +```jsx +// src/App.js +import Table from './npui/Table'; + +function App() { + return ( +
+ + + ); +} + +export default App; +``` + +2. You can customize the `Table.jsx` component directly in your project’s `npui/` directory. + +--- + +## **Available Components** + +Currently, npui offers the following components (with more to come): +- **Button** +- **Table** +- **Modal** +- **Form** + +### **To see the full list** of components and their documentation, please visit the [npui Documentation](https://nextproduction.dev/npui). + +--- + +## **Installation** + +There’s no need to install the entire npui library. Simply use the CLI command mentioned earlier to add specific components to your project. + +However, if you want to install the CLI globally for faster access, you can install it via npm: + +```bash +npm install -g npui +``` + +Then, use the CLI without `npx`: + +```bash +npui add button +``` + +--- + +## **Tailwind CSS Setup** + +Since all components are styled with Tailwind CSS, you need to ensure Tailwind is properly set up in your project. If you haven't set up Tailwind yet, follow these steps: + +1. **Install Tailwind via npm:** + ```bash + npm install -D tailwindcss + npx tailwindcss init + ``` + +2. **Configure `tailwind.config.js`:** + ```js + module.exports = { + content: [ + './src/**/*.{js,jsx,ts,tsx}', + './npui/**/*.{js,jsx}', // Include npui components + ], + theme: { + extend: {}, + }, + plugins: [], + }; + ``` + +3. **Add Tailwind to your CSS:** + In your main CSS file (e.g., `src/index.css`), include the following: + ```css + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` + +--- + +## **Contributing** + +We welcome contributions from the community! If you’d like to contribute to npui, please follow these steps: + +1. **Fork** the repository. +2. Create a **new branch** for your feature or bug fix. +3. Submit a **pull request** with a description of your changes. + +### **Development Guide** + +1. Clone the repository: + ```bash + git clone https://github.com/nextproduction/npui.git + ``` + +2. Install dependencies: + ```bash + npm install + ``` + +3. Run the CLI locally: + ```bash + npm link + npui add + ``` + +4. Develop new components or improve existing ones in the `packages/` directory. + +--- + +## **License** + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +--- + +## **Roadmap** + +- **Component Expansion**: Continue adding more components like `Navbar`, `Card`, `Accordion`, etc. +- **Component Viewer**: Integrate Storybook for easy preview of all components. +- **Design System**: Grow npui into a full design system. +- **More Documentation**: Provide extensive guides and tutorials for using npui. + +--- + +## **Contact** + +If you have any questions or issues, feel free to open an issue on GitHub or contact us via [mahdi@nextproduction.dev](https://mahdi@nextproduction.dev). + +--- + +**Start building beautiful UIs today with npui!** diff --git a/src/app/globals.css b/globals.css similarity index 100% rename from src/app/globals.css rename to globals.css diff --git a/package.json b/package.json index 9fd9767..6951721 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "npui", "version": "1.0.0", "private": true, + "homepage": "https://nextproduction.dev/npui", "scripts": { "app": "next dev", "build": "next build", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a36cde0..e27a382 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import localFont from "next/font/local"; -import "./globals.css"; +import "../globals.css"; const geistSans = localFont({ src: "./fonts/GeistVF.woff", diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx deleted file mode 100644 index cc32923..0000000 --- a/src/stories/Configure.mdx +++ /dev/null @@ -1,446 +0,0 @@ -import { Meta } from "@storybook/blocks"; -import Image from "next/image"; - -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => - - - - - -
-
- # Configure your project - - Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. -
-
-
- -

Add styling and CSS

-

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

- Learn more -
-
- -

Provide context and mocking

-

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

- Learn more -
-
- -
-

Load assets and resources

-

To link static files (like fonts) to your projects and stories, use the - `staticDirs` configuration option to specify folders to load when - starting Storybook.

- Learn more -
-
-
-
-
-
- # Do more with Storybook - - Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. -
- -
-
-
- -

Autodocs

-

Auto-generate living, - interactive reference documentation from your components and stories.

- Learn more -
-
- -

Publish to Chromatic

-

Publish your Storybook to review and collaborate with your entire team.

- Learn more -
-
- -

Figma Plugin

-

Embed your stories into Figma to cross-reference the design and live - implementation in one place.

- Learn more -
-
- -

Testing

-

Use stories to test a component in all its variations, no matter how - complex.

- Learn more -
-
- -

Accessibility

-

Automatically test your components for a11y issues as you develop.

- Learn more -
-
- -

Theming

-

Theme Storybook's UI to personalize it to your project.

- Learn more -
-
-
-
-
-
-

Addons

-

Integrate your tools with Storybook to connect workflows.

- Discover all addons -
-
- -
-
- -
-
- - Join our contributors building the future of UI development. - - Star on GitHub -
-
- -
- Get support and chat with frontend developers. - - Join Discord server -
-
-
- -
- Watch tutorials, feature previews and interviews. - - Watch on YouTube -
-
-
- -

Follow guided walkthroughs on for key workflows.

- - Discover tutorials -
-
- - diff --git a/src/stories/Wellcome.mdx b/src/stories/Wellcome.mdx new file mode 100644 index 0000000..3e7a7e2 --- /dev/null +++ b/src/stories/Wellcome.mdx @@ -0,0 +1,40 @@ +Welcome to **npui** – a modern, flexible, and easy-to-use component library built with **Tailwind CSS**. Our goal is to empower developers to build beautiful UIs quickly and efficiently, while giving you full control over customization. Let's get you started! 🚀 + +## ✨ What is npui? + +npui is a component library designed to help you **speed up development** without sacrificing flexibility. Every component is created with simplicity in mind, while still offering powerful customization options. No need to dig into `node_modules`! Components are installed directly into your project so you can modify them to suit your exact needs. 💡 + +## 🔧 Installation + +Get started by installing **npui** into your project. It's super easy! + +```bash +npx npui add +``` + +For example, to add a **Button** component: + +```bash +npx npui add button +``` + +That’s it! The component will now be available in your project folder, ready for customization. 🎨 + +## 🧩 Features + +- **Tailwind CSS-first**: All components are styled using **Tailwind CSS**, so you can leverage its utility classes for effortless styling. +- **Full Customization**: You have direct access to the component files. Tailor them to your project’s needs with ease! ✍️ +- **Documentation**: Find everything you need right here, from how to use each component to how to tweak them for your project. 📚 + +## 🛠️ Customizing Components + +One of npui's standout features is the ability to easily customize components. After installing a component, simply modify the files in your project folder to match your design and functionality needs. For example, you can update styles, tweak layouts, or add functionality – it’s all in your hands! 👐 + + +## 💬 Community and Support + +Need help or want to share feedback? Join our growing community on [Discord](#). We're here to assist you and hear your thoughts! 🙌 + +--- + +**npui** – Create, customize, and deliver amazing UIs faster than ever before. Start building today! 💻