# @smartive/guetzli 🍪

A smartive Component Library created with [Typescript](https://www.typescriptlang.org/) [React](https://reactjs.org/) and styled with [TailwindCSS](https://tailwindcss.com/). Some components also use [Framer-Motion](https://www.framer.com/motion/) for animations.

## Usage

```sh
npm install @smartive/guetzli
```

```ts
import { Heading1, Copy, ... } from '@smartive/guetzli';
```

### TailwindCSS

These components require [TailwindCSS](https://tailwindcss.com/) to be installed in your project and your `tailwind.config.js` to be configured like so:

```js
const guetzliConfig = require('@smartive/guetzli/config');

module.exports = guetzliConfig.tailwindConfig({
  // your project specific config
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
});
```

### Framer Motion

Some components (like `Tooltip`) use [Framer-Motion](https://www.framer.com/motion/). To enable effective Tree-Shaking & Code-Splitting all components use the `framer-motion` package as described here: https://www.framer.com/api/motion/guide-reduce-bundle-size/

This means you need to manually load Framer-Motion Features in your Project-Root. This library only uses the `domAnimation` feature:

```ts
import { LazyMotion, domAnimation } from 'framer-motion';

export const Page = ({ children }) => (
  <>
    <LazyMotion strict features={domAnimation}>
      <Navigation />
    </LazyMotion>
    //...
  </>
);
```

### Using with next.js

For enhanced performance of the guetzli package in your Next.js project, include the following configuration in your next.config.js file:

```js
 experimental: {
    optimizePackageImports: ['@smartive/guetzli'],
  },
```

## Running locally with Storybook

```sh
npm ci
npm run dev
```

## 🏗️ Building production package

```sh
npm run build
```

Build-Output can be found in the `dist` folder.

## 🚀 Release process

New Merge Requests should be created on the `next` branch. This will trigger a new release `guetzli@next` release on merge.

To create a new release on the `main` branch, create a new Merge Request from `next` to `main` **without squashing the commits**. This will trigger a new release `guetzli@latest` release on merge.

A new release will only be created if the changes contain fixes or new features. If only dependency updates have changed, no new release will be created.