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

Provided assets release flow (per-asset version tags)

Customers load provided files from jsDelivr using stable tag-based URLs:

<script src="https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.min.js"></script>

Consent bridge integration documentation is maintained in docs/eturnity-consent-bridge.md and published to:

https://cdn.jsdelivr.net/npm/@eturnity/eturnity_reusable_components@latest-consent-bridge/dist/eturnity-consent-bridge.md

Provided files and docs are configured in provided-assets.config.js. Script and doc entries can both define their own versionTag (for example latest-consent-bridge). Because customers keep these URLs unchanged, we update what they receive by moving those npm dist-tags to a published package version.

Build and publish behavior

• npm run build runs vite build (library), npm run build:provided-files (JS CDN bundles), and npm run copy:provided-docs (published docs).
• npm run build:provided-files builds files listed in provided-assets.config.js into dist/*.min.js.
• npm run copy:provided-docs copies docs listed in provided-assets.config.js into dist/*.md.
• npm run verify:provided-files checks expected provided files exist in dist/ and are non-empty.
• npm run verify:provided-docs checks expected provided docs exist in dist/ and are non-empty.
• prepack and prepublishOnly run both verification steps to reduce broken publish risk.

Standard release steps

1. Publish a new immutable npm version:

npm publish

2. Optional: promote provided-asset tag(s) so customer script/doc URLs point to that version.

Use this only if you want to update what customers receive from stable CDN tag URLs:

Script options (--dry-run, --version=…, --name=…, and combinations)

# Preview planned commands only (no npm dist-tag, no registry wait, no cache purge, no CDN verification).
npm run promote:provided-files-tag -- --dry-run

# Promote all configured promotable assets to package.json version.
npm run promote:provided-files-tag

# Promote all configured promotable assets to a specific published version.
npm run promote:provided-files-tag -- --version=9.16.0

# Promote one specific promotable asset by name (uses package.json version).
npm run promote:provided-files-tag -- --name=eturnity-consent-bridge

# Promote one specific promotable asset by name to a specific version.
npm run promote:provided-files-tag -- --name=eturnity-consent-bridge --version=9.16.0

When promotion is used, the script:

1. updates npm dist-tag(s) for selected promotable asset(s)
2. waits until npm registry serves updated dist-tag value(s)
3. purges jsDelivr cache for selected promotable asset(s)
4. verifies CDN serves promoted version bytes

Optional tuning via environment variables:

• PROMOTE_TAG_REGISTRY_RETRIES (default 24)
• PROMOTE_TAG_REGISTRY_INTERVAL_MS (default 5000)
• PROMOTE_TAG_VERIFY_RETRIES (default 12)
• PROMOTE_TAG_VERIFY_INTERVAL_MS (default 5000)

Optional rollback (re-point customer URL to older stable package)

If a promoted version is broken, you can optionally promote a previously published version:

npm run promote:provided-files-tag -- --version=<older-published-version>

# Roll back only one promotable asset tag.
npm run promote:provided-files-tag -- --name=eturnity-consent-bridge --version=<older-published-version>

Example:

npm run promote:provided-files-tag -- --version=9.15.2