⚠️ Important:
The Security Team has implemented security checks for this repository. To maximize the benefits and ensure compliance:

• Please add a branch protection rule with the gitleaks_secret_scan.yml set as mandatory for the default branch.
• Refer to the Confluence page for detailed instructions on configuring the branch protection rule.

Note: The Security Team conducts audits for new repositories. Adding the branch protection rule is essential to pass the audit.

Need Help?
If you have any questions or need assistance, please reach out to:

• Guardians at [email protected]
• Or ping us on #all-r-guardians for real-time support.

Security Template Repository

This repository serves as a template to add secret scanning mechanisms using GitLeaks in both pre-commit hooks and GitHub Actions for repositories tagged as prod. Any repository created using this template will automatically include security configurations to scan for exposed secrets during the development process.

Features

• Pre-commit Hook: Automatically runs GitLeaks before any commit is made to ensure that no secrets are committed.
• GitHub Action: Triggers a secret scan on every pull request (PR) to ensure secrets are not introduced into the repository during code reviews.

How to Use This Template

1. Create a Repository Using This Template:
   • Click the "Use this template" button on GitHub to create a new repository with all the security configurations pre-loaded.
2. Repository Setup:
   • Once the repository is created, the GitLeaks pre-commit hook and the GitHub Action workflow are automatically set up. You can start working with the security tools in place.

Pre-commit Hook Configuration

The pre-commit hook is configured to run GitLeaks before each commit to ensure no secrets are committed into the repository. The pre-commit uses the following configuration to scan for secrets:

repos:
  - repo: https://github.com/gitleaks/gitleaks
    rev: v8.18.1
    hooks:
      - id: gitleaks

Follow these steps to ensure pre-commit hooks are correctly installed and run:

1. Install Pre-commit: Ensure you have pre-commit installed in your local environment:

   pip install pre-commit

2. Install Pre-commit Hooks: Run the following command to install the pre-commit hooks:

   pre-commit install

3. Run Pre-commit Manually (Optional): To run the GitLeaks check manually without committing, run:

   pre-commit run --all-files

GitHub Action Configuration

A GitHub Action is included in this template to automatically scan for secrets in every pull request. The action is triggered for all pull requests targeting the main or master branch.

GitHub Action Workflow

The GitHub Action uses the following workflow to scan for secrets:

name: Gitleaks - Scanning Secrets in PR

on:
  pull_request:
    types:
      - synchronize
      - opened
    branches:
      - 'main'
      - 'master'

jobs:
  scan:
    uses: Capillary/security-workflows/.github/workflows/gitLeaks_reusable_worflow.yml@main
    secrets:
      GITLEAKS_LICENSE: ${{ secrets.GITLEAKS_LICENSE }}   

Customization

Adjust GitHub Action Workflow

To customize when the GitHub Action runs:

• Modify the .github/workflows/gitleaks_secret_scan.yml file.
• Adjust the on section to trigger scans on additional events or branches.

Blaze UI

A modern React component library built with Ant Design v5, providing enhanced UI components for Capillary applications.

Features

• 🎨 Built on top of Ant Design v5
• 📦 Tree-shakeable ES modules
• 🎯 Full TypeScript support with type definitions
• 🌐 Internationalization ready
• 💅 Styled with SCSS and CSS Modules
• ⚡ Optimized bundle size

Installation

npm install @capillarytech/blaze-ui

or

yarn add @capillarytech/blaze-ui

Usage

Setup

Load fonts and base styles in your application entry point:

import { loadBlazeUI } from '@capillarytech/blaze-ui/utils';

// Load fonts (Roboto, Material Icons) and base styles (sanitize.css)
loadBlazeUI();

Note: If your app already imports sanitize.css directly, webpack will deduplicate it if both resolve to the same module path. To avoid duplication, you can load fonts separately:

import { loadBlazeUIFonts } from '@capillarytech/blaze-ui/utils';
loadBlazeUIFonts();

Using Components

import { CapInput, CapInputSearch, CapInputTextArea, CapInputNumber } from '@capillarytech/blaze-ui';

function MyComponent() {
  return (
    <CapInput 
      placeholder="Enter your name"
      size="large"
      errorMessage="This field is required"
    />
  );
}

Exploring Components

To explore all available components and their usage examples, run Storybook locally:

npm start

This will start the Storybook development server at http://localhost:6006, where you can:

• Browse all available components
• View interactive examples
• Test different props and configurations
• See component documentation and API reference

Styling

The library uses CSS Modules with SCSS and automatically embeds styles in the JavaScript bundle. No separate CSS imports are needed - styles are automatically injected when you import components.

Using Design Tokens and Variables

Blaze UI provides a comprehensive set of design tokens (colors, spacing, typography, etc.) in the styled folder that you can use in your application to maintain consistency with the component library.

For SCSS/SASS Projects

Import the SCSS variables file (styled/variables.scss) in your stylesheets:

// Import SCSS variables
@import '@capillarytech/blaze-ui/styled/variables.scss';

.my-component {
  color: $cap-primary-base;
  background-color: $cap-g09;
  padding: $cap-spacing-md;
  border-radius: $cap-border-radius-base;
  font-size: $cap-font-size-base;
}

