📦 Shared Stories Package

Welcome to the Shared Stories package! This package provides a collection of reusable assets, components, and stories that can be easily integrated into your project. It includes multiple directories such as atmos, public, sass, and stories to help streamline your development workflow.

🚀 Features

• 🔧 Reusable Components:
  Vue components located in the atmos folder for easy integration into your projects.

• 🖼️ Shared Assets:
  Includes shared public assets and styles located in the public and sass folders.

• 📖 Storybook Stories:
  Visualize and test components using pre-built Storybook stories in the stories folder.

• ⚙️ CLI Tool:
  Comes with a command-line tool that copies these directories into your project’s working directory under a folder named shared-stories.

📥 Installation

Install the package via npm:

npm install shared-stories

🛠️ Initialize the Package

Run the following command to set up the shared stories in your project:

npx shared-stories

This command will copy essential folders (atmos, public, sass, stories) into your project.

💻 Integrating Shared Components into a Vue Project

To automatically load and register the shared Vue components in your application, update your component loader (e.g., baseComponent.js) as follows:

const modules = import.meta.glob('@/shared-stories/atoms/*/*.vue', { eager: true });

export default function loadComponents(app) {
  for (const path in modules) {
    const componentName = path.split('/').at(-1).split('.')[0];
    app.component(componentName, modules[path].default);
  }
}

Then, in your main.js file, import and invoke the component loader before mounting the app:

import { createApp } from 'vue';
import App from './App.vue';
import loadComponents from './baseComponent';

const app = createApp(App);

loadComponents(app);

app.mount('#app');