From 52d97cd6d43b45fb3083d3cc0a01aa4738e30998 Mon Sep 17 00:00:00 2001 From: amerah-abdul Date: Tue, 31 Dec 2024 21:06:45 +0800 Subject: [PATCH 1/4] docs: Add comprehensive UI documentation with components, elements, and formats --- docs/ui/components/buttons.html | 119 +++++++++++++++++++++++ docs/ui/components/forms.html | 137 ++++++++++++++++++++++++++ docs/ui/components/layout.html | 141 +++++++++++++++++++++++++++ docs/ui/index.html | 148 +++++++++++++++++++++++++++++ examples/with-express/src/index.ts | 4 +- 5 files changed, 547 insertions(+), 2 deletions(-) create mode 100644 docs/ui/components/buttons.html create mode 100644 docs/ui/components/forms.html create mode 100644 docs/ui/components/layout.html create mode 100644 docs/ui/index.html diff --git a/docs/ui/components/buttons.html b/docs/ui/components/buttons.html new file mode 100644 index 0000000..e15cfb5 --- /dev/null +++ b/docs/ui/components/buttons.html @@ -0,0 +1,119 @@ + + + + + + Ink UI - Button Components + + + + +
+ +

Button Components

+
+ +
+
+

Basic Button

+
+ + + +
+
+ 
<button class="primary">Primary Button</button>
+<button class="secondary">Secondary Button</button>
+<button class="text">Text Button</button>
+
+
+ +
+

Button Variants

+
+
+

Sizes

+ + + +
+
+

States

+ + + +
+
+
+ +
+

Props & Customization

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescriptionDefault
primaryPrimary action button style-
secondarySecondary action button style-
smallSmall button size-
largeLarge button size-
+
+
+ + diff --git a/docs/ui/components/forms.html b/docs/ui/components/forms.html new file mode 100644 index 0000000..7012dd0 --- /dev/null +++ b/docs/ui/components/forms.html @@ -0,0 +1,137 @@ + + + + + + Ink UI - Form Components + + + + +
+ +

Form Components

+
+ +
+
+

Basic Form Elements

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ 
<form class="form-grid">
+    <div class="form-group">
+        <label>Text Input</label>
+        <input type="text" placeholder="Enter text">
+    </div>
+    <!-- More form elements... -->
+</form>
+
+
+ +
+

Form Validation

+
+
+
+ + + Please enter a valid email +
+
+ + + Password must be at least 8 characters +
+
+
+
+ +
+

Props & Classes

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescriptionExample
form-groupContainer for form elements<div class="form-group">
errorError message styling<span class="error">
helperHelper text styling<span class="helper">
+
+
+ + diff --git a/docs/ui/components/layout.html b/docs/ui/components/layout.html new file mode 100644 index 0000000..aa06bdb --- /dev/null +++ b/docs/ui/components/layout.html @@ -0,0 +1,141 @@ + + + + + + Ink UI - Layout Components + + + + +
+ +

Layout Components

+
+ +
+
+

Grid Layout

+
+
+
Column 1
+
Column 2
+
Column 3
+
+
+
+ 
<div class="grid-demo">
+    <div class="demo-box">Column 1</div>
+    <div class="demo-box">Column 2</div>
+    <div class="demo-box">Column 3</div>
+</div>
+
+
+ +
+

Flex Layout

+
+
+
Flex Item 1
+
Flex Item 2
+
Flex Item 3
+
+
+
+ 
<div class="flex-demo">
+    <div class="demo-box">Flex Item 1</div>
+    <div class="demo-box">Flex Item 2</div>
+    <div class="demo-box">Flex Item 3</div>
+</div>
+
+
+ +
+

Container

+
+
+
Contained Content
+
+
+
+ 
<div class="container">
+    <div class="content">Contained Content</div>
+</div>
+
+
+ +
+

Layout Classes

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ClassDescriptionProperties
containerCenters content with max-widthmax-width: 1200px
grid-demoBasic grid layoutdisplay: grid
flex-demoBasic flex layoutdisplay: flex
+
+
+ + diff --git a/docs/ui/index.html b/docs/ui/index.html new file mode 100644 index 0000000..8d0bbb4 --- /dev/null +++ b/docs/ui/index.html @@ -0,0 +1,148 @@ + + + + + + Ink UI Documentation + + + + +
+ +

Ink UI Documentation

+
+ + + +
+
+

Getting Started

+

Ink provides a modern and minimalist UI framework that + helps you create beautiful and responsive web applications. + This documentation will guide you through the available + components and their usage.

+
+ +
+

UI Elements

+
+
+

Buttons

+
+ + +
+
+ 
<button class="primary">
+                            Primary Button</button>
+<button class="secondary">Secondary Button</button>
+
+
+ +
+

Text Inputs

+
+ +
+
+ 
<input type="text" 
+                            placeholder="Standard input">
+
+
+
+
+ +
+

Forms

+
+
+

Form Layout

+
+
+
+ + +
+
+
+
+ 
<form class="ink-form">
+    <div class="form-group">
+        <label>Input Label</label>
+        <input type="text">
+    </div>
+</form>
+
+
+
+
+ +
+

Formats

+
+
+

Typography

+
+

Heading 1

+

Heading 2

+

Regular paragraph text

+
+
+ 
<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<p>Regular paragraph text</p>
+
+
+
+
+
+ + + + diff --git a/examples/with-express/src/index.ts b/examples/with-express/src/index.ts index 808f810..7dc1542 100644 --- a/examples/with-express/src/index.ts +++ b/examples/with-express/src/index.ts @@ -60,6 +60,6 @@ app.get('/', async (req, res) => { }); //listen -app.listen(3000, () => { - console.log('Server is running on http://localhost:3000'); +app.listen(3001, () => { + console.log('Server is running on http://localhost:3001'); }); \ No newline at end of file From 91834177e4e3d05c0e8f0e2886ea3bb24cee10b9 Mon Sep 17 00:00:00 2001 From: amerah-abdul Date: Tue, 31 Dec 2024 21:08:47 +0800 Subject: [PATCH 2/4] feat: Add modern UI components and styling for Express example --- examples/with-express/src/pages/index.ink | 73 ++++++++++++++++++++--- 1 file changed, 65 insertions(+), 8 deletions(-) diff --git a/examples/with-express/src/pages/index.ink b/examples/with-express/src/pages/index.ink index a4c16d4..d15236b 100644 --- a/examples/with-express/src/pages/index.ink +++ b/examples/with-express/src/pages/index.ink @@ -2,15 +2,72 @@