# driponfleek/bankai-ui architecture

> Architecture diagram of the GitHub repository driponfleek/bankai-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/driponfleek/bankai-ui
- Repository: https://github.com/driponfleek/bankai-ui

## Overview

bankai-ui is a React UI SDK and design-system toolkit. An application developer uses its components and utilities to build accessible, customizable interfaces; theme tokens and generators support visual styling, while the Storybook library supplies interactive previews and design-system documentation. The repository also includes color and date/time libraries. The graph emphasizes these product capabilities and the sampled Storybook/theme calls; most component internals and utility relationships were not sampled, so those subsystem links are documented at a high level rather than asserted as call chains.

Main entry points: [`packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx`](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx) (Preview With Code), [`packages/storybook-lib/src/components/layout/StoryLayout.jsx`](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/layout/StoryLayout.jsx) (Story Layout), [`packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx`](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx) (Component Preview), [`packages/lib/theme-utils/index.js`](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/index.js) (Theme Generators)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_components["UI Components"]
  node_ui["Component Packages"]
  node_forms["Form Elements"]
  node_colorpicker["Color Picker"]
  node_icons["Icon Components"]
  node_iconexports["Icon Exports<br/>[index.js]"]
  node_typography["Typography<br/>[Paragraph.jsx]"]
end

subgraph group_theme["Theme System"]
  node_themeapi["Theme Utilities<br/>[index.js]"]
  node_design_tokens["Design Tokens"]
  node_radii_tokens["Core Radii Tokens<br/>[coreRadiiConst.js]"]
  node_scale_tokens["Core Scale Tokens<br/>[coreScalesConst.js]"]
  node_semantic_colors["Semantic Colors"]
  node_data_massage["Theme Data Massage"]
  node_theme_helpers["Theme Helpers<br/>[helperUtils.js]"]
  node_typography_tokens["Typography Tokens<br/>[typographyUtils.js]"]
  node_theme_service["Theme Generators<br/>[index.js]"]
end

subgraph group_utilities["Domain Utilities"]
  node_color_utils["Color Utilities"]
  node_date_utils["Date-Time Utilities"]
end

subgraph group_storybook["Storybook Library"]
  node_storybook["Storybook Helpers<br/>[index.js]"]
  node_story_layout["Story Layout<br/>[StoryLayout.jsx]"]
  node_component_preview_code["Preview With Code"]
  node_component_preview["Component Preview"]
  node_code_block["Code Block<br/>[CodeBlock.jsx]"]
  node_stories_config["Story Configuration"]
end

node_developer(("Application Developer"))
node_reactapp["React Application"]

node_developer -->|"builds with"| node_reactapp
node_reactapp -.->|"uses components"| node_ui
node_reactapp -.->|"uses color tools"| node_color_utils
node_reactapp -.->|"uses date-time tools"| node_date_utils
node_reactapp -.->|"uses theming"| node_themeapi
node_reactapp -.->|"documents components"| node_storybook
node_iconexports -->|"exports"| node_icons
node_colorpicker -->|"uses color helpers"| node_color_utils
node_component_preview_code -->|"renders"| node_component_preview
node_component_preview_code -->|"renders"| node_code_block
node_component_preview_code -->|"gets CSS class"| node_stories_config
node_component_preview -->|"gets CSS class"| node_stories_config
node_story_layout -->|"generates theme CSS"| node_theme_service
node_story_layout -->|"generates design tokens"| node_theme_service

