Skin Navbar

This project is based on the brand new TSDown, 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

2. After installation, run the following command to use the correct Node.js version for this project:

   nvm install && nvm use

Development

• Install dependencies:

  npm install

• Run the playground:

  npm run play

• Run the unit tests:

  npm run test

• Build the library (with type checking):

  npm run build

• Build the library (without type checking):

  npm run build:base

• Release new version:

  npm run release

• Add shadcn/ui component

  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.

   :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 |

   @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.

   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 with auto-changelog.