mirror of
https://github.com/luxfi/dao.git
synced 2026-10-30 16:59:00 +00:00
zeekayandHanzo Dev
a72238953d
typescript 7.0.2 is the native compiler and exports no JavaScript API, so tsup's dts build, typedoc and typescript-eslint cannot read it — packages/ui and packages/wallet both pinned it bare and both build with tsup. It comes in aliased as tsgo and does the typechecking; typescript drops to the 6 line so the tools get their API back. wallet also gains an ambient declare module '*.css', which TS7 wants for the rainbowkit and solana stylesheet imports: 0 diagnostics under both compilers, from 2. ui reports the same 36 under both, all its uninstalled @chakra-ui peer and one duplicate export. wallet's package-lock.json is left alone. It already records typescript 5.9.3 against a 7.0.2 pin, and it cannot be regenerated: rainbowkit 2.2.11 peers wagmi ^2.9.0 while the package asks for ^3.7.7, so every install rewrites the tree rather than resolving it. Co-authored-by: Hanzo Dev <[email protected]>
@luxdao/ui
Lux DAO UI Component Library - A collection of reusable React components built with Chakra UI for the Lux DAO ecosystem.
Installation
npm install @luxdao/ui
# or
pnpm add @luxdao/ui
# or
yarn add @luxdao/ui
Prerequisites
This library requires the following peer dependencies:
{
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
Usage
First, wrap your application with the Lux theme provider:
import { ChakraProvider } from '@chakra-ui/react';
import { luxTheme } from '@luxdao/ui';
function App() {
return (
<ChakraProvider theme={luxTheme}>
{/* Your app */}
</ChakraProvider>
);
}
Then use the components:
import { Badge, Card, LuxTooltip } from '@luxdao/ui';
function MyComponent() {
return (
<Card>
<LuxTooltip label="This is a tooltip">
<Badge labelKey="active" size="base" />
</LuxTooltip>
</Card>
);
}
Components
Layout
Card- Basic card containerContentBox- Content container with titleInfoBox- Information display box
Badges & Status
Badge- Status badge with various statesQuorumBadge- Quorum status indicatorStatusBox- Status display component
Forms
AddressInput- Ethereum address inputBigIntInput- Big integer input fieldDatePicker- Date selection componentLabelWrapper- Form label wrapper
Navigation
Breadcrumbs- Navigation breadcrumbsNavigationLink- Navigation link component
Feedback
LuxTooltip- Custom tooltip componentBarLoader- Loading bar indicatorCircleLoader- Circular loading indicator
Utils
AddressCopier- Copy address to clipboardDisplayAddress- Format and display addressesExternalLink- External link component
Development
# Install dependencies
pnpm install
# Start development mode
pnpm dev
# Build the library
pnpm build
# Run tests
pnpm test
# Start Storybook
pnpm storybook
Theme Customization
The library exports a default theme that can be extended:
import { extendTheme } from '@chakra-ui/react';
import { luxTheme } from '@luxdao/ui';
const customTheme = extendTheme({
colors: {
brand: {
500: '#custom-color',
},
},
}, luxTheme);
License
MIT