amelia-booking-ui

Design System for Amelia WordPress Booking Plugin

This project focuses on creating a design system for the Amelia WordPress booking plugin using Vue.js. Our goal is to enhance the user interface and experience consistency throughout the plugin.

Prerequisites

Before contributing to this project, please ensure you have the following tools installed:

• Node.js
• NVM (Node Version Manager)
• pnpm (Performant npm)

Node Version Management with NVM

To maintain consistency across different development environments, we use NVM (Node Version Manager) for managing Node.js versions.

Installing NVM

If NVM is not already installed on your machine, you can follow the installation instructions on the NVM GitHub page.

Using NVM

We recommend using the Latest LTS (Long-Term Support) version of Node.js for this project. To install and use the latest LTS version, execute the following commands:

nvm install --lts
nvm use --lts

Getting Started

To set up your development environment and start contributing to the design system, follow these steps:

1. Clone the project repository and navigate to the project directory:

   git clone [e-mail]:tmsplugins/amelia-ui.git
   cd amelia-ui

2. Install the project dependencies using pnpm:

   npm install

Linting and Formatting with ESLint and Prettier

To ensure code quality and consistency, we use ESLint for linting and Prettier for formatting. Here are the commands to run these tools:

Lint with ESLint

To identify and report on patterns found in ECMAScript/JavaScript code, we use ESLint. It helps in finding problematic patterns or code that doesn't adhere to certain style guidelines.

To run ESLint, use the following command:

npm run lint

This command will check your code for any linting errors based on the project's ESLint configuration.

Format with Prettier

Prettier is an opinionated code formatter that supports many languages and integrates with most editors. It removes all original styling and ensures that all outputted code conforms to a consistent style.

To format your code using Prettier, use the following command:

npm run format

This command will automatically format your code files according to the project's Prettier configuration, ensuring consistency across your codebase.

Build Instructions

Compile and Hot-Reload for Development

When working on the project, you might want to see your changes reflected immediately. For this purpose, you can use the following command to compile your project and set up hot-reloading:

npm run dev

Compile and Minify for Production

To compile and minify your project for production use, execute the following command:

npm run build

This will generate a dist directory with the compiled assets, ready for production deployment.

Adding a New Component

Follow these instructions to add a new component to the project. The new component should be placed in the src/components directory, and its name should start with Am.

Step 1: Create the Component

1. Navigate to the src/components directory in your project.
2. Create a new file for your component. The filename should start with Am and follow the PascalCase convention. For example, AmButtonAction.vue for a button component.
3. Inside the new file, define your Vue component. Here's a basic template you can start with:

<template>
  <div>
    <!-- Your component HTML goes here -->
  </div>
</template>

<script setup>
// Component logic using Composition API goes here
</script>

<style scoped lang="scss">
/* Your component SCSS goes here */
</style>

Step 2: Export the Component

To make the component available for import, you need to export it from the src/components/index.ts file.

1. Open src/index.ts file.
2. Add an export statement for your new component.

Step 3: Using the Component

After the component is exported in the index.ts file, you can import and use it in other parts of your application like this:

import { AmButtonAction } from '@/components'

Now you're ready to use AmButtonAction in your application.

Remember to follow these steps each time you add a new component to ensure consistency and maintainability in your project.

Deployment to NPM Instructions

This document outlines the steps needed to deploy your package to the npm registry. Ensure you follow each step carefully to successfully publish your package.

Step 1: Update the Version in package.json

Before deploying, you need to update the version of your package in package.json. This version number should adhere to semantic versioning (semver) standards. Update the version field to reflect the new version of your package.

Example:

"version": "1.0.1"

Step 2: Build Your Package

Run the build command to generate the latest distribution of your package. This step is crucial to ensure that the latest code changes are compiled and ready for publication.

pnpm run build

Step 3: Log In to npm

Before publishing, you need to be logged in to npm. Use the following command to log in. If you're already logged in, you can skip this step.

npm login

Follow the prompts to enter your npm account credentials.

Step 4: Publish Your Package

Once you're logged in and have your package ready, use the following command to publish it to npm:

npm publish

Adding a New Icon

Follow these instructions to add a new icon to the project. The new icon should be placed in the src/icons/{type} directory.

Step 1: Placing the Icon

Depending on the style of the icon, place it in the appropriate subdirectory:

• Fill Icons → src/icons/{type}/fill
• Line Icons → src/icons/{type}/line
• Outline Icons → src/icons/{type}/outline

Step 2: Modify the SVG File

Before adding the icon, ensure the SVG file follows these formatting rules:

✅ For Fill Icons (src/icons/{type}/fill)

• If any element has fill="color", remove the color value and set it to an empty string (fill="").
• Do not add any additional class.

✅ For Line and Outline Icons (src/icons/{type}/line and src/icons/{type}/outline)

• If any element has fill="color", remove the color value and set it to an empty string (fill="").
• Add the class fill-path to the element.
• If the <svg> file has stroke="color", remove the color value and set it to an empty string (stroke="").
• Add the class stroke-path to the corresponding element.

Step 3: Importing the Icon in iconImports.js

After adding the new icon, update the iconImports.js file to include it.

• Ensure that the correct path is used (fill, line, or outline).

Step 4: Testing the New Icon

After following all the above steps, make sure everything works as expected by adding the following code in App.vue:

<AmIcon name="plug" color="blue" />
<AmIcon name="plug" color="blue" type="line" />
<AmIcon name="plug" color="blue" type="outline" />

• If the icons appear correctly with the assigned styles, then the process was successful.