open-index/open-npm huggingface dataset:
npm package: @marthvon/frontail
Description: Tailwind Extension
Author: marthvon
Latest version: 0.5.2


# Tailwind++ Extension

**Author:** marthvon \<mamertvonn@gmail.com>

*"With a tailwind at your back, all your frontend needs is a **front tail**."*

Consist of plugins and utility css file that integrates with Tailwind seamlessly.

> Note: Only works for TailwindCss versions <u>></u> 4.0

# Installation Guide

``` bash
npm install tailwindcss postcss postcss-import autoprefixer @marthvon/frontail --save-dev
```

# Configuration Setup 

## TailwindCss Configuration
> tailwind.config.ts
```typescript
const config: Config = {
  content: [
    // ...
    /*Add*/ "./node_modules/@marthvon/frontail/**/*.{js,ts,jsx,tsx,mdx,css}"
// ...
```

## PostCss Configuration
Tailwind v4 Default configuration should look like this
> postcss.config.mjs
```javascript
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
    "postcss-import": {},
    autoprefixer: {}
  },
};

export default config;
```

# Getting Started

> tailwind.config.ts
```typescript
// ...
import plugin from 'tailwindcss/plugin';
const { 
  ColorfulScrollbar, AnimationDuration,
  AnimationDelay, AnimationIteration,
  heightScreens
} = require('@marthvon/frontail/plugin');
const config: Config = {
  // ...
  theme: {
    extent: {
      screens: heightScreens,
  // ... Or
  plugins: [
    plugin(ColorfulScrollbar), 
    plugin(AnimationDuration),
    plugin(AnimationDelay),
    plugin(AnimationIteration),
  ],
}
// ...
```

## Also

> global.css
```css

/* Optionally,use config like prior versions < v4.0 */
@config '../../tailwind.config.ts'; 

/* themes, like extending media queries dimensions */
@import '../../node_modules/@marthvon/frontail/theme/extraScreens.css';

/* utilitiy classes */
@import '../../node_modules/@marthvon/frontail/base/input.css';
@import '../../node_modules/@marthvon/frontail/theme/keyframes.css';
@import '../../node_modules/@marthvon/frontail/utilities/animate.css';
@import '../../node_modules/@marthvon/frontail/utilities/scrollbar.css';
@import '../../node_modules/@marthvon/frontail/utilities/3d.css';
@import '../../node_modules/@marthvon/frontail/utilities/layouts.css';
@import '../../node_modules/@marthvon/frontail/utilities/modal.css';
@import '../../node_modules/@marthvon/frontail/utilities/text.css';

```
npm package: @marthvon/gibbing-headless-ui
Description: Headless UI, integrates with NextJs well, uses React
Author: marthvon
Latest version: 0.3.4


# Gibbing-HeadLess-UI Component Library

**Author:** marthvon \<mamertvonn@gmail.com>

*"Gib [meaning: fasten (parts) together with a gib] React Components together into your webapp. Giving you HeadLessUI that you need."*

Package of Frontend Components using React <u>></u> 18.

> Note: Only works for TailwindCss versions <u>></u> 4.0

# Installation Guide

``` bash
npm install tailwindcss postcss postcss-import autoprefixer @marthvon/frontail --save-dev
npm install @marthvon/gibbing-headless-ui
```

# Configuration Setup 

## Frontail Styling Library Setup guide

Follow setup guide within this link <a href="https://www.npmjs.com/package/@marthvon/frontail">https://www.npmjs.com/package/@marthvon/frontail</a>

## Setup Tailwind

> tailwind.config.js
``` javascript
const config = {
  content: [
    // ...
    "./node_modules/@marthvon/gibbing-headless-ui/dist/**/*.{js,ts,jsx,tsx,mdx,css}"
  ] // ...
```

> global.css
``` css
@import '../../node_modules/@marthvon/frontail/components/index.css';
```
Optionally, import only what you need from components
> global.css
``` css
/* for example */
@import '../../node_modules/@marthvon/frontail/components/image_carousel.css';
@import '../../node_modules/@marthvon/frontail/components/slider.css';
```

## Optimizations: Style Inlining and Purge Unused TailwindCss

> tsconfig.json
``` json
{
  "compilerOptions": {
    // ...
    "preserveConstEnums": false,
    "isolatedModules": false,
    // ...
```

Alternatively, adhere to installation guide to setup the following
``` bash
npm install @fullhumam/postcss-purgecss --save-dev
```

### Presets Utilization for Customization

In use cases of Server-Side Rendering or Static Site Generation
``` typescript
import { /*...*/ } from "@marthvon/gibbing-headless-ui/presets.server";
```

When component is expected to be Client Side Rendered, instead use:
``` typescript
import { /*...*/ } from "@marthvon/gibbing-headless-ui/presets.client";
```
The above focuses on inlining the class name styles and avoids talwind compilation of unused component styles. In summary, **Avoids false positives when tailwind scans for css styles to compile (ideally, *experimental*)**.

# Components

- ImageCarousel
- GridView
- Card Modals
- Panels
- Textbox
- Slider
- DualSlider
- Digitbox
- Toggle
- Dropdown
- Searchbox *(later)*
- DatePicker *(later)*
npm package: @marthvon/protopp
Description: Prototype plus plus (ppp, an extra p for the girthiest npm package that exists)
Author: marthvon
Latest version: 1.2.4

# Prototype plus plus 
*(ppp.js, an extra p for the girthiest npm package that exists)*

* Utility package that extends the functionality of JS native types.
* Write maintainable and readable code within fewer lines than it would normally take.
* Ease of use in performing functionalities not native to JS at your convenience.
* Utilize language features you love from other language like Go, Rust or Kotlin.
* Code how you want with the freedom to choose the paradigm you like.

## How to get started?

``` bash 
npm install @marthvon/protopp 
```
``` javascript 
import '@marthvon/protopp'; 
```
 - will setup all additional prototype methods defined in global namespace

Optionally, only setup the method you require in the project like so: <br>
``` javascript 
import '@marthvon/protopp/objectpp/methods/copyOnly.js'; 
```
Now, you can call the prototype extension methods, like copyOnly method on an object like so: <br>
``` javascript 
{a:1,b:2,c:3}.copyOnly('a', 'c'); 
```

Learn more: https://marthvon-solution.tech/docs/protopp
Liscence Updated: 04/06/2024
npm package: @marti.planellas/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.21.21

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!