feat: remove build step from ui 👷‍♀️ (#26)

.prettierrc.js

@@ -1,8 +1,10 @@
 module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
   printWidth: 80,
   proseWrap: 'always',
   semi: true,
   singleQuote: true,
-  trailingComma: 'es5',
+  tailwindConfig: './config/tailwind/tailwind.config.js',
   tailwindFunctions: ['cx'],
+  trailingComma: 'es5',
 };

.vscode/settings.json

@@ -15,6 +15,7 @@
       "source.organizeImports": "explicit"
     }
   },
+  "tailwindCSS.experimental.configFile": "./config/tailwind/tailwind.config.js",
   "tailwindCSS.experimental.classRegex": [
     ["cx\\(([^)]+)\\)", "'([^']*)'"],
     ["cx\\(([^)]+)\\)", "`([^`]*)`"]

apps/admin-dashboard/app/root.tsx

@@ -12,7 +12,7 @@ import { withSentry } from '@sentry/remix';
 
 import { Toast } from '@oyster/ui';
 
-import coreUiStylesheet from '@oyster/ui/dist/index.css?url';
+import coreUiStylesheet from '@oyster/ui/index.css?url';
 import tailwindStylesheet from './tailwind.css?url';
 
 import { ENV } from './shared/constants.server';

apps/admin-dashboard/package.json

@@ -20,7 +20,6 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",
     "@sentry/remix": "^7.37.1",
-    "@tailwindcss/container-queries": "^0.1.1",
     "csvtojson": "^2.0.10",
     "dayjs": "^1.11.5",
     "isbot": "^3.6.5",
@@ -34,14 +33,13 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
+    "@oyster/tailwind": "*",
     "@oyster/tsconfig": "*",
     "@remix-run/dev": "^2.8.1",
     "@types/jsonwebtoken": "^9.0.2",
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "prettier-plugin-tailwindcss": "^0.4.1",
-    "tailwindcss": "^3.3.3",
     "vite": "^5.1.6",
     "vite-tsconfig-paths": "^4.3.2"
   }

apps/admin-dashboard/tailwind.config.js

@@ -1,12 +1,7 @@
+import { tailwindConfig } from '@oyster/tailwind';
+
 /** @type {import('tailwindcss').Config} */
 export default {
+  ...tailwindConfig,
   content: ['./app/**/*.{ts,tsx}', '../../packages/ui/src/**/*.tsx'],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'var(--color-primary)',
-      },
-    },
-  },
-  plugins: [require('@tailwindcss/container-queries')],
 };

apps/member-profile/app/root.tsx

@@ -15,7 +15,7 @@ import utc from 'dayjs/plugin/utc.js';
 
 import { Toast } from '@oyster/ui';
 
-import coreUiStylesheet from '@oyster/ui/dist/index.css?url';
+import coreUiStylesheet from '@oyster/ui/index.css?url';
 import tailwindStylesheet from './tailwind.css?url';
 
 import { ENV } from './shared/constants.server';

apps/member-profile/package.json

@@ -20,7 +20,6 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/serve": "^2.8.1",
     "@sentry/remix": "^7.37.1",
-    "@tailwindcss/container-queries": "^0.1.1",
     "dayjs": "^1.11.5",
     "ioredis": "^5.3.2",
     "is-ip": "^5.0.1",
@@ -37,14 +36,13 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
+    "@oyster/tailwind": "*",
     "@oyster/tsconfig": "*",
     "@remix-run/dev": "^2.8.1",
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/ua-parser-js": "^0.7.37",
-    "prettier-plugin-tailwindcss": "^0.4.1",
-    "tailwindcss": "^3.3.3",
     "vite": "^5.1.6",
     "vite-tsconfig-paths": "^4.3.2"
   }

apps/member-profile/tailwind.config.js

@@ -1,18 +1,7 @@
+import { tailwindConfig } from '@oyster/tailwind';
+
 /** @type {import('tailwindcss').Config} */
 export default {
+  ...tailwindConfig,
   content: ['./app/**/*.{ts,tsx}', '../../packages/ui/src/**/*.tsx'],
-  theme: {
-    extend: {
-      colors: {
-        primary: 'var(--color-primary)',
-      },
-      keyframes: {
-        'slide-from-left': {
-          '0%': { left: '-100%' },
-          '100%': { left: '0%' },
-        },
-      },
-    },
-  },
-  plugins: [require('@tailwindcss/container-queries')],
 };

