feat(nuxt-commerce): initial dev for nuxt-commerce

starter/nuxt-commerce/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.vercel

starter/nuxt-commerce/README.md

@@ -0,0 +1,51 @@
+# nuxt-commerce-app
+
+This is a minimal app created by running `npx create-gits-app`. This project uses the following technologies for a great developer and user-experience:
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Nuxt 3](https://nuxt.com)
+- Nuxt 3
+- Tailwind CSS
+- GITS UI
+
+## How to get going?
+
+This is a straight-forward setup with minimal templating and scaffolding. The options you selected during the sidebase CLI setup are all here though. Good places to continue reading are:
+
+- [the First Steps documentation](https://gitsindonesia.github.io/ui-component/)
+
+Some tasks you should probably do in the beginning are:
+
+- [ ] replace this generic README with a more specific one
+- [ ] install the Vue Volar extension
+- [ ] enable [Volar takeover mode](https://nuxt.com/docs/getting-started/installation#prerequisites) to ensure a smooth editor setup
+
+### Setup
+
+Make sure to install the dependencies:
+
+```bash
+npm install
+```
+
+### Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+### Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```

starter/nuxt-commerce/app.config.ts

@@ -0,0 +1,7 @@
+export default defineAppConfig({
+  store: {
+    apiUrl: 'https://dummyjson.com',
+    currency: 'USD',
+    title: 'Nuxt Store',
+  },
+});

starter/nuxt-commerce/app.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const title = 'Nuxt + GITS UI Minimal Starter';
+
+useHead({
+  title,
+  htmlAttrs: {
+    lang: 'en',
+  },
+  meta: [
+    {
+      name: 'description',
+      key: 'description',
+      content: title,
+    },
+  ],
+});
+</script>
+
+<template>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

starter/nuxt-commerce/components/ProductCard.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+export interface Product {
+  id: string;
+  title: string;
+  price: number;
+  discountPercentage: number;
+  rating: number;
+  images: string[];
+}
+
+defineProps<{
+  product: Product;
+}>();
+</script>
+
+<template>
+  <VCard :title="product.title" :to="`/products/${product.id}`">
+    <template #image>
+      <img
+        :src="product.images[0]"
+        class="rounded-t-lg object-cover h-[200px] border-b"
+        :alt="product.title"
+      />
+    </template>
+    <div class="font-semibold flex items-center gap-2 text-sm">
+      <span class="line-through text-gray-600">
+        {{ toCurrency(product.price) }}
+      </span>
+      <span class="text-primary-500">
+        {{
+          toCurrency(
+            getDiscountedPrice(product.price, product.discountPercentage),
+          )
+        }}
+      </span>
+    </div>
+    <div class="mt-2 text-warning-500">{{ starRating(product.rating) }}</div>
+  </VCard>
+</template>

starter/nuxt-commerce/components/store/Header.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const appConfig = useAppConfig();
+const storeDrawer = useStoreDrawer();
+
+const menus = [
+  {
+    title: 'Home',
+    link: '/',
+  },
+  {
+    title: 'Products',
+    link: '/products',
+  },
+];
+</script>
+
+<template>
+  <VAppBar bordered>
+    <div
+      class="container mx-auto flex items-center gap-4 justify-between md:p-4"
+    >
+      <div class="flex items-center gap-1 -ml-3">
+        <VBtn
+          prefix-icon="ri:menu-line"
+          text
+          fab
+          @click="storeDrawer = !storeDrawer"
+        />
+        <NuxtLink class="font-semibold" to="/">
+          {{ appConfig.store.title }}
+        </NuxtLink>
+      </div>
+
+      <nav class="md:flex gap-4 items-center hidden">
+        <NuxtLink
+          exact-active-class="text-primary-500 font-semibold"
+          class="hover:text-primary-500"
+          v-for="menu in menus"
+          :key="menu.title"
+          :to="menu.link"
+        >
+          {{ menu.title }}
+        </NuxtLink>
+      </nav>
+
+      <div>
+        <VBtn prefix-icon="ri:search-line" text icon fab></VBtn>
+        <VBtn prefix-icon="ri:shopping-cart-line" text icon fab></VBtn>
+        <VBtn prefix-icon="ri:heart-line" text icon fab></VBtn>
+        <VBtn prefix-icon="ri:user-line" text icon fab></VBtn>
+      </div>
+    </div>
+  </VAppBar>
+
+  <VNavDrawer v-model="storeDrawer" fixed overlay class="z-20">
+    <VList>
+      <VListItem class="!font-semibold">{{ appConfig.store.title }}</VListItem>
+      <VListItemDivider />
+      <VListItem v-for="menu in menus" :key="menu.title" :to="menu.link">
+        {{ menu.title }}
+      </VListItem>
+    </VList>
+  </VNavDrawer>
+</template>

starter/nuxt-commerce/composables/store.ts

@@ -0,0 +1 @@
+export const useStoreDrawer = () => useState('store-drawer', () => false);

starter/nuxt-commerce/layouts/store.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <StoreHeader />
+    <div class="container mx-auto p-4 flex-1">
+      <slot />
+    </div>
+  </div>
+</template>

starter/nuxt-commerce/nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@gits-id/ui-nuxt', '@nuxtjs/tailwindcss'],
+  typescript: {
+    shim: false,
+  },
+});

starter/nuxt-commerce/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@gits-id/nuxt-minimal",
+  "description": "Lightweight Nuxt.js template with GITS UI",
+  "version": "0.1.0",
+  "keywords": [
+    "admin",
+    "dashboard",
+    "template",
+    "nuxt",
+    "nuxt.js",
+    "vue",
+    "vue.js",
+    "gits",
+    "gits-id",
+    "gits-ui"
+  ],
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@gits-id/ui-nuxt": "^0.16.1"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.3.0",
+    "nuxt": "^3.1.1",
+    "sass": "^1.58.0"
+  },
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "components/",
+    "pages/",
+    "app.vue",
+    "app.config.ts",
+    "nuxt.config.ts",
+    "tailwind.config.js"
+  ]
+}

