sdga-ui 1.0.5 → 1.0.7

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.
Files changed (79) hide show
  1. package/.github/workflows/deploy.yml +15 -1
  2. package/README.md +16 -24
  3. package/css/dga-ui.css +4146 -1055
  4. package/css/dga-ui.css.map +1 -1
  5. package/demo-angular/README.md +34 -2
  6. package/demo-angular/angular.json +6 -1
  7. package/demo-angular/package-lock.json +191 -50
  8. package/demo-angular/package.json +14 -11
  9. package/demo-angular/public/404.html +35 -0
  10. package/demo-angular/public/i18n/ar.json +50 -0
  11. package/demo-angular/public/i18n/en.json +50 -0
  12. package/demo-angular/src/app/app.routes.ts +12 -4
  13. package/demo-angular/src/app/app.ts +8 -2
  14. package/demo-angular/src/app/views/alerts/alerts.component.html +10 -10
  15. package/demo-angular/src/app/views/alerts/alerts.component.ts +10 -10
  16. package/demo-angular/src/app/views/buttons/buttons.component.html +23 -23
  17. package/demo-angular/src/app/views/buttons/buttons.component.ts +14 -14
  18. package/demo-angular/src/app/views/cards/cards.component.html +6 -6
  19. package/demo-angular/src/app/views/cards/cards.component.ts +10 -10
  20. package/demo-angular/src/app/views/contexts/contexts.component.html +204 -0
  21. package/demo-angular/src/app/views/contexts/contexts.component.ts +10 -0
  22. package/demo-angular/src/app/views/footer/footer.html +282 -0
  23. package/demo-angular/src/app/views/footer/footer.spec.ts +23 -0
  24. package/demo-angular/src/app/views/footer/footer.ts +142 -0
  25. package/demo-angular/src/app/views/header/header.html +1 -0
  26. package/demo-angular/src/app/views/header/header.scss +0 -0
  27. package/demo-angular/src/app/views/header/header.spec.ts +23 -0
  28. package/demo-angular/src/app/views/header/header.ts +11 -0
  29. package/demo-angular/src/app/views/home/home.component.html +0 -5
  30. package/demo-angular/src/app/views/links/links.component.html +11 -130
  31. package/demo-angular/src/app/views/links/links.component.scss +1 -50
  32. package/demo-angular/src/app/views/links/links.component.ts +5 -109
  33. package/demo-angular/src/app/views/toasts/toasts.component.html +7 -7
  34. package/demo-angular/src/app/views/toasts/toasts.component.ts +7 -7
  35. package/demo-angular/src/index.html +15 -1
  36. package/package.json +3 -2
  37. package/sdga-ui/README.md +45 -0
  38. package/sdga-ui/content/docs/components/alerts.mdx +475 -0
  39. package/sdga-ui/content/docs/index.mdx +239 -0
  40. package/sdga-ui/next.config.mjs +10 -0
  41. package/sdga-ui/package-lock.json +5851 -0
  42. package/sdga-ui/package.json +32 -0
  43. package/sdga-ui/postcss.config.mjs +5 -0
  44. package/sdga-ui/source.config.ts +27 -0
  45. package/sdga-ui/src/app/(home)/layout.tsx +6 -0
  46. package/sdga-ui/src/app/(home)/page.tsx +202 -0
  47. package/sdga-ui/src/app/api/search/route.ts +7 -0
  48. package/sdga-ui/src/app/docs/[[...slug]]/page.tsx +54 -0
  49. package/sdga-ui/src/app/docs/layout.tsx +11 -0
  50. package/sdga-ui/src/app/global.css +3 -0
  51. package/sdga-ui/src/app/layout.tsx +25 -0
  52. package/sdga-ui/src/app/llms-full.txt/route.ts +10 -0
  53. package/sdga-ui/src/app/og/docs/[...slug]/route.tsx +34 -0
  54. package/sdga-ui/src/app/sdga-scoped.css +7 -0
  55. package/sdga-ui/src/components/sdga-preview.tsx +105 -0
  56. package/sdga-ui/src/lib/layout.shared.tsx +9 -0
  57. package/sdga-ui/src/lib/source.ts +27 -0
  58. package/sdga-ui/src/mdx-components.tsx +9 -0
  59. package/sdga-ui/tsconfig.json +46 -0
  60. package/theme/_variables.scss +7 -5
  61. package/theme/components/_buttons.scss +105 -0
  62. package/theme/components/_cards.scss +0 -1
  63. package/theme/components/_pagination.scss +2 -2
  64. package/theme/config/_base.scss +4 -33
  65. package/theme/config/_contexts.scss +471 -0
  66. package/theme/customizations/_alerts.scss +105 -125
  67. package/theme/customizations/_badges.scss +15 -0
  68. package/theme/customizations/_buttons.scss +288 -146
  69. package/theme/customizations/_cards.scss +52 -0
  70. package/theme/customizations/_contexts.scss +432 -0
  71. package/theme/customizations/_footer.scss +83 -0
  72. package/theme/customizations/_links.scss +88 -84
  73. package/theme/customizations/_toasts.scss +81 -101
  74. package/theme/dga-ui.scss +3 -2
  75. package/demo-angular/src/app/views/bootstrap/bootstrap.component.html +0 -14
  76. package/demo-angular/src/app/views/bootstrap/bootstrap.component.scss +0 -91
  77. package/demo-angular/src/app/views/bootstrap/bootstrap.component.ts +0 -23
  78. package/theme/customizations/_utilities.scss +0 -138
  79. /package/demo-angular/{public/.nojekyll → src/app/views/footer/footer.scss} +0 -0