Available SCSS Variables:

• Colors: $cap-primary-base, $cap-secondary-base, $cap-orange, $cap-blue, $cap-red, etc.
• Grey Scale: $cap-g01 through $cap-g10
• Spacing: $cap-spacing-xs, $cap-spacing-sm, $cap-spacing-md, $cap-spacing-lg, $cap-spacing-xl
• Typography: $cap-font-size-base, $cap-line-height-base, $cap-font-weight-regular, $cap-font-weight-medium, $cap-font-weight-bold
• Border Radius: $cap-border-radius-sm, $cap-border-radius-base, $cap-border-radius-lg
• Shadows: $cap-box-shadow-base, $cap-box-shadow-card

For Styled-Components/CSS-in-JS Projects

Import TypeScript variables (styled/variables.ts) in your JavaScript/TypeScript files:

import * as vars from '@capillarytech/blaze-ui/styled/variables';
import styled from 'styled-components';

const MyComponent = styled.div`
  color: ${vars.CAP_PRIMARY.base};
  background-color: ${vars.CAP_G09};
  padding: ${vars.CAP_SPACING_MD};
  border-radius: ${vars.CAP_BORDER_RADIUS_BASE};
`;

Available TypeScript Exports:

• Colors: CAP_PRIMARY, CAP_SECONDARY, CAP_ORANGE, CAP_BLUE, CAP_RED, etc.
• Grey Scale: CAP_G01 through CAP_G10
• Spacing: CAP_SPACING_XS, CAP_SPACING_SM, CAP_SPACING_MD, CAP_SPACING_LG, CAP_SPACING_XL
• Typography: CAP_FONT_SIZE_BASE, CAP_LINE_HEIGHT_BASE, CAP_FONT_WEIGHT_REGULAR, CAP_FONT_WEIGHT_MEDIUM, CAP_FONT_WEIGHT_BOLD
• Border Radius: CAP_BORDER_RADIUS_SM, CAP_BORDER_RADIUS_BASE, CAP_BORDER_RADIUS_LG
• Shadows: CAP_BOX_SHADOW_BASE, CAP_BOX_SHADOW_CARD

Development

Setup

npm install

Build

Standard Build (for development)

npm run build

This builds the library without generating the exports field. Use this for regular development builds.

Build for Local Testing

npm run build:local

This builds the library with exports field generation. Use this when you want to test the library locally in a consuming application using npm run link.

Example workflow for local testing:

# In blaze-ui directory
npm run build:local
npm run link

# In your consuming app directory
npm link @capillarytech/blaze-ui

# Now you can test the library in your app

Note: Remember to run node scripts/remove-exports.js after testing to clean up the exports field from package.json.

Development Mode

npm run dev

Linting

npm run lint
npm run lint:fix

Format Code

npm run prettier

Publishing a New Version

The library uses an automated publishing script to manage versioning and deployment to NPM.

Prerequisites

• Ensure you have write permissions to the NPM package @capillarytech/blaze-ui
• Ensure you're authenticated with NPM (npm login)
• Make sure all changes are committed and pushed to the repository

Version Types

The library supports different version types based on semantic versioning:

Production Releases

• major: Breaking changes (e.g., 1.0.0 → 2.0.0)
• minor: New features, backwards compatible (e.g., 1.0.0 → 1.1.0)
• patch: Bug fixes, backwards compatible (e.g., 1.0.0 → 1.0.1)

Pre-releases

• alpha: Early testing releases (e.g., 1.0.0 → 1.0.1-alpha.0)
• beta: Feature complete, testing releases (e.g., 1.0.0 → 1.0.1-beta.0)

Publishing Steps

Run the publish script with the desired version type:

# For production releases
bash scripts/publish.sh major    # Breaking changes
bash scripts/publish.sh minor    # New features
bash scripts/publish.sh patch    # Bug fixes

# For pre-releases
bash scripts/publish.sh alpha    # Alpha release
bash scripts/publish.sh beta     # Beta release

What the Script Does

The publish script automatically handles:

1. Version Bump: Updates the version in package.json based on the specified type
2. Exports Generation: Generates the exports field for proper module resolution
3. Build: Cleans and rebuilds the library
   • Runs webpack build
   • Generates TypeScript type definitions
4. Publish: Publishes to NPM with the appropriate tag
   • latest tag for production releases (major/minor/patch)
   • alpha or beta tags for pre-releases
5. Cleanup: Removes the exports field from package.json
6. Git Tags: Pushes version tags to the repository

Example Workflow

# Publishing a new feature
bash scripts/publish.sh minor

# Publishing a bug fix
bash scripts/publish.sh patch

# Publishing a beta version for testing
bash scripts/publish.sh beta

Migration from cap-ui-library

This library is designed as a modern replacement for @capillarytech/cap-ui-library, migrated from Ant Design v3 to v5. Key changes include:

1. Updated Ant Design APIs: All components now use Ant Design v5 APIs
2. Modern React patterns: Functional components with hooks instead of class components
3. Full TypeScript support: Complete type definitions for all components and utilities
4. Better tree-shaking: Optimized bundle size with proper ES modules

Contributing

Please read our contributing guidelines before submitting PRs.

License

ISC © Capillary Technologies