@aerogel/cli 0.0.0-next.4d82ed613002ee486648f88f720678424e7263f1 → 0.0.0-next.5953e1862a7c89a8fc80da087467d67d4f4e8c73

package/templates/component-input/[component.name].vue

@@ -0,0 +1,16 @@
+<template>
+    <AGHeadlessInput v-bind="props">
+        <AGHeadlessInputLabel />
+        <AGHeadlessInputInput v-bind="attrs" />
+        <AGHeadlessInputError />
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { useInputAttrs, useInputProps } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps(useInputProps());
+const [attrs] = useInputAttrs();
+</script>

package/templates/component-input-story/[component.name].story.vue

@@ -0,0 +1,63 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form">
+                <<% component.name %> name="food" :label="label" :placeholder="placeholder" />
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+                <HstText v-model="placeholder" title="Placeholder" />
+                <HstCheckbox v-model="hasErrors" title="Errors" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" />
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm">
+                <<% component.name %>
+                    name="food"
+                    label="What's the best food?"
+                    placeholder="Ramen"
+                    class=":focus :focus-visible"
+                />
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredStringInput, useForm } from '@aerogel/core';
+import { ref, watchEffect } from 'vue';
+
+const form = useForm({ food: requiredStringInput() });
+const errorForm = useForm({ food: requiredStringInput() });
+const label = ref('What\'s the best food?');
+const placeholder = ref('Ramen');
+const hasErrors = ref(false);
+
+errorForm.submit();
+
+watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>

package/templates/histoire/histoire.config.ts

@@ -0,0 +1,7 @@
+import HstAerogel from '@aerogel/histoire/dist/plugin';
+import { defineConfig } from 'histoire';
+
+export default defineConfig({
+    setupFile: '/src/main.histoire.ts',
+    plugins: [HstAerogel()],
+});

package/templates/histoire/patches/histoire+0.17.6.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/histoire/dist/node/collect/index.js b/node_modules/histoire/dist/node/collect/index.js
+index 8ffd507..37be43e 100644
+--- a/node_modules/histoire/dist/node/collect/index.js
++++ b/node_modules/histoire/dist/node/collect/index.js
+@@ -22,7 +22,7 @@ export function useCollectStories(options, ctx) {
+                 /vite\w*\/dist\/client\/(client|env).mjs/,
+                 ...ctx.config.viteNodeInlineDeps ?? [],
+             ],
+-            fallbackCJS: true,
++            fallbackCJS: false,
+         },
+         transformMode: ctx.config.viteNodeTransformMode,
+     });

package/templates/histoire/src/main.histoire.ts

@@ -0,0 +1,8 @@
+import '@aerogel/histoire/dist/styles.css';
+import { defineSetupAerogel } from '@aerogel/histoire';
+
+import './assets/css/styles.css';
+
+export const setupVue3 = defineSetupAerogel({
+    messages: import.meta.glob('@/lang/*.yaml'),
+});

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: ['@noeldemartin/eslint-config-typescript'],
-};

package/src/lib/utils/format.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { formatCodeBlock } from './format';
-
-describe('Format utils', () => {
-
-    it('Formats code blocks', () => {
-        // Arrange
-        const raw = `
-
-            const foo = 'bar';
-
-            if (foo) {
-                doSomething();
-            }
-
-        `;
-        const formatted = [
-            'const foo = \'bar\';', //
-            '', //
-            'if (foo) {', //
-            '    doSomething();', //
-            '}', //
-        ].join('\n');
-
-        // Act
-        const actual = formatCodeBlock(raw);
-
-        // Assert
-        expect(actual).toEqual(formatted);
-    });
-
-});

package/src/lib/utils/format.ts

@@ -1,38 +0,0 @@
-export interface FormatCodeBlockOptions {
-    indent?: number;
-}
-
-export function formatCodeBlock(code: string, options: FormatCodeBlockOptions = {}): string {
-    const lines = code.split('\n');
-    const indent = options.indent ?? 0;
-    let originalIndent = 0;
-    let formatted = '';
-
-    for (const line of lines) {
-        const trimmedLine = line.trim();
-        const isEmptyLine = trimmedLine.length === 0;
-
-        if (formatted.length === 0) {
-            if (isEmptyLine) {
-                continue;
-            }
-
-            originalIndent = line.indexOf(trimmedLine[0] ?? '');
-            formatted += `${' '.repeat(indent)}${trimmedLine}\n`;
-
-            continue;
-        }
-
-        if (isEmptyLine) {
-            formatted += '\n';
-
-            continue;
-        }
-
-        const lineIndent = line.indexOf(trimmedLine[0] ?? '');
-
-        formatted += `${' '.repeat(indent + lineIndent - originalIndent)}${trimmedLine}\n`;
-    }
-
-    return formatted.trimEnd();
-}

package/templates/app/.eslintrc.js

@@ -1,3 +0,0 @@
-module.exports = {
-    extends: ['@noeldemartin/eslint-config-vue'],
-};

package/templates/app/prettier.config.js

@@ -1,5 +0,0 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-    plugins: [require('prettier-plugin-tailwindcss')],
-    printWidth: 120,
-};