@capillarytech/blaze-ui 0.3.3 → 1.0.1

package/README.md

@@ -112,9 +112,9 @@ A modern React component library built with Ant Design v5, providing enhanced UI
 
 - 🎨 Built on top of Ant Design v5
 - 📦 Tree-shakeable ES modules
-- 🎯 TypeScript support (coming soon)
+- 🎯 Full TypeScript support with type definitions
 - 🌐 Internationalization ready
-- 💅 Styled with styled-components
+- 💅 Styled with SCSS and CSS Modules
 - ⚡ Optimized bundle size
 
 ## Installation
@@ -131,8 +131,28 @@ yarn add @capillarytech/blaze-ui
 
 ## Usage
 
+### Setup
+
+Load fonts and base styles in your application entry point:
+
 ```jsx
-import { CapInput } from '@capillarytech/blaze-ui';
+import { loadBlazeUI } from '@capillarytech/blaze-ui/utils';
+
+// Load fonts (Roboto, Material Icons) and base styles (sanitize.css)
+loadBlazeUI();
+```
+
+**Note:** If your app already imports `sanitize.css` directly, webpack will deduplicate it if both resolve to the same module path. To avoid duplication, you can load fonts separately:
+
+```jsx
+import { loadBlazeUIFonts } from '@capillarytech/blaze-ui/utils';
+loadBlazeUIFonts();
+```
+
+### Using Components
+
+```jsx
+import { CapInput, CapInputSearch, CapInputTextArea, CapInputNumber } from '@capillarytech/blaze-ui';
 
 function MyComponent() {
   return (
@@ -145,83 +165,77 @@ function MyComponent() {
 }
 ```
 
-## Components
-
-### CapInput
+## Exploring Components
 
-Enhanced input component with built-in error states and verification indicators.
+To explore all available components and their usage examples, run Storybook locally:
 
-#### Basic Input
-```jsx
-<CapInput 
-  placeholder="Enter text"
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-/>
+```bash
+npm start
 ```
 
-#### Input with Error
-```jsx
-<CapInput 
-  placeholder="Email"
-  errorMessage="Invalid email address"
-  value={email}
-  onChange={(e) => setEmail(e.target.value)}
-/>
-```
+This will start the Storybook development server at `http://localhost:6006`, where you can:
+- Browse all available components
+- View interactive examples
+- Test different props and configurations
+- See component documentation and API reference
 
-#### Verified Input
-```jsx
-<CapInput 
-  placeholder="Username"
-  isVerified={true}
-  value={username}
-  onChange={(e) => setUsername(e.target.value)}
-/>
-```
+## Styling
 
-#### Search Input
-```jsx
-<CapInput.Search
-  placeholder="Search..."
-  enterButton="Search"
-  onSearch={(value) => handleSearch(value)}
-/>
-```
+The library uses CSS Modules with SCSS and automatically embeds styles in the JavaScript bundle. No separate CSS imports are needed - styles are automatically injected when you import components.
 
-#### TextArea
-```jsx
-<CapInput.TextArea
-  placeholder="Enter description"
-  rows={4}
-  showCount
-  maxLength={500}
-/>
-```
+### Using Design Tokens and Variables
 
