@bigbinary/neeto-site-blocks

@bigbinary/neeto-site-blocks

neetoSiteBlocks is the library that serves the building blocks for website in neeto-site. It is used in neeto-site-web and neeto-site-eui to serve the blocks.

Installation

yarn add @bigbinary/neeto-site-blocks

Usage

Eg: FeatureWithRightImage

Props

• id: To specify the id of the block.
• configuration: Object containing the configuration for the block. It contains the following keys:
  • design: To specify the design of the block.
  • properties: To specify the properties of the block.
• className: To specify the external classnames.

Here is an example of how to use the FeatureWithRightImage block.

import { FeatureWithImage } from "@bigbinary/neeto-site-blocks";

configurations: {
      properties: {
        content: {
          title: "Title",
          description: "Description",
          position: "left",
        },
        buttons: [],
        image: {
          src:
            "https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg",
          position: "right",
        },
        backgroundImage: {
          src: "",
        },
      },
      design: {
        body: {
          backgroundColor: "#FFFFFF",
          paddingVertical: 20,
          borderTop: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#FFFFFF",
          },
          borderBottom: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#FFFFFF",
          },
        },
        title: {
          fontSize: "3xl",
          fontWeight: "extrabold",
          color: "#2F3941",
          marginTop: 0,
          marginBottom: 5,
          lineHeight: "none",
          letterSpacing: "normal",
        },
        description: {
          fontSize: "base",
          fontWeight: "normal",
          color: "#68737D",
          marginTop: 0,
          marginBottom: 8,
          lineHeight: "normal",
          letterSpacing: "normal",
        },
        buttons: {
          fontSize: "sm",
          fontWeight: "medium",
          color: "#FFFFFF",
          backgroundColor: "#4F46E5",
          border: {
            borderStyle: "none",
            borderWidth: 0,
            borderColor: "#4F46E5",
          },
          borderRadius: "sm",
          paddingHorizontal: 4,
          paddingVertical: 2,
          letterSpacing: "normal",
        },
        image: {
          width: "3/4",
          borderRadius: "sm",
        },
        backgroundImage: {
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        },
      },
    },

const FeatureWithImageBlock = () => {
  return (
    <FeatureWithImage
      id="feature-with-right-image"
      configuration={configuration}
      className="my-10"
    />
  );
};

Development

Install all the dependencies by executing the following command

yarn install
yarn start

This will open up a playground for building the different blocks.

Building and releasing.

The @bigbinary/neeto-site-blocks package gets published to NPM when we merge a PR with patch, minor or major label to the main branch. The patch label is used for bug fixes, minor label is used for new features and major label is used for breaking changes. You can checkout the Create and publish releases workflow in GitHub Actions to get a live update.

In case if you missed to add the label, you can manually publish the package. For that first you need to create a PR to update the version number in the package.json file and merge it to the main branch. After merging the PR, you need to create a new github release from main branch. Whenever a new release is created with a new version number, the github actions will automatically publish the built package to npm. You can checkout the Publish to npm workflow in GitHub Actions to get a live update.

Please note that before publishing the package, you need to verify the functionality in some of the neeto web-apps locally using yalc package manager. The usage of yalc is explained in this video: https://youtu.be/QBiYGP0Rhe0