FABULA DESIGN

RULES

• Pull requests

  No one should be able to merge their changes to the main branch dial project unless another member mn team dar review l changes, just dir pull request and wait until chi member mn team ydir review

• Stick to one code writing convention

  Kola wa7d fina eando certain way li kayqteb biha codes :confused:, so khasna n followiw one writing style bcs this is a long term project and hta la jaw new members gha yqdro yfhmo l codes easily , and since project is a library almost ga3 codes gha yqono css so i suggest nkhdmo b BEM

• Reusable code

  easy to add or change anything bla maykhser project kaml :joy:

• Comments

  ida derti chi 7aja and chekiti bli team members maghayfhmohach just dir comment w chre7 fih blkhef chno derti

• Separation of concerns

  In computer science separation of concerns is a design principle is the idea that project khas yqun mqsem kula module or in our case components khas yqun responsible 3la 7aja wa7da

• Keep the team updated

  fach dkmel your task it'd be nice to say drari ha chnu dert... bach n3rfo your progress w d motivi drari :joy: , and also nqdro nzido discord channel fiha commits logs gha dqun awesome!

Important shit!

• How to create a new component

  everkers chnu kadgul cheftina f primary school LMAO?, ofc no XD but derna wa7d structure dial component i think gha d3awna fach tbghi dir new component gha dmchi l components folder w ghadi dir new folder b name dial component and i prefer ybda b f stands for Fabula west l folder gha yqono 2 files one is scss file and the second one is the component file gha dlqaw example f components folder nit!

• What next?

  next step fach ghadi dkml lkhdma 3la your component, gha dlqa wa7d file smito index.js, had file so important bach fach user ydir install l library yqder y importi component and nothing crazy just gha d importi component w ghadi dir liha export

  import fCardExample from './src/components/f-card-example/fCardExample.vue'
  export default fCardExample
  

Editor config

please make sure to update your vscode settings bach nbqaw khdamin same way

• Extensions

  • Vetur

    had extension ka d highlighti lik vuejs codes and some snipets

  • Prettier

  ` had extension hia li khdamin biha f had project with eslint, so please make sure to add it to your extensions

  • Eslint

  ` we used this one bach errors li chafhum eslint plugin with vue ytl3o automatically f your code editor w nqdro ndiro lihum auto fix

• Settings file

  You should add this settings to your vscode in order bach ykhdem kolchi mzian type ctrl + shift + p gha tle3 lik search bar then type settings.json gha ytfte7 file, add this:

   {
      "editor.formatOnSave": true,
      "vetur.validation.template": false,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }
  

Component debugging

make sure to add @vue/cli-service-global plugin to vu

vue serve src/componentX/componentX.vue

The easy way to create a component with all the required files

npm run component-create

Build library

npm run build-bundle

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.