@smartive/guetzli 🍪

A smartive Component Library created with Typescript React and styled with TailwindCSS. Some components also use Framer-Motion for animations.

Usage

npm install @smartive/guetzli

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

TailwindCSS

These components require TailwindCSS to be installed in your project and your tailwind.config.js to be configured like so:

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

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:

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

Running locally with Storybook

npm ci
npm run dev

🏗️ Building production package

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.