@kadconsulting/dry
Version:
KAD Reusable Component Library
473 lines (395 loc) • 11.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.stylesTemplate = exports.indexTemplate = exports.componentStoryTemplate = exports.componentReadmeTemplate = exports.componentTypesTemplate = exports.componentTestTemplate = exports.componentIndexTemplate = exports.componentTemplate = void 0;
function componentTemplate(componentName, lowerCaseComponentName) {
return `
// // CLI Version 1.1.0
// Component Version 1.0.0
// External imports
import { forwardRef } from "react";
import classnames from "classnames";
// Local imports
// Types
import type { ${componentName}Props } from "./${componentName}Types";
// Utils
// import * as Utils from "./${componentName}.utils.js";
// Hooks
// Styles
import "./${componentName}.scss";
const ${componentName} = forwardRef<HTMLDivElement, ${componentName}Props>(({
id,
className,
passProps,
...props
}, ref) => {
// ============= State =============
// ============= Variables =============
// ============= Use Effect =============
// ============= Handle Functions =============
// ============= Display Functions =============
// ============= Return =============
return (
<div
id={id}
ref={ref}
className={classnames(
className,
"dry-${lowerCaseComponentName}",
)}
{...props}
>
Dry${componentName}
</div>
);
});
export default ${componentName};
`;
}
exports.componentTemplate = componentTemplate;
function componentIndexTemplate(componentName) {
return `
// // CLI Version 1.0.1
// Component Version 1.0.0
import ${componentName} from "./${componentName}";
import type { ${componentName}Props } from "./${componentName}Types";
export { ${componentName} };
export type { ${componentName}Props };
`;
}
exports.componentIndexTemplate = componentIndexTemplate;
function componentTestTemplate(componentName, lowerCaseComponentName) {
return `
// // CLI Version 1.1.0
// Component Version 1.0.0
import { render, screen, waitFor } from "@testing-library/react";
// External imports
import { useEffect, useRef, useState } from "react";
// Local imports
import ${componentName} from "./${componentName}";
// Types
import type { ${componentName}Props } from "./${componentName}Types";
// Hooks
describe("${componentName}", () => {
it('encourages contributors to open the test file', () => {
expect(false).toBe(true);
});
it('renders with a dry-prepended className', () => {
// ARRANGE
const { container } = render(<${componentName} />);
// ASSERT
expect(container.firstChild).toHaveClass('dry-${lowerCaseComponentName}');
});
it('passes a ref to its outermost element', async () => {
// ARRANGE
const Wrapper = () => {
const ref = useRef<HTMLDivElement>(null);
const [refWasPassed, setRefWasPassed] = useState(false);
useEffect(() => {
setRefWasPassed(!!ref.current);
}, []);
return (
<>
<${componentName} ref={ref} />
{refWasPassed && <div>Ref was passed!</div>}
</>
)
}
render(<Wrapper />);
// ASSERT
await waitFor(() => screen.getByText('Ref was passed!'));
});
it('passes a downstream id', () => {
// ARRANGE
const id = 'test-id';
const testId = 'test-subject';
// ACT
render(<${componentName} data-testid={testId} id={id} />);
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute('id', id);
});
it('passes any downstream className(s)', () => {
// ARRANGE
const className = 'first second third';
const testId = 'test-subject';
// ACT
render(<${componentName} data-testid={testId} className={className} />);
// ASSERT
expect(screen.getByTestId(testId)).toHaveClass('first');
expect(screen.getByTestId(testId)).toHaveClass('second');
expect(screen.getByTestId(testId)).toHaveClass('third');
});
it('passes any downstream inline style(s)', () => {
// ARRANGE
const style = { color: 'red' };
const testId = 'test-subject';
// ACT
render(<${componentName} data-testid={testId} style={style} />);
// ASSERT
expect(screen.getByTestId(testId)).toHaveStyle('color: red');
});
it('passes any downstream data-* attribute(s)', () => {
// ARRANGE
const testId = 'test-subject';
const testValue = 'product-1234-abcd-5678-efgh';
// ACT
render(<${componentName} data-testid={testId} data-product={testValue} />);
// ASSERT
expect(screen.getByTestId(testId)).toHaveAttribute(
'data-product',
testValue
);
});
it('supports downstream @testing-library \`screen.getByTestId\`', () => {
// ARRANGE
const testId = 'test-subject';
// ACT
render(<${componentName} data-testid={testId} />);
// ASSERT
expect(screen.getByTestId(testId)).toBeInTheDocument();
});
});
`;
}
exports.componentTestTemplate = componentTestTemplate;
function componentTypesTemplate(componentName) {
return `
// // CLI Version 1.0.1
// Component Version 1.0.0
// Define your component's props here
// For example:
export interface ${componentName}Props extends React.HTMLAttributes<HTMLElement> {
passProps?: object;
/** Support @testing-library/react \`screen.getByTestId\` */
'data-testid'?: string;
}
`;
}
exports.componentTypesTemplate = componentTypesTemplate;
function componentReadmeTemplate(componentName) {
return `
// // CLI Version 1.0.1
// Component Version 1.0.0
# ${componentName}
${componentName} is a React component.
## Import
\`\`\`
import ${componentName} from '@kad-consulting/dry';
\`\`\`
## Important Notes
- Some Info
- Some Info
- Some Info
## Usage
**Using Basic Options**
\`\`\`jsx
<${componentName} props={props} />
\`\`\`
**Using Advanced Options**
\`\`\`jsx
const demo = "demo"
<div>
<${componentName} props={props}>
</${componentName}>
</div>;
\`\`\`
_Built with [DryCli](link to dry cli)_
`;
}
exports.componentReadmeTemplate = componentReadmeTemplate;
const componentStoryTemplate = (componentName) => {
return `
// CLI Version 1.1.0
// Component Version 1.1.0
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import ${componentName} from './${componentName}';
import type { ${componentName}Props } from './${componentName}Types';
// TODO-p1: Replace NEW-GENERATED-COMPONENT with the Desired location
export default {
title: 'Components/NEW-GENERATED-COMPONENT/${componentName}',
component: ${componentName},
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: '${componentName}-test-id',
},
passProps: {
control: 'object',
description: 'Object containing extra props to pass',
defaultValue: {},
},
},
// Add more argTypes here based on your component props
} as Meta<${componentName}Props>;
export const Default: StoryObj<${componentName}Props> = {
args: {
'data-testid': '${componentName}-test-id',
// Add more default args here
},
};
export const Variant: StoryObj<${componentName}Props> = {
args: {
...Default.args,
// Add or modify args for this variant
},
};
// Example of a story with custom render function
export const CustomRendering: StoryObj<${componentName}Props> = {
render: (args) => (
<div style={{ padding: '20px', background: '#f0f0f0' }}>
<${componentName} {...args} />
</div>
),
args: {
...Default.args,
// Add or modify args for this custom rendering
},
};
// Add more story variations here
`;
};
exports.componentStoryTemplate = componentStoryTemplate;
exports.indexTemplate = `
// // CLI Version 1.0.1
// Component Version 1.0.0
// Base
import Card from "./Base/Card";
// ImageLists
import QuiltedImageList from "./ImageLists/QuiltedImageList";
import StandardImageList from "./ImageLists/StandardImageList";
import WovenImageList from "./ImageLists/WovenImageList";
// ProgressIndicators
import CircularIndicator from "./ProgressIndicators/CircularIndicator";
import LinearIndicator from "./ProgressIndicators/LinearIndicator";
// Buttons
import ActionButton from "./Buttons/ActionButton";
import DryButton from "./Buttons/DryButton";
import ToggleButton from "./Buttons/ToggleButton";
import OutlinedButton from "./Buttons/OutlinedButton";
import ContainedButton from "./Buttons/ContainedButton";
import TextButton from "./Buttons/TextButton";
// Lists
import Divider from "./Lists/Divider";
import SingleLineList from "./Lists/SingleLineList";
import ThreeLineList from "./Lists/ThreeLineList";
import TwoLineList from "./Lists/TwoLineList";
// UserHelpers
import Banner from "./UserHelpers/Banner";
// import Snackbar from "./UserHelpers/Snackbar";
import Tooltip from "./UserHelpers/Tooltip";
// Features
import About from "./Features/About";
import ImageCarousel from "./Features/ImageCarousel";
import Team from "./Features/Team";
import Header1 from "./Features/Header1";
import Pricing from "./Features/Pricing";
import Hours from "./Features/Hours";
import SpotlightGallery from "./Features/SpotlightGallery";
// Menus
import Accordion from "./Menus/Accordion";
import BottomSheet from "./Menus/BottomSheet";
import SideSheet from "./Menus/SideSheet";
import AccordionSingle from "./Menus/AccordionSingle";
import DropdownMenu from "./Menus/DropdownMenu";
import Tab from "./Menus/Tab";
import BottomBar from "./Menus/BottomBar";
import NavigationDrawer from "./Menus/NavigationDrawer";
import TopBar from "./Menus/TopBar";
import BottomNavigation from "./Menus/BottomNavigation";
import NavigationRail from "./Menus/NavigationRail";
// Forms
import Checkbox from "./Forms/Checkbox";
import Label from "./Forms/Label";
import SelectionControl from "./Forms/SelectionControl";
import Chip from "./Forms/Chip";
import Password from "./Forms/Password";
import Slider from "./Forms/Slider";
import DatePicker from "./Forms/DatePicker";
import Radio from "./Forms/Radio";
import Switch from "./Forms/Switch";
import Input from "./Forms/Input";
import Select from "./Forms/Select";
// Modals
import AlertDialog from "./Modals/AlertDialog";
import ModalBox from "./Modals/ModalBox";
import ConfirmationDialog from "./Modals/ConfirmationDialog";
import SimpleDialog from "./Modals/SimpleDialog";
export {
Card,
QuiltedImageList,
StandardImageList,
WovenImageList,
CircularIndicator,
LinearIndicator,
ActionButton,
DryButton,
ToggleButton,
OutlinedButton,
ContainedButton,
TextButton,
Divider,
SingleLineList,
ThreeLineList,
TwoLineList,
Banner,
Snackbar,
Tooltip,
About,
ImageCarousel,
Team,
Header1,
Pricing,
Hours,
SpotlightGallery,
Accordion,
BottomSheet,
SideSheet,
AccordionSingle,
DropdownMenu,
Tab,
BottomBar,
NavigationDrawer,
TopBar,
BottomNavigation,
NavigationRail,
Checkbox,
Label,
SelectionControl,
Chip,
Password,
Slider,
DatePicker,
Radio,
Switch,
Input,
Select,
AlertDialog,
ModalBox,
ConfirmationDialog,
SimpleDialog
};`;
const stylesTemplate = (lowerCaseInput) => {
return `
// CLI Version 1.0.2
// Component Version 1.0.0
.dry-${lowerCaseInput}{
}
// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
(min-width: 1024px) {
}
// Adjusting for tablet screens (between small tablets and desktops)
(max-width: 1023px) {
}
// Adjusting for smaller screens (small tablets and mobile)
(max-width: 768px) {
}
// Adjusting for smaller screens (mobile)
(max-width: 480px) {
}
`;
};
exports.stylesTemplate = stylesTemplate;