0.0.297 • Published 7 months ago

amelia-booking-ui v0.0.297

Weekly downloads
-
License
-
Repository
bitbucket
Last release
7 months ago

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 git@bitbucket.org: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 Iconssrc/icons/{type}/fill
  • Line Iconssrc/icons/{type}/line
  • Outline Iconssrc/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.
0.0.296

7 months ago

0.0.295

7 months ago

0.0.297

7 months ago

0.0.289

7 months ago

0.0.294

7 months ago

0.0.293

7 months ago

0.0.292

7 months ago

0.0.291

7 months ago

0.0.290

7 months ago

0.0.285

7 months ago

0.0.288

7 months ago

0.0.287

7 months ago

0.0.286

7 months ago

0.0.284

8 months ago

0.0.283

8 months ago

0.0.282

8 months ago

0.0.279

8 months ago

0.0.274

8 months ago

0.0.273

8 months ago

0.0.278

8 months ago

0.0.277

8 months ago

0.0.276

8 months ago

0.0.275

8 months ago

0.0.281

8 months ago

0.0.280

8 months ago

0.0.272

8 months ago

0.0.271

8 months ago

0.0.270

8 months ago

0.0.269

8 months ago

0.0.268

8 months ago

0.0.267

8 months ago

0.0.263

8 months ago

0.0.262

8 months ago

0.0.266

8 months ago

0.0.265

8 months ago

0.0.264

8 months ago

0.0.258

9 months ago

0.0.257

9 months ago

0.0.261

8 months ago

0.0.260

8 months ago

0.0.252

9 months ago

0.0.256

9 months ago

0.0.255

9 months ago

0.0.254

9 months ago

0.0.253

9 months ago

0.0.249

9 months ago

0.0.248

9 months ago

0.0.251

9 months ago

0.0.250

9 months ago

0.0.247

9 months ago

0.0.246

9 months ago

0.0.245

9 months ago

0.0.244

10 months ago

0.0.243

10 months ago

0.0.238

10 months ago

0.0.237

10 months ago

0.0.236

10 months ago

0.0.239

10 months ago

0.0.241

10 months ago

0.0.240

10 months ago

0.0.242

10 months ago

0.0.235

10 months ago

0.0.234

10 months ago

0.0.233

10 months ago

0.0.232

10 months ago

0.0.227

10 months ago

0.0.226

10 months ago

0.0.229

10 months ago

0.0.230

10 months ago

0.0.231

10 months ago

0.0.219

11 months ago

0.0.225

10 months ago

0.0.224

10 months ago

0.0.223

11 months ago

0.0.222

11 months ago

0.0.221

11 months ago

0.0.220

11 months ago

0.0.215

11 months ago

0.0.214

11 months ago

0.0.213

11 months ago

0.0.218

11 months ago

0.0.217

11 months ago

0.0.212

11 months ago

0.0.209

11 months ago

0.0.208

11 months ago

0.0.211

11 months ago

0.0.210

11 months ago

0.0.207

11 months ago

0.0.205

12 months ago

0.0.206

12 months ago

0.0.204

12 months ago

0.0.203

12 months ago

0.0.202

12 months ago

0.0.201

12 months ago

0.0.200

12 months ago

0.0.197

12 months ago

0.0.199

12 months ago

0.0.198

12 months ago

0.0.196

12 months ago

0.0.195

12 months ago

0.0.194

12 months ago

0.0.193

12 months ago

0.0.192

12 months ago

0.0.189

12 months ago

0.0.191

12 months ago

0.0.190

12 months ago

0.0.169

1 year ago

0.0.164

1 year ago

0.0.163

1 year ago

0.0.162

1 year ago

0.0.168

1 year ago

0.0.167

1 year ago

0.0.166

1 year ago

0.0.175

12 months ago

0.0.174

12 months ago

0.0.173

1 year ago

0.0.172

1 year ago

0.0.179

12 months ago

0.0.178

12 months ago

0.0.177

12 months ago

0.0.176

12 months ago

0.0.171

1 year ago

0.0.170

1 year ago

0.0.186

12 months ago

