@grace-studio/graceful-next v2.4.0

@grace-studio/graceful-next

Uses Tailwind etc.

Installation

yarn add @grace-studio/graceful-next

Add transpiling of packge to Next.js config file - next.config.js

const nextConfig = {
  ...
  transpilePackages: ["@grace-studio/graceful-next"],
};

Add CSS scanning for Tailwind config file - tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@grace-studio/graceful-next/lib/**/*.tsx',
  ],
  ...
};

Components

• BaseButton
• BaseContentWrapper
• IconWrapper
• Metadata
• BaseAccordion
• BaseInputField
• BaseRadioButton
• Drawer
• DynamicZone
• Form
• ReactPortal

BaseButton

Button made for styling with all major button functionality.

import { BaseButton } from '@grace-studio/graceful-next/components';

const classes = 'all the classes needed for styling of the button';

return (
  <BaseButton
    className={classes}
    {/* will always be used if present */}
    onClick={() => {
      console.log('clicked');
    }}

    {/* will render link element if present */}
    href="/link"
    target="_blank"
  >
    Click me!
  </BaseButton>
)

BaseContentWrapper

IconWrapper

Metadata

BaseAccordion

BaseInputField

BaseRadioButton

Drawer

DynamicZone

Form

ReactPortal

Hooks

• createUseTranslation
• useMicroStore
• useMousePosition
• usePreventBodyScroll

createUseTranslation

useMicroStore

useMousePosition

usePreventBodyScroll

Utils

• clampValue
• nanoid
• generateUUID

clampValue

nanoid

generateUUID

Generates a random string of 32 characters matching regex pattern ^[a-z0-9]{32}$.

import { generateUUID } from '@grace-studio/graceful-next/utils';

const randomString = generateUUID();
// eg. 201c5ec765e54290a66a7495f70f0dea

Strapi

• getBlockName

getBlockName

Misc

Next Image Loader

Enable the use of a imgproxy server by setting the file loader for Next images.

In next.config.js add:

images: {
  loader: 'custom',
  loaderFile: './src/image-loader.ts',
}

Add a file src/image-loader.ts with the following content:

'use client';
import { imageLoader } from '@grace-studio/graceful-next/misc';

export default imageLoader(IMAGE_PROXY_URL);