package/sdga-ui/content/docs/index.mdx ADDED
@@ -0,0 +1,239 @@
1
+ ---
2
+ title: Getting Started
3
+ description: Get started with SDGA UI - A modern, government-inspired UI component library
4
+ ---
5
+
6
+ import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
7
+ import { Callout } from 'fumadocs-ui/components/callout';
8
+ import { Step, Steps } from 'fumadocs-ui/components/steps';
9
+
10
+ # Getting Started with SDGA UI
11
+
12
+ **SDGA UI** (Saudi Digital Government Authority UI) is a customizable UI theme inspired by modern government and authority design systems. Built on top of **Bootstrap**, it provides consistent colors, typography, spacing, and reusable UI patterns suitable for official portals, administrative dashboards, and public-sector applications.
13
+
14
+ <Callout title="Live Demo" type="info">
15
+ Check out the live demo: [https://mahmoudadel1996.github.io/dga-ui/](https://mahmoudadel1996.github.io/dga-ui/)
16
+ </Callout>
17
+
18
+ ## ✨ Features
19
+
20
+ - 🏛️ Government-inspired design system
21
+ - 🔄 Full compatibility with Bootstrap
22
+ - 🌍 **Built-in RTL support** (no need to import Bootstrap RTL separately)
23
+ - 🎨 Custom color palette and typography
24
+ - 📏 Standardized spacing & component overrides
25
+ - 🛠️ Utility classes for layout and theming
26
+ - 🌓 Light / dark mode friendly
27
+ - 🔤 IBM Plex Sans Arabic font included
28
+ - ⚡ Easy to integrate into any frontend project
29
+
30
+ ---
31
+
32
+ ## 📦 Installation
33
+
34
+ <Steps>
35
+
36
+ ### Install the Package
37
+
38
+ Install SDGA UI via npm or yarn:
39
+
40
+ <Tabs items={['npm', 'yarn', 'pnpm']}>
41
+ <Tab value="npm">
42
+ ```bash
43
+ npm install sdga-ui
44
+ ```
45
+ </Tab>
46
+ <Tab value="yarn">
47
+ ```bash
48
+ yarn add sdga-ui
49
+ ```
50
+ </Tab>
51
+ <Tab value="pnpm">
52
+ ```bash
53
+ pnpm add sdga-ui
54
+ ```
55
+ </Tab>
56
+ </Tabs>
57
+
58
+ ### Choose Your Integration Method
59
+
60
+ You can use SDGA UI in two ways:
61
+
62
+ #### Using the Compiled CSS
63
+
64
+ Include the compiled CSS file in your HTML:
65
+
66
+ ```html
67
+ <link rel="stylesheet" href="node_modules/sdga-ui/css/dga-ui.css">
68
+ ```
69
+
70
+ Or import it in your JavaScript/CSS:
71
+
72
+ ```css
73
+ @import "sdga-ui/css/dga-ui.css";
74
+ ```
75
+
76
+ #### Using SCSS Source Files
77
+
78
+ Import the theme in your SCSS file for full customization:
79
+
80
+ ```scss
81
+ @import "sdga-ui/theme/dga-ui";
82
+ ```
83
+
84
+ All Bootstrap components automatically adopt the SDGA UI theme.
85
+
86
+ ### Add RTL Support (Optional)
87
+
88
+ SDGA UI has built-in RTL (Right-to-Left) support for Arabic and other RTL languages. Simply add the `dir="rtl"` attribute to your HTML tag:
89
+
90
+ ```html
91
+ <html dir="rtl" lang="ar">
92
+ <head>
93
+ <meta charset="UTF-8">
94
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
95
+ <link rel="stylesheet" href="path/to/sdga-ui.css">
96
+ </head>
97
+ <body>
98
+ <!-- Your content here -->
99
+ </body>
100
+ </html>
101
+ ```
102
+
103
+ <Callout title="No Separate RTL File Needed" type="success">
104
+ Unlike Bootstrap, you don't need to import a separate RTL CSS file – it's already integrated!
105
+ </Callout>
106
+
107
+ </Steps>
108
+
109
+ ---
110
+
111
+ ## 🚀 Quick Start Example
112
+
113
+ Here's a simple example to get you started:
114
+
115
+ ```html
116
+ <!DOCTYPE html>
117
+ <html lang="en">
118
+ <head>
119
+ <meta charset="UTF-8">
120
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
121
+ <title>SDGA UI Example</title>
122
+ <link rel="stylesheet" href="node_modules/sdga-ui/css/dga-ui.css">
123
+ </head>
124
+ <body>
125
+ <div class="container mt-5">
126
+ <h1>Welcome to SDGA UI</h1>
127
+
128
+ <!-- Button Examples -->
129
+ <button class="btn btn-primary">Primary Button</button>
130
+ <button class="btn btn-secondary">Secondary Button</button>
131
+
132
+ <!-- Alert Example -->
133
+ <div class="alert alert-success mt-3" role="alert">
134
+ Success! Your changes have been saved.
135
+ </div>
136
+
137
+ <!-- Card Example -->
138
+ <div class="card mt-3">
139
+ <div class="card-body">
140
+ <h5 class="card-title">Card Title</h5>
141
+ <p class="card-text">This is a sample card using SDGA UI styling.</p>
142
+ <a href="#" class="btn btn-primary">Learn More</a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </body>
147
+ </html>
148
+ ```
149
+
150
+ ---
151
+
152
+ ## 🎨 Customization
153
+
154
+ You can override SCSS variables before importing the theme:
155
+
156
+ ```scss
157
+ // Your custom variables
158
+ $primary: #0d47a1;
159
+ $secondary: #ffc107;
160
+ $font-family-base: 'Your Custom Font', sans-serif;
161
+
162
+ // Import the SDGA UI theme
163
+ @import "sdga-ui/theme/dga-ui";
164
+ ```
165
+
166
+ ---
167
+
168
+ ## 📁 File Structure
169
+
170
+ ```
171
+ sdga-ui/
172
+ │
173
+ ├─ css/ # Compiled CSS output
174
+ │ └─ dga-ui.css
175
+ ├─ fonts/ # Font files (IBM Plex Sans Arabic)
176
+ ├─ theme/ # Source SCSS theme files
177
+ │ ├─ dga-ui.scss # Main theme entry point
178
+ │ ├─ _fonts.scss
179
+ │ ├─ _functions.scss
180
+ │ ├─ _variables.scss
181
+ │ ├─ config/ # Base configuration
182
+ │ ├─ components/ # Component styles
183
+ │ └─ customizations/ # Theme customizations
184
+ ├─ package.json
185
+ ├─ LICENSE
186
+ └─ README.md
187
+ ```
188
+
189
+ ---
190
+
191
+ ## 🛠 Development
192
+
193
+ ### Building the CSS
194
+
195
+ Compile the SCSS to CSS:
196
+
197
+ ```bash
198
+ npm run build-css
199
+ ```
200
+
201
+ ### Watch Mode
202
+
203
+ Watch for changes and auto-compile:
204
+
205
+ ```bash
206
+ npm run watch-css
207
+ ```
208
+
209
+ ---
210
+
211
+ ## 📚 Next Steps
212
+
213
+ <Cards>
214
+ <Card
215
+ title="Components"
216
+ href="/docs/components"
217
+ description="Explore all available components"
218
+ />
219
+ <Card
220
+ title="Customization"
221
+ href="/docs/customization"
222
+ description="Learn how to customize the theme"
223
+ />
224
+ <Card
225
+ title="Examples"
226
+ href="https://mahmoudadel1996.github.io/dga-ui/"
227
+ description="View live examples and demos"
228
+ />
229
+ </Cards>
230
+
231
+ ---
232
+
233
+ ## 🤝 Contributing
234
+
235
+ Contributions are welcome! Feel free to open issues, submit pull requests, or suggest improvements on [GitHub](https://github.com/MahmoudAdel1996/dga-ui).
236
+
237
+ ## 📄 License
238
+
239
+ MIT License — free for personal and commercial use.
package/sdga-ui/next.config.mjs ADDED
@@ -0,0 +1,10 @@
1
+ import { createMDX } from 'fumadocs-mdx/next';
2
+
3
+ const withMDX = createMDX();
4
+
5
+ /** @type {import('next').NextConfig} */
6
+ const config = {
7
+ reactStrictMode: true,
8
+ };
9
+
10
+ export default withMDX(config);