@windstream/react-shared-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kinetic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,360 @@
+# @kinetic/react-shared-components
+
+A comprehensive React component library built with TypeScript and Tailwind CSS, designed for Kinetic applications.
+
+## 🚀 Features
+
+- **TypeScript First**: Full TypeScript support with comprehensive type definitions
+- **Tailwind CSS**: Built with Tailwind CSS for consistent design and easy customization
+- **Modern React**: Built with React 18+ and modern hooks
+- **Accessible**: Components follow accessibility best practices
+- **Customizable**: Easy to customize with CSS variables and Tailwind classes
+- **Tree-shakeable**: Optimized for bundle size with proper exports
+
+## 📦 Installation
+
+```bash
+npm install @kinetic/react-shared-components
+# or
+yarn add @kinetic/react-shared-components
+# or
+pnpm add @kinetic/react-shared-components
+```
+
+## 🔧 Setup
+
+### Tailwind CSS
+
+This library requires Tailwind CSS to be installed in your project. Make sure you have Tailwind CSS configured:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+### Import Styles
+
+**Important**: Styles are NOT automatically included when you import components. You MUST manually import the CSS file in your application.
+
+Import the library styles in your main CSS file (recommended approach):
+
+```css
+@import '@kinetic/react-shared-components/dist/styles.css';
+```
+
+Or import it directly in your JavaScript/TypeScript entry file:
+
+```tsx
+import '@kinetic/react-shared-components/dist/styles.css';
+```
+
+**CSS Import Order**: The order in which you import styles matters:
+- If you want to override package styles with your own `globals.css`, import the package styles **before** your `globals.css`
+- If you want package styles to take precedence, import them **after** your `globals.css`
+
+Example with CSS import order control:
+
+```css
+/* In your main CSS file (e.g., globals.css) */
+/* Import package styles first */
+@import '@kinetic/react-shared-components/dist/styles.css';
+
+/* Then your app-specific overrides */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Your custom styles that can override package styles */
+.bg-bg-fill-brand {
+  background-color: #your-custom-color;
+}
+```
+
+## 🎯 Usage
+
+### Basic Usage
+
+```tsx
+import { Button, Input, Text } from '@kinetic/react-shared-components/core';
+
+function MyComponent() {
+  return (
+    <div>
+      <Text className="heading1">Welcome to Kinetic</Text>
+      <Input placeholder="Enter your name" />
+      <Button variant="primary">Submit</Button>
+    </div>
+  );
+}
+```
+
+### Component Examples
+
+#### Button
+
+```tsx
+import { Button } from '@kinetic/react-shared-components/core';
+
+// Different variants
+<Button variant="primary">Primary Button</Button>
+<Button variant="secondary">Secondary Button</Button>
+<Button variant="outline">Outline Button</Button>
+
+// Different sizes
+<Button className="btn-small">Small</Button>
+<Button className="btn-medium">Medium</Button>
+<Button className="btn-large">Large</Button>
+
+// With loading state
+<Button isLoading>Loading...</Button>
+
+// Full width
+<Button fullWidth>Full Width Button</Button>
+```
+
+#### Input
+
+```tsx
+import { Input } from '@kinetic/react-shared-components/core';
+
+<Input 
+  placeholder="Enter text"
+  type="text"
+  variant="default"
+  size="medium"
+/>
+```
+
+#### Text
+
+```tsx
+import { Text } from '@kinetic/react-shared-components/core';
+
+<Text className="heading1">Heading 1</Text>
+<Text className="body1">Body text</Text>
+<Text className="caption">Caption text</Text>
+```
+
+### Utilities
+
+```tsx
+import { cx, clsx } from '@kinetic/react-shared-components/utils';
+
+const classes = cx('btn', condition && 'btn-primary');
+```
+
+## 🎨 Available Components
+
+All components are available from the `/core` export path:
+
+```tsx
+import { 
+  Button, 
+  Input, 
+  Link, 
+  List, 
+  MaterialIcon, 
+  Spinner, 
+  Text,
+  CallButton,
+  Modal,
+  Accordion,
+  Checkbox,
+  Select,
+  AlertCard,
+  BrandButton,
+  Checklist,
+  Collapse,
+  Divider,
+  RadioButton,
+  SeeMore,
+  SelectPlanButton,
+  Skeleton,
+  Tooltip,
+  ViewCartButton
+} from '@kinetic/react-shared-components/core';
+```
+
+### Core Components
+
+- **Button** - Versatile button component with multiple variants and sizes
+- **Input** - Form input component with validation states
+- **Link** - Accessible link component
+- **List** - List and list item components
+- **MaterialIcon** - Material Design icon component
+- **Spinner** - Loading spinner component
+- **Text** - Typography component with predefined variants
+- **CallButton** - Button component for call-to-action
+- **Modal** - Modal dialog component
+- **Accordion** - Collapsible accordion component
+- **Checkbox** - Checkbox input component
+- **Select** - Select dropdown component
+- **AlertCard** - Alert notification card component
+- **BrandButton** - Branded button variant
+- **Checklist** - Checklist component
+- **Collapse** - Collapsible content component
+- **Divider** - Divider/separator component
+- **RadioButton** - Radio button input component
+- **SeeMore** - Expandable content component
+- **SelectPlanButton** - Plan selection button
+- **Skeleton** - Loading skeleton component
+- **Tooltip** - Tooltip component
+- **ViewCartButton** - Shopping cart button component
+
+### Component Variants
+
+Each component comes with multiple variants and sizes to fit different use cases:
+
+- **Variants**: default, primary, secondary, outline, unstyled
+- **Sizes**: small, medium, large
+- **States**: loading, disabled, error, success
+
+## 🎨 Design System
+
+This library follows the Kinetic design system with:
+
+- **Color Palette**: Primary, secondary, and semantic colors
+- **Typography**: Consistent font sizes and line heights
+- **Spacing**: Standardized spacing scale
+- **Shadows**: Consistent shadow system
+- **Border Radius**: Unified border radius values
+
+## 🔧 Development
+
+### Prerequisites
+
+- Node.js 16+
+- npm 7+ or yarn 1.22+
+
+### Setup
+
+```bash
+# Clone the repository
+git clone <repository-url>
+cd kinetic-react-shared-components
+
+# Install dependencies
+npm install
+
+# Start development mode
+npm run dev
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+
+# Run linting
+npm run lint
+
+# Format code
+npm run format
+```
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── accordion/      # Accordion component
+│   ├── alert-card/     # AlertCard component
+│   ├── brand-button/   # BrandButton component
+│   ├── button/         # Button component
+│   ├── call-button/    # CallButton component
+│   ├── checkbox/       # Checkbox component
+│   ├── checklist/      # Checklist component
+│   ├── collapse/       # Collapse component
+│   ├── divider/        # Divider component
+│   ├── input/          # Input component
+│   ├── link/           # Link component
+│   ├── list/           # List components
+│   ├── material-icon/  # Icon component
+│   ├── modal/          # Modal component
+│   ├── radio-button/   # RadioButton component
+│   ├── see-more/       # SeeMore component
+│   ├── select/         # Select component
+│   ├── select-plan-button/ # SelectPlanButton component
+│   ├── skeleton/       # Skeleton component
+│   ├── spinner/        # Spinner component
+│   ├── text/           # Text component
+│   ├── tooltip/        # Tooltip component
+│   └── view-cart-button/ # ViewCartButton component
+├── hooks/              # Custom React hooks
+├── styles/             # Global styles and Tailwind config
+├── utils/              # Utility functions
+└── index.ts            # Main export file (exports all components)
+```
+
+### Building
+
+The library is built using Rollup with the following outputs:
+
+- **CommonJS**: `dist/index.js`
+- **ES Modules**: `dist/index.esm.js`
+- **TypeScript declarations**: `dist/index.d.ts`
+
+All components are exported from a single entry point (`src/index.ts`), which allows for:
+- Simplified build process
+- Consistent import path: `@kinetic/react-shared-components/core`
+- Tree-shaking support for optimal bundle sizes
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+```
+
+## 📝 Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Follow the existing code style and conventions
+- Write tests for new components and features
+- Update documentation for any API changes
+- Ensure all components are accessible
+- Follow the established component structure
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🤝 Support
+
+For support and questions:
+
+- Create an issue in the GitHub repository
+- Contact the Kinetic development team
+- Check the documentation and examples
+
+## 🔄 Changelog
+
+### v0.1.0
+- Initial release
+- Core components: Button, Input, Link, List, MaterialIcon, Spinner, Text
+- Additional components: CallButton, Modal, Accordion, Checkbox, Select, AlertCard, BrandButton, Checklist, Collapse, Divider, RadioButton, SeeMore, SelectPlanButton, Skeleton, Tooltip, ViewCartButton
+- TypeScript support
+- Tailwind CSS integration
+- Unified `/core` export path for all components
+- Simplified build process with single entry point
+- Comprehensive documentation
+
+## 📚 Additional Resources
+
+- [React Documentation](https://reactjs.org/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/)
+- [TypeScript Documentation](https://www.typescriptlang.org/)
+- [Kinetic Design System](https://design.kinetic.com/)