0.0.185

12 months ago

0.0.184

12 months ago

0.0.183

12 months ago

0.0.188

12 months ago

0.0.187

12 months ago

0.0.182

12 months ago

0.0.181

12 months ago

0.0.180

12 months ago

0.0.159

1 year ago

0.0.158

1 year ago

0.0.153

1 year ago

0.0.152

1 year ago

0.0.151

1 year ago

0.0.150

1 year ago

0.0.157

1 year ago

0.0.156

1 year ago

0.0.155

1 year ago

0.0.154

1 year ago

0.0.161

1 year ago

0.0.160

1 year ago

0.0.109

1 year ago

0.0.108

1 year ago

0.0.117

1 year ago

0.0.116

1 year ago

0.0.115

1 year ago

0.0.114

1 year ago

0.0.119

1 year ago

0.0.118

1 year ago

0.0.113

1 year ago

0.0.112

1 year ago

0.0.111

1 year ago

0.0.110

1 year ago

0.0.128

1 year ago

0.0.127

1 year ago

0.0.126

1 year ago

0.0.125

1 year ago

0.0.129

1 year ago

0.0.120

1 year ago

0.0.124

1 year ago

0.0.122

1 year ago

0.0.121

1 year ago

0.0.139

1 year ago

0.0.138

1 year ago

0.0.137

1 year ago

0.0.136

1 year ago

0.0.131

1 year ago

0.0.130

1 year ago

0.0.135

1 year ago

0.0.134

1 year ago

0.0.133

1 year ago

0.0.132

1 year ago

0.0.149

1 year ago

0.0.148

1 year ago

0.0.147

1 year ago

0.0.142

1 year ago

0.0.141

1 year ago

0.0.140

1 year ago

0.0.146

1 year ago

0.0.145

1 year ago

0.0.144

1 year ago

0.0.143

1 year ago

0.0.106

1 year ago

0.0.105

1 year ago

0.0.104

1 year ago

0.0.103

1 year ago

0.0.107

1 year ago

0.0.102

1 year ago

0.0.101

1 year ago

0.0.100

1 year ago

0.0.95

1 year ago

0.0.96

1 year ago

0.0.97

1 year ago

0.0.98

1 year ago

0.0.99

1 year ago

0.0.94

1 year ago

0.0.87

1 year ago

0.0.88

1 year ago

0.0.89

1 year ago

0.0.90

1 year ago

0.0.91

1 year ago

0.0.92

1 year ago

0.0.93

1 year ago

0.0.84

1 year ago

0.0.85

1 year ago

0.0.86

1 year ago

0.0.81

1 year ago

0.0.82

1 year ago

0.0.83

1 year ago

0.0.80

1 year ago

0.0.73

1 year ago

0.0.74

1 year ago

0.0.75

1 year ago

0.0.76

1 year ago

0.0.77

1 year ago

0.0.78

1 year ago

0.0.79

1 year ago

0.0.70

1 year ago

0.0.71

1 year ago

0.0.72

1 year ago

0.0.69

1 year ago

0.0.68

1 year ago

0.0.67

1 year ago

0.0.66

1 year ago

0.0.62

1 year ago

0.0.63

1 year ago

0.0.64

1 year ago

0.0.60

1 year ago

0.0.61

1 year ago

0.0.59

1 year ago

0.0.56

1 year ago

0.0.57

1 year ago

0.0.58

1 year ago

0.0.41

1 year ago

0.0.42

1 year ago

0.0.43

1 year ago

0.0.45

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

1 year ago

0.0.50

1 year ago

0.0.48

1 year ago

0.0.49

1 year ago

0.0.40

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.39

1 year ago

0.0.31

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.35

1 year ago

0.0.28

1 year ago

0.0.29

1 year ago

0.0.24

1 year ago

0.0.25

1 year ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.20

1 year ago

0.0.21

1 year ago

0.0.18

1 year ago

0.0.19

1 year ago

0.0.17

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.15

1 year ago

0.0.16

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.3

1 year ago

0.0.2

2 years ago

0.0.1

2 years ago

1.0.0

2 years ago