feat: init dependencies

.gitignore

@@ -147,3 +147,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
+.eslintrc-auto-import.json
+auto-imports.d.ts
+
+.DS_Store

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/vue-vite';
+const config: StorybookConfig = {
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ '@storybook/addon-styling',
+ ],
+ framework: {
+ name: '@storybook/vue-vite',
+ options: {}
+ },
+ docs: {
+ autodocs: 'tag'
+ }
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+ window.global = window;
+</script>

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '../src/style.css'
+import type { Preview } from '@storybook/vue';
+
+const preview: Preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/
+ }
+ }
+ }
+};
+
+export default preview;

README.md

@@ -2,6 +2,78 @@
 
 A vue component library and design system for rotki
 
+### @rotki/ui-library
+
+To install the dependencies you need to run on the root of the repository
+
+```
+pnpm install
+```
+
+### Compiles and minifies for production
+The following command when executed from the project root will build the `@rotki/ui-library` bundle.
+This command will create the bundle for both Vue version 2.7 and 3.
+```
+pnpm run build:prod
+```
+
+If you want to build for specific version, you can run:
+```
+pnpm run build:v2
+pnpm run build:v3
+```
+
+by default if you run this command, it will build the package for version 2, the version that installed by default in this package
+```
+pnpm run build
+```
+
+### Lint check
+```
+pnpm run lint
+```
+
+### Lints and fixes files
+```
+pnpm run lint:fix
+```
+
+# Storybook
+In order to run the storybook, you can run:
+
+```
+pnpm run storybook
+```
+
+# How to test the usage locally.
+After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies:
+
+```
+"@rotki/ui-library": "file:...path_of_this_directory",
+```
+
+When the dependency installed on the main project, it will run the `postinstall` script to determine which dist version will be used, based on the Vue version on the main project.
+
+Don't forget to import the `style.css` file from `@rotki/ui-library`
+
+```
+import '@rotki/ui-library/dist/style.css';
+```
+
+And then you can use the component 
+```
+<script setup lang="ts">
+import { Button as RotkiButton } from '@rotki/ui-library';
+</script>
+
+<template>
+ <v-container>
+ <rotki-button label="This is button" outlined />
+ </v-container>
+</template>
+```
+
 ## License
 
-[AGPL-3.0](./LICENSE) License &copy; 2023- [Rotki Solutions GmbH](https://github.com/rotki)
+[AGPL-3.0](./LICENSE) License &copy; 2023- [Rotki Solutions GmbH](https://github.com/rotki)
+

package.json

@@ -11,14 +11,71 @@
  ],
  "license": "AGPL-3.0",
  "author": "Rotki Solutions GmbH <info@rotki.com>",
- "main": "index.js",
+ "main": "dist/index.umd.js",
+ "module": "dist/index.es.js",
+ "types": "dist/types/index.d.ts",
  "scripts": {
- "lint": "eslint .",
- "lint:fix": "eslint . --fix"
+ "postinstall": "pnpm dist:select",
+ "dist:select": "node scripts/dist-select.js",
+ "build:prod": "pnpm build:prod:v2 && pnpm build:prod:v3 && pnpm dist:select && pnpm build:types && pnpm build:tailwind",
+ "build:prod:v2": "pnpm switch:v2 && vite build",
+ "build:prod:v3": "pnpm switch:v3 && vite build",
+ "build:v2": "pnpm build:prod:v2 && pnpm run dist:select --force-version=2",
+ "build:v3": "pnpm build:prod:v3 && pnpm run dist:select --force-version=3",
+ "build": "pnpm build:v2",
+ "build-storybook": "storybook build",
+ "build:tailwind": "tailwindcss -o dist/style.css --minify",
+ "build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/types",
+ "dev": "vite",
+ "lint": "eslint --cache . && pnpm run -r lint:style",
+ "lint:fix": "eslint --cache . --fix",
+ "storybook": "pnpm switch:v2 && storybook dev -p 6006",
+ "switch:v2": "vue-demi-switch 2.7",
+ "switch:v3": "vue-demi-switch 3",
+ "typecheck": "vue-tsc --noEmit"
+ },
+ "peerDependencies": {
+ "vue": ">=2.7.14"
+ },
+ "dependencies": {
+ "@vueuse/core": "9.13.0",
+ "@vueuse/shared": "9.13.0",
+ "vue-demi": "0.13.11"
  },
  "devDependencies": {
+ "@babel/core": "7.21.3",
+ "@babel/types": "7.21.3",
  "@rotki/eslint-config": "1.0.3",
+ "@storybook/addon-essentials": "7.0.0-rc.8",
+ "@storybook/addon-interactions": "7.0.0-rc.8",
+ "@storybook/addon-links": "7.0.0-rc.8",
+ "@storybook/addon-styling": "next",
+ "@storybook/blocks": "7.0.0-rc.8",
+ "@storybook/testing-library": "0.0.14-next.1",
+ "@storybook/vue": "7.0.0-rc.8",
+ "@storybook/vue-vite": "7.0.0-rc.8",
+ "@types/node": "16.18.12",
+ "@vitejs/plugin-vue": "4.1.0",
+ "@vitejs/plugin-vue2": "2.2.0",
+ "@vue/tsconfig": "0.1.3",
+ "argparse": "2.0.1",
+ "autoprefixer": "10.4.14",
+ "babel-loader": "8.3.0",
+ "css-loader": "6.7.3",
  "eslint": "8.36.0",
- "typescript": "5.0.2"
+ "postcss": "8.4.21",
+ "react": "18.2.0",
+ "react-dom": "18.2.0",
+ "sass": "1.60.0",
+ "storybook": "7.0.0-rc.8",
+ "tailwindcss": "3.2.7",
+ "typescript": "5.0.2",
+ "unplugin-auto-import": "0.14.4",
+ "vite": "4.1.4",
+ "vue": "2.7.14",
+ "vue-loader": "15.10.1",
+ "vue-tsc": "1.2.0",
+ "vue3": "npm:vue@3.2.47",
+ "webpack": "5.0.0"
  }
 }