config/tailwind/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@oyster/tailwind",
+  "version": "0.0.0",
+  "private": true,
+  "main": "tailwind.config.js",
+  "license": "MIT",
+  "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1"
+  },
+  "devDependencies": {
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.4.3"
+  }
+}

config/tailwind/tailwind.config.js

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+export const tailwindConfig = {
+  content: [
+    '../apps/admin-dashboard/app/**/*.{ts,tsx}',
+    '../apps/member-profile/app/**/*.{ts,tsx}',
+    '../packages/ui/src/**/*.tsx',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+      },
+      keyframes: {
+        'modal-animation': {
+          '0%': { opacity: 0, transform: 'scale(0)' },
+          '100%': { opacity: 1, transform: 'scale(1)' },
+        },
+        'modal-animation-mobile': {
+          '0%': { bottom: '-100vh' },
+          '100%': { bottom: '0vh' },
+        },
+        'modal-shader-animation': {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 0.75 },
+        },
+        'toast-animation': {
+          '0%': { transform: 'translateX(-150%)' },
+          '100%': { transform: 'translateX(0%)' },
+        },
+        'toast-shader-animation': {
+          '0%': { width: '100%' },
+          '100%': { width: '0%' },
+        },
+        'slide-from-left': {
+          '0%': { left: '-100%' },
+          '100%': { left: '0%' },
+        },
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/container-queries')],
+};
+
+export default tailwindConfig;

packages/core/src/admin-dashboard.server.ts

@@ -18,7 +18,6 @@ export { createEvent } from './modules/event/use-cases/create-event';
 export { archiveActivity } from './modules/gamification/use-cases/archive-activity';
 export { editActivity } from './modules/gamification/use-cases/edit-activity';
 export { addIcebreakerPrompt } from './modules/icebreaker/use-cases/add-icebreaker-prompt';
-export { findMemberByEmail } from './modules/member/queries/find-member-by-email';
 export { activateMember } from './modules/member/use-cases/activate-member';
 export { updateMemberEmail } from './modules/member/use-cases/update-member-email';
 export { addOnboardingSessionAttendees } from './modules/onboarding-session/use-cases/add-onboarding-session-attendees';

packages/core/src/modules/authentication/use-cases/login-with-oauth.ts

