@rotki/ui-library 0.1.1 → 0.2.0

package/README.md

@@ -1,91 +1,31 @@
 # @rotki/ui-library
 
-A vue component library and design system for rotki
+A Vue component library and design system for rotki
 
-### Installation
+## Getting started
 
-To install the dependencies you need to run on the root of the repository
+### Installing the library
 
-```
-pnpm install --frozen-lockfile
-```
+You can start using the library after installing it from npm along with the roboto font: 
 
-### 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 >=3.4.3.
-```
-pnpm run build:prod
+```bash
+pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto
 ```
 
-If you want to build for specific version, you can run:
-```
-pnpm run build
-```
+### Importing the stylesheets
 
-### Lint check
-```
-pnpm run lint
-```
-
-### Lints and fixes files
-```
-pnpm run lint:fix
-```
-
-### Type check
-```
-pnpm run typecheck
-```
-
-# Storybook
-In order to run the storybook, you can run:
-
-```
-pnpm run storybook
-```
-
-# Testing: Unit
-In order to test the components, you can run:
-
-```
-pnpm run test
-```
-
-# Testing: end-to-end
-In order to test the components in use in a vue 3 project, you can run:
-
-```
-pnpm run test:e2e
-```
-
-coverage results can be generated and previewed with:
-
-```
-pnpm run coverage
-pnpm run coverage:preview
-```
-
-
-# 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:
-
-```json
-{
-  "@rotki/ui-library": "file:...path_of_this_directory"
-}
-```
-
-When the dependency installed on the main project, it will run the `postinstall` script.
-
-Don't forget to import the `style.css` file from `@rotki/ui-library` in the project root (e.g main.ts)
+Don't forget to import the `style.css` file from `@rotki/ui-library` along with the latin roboto font,
+in the project root (e.g main.ts)
 
 ```typescript
 import '@rotki/ui-library/dist/style.css';
+import '@fontsource/roboto/latin.css';
 ```
 
-Also, import the library plugin use:
+### Using the plugin
+
+To use the library you must install the library plugin:
 
-Vue 3
 ```typescript
 import { RuiPlugin } from "@rotki/ui-library";
 
@@ -94,22 +34,28 @@ import { RuiPlugin } from "@rotki/ui-library";
 app.use(RuiPlugin, options);
 ```
 
-And then you can use the component 
+### Using the components
+
+Then you can you the library components e.g.:
+
 ```vue
 <script setup lang="ts">
 import { RuiButton } from '@rotki/ui-library';
 </script>
 
 <template>
-  <VContainer>
+  <div>
     <RuiButton outlined>This is button</RuiButton>
-  </VContainer>
+  </div>
 </template>
 ```
 
-after complete setup, we can then use the theme manager as:
+### Managing the theme
+
+To dynamically manage the theme you can use the theme manager
 
 ```typescript
+import { useRotkiTheme } from '@rotki/ui-library';
 const { toggleThemeMode, setThemeConfig, switchThemeScheme, state, store } = useRotkiTheme();
 
 // to change the theme (pass colors as described by `ThemeConfig`) anytime:
@@ -122,18 +68,13 @@ toggleThemeMode();
 switchThemeScheme(ThemeMode.dark);
 ```
 
-
-# Use icons
-We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `postinstall`. Run this in case the icons aren't generated properly)
-```
-pnpm run generate:icons
-```
+### Using the icons
 
 You need to specify which icons you want to enable, when installing the RuiPlugin.
 ```typescript
 import { Ri4kFill, Ri4kLine, RuiPlugin } from '@rotki/ui-library';
 