-#### Number Input
-```jsx
-<CapInput.Number
-  placeholder="Enter amount"
-  min={0}
-  max={1000}
-  precision={2}
-/>
+Blaze UI provides a comprehensive set of design tokens (colors, spacing, typography, etc.) in the `styled` folder that you can use in your application to maintain consistency with the component library.
+
+#### For SCSS/SASS Projects
+
+Import the SCSS variables file (`styled/variables.scss`) in your stylesheets:
+
+```scss
+// Import SCSS variables
+@import '@capillarytech/blaze-ui/styled/variables.scss';
+
+.my-component {
+  color: $cap-primary-base;
+  background-color: $cap-g09;
+  padding: $cap-spacing-md;
+  border-radius: $cap-border-radius-base;
+  font-size: $cap-font-size-base;
+}
 ```
 
-## Styling
+**Available SCSS Variables:**
+- **Colors:** `$cap-primary-base`, `$cap-secondary-base`, `$cap-orange`, `$cap-blue`, `$cap-red`, etc.
+- **Grey Scale:** `$cap-g01` through `$cap-g10`
+- **Spacing:** `$cap-spacing-xs`, `$cap-spacing-sm`, `$cap-spacing-md`, `$cap-spacing-lg`, `$cap-spacing-xl`
+- **Typography:** `$cap-font-size-base`, `$cap-line-height-base`, `$cap-font-weight-regular`, `$cap-font-weight-medium`, `$cap-font-weight-bold`
+- **Border Radius:** `$cap-border-radius-sm`, `$cap-border-radius-base`, `$cap-border-radius-lg`
+- **Shadows:** `$cap-box-shadow-base`, `$cap-box-shadow-card`
 
-The library uses styled-components and exports style variables for consistent theming:
+#### For Styled-Components/CSS-in-JS Projects
 
-```jsx
-import { styledVars } from '@capillarytech/blaze-ui';
+Import TypeScript variables (`styled/variables.ts`) in your JavaScript/TypeScript files:
+
+```typescript
+import * as vars from '@capillarytech/blaze-ui/styled/variables';
+import styled from 'styled-components';
 
-const MyStyledComponent = styled.div`
-  color: ${styledVars.CAP_PRIMARY.base};
-  font-family: ${styledVars.FONT_FAMILY};
+const MyComponent = styled.div`
+  color: ${vars.CAP_PRIMARY.base};
+  background-color: ${vars.CAP_G09};
+  padding: ${vars.CAP_SPACING_MD};
+  border-radius: ${vars.CAP_BORDER_RADIUS_BASE};
 `;
 ```
 
+**Available TypeScript Exports:**
+- **Colors:** `CAP_PRIMARY`, `CAP_SECONDARY`, `CAP_ORANGE`, `CAP_BLUE`, `CAP_RED`, etc.
+- **Grey Scale:** `CAP_G01` through `CAP_G10`
+- **Spacing:** `CAP_SPACING_XS`, `CAP_SPACING_SM`, `CAP_SPACING_MD`, `CAP_SPACING_LG`, `CAP_SPACING_XL`
+- **Typography:** `CAP_FONT_SIZE_BASE`, `CAP_LINE_HEIGHT_BASE`, `CAP_FONT_WEIGHT_REGULAR`, `CAP_FONT_WEIGHT_MEDIUM`, `CAP_FONT_WEIGHT_BOLD`
+- **Border Radius:** `CAP_BORDER_RADIUS_SM`, `CAP_BORDER_RADIUS_BASE`, `CAP_BORDER_RADIUS_LG`
+- **Shadows:** `CAP_BOX_SHADOW_BASE`, `CAP_BOX_SHADOW_CARD`
+
 ## Development
 
 ### Setup
@@ -230,9 +244,32 @@ npm install
 ```
 
 ### Build
+
+#### Standard Build (for development)
 ```bash
 npm run build
 ```
+This builds the library without generating the exports field. Use this for regular development builds.
+
+#### Build for Local Testing
+```bash
+npm run build:local
+```
+This builds the library with exports field generation. Use this when you want to test the library locally in a consuming application using `npm run link`.
+
+**Example workflow for local testing:**
+```bash
+# In blaze-ui directory
+npm run build:local
+npm run link
+
+# In your consuming app directory
+npm link @capillarytech/blaze-ui
+
+# Now you can test the library in your app
+```
+
+**Note:** Remember to run `node scripts/remove-exports.js` after testing to clean up the exports field from package.json.
 
 ### Development Mode
 ```bash
@@ -250,13 +287,79 @@ npm run lint:fix
 npm run prettier
 ```
 
