@arcadeai/design-system 1.3.0 → 1.5.0

package/README.md

@@ -115,4 +115,99 @@ The design system uses Tailwind CSS for consistent spacing, colors, typography,
 - Follow the established color palette
 - Maintain consistent spacing and typography scales
 
+## 🔧 Contributing
+
+### Adding Icons
+
+To add a new icon to the design system:
+
+1. **Add the SVG file**: Place your SVG icon in `/lib/assets/icons/`
+
+   ```bash
+   # Example: adding a new "example" icon
+   cp example.svg lib/assets/icons/
+   ```
+
+2. **Generate the React component**: Run the icon generation script
+
+   ```bash
+   pnpm generate-icons
+   ```
+
+3. **Use the icon**: The generated React component will be automatically available
+
+   ```tsx
+   import { ExampleIcon } from '@arcadeai/design-system/components/ui/atoms/icons';
+   ```
+
+### Adding Toolkits
+
+To add a new toolkit to the system:
+
+1. **Navigate to the toolkits metadata**: Open `lib/metadata/toolkits.ts`
+
+2. **Add your toolkit entry**: Add a new entry to the `TOOLKITS` array
+
+   ```typescript
+   {
+      id: 'X',
+      label: 'X',
+      isBYOC: false,
+      isPro: false,
+      publicIconUrl: `${PUBLIC_ICON_URL}/x.svg`,
+      icon: Icons.X,
+      // Other properties...
+   }
+   ```
+
+### Adding OAuth Providers
+
+To add a new OAuth provider:
+
+1. **Navigate to OAuth providers metadata**: Open `lib/metadata/oauth-providers.ts`
+
+2. **Add OAuth identifiers**: Define your `OAuthId` and `OAuthProviderId`
+
+   ```typescript
+   export const OAuthId = {
+     Asana: 'arcade-asana',
+     Atlassian: 'arcade-atlassian',
+     // Add to the respective id
+   }
+
+   export const OAuthProviderId = {
+     Asana: 'asana',
+     Atlassian: 'atlassian',
+     // Add to the respective provider id
+   }
+   ```
+
+3. **Choose the appropriate category**:
+   - **For prebuilt OAuth providers**: Add a record to `PREBUILT_OAUTH_PROVIDERS`
+   - **For custom OAuth providers**: Add it to `OTHER_OAUTH_PROVIDERS`
+
+   ```typescript
+   // Example for prebuilt provider
+   export const PREBUILT_OAUTH_PROVIDERS: OAuthCatalogue[] = [
+      {
+        id: OAuthId.Asana,
+        provider_id: OAuthProviderId.Asana,
+        name: 'Asana',
+        description: 'Authorize tools and agents with Asana',
+        publicIconUrl: `${PUBLIC_ICON_URL}/asana.svg`,
+        icon: Asana,
+        docs: '<https://docs.arcade.dev/home/auth-providers/asana>',
+      },
+      // Add to the respective array
+   ]
+   ```
+
+### Development Workflow
+
+1. Make your changes following the patterns above
+2. Test your changes in Storybook: `pnpm dev`
+3. Run tests: `pnpm test`
+4. Build the project: `pnpm build`
+5. Submit a pull request with your changes
+
 Built with ❤️ by the Arcade team