A smartive Component Library created with Typescript React and styled with TailwindCSS. Some components also use Framer-Motion for animations.
npm install @smartive/guetzli
import { Heading1, Copy, ... } from '@smartive/guetzli';
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: [],
});
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>
//...
</>
);
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'],
},
npm ci
npm run dev
npm run build
Build-Output can be found in the dist
folder.
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.