Code style

​

Linting and formatting commands

pnpm format       # Format and fix lints for the entire codebase (recommended)
pnpm lint         # Run the linter across all files
pnpm lint:fix     # Attempt to automatically fix linting errors
pnpm prettier     # Check formatting for JS, TS, MD, MDX, JSON, YAML, and CSS files
pnpm prettier:fix # Automatically fix formatting issues

​

Pre-commit hooks

​

Commit guidelines

​

Commit message format

• Messages must include a type prefix as described in Conventional Commits
• Messages must be written in lowercase, except for proper nouns
• Messages must not end with a period .

feat: add new component for download statistics
fix: resolve navigation menu accessibility issue
docs: update contributing guidelines

​

Commit signing

​

JavaScript and TypeScript

​

Import standards

• Do not import React directly — only import the specific modules you need
• Use import type for type-only imports
• Prefer named imports over default imports where possible

1. Node.js built-in modules
2. External library imports (including @node-core/*)
3. Relative imports (./*, ../*, #specifier/)
4. Type-only imports at the end of each given section

import { readFile } from 'node:fs/promises';

import { SomeComponent } from '@node-core/ui-components/Common/SomeComponent';
import type { FC } from 'react';

import { myHook } from '../hooks/myHook';
import type { MyComponentProps } from './types';

​

Component guidelines

• Use the FC type from React for component definitions
• Use FC<PropsWithChildren<MyComponentProps>> when the component accepts a children prop
• Prefix prop type names with the component name (e.g. MyComponentProps)
• Always use default exports for React components
• Avoid direct DOM or Web API access in components — use hooks or utilities instead
• CSS imports should always be the last import in the file

​

Example component structure

import type { FC } from 'react';

import styles from './index.module.css';

type MyComponentProps = {
  title: string;
  isVisible?: boolean;
};

const MyComponent: FC<MyComponentProps> = ({ title, isVisible = true }) => {
  if (!isVisible) {
    return null;
  }

  return (
    <div className={styles.myComponent}>
      <h2 className={styles.componentTitle}>{title}</h2>
    </div>
  );
};

export default MyComponent;

​

CSS guidelines

• Use camelCase for CSS class names
• Use Tailwind’s @apply directive to apply utility classes
• Define one Tailwind utility class per line for readability
• Avoid plain CSS properties and inline styles in JavaScript
• Write all styles inside CSS Modules — no inline styles

.myComponent {
  @apply flex
    flex-col
    items-center
    justify-center
    rounded-lg
    bg-white
    p-4
    shadow-md;
}

.componentTitle {
  @apply mb-4
    text-2xl
    font-bold
    text-gray-900;
}

​

File naming conventions

​

Code organization

• Keep related files together in component folders
• Use index files for clean imports
• Group similar functionality in dedicated directories
• Follow the established patterns in the existing codebase

​

Documentation standards

• Use JSDoc comments for complex functions and utilities
• Document component props with TypeScript interfaces
• Include Storybook stories for UI components
• Keep README files updated when making significant changes

​

Performance guidelines

• Import only what you need to minimize bundle size
• Use dynamic imports for large components where appropriate
• Optimize images and assets
• Follow React best practices for rendering performance

​

IDE configuration