eturnity_reusable_components

Installation

npm install @eturnity/eturnity_reusable_components

Usage

Setting up the theme

The library now includes its own theme. You need to wrap your application with the ThemeProvider component from this library.

Recommended approach - Using the exported theme:

<!-- App.vue -->
<template>
  <ThemeProvider :theme="eturnityTheme">
    <RouterView />
    <!-- Your app content -->
  </ThemeProvider>
</template>

<script>
  import {
    ThemeProvider,
    theme as eturnityTheme,
  } from '@eturnity/eturnity_reusable_components'

  export default {
    components: { ThemeProvider },
    setup() {
      return {
        eturnityTheme,
      }
    },
  }
</script>

Alternative - Using the plugin (for non-styled-component scenarios):

If you also need the theme accessible via Vue's provide/inject:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import EturnityComponentsPlugin from '@eturnity/eturnity_reusable_components'

const app = createApp(App)
app.use(EturnityComponentsPlugin)
app.mount('#app')

Using individual components

You can still import and use individual components directly:

import MainButton from '@eturnity/eturnity_reusable_components/src/components/buttons/mainButton'
import InputText from '@eturnity/eturnity_reusable_components/src/components/inputs/inputText'

Overriding the theme (optional)

If you need to customize or override the theme, you can pass your own theme when installing the plugin:

import EturnityComponentsPlugin, {
  theme as defaultTheme,
} from '@eturnity/eturnity_reusable_components'

const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: '#YOUR_COLOR',
  },
}

app.use(EturnityComponentsPlugin, { theme: customTheme })

Direct access to theme

You can also import and use the theme directly:

import { theme } from '@eturnity/eturnity_reusable_components'
// or
import theme from '@eturnity/eturnity_reusable_components/theme'

To run locally

npm run dev

To use storybook

npm run storybook

To publish a new version

Follow correct semantic versioning
https://docs.npmjs.com/about-semantic-versioning


npm publish