open-index/open-npm huggingface dataset:
npm package: @squidit/css-docs
Description: --- name: Documentation route: /documentation ---
Latest version: 1.0.0

---
name: Documentation
route: /documentation
---

# Documentation

## Install

1. Navigate to `src/docs`

2. Run `npm install docz -g`

3. Run `npm install`

## Development

Run `npm run dev`

## Build

1. Run `npm run build`

2. Run `npm run serve` to see final build (optinal)

## Deploy on GitHub Pages

The project is configured to generate a documentation build file for all commits generated. So as soon as the commit is plunged into the master the deployment is done automatically to GitHub pages

## Docz

> This documentation is generated with [Docz](https://www.docz.site/)
npm package: @squidit/react-css
Description: React CSS is an abstraction of the Squid CSS framework
Author: Squid
Latest version: 1.2.47

<p align="center">
  <img src="https://github.com/user-attachments/assets/f6be2ec9-9aa9-4bc3-afac-89b5ca7e0b96" width="256px" align="center" alt="logo" />

  <h1 align="center">@squidit/react-css</h1>
  <p align="center">This repository contains a React component library developed to facilitate the creation of consistent and elegant interfaces, following a custom style guide. The included components are highly customizable and designed to be reusable across a variety of React projects.</p>
</p>

## Welcome to Squid Design System

⚡ Get the experience by browsing one of [our platforms](https://app.squidit.com.br)!

This framework provides low level utilities and UI components for building
custom experiences.

<hr style={{ borderWidth: "0", margin: "2rem 0" }} />

## Style

Our Design System can be seen [here](https://css.squidit.com.br/styleguide)

## Components

UI Components are currently offered as React (Web) components.

## Installation

1. Node version >= 22
2. To use this library in your React project, you can install it via npm or yarn:

```Bash
npm install @squidit/css @squidit/react-css
```
or
```Bash
yarn add @squidit/css @squidit/react-css
```

3. Add to your style.scss main file

```scss
$fontsFolderPath: "@squidit/css/dist/fonts";
@import "@squidit/css/src/scss/squid.scss";
@import "@squidit/react-css/dist/style.css";
```

## How to Use

After installation, you can import and use the components as needed in your React components:

```jsx
import React from 'react';
import { SqButton } from '@squidit/react-css';

const MyComponent = () => {
  return (
    <div>
      <SqButton>Click Here</SqButton>
    </div>
  );
};

export default MyComponent;
```

## Translations

The lib is available in English, Portuguese and Spanish. By default it is loaded in English, but you can change the lib language to Portuguese or Spanish as follows:

In your project's index, import the functions responsible for translating the lib, define the translation structure and call the translation function.

Here's an example on StackBlitz:

<iframe
  src="https://stackblitz.com/edit/vitejs-vite-uitsef?embed=1&file=src%2Fmain.tsx"
  width="100%"
  height="500px"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>


It is also possible to change translations for individual components, as shown in the example below

<iframe
  src="https://stackblitz.com/edit/vitejs-vite-uitsef?embed=1&file=src%2FApp.tsx"
  width="100%"
  height="500px"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
></iframe>

## Customization

This library allows high flexibility and customization of the components. You can modify the default styles of the components using specific props or by overriding the styles via CSS.

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @squidit/vue-css
Description: Vue CSS is an abstraction in Vue3 of the Squid CSS framework
Author: Squid
Latest version: 1.7.11

<div>
  <div align="center">
    <img src="./public/img/svg/vue-logo.svg" width="60px" align="center" alt="Vue" />
    +&ensp;
    <img src="https://squidit.com.br/wp-content/themes/squid/assets/img/logo.svg" width="180px" align="center" alt="Squid" />
  </div>

  <h1 align="center">@squidit/vue-css</h1>
  <p align="center">This repository contains a Vue3 component library developed to facilitate the creation of consistent and elegant interfaces, following a custom style guide. The included components are highly customizable and designed to be reusable across a variety of Vue3 projects.</p>
</div>

## Welcome to Squid Design System

⚡ Get the experience by browsing one of [our platforms](https://app.squidit.com.br)!

This framework provides low level utilities and UI components for building
custom experiences.

&nbsp;

## Style

Our Design System can be seen [here](https://css.squidit.com.br/styleguide)

## Components

UI Components are currently offered as Vue3 (Web) components.

## Installation

1. Node version >= 18
2. To use this library in your Vue3 project, you can install it via npm or yarn:

```bash
npm install @squidit/css @squidit/vue-css
# or
yarn add @squidit/css @squidit/vue-css
```

3. Import CSS into your global style (`style.scss`):

```scss
$fontsFolderPath: '~@squidit/css/dist/fonts'; /* Overwrite default font path */
@import '~@squidit/css/src/scss/squid.scss'; /* Import all Framework Styles */
```

4. Use `VueCssPlugin` into your `main.ts`:

```typescript
import App from './App.vue'
import { createApp } from 'vue'
import VueCssPlugin from '@squidit/vue-css'
import './style.scss'

createApp(App).use(VueCssPlugin).mount('#app')
```

5. `vue-css` includes i18n in its own structure, if you want to use it, just pass the messages in the plugin options:

```typescript
const getProjectMessages = () => ({
  en: {test: 'Test'},
  es: {test: 'Prueba'},
  pt: {test: 'Teste'},
  de: {test: 'prüfen'},
})

app.use(VueCssPlugin, { messages: getProjectMessages() })
```

6. To control the language used:

```html
<script setup lang="ts">
import { t, changeLocale } from '@squidit/vue-css'

changeLocale('pt')

const test = t('test')
</script>

<template>
  {{ test }}
  {{ t('test') }}
</template>

<style scoped></style>
```

## How to Use

After installation, you can import and use the components as needed in your Vue3 components:

```html
<script setup lang="ts">
import { SqLoader } from '@squidit/vue-css'
</script>

<template>
  <SqLoader />
</template>

<style scoped></style>
```

## Customization

This library allows high flexibility and customization of the components. You can modify the default styles of the components using specific props or by overriding the styles via CSS.

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @squidlabs/ampersand-scripts
Description: Configuration and scripts for AmpersandJS.
Latest version: 3.2.11

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.