chore: wip list-group component

packages/list-group/README.md

@@ -0,0 +1,45 @@
+# GITS Alert Component
+
+> Alert Component
+
+## Installation
+
+npm
+
+```
+npm i @gits-id/alert
+```
+
+yarn
+
+```
+yarn add @gits-id/alert
+```
+
+pnpm
+
+```
+pnpm i @gits-id/alert
+```
+
+## Usage
+
+Import `Alert` to your component:
+
+```vue
+<script setup lang="ts">
+import Alert from '@gits-id/alert';
+</script>
+
+<template>
+  <Alert color="primary">Lorem ipsum</Alert>
+</template>
+```
+
+## Documentation
+
+View `Alert` documentation [here](https://gits-ui.web.app/?path=/story/components-alert--default).
+
+## License
+
+MIT

packages/list-group/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@gits-id/list-group",
+  "version": "0.6.0",
+  "description": "GITS List Group Component",
+  "scripts": {
+    "build": "vue-tsc --emitDeclarationOnly && vite build && mv dist/src dist/types",
+    "prepublishOnly": "npm run build",
+    "test": "vitest"
+  },
+  "keywords": [
+    "gits",
+    "ui-component",
+    "ui",
+    "list",
+    "list-group"
+  ],
+  "author": "PT GITS Indonesia",
+  "license": "ISC",
+  "dependencies": {
+    "vue": "^3.2.33",
+    "@iconify/vue": "^3.2.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.2",
+    "c8": "^7.11.3",
+    "postcss": "^8.4.8",
+    "tailwindcss": "^3.0.23",
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6",
+    "vitest": "^0.12.4"
+  },
+  "main": "dist/list-group.umd.js",
+  "unpkg": "dist/list-group.iife.js",
+  "jsdelivr": "dist/list-group.iife.js",
+  "module": "./dist/list-group.es.js",
+  "types": "./dist/types/index.d.ts"
+}

packages/list-group/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/list-group/src/ListGroup.spec.ts

@@ -0,0 +1,20 @@
+import {mount} from '@vue/test-utils';
+import {describe, expect, test} from 'vitest';
+import VAlert from './VAlert.vue';
+
+const ALERT_TEXT = 'Alert text';
+
+describe('VAlert', () => {
+  test('mount component', () => {
+    expect(VAlert).toBeTruthy();
+
+    const wrapper = mount(VAlert, {
+      props: {},
+      slots: {
+        default: ALERT_TEXT,
+      },
+    });
+
+    expect(wrapper.text()).toContain(ALERT_TEXT);
+  });
+});

packages/list-group/src/ListGroup.stories.ts

@@ -0,0 +1,34 @@
+import {Meta, Story} from '@storybook/vue3';
+import ListGroup from './ListGroup.vue';
+import ListItem from './ListItem.vue';
+
+export default {
+  title: 'Components/ListGroup',
+  component: ListGroup,
+  argTypes: {},
+  args: {},
+} as Meta;
+
+const Template: Story = (args) => ({
+  components: {
+    ListItem,
+  },
+  setup() {
+    return {args};
+  },
+  template: `
+    <div class="space-y-2">
+      <ListItem v-for="i in 5" :key="i">Item {{ i }}</ListItem>
+    </div>
+`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = {
+  docs: {
+    source: {
+      code: `<ListItem>Item text</ListItem>`,
+    },
+  },
+};

packages/list-group/src/ListGroup.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <div></div>
+</template>

packages/list-group/src/ListItem.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+//
+</script>
+
+<template>
+  <div class="flex gap-4">
+    <slot name="prepend"></slot>
+    <slot />
+    <slot name="append"></slot>
+  </div>
+</template>

packages/list-group/src/index.ts

@@ -0,0 +1,4 @@
+import VAlert from './ListGroup.vue';
+
+export {VAlert};
+export default VAlert;

packages/list-group/src/vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

packages/list-group/tailwind.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  content: [
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+  ],
+  presets: [require('@gits-id/tailwind-config/preset')],
+};

packages/list-group/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "declaration": true,
+    "sourceMap": false,
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "rootDir": ".",
+    "skipLibCheck": true,
+    "types": ["vite/client"],
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve"
+  },
+  "include": ["src/vue.d.ts", "*.vue", "src"],
+  "exclude": ["**/*.stories.ts", "**/*.spec.ts", "**/*.test.ts"]
+}

packages/list-group/vite.config.js

@@ -0,0 +1,36 @@
+import {defineConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import {resolve} from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+  ],
+  esbuild: {
+    exclude: ['./src/**/**.stories.ts'],
+  },
+  build: {
+    target: 'esnext',
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'VListGroup',
+      formats: ['es', 'cjs', 'iife', 'umd'],
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue'
+        }
+      },
+      resolve: {
+        dedupe: "vue"
+      },
+    },
+  },
+});