Como criar um aplicativo Next.js com Tailwind CSS e Storybook

Saiba como criar um aplicativo com Next.js, Tailwind e Storybook. Construindo um aplicativo Next.js usando Tailwind e Storybook. Neste tutorial, veremos o que é o Storybook, como ele funciona e como começar a criar histórias em um aplicativo Next.js usando Tailwind CSS para estilização.

Construindo um aplicativo com Next.js, Tailwind CSS e Storybook

O desenvolvimento orientado a componentes transformou a forma como criamos aplicativos da web. Essa abordagem de desenvolvimento facilita o gerenciamento e a manutenção de bases de código de aplicativos, ao mesmo tempo em que facilita a consistência do design e a colaboração entre os desenvolvedores.

Uma das principais vantagens do desenvolvimento orientado a componentes é o isolamento de componentes, que permite que você trabalhe em componentes de forma independente sem se distrair com o aplicativo ao redor. Storybook.js é uma ferramenta que pode ajudar com isso.

Neste tutorial, veremos o que é o Storybook, como ele funciona e como começar a criar histórias em um aplicativo Next.js usando Tailwind CSS para estilizar . Abordaremos:

O que é o livro de histórias?
Introdução ao Next.js, Storybook e Tailwind
- Adicionando o Storybook a um aplicativo Next.js
- Adicionando suporte CSS Tailwind para Storybook
Criando histórias para nosso projeto Next.js e Tailwind

Para acompanhar este tutorial, você deve estar familiarizado com Next.js e Tailwind CSS. A experiência anterior com o Storybook também pode ser benéfica; no entanto, este artigo tentará cobrir o básico rapidamente.

O que é o livro de histórias?

O Storybook é uma ferramenta da Web para desenvolver e testar componentes de interface do usuário isoladamente de um aplicativo específico. Ele permite que você crie “histórias” para cada componente, que são exemplos de como o componente deve parecer e se comportar em diferentes contextos:

As histórias que você cria podem ser exibidas em um navegador em um ambiente de desenvolvimento, permitindo que você teste e depure facilmente seus componentes.

O Storybook inclui vários recursos úteis, como a capacidade de adicionar notas, controlar o estado do componente e verificar as regras de acessibilidade.

Ele também permite que você interaja com os acessórios do componente e visualize como o componente ficaria em diferentes cenários e estados, o que, por sua vez, permite que você teste e depure com eficiência.

Introdução ao Next.js, Storybook e Tailwind

Vamos começar criando um novo aplicativo Next.js executando o comando abaixo:

npx create-next-app next-storybook

Em seguida, altere o diretório ( cd) para o novo aplicativo e execute o seguinte comando para instalar o Tailwind CSS e suas dependências:

npm install -D tailwindcss postcss autoprefixer

Depois disso, execute o comando abaixo para gerar ambos tailwind.config.jse postcss.config.jsconforme exigido pelo Tailwind CSS:

npx tailwindcss init -p

Abra o tailwind.config.jse atualize seu código para o abaixo, para que a exportação de conteúdo inclua arquivos em nossos projetos /pagese /componentsdiretórios.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Por fim, abra o styles/global.cssarquivo padrão e adicione as @tailwinddiretivas mostradas abaixo na parte superior do código:

@tailwind base;
@tailwind components;
@tailwind utilities;

Neste ponto, configuramos com sucesso nosso aplicativo Next.js para trabalhar com Tailwind CSS e podemos começar a utilizar as classes utilitárias do Tailwind.

Adicionando o Storybook a um aplicativo Next.js

Você pode adicionar o Storybook a um aplicativo Next.js simplesmente executando o seguinte comando:

npx sb init

Se você estiver usando o Next.js v11 e posterior, é recomendável usar o webpack 5 para melhorar a integração e o desempenho:

npx sb init --builder webpack5

A execução de qualquer um desses comandos instalará as dependências necessárias e configurará um ambiente de livro de histórias para seu projeto. Também deve haver duas novas pastas criadas - .storybooke stories.

O .storybookdiretório contém um main.jsarquivo e um preview.jsarquivo. Isso nos permite configurar a aparência de nosso aplicativo, além de nos permitir projetar nosso ambiente Storybook de acordo com nossas preferências.

A storiespasta contém histórias e documentação padrão. Aprenderemos como criar o nosso próprio em um momento.

Para testar as coisas, use o seguinte comando para iniciar a interface do Storybook:

npm run storybook
# OR 
yarn storybook

Uma nova página da Web deve abrir em http://localhost:6006, e você deve ver algo como isto:

Exemplo de interface de livro de história para como um componente de página apareceria no front-end para um usuário desconectado

Brinque com esse ambiente para entender melhor como as histórias e documentações funcionam no Storybook antes de começarmos a criar as nossas.

Quando terminar de brincar, vá em frente e exclua o /storiesdiretório e atualize o conteúdo de .storybook/main.jspara corresponder ao seguinte:

module.exports = {
  stories: [
    "../components/**/*.stories.mdx",
    "../components/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-controls",
  ],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
    });

    return config;
  },
};

No código acima, configuramos o Storybook para procurar histórias/documentação no /componentsdiretório em vez do /storiesdiretório padrão, permitindo-nos hospedar nossos componentes, bem como suas respectivas histórias no mesmo diretório.

Adicionando suporte CSS Tailwind para Storybook

O Storybook não funciona com Tailwind CSS por padrão. Como resultado, se criarmos um componente React usando classes utilitárias do Tailwind e, em seguida, criarmos uma história com base nesse componente, as alterações CSS do Tailwind não serão refletidas no ambiente do Storybook.

