@coinswap-app/uikit 1.0.21 → 1.0.22

package/README.md

@@ -1,15 +1,85 @@
-# streda-web-components
+# @coinswap-app/uikit
 
-###### This repo can be found on [Web components repository](https://github.com/CoinSwap-Space/coinswap-uikit).
+UI component library for CoinSwap projects.
+
+> **⚠️ Important**: This package contains both generic UI components and some legacy application-specific components. See the "What Should Be in UIKit" section below for guidance.
 
 ## Installation
 
-1. Clone/download repo
-2. `yarn install`
+```bash
+npm install @coinswap-app/uikit
+```
+
+For wallet functionality (Menu widget, WalletModal, etc.):
+```bash
+npm install @coinswap-app/uikit @web3-react/core ethers
+```
+
+## What Should Be in UIKit?
+
+**✅ Generic, reusable UI components:**
+- Buttons, Inputs, Cards, Modals
+- Typography (Text, Heading)
+- Form controls (Checkbox, Radio, Switch, Toggle)
+- Layout primitives (Box, Flex, Grid)
+- Icons (SVG components)
+- Theme system (colors, breakpoints, etc.)
+- Generic utilities (color helpers, theme values, etc.)
+
+**❌ Application-specific components that should NOT be in uikit:**
+- **Menu/Navigation** - Each app has its own menu structure
+- **Page layouts** - Specific to each application
+- **Feature-specific components** - SpacePad, Farming, IDO components
+- **Business logic** - Wallet verification, user management, etc.
+
+> **Note**: The current uikit contains legacy application-specific components for backwards compatibility. See `documentation/uikit-audit-and-refactoring-plan.md` for migration plan.
 
 ## Usage
 
-**Development with Storybook**
+### Basic Components (Recommended)
+
+```typescript
+import { Button, Card, Text, Heading, Input } from '@coinswap-app/uikit'
+
+function MyComponent() {
+  return (
+    <Card>
+      <Heading>Welcome</Heading>
+      <Text>Hello world</Text>
+      <Input placeholder="Enter value" />
+      <Button>Submit</Button>
+    </Card>
+  )
+}
+```
+
+### Wallet Components (Optional)
+
+For applications that need wallet functionality:
+
+```typescript
+// Import from /wallet instead of main package
+import { Menu, WalletModal, ConnectVerifyPanel } from '@coinswap-app/uikit/wallet'
+```
+
+> **⚠️ Important**: Menu widget is application-specific and should ideally be implemented in each app independently. The Menu in uikit is kept for backwards compatibility only.
+
+### Theme
+
+```typescript
+import { ThemeProvider } from 'styled-components'
+import { light, dark } from '@coinswap-app/uikit'
+
+function App() {
+  return (
+    <ThemeProvider theme={light}>
+      {/* Your app */}
+    </ThemeProvider>
+  )
+}
+```
+
+## Development with Storybook
 
 **_Create new component_**
 1. Create component in tsx extension
@@ -77,21 +147,39 @@
 
 More info about styled-components liblary [StyledComponents Lib](https://styled-components.com/docs).
 
-## Making changes
-1. Versioning: 
-    * MajorVer -> Changes that break backward compatibility
-    * MinorVer -> Backward compatible new features
-    * PatchVer -> Backward compatible bug fixes
-    * BetaVer -> Aren't considered major releases, so the package version number doesn't change
+## Publishing
+
+**⚠️ ALWAYS bump version before publishing!**
+
+1. Update version in `package.json`:
+   ```bash
+   # Edit version in package.json
+   # Format: "X.Y.Z" (e.g., "1.0.21", "1.0.22", "1.1.0")
+   ```
+
+2. Build and publish:
+   ```bash
+   npm run build
+   npm publish --access public
+   ```
+
+   Or use the combined command:
+   ```bash
+   npm run release
+   ```
+
+### Versioning
 
-2. After every change we need to increase package version
-    * For beta version we type {MajorVer}.{MinorVer}.{PatchVer}-{TaskNumber}.{BetaVer}
-    * For stable version we use {MajorVer}.{MinorVer}.{PatchVer}
+- **Major** (X.0.0) - Breaking changes
+- **Minor** (0.X.0) - New features, backwards compatible
+- **Patch** (0.0.X) - Bug fixes, backwards compatible
 
-3. Once we made some changes in the projects we do have two options
-    * Pubish package with beta tag `npm run build` && `npm publish --tag beta`    
-    * Pubish package with stable version `npm run build` && `npm publish`
+## Architecture Notes
 
-4. Once the version is tested on the FE project we need to make PR with stable version of the package
+See `documentation/uikit-audit-and-refactoring-plan.md` for detailed audit and refactoring plan.
 
-- After PR is approved we can change the package version in our FE projects
+**Key principles:**
+- UIKit should contain only generic, reusable components
+- Application-specific features (Menu, SpacePad, Wallet) should be in application code
+- Current uikit contains legacy app-specific components for backwards compatibility
+- New applications should implement their own Menu and navigation