How driponfleek/bankai-ui works
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: ComponentPreviewWithCodeBlock.jsx Preview With Code · StoryLayout.jsx Story Layout · ComponentPreview.jsx Component Preview · index.js Theme Generators
Components 25
UI Components
- Component Packages
packages/components - Form Elements
packages/components/form-elements/src - Color Picker
packages/components/form-elements/src/ColorPickerInputLegacy.jsx - Icon Components
packages/components/icons/src/BankaiController.jsx - Icon Exports
packages/components/icons/index.js - Typography
packages/components/typography/src/Paragraph.jsx
Theme System
- Theme Utilities
packages/lib/theme-utils/index.js - Design Tokens
packages/lib/theme-utils/src/const/tokens/utility/utilityDataConst.js - Core Radii Tokens
packages/lib/theme-utils/src/const/tokens/core/coreRadiiConst.js - Core Scale Tokens
packages/lib/theme-utils/src/const/tokens/core/coreScalesConst.js - Semantic Colors
packages/lib/theme-utils/src/const/tokens/semantic/semanticColorsConst.js - Theme Data Massage
packages/lib/theme-utils/src/utils/dataMassageUtils.js - Theme Helpers
packages/lib/theme-utils/src/utils/helperUtils.js - Typography Tokens
packages/lib/theme-utils/src/utils/typographyUtils.js - Theme Generators
packages/lib/theme-utils/index.js
Domain Utilities
- Color Utilities
packages/lib/color-utils/src - Date-Time Utilities
packages/lib/date-time-utils/src
Storybook Library
- Storybook Helpers
packages/storybook-lib/index.js - Story Layout
packages/storybook-lib/src/components/layout/StoryLayout.jsx - Preview With Code
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx - Component Preview
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx - Code Block
packages/storybook-lib/src/components/docblocks/code/CodeBlock.jsx - Story Configuration
packages/storybook-lib/src/utils/storiesConfigUtils.js
Other components
- Application Developer
- React Application
Connections 14
- 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
packages/components/icons/index.js - Color Picker → Color Utilities: uses color helpers
packages/components/form-elements/src/ColorPickerInputLegacy.jsx - Preview With Code → Component Preview: renders
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx - Preview With Code → Code Block: renders
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx - Preview With Code → Story Configuration: gets CSS class
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreviewWithCodeBlock.jsx - Component Preview → Story Configuration: gets CSS class
packages/storybook-lib/src/components/docblocks/component-preview/ComponentPreview.jsx - Story Layout → Theme Generators: generates theme CSS
packages/storybook-lib/src/components/layout/StoryLayout.jsx - Story Layout → Theme Generators: generates design tokens
packages/storybook-lib/src/components/layout/StoryLayout.jsx