open-index/open-npm huggingface dataset:
npm package: @rafaelpaludo/ds-franq
Description: Design system da Franq
Author: techfranq
Latest version: 0.0.4

# Franq DS

![Node Current](https://img.shields.io/node/v/npm?logo=nodedotjs)

Este repositório tem como objetivo centralizar os componentes utilizados nos projetos de frontend da Franq, de acordo com o design system da empresa.

O repositório inclui uma pasta chamada /ds-assets, responsável pela geração de ícones no formato de Web Fonts (woff, ttf, woff2), utilizando a biblioteca [Fantasticon](https://github.com/tancredi/fantasticon).


## Configuração recomendada da IDE

Utilize [VSCode](https://code.visualstudio.com/) com a extensão [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar), e certifique-se de desabilitar o Vetur.

## Suporte de Tipagem para Arquivos .vue no TypeScript

O TypeScript, por padrão, não oferece suporte nativo para tipos em arquivos .vue. Para resolver isso, substituímos a CLI padrão do tsc pelo vue-tsc, que realiza a verificação de tipos corretamente. Além disso, no editor de código, é necessário utilizar o [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)] para que o serviço de TypeScript reconheça as definições de tipos nos arquivos .vue.


## Configruação customizada

Consulte a [Documentação de configuração do Vite](https://vitejs.dev/config/) para ajustar as configurações conforme necessário.

## Configuração do projeto

Para configurar o projeto, execute o seguinte comando:

```sh
npm install
```

### Compilação e Hot Reload para Desenvolvimento

```sh
npm run dev
```

### Verificação de Tipos, Compilação e Minificação para Produção
```sh
npm run build
```

### Linting com [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Para publicar no NPM

Faça o login na sua conta NPM

```sh
npm run login
```

Faça a publicação no npm

```sh
npm publish --access public
```
npm package: @rafaelpaludo/f-icons
Description: Biblioteca de ícones personalizada
Author: Rafael Paludo
Latest version: 0.0.3

# F-icons
F-Icons é uma biblioteca de ícones personalizada para a web, gerada a partir de arquivos SVG. Os ícones são disponibilizados nos formatos .woff, .woff2, .ttf e acompanham um arquivo .css com classes pré-definidas para fácil utilização.

## Instalação

```sh
npm i @rafaelpaludo/f-icons 
```

Após a instalação, importe o arquivo CSS para usar os ícones no seu projeto:

```js
import "@rafaelpaludo/f-icons/dist/icons.css";
```

## Utilização

Para usar os ícones em seu HTML, basta adicionar a classe correspondente:

```html
<i class="meu-icone nome-do-icone"></i>
```

## Integração com o Vuetify 2

Siga os passos abaixo para integrar sua biblioteca de ícones ao Vuetify 2:

1.Importe o CSS gerado pelo Fantasticon e o arquivo de aliases:
```js
// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import '@rafaelpaludo/f-icons/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@rafaelpaludo/f-icons/dist/aliases.js'; // Importa as classes mapeadas
```
2.Configure o Vuetify para utilizar os ícones:
```js
// src/plugins/vuetify.js
Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    values: {
      ...aliases, // Mapeia os ícones dinamicamente
      meuIcone1: 'f-{meu-icone-1}', // Exemplo de uso de um ícone específico
    },
  },
});
```

Agora você pode utilizar os ícones diretamente nos componentes Vuetify, como no exemplo abaixo:
```html
<v-icon>$meuIcone1</v-icon>
```

## Integração com Nuxt 3 e UnoCSS

Siga os passos abaixo para integrar sua biblioteca ao Nuxt 3 utilizando Vuetify 3 e UnoCSS:

1. instale o pacote:
```sh
pnpm i @rafaelpaludo/f-icons
```

2.No arquivo de configuração do Vuetify, importe o CSS e o mapeamento de ícones:

```js
// src/plugins/vuetify.js
import '@rafaelpaludo/f-icons/dist/icons.css'; // Importa o CSS dos ícones
import { aliases } from '@rafaelpaludo/f-icons/dist/aliases.js'; // Importa o mapeamento dos ícones
```

3.Adicione a configuração para o Vuetify dentro de um plugin Nuxt:

```js
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook("vuetify:configuration", ({ vuetifyOptions }) => {
    vuetifyOptions.icons = {
      aliases: {
        ...aliases,
        meuIcone1: 'f-{nome-do-icone-1}', // Exemplo de uso de um ícone específico
      },
    };
  });
});
```

Agora os ícones podem ser utilizados em componentes Nuxt da seguinte forma:

```html
<v-icon>$meuIcone1</v-icon>
```
npm package: @rafaelpaludo/storybook
Description: Design system da Franq
Author: techfranq
Latest version: 1.0.0

# Franq DS

![Node Current](https://img.shields.io/node/v/npm?logo=nodedotjs)

Este repositório tem como objetivo centralizar os componentes utilizados nos projetos de frontend da Franq, de acordo com o design system da empresa.

O repositório inclui uma pasta chamada /ds-assets, responsável pela geração de ícones no formato de Web Fonts (woff, ttf, woff2), utilizando a biblioteca [Fantasticon](https://github.com/tancredi/fantasticon).


## Configuração recomendada da IDE

Utilize [VSCode](https://code.visualstudio.com/) com a extensão [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar), e certifique-se de desabilitar o Vetur.

## Suporte de Tipagem para Arquivos .vue no TypeScript

O TypeScript, por padrão, não oferece suporte nativo para tipos em arquivos .vue. Para resolver isso, substituímos a CLI padrão do tsc pelo vue-tsc, que realiza a verificação de tipos corretamente. Além disso, no editor de código, é necessário utilizar o [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)] para que o serviço de TypeScript reconheça as definições de tipos nos arquivos .vue.


## Configruação customizada

Consulte a [Documentação de configuração do Vite](https://vitejs.dev/config/) para ajustar as configurações conforme necessário.

## Configuração do projeto

Para configurar o projeto, execute o seguinte comando:

```sh
npm install
```

### Compilação e Hot Reload para Desenvolvimento

```sh
npm run dev
```

### Verificação de Tipos, Compilação e Minificação para Produção
```sh
npm run build
```

### Linting com [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Para publicar no NPM

Faça o login na sua conta NPM

```sh
npm run login
```

Faça a publicação no npm

```sh
npm publish --access public
```