create-atsdc-stack 1.0.0

package/app/src/pages/index.astro

@@ -0,0 +1,87 @@
+---
+/**
+ * Home Page
+ * Demonstrates SCSS architecture:
+ * - No inline styles
+ * - All styles imported from external SCSS file
+ * - Component-specific styles in separate files
+ */
+import Layout from '@/layouts/Layout.astro';
+import { siteConfig } from '@/lib/config';
+
+// Import component-specific styles
+import '@/styles/components/button.scss';
+import '@/styles/pages/index.scss';
+---
+
+<Layout pageTitle="Home">
+    <main class="home">
+        <div class="container">
+            <header class="home__header">
+                <h1 class="home__title">Welcome to {siteConfig.stackName}</h1>
+                <p class="home__subtitle">
+                    A production-ready full-stack framework combining the best modern web technologies
+                </p>
+            </header>
+
+            <section class="home__features">
+                <div class="home__feature card">
+                    <h3>⚡ Astro</h3>
+                    <p>Lightning-fast static site generation with dynamic capabilities</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>📘 TypeScript</h3>
+                    <p>Full type safety across your entire application</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🗄️ Drizzle ORM</h3>
+                    <p>Type-safe database operations with PostgreSQL</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🔐 Clerk</h3>
+                    <p>Complete authentication and user management</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🎨 SCSS</h3>
+                    <p>Powerful styling with variables, mixins, and modules</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>✅ Zod</h3>
+                    <p>Runtime validation for API routes and forms</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🤖 Vercel AI SDK</h3>
+                    <p>Seamless integration with AI language models</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🔑 NanoID</h3>
+                    <p>Secure, URL-friendly unique identifiers</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>📱 PWA</h3>
+                    <p>Progressive Web App with offline capabilities</p>
+                </div>
+            </section>
+
+            <section class="home__cta">
+                <h2>Get Started</h2>
+                <div class="home__cta-buttons">
+                    <a href={siteConfig.docsUrl} class="btn btn-primary btn-lg">
+                        Read Documentation
+                    </a>
+                    <a href={siteConfig.githubUrl} class="btn btn-secondary btn-lg">
+                        View on GitHub
+                    </a>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>

package/app/src/styles/components/button.scss

