Skip to content

Commit

Permalink
Merge pull request #168 from philippebeck/dev
Browse files Browse the repository at this point in the history
Release 3.0.0-alpha
  • Loading branch information
philippebeck authored Mar 5, 2024
2 parents 5b678d8 + e37c5ab commit 9d76a3f
Show file tree
Hide file tree
Showing 136 changed files with 12,839 additions and 22,109 deletions.
4 changes: 0 additions & 4 deletions .browserslistrc

This file was deleted.

26 changes: 26 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
overrides: [
{
files: [
'cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}',
'cypress/support/**/*.{js,ts,jsx,tsx}'
],
'extends': [
'plugin:cypress/recommended'
]
}
],
parserOptions: {
ecmaVersion: 'latest'
}
}
33 changes: 0 additions & 33 deletions .eslintrc.js

This file was deleted.

4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
coverage/
dist/
node_modules/
public/fonts/
public/img/
src/app/values.js
src/assets/fonts/
src/assets/values.js
8 changes: 8 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
8 changes: 8 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode"
]
}
119 changes: 85 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
# Vesan
# vesan

Vesan is a Frontend Framework made with Vue & Animadio
Vesan is a Frontend Framework made with Vue 3, TypeScript, Vuex, Axios, Sass & Animadio
Includes Font-Awesome, Recaptcha, PayPal, TinyMCE, Vitest & Cypress

Migration from Option API to Composition API in progress (~ 30%)
Migration of all scripts from JS to TS in progress (~ 60%)
Migration of the tests from Jest to Vitest in progress too (~ 60%)

Migration of the store from Vuex to Pinia soon
Added e2e tests with Cypress soon too

[![NPM Version](https://badgen.net/npm/v/vesan)](https://www.npmjs.com/package/vesan)
[![GitHub Top Language](https://img.shields.io/github/languages/top/philippebeck/vesan)](https://github.com/philippebeck/vesan)
Expand All @@ -12,19 +20,45 @@ Vesan is a Frontend Framework made with Vue & Animadio
[![Codacy Badge](https://app.codacy.com/project/badge/Grade/cfde730eaf0f48a587afc8b95a2ac119)](https://www.codacy.com/gh/philippebeck/vesan/dashboard)
[![Maintainability](https://api.codeclimate.com/v1/badges/61debaf8cefe10b19cc6/maintainability)](https://codeclimate.com/github/philippebeck/vesan/maintainability)



- [Vesan](#vesan)
- [vesan](#vesan)
- [Recommended IDE Setup](#recommended-ide-setup)
- [Type Support for `.vue` Imports in TS](#type-support-for-vue-imports-in-ts)
- [Customize configuration](#customize-configuration)
- [Download](#download)
- [Package](#package)
- [Installation](#installation)
- [Configuration](#configuration)
- [Usage](#usage)
- [Production](#production)
- [Project Setup](#project-setup)
- [Compile and Hot-Reload for Development](#compile-and-hot-reload-for-development)
- [Type-Check, Compile and Minify for Production](#type-check-compile-and-minify-for-production)
- [Run Unit Tests with Vitest](#run-unit-tests-with-vitest)
- [Run End-to-End Tests with Cypress](#run-end-to-end-tests-with-cypress)
- [Lint with ESLint](#lint-with-eslint)
- [Content](#content)
- [Elements Components](#elements-components)
- [Setters Components](#setters-components)
- [Main Views](#main-views)
- [Data Views](#data-views)
- [Services](#services)
- [Documentation](#documentation)

---
## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Download

Expand All @@ -34,8 +68,6 @@ or
or
[Latest Release](https://github.com/philippebeck/vesan/releases)

---

## Package

NPM : `npm i vesan`
Expand All @@ -44,40 +76,59 @@ Yarn : `yarn add vesan`

**If you choose to get Vesan from NPM or Yarn : you need to copy Vesan from *node_modules/vesan* to the root of your App**

---
## Configuration

## Installation
To configure the frontend constants, replace values :
`/src/assets/values.example.js` *(then rename it /src/assets/values.js)*

Install the frontend dependencies :
`$ npm install`
## Project Setup

---
```sh
npm i
```

## Configuration
### Compile and Hot-Reload for Development

To configure the frontend constants, replace values :
`/src/app/values.example.js` *(then rename it /src/app/values.js)*
```sh
npm start
```

---
### Type-Check, Compile and Minify for Production

## Usage
```sh
npm run build
```

To run the UI :
`$ npm start`
### Run Unit Tests with [Vitest](https://vitest.dev/)

---
```sh
npm run test:unit
```

## Production
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)

1. Compile the frontend :
`$ npm run build`
```sh
npm run test:e2e:dev
```

2. Then use the files of the dist folder for your prod UI
This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.

---
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):

```sh
npm run build
npm run test:e2e
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```
## Content

Elements Components :
### Elements Components
- **BtnElt** *(Link & Button Elements)*
- **CardElt** *(Article & Section Elements)*
- **FieldElt** *(User Input & User Select Elements)*
Expand All @@ -88,7 +139,7 @@ Elements Components :
- **SliderElt** *(Slider Element)*
- **TableElt** *(Table Element)*

Setters Components :
### Setters Components
- **ArticleSet** *(Article Setter)*
- **GallerySet** *(Gallery Setter)*
- **ImageSet** *(Image Setter)*
Expand All @@ -98,15 +149,15 @@ Setters Components :
- **ProjectSet** *(Project Setter)*
- **UserSet** *(User Setter)*

Main Views :
### Main Views
- **HomeView** *(Home)*
- **ContactView** *(Contact)*
- **LegalView** *(Legal notice)*
- **LoginView** *(Sign in, Sign up, Forgot password)*
- **ProfileView** *(User profile)*
- **ErrorView** *(Error)*

Data Views :
### Data Views
- **BlogView** *(Blog with articles list)*
- **ArticleView** *(Article of the blog)*
- **PortfolioView** *(Portfolio of projects)*
Expand All @@ -117,7 +168,7 @@ Data Views :
- **ImageView** *(Images of a gallery)*
- **LinkView** *(Links list)*

Services :
### Services
- **Checkers** : checkRange(), checkRegex(), checkRole(), checkSlot()
- **Fetchers** : getData(), postData(), putData(), deleteData()
- **Getters** : getCats(), getItemName(), getItemsByCat()
Expand Down
5 changes: 0 additions & 5 deletions babel.config.js

This file was deleted.

8 changes: 8 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from 'cypress'

export default defineConfig({
e2e: {
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
baseUrl: 'http://localhost:4173'
}
})
8 changes: 8 additions & 0 deletions cypress/e2e/example.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// https://on.cypress.io/api

describe('My First Test', () => {
it('visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'You did it!')
})
})
10 changes: 10 additions & 0 deletions cypress/e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["./**/*", "../support/**/*"],
"compilerOptions": {
"isolatedModules": false,
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
}
}
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
39 changes: 39 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/// <reference types="cypress" />
// ***********************************************
// This example commands.ts shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add('login', (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
//
// declare global {
// namespace Cypress {
// interface Chainable {
// login(email: string, password: string): Chainable<void>
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
// }
// }
// }

export {}
20 changes: 20 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
1 change: 1 addition & 0 deletions env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
Loading

0 comments on commit 9d76a3f

Please sign in to comment.