Skip to content

Add license component#57

Merged
Aunshon merged 6 commits intomainfrom
add-license-component
Feb 27, 2026
Merged

Add license component#57
Aunshon merged 6 commits intomainfrom
add-license-component

Conversation

@Aunshon
Copy link
Collaborator

@Aunshon Aunshon commented Feb 27, 2026

Summary by CodeRabbit

  • New Features
    • Added a License UI for activating, deactivating, refreshing and displaying license status, expiry, usage, masked key view, confirmation flow, loading and error states, and customizable labels/date formatting.
  • Documentation
    • Added comprehensive component stories showing various states and an interactive playground.
  • Dependencies
    • Added WordPress hooks library support.

@coderabbitai
Copy link

coderabbitai bot commented Feb 27, 2026

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

📥 Commits

Reviewing files that changed from the base of the PR and between 82895cc and 73cda82.

📒 Files selected for processing (2)
  • src/components/license.tsx
  • src/index.ts
 ___________________________________________________
< Your TODOs are starting to look like a manifesto. >
 ---------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       /   づ

✏️ Tip: You can disable in-progress messages and the fortune message in your review settings.

📝 Walkthrough

Walkthrough

A new License component is introduced to manage license activation, deactivation, and status display, complete with comprehensive Storybook documentation. A @wordpress/hooks dependency is added, and the component is exported in the public API.

Changes

Cohort / File(s) Summary
Dependencies
package.json
Added @wordpress/hooks ^4.39.0 dependency for WordPress action integration.
License Component
src/components/license.tsx
New React component for license management with activation/deactivation flow, status display, key masking, usage tracking, expiry information, and WordPress hooks integration. Includes utility functions for key masking, usage percentage calculation, and date formatting.
License Stories
src/components/License.stories.tsx
Comprehensive Storybook documentation with 9 stories covering inactive states, active states, perpetual licenses, loading/error states, custom labels, missing header images, and an interactive playground with simulated API calls and state transitions.
Public API
src/index.ts
Exports License component and associated types (LicenseProps, LicenseLabels, LicenseStatus) to public API surface.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A license to thrive, now finally here,
With hooks and stories crystal and clear,
Lock, unlock, and refresh with ease,
Watch those activation counts dance and please!
The key is masked, the status shown,
WordPress integration, fully grown! 🔐

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add license component' directly and clearly summarizes the main change: introducing a new License component to the codebase.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch add-license-component

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (2)
src/components/license.tsx (2)

4-4: Remove unused Loader import.

The Loader icon is imported but never used in the component. Only LoaderCircle is used (line 209).

🧹 Proposed fix
-import { Calendar, Eye, EyeOff, Info, KeyRound, Loader, LoaderCircle, RefreshCw } from "lucide-react";
+import { Calendar, Eye, EyeOff, Info, KeyRound, LoaderCircle, RefreshCw } from "lucide-react";
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/license.tsx` at line 4, Remove the unused Loader import from
the lucide-react import list in the license component: edit the import statement
that currently imports Calendar, Eye, EyeOff, Info, KeyRound, Loader,
LoaderCircle, RefreshCw and delete the Loader symbol so only the used icons
(including LoaderCircle) remain; this removes the unused import warning without
changing any other code or behavior in the component.

90-94: Consider revising key masking strategy.

The current implementation reveals the first 18 characters, which may expose a significant portion of the license key. Typical masking shows only the last few characters (e.g., ****-****-jkl012). If this is intentional to help users identify their key, consider documenting the rationale.

💡 Alternative masking approach
 const maskKey = (key: string): string => {
   if (!key) return "";
   if (key.length <= 8) return "*".repeat(key.length);
-  return key.substring(0, 18) + "*".repeat(Math.max(10, key.length - 18));
+  const visibleChars = 6;
+  return "*".repeat(key.length - visibleChars) + key.slice(-visibleChars);
 };
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/license.tsx` around lines 90 - 94, The maskKey function
currently exposes the first 18 characters of a license key; change it to reveal
only the last few characters instead (e.g., last 4) and mask the rest to
minimize leakage: in maskKey keep the short-key behavior (mask entirely if very
short), otherwise build a masked string that preserves the original length but
replaces all characters except the final N (suggest N = 4 or configurable) with
asterisks; update the logic in maskKey to use key.slice(-N) and
"*".repeat(key.length - N) and add a brief comment documenting the chosen
rationale (help users identify a key while minimizing exposure).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/license.tsx`:
- Line 4: Remove the unused Loader import from the lucide-react import list in
the license component: edit the import statement that currently imports
Calendar, Eye, EyeOff, Info, KeyRound, Loader, LoaderCircle, RefreshCw and
delete the Loader symbol so only the used icons (including LoaderCircle) remain;
this removes the unused import warning without changing any other code or
behavior in the component.
- Around line 90-94: The maskKey function currently exposes the first 18
characters of a license key; change it to reveal only the last few characters
instead (e.g., last 4) and mask the rest to minimize leakage: in maskKey keep
the short-key behavior (mask entirely if very short), otherwise build a masked
string that preserves the original length but replaces all characters except the
final N (suggest N = 4 or configurable) with asterisks; update the logic in
maskKey to use key.slice(-N) and "*".repeat(key.length - N) and add a brief
comment documenting the chosen rationale (help users identify a key while
minimizing exposure).

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d7a63cc and 82895cc.

📒 Files selected for processing (4)
  • package.json
  • src/components/License.stories.tsx
  • src/components/license.tsx
  • src/index.ts

@Aunshon Aunshon merged commit 915c3e7 into main Feb 27, 2026
1 check passed
@Aunshon Aunshon deleted the add-license-component branch February 27, 2026 08:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant