feat: merge #60 from BananaJeanss/feat/js-sdk

Universalform regex filter + onboarding username filter, .env.examples + dev guide changes

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env*.local
 .env* 
+!.env.example
 
 # vercel
 .vercel

README.md

@@ -1,7 +1,7 @@
 # hackclub.tv
 
-This is the source code for [hackclub.tv (hackclub.tv)](https://hackclub.tv), a livestreaming website for hackclubbers.
+This is the source code for [hackclub.tv](https://hackclub.tv), a livestreaming website for hackclubbers.
 
-Development has been ongoing for a few months, and the site is now live! There are some half-baked features, but I'm all ears for feedback.
+The development setup guide can be read at <https://docs.hackclub.tv/guides/dev/>
 
-Join [#hctv](https://hackclub.slack.com/archives/C08HGLXGXAB) on the HC Slack for discussion and updates!
+Join [#hctv](https://hackclub.slack.com/archives/C08HGLXGXAB) on the Hack Club Slack for discussion and updates!

apps/docs/src/content/docs/guides/dev.mdx

@@ -5,30 +5,41 @@ description: Instructions to set up a local development environment for hackclub
 
 1. clone repo
 2. `pnpm install`
-3. `pnpm dev`
-4. `pnpm db:migrate` (RUN THIS AFTER POPULATING BELOW ENV)
+3. `cp apps/web/.env.example apps/web/.env && cp packages/db/.env.example packages/db/.env` 
+4. `pnpm dev`
+5. `pnpm db:migrate` (RUN THIS AFTER POPULATING ENV)
 
-- create file at apps/web/.env:  
+- create file at apps/web/.env (skip if you did step 3):
 ```
 DATABASE_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres
+
+# make a slack app here: https://api.slack.com/apps
 SLACK_NOTIFIER_TOKEN=<make a bot for this, check app manifest below>
+
 # invite your bot to the channel you created. below is #hctv-dev, so use that if you want!
 NOTIFICATION_CHANNEL_ID=C08M3MGE6PJ
+
 REDIS_URL=redis://localhost:6379
+
+# get from https://uploadthing.com/
 UPLOADTHING_TOKEN=<get from uploadthing>
-# enable oauth mode on your hca account
+
+# enable oauth mode on your hca account and make an app: https://auth.hackclub.com/identity/edit
 HCID_CLIENT=<auth.hackclub.com client>
 HCID_SECRET=<auth.hackclub.com secret>
 # make sure to put this as one of the redirect uri
 HCID_REDIRECT_URI=http://localhost:3000/auth/hackclub/callback
+
+# mediamtx settings
 NEXT_PUBLIC_MEDIAMTX_URL=http://localhost:8891
 MEDIAMTX_API=http://localhost:9997
+
 # idt you should change this
 MEDIAMTX_PUBLISH_KEY=rjq1xdpCPA4qyt3jge
 NEXT_PUBLIC_MEDIAMTX_INGEST_ROUTE=localhost:8890
 ```
 
-- create file at packages/db/.env:  
+- create file at packages/db/.env (skip if you did step 3):
 ```
 DATABASE_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres
 DATABASE_DIRECT_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres

apps/web/.env.example

@@ -0,0 +1,26 @@
+DATABASE_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres
+
+# make a slack app here: https://api.slack.com/apps
+SLACK_NOTIFIER_TOKEN=<make a bot for this, check app manifest below>
+
+# invite your bot to the channel you created. below is #hctv-dev, so use that if you want!
+NOTIFICATION_CHANNEL_ID=C08M3MGE6PJ
+
+REDIS_URL=redis://localhost:6379
+
+# get from https://uploadthing.com/
+UPLOADTHING_TOKEN=<get from uploadthing>
+
+# enable oauth mode on your hca account and make an app: https://auth.hackclub.com/identity/edit
+HCID_CLIENT=<auth.hackclub.com client>
+HCID_SECRET=<auth.hackclub.com secret>
+# make sure to put this as one of the redirect uri
+HCID_REDIRECT_URI=http://localhost:3000/auth/hackclub/callback
+
+# mediamtx settings
+NEXT_PUBLIC_MEDIAMTX_URL=http://localhost:8891
+MEDIAMTX_API=http://localhost:9997
+
+# idt you should change this
+MEDIAMTX_PUBLISH_KEY=rjq1xdpCPA4qyt3jge
+NEXT_PUBLIC_MEDIAMTX_INGEST_ROUTE=localhost:8890

apps/web/src/app/(ui)/(public)/onboarding/page.client.tsx

@@ -107,7 +107,9 @@ export default function OnboardingClient() {
                   name: 'username', 
                   label: 'Channel Username', 
                   type: 'text',
-                  placeholder: 'e.g., yourname or yourname-codes'
+                  placeholder: 'e.g., yourname or yourname-codes',
+                  maxChars: 20,
+                  inputFilter: /[^a-z0-9_-]/g,
                 },
               ]}
               schemaName="onboard"

apps/web/src/components/app/UniversalForm/UniversalForm.tsx

@@ -97,13 +97,21 @@ export function UniversalForm<T extends z.ZodType>({
                       {...formField}
                       value={formField.value ?? ''}
                       rows={field.textAreaRows ?? 5}
+                      maxLength={field.maxChars}
                     />
                   ) : (
                     <Input
                       type={field.type || 'text'}
                       placeholder={field.placeholder}
                       {...formField}
+                      onChange={(e) => {
+                        if (field.inputFilter) {
+                          e.target.value = e.target.value.replace(field.inputFilter, '');
+                        }
+                        formField.onChange(e);
+                      }}
                       value={formField.value ?? ''}
+                      maxLength={field.maxChars}
                     />
                   )}
                 </FormControl>

apps/web/src/components/app/UniversalForm/types.ts

@@ -12,6 +12,8 @@ export type FormFieldConfig = {
   value?: any;
   textArea?: boolean;
   textAreaRows?: number;
+  maxChars?: number;
+  inputFilter?: RegExp;
   component?: (props: { field: ControllerRenderProps<any, any> } & any) => React.ReactNode;
   componentProps?: Record<string, any>;
   required?: boolean;

packages/db/.env.example

@@ -0,0 +1,2 @@
+DATABASE_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres
+DATABASE_DIRECT_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres