@adoptaunabuelo/react-components 0.3.148 โ†’ 0.3.150

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +69 -54
  2. package/dist/esm/components/Filter/FilterDefault.d.ts +1 -0
  3. package/dist/esm/index.js +222 -221
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/index.d.ts +1 -0
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -1,89 +1,104 @@
1
- # react-components
2
- A simple, customizable, and accessible library of React components
1
+ # @adoptaunabuelo/react-components
3
2
 
4
- [![npm latest package](https://img.shields.io/npm/v/@adoptaunabuelo/react-components/latest.svg)](https://www.npmjs.com/package/@adoptaunabuelo/react-components)
5
- [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
6
- <a href="https://www.chromatic.com/library?appId=64650038c7589bed568201a8" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
7
-
8
- ## Installation
9
-
10
- ### React Components
3
+ A simple, customizable, and accessible library of React components built with TypeScript and styled-components, developed for the Adopta Un Abuelo ecosystem.
11
4
 
12
- React Components is available as an [npm package](https://www.npmjs.com/package/@adoptaunabuelo/react-components).
5
+ [![npm latest package](https://img.shields.io/npm/v/@adoptaunabuelo/react-components/latest.svg)](https://www.npmjs.com/package/@adoptaunabuelo/react-components)
6
+ [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Adopta-Un-Abuelo/react-components/blob/main/LICENSE)
7
+ <a href="https://www.chromatic.com/library?appId=64650038c7589bed568201a8" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" alt="storybook"></a>
13
8
 
14
- **npm:**
9
+ ## ๐Ÿš€ Installation
15
10
 
11
+ ### 1. Install the package
16
12
  ```sh
13
+ # npm
17
14
  npm install @adoptaunabuelo/react-components react react-dom styled-components
18
- ```
19
-
20
- **yarn:**
21
15
 
22
- ```sh
16
+ # yarn
23
17
  yarn add @adoptaunabuelo/react-components react react-dom styled-components
24
18
  ```
25
19
 
26
- ### Peer Dependencies
27
-
28
- This library requires the following peer dependencies to be installed in your project:
20
+ ### 2. Peer Dependencies
21
+ This library requires the following peer dependencies:
29
22
 
30
23
  | Package | Version | Required |
31
24
  |---------|---------|----------|
32
- | `react` | ^18.0.0 \|\| ^19.0.0 | โœ… Yes |
33
- | `react-dom` | ^18.0.0 \|\| ^19.0.0 | โœ… Yes |
34
- | `styled-components` | ^5.0.0 \|\| ^6.0.0 | โœ… Yes |
25
+ | `react` | ^18.0.0 || ^19.0.0 | โœ… Yes |
26
+ | `react-dom` | ^18.0.0 || ^19.0.0 | โœ… Yes |
27
+ | `styled-components` | ^5.0.0 || ^6.0.0 | โœ… Yes |
35
28
 
36
- ### Optional Dependencies (Required for Specific Components)
29
+ ### 3. Optional Dependencies
30
+ Some components require additional dependencies for specific functionality:
37
31
 
38
- Some components require additional dependencies. Install only what you need:
32
+ | Component | Package | Purpose |
33
+ |-----------|---------|---------|
34
+ | `InputLocation` | `@react-google-maps/api` | Google Maps integration |
35
+ | `Payout` | `@stripe/react-stripe-js` `@stripe/stripe-js` | Stripe payments |
36
+ | `TextArea` (Rich Text) | `@tiptap/*` packages | Rich text editing |
37
+ | `Button` | `@lottiefiles/react-lottie-player` | Loading/Success animations |
38
+ | `InputImage` | `react-webcam` | Camera access |
39
39
 
40
- | Component(s) | Package(s) | Installation |
41
- |--------------|-----------|--------------|
42
- | `InputLocation` | `@react-google-maps/api` | `npm install @react-google-maps/api` |
43
- | `Payout` | `@stripe/react-stripe-js` `@stripe/stripe-js` | `npm install @stripe/react-stripe-js @stripe/stripe-js` |
44
- | `TextArea` (Rich Text) | `@tiptap/react` `@tiptap/starter-kit` `@tiptap/extension-text-align` `@tiptap/extension-text-style` `@tiptap/extensions` | `npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-text-align @tiptap/extension-text-style @tiptap/extensions` |
45
- | `Button` (Loading animations) | `@lottiefiles/react-lottie-player` | `npm install @lottiefiles/react-lottie-player` |
46
- | `InputImage` | `react-webcam` | `npm install react-webcam` |
47
- | Styled Components | `@emotion/is-prop-valid` | `npm install @emotion/is-prop-valid` |
40
+ ## ๐Ÿ“– Features
48
41
 
49
- ## Getting started with React Components
42
+ - ๐Ÿ›  **Customizable**: Built with styled-components for easy theming.
43
+ - ๐Ÿ“ฆ **Modern Stack**: React 19, TypeScript, Rollup, and Storybook.
44
+ - ๐Ÿงฉ **Pattern Driven**: Uses the Variant Router Pattern for clean component architecture.
45
+ - โ™ฟ **Accessible**: Focused on meeting standard a11y requirements.
46
+ - ๐Ÿงช **Tested**: Interactive Storybook stories with play functions and Chromatic visual testing.
50
47
 
51
- Here is an example of a basic app using React Components `ProgressBar` component:
48
+ ## ๐Ÿ›  Usage
52
49
 
50
+ ### Basic Example
53
51
  ```jsx
54
52
  import React from 'react';
55
- import { ProgressBar } from '@adoptaunabuelo/react-components';
53
+ import { ProgressBar, Button } from '@adoptaunabuelo/react-components';
56
54
 
57
55
  function App() {
58
- return (
59
- <ProgressBar
60
- maxValue={100}
61
- minValue={0}
62
- progress={40}
63
- />;
64
- )
56
+ return (
57
+ <div>
58
+ <ProgressBar maxValue={100} minValue={0} progress={40} />
59
+ <Button design="primary" text="Click Me" onClick={() => console.log('Clicked!')} />
60
+ </div>
61
+ );
65
62
  }
66
63
  ```
67
64
 
68
- ### Watch out!
69
- To be able to use Input type location, you will need to add this line to your project header:
70
-
65
+ ### Google Maps (InputLocation)
66
+ To use `InputLocation`, add the Google Maps script to your project's header:
71
67
  ```html
72
- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=es"/>
68
+ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=es"></script>
73
69
  ```
74
- Please, replace ``YOUR_API_KEY`` with your Google Maps API Key.
75
70
 
76
- ## Storybook
71
+ ## ๐Ÿ— Development
72
+
73
+ ### Environment Setup
74
+ 1. Clone the repository.
75
+ 2. Install dependencies: `npm install`.
76
+ 3. Create a `.env` file with your `GOOGLE_MAPS_API` key for local testing.
77
+
78
+ ### Common Commands
79
+ - `npm run storybook`: Run dev server (port 6006)
80
+ - `npm run build`: Build for production (Rollup)
81
+ - `npm run chromatic`: Run visual regression tests
82
+ - `npm run release`: Automated release (Main branch only)
77
83
 
78
- You can checkout all the library Components and its docs in our storybook
84
+ ### Architecture
85
+ Components follow the **Variant Router Pattern**:
86
+ - `ComponentName.tsx`: Router that delegates to variants.
87
+ - `ComponentPrimary.tsx`, `ComponentSecondary.tsx`: Implementations.
88
+ - `ComponentName.stories.tsx`: Documentation and tests.
79
89
 
80
- [Open the Storybook](https://www.chromatic.com/library?appId=64650038c7589bed568201a8)
90
+ We use **Path Aliases** for clean imports:
91
+ - `@components/*` -> `src/components/*`
92
+ - `@constants/*` -> `src/constants/*`
93
+ - `@assets/*` -> `src/assets/*`
81
94
 
82
- ## Changelog
95
+ ## ๐ŸŽจ Storybook
96
+ Checkout all library components, their documentation, and interactive states in our Storybook:
83
97
 
84
- The [changelog](https://github.com/Adopta-Un-Abuelo/react-components/releases) is regularly updated to reflect what's changed in each new release.
98
+ ๐Ÿ‘‰ **[Open Storybook](https://www.chromatic.com/library?appId=64650038c7589bed568201a8)**
85
99
 
86
- ## License
100
+ ## ๐Ÿค Contributing
101
+ Contributions are welcome! Please read our [CONTRIBUTING.md](./CONTRIBUTING.md) before submitting a PR.
87
102
 
88
- This project is licensed under the terms of the
89
- [MIT license](/LICENSE).
103
+ ## ๐Ÿ“„ License
104
+ Licensed under the [MIT License](./LICENSE).
package/dist/esm/components/Filter/FilterDefault.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface FilterDefaultProps {
10
10
  hideSearchBar?: boolean;
11
11
  style?: CSSProperties;
12
12
  menuStyle?: CSSProperties;
13
+ buttonStyle?: CSSProperties;
13
14
  children?: React.ReactNode;
14
15
  childrenBottomBar?: React.ReactNode;
15
16
  onClose?: () => void;