click node_ui "https://github.com/driponfleek/bankai-ui/tree/main/packages/components"
click node_forms "https://github.com/driponfleek/bankai-ui/tree/main/packages/components/form-elements/src"
click node_colorpicker "https://github.com/driponfleek/bankai-ui/blob/main/packages/components/form-elements/src/ColorPickerInputLegacy.jsx"
click node_icons "https://github.com/driponfleek/bankai-ui/blob/main/packages/components/icons/src/BankaiController.jsx"
click node_iconexports "https://github.com/driponfleek/bankai-ui/blob/main/packages/components/icons/index.js"
click node_typography "https://github.com/driponfleek/bankai-ui/blob/main/packages/components/typography/src/Paragraph.jsx"
click node_themeapi "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/index.js"
click node_design_tokens "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/utility/utilityDataConst.js"
click node_radii_tokens "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/core/coreRadiiConst.js"
click node_scale_tokens "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/core/coreScalesConst.js"
click node_semantic_colors "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/semantic/semanticColorsConst.js"
click node_data_massage "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/dataMassageUtils.js"
click node_theme_helpers "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/helperUtils.js"
click node_typography_tokens "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/typographyUtils.js"
click node_color_utils "https://github.com/driponfleek/bankai-ui/tree/main/packages/lib/color-utils/src"
click node_date_utils "https://github.com/driponfleek/bankai-ui/tree/main/packages/lib/date-time-utils/src"
click node_storybook "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/index.js"
click node_story_layout "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/layout/StoryLayout.jsx"
click node_component_preview_code "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx"
click node_component_preview "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx"
click node_code_block "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/code/CodeBlock.jsx"
click node_stories_config "https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/utils/storiesConfigUtils.js"
click node_theme_service "https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_ui,node_forms,node_colorpicker,node_icons,node_iconexports,node_typography toneBlue
class node_themeapi,node_design_tokens,node_radii_tokens,node_scale_tokens,node_semantic_colors,node_data_massage,node_theme_helpers,node_typography_tokens,node_theme_service toneAmber
class node_color_utils,node_date_utils toneMint
class node_storybook,node_story_layout,node_component_preview_code,node_component_preview,node_code_block,node_stories_config toneRose
class node_developer,node_reactapp toneIndigo
```

## Components

### UI Components

- [Component Packages](https://github.com/driponfleek/bankai-ui/tree/main/packages/components): `packages/components`
- [Form Elements](https://github.com/driponfleek/bankai-ui/tree/main/packages/components/form-elements/src): `packages/components/form-elements/src`
- [Color Picker](https://github.com/driponfleek/bankai-ui/blob/main/packages/components/form-elements/src/ColorPickerInputLegacy.jsx): `packages/components/form-elements/src/ColorPickerInputLegacy.jsx`
- [Icon Components](https://github.com/driponfleek/bankai-ui/blob/main/packages/components/icons/src/BankaiController.jsx): `packages/components/icons/src/BankaiController.jsx`
- [Icon Exports](https://github.com/driponfleek/bankai-ui/blob/main/packages/components/icons/index.js): `packages/components/icons/index.js`
- [Typography](https://github.com/driponfleek/bankai-ui/blob/main/packages/components/typography/src/Paragraph.jsx): `packages/components/typography/src/Paragraph.jsx`

### Theme System

- [Theme Utilities](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/index.js): `packages/lib/theme-utils/index.js`
- [Design Tokens](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/utility/utilityDataConst.js): `packages/lib/theme-utils/src/const/tokens/utility/utilityDataConst.js`
- [Core Radii Tokens](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/core/coreRadiiConst.js): `packages/lib/theme-utils/src/const/tokens/core/coreRadiiConst.js`
- [Core Scale Tokens](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/core/coreScalesConst.js): `packages/lib/theme-utils/src/const/tokens/core/coreScalesConst.js`
- [Semantic Colors](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/const/tokens/semantic/semanticColorsConst.js): `packages/lib/theme-utils/src/const/tokens/semantic/semanticColorsConst.js`
- [Theme Data Massage](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/dataMassageUtils.js): `packages/lib/theme-utils/src/utils/dataMassageUtils.js`
- [Theme Helpers](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/helperUtils.js): `packages/lib/theme-utils/src/utils/helperUtils.js`
- [Typography Tokens](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/src/utils/typographyUtils.js): `packages/lib/theme-utils/src/utils/typographyUtils.js`
- [Theme Generators](https://github.com/driponfleek/bankai-ui/blob/main/packages/lib/theme-utils/index.js): `packages/lib/theme-utils/index.js`

### Domain Utilities

- [Color Utilities](https://github.com/driponfleek/bankai-ui/tree/main/packages/lib/color-utils/src): `packages/lib/color-utils/src`
- [Date-Time Utilities](https://github.com/driponfleek/bankai-ui/tree/main/packages/lib/date-time-utils/src): `packages/lib/date-time-utils/src`

### Storybook Library

- [Storybook Helpers](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/index.js): `packages/storybook-lib/index.js`
- [Story Layout](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/layout/StoryLayout.jsx): `packages/storybook-lib/src/components/layout/StoryLayout.jsx`
- [Preview With Code](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx): `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx`
- [Component Preview](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx): `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx`
- [Code Block](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/components/docblocks/code/CodeBlock.jsx): `packages/storybook-lib/src/components/docblocks/code/CodeBlock.jsx`
- [Story Configuration](https://github.com/driponfleek/bankai-ui/blob/main/packages/storybook-lib/src/utils/storiesConfigUtils.js): `packages/storybook-lib/src/utils/storiesConfigUtils.js`

### Other components

- **Application Developer**
- **React Application**

## Connections

- Application Developer → React Application: builds with
- React Application → Component Packages: uses components
- React Application → Color Utilities: uses color tools
- React Application → Date-Time Utilities: uses date-time tools
- React Application → Theme Utilities: uses theming
- React Application → Storybook Helpers: documents components
- Icon Exports → Icon Components: exports (evidence: `packages/components/icons/index.js`)
- Color Picker → Color Utilities: uses color helpers (evidence: `packages/components/form-elements/src/ColorPickerInputLegacy.jsx`)
- Preview With Code → Component Preview: renders (evidence: `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx`)
- Preview With Code → Code Block: renders (evidence: `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx`)
- Preview With Code → Story Configuration: gets CSS class (evidence: `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx`)
- Component Preview → Story Configuration: gets CSS class (evidence: `packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx`)
- Story Layout → Theme Generators: generates theme CSS (evidence: `packages/storybook-lib/src/components/layout/StoryLayout.jsx`)
- Story Layout → Theme Generators: generates design tokens (evidence: `packages/storybook-lib/src/components/layout/StoryLayout.jsx`)