@deframe-sdk/components 0.1.0

package/README.md

@@ -0,0 +1,174 @@
+# @deframe-sdk/components
+
+Deframe SDK React component library built with TypeScript and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install @deframe-sdk/components
+```
+
+## Usage
+
+### Importing Styles
+
+**Important:** You must import the CSS file for the components to render correctly with their styles.
+
+In your main application file (e.g., `_app.tsx`, `main.tsx`, or `index.tsx`):
+
+```tsx
+// Import the component styles
+import '@deframe-sdk/components/styles.css'
+```
+
+Or in your main CSS file:
+
+```css
+@import '@deframe-sdk/components/styles.css';
+```
+
+### Importing Components
+
+```tsx
+import { PrimaryButton, SecondaryButton, TertiaryButton } from '@deframe-sdk/components'
+
+function App() {
+  return (
+    <div>
+      <PrimaryButton onClick={() => console.log('clicked')}>
+        Primary Action
+      </PrimaryButton>
+
+      <SecondaryButton disabled={false}>
+        Secondary Action
+      </SecondaryButton>
+
+      <TertiaryButton type="submit">
+        Submit
+      </TertiaryButton>
+    </div>
+  )
+}
+```
+
+## Available Components
+
+### Buttons
+- **PrimaryButton** - Main call-to-action button
+- **SecondaryButton** - Secondary action button with outline
+- **TertiaryButton** - Tertiary action button with subtle styling
+- **ActionButton** - Action button variant
+- **PercentageButton** - Percentage selector button
+
+### Component Props
+
+All button components share the same props interface:
+
+```typescript
+interface ButtonProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+  onClick?: () => void;
+}
+```
+
+## Development
+
+### Running Storybook
+
+```bash
+npm run storybook
+```
+
+View components in Storybook at [http://localhost:6006](http://localhost:6006)
+
+### Building the Library
+
+```bash
+npm run build:lib
+```
+
+This will generate:
+- CommonJS bundle (`dist/index.js`)
+- ES Module bundle (`dist/index.mjs`)
+- TypeScript declarations (`dist/index.d.ts`, `dist/index.d.mts`)
+- Compiled CSS with all styles (`dist/styles.css`)
+- Source maps
+
+### Project Structure
+
+```
+src/
+├── index.ts                    # Main entry point, exports all components
+├── stories/
+│   └── buttons/
+│       ├── PrimaryButton.tsx
+│       ├── SecondaryButton.tsx
+│       ├── TertiaryButton.tsx
+│       ├── ActionButton.tsx
+│       └── PercentageButton.tsx
+└── styles/
+    └── globals.css             # Tailwind CSS configuration
+```
+
+## Publishing
+
+The package is configured to automatically build before publishing:
+
+```bash
+# Bump version
+npm version patch  # or minor, major
+
+# Publish to npm
+npm publish
+```
+
+The `prepublishOnly` script will automatically run `build:lib` before publishing.
+
+### Publishing to GitHub Packages
+
+To publish to GitHub Packages instead of npm:
+
+1. Update package.json to add publishConfig:
+```json
+{
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  }
+}
+```
+
+2. Authenticate with GitHub Packages:
+```bash
+npm login --registry=https://npm.pkg.github.com
+```
+
+3. Publish:
+```bash
+npm publish
+```
+
+## Local Development
+
+To test the library locally in another project:
+
+```bash
+# In this project
+npm run build:lib
+npm link
+
+# In your consuming project
+npm link @deframe-sdk/components
+```
+
+## Peer Dependencies
+
+This package requires:
+- React >= 18.0.0
+- React DOM >= 18.0.0
+
+## License
+
+MIT