+## Publishing a New Version
+
+The library uses an automated publishing script to manage versioning and deployment to NPM.
+
+### Prerequisites
+
+- Ensure you have write permissions to the NPM package `@capillarytech/blaze-ui`
+- Ensure you're authenticated with NPM (`npm login`)
+- Make sure all changes are committed and pushed to the repository
+
+### Version Types
+
+The library supports different version types based on semantic versioning:
+
+#### Production Releases
+- **major**: Breaking changes (e.g., 1.0.0 → 2.0.0)
+- **minor**: New features, backwards compatible (e.g., 1.0.0 → 1.1.0)  
+- **patch**: Bug fixes, backwards compatible (e.g., 1.0.0 → 1.0.1)
+
+#### Pre-releases
+- **alpha**: Early testing releases (e.g., 1.0.0 → 1.0.1-alpha.0)
+- **beta**: Feature complete, testing releases (e.g., 1.0.0 → 1.0.1-beta.0)
+
+### Publishing Steps
+
+Run the publish script with the desired version type:
+
+```bash
+# For production releases
+bash scripts/publish.sh major    # Breaking changes
+bash scripts/publish.sh minor    # New features
+bash scripts/publish.sh patch    # Bug fixes
+
+# For pre-releases
+bash scripts/publish.sh alpha    # Alpha release
+bash scripts/publish.sh beta     # Beta release
+```
+
+### What the Script Does
+
+The publish script automatically handles:
+
+1. **Version Bump**: Updates the version in `package.json` based on the specified type
+2. **Exports Generation**: Generates the exports field for proper module resolution
+3. **Build**: Cleans and rebuilds the library
+   - Runs webpack build
+   - Generates TypeScript type definitions
+4. **Publish**: Publishes to NPM with the appropriate tag
+   - `latest` tag for production releases (major/minor/patch)
+   - `alpha` or `beta` tags for pre-releases
+5. **Cleanup**: Removes the exports field from `package.json`
+6. **Git Tags**: Pushes version tags to the repository
+
+### Example Workflow
+
+```bash
+# Publishing a new feature
+bash scripts/publish.sh minor
+
+# Publishing a bug fix
+bash scripts/publish.sh patch
+
+# Publishing a beta version for testing
+bash scripts/publish.sh beta
+```
+
 ## Migration from cap-ui-library
 
 This library is designed as a modern replacement for `@capillarytech/cap-ui-library`, migrated from Ant Design v3 to v5. Key changes include:
 
 1. **Updated Ant Design APIs**: All components now use Ant Design v5 APIs
 2. **Modern React patterns**: Functional components with hooks instead of class components
-3. **Improved TypeScript support**: Better type definitions (coming soon)
+3. **Full TypeScript support**: Complete type definitions for all components and utilities
 4. **Better tree-shaking**: Optimized bundle size with proper ES modules
 
 ## Contributing

package/dist/CapAlert/CapAlert.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CapAlertProps {
+    className?: string;
+    type?: 'success' | 'info' | 'warning' | 'error';
+    message?: React.ReactNode;
+    description?: React.ReactNode;
+    showIcon?: boolean;
+    [key: string]: unknown;
+}
+declare const CapAlert: React.FC<CapAlertProps>;
+export default CapAlert;
+//# sourceMappingURL=CapAlert.d.ts.map

package/dist/CapAlert/CapAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapAlert.d.ts","sourceRoot":"","sources":["../../components/CapAlert/CapAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAIrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/CapAlert/CapAlert.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CapAlert.test.d.ts.map

package/dist/CapAlert/CapAlert.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapAlert.test.d.ts","sourceRoot":"","sources":["../../components/CapAlert/CapAlert.test.tsx"],"names":[],"mappings":""}

package/dist/CapAlert/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './CapAlert';
+export type { CapAlertProps } from './CapAlert';
+//# sourceMappingURL=index.d.ts.map

package/dist/CapAlert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}