-Vue.use(RuiPlugin, {
+app.use(RuiPlugin, {
   icons: [Ri4kFill, Ri4kLine]
 });
 ```
@@ -144,14 +85,14 @@ import { RuiIcon } from '@rotki/ui-library';
 </script>
 
 <template>
-  <VContainer>
+  <div>
     <RuiIcon name="4k-fill" />
     <RuiIcon name="4k-line" />
-  </VContainer>
+  </div>
 </template>
 ```
 
-# Use @rotki/ui-library theme
+### Use @rotki/ui-library tailwindcss theme
 You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow.
 
 ```javascript
@@ -163,6 +104,87 @@ module.exports = {
 }
 ```
 
+## Development
+
+### Installation
+
+To install the dependencies you need to run on the root of the repository
+
+```
+pnpm install --frozen-lockfile
+```
+
+### 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 >=3.4.3.
+```
+pnpm run build:prod
+```
+
+If you want to build for specific version, you can run:
+```
+pnpm run build
+```
+
+### Lint check
+```
+pnpm run lint
+```
+
+### Lints and fixes files
+```
+pnpm run lint:fix
+```
+
+### Type check
+```
+pnpm run typecheck
+```
+
+### Storybook
+In order to run the storybook, you can run:
+
+```
+pnpm run storybook
+```
+
+### Testing: Unit
+In order to test the components, you can run:
+
+```
+pnpm run test
+```
+
+### Testing: end-to-end
+In order to test the components in use in a vue 3 project, you can run:
+
+```
+pnpm run test:e2e
+```
+
+coverage results can be generated and previewed with:
+
+```
+pnpm run coverage
+pnpm run coverage:preview
+```
+
+### Locally testing the library
+After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies:
+
+```json
+{
+  "@rotki/ui-library": "file:...path_of_this_directory"
+}
+```
+
+When the dependency installed on the main project, it will run the `prepare` script.
+
+### Generating the library icons
+We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly)
+```
+pnpm run generate:icons
+```
 
 ## License
 

package/dist/components/index.d.ts

@@ -0,0 +1,16 @@
+import { default as RuiAlert } from '../components/alerts/Alert.vue';
+import { default as RuiAutoComplete } from '../components/forms/auto-complete/AutoComplete.vue';
+import { default as RuiButton } from '../components/buttons/button/Button.vue';
+import { default as RuiButtonGroup } from '../components/buttons/button-group/ButtonGroup.vue';
+import { default as RuiIcon } from '../components/icons/Icon.vue';
+import { default as RuiCheckbox } from '../components/forms/checkbox/Checkbox.vue';
+import { default as RuiChip } from '../components/chips/Chip.vue';
+import { default as RuiStepper } from '../components/steppers/Stepper.vue';
+import { default as RuiTextField } from '../components/forms/text-field/TextField.vue';
+import { default as RuiFooterStepper } from '../components/steppers/FooterStepper.vue';
+import { default as RuiProgress } from '../components/progress/Progress.vue';
+import { default as RuiRadioGroup } from '../components/forms/radio-button/radio-group/RadioGroup.vue';
+import { default as RuiRadio } from '../components/forms/radio-button/radio/Radio.vue';
+import { default as RuiRevealableTextField } from '../components/forms/revealable-text-field/RevealableTextField.vue';
+import { default as RuiLogo } from '../components/logos/Logo.vue';
+export { RuiAlert, RuiAutoComplete, RuiButton, RuiButtonGroup, RuiCheckbox, RuiChip, RuiFooterStepper, RuiIcon, RuiLogo, RuiProgress, RuiRadio, RuiRadioGroup, RuiRevealableTextField, RuiStepper, RuiTextField, };

package/dist/components/steppers/FooterStepper.vue.d.ts

@@ -2,6 +2,7 @@ export interface Props {
     pages: number;
     modelValue?: number;
     variant?: 'numeric' | 'bullet' | 'progress' | 'pill';
+    arrowButtons?: boolean;
 }
 declare const _default: import("vue").DefineComponent<{
     variant: {
@@ -16,6 +17,10 @@ declare const _default: import("vue").DefineComponent<{
         type: globalThis.PropType<number>;
         required: true;
     };
+    arrowButtons: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (modelValue: number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -31,10 +36,15 @@ declare const _default: import("vue").DefineComponent<{
         type: globalThis.PropType<number>;
         required: true;
     };
+    arrowButtons: {
+        type: globalThis.PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((modelValue: number) => any) | undefined;
 }, {
     variant: "progress" | "numeric" | "bullet" | "pill";
     modelValue: number;
+    arrowButtons: boolean;
 }, {}>;
 export default _default;

package/dist/components/steppers/Stepper.vue.d.ts

@@ -1,5 +1,6 @@
 import { StepperOrientation, StepperState, type StepperStep } from '../../types/stepper';
 export interface Props {
+    step?: number;
     steps: StepperStep[];
     iconTop?: boolean;
     custom?: boolean;
@@ -12,6 +13,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<StepperOrientation>;
         default: "horizontal";
     };
+    step: {
+        type: globalThis.PropType<number>;
+        default: number;
+    };
     steps: {
         type: globalThis.PropType<StepperStep[]>;
         required: true;
@@ -37,6 +42,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: globalThis.PropType<StepperOrientation>;
         default: "horizontal";
     };
+    step: {
+        type: globalThis.PropType<number>;
+        default: number;
+    };
     steps: {
         type: globalThis.PropType<StepperStep[]>;
         required: true;
@@ -59,13 +68,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>>, {
     orientation: StepperOrientation;
+    step: number;
     iconTop: boolean;
     custom: boolean;
     titleClass: string;
     subtitleClass: string;
 }, {}>, {
     icon?(_: {
-        state: StepperState;
+        state: StepperState | undefined;
         index: number;
     }): any;
 }>;

package/dist/components/steppers/StepperCustomIcon.vue.d.ts

@@ -2,7 +2,7 @@ import { StepperState } from '../../types/stepper';
 declare const _default: import("vue").DefineComponent<{
     state: {
         type: globalThis.PropType<StepperState>;
-        required: true;
+        default: "inactive";
     };
     index: {
         type: globalThis.PropType<number>;
@@ -11,11 +11,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     state: {
         type: globalThis.PropType<StepperState>;
-        required: true;
+        default: "inactive";
     };
     index: {
         type: globalThis.PropType<number>;
         required: true;
     };
-}>>, {}, {}>;
+}>>, {
+    state: StepperState;
+}, {}>;
 export default _default;

package/dist/components/steppers/StepperIcon.vue.d.ts

@@ -2,7 +2,7 @@ import { StepperState } from '../../types/stepper';
 declare const _default: import("vue").DefineComponent<{
     state: {
         type: globalThis.PropType<StepperState>;
-        required: true;
+        default: "inactive";
     };
     index: {
         type: globalThis.PropType<number>;
@@ -11,11 +11,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     state: {
         type: globalThis.PropType<StepperState>;
-        required: true;
+        default: "inactive";
     };
     index: {
         type: globalThis.PropType<number>;
         required: true;
     };
-}>>, {}, {}>;
+}>>, {
+    state: StepperState;
+}, {}>;
 export default _default;

package/dist/components.es.js

@@ -0,0 +1,21 @@
+import { A as R, a as s, R as t, B as r, C as p, b as l, F as d, c as m, _ as x, d as C, e as F, f as b, g as c, h as g, i as h } from "./index-74133324.mjs";
+import "vue";
+import "./index-eb935704.mjs";
+import "./colors-01d79c7b.mjs";
+export {
+  R as RuiAlert,
+  s as RuiAutoComplete,
+  t as RuiButton,
+  r as RuiButtonGroup,
+  p as RuiCheckbox,
+  l as RuiChip,
+  d as RuiFooterStepper,
+  m as RuiIcon,
+  x as RuiLogo,
+  C as RuiProgress,
+  F as RuiRadio,
+  b as RuiRadioGroup,
+  c as RuiRevealableTextField,
+  g as RuiStepper,
+  h as RuiTextField
+};

package/dist/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useIcons } from '../composables/icons';
+export { useRotkiTheme } from '../composables/theme';

package/dist/composables.es.js

@@ -0,0 +1,7 @@
+import { u as r, a as t } from "./index-eb935704.mjs";
+import "vue";
+import "./colors-01d79c7b.mjs";
+export {
+  r as useIcons,
+  t as useRotkiTheme
+};