Skip to main content

hbf-console Gotchas

Package-specific pitfalls and non-obvious patterns. Loaded automatically by workflow commands.

Coding Style Conventions​

  • No inline styles when a CSS utility class exists: Use className="mb-2" not style={{ marginBottom: 8 }}. Spacing utilities generated via LESS mixin (.generate-spacing(18), @spacer: 4px) in src/styles/less/abstracts/utils.less. Available: .m-N, .mt-N, .mb-N, .ml-N, .mr-N, .mx-N, .my-N, .p-N, .pt-N, .pb-N, .pl-N, .pr-N, .px-N, .py-N for N=0-18. Font sizes: .fs-xs (10px), .fs-sm (12px), .fs-base (14px), .fs-lg (16px), .fs-xl+. Inline styles OK only for positional properties (left, right, top, bottom, maxHeight, maxWidth) without utility equivalents.
  • Prefer Ant Design layout components over raw <div>: Use <Space>, <Row>, <Col> for layout. <Text> / <Typography.Paragraph> for text. <Text type="secondary"> for hint color instead of inline color: 'rgba(0,0,0,0.45)'.
  • Use Form initialValues instead of useEffect + form.setFieldsValue(): When the Form renders after a loading gate (e.g., if (isLoading) return <Card loading />), data is available at render time.
  • Extract repeated ternaries into named constants: e.g., const isVertical = graphDirection === GRAPH_LAYOUTS.VERTICAL.
  • Early return for loading states: Use if (isLoading) return <Skeleton active />; before the main return. All React hooks must be called before the early return.
  • for...of is correct when early-returning from the enclosing function: forEach callbacks can't return from the outer function. Use .filter().forEach() chain style for simple iteration without early return.

flowGraph.js Serialization​

  • New node types with custom data fields MUST have cases in BOTH switch statements: chaptersourceToFlowGraph (backend to frontend, ~line 470) and flowGraphToChaptersource (frontend to backend, ~line 866) in src/utils/transform/flowGraph.js. Without both, node config fields are silently dropped on save/load.

CI/CD​

  • No build/deploy step in .github/workflows/: Only SonarQube. Deployed externally (mechanism unknown). Release automation must account for this.

Pre-commit Hooks​

  • Worktrees need a one-time husky install: After creating a worktree and symlinking node_modules from the main checkout, the .husky/_/husky.sh shim does not exist in the worktree. Running git commit fails with .husky/pre-commit: cannot open .husky/_/husky.sh. Fix: run ./node_modules/.bin/husky install once inside the worktree to create the shim. The fix persists for the worktree's lifetime.
  • Pre-commit hook is heavy (~60s): Runs yarn lint --max-warnings 0 AND yarn test --watchAll=false (full Jest suite, currently 30 suites / 60 tests on utility helpers) AND commitlint. Plan for it when committing — it's not a fast hook. Don't bypass with --no-verify; investigate hook failures instead.