open-index/open-npm huggingface dataset:
npm package: @fitx/components
Description: FitX Vue 3 Component and Widget Library. [Overview](https://components.fitx.de)
Latest version: 5.0.0-beta.21

# @fitx/components

FitX Vue 3 Component and Widget Library. [Overview](https://components.fitx.de)

![npm (scoped)](https://img.shields.io/npm/v/@fitx/components?style=flat-square)
![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@fitx/customer-components)

## Use Package 🐨
### Requirements
[<img src="https://img.shields.io/badge/Node-lts%20_v.20_-blue" alt="">](.nvmrc)
[<img src="https://img.shields.io/badge/Vue-^3.4-blue" alt="">](./package.json)

### Install

```shell
$ npm install @fitx/fitx-components --save
```

### Use

```vue
<script lang="ts" setup>
  import { FitxButton } from '@fitx/components';
</script>
<template>
  <fitx-button>Nice</fitx-button>
</template>
```


### Import Styles
Normally via main.ts

```js
import '@fitx/components/styles.css';
```

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Type-Check, Compile and Minify for Package Release

```sh
npm run build:lib
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```

### Run End-to-End Tests with [Playwright](https://playwright.dev)

```sh
# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Start Storybook local
```
npm run storybook
```

### Build Storybook
```
npm run build-storybook
```

## Update Lib
Make sure to update [component index file](src/components/index.ts) after add new Components and run
```
npm run build:lib
```
## Publish Lib
```
npm publish --access public
```
npm package: @fitx/customer-components
Description: FitX Vue 3 Component and Widget Library. [Overview](https://customer-components.netlify.app)
Latest version: 4.13.0

# customer-components

FitX Vue 3 Component and Widget Library. [Overview](https://customer-components.netlify.app)

![npm (scoped)](https://img.shields.io/npm/v/@fitx/customer-components?style=flat-square)
![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@fitx/customer-components)

## Use Package 🐨
### Requirements
[<img src="https://img.shields.io/badge/Node-lts%20_v.20_-blue" alt="">](.nvmrc)
[<img src="https://img.shields.io/badge/Vue-^3.4-blue" alt="">](./package.json)

### Install

```shell
$ npm install @fitx/customer-components --save
```

### Use

```vue
<script lang="ts" setup>
  import { FitxButton } from '@fitx/customer-components';
</script>
<template>
  <fitx-button>Nice</fitx-button>
</template>
```


### Import Styles
Normally via main.ts

```js
import '@fitx/customer-components/styles.css';
```

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Type-Check, Compile and Minify for Package Release

```sh
npm run build:lib
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```

### Run End-to-End Tests with [Playwright](https://playwright.dev)

```sh
# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

### Start Storybook local
```
npm run storybook
```

### Build Storybook
```
npm run build-storybook
```

## Development
For Local Component Testing see [Sandbox](./sandbox/) Implementation.


## Update Lib
Make sure to update [component index file](src/components/index.ts) after add new Components. and run
```
npm run build:lib
```
## Publish Lib
```
npm publish --access public
```

## Release to NPM and publish to netlify
As soon as you merge or push into branch 'release' GitHub Actions starts a workflow:
- run unit tests
- after success:
- publish to NPM
- netlify will trigger build for manually deployment

- On update Master, Netlify will build and deploy automatically

❗ If version in package.json is not updated, NPM release will fail ❗
npm package: @fitx/design-tokens
Description: ![npm (scoped)](https://img.shields.io/npm/v/@fitx/design-tokens?style=flat-square&color=blue) ![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@fitx/design-tokens) ![npm bundle size (
Latest version: 0.1.0

# FitX Design Tokens

![npm (scoped)](https://img.shields.io/npm/v/@fitx/design-tokens?style=flat-square&color=blue)
![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/@fitx/design-tokens)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@fitx/design-tokens)

**FitX Design Tokens** is a design token bundling project that provides bundled CSS, JS, and JSON files to deliver 
consistent design token data in various formats. 
It uses [Style Dictionary](https://amzn.github.io/style-dictionary/) to process and convert design tokens created 
according to the W3C Design Token Community Group (DTCG) standard.

## Table of Contents

- [Project Overview](#project-overview)
- [Directory Structure](#directory-structure)
- [Installation](#installation)
- [Design Tokens](#design-tokens)
- [Build Process](#build-process)

Füge diesen Abschnitt einfach an der gewünschten Stelle in deine README ein.

## Usage
**Use Tokens in Code:**
```bash
npm install @fitx/design-tokens
```

**Use Tokens ins Figma:**
Install Figma Plugin like [Variables Import](https://www.figma.com/community/plugin/1253424530216967528/variables-import) 
by [microsoft](https://github.com/microsoft/figma-variables-import) and import tokens.json.

## Project Overview
This project reads design tokens from the `tokens/` directory, which follow the dtcg standard, 
and generates bundled files in the `build/` directory in various formats (CSS, JS, JSON). 
It uses Style Dictionary to define and transform the design tokens into the desired output formats.

## Directory Structure
```
├── build/                 # Generated output files after build
├──── styles/              # Contains splitted and merged CSS Files
├────── tokens.css         # Merged Tokens
├────── [token-group].css  # splitted CSS Files e.g color.css
├── tokens/                # Source design token files (dtcg standard)
├── sd.config.js           # Style Dictionary configuration file
```

## Installation
Before build, install the dependencies via npm:

```bash
npm install
```

## Design Tokens
The design tokens are located in the `tokens/` directory and follow the [W3C Design Token Community Group (DTCG)](https://tr.designtokens.org/format/) standard. 
These token files are read by the build process and transformed into CSS, JS, and JSON output formats.

## Build Process
The build process is executed using [Style Dictionary](https://amzn.github.io/style-dictionary/). 
To generate the bundled design tokens, use the following command:

```bash
npm run build-tokens
```

The bundled files will be stored in the `build/` directory.