this.gui 1.0.1 → 1.0.11

package/README.md

@@ -1,28 +1,29 @@
 <img src="https://suign.github.io/assets/imgs/this_GUI.svg" alt="Cleaker Me" width="377" height="377">
 
 # THIS.GUI
+The goal is to automate the **GUI** generation process so users only pass data or configurations, and **this.GUI** handles the rest.
+The package exports:
+	•	Pre-defined components.
+	•	MDX and Theme Providers.
+	•	An MDX editor interface.
 
 Install `this.gui` via **npm**:
 ```shell
 npm install this.gui
 ```
-
 Then run command:
-
 ```bash
 npm start
-```
 
-The goal is to automate the **GUI** generation process so users only pass data or configurations, and **this.GUI** handles the rest.
+```
+a. Export Pre-built Components
+Components are categorized (Atoms, Molecules, etc.) and are exportable so users can easily import them into their MDX files or directly in their React components.
 
 ## **Explanation of Grouping:**
-
 ​	•	**Atomic**: Smallest components that are not broken down further.
-
 Alert, Audio, Badge, Button, Caption, Checkbox, Container, Divider, Heading, Icon,  Image, Label, Link , Loader, Paragraph, ProgressBar, RadioButton, RangeInput, Select, Slider, Snackbar, Spacer, Spinner, Tag, TextArea, TextInput, Toggle, Tooltip, Video.
 
 ​	•	**Molecules**: Simple combinations of atomic components that together form a small UI feature.
-
 Accordion, AudioPlayer, AvatarWithName, Breadcrumbs, ButtonGroup, Card, ComparisonTable, DataTable, FileUpload, FormField, Header, IconButton, ImageWithCaption, InputGroup, InputWithLabel, List, MediaCard, Modal, Navbar, Notification, PricingTable, SearchBar, Sidebar, VideoWithDescription.
 
 ​	•	**Organisms**: More complex, combining molecules and atomic components to create larger, more detailed features.
@@ -31,6 +32,44 @@ Accordion, AudioPlayer, AvatarWithName, Breadcrumbs, ButtonGroup, Card, Comparis
 ​	•	**Pages**: Complete and functional pages made up of templates and content.
 ​	•	**Miscellaneous**: Utility components that don’t fit into the above categories but provide important functions, such as popovers, overlays, and media controls.
 
+On installation this.GUI will be setup as:
+
+
+├── /GUI                # Dedicated directory for GUI components and MDX pages
+│   ├── /components     # Custom components created by the user
+│   ├── /mdx            # MDX files defining pages and content using components
+│   └── /styles         # Custom styles for components (optional)
+
+Breakdown of Each Subdirectory:
+/components:
+This is where users build their custom React components. They can create new components, extend existing ones from this.GUI, or modify them as needed. These components can then be used throughout the MDX files.
+
+/mdx:
+This folder is used to store MDX files that act as pages or sections of the application. Users can import and use components from the /components folder or from the generic set provided by this.GUI. This allows for a highly modular and customizable interface creation.
+
+/styles:
+This optional directory can be used for custom CSS or style files that modify the look and feel of the components and layouts. Users can define global styles, component-specific styles, or themes to match their brand.
+
+Workflow for Users:
+Install this.GUI:
+npm install this.GUI will automatically set up the /GUI directory with the necessary subdirectories.
+
+Create Components:
+Users can start creating their own components in /components, using the provided components as a base or inspiration.
+
+Build Pages with MDX:
+MDX files in the /mdx folder can be used to assemble pages, where users can directly import and use the components they've created.
+
+Style Customization:
+Any additional styling or theming can be managed in the /styles directory, keeping design consistent and organized.
+
+Run and Test:
+Users run their main app using their existing development setup, and the MDX files will render the React components, effectively creating the desired GUI.
+
+Build for Production:
+Once development is complete, the GUI directory can be built into a dist folder, packaging the components, pages, and styles for deployment or distribution.
+
+This approach keeps the GUI modular, maintainable, and focused on user experience design, while the backend and other logic remain separate and manageable.
 
 
 # About All.This

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.gui",
-  "version": "1.0.1",
+  "version": "1.0.11",
   "description": "This Graphic User Interface.",
   "main": "dist/this-gui.umd.js",
   "module": "dist/this-gui.es.js",
@@ -9,12 +9,13 @@
     "url": "git+https://github.com/neurons-me/GUI.git"
   },
   "scripts": {
-    "start": "node ./src/scripts/logASCIIArt.js && concurrently \"vite --open\" \"storybook dev -p ${STORYBOOK_PORT:-6006} --no-open\"",
+  "start": "node ./src/scripts/logASCIIArt.js && concurrently \"vite --open\" \"storybook dev -p 6006 --no-open\"",
     "dev": "vite",
     "build": "vite build",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p ${STORYBOOK_PORT:-6006}",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "postinstall": "node src/scripts/postinstall.js" 
   },
   "type": "module",
   "author": "suiGn",