@formsible/element

@formsible/element is a Vue.js component library designed to provide highly customizable elements for form-building applications. This library leverages the best UI practices, optimized performance, and offers a range of form-related components.

Note: This library is used in the form-building application Formsible. You can use it in any Vue or Nuxt applications. The project is sponsored by WellCare.

Features

• 📦 Lightweight and modular form-building components
• 🎨 Customizable themes with Tailwind CSS
• 🖼️ Integration with Codemirror, Google Maps, and PayPal Checkout
• 💻 Works seamlessly with Vue 3
• 🔌 Extensible and built with flexibility in mind

Table of Contents

• Installation
• Usage
• Components
• Development
• Contributing
• License

Installation

To install @formsible/element via pnpm:

pnpm add @formsible/element

or using npm:

npm install @formsible/element

or with yarn:

yarn add @formsible/element

Usage

Import the components you need in your Vue.js app:

import { createApp } from 'vue';
import { ElementComponent } from '@formsible/element';
import '@formsible/element/dist/style.css'; // Import the library's styles

const app = createApp(App);
app.component('ElementComponent', ElementComponent);
app.mount('#app');

Now you can use the component in your template:

<template>
  <ElementComponent :prop="value" />
</template>

Example with Tailwind CSS

Make sure to install and configure Tailwind CSS if you're using the included styles:

pnpm add tailwindcss postcss autoprefixer
npx tailwindcss init

Then, add this to your tailwind.config.js:

module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@formsible/element/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};

Components

@formsible/element includes a variety of components that can be used to enhance your form-building application. Here are a few examples:

• ElementComponent: A core form element component.
• GoogleMap: Google Maps integration.
• PayPalCheckout: PayPal Checkout integration for payment forms.
• SignaturePad: A signature pad for capturing signatures.

You can find a detailed list of components in the documentation (link to docs or components folder).

Development

Setup

To start developing locally:

1. Clone the repository:

   git clone https://github.com/formsible/element.git
   cd element

2. Install dependencies using pnpm:

   pnpm install

3. Start the development server:

   pnpm run dev

4. Build the library for production:

   pnpm run build

5. Run tests:

   pnpm run test

Publishing to NPM

The library is automatically published to NPM when pull requests are merged into the main branch. The CI/CD pipeline uses GitHub Actions to ensure all tests pass before publishing.

To publish manually:

1. Build the project:

   pnpm run build

2. Publish to NPM:

   pnpm publish --access public

Contributing

We welcome contributions! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch: git checkout -b feature-branch-name
3. Make your changes.
4. Push the changes to your forked repository: git push origin feature-branch-name
5. Create a pull request.

Guidelines

• Ensure the code passes the linting and tests before submitting a pull request.
• Follow the coding standards defined by ESLint and Prettier.
• Add relevant tests for any new features or changes.

Running Lint and Tests

To lint the code:

pnpm run lint

To run tests:

pnpm run test

License

This project is licensed under the MIT License - see the LICENSE file for details.