Para resolver esse problema, adicionamos uma webpackFinalopção ao .storybook/main.jsarquivo de configuração no código anterior. Isso instruirá o Storybook a criar com as dependências necessárias exigidas pelo Tailwind CSS:

. . .
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
    });

    return config;
  },

Além disso, atualize o .stories/preview.jsarquivo com o código abaixo:

import "../styles/globals.css";

import * as nextImage from "next/image";

Object.defineProperty(nextImage, "default", {
  configurable: true,
  value: (props) => <img {...props} />,
});

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
};

Este arquivo foi atualizado para importar a folha de estilo global e para suportar next-image. Como resultado, o Tailwind CSS e next-imagedeve funcionar corretamente em nosso ambiente Storybook.

Criando histórias para nosso projeto Next.js e Tailwind

Para criar uma nova história, precisamos primeiro criar o componente no qual a história será baseada. Crie uma nova /components/Cardpasta no diretório raiz do projeto. Então, dentro deste novo diretório, crie dois arquivos:

index.js— conterá o código principal do nosso componente de cartão
card.stories.js— conterá o código da história para nosso componente de cartão

Quando terminarmos, nossa estrutura de arquivos do projeto deve ficar assim:

.
├── . . .
├── components
│   └── Card
│       ├── index.js
│       └── card.stories.js
├── pages
│   └── index.js
├── public
└── . . .

Dentro do Card/index.jsarquivo, cole o seguinte código:

import PropTypes from "prop-types";

const Card = ({ title, showSub, background, imgUrl, children }) => {
  return (
    <div class="flex justify-center">
      <div
        class={`flex flex-col md:flex-row md:max-w-xl rounded-lg bg-${background} shadow-lg`}
      >
        <img
          class=" w-full h-96 md:h-auto object-cover md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg"
          src={imgUrl}
        />
        <div class="p-6 flex flex-col justify-center">
          <h5 class="text-gray-900 text-xl font-medium mb-2">{title}</h5>
          {showSub && (
            <p class="text-gray-500 text-sm mt-2">This is the card subtitle</p>
          )}
          <p class="text-gray-700 text-base mt-4 mb-4">{children}</p>

          <button
            type="button"
            class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs uppercase rounded shadow-md"
          >
            Some action
          </button>
        </div>
      </div>
    </div>
  );
};

export default Card;

Card.propTypes = {
  title: PropTypes.string,
  sub: PropTypes.string,
  showSub: PropTypes.bool,
  imgUrl: PropTypes.string,
  background: PropTypes.string,
};

Usando as classes utilitárias Tailwind CSS, criamos um componente no código acima que aceita title, showSub, imgUrl, backgrounde childrenprop e gera um cartão básico com as props passadas.

Você deve ter notado que também usamos o pacote ReactPropTypes para definir nossos tipos de propriedade. Vamos precisar instalá-lo assim:

npm install prop-types

Para criar a história do cartão, cole o seguinte código dentro do card.stories.jsarquivo:

import Card from "./index";

export default {
  title: "My Cards",
};

const Template = (arguments_) => <Card {...arguments_} />;

export const GreenCard = Template.bind({});

GreenCard.args = {
  title: "Hello World",
  showSub: false,
  background: "yellow-600",
  imgUrl: "https://path/to/some/image",
  Children: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, soluta?",
};

No código acima, criamos uma nova história chamada “My Cards”, vinculando o modelo de história ao Cardcomponente que criamos anteriormente.

Em seguida, criamos uma nova instância da Cardhistória chamada GreenCarde passamos os GreenCard.argsvalores acima como props a serem renderizados com nosso Cardcomponente.

Execute o seguinte comando para reiniciar o ambiente Storybook:

npm run storybook

Uma vez iniciado, você deve ver que nossa história de cartão foi criada conforme mostrado na captura de tela abaixo:

Componente de cartão de exemplo criado no livro de histórias com controles exibidos para elementos de cartão como título, cor de fundo, url de imagem e filhos

Você também deve observar que nosso componente é atualizado automaticamente à medida que fazemos alterações na seção de controle.

Além disso, temos uma infinidade de opções de personalização na barra de menu para medir os tamanhos de nosso componente e também como ele aparecerá em vários viewports e condições:

Isso é tudo! Conseguimos instalar o Storybook em um projeto Next.js e configurá-lo para funcionar com Tailwind CSS.

Conclusão

Ao longo deste artigo, enfatizamos a importância do isolamento de componentes. Também discutimos como usar o Storybook — uma ferramenta da Web para desenvolver e testar componentes de interface do usuário isoladamente — em um aplicativo Next.js, bem como configurar Tailwind CSS para tal projeto.

Você também pode encontrar o código-fonte completo para este tutorial no GitHub .

Fonte: https://blog.logrocket.com

#nextjs #tailwind #storybook #tailwindcss

What is GEEK

Buddha Community

Como criar um aplicativo Next.js com Tailwind CSS e Storybook

JavaScript Daily

1632537859

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

Fast startup without relying on a custom version of Node.js.
Small artifact (current size is around 1.2MB).
First class macros.
Support building small TUI apps using Reagent.
Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

destructuring using :syms
property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

c64core: retrocompute aesthetics twitter bot
gallery.cljs: script to download walpapers from windowsonearth.org.
nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

babashka >= 0.4.0
Clojure CLI >= 1.10.3.933
Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

Clone and cd into this repo
bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb
License: EPL-1.0

#node #javascript

Mélanie Faria

1677744240