feat: add foundation/colors stories

.storybook/manager.js

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import theme from './storybookTheme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.js

@@ -22,6 +22,7 @@ export const parameters = {
       method: 'alphabetical',
       order: [
         'Getting Started',
+        'Foundation',
         'Components',
         'Forms',
         'Layouts',

.storybook/storybookTheme.js

@@ -0,0 +1,9 @@
+import {create} from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'GITS UI',
+  brandUrl: 'https://gits-ui.web.app',
+  brandImage: 'https://gits.id/wp-content/uploads/2022/06/Logo-Main-1.png',
+  brandTarget: '_self',
+});

stories/foundation/Colors.stories.ts

@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import ColorsComponent from './Colors.vue';
+
+export default {
+  title: 'Foundation/Colors',
+} as Meta;
+
+export const Colors: Story = () => ({
+  components: {ColorsComponent},
+  template: `<ColorsComponent />`,
+});

stories/foundation/Colors.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {defaultColors, primary, secondary} from '@gits-id/theme/defaultTheme';
+import colors from 'tailwindcss/colors';
+
+colors.primary = primary;
+colors.secondary = secondary;
+colors.info = colors.sky;
+colors.warning = colors.yellow;
+colors.success = colors.emerald;
+colors.error = colors.rose;
+</script>
+
+<template>
+  <h3 class="text-lg font-semibold mb-3">Brand Colors</h3>
+  <div class="grid gap-4 grid-cols-2 sm:grid-cols-6">
+    <div v-for="color in defaultColors" :key="color">
+      <div class="rounded px-3 py-2" :class="`bg-${color}-500`">
+        {{ color }}
+      </div>
+      <p class="font-mono text-sm mt-1">bg-{{ color }}-500</p>
+    </div>
+  </div>
+  <h3 class="text-lg font-semibold mb-3 mt-10">Tailwind Colors</h3>
+  <div class="space-y-4 divide divide-y">
+    <template v-for="(color, name) in colors" :key="name">
+      <div v-if="typeof color !== 'string'" class="flex gap-4 py-3">
+        <h4 class="w-2/12 font-semibold shrink-0">
+          {{ name }}
+        </h4>
+        <div class="rounded px-3 py-2 w-10/12 grid grid-cols-5 gap-4">
+          <div v-for="(c, shade) in color" :key="c">
+            <div :style="{backgroundColor: c}" class="h-10 rounded"></div>
+            <div class="text-sm mt-1">
+              {{ shade }} <span class="text-gray-500">{{ c }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

tailwind.config.js

@@ -1,4 +1,7 @@
 module.exports = {
-  content: ['./packages/*/src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: [
+    './packages/*/src/**/*.{vue,js,ts,jsx,tsx}',
+    './stories/*/**/*.{vue,js,ts,jsx,tsx,mdx}',
+  ],
   presets: [require('./packages/tailwind-config/preset')],
 };