DEV Community: Romulo G Rodrigues

Using Storybook with Quasar

Romulo G Rodrigues — Sat, 08 Feb 2020 04:13:29 +0000

Storybook is a tool to develop bulletproof components faster with a catalog of your components isolated into sections with your use cases implemented, showing off their appearance, behavior and functionalities with a lot of tools to easily communicate front end engineers with designers, UX and UI experts and the PO. You can develop the component isolated just like Sketch does to design them.

To explain how to integrate them I'll create a simple Quasar application with the @quasar/cli command quasar create:



$ quasar create storybook-quasar

And proceed to use the defaults as this is just an example. I advice using yarn as the package manager. I'll use yarn as the package manager of this example.

Navigate to the freshly created directory.



$ cd storybook-quasar

And lets integrate Storybook into our Quasar project.

But there's a catch, at the time of this writing, those two have a little issue when installed together: they use different versions of core-js.

The issue is Storybook uses core-js@3 and Quasar still uses core-js@2 and those two have breaking changes, so, as Storybook have explicit internal dependency on the core-js@3 and will not be affected by the upper scope core-js version, install core-js@2 to be available for Quasar:



$ yarn add --dev core-js@^2.0.0

And you should be greeted this perfect install message.

Then you can proceed to add Storybook as suggested on the useful vue guide on the storybookjs docs page.



$ npx -p @storybook/cli sb init --type vue

And you should see a LOT of warnings and a HUGE list of installed dependencies of dependencies.

And as the storybook installer says: now you can yarn storybook your way into it.



$ yarn storybook

And after some compiling, loading and detecting it should open http://localhost:6006 on your browser.

And it even comes with a button simple example story to show off:

But as you will notice, quasar style and functionality isn't present on the stories. We need to import Quasar into our stories context to make it work, as Quasar can't run the stories and inject all its magic.

So open up your editor of preference (mine is VSCode) and let's change Storybook settings to add Quasar into it.

As the same settings will be shared between the ./quasar.conf.js file and the ./.storybook/main.js file I strongly suggest you extract the common logic to separated files to be imported in those files.

So I've created a ./webpack-config.js file exporting a webpack configuration function:



// ./webpack-config.js

module.exports = cfg => {
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      formatter: require('eslint').CLIEngine.getFormatter('stylish')
    }
  })
}

And imported it into the ./.storybook/main.js file as this:



// ./.storybook/main.js

const webpackFinal = require('../webpack-config.js');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal
};

In Storybook config object webpackFinal is the name of the function passed to extend webpack functionality through its configuration. Similar changes should be made into the ./quasar.conf.js file. Import the function on the top and change the extendWebpack on the line 69, inside the build property.



// ./quasar.conf.js

const extendWebpack = require('../webpack-config.js')

[...]

Your ./quasar.conf.js changes should look like this:

These changes will make it possible for Storybook to load vue and js files without errors. If you use sass or other style preprocessor, add it into the webpack-config like this:



// ./webpack-config.js
const path = require('path')

