Skip to content

Commit f11bf70

Browse files
amoskyaloamoskyalo
authored
Merge pull request #42 from amoskyalo/issue_#41_readme_update
Fix: Updated readme file to reflect latest CLI functionality changes including install command line
2 parents c949908 + 934d38c commit f11bf70

File tree

2 files changed

+77
-64
lines changed

2 files changed

+77
-64
lines changed

‎README.md

Lines changed: 76 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
<h3 align="center" style="font-size: 56px;"> 🏗️ MATERIAL UI CLI</h3>
2+
13
<h3 align="center">
2-
4+
35
[![mui_cli](https://img.shields.io/badge/-MATERIAL_UI_CLI-blue?style=for-the-badge&logo=mui&logoColor=D9E0EE)](https://github.com/amoskyalo/material-UI-CLI)
46
<a href="https://github.com/amoskyalo/material-UI-CLI/issues">
57
<img alt="Issues" src="https://img.shields.io/github/issues/amoskyalo/material-UI-CLI?style=for-the-badge&logo=gitbook&color=cba6f7&logoColor=D9E0EE&labelColor=302D41"></a>
@@ -10,29 +12,30 @@
1012
</p>
1113

1214
# Table of Contents
15+
1316
- [Introduction](#material-ui-cli-streamlining-your-development-workflow)
1417
- [Features](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-comprehensive-feature-set)
1518
- [Installation](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-installation)
1619
- [Usage](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-usage)
17-
- [Create new project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#1--create-new-project)
18-
- [Generate theme file to an existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#2-%EF%B8%8F-generate-theme-file-to-an-existing-project)
19-
- [Validate theme file in existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
20-
- [Component Scaffolding](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
20+
- [Create new project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#1--create-new-project)
21+
- [Generate theme file to an existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#2-%EF%B8%8F-generate-theme-file-to-an-existing-project)
22+
- [Validate theme file in existing project](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
23+
- [Component Scaffolding](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#3--validate-theme-file-in-existing-project)
2124
- [Supported MUI components](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-popular-mui-components)
2225

2326
# Material-UI CLI: Streamlining Your Development Workflow
2427

2528
The Material-UI CLI is a powerful command-line interface tool designed to significantly streamline and enhance the development process with Material-UI, a renowned React UI framework. This CLI tool simplifies the initialization of new projects, the generation and validation of theme files, and the scaffolding of popular Material-UI components, thereby allowing developers to focus on creating exceptional user interfaces without getting bogged down by the setup and configuration process.
2629

27-
2830
## ✨ Comprehensive Feature Set
29-
- **Project Initialization**: Kickstart your development with a new React project, pre-configured with Material-UI dependencies, allowing for a smooth and rapid setup.
31+
32+
- **Project Initialization**: Kickstart your development with a new `React`, `Vite` or `Next.js` project, pre-configured with Material-UI dependencies, allowing for a smooth and rapid setup.
3033
- **Theme Generation**: Easily generate a theme file for your project, customizable with primary, secondary, error, warning, info, and success color options, laying the foundation for a consistent design system.
3134
- **Theme Validation**: Ensure your theme file adheres to Material-UI's theming guidelines, with options to validate palette, typography, spacing, breakpoints, and transitions, thus guaranteeing a polished and error-free UI.
3235
- **Component Scaffolding**: Choose from a wide array of popular Material-UI components to scaffold into your project, organized neatly within your project structure, saving you the hassle of manual setup and configuration.
3336

3437
## 📦 Installation
35-
38+
3639
```sh
3740
npm i -g material-cli
3841
```
@@ -44,31 +47,28 @@ npm i -g material-cli
4447
To initialize a new project, first, navigate to the desired folder, then:
4548

4649
```sh
47-
material-cli project-init [options]
50+
material-cli project-init
4851
```
4952

50-
The available options for the initialization command are:
51-
52-
| Option | Description |
53-
| --- | --- |
54-
| name `(required)` | Your project name |
55-
| --all `(optional)` | Install all components flag |
56-
57-
This command will create a new React app using your default package manager, which it automatically detects, thus removing the need for manual configuration.
53+
You will be then prompted with questions to select:
5854

59-
Including the `--all` flag will scaffold all [supported Material UI components](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-popular-mui-components) into your project. Otherwise, you will be prompted to select the components you wish to include.
55+
- Project name
56+
- Your preferred tool: `React`, `Vite` or `Next.js`
57+
- Your preferred architecture: `Monorepo` or `Polyrepo`
58+
- [Popular MUI components](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-popular-mui-components) you want to scaffold to your project.
6059

61-
If everything proceeded smoothly, you'll receive a confirmation message indicating that your project setup is complete. Navigate to the project directory and execute the start script command. If you followed the procedure correctly, your project will initiate at `localhost:3000`, and the default landing page shown below will be displayed:
60+
If everything proceeded smoothly, you'll receive a confirmation message indicating that your project setup is complete. Navigate to the project directory and execute the reccomended script command.
6261

63-
<img alt="Issues" height="200" src="https://github.com/amoskyalo/material-UI-CLI/assets/91586973/5ac71564-b546-4acb-8e22-40726a5e2ee3">
64-
65-
#### Initializing a new React project with the MUI CLI offers several advantages:
62+
#### Initializing a new project with the MUI CLI offers several advantages:
6663

64+
- ⚡ Choose your preffered tool to use between `CRA`, `Vite` and `Next.js`.
65+
- 🌐 Choose your preffered architecture between `Monorepo` and `Polyrepo`.
66+
- 🚀 Experience faster project initialization for **CRA** over the conventional **CRA Command method**.
6767
- 📦 Automatically installs all Material UI-related dependencies, including MUI icons.
6868
- ✅ Allows selection of specific Material UI components to scaffold into your project.
6969
- ⚙️ Automatically generates a theme file.
70-
- 🎨 Comes with pre-configured Material UI theming.
71-
- 🚀 Lets you focus more on development rather than setup.
70+
- 🎨 Comes with pre-configured Material UI theming for both **React, Vite and Next.js** projects.
71+
- 🌟 Lets you focus more on development rather than setup.
7272

7373
#### The downside of using MUI CLI to initialize your project includes:
7474

@@ -84,20 +84,19 @@ Ensuring adherence to the correct MUI theming guidelines can sometimes be challe
8484
material-cli theme-init [options]
8585
```
8686

87-
The following **options** can be passed to the command:
87+
The following **options** can be passed to the command:
8888

89-
| Option | Description |
90-
| -----------------------------|--------------------------|
91-
| -p, --primary `(optional)` | Primary color option |
92-
| -s, --secondary `(optional)` | Secondary color option |
93-
| -e, --error `(optional)` | Error color option |
94-
| -w, --warning `(optional)` | Warning color option |
95-
| -i, --info `(optional)` | Info color option |
96-
| -x, --success `(optional)` | Success color option |
89+
| Option | Description |
90+
| ---------------------------- | ---------------------- |
91+
| -p, --primary `(optional)` | Primary color option |
92+
| -s, --secondary `(optional)` | Secondary color option |
93+
| -e, --error `(optional)` | Error color option |
94+
| -w, --warning `(optional)` | Warning color option |
95+
| -i, --info `(optional)` | Info color option |
96+
| -x, --success `(optional)` | Success color option |
9797

9898
The `theme.js` file will be generated under `src > Theme` folder in your project. Note that only palette options can be passed as option.
9999

100-
101100
### 3. 🔍 Validate theme file in existing project.
102101

103102
You can easily inspect your theme file to identify any potential errors or warnings that might have been overlooked. To inspect your theme file, simply execute the following command:
@@ -108,15 +107,15 @@ material-cli theme-validate [options]
108107

109108
The following **options** can be passes to the command:
110109

111-
| Option | Description |
112-
| ------------------------------- | ------------------------------------------ |
113-
| -p, --palette `(optional)` | Validate palette in your theme file |
114-
| -t, --typography `(optional)` | Validate typography in your theme file |
115-
| -s, --spacing `(optional)` | Validate spacing in your theme file |
116-
| -b, --breakpoints `(optional)` | Validate breakpoints in your theme file |
117-
| -tr, --transitions `(optional)` | Validate transitions in your theme file |
118-
| --path `(optional)` | Path to your theme file |
119-
| --ignore-warn `(optional)` | dont show warning |
110+
| Option | Description |
111+
| ------------------------------- | --------------------------------------- |
112+
| -p, --palette `(optional)` | Validate palette in your theme file |
113+
| -t, --typography `(optional)` | Validate typography in your theme file |
114+
| -s, --spacing `(optional)` | Validate spacing in your theme file |
115+
| -b, --breakpoints `(optional)` | Validate breakpoints in your theme file |
116+
| -tr, --transitions `(optional)` | Validate transitions in your theme file |
117+
| --path `(optional)` | Path to your theme file |
118+
| --ignore-warn `(optional)` | dont show warning |
120119

121120
If the `path` option is not provided, you will be prompted with a question to specify the path to your `theme file`.
122121

@@ -126,36 +125,50 @@ Upon inspecting your theme file, any potential errors will be displayed in your
126125

127126
> [!NOTE]<br>
128127
> The contents of the theme file should be a function that returns the theme object. If the theme file is not a function, an error will occur. This is one of the limitations we are working to resolve.
129-
>
128+
>
130129
> The theme file can have the following format:
130+
>
131131
> ```JavaScript
132132
> const themeConfig = () => ({
133133
> // Theme contents
134134
> });
135135
> ```
136136
137+
### 4. ✂️ Component Scaffolding
138+
139+
Simplify your development workflow with automated component creation. The MUI CLI allows you to quickly scaffold reusable components into your project, accelerating development and ensuring consistency throughout your application.
140+
141+
These components adhere to MUI guidelines and are highly customizable. Explore all supported components [here](https://github.com/amoskyalo/material-UI-CLI?tab=readme-ov-file#-popular-mui-components)
142+
143+
To scaffold a specific component into your project, execute the following command:
144+
145+
```sh
146+
material-cli install <componentName>
147+
```
148+
149+
Upon running this command, you'll be prompted to specify the path where you want your component to be scaffolded. The default path is `scr/components/<componentsName>`
150+
137151
### 🧩 Supported MUI components
138152

139153
Below is a list of supported components, categorized for ease of understanding and integration.
140154

141-
| Component | Description | Category |
142-
| ---------------------------------- | ------------------------------------------------------------------------ | -------------- |
143-
| [App Bar](https://mui.com) | Popular Material UI component for app bars. | Surfaces |
144-
| [AutoComplete](https://mui.com) | Material UI component providing autocomplete functionality. | Inputs |
145-
| [Data Grid](https://mui.com) | Material UI component for displaying data grids. | DataDisplay |
146-
| [Dates](https://mui.com) | Material UI component for selecting dates. | Inputs |
147-
| [Select](https://mui.com) | Material UI component for selecting options from a list. | Inputs |
148-
| [Tabs](https://mui.com) | Material UI component for organizing content into tabs. | Navigation |
149-
| [Text Field](https://mui.com) | Material UI component for text input fields. | Inputs |
150-
| [Alert](https://mui.com) | Material UI component for displaying alerts. | Feedback |
151-
| [Dialog](https://mui.com) | Material UI component for displaying dialog boxes. | Feedback |
152-
| [Linear Progress](https://mui.com) | Material UI component for indicating progress linearly. | Feedback |
153-
| [Snackbar](https://mui.com) | Material UI component for displaying snackbars. | Feedback |
154-
| [Accordion](https://mui.com) | Material UI component for creating accordion-style content. | Surfaces |
155-
| [Android Switch](https://mui.com) | Material UI component for switches styled like those on Android devices. | Switch |
156-
| [Ant Switch](https://mui.com) | Material UI component for switches styled like those in Ant Design. | Switch |
157-
| [iOS Switch](https://mui.com) | Material UI component for switches styled like those on iOS devices. | Switch |
158-
| [MUI Switch](https://mui.com) | Material UI default switch component. | Switch |
155+
| Component | Description | Category |
156+
| ---------------------------------- | ------------------------------------------------------------------------ | ----------- |
157+
| [App Bar](https://mui.com) | Popular Material UI component for app bars. | Surfaces |
158+
| [AutoComplete](https://mui.com) | Material UI component providing autocomplete functionality. | Inputs |
159+
| [Data Grid](https://mui.com) | Material UI component for displaying data grids. | DataDisplay |
160+
| [Dates](https://mui.com) | Material UI component for selecting dates. | Inputs |
161+
| [Select](https://mui.com) | Material UI component for selecting options from a list. | Inputs |
162+
| [Tabs](https://mui.com) | Material UI component for organizing content into tabs. | Navigation |
163+
| [Text Field](https://mui.com) | Material UI component for text input fields. | Inputs |
164+
| [Alert](https://mui.com) | Material UI component for displaying alerts. | Feedback |
165+
| [Dialog](https://mui.com) | Material UI component for displaying dialog boxes. | Feedback |
166+
| [Linear Progress](https://mui.com) | Material UI component for indicating progress linearly. | Feedback |
167+
| [Snackbar](https://mui.com) | Material UI component for displaying snackbars. | Feedback |
168+
| [Accordion](https://mui.com) | Material UI component for creating accordion-style content. | Surfaces |
169+
| [Android Switch](https://mui.com) | Material UI component for switches styled like those on Android devices. | Switch |
170+
| [Ant Switch](https://mui.com) | Material UI component for switches styled like those in Ant Design. | Switch |
171+
| [iOS Switch](https://mui.com) | Material UI component for switches styled like those on iOS devices. | Switch |
172+
| [MUI Switch](https://mui.com) | Material UI default switch component. | Switch |
159173

160174
Components are organized under the `src/Components` directory, with each having its designated folder for easy management and accessibility.
161-

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "material-cli",
3-
"version": "0.0.2",
3+
"version": "0.0.1",
44
"description": "Build Material UI apps 10x faster with material-ui-cli ⚡",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)