npm

@smartive/guetzli
TypeScript icon, indicating that this package has built-in type declarations

4.0.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @smartive/guetzli

Weekly Downloads

779

Version

4.0.0

License

MIT

Unpacked Size

66.4 kB

Total Files

84

Last publish

Collaborators

  • smartive-ci
  • mfeltscher
  • petermanser
  • cbuehler
  • dwirz
  • deniaz
  • nmaro