module.exports = cfg => {
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      formatter: require('eslint')
        .CLIEngine
        .getFormatter('stylish')
    }
  })
  cfg.module.rules.push({
    test: /\.s(c|a)ss$/,
    use: ['css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  })
  return cfg
}

And if you use aliases on your components, would be better to extract that list too to a function on a ./aliases.js file:



const { resolve } = require('path')

const resolveAlias = (rootRelativePath, aliases) => {
  return (accumulator, name) => {
    const aliasPath = aliases[name]

    const resolvedPath = resolve(...rootRelativePath, ...aliasPath)

    return {
      ...accumulator,
      [name]: resolvedPath
    }
  }
}

const aliases = {
  '@': ['src'],
  src: ['src'],
  components: ['src', 'components'],
  tools: ['src', 'tools'],
  mixins: ['src', 'mixins'],
  store: ['src', 'store']
}

module.exports = (...dir) => Object.keys(aliases)
  .reduce(resolveAlias(dir, aliases), {})

And then we'll have our aliases in Quasar and Storybook. After that, you'll need to import Quasar framework features in a newly created file ./.storybook/preview.js. This file will import Quasar files to inject in Storybook preview iframes.



// ./.storybook/preview.js

// Setup context for Storybook here
import 'quasar/dist/quasar.min.css'
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'

import 'quasar/dist/quasar.css'
// import 'src/css/app.scss' // if you have an app.scss|sass|styl main file

import Vue from 'vue';
import Quasar from 'quasar';

Vue.use(Quasar, { config: {}, directives: {} });

// run needed boot plugins files down here like `bootFile({ Vue })`

Then restart your storybook instance just to be sure it will reload with everything with: yarn storybook and check if everything is running properly. And after it opens in your browser you'll notice Quasar styles took over.

And now you can create a new story to develop your brand new component with Quasar magic:



// ./stories/2-Quasar.stories.js

import { QLayout, QPageContainer, QPage, QSelect, QBtn } from 'quasar'

export default {
  title: 'Quasar'
}

export const Components = () => ({
  title: 'QuasarComponents',
  components: { QLayout, QPageContainer, QPage, QSelect, QBtn },
  template: `<q-layout>
    <q-page-container>
      <q-page class="full-height full-width justify-center items-center q-pa-xl">
        <div class="col-auto">
          <q-input v-model="name" label="Full name" />
          <q-select v-model="role" :options="options" label="User Role" />
        </div>
      </q-page>
    </q-page-container>
  </q-layout>`,
  data () {
    return {
      name: null,
      role: 'User',
      options: ['Admin', 'Supervisor', 'User']
    }
  }
})

You should see this component being rendered with Quasar components and its marvelous style.

Hope this little guide could help you. The generated code is available at the yemolai/storybook-quasar repo on Github. Go check it out. See ya.

Consumindo dados de API com Axios e Vue

Romulo G Rodrigues — Sat, 21 Sep 2019 23:29:29 +0000

Introdução

Uma das tarefas mais recorrentes de quem trabalha com web, principalmente com aplicações front-end, é realizar requisições a outros serviços, plataformas e suas interfaces, para que possamos fazer operações comuns como autenticação, solicitar dados salvos em um servidor remoto ou apenas listar fotos de gatinhos.

Neste artigo vamos consumir dados de uma API para listar cores no intuito de aprender como solicitar dados de um serviço online disponível através de API REST que responde com dados em JSON através de HTTP. Para tal vamos utilizar JavaScript com o framework Vue no CodeSandbox, utilizando Axios para a facilitar a comunicação, que é uma biblioteca amplamente utilizada no mercado para esta finalidade.

Para facilitar o foco no consumo de dados, você pode iniciar criando um Fork do template em Vue com Axios que preparei para realizar o exercício. Neste template já existem os componentes requeridos em Vue SFC, sendo necessárias apenas alterações no método getPosts para que seja realizada a solicitação de dados e a atribuição no objeto local para renderizar a página com os dados da vindos da API.

Realizando a requisição

Utilizaremos o método get da biblioteca, que recebe um parâmetro de URL, ou seja o endereço na web para o qual estamos solicitando dados. Neste caso será o endereço https://reqres.in/api/posts, que já está na variável serverUrl. Este método do Axios é equivalente ao método HTTP GET, que solicita dados a partir de um URL, o que foge do escopo deste artigo. Se você não conhece é bom estudar sobre verbos HTTP antes de continuar a ler este artigo.

methods: {
    getPosts: function() {
      const promise = axios.get(serverUrl)
    }
  }

Os métodos de requisição de web do Axios são assíncronos. Isso significa que eles não retornam o resultado da solicitação imediatamente a uma variável, permitindo que seja feita uma atribuição direta do resultado da requisição. na verdade, retornam uma referência à promessa de que em algum momento vamos receber uma resposta, seja boa ou ruim. Em outras palavras este método retorna uma Promise que se tiver sucesso executará a próxima função atribuída com o método then na promise; e se tiver falha (por algum motivo não conseguir realizar a requisição ao servidor), executará a próxima função atribuída com o método catch na promise.

methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      // deu certo, o que fazer?
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      // falhou, o que fazer?
    })
  }
}

E então, dentro da função atribuída ao then, podemos utilizar a resposta do servidor remoto. Os dados da resposta estão presentes em response.data, pois o parâmetro da função atribuída receberá os dados de resposta da requisição e, por convenção, chamamos este parâmetro de response. Podemos atribuir esses dados ao objeto this.apiData para que os posts sejam renderizados pelo componente em Vue e atribuindo null ao objeto this.err para informar ao mesmo componente que não há erro.

methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      this.err = null;
      this.apiData = response.data;
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      // falhou, o que fazer?
    })
  }
}

Na função atribuída com catch à promise podemos definir o que deve ser feito caso a requisição falhe e dispare uma exceção, recebida aqui como parâmetro err, para ser tratada. Para tal podemos atribuir null ao objeto this.apiData para remover possíveis os dados existentes e atribuir o objeto de erro recebido ao objeto this.err para repassar o mesmo ao componente como forma de informar o erro ocorrido.

methods: {
  getPosts: function() {
    // requisição GET que retorna promessa de resultado
    const promise = axios.get(serverUrl)
     // .then para definir o que fazer em caso de sucesso
    promise.then(response => {
      this.err = null;
      this.apiData = response.data;
    })
     // .catch para definir o que fazer em caso de falha
    promise.catch(err => {
      this.err = err;
      this.apiData = null;
    })
  }
}

Resultado

Assim temos a renderização da lista de cores:

Este pequeno exercício sobre como realizar requisições para APIs é apenas uma introdução e você pode contar que farei mais exercícios pontuais em mais artigos. (▀̿Ĺ̯▀̿ ̿)

Agradecimento

Ao @fayhen por sua paciência ao revisar este texto. :)