@@ -0,0 +1,152 @@
+@use 'sass:color';
+@use '../variables/globals' as *;
+@use '../variables/mixins' as *;
+
+// Button component styles
+// Usage (preferred): <button class="btn" data-variant="primary" data-size="lg">Click me</button>
+// Usage (alternative): <button class="btn primary lg">Class chaining</button>
+
+.btn {
+    @include button-base;
+
+    // Variant modifiers using data attributes (preferred for state/variants)
+    &[data-variant='primary'] {
+        @include button-primary;
+    }
+
+    &[data-variant='secondary'] {
+        @include button-secondary;
+    }
+
+    &[data-variant='danger'] {
+        background-color: $error-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($error-color, $lightness: -10%);
+        }
+    }
+
+    &[data-variant='success'] {
+        background-color: $success-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($success-color, $lightness: -10%);
+        }
+    }
+
+    // Size modifiers using data attributes
+    &[data-size='small'] {
+        padding: $spacing-extra-small $spacing-small;
+        font-size: $font-size-small;
+    }
+
+    &[data-size='large'] {
+        padding: $spacing-medium $spacing-extra-large;
+        font-size: $font-size-large;
+    }
+
+    // State modifiers using data attributes
+    &[data-state='loading'] {
+        position: relative;
+        color: transparent;
+        pointer-events: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 1rem;
+            height: 1rem;
+            top: 50%;
+            left: 50%;
+            margin-left: -0.5rem;
+            margin-top: -0.5rem;
+            border: 2px solid transparent;
+            border-top-color: currentColor;
+            border-radius: 50%;
+            animation: button-spin 0.6s linear infinite;
+        }
+    }
+
+    &[data-state='active'] {
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    // Layout modifiers using data attributes
+    &[data-width='full'] {
+        width: 100%;
+    }
+
+    &[data-has-icon='true'] {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-small;
+
+        svg {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+
+    // Alternative: Class chaining for variants when data attributes aren't appropriate
+    // Use this when you need CSS-only solutions or when data attributes feel verbose
+    &.primary {
+        @include button-primary;
+    }
+
+    &.secondary {
+        @include button-secondary;
+    }
+
+    &.danger {
+        background-color: $error-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($error-color, $lightness: -10%);
+        }
+    }
+
+    &.success {
+        background-color: $success-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($success-color, $lightness: -10%);
+        }
+    }
+
+    // Size class chaining alternatives
+    &.small {
+        padding: $spacing-extra-small $spacing-small;
+        font-size: $font-size-small;
+    }
+
+    &.large {
+        padding: $spacing-medium $spacing-extra-large;
+        font-size: $font-size-large;
+    }
+
+    // Layout class chaining alternatives
+    &.full {
+        width: 100%;
+    }
+
+    &.with-icon {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-small;
+
+        svg {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+}
+
+@keyframes button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/app/src/styles/components/card.scss

@@ -0,0 +1,180 @@
+@use '../variables/globals' as *;
+@use '../variables/mixins' as *;
+
+// Card component styles
+// Usage (preferred): <div class="card" data-variant="primary" data-state="active">...</div>
+// Usage (alternative): <div class="card primary active">Class chaining</div>
+
+.card-component {
+    @include card;
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    transition: all $transition-base;
+
+    &:hover {
+        transform: translateY(-2px);
+        box-shadow: $shadow-large;
+    }
+
+    &__title {
+        font-size: $font-size-extra-large;
+        font-weight: $font-weight-semibold;
+        color: $text-primary;
+        margin-bottom: $spacing-medium;
+    }
+
+    &__content {
+        color: $text-secondary;
+        line-height: $line-height-relaxed;
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // Variant modifiers using data attributes (preferred)
+    &[data-variant='primary'] {
+        border-color: $primary-color;
+        background: linear-gradient(135deg, rgba($primary-color, 0.05) 0%, transparent 100%);
+    }
+
+    &[data-variant='secondary'] {
+        border-color: $secondary-color;
+        background: linear-gradient(135deg, rgba($secondary-color, 0.05) 0%, transparent 100%);
+    }
+
+    &[data-variant='accent'] {
+        border-color: $accent-color;
+        background: linear-gradient(135deg, rgba($accent-color, 0.05) 0%, transparent 100%);
+    }
+
+    &[data-variant='ghost'] {
+        border-color: transparent;
+        background: transparent;
+        box-shadow: none;
+
+        &:hover {
+            background-color: $bg-secondary;
+        }
+    }
+
+    // State modifiers using data attributes
+    &[data-state='active'] {
+        border-color: $primary-color;
+        box-shadow: $shadow-medium;
+    }
+
+    &[data-state='disabled'] {
+        opacity: 0.6;
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
+    &[data-state='loading'] {
+        position: relative;
+        opacity: 0.7;
+        pointer-events: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 2rem;
+            height: 2rem;
+            margin: -1rem 0 0 -1rem;
+            border: 3px solid $border-color;
+            border-top-color: $primary-color;
+            border-radius: 50%;
+            animation: card-spin 0.8s linear infinite;
+        }
+    }
+
+    // Layout modifiers using data attributes
+    &[data-padding='compact'] {
+        padding: $spacing-medium;
+    }
+
+    &[data-padding='comfortable'] {
+        padding: $spacing-2x-large;
+    }
+
+    &[data-hover='lift'] {
+        &:hover {
+            transform: translateY(-4px);
+            box-shadow: $shadow-extra-large;
+        }
+    }
+
+    &[data-hover='none'] {
+        &:hover {
+            transform: none;
+            box-shadow: $shadow-small;
+        }
+    }
+
+    // Alternative: Class chaining when data attributes aren't appropriate
+    &.primary {
+        border-color: $primary-color;
+        background: linear-gradient(135deg, rgba($primary-color, 0.05) 0%, transparent 100%);
+    }
+
+    &.secondary {
+        border-color: $secondary-color;
+        background: linear-gradient(135deg, rgba($secondary-color, 0.05) 0%, transparent 100%);
+    }
+
+    &.accent {
+        border-color: $accent-color;
+        background: linear-gradient(135deg, rgba($accent-color, 0.05) 0%, transparent 100%);
+    }
+
+    &.ghost {
+        border-color: transparent;
+        background: transparent;
+        box-shadow: none;
+
+        &:hover {
+            background-color: $bg-secondary;
+        }
+    }
+
+    // State class chaining alternatives
+    &.active {
+        border-color: $primary-color;
+        box-shadow: $shadow-medium;
+    }
+
+    &.disabled {
+        opacity: 0.6;
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
+    &.loading {
+        position: relative;
+        opacity: 0.7;
+        pointer-events: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 2rem;
+            height: 2rem;
+            margin: -1rem 0 0 -1rem;
+            border: 3px solid $border-color;
+            border-top-color: $primary-color;
+            border-radius: 50%;
+            animation: card-spin 0.8s linear infinite;
+        }
+    }
+}
+
+@keyframes card-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/app/src/styles/components/form.scss

@@ -0,0 +1,240 @@
+@use '../variables/globals' as *;
+@use '../variables/mixins' as *;
+
+// Form component styles
+// Usage (preferred): <input class="form-input" data-state="error" data-size="lg" />
+// Usage (alternative): <input class="form-input error lg" />
+
+.form {
+    width: 100%;
+    max-width: 600px;
+
+    &-group {
+        margin-bottom: $spacing-large;
+    }
+
+    &-label {
+        display: block;
+        margin-bottom: $spacing-extra-small;
+        font-size: $font-size-small;
+        font-weight: $font-weight-medium;
+        color: $text-primary;
+
+        // Use data attributes for required state
+        &[data-required='true']::after {
+            content: ' *';
+            color: $error-color;
+        }
+
+        // Alternative: class chaining
+        &.required::after {
+            content: ' *';
+            color: $error-color;
+        }
+    }
+
+    &-input,
+    &-textarea,
+    &-select {
+        @include input-base;
+
+        // State modifiers using data attributes (preferred)
+        &[data-state='error'] {
+            border-color: $error-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+            }
+        }
+
+        &[data-state='success'] {
+            border-color: $success-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+            }
+        }
+
+        &[data-state='warning'] {
+            border-color: $warning-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+            }
+        }
+
+        // Size modifiers using data attributes
+        &[data-size='small'] {
+            padding: $spacing-extra-small $spacing-small;
+            font-size: $font-size-small;
+        }
+
+        &[data-size='large'] {
+            padding: $spacing-medium $spacing-large;
+            font-size: $font-size-large;
+        }
+
+        // Alternative: class chaining for states
+        &.error {
+            border-color: $error-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+            }
+        }
+
+        &.success {
+            border-color: $success-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+            }
+        }
+
+        &.warning {
+            border-color: $warning-color;
+
+            &:focus {
+                box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+            }
+        }
+
+        // Size class chaining alternatives
+        &.small {
+            padding: $spacing-extra-small $spacing-small;
+            font-size: $font-size-small;
+        }
+
+        &.large {
+            padding: $spacing-medium $spacing-large;
+            font-size: $font-size-large;
+        }
+    }
+
+    &-textarea {
+        min-height: 120px;
+        resize: vertical;
+
+        &[data-resize='none'] {
+            resize: none;
+        }
+
+        &[data-resize='horizontal'] {
+            resize: horizontal;
+        }
+
+        &.no-resize {
+            resize: none;
+        }
+    }
+
+    &-select {
+        cursor: pointer;
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+        background-position: right $spacing-small center;
+        background-repeat: no-repeat;
+        background-size: 1.5rem 1.5rem;
+        padding-right: $spacing-2x-large;
+    }
+
+    &-helper {
+        margin-top: $spacing-extra-small;
+        font-size: $font-size-small;
+        color: $text-secondary;
+
+        &[data-state='error'] {
+            color: $error-color;
+        }
+
+        &[data-state='success'] {
+            color: $success-color;
+        }
+
+        &[data-state='warning'] {
+            color: $warning-color;
+        }
+    }
+
+    &-error {
+        margin-top: $spacing-extra-small;
+        font-size: $font-size-small;
+        color: $error-color;
+    }
+
+    &-checkbox,
+    &-radio {
+        display: flex;
+        align-items: center;
+        gap: $spacing-small;
+        margin-bottom: $spacing-small;
+
+        input {
+            width: 1.125rem;
+            height: 1.125rem;
+            cursor: pointer;
+            accent-color: $primary-color;
+        }
+
+        label {
+            cursor: pointer;
+            font-size: $font-size-base;
+            color: $text-primary;
+        }
+
+        &[data-state='disabled'] {
+            opacity: 0.5;
+            cursor: not-allowed;
+
+            input,
+            label {
+                cursor: not-allowed;
+            }
+        }
+
+        // Alternative class chaining
+        &.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+
+            input,
+            label {
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    &-actions {
+        @include flex-between;
+        margin-top: $spacing-extra-large;
+        gap: $spacing-medium;
+
+        &[data-layout='stack'] {
+            flex-direction: column;
+
+            button {
+                width: 100%;
+            }
+        }
+
+        &[data-align='center'] {
+            justify-content: center;
+        }
+
+        &[data-align='start'] {
+            justify-content: flex-start;
+        }
+
+        &[data-align='end'] {
+            justify-content: flex-end;
+        }
+
+        @media (max-width: $breakpoint-tablet) {
+            flex-direction: column;
+
+            button {
+                width: 100%;
+            }
+        }
+    }
+}