nextjs-component-library

NEXTJS COMPONENT LIBRARY

TERMINAL

npm i @git-ovidiu/nextjs-component-library@latest

npm run rollup 

npm run test

npm publish

IMPORTS

COMPONENTS IMPORT

import {Animated_text, Description, FAQ_item, Link_item, SimpleDivider, Label, Button_Line_Drawing, Button_Slide, Button_Slide_Second, Simple_divider, Logo, Custom_Shape, Link_list, Footer_card, Card, Title_and_description, Divider, Media_image, Media_video, Custom_grid_column, Custom_grid_row} from "@git-ovidiu/nextjs-component-library";

SPLIDE IMPORT

import { Splide, SplideSlide } from "@splidejs/react-splide";

PARALLAX IMPORT

import { Parallax, ParallaxBanner, ParallaxBannerLayer, ParallaxProvider } from "react-scroll-parallax";

FRAMER MOTION IMPORT

import { motion } from "react-scroll-parallax";

---

LIVE COMPONENTS

ATOMS

---

TEXT

• Animated_text
• Description
• FAQ_item
• Link_item
• Label

---

BUTTONS

• Button_Line_Drawing
• Button_Slide
• Button_Slide_Second

---

• Simple_divider
• Logo
• Custom_Shape

MOLECULES

• Link_list
• Footer_card
• Card
• Title_and_description
• Divider
• Media_image
• Media_video

ORGANISMS

• Media_and_paragraph

STYLEGUIDE

• Custom_grid_column
• Custom_grid_row

---

FILE STRUCTURE

<h3>You will to generate and customize 4 files for each component:</h3>

SCSS - COMPONENT.scss

 //@use '../../../styles/main.module.scss' as *;

:root{
  //--a|m|o-component-name-div-action: value;
  --a-test-component-right-column-background: gray;
}

  //.a|m|o.main-container-div{}
  .a-test-component{}

---

TSX - COMPONENT.tsx

import React, { ReactElement } from "react";
import "./Component.scss";
export interface ComponentProps {
  text: string;
  number: number;
  ReactElement?: ReactElement;
  boolean?: boolean;
}
export default function Component(props: ComponentProps) {
  return (
    <>
      <section>
         {/*component code here*/}
      </section>
    </>
  );
}

---

TESTING - COMPONENT.test.tsx

 import React from "react";
import { render } from "@testing-library/react";

import COMPONENT from "./COMPONENT";

describe("COMPONENT", () => {
  test("renders the COMPONENT", () => {
    render(<COMPONENT text="TESTING" />);
  });
});

---

STORYBOOK - COMPONENT.stories.tsx

import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import TEST_COMPONENT from "./TEST_COMPONENT";

const Extra_Info = `
<br>
<h2><u>PROPS</u></h2>
<table>
  <tr>
    <td>name</td>
    <td>type</td>
    <td>can be:</td>
  </tr>
  <tr>
    <td>text</td>
    <td>string</td>
    <td>-</td>
  </tr>
</table>

<br>

<h2><u>CSS VARIABLES</u></h2>
<ol>
  <li>--a-test-component-right-column-background</li>
</ol>

<table>
  <tr>
    <td>--a-test-component-right-column-background</td>
    <td>gray</td>
  </tr>
</table>
`;

export default {
  title: "Atoms/Molecules/Organisms/TEST_COMPONENT",
  component: TEST_COMPONENT,
  argTypes: {
    selectOption: {
      control: "radio",
      options: ["selectOption_1", "selectOption_2", "selectOption_3", "selectOption_4"],
    }
  },
  parameters: {
    actions: { disabled: true },
    docs: {
      description: {
        component: Extra_Info,
      },
    },
  },
} as ComponentMeta<typeof TEST_COMPONENT>;

const Template: ComponentStory<typeof TEST_COMPONENT> = (args) => (
  <TEST_COMPONENT {...args} />
);

export const TEST_COMPONENT_STORY = Template.bind({});

TEST_COMPONENT_STORY.args = {
    selectOption: 'selectOption_3',
    text: "Placeholder text",
};