Example Component

For example consider that your React project uses TypeScript as template and CSS as Styling and we generate component using:

npx arclix generate component Hero --addTest --addStory

or

npx arclix g c Hero --addTest --addStory

Then the component generated will have the structure:

Hero
├── Hero.css
├── Hero.tsx
├── Hero.stories.tsx
└── Hero.test.tsx

Hero.css

// Type some stylings here

Hero.tsx

import React from "react";
import "./Hero.css";

const Hero = () => {
    return <>// Type content here</>;
};

export default Hero;

Hero.stories.tsx

import React from "react";
import Hero from "./Hero.tsx";

// type content here...

Hero.test.tsx

import React from "react";
import Hero from "./Hero.tsx";

describe("Hero", () => {
    // write your tests here...
});