this.gui 0.0.57 → 0.0.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -4
- package/dist/Styles.md +446 -0
- package/dist/context.md +942 -0
- package/dist/style.css +1 -0
- package/dist/this-gui.es.js +2453 -1
- package/dist/this-gui.umd.js +51 -1
- package/package.json +5 -3
package/dist/context.md
ADDED
|
@@ -0,0 +1,942 @@
|
|
|
1
|
+
<img src="https://suign.github.io/assets/imgs/this_GUI.svg" alt="Cleaker Me" width="377" height="377" align="right">
|
|
2
|
+
|
|
3
|
+
# THIS.GUI
|
|
4
|
+
|
|
5
|
+
Install `this.gui` via **npm**:
|
|
6
|
+
```shell
|
|
7
|
+
npm install this.gui
|
|
8
|
+
```
|
|
9
|
+
The goal is to automate the UI generation process so users only pass data or configurations, and **this.GUI** handles the rest.
|
|
10
|
+
|
|
11
|
+
1. React is still required in the user’s project because the UI components provided are React components that need to be rendered by React.
|
|
12
|
+
|
|
13
|
+
The Key Value of this.gui:
|
|
14
|
+
|
|
15
|
+
• **Simplifies UI creation:** Users only pass configurations or data; they don’t need to deal with the intricacies of React.
|
|
16
|
+
• **Dynamic generation:** The components adapt and render based on the input you give them.
|
|
17
|
+
**• Automation:** You handle all the complexity of component creation, leaving users with a simplified interface to generate UIs.
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
# About All.This
|
|
22
|
+
###### Modular Data Structures
|
|
23
|
+
**[this.me](https://suign.github.io/this.me) - [this.audio](https://suign.github.io/this.audio) - [this.text](https://suign.github.io/this.text) - [this.wallet](https://suign.github.io/this.wallet) - [this.img](https://suign.github.io/this.img) - [this.pixel](https://suign.github.io/Pixels) - [be.this](https://suign.github.io/be.this) - [this.DOM](https://suign.github.io/this.DOM) - [this.env](https://suign.github.io/this.env/) - [this.GUI](https://suign.github.io/this.GUI) - [this.be](https://suign.github.io/this.be) - [this.video](https://suign.github.io/this.video) - [this.atom](https://suign.github.io/this.atom) - [this.dictionaries](https://suign.github.io/this.dictionaries/)**
|
|
24
|
+
|
|
25
|
+
These classes encapsulate the functionalities to **domain-specific data.**
|
|
26
|
+
|
|
27
|
+
## Neurons.me
|
|
28
|
+
### License & Policies
|
|
29
|
+
- **License**: MIT License (see LICENSE for details).
|
|
30
|
+
|
|
31
|
+
- **Privacy Policy**: Respects user privacy; no collection/storage of personal data.
|
|
32
|
+
|
|
33
|
+
- **Terms of Usage**: Use responsibly. No guarantees/warranties provided.
|
|
34
|
+
[Terms](https://www.neurons.me/terms-of-use) | [Privacy](https://www.neurons.me/privacy-policy)
|
|
35
|
+
[neurons.me](https://neurons.me)
|
|
36
|
+
|
|
37
|
+
<img src="https://suign.github.io/assets/imgs/neurons_me_logo.png" alt="neurons.me logo" width="89">
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
/*this.GUI/index.js
|
|
41
|
+
ⓝⓔⓤⓡⓞⓝⓢ.ⓜⓔ
|
|
42
|
+
🆂🆄🅸🅶🅽 */
|
|
43
|
+
console.log("this.GUI loaded.");
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
<!DOCTYPE html>
|
|
48
|
+
<html lang="en">
|
|
49
|
+
<head>
|
|
50
|
+
<meta charset="UTF-8" />
|
|
51
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
52
|
+
<title>This.GUI</title>
|
|
53
|
+
</head>
|
|
54
|
+
<body>
|
|
55
|
+
<div id="root"></div>
|
|
56
|
+
<script type="module" src="/src/main.jsx"></script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
59
|
+
|
|
60
|
+
---
|
|
61
|
+
|
|
62
|
+
{
|
|
63
|
+
"name": "this.gui",
|
|
64
|
+
"version": "0.0.57",
|
|
65
|
+
"description": "This Graphic User Interface.",
|
|
66
|
+
"main": "dist/this-gui.umd.js",
|
|
67
|
+
"module": "dist/this-gui.es.js",
|
|
68
|
+
"repository": {
|
|
69
|
+
"type": "git",
|
|
70
|
+
"url": "git+https://github.com/neurons-me/GUI.git"
|
|
71
|
+
},
|
|
72
|
+
"scripts": {
|
|
73
|
+
"dev": "vite",
|
|
74
|
+
"build": "vite build",
|
|
75
|
+
"prepublishOnly": "npm run build",
|
|
76
|
+
"storybook": "storybook dev -p 6006",
|
|
77
|
+
"build-storybook": "storybook build"
|
|
78
|
+
},
|
|
79
|
+
"type": "module",
|
|
80
|
+
"author": "suiGn",
|
|
81
|
+
"license": "MIT",
|
|
82
|
+
"dependencies": {
|
|
83
|
+
"@storybook/addons": "^7.6.17",
|
|
84
|
+
"@storybook/builder-vite": "^8.2.9",
|
|
85
|
+
"@vitejs/plugin-react": "^4.3.1",
|
|
86
|
+
"autoprefixer": "^10.4.20",
|
|
87
|
+
"fs": "^0.0.1-security",
|
|
88
|
+
"postcss": "^8.4.45",
|
|
89
|
+
"tailwindcss": "^3.4.10"
|
|
90
|
+
},
|
|
91
|
+
"peerDependencies": {
|
|
92
|
+
"react": "^18.0.0",
|
|
93
|
+
"react-dom": "^18.0.0"
|
|
94
|
+
},
|
|
95
|
+
"devDependencies": {
|
|
96
|
+
"@chromatic-com/storybook": "^1.8.0",
|
|
97
|
+
"@storybook/addon-docs": "^8.3.0",
|
|
98
|
+
"@storybook/addon-essentials": "^8.2.9",
|
|
99
|
+
"@storybook/addon-interactions": "^8.2.9",
|
|
100
|
+
"@storybook/addon-links": "^8.2.9",
|
|
101
|
+
"@storybook/addon-onboarding": "^8.2.9",
|
|
102
|
+
"@storybook/blocks": "^8.2.9",
|
|
103
|
+
"@storybook/manager-api": "^8.2.9",
|
|
104
|
+
"@storybook/react": "^8.2.9",
|
|
105
|
+
"@storybook/react-vite": "^8.2.9",
|
|
106
|
+
"@storybook/test": "^8.2.9",
|
|
107
|
+
"@storybook/theming": "^8.2.9",
|
|
108
|
+
"prop-types": "^15.8.1",
|
|
109
|
+
"react": "^18.0.0",
|
|
110
|
+
"react-dom": "^18.0.0",
|
|
111
|
+
"storybook": "^8.2.9",
|
|
112
|
+
"vite": "^4.5.3"
|
|
113
|
+
},
|
|
114
|
+
"files": [
|
|
115
|
+
"dist"
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
/** @type {import('tailwindcss').Config} */
|
|
122
|
+
module.exports = {
|
|
123
|
+
darkMode: 'class', // Enable class-based dark mode
|
|
124
|
+
content: [
|
|
125
|
+
'./src/**/*.{js,jsx,ts,tsx}', // Scan your src files
|
|
126
|
+
'./.storybook/**/*.{js,jsx}', // Include Storybook stories
|
|
127
|
+
],
|
|
128
|
+
theme: {
|
|
129
|
+
extend: {
|
|
130
|
+
fontFamily: {
|
|
131
|
+
sans: ['Roboto', 'sans-serif'],
|
|
132
|
+
},
|
|
133
|
+
colors: {
|
|
134
|
+
primary: '#1E3A8A', // Primary color
|
|
135
|
+
secondary: '#FFDD67', // Secondary color
|
|
136
|
+
// Text colors for light and dark mode
|
|
137
|
+
text: {
|
|
138
|
+
light: '#333', // Light mode text
|
|
139
|
+
dark: '#fff', // Dark mode text
|
|
140
|
+
},
|
|
141
|
+
// Background colors for light and dark mode
|
|
142
|
+
background: {
|
|
143
|
+
light: '#f0f0f0', // Light mode background
|
|
144
|
+
dark: '#121212', // Dark mode background
|
|
145
|
+
},
|
|
146
|
+
},
|
|
147
|
+
fontSize: {
|
|
148
|
+
'xs': '.75rem',
|
|
149
|
+
'sm': '.875rem',
|
|
150
|
+
'base': '1rem',
|
|
151
|
+
'lg': '1.125rem',
|
|
152
|
+
'xl': '1.25rem',
|
|
153
|
+
'2xl': '1.5rem',
|
|
154
|
+
'3xl': '1.875rem',
|
|
155
|
+
'4xl': '2.25rem',
|
|
156
|
+
'5xl': '3rem',
|
|
157
|
+
},
|
|
158
|
+
spacing: {
|
|
159
|
+
'1': '4px',
|
|
160
|
+
'2': '8px',
|
|
161
|
+
'3': '12px',
|
|
162
|
+
'4': '16px',
|
|
163
|
+
'5': '20px',
|
|
164
|
+
'6': '24px',
|
|
165
|
+
'8': '32px',
|
|
166
|
+
},
|
|
167
|
+
borderRadius: {
|
|
168
|
+
'none': '0',
|
|
169
|
+
'sm': '0.125rem',
|
|
170
|
+
'md': '0.375rem',
|
|
171
|
+
'lg': '0.5rem',
|
|
172
|
+
'full': '9999px',
|
|
173
|
+
},
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
plugins: [],
|
|
177
|
+
};
|
|
178
|
+
---
|
|
179
|
+
|
|
180
|
+
import { defineConfig } from 'vite';
|
|
181
|
+
import react from '@vitejs/plugin-react';
|
|
182
|
+
|
|
183
|
+
// Ensure the defineConfig function is correctly used here
|
|
184
|
+
export default defineConfig({
|
|
185
|
+
plugins: [react()],
|
|
186
|
+
build: {
|
|
187
|
+
lib: {
|
|
188
|
+
entry: 'index.js', // Entry point now in the root directory
|
|
189
|
+
name: 'GUI', // Global variable name is now 'GUI'
|
|
190
|
+
sourcemap: false, // Disable sourcemaps
|
|
191
|
+
fileName: (format) => `this-gui.${format}.js`, // Output filenames
|
|
192
|
+
},
|
|
193
|
+
rollupOptions: {
|
|
194
|
+
external: ['react', 'react-dom'], // Externalize React and ReactDOM
|
|
195
|
+
output: {
|
|
196
|
+
globals: {
|
|
197
|
+
react: 'React',
|
|
198
|
+
'react-dom': 'ReactDOM',
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
Now I will share whats on src/
|
|
208
|
+
|
|
209
|
+
stories/
|
|
210
|
+
|
|
211
|
+
<img src="https://suign.github.io/assets/imgs/this_GUI.svg" alt="Cleaker Me" width="477" height="477" align="center" style={{marginBottom: '55px'}}/>
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
# Welcome to THIS.GUI
|
|
216
|
+
|
|
217
|
+
### **Explanation of Grouping:**
|
|
218
|
+
The **Atomic Design** methodology defines organisms as complex structures built from smaller components, but how we perceive complexity can vary based on context.
|
|
219
|
+
Let’s break it down to align with your insight:
|
|
220
|
+
|
|
221
|
+
• **Atomic**: Smallest components that are not broken down further.
|
|
222
|
+
|
|
223
|
+
• **Molecules**: Simple combinations of atomic components that together form a small UI feature.
|
|
224
|
+
|
|
225
|
+
• **Organisms**: More complex, combining molecules and atomic components to create larger, more detailed features.
|
|
226
|
+
|
|
227
|
+
• **Layout**: Components related to structuring and organizing content across the page.
|
|
228
|
+
|
|
229
|
+
• **Templates**: Layouts of full pages, combining organisms and layout components.
|
|
230
|
+
|
|
231
|
+
• **Pages**: Complete and functional pages made up of templates and content.
|
|
232
|
+
|
|
233
|
+
• **Miscellaneous**: Utility components that don’t fit into the above categories but provide important functions, such as popovers, overlays, and media controls.
|
|
234
|
+
|
|
235
|
+
### Here’s how it breaks down:
|
|
236
|
+
|
|
237
|
+
• Pages combine multiple Organisms (like forms, media collections, and navigation elements) to create a full layout.
|
|
238
|
+
• Organisms themselves are composed of Molecules (which could be form fields, buttons, etc.).
|
|
239
|
+
• Molecules are built from Atoms (the smallest UI components like text, buttons, inputs).
|
|
240
|
+
|
|
241
|
+
# Recap of Hierarchy
|
|
242
|
+
|
|
243
|
+
1. **Atoms:** Basic building blocks (buttons, inputs).
|
|
244
|
+
2. **Molecules:** Small functional units combining Atoms (input groups, button groups).
|
|
245
|
+
3. **Organisms:** Larger functional blocks combining Molecules (forms, media cards).
|
|
246
|
+
4. **Layouts:** Define structure and positioning (grids, sections, flexbox).
|
|
247
|
+
5. **Pages:** Use Layouts, Organisms, Molecules, and Atoms to create entire pages.
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
-------------------
|
|
251
|
+
# 1. Atomic Components (Basic/Building Blocks)
|
|
252
|
+
Atomic components are the smallest building blocks and cannot be broken down further.
|
|
253
|
+
|
|
254
|
+
**Text Components:**
|
|
255
|
+
|
|
256
|
+
• Heading (H1, H2, H3, etc.)
|
|
257
|
+
• Paragraph
|
|
258
|
+
• Label
|
|
259
|
+
• Caption
|
|
260
|
+
|
|
261
|
+
**Interactive Components:**
|
|
262
|
+
|
|
263
|
+
• Button
|
|
264
|
+
• Link (Anchor)
|
|
265
|
+
• Icon (Clickable)
|
|
266
|
+
• Checkbox
|
|
267
|
+
• Radio Button
|
|
268
|
+
• Toggle/Switch
|
|
269
|
+
• Text Input
|
|
270
|
+
• Text Area
|
|
271
|
+
• Select/Dropdown
|
|
272
|
+
• Slider
|
|
273
|
+
• Range Input
|
|
274
|
+
|
|
275
|
+
**Media Components:**
|
|
276
|
+
|
|
277
|
+
• Image
|
|
278
|
+
• Video
|
|
279
|
+
• Audio
|
|
280
|
+
• Icon
|
|
281
|
+
|
|
282
|
+
**Visual Components:**
|
|
283
|
+
|
|
284
|
+
• Divider
|
|
285
|
+
• Spacer (For layout spacing)
|
|
286
|
+
• Tooltip
|
|
287
|
+
• Badge
|
|
288
|
+
• Tag/Chip
|
|
289
|
+
|
|
290
|
+
**Feedback Components:**
|
|
291
|
+
|
|
292
|
+
• Loader/Spinner
|
|
293
|
+
• Progress Bar
|
|
294
|
+
• Alert
|
|
295
|
+
• Snackbar/Toast
|
|
296
|
+
• Tooltip
|
|
297
|
+
|
|
298
|
+
# 2. Molecules (Combining Atomic Components)
|
|
299
|
+
Molecules are combinations of atomic components that work together to form a functional unit.
|
|
300
|
+
|
|
301
|
+
**Form Elements:**
|
|
302
|
+
|
|
303
|
+
• Input Group (Input with Button)
|
|
304
|
+
• Input with Label
|
|
305
|
+
• Search Bar
|
|
306
|
+
• File Upload
|
|
307
|
+
• Form Field (Label + Input + Helper Text)
|
|
308
|
+
|
|
309
|
+
**Buttons with Icons or Text:**
|
|
310
|
+
|
|
311
|
+
• Icon Button (Button with Icon)
|
|
312
|
+
• Button Group (Multiple Buttons together)
|
|
313
|
+
|
|
314
|
+
**Media Molecules:**
|
|
315
|
+
|
|
316
|
+
• Image with Caption
|
|
317
|
+
• Video with Controls and Description
|
|
318
|
+
• Avatar + Name
|
|
319
|
+
• Audio Player
|
|
320
|
+
|
|
321
|
+
**Feedback Molecules:**
|
|
322
|
+
|
|
323
|
+
• Notification (with Alert, Title, and Action)
|
|
324
|
+
• Modal (Header, Body, Footer)
|
|
325
|
+
|
|
326
|
+
# 3. Organisms (Combining Molecules)
|
|
327
|
+
Organisms are larger and more complex UI components formed by grouping together multiple molecules or simple components.
|
|
328
|
+
|
|
329
|
+
**Forms and Form Layouts:**
|
|
330
|
+
|
|
331
|
+
• Sign-In Form (Form fields + Submit Button)
|
|
332
|
+
• Registration Form (Fields for name, email, password + Terms Checkbox + Submit)
|
|
333
|
+
• Contact Form (Input fields + Message TextArea + Send Button)
|
|
334
|
+
|
|
335
|
+
**Content Display:**
|
|
336
|
+
|
|
337
|
+
• Card (Image + Title + Description + Action Button)
|
|
338
|
+
• Media Card (Image/Video + Title + Text)
|
|
339
|
+
• List (Collection of items, e.g., a list of links or products)
|
|
340
|
+
• Accordion (Expandable sections with content inside)
|
|
341
|
+
|
|
342
|
+
**Navigation:**
|
|
343
|
+
|
|
344
|
+
• Navbar (Logo + Links + Search + Menu Toggle)
|
|
345
|
+
• Sidebar (List of links for navigation)
|
|
346
|
+
• Breadcrumbs (Links showing hierarchy)
|
|
347
|
+
|
|
348
|
+
**Media Collections:**
|
|
349
|
+
|
|
350
|
+
• Image Gallery (Grid of images with captions)
|
|
351
|
+
• Video Playlist (List of videos to watch)
|
|
352
|
+
• Carousel/Slider (Image or Media Slider)
|
|
353
|
+
|
|
354
|
+
**Tables:**
|
|
355
|
+
|
|
356
|
+
• Data Table (Rows and Columns for displaying structured data)
|
|
357
|
+
• Pricing Table (Different pricing options)
|
|
358
|
+
• Comparison Table (Compares features/products)
|
|
359
|
+
|
|
360
|
+
# 4. Layout Components (Page-Level Components)
|
|
361
|
+
Layout components are structural elements used to organize content on a page.
|
|
362
|
+
|
|
363
|
+
• **Grid/Section Layouts:**
|
|
364
|
+
|
|
365
|
+
• Grid (Arranges items in a structured layout with rows and columns)
|
|
366
|
+
• Section (A part of the page with a header, content, and actions)
|
|
367
|
+
• Flexbox Layout (Horizontally/Vertically aligned containers)
|
|
368
|
+
|
|
369
|
+
**Navigation & Menus:**
|
|
370
|
+
|
|
371
|
+
• Header (Navbar + Search + Links)
|
|
372
|
+
• Footer (Copyright + Links + Social Media Icons)
|
|
373
|
+
• Dropdown Menu (Toggleable menu of options)
|
|
374
|
+
• Pagination (Buttons for navigating multiple pages)
|
|
375
|
+
|
|
376
|
+
**Content Organization:**
|
|
377
|
+
|
|
378
|
+
• Sidebar (For navigation or additional info)
|
|
379
|
+
• Tabs (Switching between different content views)
|
|
380
|
+
• Accordion (Collapsible sections)
|
|
381
|
+
|
|
382
|
+
**Hero Sections:**
|
|
383
|
+
|
|
384
|
+
• Hero Banner (Large heading, subheading, image, and call to action)
|
|
385
|
+
• Hero Image/Video Section (Introductory section at the top of a page)
|
|
386
|
+
|
|
387
|
+
# 5. Templates (Combining Organisms and Layout Components)
|
|
388
|
+
Templates define the structure of entire pages by arranging multiple organisms and layout components.
|
|
389
|
+
|
|
390
|
+
**Landing Pages:**
|
|
391
|
+
|
|
392
|
+
• Hero Section + Features List + Call-to-Action Button + Testimonials
|
|
393
|
+
• Product Landing Page (Hero, Features, Pricing, CTA)
|
|
394
|
+
|
|
395
|
+
**Dashboard Layouts:**
|
|
396
|
+
|
|
397
|
+
• Sidebar + Top Navbar + Content Area
|
|
398
|
+
• Admin Dashboard (Graphs, Lists, Cards, Notifications)
|
|
399
|
+
|
|
400
|
+
**E-Commerce Pages:**
|
|
401
|
+
|
|
402
|
+
• Product Page (Product Image, Description, Price, Add to Cart Button)
|
|
403
|
+
• Shopping Cart (List of items, quantity, total, checkout button)
|
|
404
|
+
|
|
405
|
+
**Authentication Pages:**
|
|
406
|
+
|
|
407
|
+
• Sign-In Page (Form + Link to Register)
|
|
408
|
+
• Registration Page (Form + Link to Sign In)
|
|
409
|
+
|
|
410
|
+
**Contact Us Page:**
|
|
411
|
+
|
|
412
|
+
• Form Section + Location Info + Social Media Links
|
|
413
|
+
|
|
414
|
+
# 6. Pages (Final Composition of Templates)
|
|
415
|
+
Pages are final representations of the full UI, using templates to create entire sections with components.
|
|
416
|
+
|
|
417
|
+
• Home Page
|
|
418
|
+
• About Us Page
|
|
419
|
+
• Contact Us Page
|
|
420
|
+
• User Profile Page
|
|
421
|
+
• Product Detail Page
|
|
422
|
+
• Checkout Page
|
|
423
|
+
• Blog/Article Page
|
|
424
|
+
• Admin Dashboard
|
|
425
|
+
• Search Results Page
|
|
426
|
+
|
|
427
|
+
# 7. Miscellaneous / Utility Components
|
|
428
|
+
These components often serve specialized purposes and improve user interaction.
|
|
429
|
+
|
|
430
|
+
**Tooltips & Popovers:**
|
|
431
|
+
|
|
432
|
+
• Pop-up information when hovering over or clicking an element.
|
|
433
|
+
**Overlays:**
|
|
434
|
+
|
|
435
|
+
• Modal/Popup Window
|
|
436
|
+
• Drawer (Slide-in navigation or settings panel)
|
|
437
|
+
|
|
438
|
+
**Search Components:**
|
|
439
|
+
|
|
440
|
+
• Search Box (Input field with search button)
|
|
441
|
+
• Autocomplete/Typeahead
|
|
442
|
+
|
|
443
|
+
**Media and Content Controls:**
|
|
444
|
+
|
|
445
|
+
• Audio/Video Controls (Play, Pause, Mute)
|
|
446
|
+
• Filters (Search filters, Tag filters)
|
|
447
|
+
|
|
448
|
+
**Interactive Maps:**
|
|
449
|
+
|
|
450
|
+
• Map (With interactive markers, zoom, and pan)
|
|
451
|
+
|
|
452
|
+
---
|
|
453
|
+
|
|
454
|
+
# This.GUI
|
|
455
|
+
**MDX** is a powerful format because it allows you to combine the simplicity of **Markdown** with the flexibility of **React components**. This means you can write documentation, content, or pages using normal Markdown syntax and sprinkle in **React components** wherever needed.
|
|
456
|
+
|
|
457
|
+
Here’s a breakdown of how it works:
|
|
458
|
+
|
|
459
|
+
### 1. **Markdown + JSX**
|
|
460
|
+
MDX lets you write Markdown like usual, but when you need interactive or dynamic content, you can directly insert React components. It merges **Markdown** and **JSX** seamlessly in the same file.
|
|
461
|
+
|
|
462
|
+
Example:
|
|
463
|
+
|
|
464
|
+
```mdx
|
|
465
|
+
# Welcome to My Site
|
|
466
|
+
|
|
467
|
+
This is a simple introduction written in Markdown.
|
|
468
|
+
|
|
469
|
+
## Here’s a custom button:
|
|
470
|
+
|
|
471
|
+
<Button label="Click Me" />
|
|
472
|
+
|
|
473
|
+
Here is more markdown text below the button!
|
|
474
|
+
```
|
|
475
|
+
|
|
476
|
+
In this example:
|
|
477
|
+
- The heading `# Welcome to My Site` and the paragraph are standard **Markdown**.
|
|
478
|
+
- The `<Button />` component is a **React component** that you import and use directly in the MDX file.
|
|
479
|
+
|
|
480
|
+
### 2. **Passing Props to Components**
|
|
481
|
+
You can pass props to React components just like you would in a React project. This allows you to create dynamic, reusable content.
|
|
482
|
+
|
|
483
|
+
```mdx
|
|
484
|
+
## Example with Props
|
|
485
|
+
|
|
486
|
+
Here’s a button with dynamic props:
|
|
487
|
+
|
|
488
|
+
<Button label="Submit" color="primary" />
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
### 3. **Reusability with Components**
|
|
492
|
+
Since you can use any React component, you can integrate complex UI elements, such as forms, charts, or interactive widgets, into your content.
|
|
493
|
+
|
|
494
|
+
For example:
|
|
495
|
+
|
|
496
|
+
```mdx
|
|
497
|
+
# User Statistics
|
|
498
|
+
|
|
499
|
+
<Chart data={userData} />
|
|
500
|
+
|
|
501
|
+
This chart is embedded directly into the documentation!
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
### 4. **How to Set It Up**
|
|
505
|
+
To use **MDX** in your project, you’ll typically configure a tool like **Storybook**, **Next.js**, or a custom React setup.
|
|
506
|
+
|
|
507
|
+
#### With **Storybook**:
|
|
508
|
+
MDX is perfect for writing component documentation in **Storybook**. You can write documentation for your components and render the components directly in the docs.
|
|
509
|
+
|
|
510
|
+
```mdx
|
|
511
|
+
import { Button } from './Button';
|
|
512
|
+
|
|
513
|
+
<Meta title="Button" component={Button} />
|
|
514
|
+
|
|
515
|
+
# Button Component
|
|
516
|
+
|
|
517
|
+
This is the `Button` component with different styles.
|
|
518
|
+
|
|
519
|
+
<Canvas>
|
|
520
|
+
<Story name="Primary Button">
|
|
521
|
+
<Button label="Primary" color="primary" />
|
|
522
|
+
</Story>
|
|
523
|
+
</Canvas>
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
#### With **Next.js**:
|
|
527
|
+
Next.js makes it easy to integrate MDX for static pages or blogs.
|
|
528
|
+
|
|
529
|
+
1. Install MDX support for Next.js:
|
|
530
|
+
```bash
|
|
531
|
+
npm install @next/mdx @mdx-js/loader
|
|
532
|
+
```
|
|
533
|
+
|
|
534
|
+
2. Configure Next.js in `next.config.js`:
|
|
535
|
+
```js
|
|
536
|
+
const withMDX = require('@next/mdx')({
|
|
537
|
+
extension: /\.mdx?$/
|
|
538
|
+
});
|
|
539
|
+
|
|
540
|
+
module.exports = withMDX({
|
|
541
|
+
pageExtensions: ['js', 'jsx', 'md', 'mdx'],
|
|
542
|
+
});
|
|
543
|
+
```
|
|
544
|
+
|
|
545
|
+
3. Create an `.mdx` file and use React components inside:
|
|
546
|
+
```mdx
|
|
547
|
+
# Hello World
|
|
548
|
+
|
|
549
|
+
<Button label="Click Me" />
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
#### With **Gatsby**:
|
|
553
|
+
MDX can also be used in **Gatsby** to create rich blog posts or pages by embedding React components within Markdown.
|
|
554
|
+
|
|
555
|
+
### 5. **Where to Use MDX**
|
|
556
|
+
MDX is often used for:
|
|
557
|
+
- **Technical documentation** (with live component previews).
|
|
558
|
+
- **Component libraries** (Storybook).
|
|
559
|
+
- **Blogs or content management systems** (Next.js/Gatsby).
|
|
560
|
+
- **Interactive tutorials**.
|
|
561
|
+
|
|
562
|
+
### Key Advantages of MDX:
|
|
563
|
+
- **Markdown simplicity**: Use the same syntax you’re used to for writing docs or blog posts.
|
|
564
|
+
- **React components**: Dynamically enhance content with interactivity, custom UI, or reusable components.
|
|
565
|
+
- **Reusable content**: Leverage the power of React to make your content dynamic and interactive.
|
|
566
|
+
|
|
567
|
+
---
|
|
568
|
+
|
|
569
|
+
MDX gives you the **best of both worlds**: you can write content in **Markdown**, and whenever you need dynamic or interactive elements, you simply drop in a React component. It’s ideal for use cases where you want content and code to live together seamlessly.
|
|
570
|
+
|
|
571
|
+
Let me know if you'd like help with setting up or using MDX further!
|
|
572
|
+
|
|
573
|
+
---
|
|
574
|
+
|
|
575
|
+
const components = {
|
|
576
|
+
"Atomic": {
|
|
577
|
+
"Text": [
|
|
578
|
+
{ name: "Heading", paths: { css: "styles/Atomic/Heading/Heading.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Heading/Heading.jsx", stories: "src/stories/Atomic/Heading/Heading.stories.jsx" }},
|
|
579
|
+
{ name: "Paragraph", paths: { css: "styles/Atomic/Paragraph/Paragraph.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Paragraph/Paragraph.jsx", stories: "src/stories/Atomic/Paragraph/Paragraph.stories.jsx" }},
|
|
580
|
+
{ name: "Label", paths: { css: "styles/Atomic/Label/Label.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Label/Label.jsx", stories: "src/stories/Atomic/Label/Label.stories.jsx" }},
|
|
581
|
+
{ name: "Caption", paths: { css: "styles/Atomic/Caption/Caption.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Caption/Caption.jsx", stories: "src/stories/Atomic/Caption/Caption.stories.jsx" }},
|
|
582
|
+
],
|
|
583
|
+
"Interactive": [
|
|
584
|
+
{ name: "Button", paths: { css: "styles/Atomic/Button/Button.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Button/Button.jsx", stories: "src/stories/Atomic/Button/Button.stories.jsx" }},
|
|
585
|
+
{ name: "Link", paths: { css: "styles/Atomic/Link/Link.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Link/Link.jsx", stories: "src/stories/Atomic/Link/Link.stories.jsx" }},
|
|
586
|
+
{ name: "Icon", paths: { css: "styles/Atomic/Icon/Icon.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Icon/Icon.jsx", stories: "src/stories/Atomic/Icon/Icon.stories.jsx" }},
|
|
587
|
+
{ name: "Checkbox", paths: { css: "styles/Atomic/Checkbox/Checkbox.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Checkbox/Checkbox.jsx", stories: "src/stories/Atomic/Checkbox/Checkbox.stories.jsx" }},
|
|
588
|
+
{ name: "RadioButton", paths: { css: "styles/Atomic/RadioButton/RadioButton.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/RadioButton/RadioButton.jsx", stories: "src/stories/Atomic/RadioButton/RadioButton.stories.jsx" }},
|
|
589
|
+
{ name: "Toggle", paths: { css: "styles/Atomic/Toggle/Toggle.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Toggle/Toggle.jsx", stories: "src/stories/Atomic/Toggle/Toggle.stories.jsx" }},
|
|
590
|
+
{ name: "TextInput", paths: { css: "styles/Atomic/TextInput/TextInput.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/TextInput/TextInput.jsx", stories: "src/stories/Atomic/TextInput/TextInput.stories.jsx" }},
|
|
591
|
+
{ name: "TextArea", paths: { css: "styles/Atomic/TextArea/TextArea.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/TextArea/TextArea.jsx", stories: "src/stories/Atomic/TextArea/TextArea.stories.jsx" }},
|
|
592
|
+
{ name: "Select", paths: { css: "styles/Atomic/Select/Select.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Select/Select.jsx", stories: "src/stories/Atomic/Select/Select.stories.jsx" }},
|
|
593
|
+
{ name: "Slider", paths: { css: "styles/Atomic/Slider/Slider.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Slider/Slider.jsx", stories: "src/stories/Atomic/Slider/Slider.stories.jsx" }},
|
|
594
|
+
{ name: "RangeInput", paths: { css: "styles/Atomic/RangeInput/RangeInput.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/RangeInput/RangeInput.jsx", stories: "src/stories/Atomic/RangeInput/RangeInput.stories.jsx" }},
|
|
595
|
+
],
|
|
596
|
+
"Media": [
|
|
597
|
+
{ name: "Image", paths: { css: "styles/Atomic/Image/Image.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Image/Image.jsx", stories: "src/stories/Atomic/Image/Image.stories.jsx" }},
|
|
598
|
+
{ name: "Video", paths: { css: "styles/Atomic/Video/Video.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Video/Video.jsx", stories: "src/stories/Atomic/Video/Video.stories.jsx" }},
|
|
599
|
+
{ name: "Audio", paths: { css: "styles/Atomic/Audio/Audio.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Audio/Audio.jsx", stories: "src/stories/Atomic/Audio/Audio.stories.jsx" }},
|
|
600
|
+
{ name: "Icon", paths: { css: "styles/Atomic/Icon/Icon.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Icon/Icon.jsx", stories: "src/stories/Atomic/Icon/Icon.stories.jsx" }},
|
|
601
|
+
],
|
|
602
|
+
"Visual": [
|
|
603
|
+
{ name: "Divider", paths: { css: "styles/Atomic/Divider/Divider.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Divider/Divider.jsx", stories: "src/stories/Atomic/Divider/Divider.stories.jsx" }},
|
|
604
|
+
{ name: "Spacer", paths: { css: "styles/Atomic/Spacer/Spacer.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Spacer/Spacer.jsx", stories: "src/stories/Atomic/Spacer/Spacer.stories.jsx" }},
|
|
605
|
+
{ name: "Tooltip", paths: { css: "styles/Atomic/Tooltip/Tooltip.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Tooltip/Tooltip.jsx", stories: "src/stories/Atomic/Tooltip/Tooltip.stories.jsx" }},
|
|
606
|
+
{ name: "Badge", paths: { css: "styles/Atomic/Badge/Badge.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Badge/Badge.jsx", stories: "src/stories/Atomic/Badge/Badge.stories.jsx" }},
|
|
607
|
+
{ name: "Tag", paths: { css: "styles/Atomic/Tag/Tag.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Tag/Tag.jsx", stories: "src/stories/Atomic/Tag/Tag.stories.jsx" }},
|
|
608
|
+
],
|
|
609
|
+
"Feedback": [
|
|
610
|
+
{ name: "Loader", paths: { css: "styles/Atomic/Loader/Loader.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Loader/Loader.jsx", stories: "src/stories/Atomic/Loader/Loader.stories.jsx" }},
|
|
611
|
+
{ name: "Spinner", paths: { css: "styles/Atomic/Spinner/Spinner.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Spinner/Spinner.jsx", stories: "src/stories/Atomic/Spinner/Spinner.stories.jsx" }},
|
|
612
|
+
{ name: "ProgressBar", paths: { css: "styles/Atomic/ProgressBar/ProgressBar.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/ProgressBar/ProgressBar.jsx", stories: "src/stories/Atomic/ProgressBar/ProgressBar.stories.jsx" }},
|
|
613
|
+
{ name: "Alert", paths: { css: "styles/Atomic/Alert/Alert.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Alert/Alert.jsx", stories: "src/stories/Atomic/Alert/Alert.stories.jsx" }},
|
|
614
|
+
{ name: "Snackbar", paths: { css: "styles/Atomic/Snackbar/Snackbar.css", globalCss: "styles/global.css", jsx: "src/components/Atomic/Snackbar/Snackbar.jsx", stories: "src/stories/Atomic/Snackbar/Snackbar.stories.jsx" }},
|
|
615
|
+
]
|
|
616
|
+
},
|
|
617
|
+
"Molecules": {
|
|
618
|
+
"FormElements": [
|
|
619
|
+
{ name: "InputGroup", paths: { css: "styles/Molecules/InputGroup/InputGroup.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/InputGroup/InputGroup.jsx", stories: "src/stories/Molecules/InputGroup/InputGroup.stories.jsx" }},
|
|
620
|
+
{ name: "InputWithLabel", paths: { css: "styles/Molecules/InputWithLabel/InputWithLabel.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/InputWithLabel/InputWithLabel.jsx", stories: "src/stories/Molecules/InputWithLabel/InputWithLabel.stories.jsx" }},
|
|
621
|
+
{ name: "SearchBar", paths: { css: "styles/Molecules/SearchBar/SearchBar.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/SearchBar/SearchBar.jsx", stories: "src/stories/Molecules/SearchBar/SearchBar.stories.jsx" }},
|
|
622
|
+
{ name: "FileUpload", paths: { css: "styles/Molecules/FileUpload/FileUpload.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/FileUpload/FileUpload.jsx", stories: "src/stories/Molecules/FileUpload/FileUpload.stories.jsx" }},
|
|
623
|
+
{ name: "FormField", paths: { css: "styles/Molecules/FormField/FormField.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/FormField/FormField.jsx", stories: "src/stories/Molecules/FormField/FormField.stories.jsx" }},
|
|
624
|
+
],
|
|
625
|
+
"ButtonsWithIcons": [
|
|
626
|
+
{ name: "IconButton", paths: { css: "styles/Molecules/IconButton/IconButton.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/IconButton/IconButton.jsx", stories: "src/stories/Molecules/IconButton/IconButton.stories.jsx" }},
|
|
627
|
+
{ name: "ButtonGroup", paths: { css: "styles/Molecules/ButtonGroup/ButtonGroup.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/ButtonGroup/ButtonGroup.jsx", stories: "src/stories/Molecules/ButtonGroup/ButtonGroup.stories.jsx" }},
|
|
628
|
+
],
|
|
629
|
+
"MediaMolecules": [
|
|
630
|
+
{ name: "ImageWithCaption", paths: { css: "styles/Molecules/ImageWithCaption/ImageWithCaption.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/ImageWithCaption/ImageWithCaption.jsx", stories: "src/stories/Molecules/ImageWithCaption/ImageWithCaption.stories.jsx" }},
|
|
631
|
+
{ name: "VideoWithDescription", paths: { css: "styles/Molecules/VideoWithDescription/VideoWithDescription.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/VideoWithDescription/VideoWithDescription.jsx", stories: "src/stories/Molecules/VideoWithDescription/VideoWithDescription.stories.jsx" }},
|
|
632
|
+
{ name: "AvatarWithName", paths: { css: "styles/Molecules/AvatarWithName/AvatarWithName.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/AvatarWithName/AvatarWithName.jsx", stories: "src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx" }},
|
|
633
|
+
{ name: "AudioPlayer", paths: { css: "styles/Molecules/AudioPlayer/AudioPlayer.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/AudioPlayer/AudioPlayer.jsx", stories: "src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx" }},
|
|
634
|
+
],
|
|
635
|
+
"FeedbackMolecules": [
|
|
636
|
+
{ name: "Notification", paths: { css: "styles/Molecules/Notification/Notification.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/Notification/Notification.jsx", stories: "src/stories/Molecules/Notification/Notification.stories.jsx" }},
|
|
637
|
+
{ name: "Modal", paths: { css: "styles/Molecules/Modal/Modal.css", globalCss: "styles/global.css", jsx: "src/components/Molecules/Modal/Modal.jsx", stories: "src/stories/Molecules/Modal/Modal.stories.jsx" }},
|
|
638
|
+
]
|
|
639
|
+
},
|
|
640
|
+
"Organisms": {
|
|
641
|
+
"Forms": [
|
|
642
|
+
{ name: "SignInForm", paths: { css: "styles/Organisms/SignInForm/SignInForm.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/SignInForm/SignInForm.jsx", stories: "src/stories/Organisms/SignInForm/SignInForm.stories.jsx" }},
|
|
643
|
+
{ name: "RegistrationForm", paths: { css: "styles/Organisms/RegistrationForm/RegistrationForm.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/RegistrationForm/RegistrationForm.jsx", stories: "src/stories/Organisms/RegistrationForm/RegistrationForm.stories.jsx" }},
|
|
644
|
+
{ name: "ContactForm", paths: { css: "styles/Organisms/ContactForm/ContactForm.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/ContactForm/ContactForm.jsx", stories: "src/stories/Organisms/ContactForm/ContactForm.stories.jsx" }},
|
|
645
|
+
],
|
|
646
|
+
"ContentDisplay": [
|
|
647
|
+
{ name: "Card", paths: { css: "styles/Organisms/Card/Card.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Card/Card.jsx", stories: "src/stories/Organisms/Card/Card.stories.jsx" }},
|
|
648
|
+
{ name: "MediaCard", paths: { css: "styles/Organisms/MediaCard/MediaCard.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/MediaCard/MediaCard.jsx", stories: "src/stories/Organisms/MediaCard/MediaCard.stories.jsx" }},
|
|
649
|
+
{ name: "List", paths: { css: "styles/Organisms/List/List.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/List/List.jsx", stories: "src/stories/Organisms/List/List.stories.jsx" }},
|
|
650
|
+
{ name: "Accordion", paths: { css: "styles/Organisms/Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Accordion/Accordion.jsx", stories: "src/stories/Organisms/Accordion/Accordion.stories.jsx" }},
|
|
651
|
+
],
|
|
652
|
+
"Navigation": [
|
|
653
|
+
{ name: "Navbar", paths: { css: "styles/Organisms/Navbar/Navbar.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Navbar/Navbar.jsx", stories: "src/stories/Organisms/Navbar/Navbar.stories.jsx" }},
|
|
654
|
+
{ name: "Sidebar", paths: { css: "styles/Organisms/Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Sidebar/Sidebar.jsx", stories: "src/stories/Organisms/Sidebar/Sidebar.stories.jsx" }},
|
|
655
|
+
{ name: "Breadcrumbs", paths: { css: "styles/Organisms/Breadcrumbs/Breadcrumbs.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Breadcrumbs/Breadcrumbs.jsx", stories: "src/stories/Organisms/Breadcrumbs/Breadcrumbs.stories.jsx" }},
|
|
656
|
+
],
|
|
657
|
+
"MediaCollections": [
|
|
658
|
+
{ name: "ImageGallery", paths: { css: "styles/Organisms/ImageGallery/ImageGallery.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/ImageGallery/ImageGallery.jsx", stories: "src/stories/Organisms/ImageGallery/ImageGallery.stories.jsx" }},
|
|
659
|
+
{ name: "VideoPlaylist", paths: { css: "styles/Organisms/VideoPlaylist/VideoPlaylist.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/VideoPlaylist/VideoPlaylist.jsx", stories: "src/stories/Organisms/VideoPlaylist/VideoPlaylist.stories.jsx" }},
|
|
660
|
+
{ name: "Carousel", paths: { css: "styles/Organisms/Carousel/Carousel.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/Carousel/Carousel.jsx", stories: "src/stories/Organisms/Carousel/Carousel.stories.jsx" }},
|
|
661
|
+
],
|
|
662
|
+
"Tables": [
|
|
663
|
+
{ name: "DataTable", paths: { css: "styles/Organisms/DataTable/DataTable.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/DataTable/DataTable.jsx", stories: "src/stories/Organisms/DataTable/DataTable.stories.jsx" }},
|
|
664
|
+
{ name: "PricingTable", paths: { css: "styles/Organisms/PricingTable/PricingTable.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/PricingTable/PricingTable.jsx", stories: "src/stories/Organisms/PricingTable/PricingTable.stories.jsx" }},
|
|
665
|
+
{ name: "ComparisonTable", paths: { css: "styles/Organisms/ComparisonTable/ComparisonTable.css", globalCss: "styles/global.css", jsx: "src/components/Organisms/ComparisonTable/ComparisonTable.jsx", stories: "src/stories/Organisms/ComparisonTable/ComparisonTable.stories.jsx" }},
|
|
666
|
+
]
|
|
667
|
+
},
|
|
668
|
+
"Layout": {
|
|
669
|
+
"Grid": [
|
|
670
|
+
{ name: "Grid", paths: { css: "styles/Layout/Grid/Grid.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Grid/Grid.jsx", stories: "src/stories/Layout/Grid/Grid.stories.jsx" }},
|
|
671
|
+
],
|
|
672
|
+
"Section": [
|
|
673
|
+
{ name: "Section", paths: { css: "styles/Layout/Section/Section.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Section/Section.jsx", stories: "src/stories/Layout/Section/Section.stories.jsx" }},
|
|
674
|
+
],
|
|
675
|
+
"FlexboxLayout": [
|
|
676
|
+
{ name: "Flexbox", paths: { css: "styles/Layout/Flexbox/Flexbox.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Flexbox/Flexbox.jsx", stories: "src/stories/Layout/Flexbox/Flexbox.stories.jsx" }},
|
|
677
|
+
],
|
|
678
|
+
"NavigationAndMenus": [
|
|
679
|
+
{ name: "Header", paths: { css: "styles/Layout/Header/Header.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Header/Header.jsx", stories: "src/stories/Layout/Header/Header.stories.jsx" }},
|
|
680
|
+
{ name: "Footer", paths: { css: "styles/Layout/Footer/Footer.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Footer/Footer.jsx", stories: "src/stories/Layout/Footer/Footer.stories.jsx" }},
|
|
681
|
+
{ name: "DropdownMenu", paths: { css: "styles/Layout/DropdownMenu/DropdownMenu.css", globalCss: "styles/global.css", jsx: "src/components/Layout/DropdownMenu/DropdownMenu.jsx", stories: "src/stories/Layout/DropdownMenu/DropdownMenu.stories.jsx" }},
|
|
682
|
+
{ name: "Pagination", paths: { css: "styles/Layout/Pagination/Pagination.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Pagination/Pagination.jsx", stories: "src/stories/Layout/Pagination/Pagination.stories.jsx" }},
|
|
683
|
+
],
|
|
684
|
+
"ContentOrganization": [
|
|
685
|
+
{ name: "Sidebar", paths: { css: "styles/Layout/Sidebar/Sidebar.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Sidebar/Sidebar.jsx", stories: "src/stories/Layout/Sidebar/Sidebar.stories.jsx" }},
|
|
686
|
+
{ name: "Tabs", paths: { css: "styles/Layout/Tabs/Tabs.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Tabs/Tabs.jsx", stories: "src/stories/Layout/Tabs/Tabs.stories.jsx" }},
|
|
687
|
+
{ name: "Accordion", paths: { css: "styles/Layout/Accordion/Accordion.css", globalCss: "styles/global.css", jsx: "src/components/Layout/Accordion/Accordion.jsx", stories: "src/stories/Layout/Accordion/Accordion.stories.jsx" }},
|
|
688
|
+
],
|
|
689
|
+
"HeroSections": [
|
|
690
|
+
{ name: "HeroBanner", paths: { css: "styles/Layout/HeroBanner/HeroBanner.css", globalCss: "styles/global.css", jsx: "src/components/Layout/HeroBanner/HeroBanner.jsx", stories: "src/stories/Layout/HeroBanner/HeroBanner.stories.jsx" }},
|
|
691
|
+
{ name: "HeroImageVideo", paths: { css: "styles/Layout/HeroImageVideo/HeroImageVideo.css", globalCss: "styles/global.css", jsx: "src/components/Layout/HeroImageVideo/HeroImageVideo.jsx", stories: "src/stories/Layout/HeroImageVideo/HeroImageVideo.stories.jsx" }},
|
|
692
|
+
]
|
|
693
|
+
},
|
|
694
|
+
"Templates": {
|
|
695
|
+
"LandingPages": [
|
|
696
|
+
{ name: "HeroSection", paths: { css: "styles/Templates/LandingPages/HeroSection.css", globalCss: "styles/global.css", jsx: "src/components/Templates/LandingPages/HeroSection.jsx", stories: "src/stories/Templates/LandingPages/HeroSection.stories.jsx" }},
|
|
697
|
+
{ name: "FeaturesList", paths: { css: "styles/Templates/LandingPages/FeaturesList.css", globalCss: "styles/global.css", jsx: "src/components/Templates/LandingPages/FeaturesList.jsx", stories: "src/stories/Templates/LandingPages/FeaturesList.stories.jsx" }},
|
|
698
|
+
{ name: "CallToAction", paths: { css: "styles/Templates/LandingPages/CallToAction.css", globalCss: "styles/global.css", jsx: "src/components/Templates/LandingPages/CallToAction.jsx", stories: "src/stories/Templates/LandingPages/CallToAction.stories.jsx" }},
|
|
699
|
+
{ name: "Testimonials", paths: { css: "styles/Templates/LandingPages/Testimonials.css", globalCss: "styles/global.css", jsx: "src/components/Templates/LandingPages/Testimonials.jsx", stories: "src/stories/Templates/LandingPages/Testimonials.stories.jsx" }},
|
|
700
|
+
],
|
|
701
|
+
"DashboardLayouts": [
|
|
702
|
+
{ name: "AdminDashboard", paths: { css: "styles/Templates/DashboardLayouts/AdminDashboard.css", globalCss: "styles/global.css", jsx: "src/components/Templates/DashboardLayouts/AdminDashboard.jsx", stories: "src/stories/Templates/DashboardLayouts/AdminDashboard.stories.jsx" }},
|
|
703
|
+
{ name: "SidebarTopNav", paths: { css: "styles/Templates/DashboardLayouts/SidebarTopNav.css", globalCss: "styles/global.css", jsx: "src/components/Templates/DashboardLayouts/SidebarTopNav.jsx", stories: "src/stories/Templates/DashboardLayouts/SidebarTopNav.stories.jsx" }},
|
|
704
|
+
],
|
|
705
|
+
"ECommercePages": [
|
|
706
|
+
{ name: "ProductPage", paths: { css: "styles/Templates/ECommercePages/ProductPage.css", globalCss: "styles/global.css", jsx: "src/components/Templates/ECommercePages/ProductPage.jsx", stories: "src/stories/Templates/ECommercePages/ProductPage.stories.jsx" }},
|
|
707
|
+
{ name: "ShoppingCart", paths: { css: "styles/Templates/ECommercePages/ShoppingCart.css", globalCss: "styles/global.css", jsx: "src/components/Templates/ECommercePages/ShoppingCart.jsx", stories: "src/stories/Templates/ECommercePages/ShoppingCart.stories.jsx" }},
|
|
708
|
+
],
|
|
709
|
+
"AuthenticationPages": [
|
|
710
|
+
{ name: "SignInPage", paths: { css: "styles/Templates/AuthenticationPages/SignInPage.css", globalCss: "styles/global.css", jsx: "src/components/Templates/AuthenticationPages/SignInPage.jsx", stories: "src/stories/Templates/AuthenticationPages/SignInPage.stories.jsx" }},
|
|
711
|
+
{ name: "RegistrationPage", paths: { css: "styles/Templates/AuthenticationPages/RegistrationPage.css", globalCss: "styles/global.css", jsx: "src/components/Templates/AuthenticationPages/RegistrationPage.jsx", stories: "src/stories/Templates/AuthenticationPages/RegistrationPage.stories.jsx" }},
|
|
712
|
+
],
|
|
713
|
+
"ContactUsPages": [
|
|
714
|
+
{ name: "FormSection", paths: { css: "styles/Templates/ContactUsPages/FormSection.css", globalCss: "styles/global.css", jsx: "src/components/Templates/ContactUsPages/FormSection.jsx", stories: "src/stories/Templates/ContactUsPages/FormSection.stories.jsx" }},
|
|
715
|
+
{ name: "LocationInfo", paths: { css: "styles/Templates/ContactUsPages/LocationInfo.css", globalCss: "styles/global.css", jsx: "src/components/Templates/ContactUsPages/LocationInfo.jsx", stories: "src/stories/Templates/ContactUsPages/LocationInfo.stories.jsx" }},
|
|
716
|
+
{ name: "SocialMediaLinks", paths: { css: "styles/Templates/ContactUsPages/SocialMediaLinks.css", globalCss: "styles/global.css", jsx: "src/components/Templates/ContactUsPages/SocialMediaLinks.jsx", stories: "src/stories/Templates/ContactUsPages/SocialMediaLinks.stories.jsx" }},
|
|
717
|
+
]
|
|
718
|
+
},
|
|
719
|
+
"Pages": {
|
|
720
|
+
"HomePage": [
|
|
721
|
+
{ name: "HomePage", paths: { css: "styles/Pages/HomePage/HomePage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/HomePage/HomePage.jsx", stories: "src/stories/Pages/HomePage/HomePage.stories.jsx" }},
|
|
722
|
+
],
|
|
723
|
+
"AboutUsPage": [
|
|
724
|
+
{ name: "AboutUsPage", paths: { css: "styles/Pages/AboutUsPage/AboutUsPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/AboutUsPage/AboutUsPage.jsx", stories: "src/stories/Pages/AboutUsPage/AboutUsPage.stories.jsx" }},
|
|
725
|
+
],
|
|
726
|
+
"ContactUsPage": [
|
|
727
|
+
{ name: "ContactUsPage", paths: { css: "styles/Pages/ContactUsPage/ContactUsPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/ContactUsPage/ContactUsPage.jsx", stories: "src/stories/Pages/ContactUsPage/ContactUsPage.stories.jsx" }},
|
|
728
|
+
],
|
|
729
|
+
"UserProfilePage": [
|
|
730
|
+
{ name: "UserProfilePage", paths: { css: "styles/Pages/UserProfilePage/UserProfilePage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/UserProfilePage/UserProfilePage.jsx", stories: "src/stories/Pages/UserProfilePage/UserProfilePage.stories.jsx" }},
|
|
731
|
+
],
|
|
732
|
+
"ProductDetailPage": [
|
|
733
|
+
{ name: "ProductDetailPage", paths: { css: "styles/Pages/ProductDetailPage/ProductDetailPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/ProductDetailPage/ProductDetailPage.jsx", stories: "src/stories/Pages/ProductDetailPage/ProductDetailPage.stories.jsx" }},
|
|
734
|
+
],
|
|
735
|
+
"CheckoutPage": [
|
|
736
|
+
{ name: "CheckoutPage", paths: { css: "styles/Pages/CheckoutPage/CheckoutPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/CheckoutPage/CheckoutPage.jsx", stories: "src/stories/Pages/CheckoutPage/CheckoutPage.stories.jsx" }},
|
|
737
|
+
],
|
|
738
|
+
"BlogPage": [
|
|
739
|
+
{ name: "BlogPage", paths: { css: "styles/Pages/BlogPage/BlogPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/BlogPage/BlogPage.jsx", stories: "src/stories/Pages/BlogPage/BlogPage.stories.jsx" }},
|
|
740
|
+
],
|
|
741
|
+
"AdminDashboard": [
|
|
742
|
+
{ name: "AdminDashboard", paths: { css: "styles/Pages/AdminDashboard/AdminDashboard.css", globalCss: "styles/global.css", jsx: "src/components/Pages/AdminDashboard/AdminDashboard.jsx", stories: "src/stories/Pages/AdminDashboard/AdminDashboard.stories.jsx" }},
|
|
743
|
+
],
|
|
744
|
+
"SearchResultsPage": [
|
|
745
|
+
{ name: "SearchResultsPage", paths: { css: "styles/Pages/SearchResultsPage/SearchResultsPage.css", globalCss: "styles/global.css", jsx: "src/components/Pages/SearchResultsPage/SearchResultsPage.jsx", stories: "src/stories/Pages/SearchResultsPage/SearchResultsPage.stories.jsx" }},
|
|
746
|
+
]
|
|
747
|
+
},
|
|
748
|
+
"Miscellaneous": {
|
|
749
|
+
"TooltipsPopovers": [
|
|
750
|
+
{ name: "Tooltip", paths: { css: "styles/Miscellaneous/Tooltip/Tooltip.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Tooltip/Tooltip.jsx", stories: "src/stories/Miscellaneous/Tooltip/Tooltip.stories.jsx" }},
|
|
751
|
+
{ name: "Popover", paths: { css: "styles/Miscellaneous/Popover/Popover.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Popover/Popover.jsx", stories: "src/stories/Miscellaneous/Popover/Popover.stories.jsx" }},
|
|
752
|
+
],
|
|
753
|
+
"Overlays": [
|
|
754
|
+
{ name: "ModalWindow", paths: { css: "styles/Miscellaneous/ModalWindow/ModalWindow.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/ModalWindow/ModalWindow.jsx", stories: "src/stories/Miscellaneous/ModalWindow/ModalWindow.stories.jsx" }},
|
|
755
|
+
{ name: "Drawer", paths: { css: "styles/Miscellaneous/Drawer/Drawer.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Drawer/Drawer.jsx", stories: "src/stories/Miscellaneous/Drawer/Drawer.stories.jsx" }},
|
|
756
|
+
],
|
|
757
|
+
"SearchComponents": [
|
|
758
|
+
{ name: "SearchBox", paths: { css: "styles/Miscellaneous/SearchBox/SearchBox.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/SearchBox/SearchBox.jsx", stories: "src/stories/Miscellaneous/SearchBox/SearchBox.stories.jsx" }},
|
|
759
|
+
{ name: "Autocomplete", paths: { css: "styles/Miscellaneous/Autocomplete/Autocomplete.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/Autocomplete/Autocomplete.jsx", stories: "src/stories/Miscellaneous/Autocomplete/Autocomplete.stories.jsx" }},
|
|
760
|
+
],
|
|
761
|
+
"MediaAndContentControls": [
|
|
762
|
+
{ name: "AudioControls", paths: { css: "styles/Miscellaneous/MediaAndContentControls/AudioControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/AudioControls.jsx", stories: "src/stories/Miscellaneous/MediaAndContentControls/AudioControls.stories.jsx" }},
|
|
763
|
+
{ name: "VideoControls", paths: { css: "styles/Miscellaneous/MediaAndContentControls/VideoControls.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/VideoControls.jsx", stories: "src/stories/Miscellaneous/MediaAndContentControls/VideoControls.stories.jsx" }},
|
|
764
|
+
{ name: "Filters", paths: { css: "styles/Miscellaneous/MediaAndContentControls/Filters.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/MediaAndContentControls/Filters.jsx", stories: "src/stories/Miscellaneous/MediaAndContentControls/Filters.stories.jsx" }},
|
|
765
|
+
],
|
|
766
|
+
"InteractiveMaps": [
|
|
767
|
+
{ name: "Map", paths: { css: "styles/Miscellaneous/InteractiveMaps/Map.css", globalCss: "styles/global.css", jsx: "src/components/Miscellaneous/InteractiveMaps/Map.jsx", stories: "src/stories/Miscellaneous/InteractiveMaps/Map.stories.jsx" }},
|
|
768
|
+
]
|
|
769
|
+
}
|
|
770
|
+
};
|
|
771
|
+
|
|
772
|
+
---
|
|
773
|
+
|
|
774
|
+
example of a _Atomic component:
|
|
775
|
+
|
|
776
|
+
import React from 'react';
|
|
777
|
+
import PropTypes from 'prop-types';
|
|
778
|
+
import './Button.css'; // Keep custom styles
|
|
779
|
+
|
|
780
|
+
export const Button = ({ primary, size, label, noBorder, children, ...props }) => {
|
|
781
|
+
const mode = primary ? 'button--primary' : 'button--secondary';
|
|
782
|
+
const buttonSize = size === 'small' ? 'button--small' : size === 'large' ? 'button--large' : 'button--medium';
|
|
783
|
+
const borderClass = noBorder ? 'button--no-border' : '';
|
|
784
|
+
|
|
785
|
+
return (
|
|
786
|
+
<button
|
|
787
|
+
type="button"
|
|
788
|
+
className={`button ${mode} ${buttonSize} ${borderClass} rounded px-4 py-2`}
|
|
789
|
+
{...props}
|
|
790
|
+
>
|
|
791
|
+
{children || label}
|
|
792
|
+
</button>
|
|
793
|
+
);
|
|
794
|
+
};
|
|
795
|
+
|
|
796
|
+
Button.propTypes = {
|
|
797
|
+
primary: PropTypes.bool,
|
|
798
|
+
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
799
|
+
label: PropTypes.string,
|
|
800
|
+
noBorder: PropTypes.bool, // New prop for no border button
|
|
801
|
+
children: PropTypes.node,
|
|
802
|
+
};
|
|
803
|
+
|
|
804
|
+
Button.defaultProps = {
|
|
805
|
+
primary: false,
|
|
806
|
+
size: 'medium',
|
|
807
|
+
label: '',
|
|
808
|
+
noBorder: false, // Default no border to false
|
|
809
|
+
};
|
|
810
|
+
|
|
811
|
+
export default Button;
|
|
812
|
+
|
|
813
|
+
---
|
|
814
|
+
|
|
815
|
+
import { Button } from './Button';
|
|
816
|
+
|
|
817
|
+
export default {
|
|
818
|
+
title: '_Atomic/Button',
|
|
819
|
+
component: Button,
|
|
820
|
+
parameters: {
|
|
821
|
+
docs: {
|
|
822
|
+
description: {
|
|
823
|
+
component: 'A customizable button component for various user interactions.',
|
|
824
|
+
},
|
|
825
|
+
},
|
|
826
|
+
},
|
|
827
|
+
argTypes: {
|
|
828
|
+
primary: { control: 'boolean', description: 'Is this the primary button?' },
|
|
829
|
+
size: { control: { type: 'select', options: ['small', 'medium', 'large'] }, description: 'Size of the button' },
|
|
830
|
+
noborder: { control: 'boolean', description: 'No border button style' },
|
|
831
|
+
label: { control: 'text', description: 'Text label for the button' },
|
|
832
|
+
children: { control: 'text', description: 'Content inside the button' },
|
|
833
|
+
},
|
|
834
|
+
};
|
|
835
|
+
|
|
836
|
+
export const Primary = {
|
|
837
|
+
args: {
|
|
838
|
+
primary: true,
|
|
839
|
+
children: 'Primary Button',
|
|
840
|
+
},
|
|
841
|
+
};
|
|
842
|
+
|
|
843
|
+
export const Secondary = {
|
|
844
|
+
args: {
|
|
845
|
+
children: 'Secondary Button',
|
|
846
|
+
},
|
|
847
|
+
};
|
|
848
|
+
|
|
849
|
+
export const NoBorder = {
|
|
850
|
+
args: {
|
|
851
|
+
noborder: true,
|
|
852
|
+
children: 'No Border Button',
|
|
853
|
+
},
|
|
854
|
+
};
|
|
855
|
+
|
|
856
|
+
export const Large = {
|
|
857
|
+
args: {
|
|
858
|
+
size: 'large',
|
|
859
|
+
children: 'Large Button',
|
|
860
|
+
},
|
|
861
|
+
};
|
|
862
|
+
|
|
863
|
+
export const Small = {
|
|
864
|
+
args: {
|
|
865
|
+
size: 'small',
|
|
866
|
+
children: 'Small Button',
|
|
867
|
+
},
|
|
868
|
+
};
|
|
869
|
+
|
|
870
|
+
--
|
|
871
|
+
|
|
872
|
+
/* Base styles */
|
|
873
|
+
.button {
|
|
874
|
+
display: inline-block;
|
|
875
|
+
padding: 10px 20px;
|
|
876
|
+
border-radius: 8px;
|
|
877
|
+
font-family: 'Roboto', sans-serif;
|
|
878
|
+
font-size: 14px;
|
|
879
|
+
cursor: pointer;
|
|
880
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
881
|
+
text-align: center;
|
|
882
|
+
border: 1px solid transparent;
|
|
883
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
/* Primary button */
|
|
887
|
+
.button--primary {
|
|
888
|
+
background-color: #00695c; /* Green color matching your theme */
|
|
889
|
+
color: #fff;
|
|
890
|
+
border-color: #004d40; /* Darker green for border */
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
.button--primary:hover {
|
|
894
|
+
background-color: #004d40;
|
|
895
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
/* Secondary button (white with green text and border) */
|
|
899
|
+
.button--secondary {
|
|
900
|
+
background-color: #fff;
|
|
901
|
+
color: #00695c;
|
|
902
|
+
border-color: #00695c;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.button--secondary:hover {
|
|
906
|
+
background-color: #f0f0f0;
|
|
907
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
/* Sizes */
|
|
911
|
+
.button--small {
|
|
912
|
+
font-size: 12px;
|
|
913
|
+
padding: 6px 12px;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
.button--medium {
|
|
917
|
+
font-size: 14px;
|
|
918
|
+
padding: 10px 20px;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.button--large {
|
|
922
|
+
font-size: 16px;
|
|
923
|
+
padding: 14px 28px;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
/* No Border Button Style */
|
|
927
|
+
.button--no-border {
|
|
928
|
+
background-color: transparent; /* No background */
|
|
929
|
+
color: #00695c; /* Text color */
|
|
930
|
+
border: none; /* Remove the border */
|
|
931
|
+
border-bottom: 2px solid #00695c; /* Add only the underline */
|
|
932
|
+
border-radius: 0; /* Remove rounded corners */
|
|
933
|
+
padding: 0; /* Adjust padding */
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
.button--no-border:hover {
|
|
937
|
+
border-bottom: 2px solid #004d40; /* Darker underline on hover */
|
|
938
|
+
background-color: transparent;
|
|
939
|
+
box-shadow: none; /* No shadow on hover */
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
---
|