@@ -43,7 +43,7 @@ export async function loginWithOAuth(input: OAuthLoginInput) {
       .where('deletedAt', 'is', null)
       .executeTakeFirst();
   } else {
-    entity = await findMemberByEmail(email).select(['id']).executeTakeFirst();
+    entity = await findMemberByEmail(email);
   }
 
   if (!entity) {

packages/core/src/modules/event/use-cases/sync-airmeet-event.ts

@@ -43,9 +43,7 @@ export async function syncAirmeetEvent({
 
     await Promise.all(
       attendees.map(async (attendee) => {
-        const student = await findMemberByEmail(attendee.email)
-          .select(['students.id'])
-          .executeTakeFirst();
+        const student = await findMemberByEmail(attendee.email);
 
         await trx
           .insertInto('eventAttendees')

packages/core/src/modules/mailchimp/use-cases/sync-mailchimp-campaign.ts

@@ -152,19 +152,15 @@ async function getActivityData(campaignId: string) {
   // we can find them.
 
   for (const click of result.clicks) {
-    const student = await findMemberByEmail(click.email)
-      .select(['id'])
-      .executeTakeFirst();
+    const student = await findMemberByEmail(click.email);
 
     if (student) {
       click.studentId = student.id;
     }
   }
 
   for (const open of result.opens) {
-    const student = await findMemberByEmail(open.email)
-      .select(['id'])
-      .executeTakeFirst();
+    const student = await findMemberByEmail(open.email);
 
     if (student) {
       open.studentId = student.id;

packages/core/src/modules/member/queries/find-member-by-email.ts

@@ -4,5 +4,7 @@ export function findMemberByEmail(email: string) {
   return db
     .selectFrom('students')
     .leftJoin('studentEmails', 'studentEmails.studentId', 'students.id')
-    .where('studentEmails.email', 'ilike', email);
+    .select(['students.id'])
+    .where('studentEmails.email', 'ilike', email)
+    .executeTakeFirst();
 }

packages/core/src/modules/slack/events/slack-workspace-joined.ts

@@ -7,9 +7,7 @@ export async function onSlackWorkspaceJoined({
   email,
   slackId,
 }: GetBullJobData<'slack.joined'>) {
-  const member = await findMemberByEmail(email)
-    .select(['id'])
-    .executeTakeFirst();
+  const member = await findMemberByEmail(email);
 
   if (!member) {
     throw new NotFoundError(

packages/core/src/modules/survey/use-cases/import-survey-responses.ts

@@ -39,9 +39,7 @@ export async function importSurveyResponses(
         'Responded On': respondedOn,
       } = result.data;
 
-      const student = await findMemberByEmail(email)
-        .select(['students.id'])
-        .executeTakeFirst();
+      const student = await findMemberByEmail(email);
 
       return SurveyResponse.pick({
         email: true,

packages/core/tsconfig.json

@@ -2,9 +2,10 @@
   "extends": "@oyster/tsconfig/base.json",
   "include": ["src"],
   "compilerOptions": {
-    "baseUrl": "./",
+    "baseUrl": ".",
     "jsx": "react-jsx",
     "module": "ESNext",
+    "moduleResolution": "Bundler",
     "paths": {
       "@/*": ["./src/*"]
     },

packages/ui/package.json

@@ -4,37 +4,25 @@
   "private": true,
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./index.css": "./src/index.css"
+  },
   "license": "MIT",
-  "files": [
-    "dist/**"
-  ],
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c --watch"
+    "lint": "tsc --noEmit"
   },
   "devDependencies": {
     "@oyster/tsconfig": "*",
     "@oyster/types": "*",
     "@oyster/utils": "*",
     "@remix-run/react": "^2.8.1",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "^18.0.26",
-    "postcss": "^8.4.18",
-    "prettier-plugin-tailwindcss": "^0.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
     "react-textarea-autosize": "^8.5.3",
-    "rollup": "^2.74.1",
-    "rollup-plugin-dts": "^5.0.0",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.71.1",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.2",
     "ts-pattern": "4.3.0",
     "zod": "^3.20.2"
   }

packages/ui/src/ui/address.tsx → packages/ui/src/components/address.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 
 import { Input, InputProps } from './input';
-import { Select, SelectProps } from './select/select';
+import { Select, SelectProps } from './select';
 
 export const Address = ({ children }: PropsWithChildren) => {
   return <div className="@container grid gap-4">{children}</div>;

packages/ui/src/ui/checkbox/checkbox.tsx → packages/ui/src/components/checkbox.tsx

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 import { Check as CheckIcon } from 'react-feather';
 
-import { ACCENT_COLORS, Color, ColorVariable } from '../../utils/constants';
-import { cx } from '../../utils/cx';
-import styles from './checkbox.module.scss';
+import { ACCENT_COLORS, Color, ColorVariable } from '../utils/constants';
+import { cx } from '../utils/cx';
 
 type CheckboxProps = Pick<
   React.HTMLProps<HTMLInputElement>,
@@ -34,8 +33,8 @@ export const Checkbox = ({
     <div className="flex items-center">
       <input
         className={cx(
-          styles.checkboxInput,
-          'absolute inline-block h-4 w-4 cursor-pointer opacity-0'
+          'absolute inline-block h-4 w-4 cursor-pointer opacity-0',
+          'peer'
         )}
         id={id}
         readOnly={readOnly}
@@ -45,8 +44,11 @@ export const Checkbox = ({
 
       <div
         className={cx(
-          styles.checkboxBackground,
-          'flex h-4 w-4 items-center justify-center rounded-[0.25rem] border-2 border-gray-300'
+          'flex h-4 w-4 items-center justify-center rounded-[0.25rem] border-2 border-gray-300',
+          'peer-hover:border-primary',
+          'peer-focus:border-primary',
+          'peer-checked:bg-primary peer-checked:border-primary',
+          'peer-checked:disabled:bg-gray-500 peer-checked:disabled:border-gray-500'
         )}
       >
         <CheckIcon className="h-4 w-4 text-white" />