Enhance TopBar component with scroll-based title visibility#75
Draft
danielppolo wants to merge 119 commits into
Draft
Enhance TopBar component with scroll-based title visibility#75danielppolo wants to merge 119 commits into
danielppolo wants to merge 119 commits into
Conversation
* feat: Expand color palette with additional color variants and refined color values * refactor: Improve color palette visualization in Storybook documentation * chore: Prepare minor version bump for color palette update
* feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation
* feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts.
* refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module
* Modify RadioGroupItem component styles for improved visual consistency and accessibility. * Add descriptive documentation for the RadioGroup component in Storybook.
* feat: Enhance Checkbox component with additional props and improve Tick icon styling - Added new props: asChild, defaultChecked, required, name, and value to Checkbox for better customization. - Updated Checkbox's default checked state documentation. - Improved Tick icon's stroke width and line cap for better visual consistency. - Enhanced Checkbox story documentation for clarity. * fix: Update Checkbox documentation to clarify prop usage - Changed the documentation for the `asChild` prop to specify its purpose of forwarding the root element instead of indicating default checked state.
- Introduced a new Progress component for visualizing task completion. - Updated package.json to include @radix-ui/react-progress dependency. - Added Progress stories for documentation in Storybook. - Exported Progress component in the main index file. - Refactored use-toast.tsx to remove unused imports.
…andling (#46) * refactor: Update Input and OTPField components for improved styling and error handling - Adjusted Input component styles to refine border and error color definitions. - Modified OTPField component to enhance layout spacing and error handling logic. * feat: Add PasswordField component with show/hide password functionality (#52) - Introduced PasswordField component that allows users to toggle password visibility using an Eye icon. - Created Eye icon component for visual representation. - Added Storybook stories for PasswordField to demonstrate usage and styling. * feat: Add TextArea component to UI kit (#49) - Introduced TextArea component for multi-line text input with customizable error and focus states. - Updated package.json to export TextArea component. - Enhanced index.ts to include TextArea in the main exports. - Added Storybook stories for TextArea showcasing various states (default, error, disabled, focused, with value). - Refactored Input component styles for improved border handling. * Update SearchField (#47) * feat: Enhance ClearButton and add MagicWand icon - Updated ClearButton component to use a new Clear icon with improved dimensions and styling. - Introduced MagicWand icon component for use in the UI kit. - Adjusted Magnifier icon dimensions and styling for consistency. - Enhanced PasteButton to include the new MagicWand icon and updated its layout. - Modified SearchField to support a placeholder prop and improved event handling for paste functionality. * feat: Add WalletAddressField component to UI kit (#48) - Introduced WalletAddressField component for entering wallet addresses with error and validation states. - Updated package.json to include new component exports. - Enhanced Input component styles for better user experience. - Added Storybook stories for WalletAddressField to demonstrate various states and usage. * feat: Add TextArea component to UI kit (#49) - Introduced TextArea component for multi-line text input with customizable error and focus states. - Updated package.json to export TextArea component. - Enhanced index.ts to include TextArea in the main exports. - Added Storybook stories for TextArea showcasing various states (default, error, disabled, focused, with value). - Refactored Input component styles for improved border handling. * refactor: Update Input component styles for improved focus handling - Refined focus border styling for the Input component to enhance user experience. - Adjusted class names for better clarity and consistency in styling. * chore: Remove TextArea component export from package.json - Deleted TextArea component export from package.json as part of the ongoing refactor of the UI kit. - This change streamlines the component exports and focuses on the remaining components.
* feat: Add BottomBar component for action button layout * Introduce BottomBar component with customizable direction (horizontal/vertical) * Create index file for BottomBar export * Add Storybook stories for BottomBar showcasing both layouts * fix: Update BottomBar component styles for full-width layout * Modify BottomBar component to ensure it spans the full width with updated class variants * Enhance layout consistency for better user experience * fix: Update BottomBar component layout for responsive design * Adjust BottomBar styles to ensure proper column layout for horizontal direction * Improve responsiveness by modifying grid structure for better alignment * feat: Introduce AlertDialog component for modal interactions * Add AlertDialog component with customizable features including header, footer, and content * Implement context for managing dialog state and dismissibility * Create associated icons and styles for enhanced UI * Add Storybook stories to demonstrate various AlertDialog use cases * Update package.json to include new dependency for AlertDialog * feat: Enhance Drawer component with new header and footer * Introduce DrawerHeader and DrawerFooter components for improved structure * Update Drawer to support dismissible functionality * Refactor DrawerContent to include new DrawerTitle and DrawerDescription components * Modify Storybook stories to demonstrate new Drawer features and layout * feat: Refactor Drawer component to enhance functionality and structure * Introduce new DrawerContext and useDrawer hook for improved state management * Expand DrawerProps to include additional properties for customization * Implement DrawerHeader, DrawerTitle, and DrawerDescription components for better content organization * Update Storybook stories to showcase new features and configurations, including full-page drawer support * Refactor DrawerContent to adapt to new props and improve layout handling * feat: Refactor AlertDialog component for improved structure and functionality * Remove deprecated dependencies and streamline AlertDialog implementation * Introduce new types for AlertDialog components to enhance type safety * Implement context and hooks for managing dialog state and dismissibility * Update Storybook stories to showcase new AlertDialog features and configurations * Refactor Drawer component to align with new AlertDialog structure * refactor: Update AlertDialog and Drawer components for improved functionality * Simplify AlertDialog props by removing unnecessary options and enforcing default values * Enhance Drawer component to accept modal prop directly and streamline its implementation * Update types for AlertDialog and Drawer to improve type safety and clarity * Refactor Storybook stories to reflect changes in component structure and props * feat: Add AlertDialog and BottomBar components to UI kit * Introduce new AlertDialog and BottomBar components with their respective exports * Update package.json to include type definitions and default exports for both components * Ensure components are accessible through the main index file for easier integration
* Add client directive to SearchField * docs: Add component descriptions to stories
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation
* feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts.
* refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module
* Add client directive to SearchField * docs: Add component descriptions to stories
* feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation
* feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts.
* refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module
* feat: Add TopBar component to mini-apps UI kit * Introduce TopBar component with customizable title and adornments * Update package.json to export TopBar component * Add TopBar stories for Storybook documentation * refactor: Simplify TopBar component props and enhance layout logic * Update TopBarProps interface for clearer documentation * Refactor layout logic to improve text alignment and justify content based on adornments * Ensure consistent rendering of adornments with improved visibility handling * feat: Enhance TopBar component with adornment options in Storybook * Add BackButton and ClockIcon components for customizable adornments * Update TopBar stories to include controls for start and end adornments * Improve text handling in TopBar for better layout with truncation * refactor: Simplify TopBar component by removing className prop and changing export style * Remove className prop from TopBarProps interface for cleaner API * Refactor TopBar component to use named function export for better readability * Streamline JSX structure by eliminating unnecessary className handling * refactor: Remove default export from TopBar component for consistency with updated export style
… props (#58) * Change ListItem from a div to a button for better accessibility * Add new props: label, description, startAdornment, endAdornment, and disabled * Update styles for improved layout and visual consistency * Enhance Storybook stories to reflect new props and usage examples
…d removing default className in stories for better customization. (#59)
* refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * Add client directive to SearchField (#41) * Add client directive to SearchField * docs: Add component descriptions to stories * Version Packages (#42) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * feat: Add EU flag component to mini-apps UI kit (#37) * Enhance color palette and improve documentation visualization (#34) * feat: Expand color palette with additional color variants and refined color values * refactor: Improve color palette visualization in Storybook documentation * chore: Prepare minor version bump for color palette update * fix: Adjust Switch component height for better alignment (#38) * Update Button (#35) * feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation * Set TKW Lausanne as the main font in the UI Kit (#39) * feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts. * Add Toast component (#40) * refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module * fix: allow opacity transformations to colors (#43) * refactor: Update RadioGroupItem styles and enhance documentation (#51) * Modify RadioGroupItem component styles for improved visual consistency and accessibility. * Add descriptive documentation for the RadioGroup component in Storybook. * Enhance Checkbox component with new props and improved styling (#50) * feat: Enhance Checkbox component with additional props and improve Tick icon styling - Added new props: asChild, defaultChecked, required, name, and value to Checkbox for better customization. - Updated Checkbox's default checked state documentation. - Improved Tick icon's stroke width and line cap for better visual consistency. - Enhanced Checkbox story documentation for clarity. * fix: Update Checkbox documentation to clarify prop usage - Changed the documentation for the `asChild` prop to specify its purpose of forwarding the root element instead of indicating default checked state. * feat: add Progress component to UI kit (#45) - Introduced a new Progress component for visualizing task completion. - Updated package.json to include @radix-ui/react-progress dependency. - Added Progress stories for documentation in Storybook. - Exported Progress component in the main index file. - Refactored use-toast.tsx to remove unused imports. * Refactor Input and OTPField components for better styling and error handling (#46) * refactor: Update Input and OTPField components for improved styling and error handling - Adjusted Input component styles to refine border and error color definitions. - Modified OTPField component to enhance layout spacing and error handling logic. * feat: Add PasswordField component with show/hide password functionality (#52) - Introduced PasswordField component that allows users to toggle password visibility using an Eye icon. - Created Eye icon component for visual representation. - Added Storybook stories for PasswordField to demonstrate usage and styling. * feat: Add TextArea component to UI kit (#49) - Introduced TextArea component for multi-line text input with customizable error and focus states. - Updated package.json to export TextArea component. - Enhanced index.ts to include TextArea in the main exports. - Added Storybook stories for TextArea showcasing various states (default, error, disabled, focused, with value). - Refactored Input component styles for improved border handling. * Update SearchField (#47) * feat: Enhance ClearButton and add MagicWand icon - Updated ClearButton component to use a new Clear icon with improved dimensions and styling. - Introduced MagicWand icon component for use in the UI kit. - Adjusted Magnifier icon dimensions and styling for consistency. - Enhanced PasteButton to include the new MagicWand icon and updated its layout. - Modified SearchField to support a placeholder prop and improved event handling for paste functionality. * feat: Add WalletAddressField component to UI kit (#48) - Introduced WalletAddressField component for entering wallet addresses with error and validation states. - Updated package.json to include new component exports. - Enhanced Input component styles for better user experience. - Added Storybook stories for WalletAddressField to demonstrate various states and usage. * feat: Add TextArea component to UI kit (#49) - Introduced TextArea component for multi-line text input with customizable error and focus states. - Updated package.json to export TextArea component. - Enhanced index.ts to include TextArea in the main exports. - Added Storybook stories for TextArea showcasing various states (default, error, disabled, focused, with value). - Refactored Input component styles for improved border handling. * refactor: Update Input component styles for improved focus handling - Refined focus border styling for the Input component to enhance user experience. - Adjusted class names for better clarity and consistency in styling. * chore: Remove TextArea component export from package.json - Deleted TextArea component export from package.json as part of the ongoing refactor of the UI kit. - This change streamlines the component exports and focuses on the remaining components. * Update Drawer, AlertDialog, BottomBar (#44) * feat: Add BottomBar component for action button layout * Introduce BottomBar component with customizable direction (horizontal/vertical) * Create index file for BottomBar export * Add Storybook stories for BottomBar showcasing both layouts * fix: Update BottomBar component styles for full-width layout * Modify BottomBar component to ensure it spans the full width with updated class variants * Enhance layout consistency for better user experience * fix: Update BottomBar component layout for responsive design * Adjust BottomBar styles to ensure proper column layout for horizontal direction * Improve responsiveness by modifying grid structure for better alignment * feat: Introduce AlertDialog component for modal interactions * Add AlertDialog component with customizable features including header, footer, and content * Implement context for managing dialog state and dismissibility * Create associated icons and styles for enhanced UI * Add Storybook stories to demonstrate various AlertDialog use cases * Update package.json to include new dependency for AlertDialog * feat: Enhance Drawer component with new header and footer * Introduce DrawerHeader and DrawerFooter components for improved structure * Update Drawer to support dismissible functionality * Refactor DrawerContent to include new DrawerTitle and DrawerDescription components * Modify Storybook stories to demonstrate new Drawer features and layout * feat: Refactor Drawer component to enhance functionality and structure * Introduce new DrawerContext and useDrawer hook for improved state management * Expand DrawerProps to include additional properties for customization * Implement DrawerHeader, DrawerTitle, and DrawerDescription components for better content organization * Update Storybook stories to showcase new features and configurations, including full-page drawer support * Refactor DrawerContent to adapt to new props and improve layout handling * feat: Refactor AlertDialog component for improved structure and functionality * Remove deprecated dependencies and streamline AlertDialog implementation * Introduce new types for AlertDialog components to enhance type safety * Implement context and hooks for managing dialog state and dismissibility * Update Storybook stories to showcase new AlertDialog features and configurations * Refactor Drawer component to align with new AlertDialog structure * refactor: Update AlertDialog and Drawer components for improved functionality * Simplify AlertDialog props by removing unnecessary options and enforcing default values * Enhance Drawer component to accept modal prop directly and streamline its implementation * Update types for AlertDialog and Drawer to improve type safety and clarity * Refactor Storybook stories to reflect changes in component structure and props * feat: Add AlertDialog and BottomBar components to UI kit * Introduce new AlertDialog and BottomBar components with their respective exports * Update package.json to include type definitions and default exports for both components * Ensure components are accessible through the main index file for easier integration * Add client directive to SearchField (#41) * Add client directive to SearchField * docs: Add component descriptions to stories * Update Button (#35) * feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation * Set TKW Lausanne as the main font in the UI Kit (#39) * feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts. * Add Toast component (#40) * refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module * feat: Enhance Input component with floating label support and update Storybook examples - Added support for a floating label variant in the Input component, allowing the label to persist above the input field. - Updated InputProps to include a label prop and modified placeholder handling. - Revised Storybook stories to demonstrate the new floating label functionality and updated existing examples for consistency. * Update Button (#35) * feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation * Set TKW Lausanne as the main font in the UI Kit (#39) * feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts. * Add Toast component (#40) * refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module * Add client directive to SearchField (#41) * Add client directive to SearchField * docs: Add component descriptions to stories * Version Packages (#42) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Add client directive to SearchField (#41) * Add client directive to SearchField * docs: Add component descriptions to stories * Update Button (#35) * feat: Add label variant to Typography component * refactor: Update Button component styling and variants * feat: Extract Spinner component from Button and add package export * feat: Enhance Button component with state management and add success/fail icons * refactor: Simplify Button component icon handling and update state management in stories * refactor: Update Button component to use new icon structure and improve state management * refactor: Update Button component props to omit className and improve icon documentation * Set TKW Lausanne as the main font in the UI Kit (#39) * feat: Add new font files for TWKLausanne family in various weights and styles * refactor: Update Typography component to include new variants and improve type definitions * feat: Introduce TypographyLabelProps and TypographyDisplayProps for additional typography variants * refactor: Consolidate Typography props and update variant options in Storybook * chore: Adjust font sizes and styles in Tailwind configuration for better consistency * chore: Remove unused Google Fonts links and add TWK Lausanne font-face definitions in preview.css * feat: Enhance typography documentation and update styles * Updated font weights for TWK Lausanne in preview.css for consistency. * Added Typography.mdx for comprehensive typography documentation in Storybook. * Introduced new typography variants and adjusted levels in Typography.stories.tsx. * Created TypographyListItem component for better layout in documentation. * Improved Color component styling for better readability. * docs: Update font configuration in README.md to emphasize TWK Lausanne usage and licensing requirements * refactor: Update typography content and font settings * Changed default font to TWK Lausanne in theme.ts for consistency. * Modified text content in Typography.stories.tsx to reflect new branding messages. * Removed global font-family setting from preview.css to avoid conflicts. * Add Toast component (#40) * refactor: Update PasteButtonProps to omit onPaste attribute for improved type safety (#36) * feat: Add Toast component using Sonner for notifications * Implement Toast component with customizable options * Update package.json to include Sonner dependency * Add Toast stories for Storybook documentation * Create index file for Toast component export * feat: Integrate Toast component with Radix UI and enhance UI kit * Add Toast and Toaster components for notifications using Radix UI * Update layout to include Toaster in the Next.js example * Modify Button component to use new toast functionality * Include tailwindcss-animate for improved animations * Update package.json to include new dependencies * Enhance Toast stories for better documentation in Storybook * feat: Introduce enhanced Toast component with customizable title and duration * Add new Toast component to the UI kit for notifications * Update Next.js example to utilize the new useToast hook * Refactor Toast and Toaster components for improved functionality * Enhance Storybook documentation with updated Toast stories * Modify Toast component to support success and error variants with customizable titles * chore: Remove Sonner dependency from mini-apps-ui-kit-react * Delete Sonner from package.json and pnpm-lock.yaml * Refactor use-toast.tsx to use React hooks directly instead of importing the entire React module * refactor: Update Select component and related styles - Removed ArrowDown component and replaced it with ArrowRight for improved iconography in the Select component. - Refactored Select component to utilize inputVariants for consistent styling. - Adjusted dropdown container styles for better visual consistency and border definition. * refactor: Remove unused TypographyLabelProps interface - Deleted the TypographyLabelProps interface from the Typography component to streamline the code and improve maintainability.
* refactor: Simplify Delete component and enhance NumberPad styling - Removed the DeleteProps interface and updated the Delete component to accept SVG props directly. - Adjusted the stroke width and line cap for the Delete icon for improved visual consistency. - Enhanced the NumberPad component by utilizing the cn utility for className management, improving styling clarity and consistency. * fix: Allow trailing decimal point in NumberPad input validation - Updated NumberPad component to permit a trailing decimal point when validating input values, enhancing user experience for partial number entries.
- Introduced ToggleGroup and ToggleGroupItem components for single and multiple selection options. - Updated package.json to include @radix-ui/react-toggle-group dependency. - Added TypeScript types for ToggleGroup components. - Created Storybook stories to demonstrate usage and customization options.
* feat: Add CountryDrawer and CountrySelect components for improved country selection in PhoneField - Introduced CountryDrawer for a full-page country selection experience with search functionality. - Added CountrySelect for a dropdown-style country selection. - Updated CountrySelectorButton to integrate the new ArrowDown icon. - Adjusted constants for start adornment width based on dial code length. - Refactored PhoneField to utilize the new components for better modularity and user experience. * refactor: Enhance CountryDrawer and CountryListItem components for improved functionality and accessibility - Updated CountryDrawer to manage its own open state and integrate search functionality. - Refactored CountryListItem to use a button element for better accessibility and streamlined props. - Adjusted CountrySelectorButton to accept value prop instead of countryCode for consistency. - Modified PhoneField to utilize the new CountryDrawer and improve country selection experience. * refactor: Simplify PhoneField and enhance country selection experience - Removed unused props from PhoneField and refactored to improve clarity. - Introduced GroupedCountryList for better organization of country options in CountryDrawer. - Updated CountryListItem to use LazyFlag for optimized rendering. - Adjusted CountrySelectorButton to consistently display dial code. - Enhanced styling and layout for improved user experience. * fix: Update PhoneField stories and GroupedCountryList styling - Changed placeholder text in PhoneField stories from "Enter phone number" to "Phone" for consistency. - Updated GroupedCountryList component to enhance styling by adding a class to the group div and modifying the separator's visibility based on the group context. * fix: Update PhoneField component and stories for improved functionality - Added value prop to PhoneField for better state management. - Updated PhoneField story description to reflect the country code selector as a drawer. - Changed country selector button to use data-testid for consistency in tests. - Removed outdated story examples to streamline the PhoneField documentation. * refactor: Update CountrySelectorButton and PhoneField stories for improved layout and functionality - Removed fixed width from the flag container in CountrySelectorButton for better responsiveness. - Adjusted child node checks in PhoneField stories to ensure accurate visibility and content validation. - Integrated utility function to retrieve country data list for enhanced country selection experience. * refactor: Remove console log from Color component for cleaner code - Eliminated unnecessary console log statement in the Color component to enhance code clarity and maintainability. * refactor: Enhance Input and PhoneField components for improved layout and functionality - Updated Input component to adjust divider positions and added props for showing start and end dividers. - Refined PhoneField component by removing the error prop from CountryDrawer and adjusting start adornment width based on dial code length. - Simplified CountrySelectorButton by removing the error prop and streamlining its implementation. * refactor: Simplify PhoneField story checks for improved clarity - Updated visibility checks in PhoneField stories to streamline assertions. - Removed unnecessary child node indexing for better readability and maintainability. * refactor: Update Input, SearchField, and WalletAddressField components to use 'label' prop instead of 'placeholder' - Enhanced Input component with a new 'isFocused' variant for improved styling. - Refactored SearchField and WalletAddressField components to replace 'placeholder' with 'label' for better clarity and consistency. - Updated related stories to reflect the changes in prop usage. * refactor: Enhance Chip component with Typography for improved label presentation - Integrated Typography component into Chip to replace the plain span for better styling and consistency. - Updated label rendering to utilize the subtitle variant for enhanced visual hierarchy. * refactor: Remove CountrySelect component to streamline PhoneField functionality - Deleted the CountrySelect component to simplify the PhoneField implementation. - This change enhances maintainability and reduces complexity in the country selection process. * refactor: Update SearchField placeholder to label
- Updated package version to 1.0.0-canary.19 for the mini-apps UI kit.
- Updated Toast story to include a TopBar with a back button using the new ArrowLeft icon. - Refactored TopBar story to replace inline SVGs with the ArrowLeft and Clock icons for improved maintainability. - Added ArrowLeft and Clock icon components for better reusability across stories.
- Updated Toast component's viewport padding from 2 to 0.5 for better visual alignment.
- Introduced a new story for the Drawer component showcasing its usage with input fields, including a name input and a submit button for enhanced interactivity. - Updated imports to include the Input component for the new story.
… type - Updated package version to 1.0.0-canary.20 for the mini-apps UI kit. - Added export for CountryCode type from the Flag component to enhance type accessibility.
- Introduced a new State component that visually represents different statuses: success, error, warning, pending, and critical. - Added Clock and Warning icon components to enhance the visual representation of the pending and warning states. - Created corresponding stories for the State component to demonstrate its usage and available options.
- Updated the CircularIcon in the State component to include a shadow effect for improved visual distinction. - Maintained existing icon classes while enhancing the overall appearance.
- Introduced a new CircularState component to visually represent various statuses: success, error, warning, pending, and critical. - Updated package.json and index.ts to include CircularState exports. - Created corresponding stories for the CircularState component to demonstrate its usage and available options. - Removed the deprecated State component to streamline the codebase.
- Introduced new SVG icons for DOGE, SOL, SUI, LINK, and XRP to the Token component. - Updated the index.ts file to export the new icons. - Enhanced the Token stories to include options for the newly added tokens, improving the selection interface.
* feat: integrate haptic feedback across UI components - Added haptic feedback functionality to various components including Checkbox, ColorPicker, RadioGroup, and Switch using the new withHaptics utility. - Implemented haptic notifications for success and error states in LiveFeedback and Toast components. - Introduced a new haptics utility module to manage different types of haptic feedback. - Enhanced user interaction by providing tactile responses for button clicks and state changes. * feat: enhance LiveFeedback component with previous state tracking - Added a custom hook to track the previous state in the LiveFeedback component. - Implemented haptic feedback notifications for state changes, improving user interaction. - Refactored the component to utilize the new hook for better state management. * feat: implement haptic feedback in Button, ClearButton, OTPField, and GroupedCountryList components - Integrated haptic feedback using the withHaptics utility for Button and OTPField on user interactions. - Added haptic impact on ClearButton when clearing input. - Enhanced GroupedCountryList to provide haptic feedback on country selection. - Improved user experience by providing tactile responses across multiple components. * chore: bump package version to 1.0.0-canary.22 and remove unused haptics import from Switch component * refactor: simplify Button component styles by removing hover states for primary and secondary variants - Updated Button component styles to enhance clarity and maintainability. - Removed hover states for primary and secondary button variants while preserving disabled states. * fix: adjust haptic feedback impact level in Button component - Changed the haptic feedback impact level from "medium" to "light" for improved user experience during button interactions. * refactor: reorganize haptics utility for improved clarity - Moved the haptics object definition to a more logical position within the haptics.ts file. - Removed redundant code to streamline the haptic feedback implementation, enhancing maintainability.
- Created a new .npmignore file to exclude development, source, and configuration files from npm package. - Updated CHANGELOG to include new components: CircularIcon, CircularState, and LiveFeed, along with other recent changes. - Deleted the outdated src/CHANGELOG.md file to streamline documentation.
…thods sections - Simplified the Font Configuration section by removing redundant details and emphasizing the need for a license for TWK Lausanne. - Consolidated the Import Methods section to clarify the recommended approach for tree-shaking and bundle size optimization. - Updated the Icons section to reflect the use of a custom icon set built on Iconoir, encouraging users to utilize Iconoir directly for a comprehensive icon system.
- Deleted the generate-country-codes.ts script, which was responsible for auto-generating country codes from flag component files. This change simplifies the codebase by removing unused functionality.
- Changed the input path for tree-shaking in the Vite configuration to point to the new location of the test script. - Added a new test script to ensure that the Button, Pill, and Typography components are not removed during tree-shaking, enhancing the testing process for component usage.
- Added data-testid attribute to the Delete icon for better testing support. - Refactored PhoneField constants and utils to utilize defaultCountries, simplifying country code management. - Updated Select component styles to ensure consistent error state representation. - Adjusted Checkbox, Form, OTPField, and PhoneField stories to reflect new error handling and styling changes, improving visual consistency across components.
- Enhanced the generate-country-codes script to include a list of unsupported countries in the generated type definition. - Updated the constants file to reflect the new format for country codes, ensuring clarity and maintainability. - Removed outdated comments from the Flag component, streamlining the codebase.
- Added @radix-ui/react-visually-hidden version 1.1.3 to enhance accessibility in the CountryDrawer component. - Updated the Drawer stories to utilize the new asChild prop for DrawerTrigger, improving flexibility in rendering. - Refactored SVG icons to use camelCase attributes for consistency and adherence to React standards. - Made minor adjustments to the EU flag SVG for improved formatting.
- Updated the version in package.json from 1.0.0-canary.22 to 1.0.0, marking a stable release of the mini-apps UI kit.
- Changed the "publish" script in package.json to "publish:manual" to better reflect its purpose and avoid confusion with automated publishing processes.
…tions - Changed the transition duration in the Progress component from 660ms to 700ms to enhance animation smoothness and consistency.
- Integrated useWindowScroll hook to manage title opacity based on scroll position. - Adjusted layout to position start and end adornments absolutely, improving alignment. - Updated Typography components to handle title visibility and transitions more effectively, enhancing user experience.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
- Added overflow handling and size constraints to start and end adornments in the TopBar component to improve layout consistency. - Introduced a new story for the TopBar showcasing a long title that demonstrates the truncation feature.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implement scroll-based title opacity adjustments in the TopBar component, improving user experience with animated transitions. Adjust layout for better alignment of adornments.