starter/nuxt-commerce/pages/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'store',
+});
+
+useHead({
+  title: 'Home',
+  meta: [
+    {
+      key: 'description',
+      name: 'description',
+      content: 'Home page',
+    },
+  ],
+});
+
+const {data} = await useAsyncData(() => $api('/products'));
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"
+  >
+    <ProductCard
+      v-for="product in data.products"
+      :key="product.id"
+      :product="product"
+    />
+  </div>
+</template>

starter/nuxt-commerce/pages/products/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'store',
+});
+</script>
+
+<template>
+  <div class="text-center">
+    <h1 class="text-2xl font-semibold">Products</h1>
+    <p>Here you can find all the products</p>
+  </div>
+</template>

starter/nuxt-commerce/tailwind.config.js

@@ -0,0 +1,49 @@
+const colors = require('tailwindcss/colors');
+
+// default GITS Color
+const primary = {
+  DEFAULT: '#28A0F6',
+  50: '#D8EEFD',
+  100: '#C5E5FD',
+  200: '#9DD4FB',
+  300: '#76C3F9',
+  400: '#4FB1F8',
+  500: '#28A0F6',
+  600: '#0984DD',
+  700: '#0764A7',
+  800: '#054471',
+  900: '#02233B',
+};
+
+// default GITS Color
+const secondary = {
+  DEFAULT: '#FF8B49',
+  50: '#FFFFFF',
+  100: '#FFF3EC',
+  200: '#FFD9C3',
+  300: '#FFBF9B',
+  400: '#FFA572',
+  500: '#FF8B49',
+  600: '#FF6711',
+  700: '#D84E00',
+  800: '#A03A00',
+  900: '#682600',
+};
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'],
+  theme: {
+    extend: {
+      colors: {
+        primary,
+        secondary,
+        info: colors.sky,
+        success: colors.emerald,
+        warning: colors.yellow,
+        error: colors.rose,
+      },
+    },
+  },
+  presets: [require('@gits-id/tailwind-config/preset')],
+};

starter/nuxt-commerce/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}