# Skin Navbar

This project is based on the brand new [TSDown](https://tsdown.dev/), a toolkit specifically made to make React libraries (finally),
it uses RollDown under the hood, but it abstracts away all the configuration and boilerplate, allowing you to focus on writing your library.

## Structure

The project is structured as follows:

- `src/`: Contains the source code of the library, including components, styles, and tests.
  - `components/`: Contains the React components of the library.
    - `ui/`: Contains base UI components, almost all imported from shadcn/ui, but with some customizations.
  - `styles/`: Contains the CSS and Tailwind styles for the library.
    - `globals.css`: Contains the global CSS styles for the library. This will be imported if the host project doesn't use Tailwind CSS.
    - `styles.css`: Contains the Tailwind CSS styles for the library. This will be imported if the host project uses Tailwind CSS. ALWAYS write your styles here, and not in `globals.css`, which should only contain the base styles of Tailwind CSS.
  - `tests/`: Contains the unit tests for the library components.
- `playground/`: Contains the source code of the playground, which is used for testing and demonstrating the library components.
- `dist/`: Contains the compiled output of the library, which is generated after running the build command.
- `package.json`: Contains the metadata and dependencies of the library.
- `README.md`: This file, which provides an overview of the library and instructions for development

## Getting started

### Machine setup

1. Install Node.js using [`nvm`](https://github.com/nvm-sh/nvm)
2. After installation, run the following command to use the correct Node.js version for this project:

   ```bash
   nvm install && nvm use
   ```

## Development

- Install dependencies:

  ```bash
  npm install
  ```

- Run the playground:

  ```bash
  npm run play
  ```

- Run the unit tests:

  ```bash
  npm run test
  ```

- Build the library (with type checking):

  ```bash
  npm run build
  ```

- Build the library (without type checking):

  ```bash
  npm run build:base
  ```

- Release new version:

  ```bash
  npm run release
  ```

- Add shadcn/ui component

  ```bash
  npx shadcn@latest add navigation-menu
  ```

## SACRO GRAAL

Read, read, read
https://tailwindcss.com/docs/theme

Default theme configuration for tailwind v4 base: https://tailwindcss.com/docs/theme#default-theme-variable-reference

quindi per i font ad esempio noi possiamo dichiarare `--skin-font` e poi usare `--font-skin: var(--skin-font);` e questo ci genererà tutte le utilities per i font con il prefisso `font-skin`. Poi nei vari progetti semplicemente sovrascriviamo `--skin-font` con il font che vogliamo e tutte le utilities `font-skin` useranno quel font.

## Customization rules

Every CSS change to every component must be made via CSS variables.

- The ONLY CSS file to touch is `src/styles/styles.css`, where you can define your CSS variables and use them in the `@theme inline` directive.
- The CSS variables must be defined in the `:root` selector
- Then should be used in the `@theme inline` directive in the same file.

In this way you can use the variable with Tailwind classes in the component file, and then override it in the host app.

### Example

We would like to make configurable the padding of the `Button` component.

1. We define the CSS variable in the `:root` selector, inside the `src/styles/styles.css` file. We could decide to be more specific and define the variable only for the button, but it's a good practice to define it in a more global way, so that it can be reused in other components if needed.

   ```css
   :root {
     --padding: 1rem;
   }
   ```

2. We use the variable in the `@theme inline` directive in the same file. In the theme section is where the magic happens, we can use all utilities classes like:

   **Theme variable namespaces**

   Theme variables are defined in namespaces and each namespace corresponds to one or more utility class or variant APIs.

   Defining new theme variables in these namespaces will make new corresponding utilities and variants available in your project:

   | Namespace          | Utility classes                                                       |
   | ------------------ | --------------------------------------------------------------------- |
   | `--color-_`        | Color utilities like bg-red-500, text-sky-300, and many more          |
   | `--font-_`         | Font family utilities like font-sans                                  |
   | `--text-_`         | Font size utilities like text-xl                                      |
   | `--font-weight-_`  | Font weight utilities like font-bold                                  |
   | `--tracking-_`     | Letter spacing utilities like tracking-wide                           |
   | `--leading-_`      | Line height utilities like leading-tight                              |
   | `--breakpoint-_`   | Responsive breakpoint variants like sm:\_                             |
   | `--container-_`    | Container query variants like @sm:\_ and size utilities like max-w-md |
   | `--spacing-_`      | Spacing and sizing utilities like px-4, max-h-16, and many more       |
   | `--radius-_`       | Border radius utilities like rounded-sm                               |
   | `--shadow-_`       | Box shadow utilities like shadow-md                                   |
   | `--inset-shadow-_` | Inset box shadow utilities like inset-shadow-xs                       |
   | `--drop-shadow-_`  | Drop shadow filter utilities like drop-shadow-md                      |
   | `--blur-_`         | Blur filter utilities like blur-md                                    |
   | `--perspective-_`  | Perspective utilities like perspective-near                           |
   | `--aspect-_`       | Aspect ratio utilities like aspect-video                              |
   | `--ease-_`         | Transition timing function utilities like ease-out                    |
   | `--animate-_`      | Animation utilities like animate-spin                                 |

   ```css
   @theme inline {
     --spacing-button-padding: var(
       --padding
     ); /** This will generate px-button-padding, py-button-padding utilities and the other spacing utilities */
   }
   ```

3. We use the variable in the component file, for example in `src/components/ui/button.tsx`.
   ```tsx
   const buttonStyle = cva(
     "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50",
     {
       variants: {
         variant: {
           default:
             "bg-primary text-primary-foreground hover:bg-primary/90 px-button-padding py-button-padding",
         },
       },
       defaultVariants: {
         variant: "default",
       },
     },
   );
   ```

## Publish to npm

1. From the root of the repository, run `npm run release` and follow the prompts (same flow as `skin-bridge` / `skin-payments`).

The repository uses [release-it](https://github.com/release-it/release-it) with [auto-changelog](https://github.com/CookPete/auto-changelog).