Compare commits
10 Commits
jazz-react
...
lotion
| Author | SHA1 | Date | |
|---|---|---|---|
|
6571a6fb31 | ||
|
|
1139605a7d | ||
|
|
f40c80394d | ||
|
|
2bfb42dd4a | ||
|
|
3ebdaa55c7 | ||
|
|
50dbd46c6c | ||
|
|
37fbe504e3 | ||
|
|
dc43f9a6b0 | ||
|
|
61535c80e3 | ||
|
|
285b7609d6 |
@@ -12,7 +12,6 @@
|
||||
"jazz-browser-auth-clerk",
|
||||
"jazz-react-auth-clerk",
|
||||
"jazz-react",
|
||||
"jazz-react-native",
|
||||
"jazz-nodejs",
|
||||
"jazz-run",
|
||||
"cojson-transport-ws",
|
||||
|
||||
9
.github/workflows/playwright.yml
vendored
9
.github/workflows/playwright.yml
vendored
@@ -10,10 +10,9 @@ jobs:
|
||||
test:
|
||||
timeout-minutes: 60
|
||||
runs-on: ubuntu-latest
|
||||
continue-on-error: true
|
||||
strategy:
|
||||
matrix:
|
||||
project: ["e2e/BinaryCoStream", "e2e/CoValues", "examples/chat", "examples/pets"]
|
||||
project: ["e2e/BinaryCoStream", "examples/pets"]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
@@ -46,12 +45,8 @@ jobs:
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build
|
||||
run: pnpm turbo build;
|
||||
working-directory: ./${{ matrix.project }}
|
||||
|
||||
- name: Build jazz-run
|
||||
run: pnpm exec turbo build && chmod +x dist/index.js;
|
||||
working-directory: ./packages/jazz-run
|
||||
|
||||
- name: Install Playwright Browsers
|
||||
run: pnpm exec playwright install --with-deps
|
||||
|
||||
4
.github/workflows/unit-test.yml
vendored
4
.github/workflows/unit-test.yml
vendored
@@ -41,7 +41,7 @@ jobs:
|
||||
run: pnpm install --frozen-lockfile
|
||||
|
||||
- name: Pnpm Build
|
||||
run: pnpm turbo build
|
||||
run: pnpm turbo build;
|
||||
|
||||
- name: Unit Tests
|
||||
run: pnpm test:ci
|
||||
run: pnpm test
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
/** @type {import("prettier").Config} */
|
||||
const config = {
|
||||
trailingComma: "all",
|
||||
tabWidth: 4,
|
||||
semi: true,
|
||||
singleQuote: false,
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,49 +1,9 @@
|
||||
# @jazz-e2e/binarycostream
|
||||
|
||||
## 0.0.87
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.8.6
|
||||
|
||||
## 0.0.86
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- jazz-tools@0.8.1
|
||||
- jazz-react@0.8.1
|
||||
- Updated dependencies
|
||||
- jazz-tools@0.8.1
|
||||
- jazz-react@0.8.1
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<link rel="icon" type="image/png" href="/jazz-logo.png" />
|
||||
<link rel="stylesheet" href="/src/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jazz BinaryCoStream Tests</title>
|
||||
<title>Jazz Chat Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@jazz-e2e/binarycostream",
|
||||
"private": true,
|
||||
"version": "0.0.87",
|
||||
"version": "0.0.82",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -14,11 +14,11 @@
|
||||
"*.{js,jsx,mdx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"cojson": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"is-ci": "^3.0.1",
|
||||
"jazz-react": "workspace:0.8.6",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { createJazzReactApp, useDemoAuth } from "jazz-react";
|
||||
import { createJazzReactApp } from "jazz-react";
|
||||
import { getValueId } from "./lib/searchParams";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { ephemeralCredentialsAuth } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
|
||||
const key = getValueId()
|
||||
? `downloader-e2e@jazz.tools`
|
||||
@@ -13,19 +14,10 @@ const Jazz = createJazzReactApp();
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
export function AuthAndJazz({ children }: { children: React.ReactNode }) {
|
||||
const [auth, state] = useDemoAuth();
|
||||
|
||||
const signedUp = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.state === "ready" && !signedUp.current) {
|
||||
state.signUp('Mister X');
|
||||
signedUp.current = true;
|
||||
}
|
||||
}, [state.state])
|
||||
const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
|
||||
|
||||
return (
|
||||
<Jazz.Provider auth={auth} peer={
|
||||
<Jazz.Provider auth={ephemeralAuth} peer={
|
||||
localSync
|
||||
? `ws://localhost:4200?key=${key}`
|
||||
: `wss://mesh.jazz.tools/?key=${key}`
|
||||
|
||||
30
e2e/CoValues/.gitignore
vendored
30
e2e/CoValues/.gitignore
vendored
@@ -1,30 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
sync-db/
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
@@ -1,41 +0,0 @@
|
||||
# @jazz-e2e/covalues
|
||||
|
||||
## 0.0.86
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.8.6
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/jazz-logo.png" />
|
||||
<link rel="stylesheet" href="/src/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jazz CoValues tests</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/app.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "@jazz-e2e/covalues",
|
||||
"private": true,
|
||||
"version": "0.0.86",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"test:ui": "playwright test --ui"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,mdx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"cojson": "workspace:*",
|
||||
"hash-slash": "workspace:*",
|
||||
"is-ci": "^3.0.1",
|
||||
"jazz-react": "workspace:*",
|
||||
"jazz-tools": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router": "^6.16.0",
|
||||
"react-router-dom": "^6.16.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.46.1",
|
||||
"@types/node": "^22.5.1",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
"jstat": "^1.9.6",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { defineConfig, devices } from "@playwright/test";
|
||||
import isCI from "is-ci";
|
||||
|
||||
/**
|
||||
* Read environment variables from file.
|
||||
* https://github.com/motdotla/dotenv
|
||||
*/
|
||||
// import dotenv from 'dotenv';
|
||||
// dotenv.config({ path: path.resolve(__dirname, '.env') });
|
||||
|
||||
/**
|
||||
* See https://playwright.dev/docs/test-configuration.
|
||||
*/
|
||||
export default defineConfig({
|
||||
testDir: "./tests",
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: isCI,
|
||||
/* Retry on CI only */
|
||||
retries: isCI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: isCI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: "html",
|
||||
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: isCI ? "http://localhost:4173/" : "http://localhost:5173",
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: "on-first-retry",
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: { ...devices["Desktop Chrome"] },
|
||||
},
|
||||
],
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: isCI ? {
|
||||
command: "pnpm preview",
|
||||
url: "http://localhost:4173/",
|
||||
} : undefined,
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import { AuthAndJazz } from "./jazz";
|
||||
import { TestInput } from "./pages/TestInput";
|
||||
import { RouterProvider, createHashRouter } from "react-router-dom";
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <TestInput />,
|
||||
},
|
||||
{
|
||||
path: "/test-input",
|
||||
element: <TestInput />,
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<AuthAndJazz>
|
||||
<RouterProvider router={router} />
|
||||
</AuthAndJazz>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -1,25 +0,0 @@
|
||||
import { createJazzReactApp } from "jazz-react";
|
||||
import { ephemeralCredentialsAuth } from "jazz-tools";
|
||||
import { useState } from "react";
|
||||
|
||||
const key = `test-comap@jazz.tools`;
|
||||
|
||||
const localSync = new URLSearchParams(location.search).has("localSync");
|
||||
|
||||
const Jazz = createJazzReactApp();
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
export function AuthAndJazz({ children }: { children: React.ReactNode }) {
|
||||
const [ephemeralAuth] = useState(ephemeralCredentialsAuth())
|
||||
|
||||
return (
|
||||
<Jazz.Provider auth={ephemeralAuth} peer={
|
||||
localSync
|
||||
? `ws://localhost:4200?key=${key}`
|
||||
: `wss://mesh.jazz.tools/?key=${key}`
|
||||
}>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import { co, CoMap, Group, ID } from "jazz-tools";
|
||||
import { useAccount, useCoState } from "../jazz";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export class InputTestCoMap extends CoMap {
|
||||
title = co.string;
|
||||
}
|
||||
|
||||
export function TestInput() {
|
||||
const [id, setId] = useState<ID<InputTestCoMap> | undefined>(undefined);
|
||||
const coMap = useCoState(InputTestCoMap, id);
|
||||
const { me } = useAccount();
|
||||
|
||||
useEffect(() => {
|
||||
if (!me || id) return;
|
||||
|
||||
const group = Group.create({ owner: me });
|
||||
|
||||
group.addMember("everyone", "writer");
|
||||
|
||||
setId(InputTestCoMap.create({ title: "" }, { owner: group }).id);
|
||||
}, [me]);
|
||||
|
||||
if (!coMap) return null;
|
||||
|
||||
return (
|
||||
<input
|
||||
value={coMap?.title ?? ""}
|
||||
onChange={(e) => {
|
||||
if (!coMap) return;
|
||||
coMap.title = e.target.value;
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
1
e2e/CoValues/src/vite-env.d.ts
vendored
1
e2e/CoValues/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,14 +0,0 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("CoMap - TestInput", () => {
|
||||
test("should keep the cursor position when typing", async ({ page }) => {
|
||||
await page.goto("/test-input");
|
||||
|
||||
await page.getByRole("textbox").fill("xx");
|
||||
await page.getByRole('textbox').press('ArrowLeft');
|
||||
await page.getByRole("textbox").press("y");
|
||||
await page.getByRole("textbox").press("y");
|
||||
|
||||
await expect(page.getByRole('textbox')).toHaveValue("xyyx");
|
||||
});
|
||||
});
|
||||
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["src"],
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react-swc'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
minify: false
|
||||
}
|
||||
})
|
||||
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"next/core-web-vitals",
|
||||
"prettier",
|
||||
"plugin:prettier/recommended"
|
||||
],
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": ["error"]
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
# jazz-example-book-shelf
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-browser-media-images@0.8.6
|
||||
- jazz-react@0.8.6
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- jazz-browser-media-images@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
@@ -1,4 +0,0 @@
|
||||
FROM caddy:2.7.3-alpine
|
||||
LABEL org.opencontainers.image.source="https://github.com/gardencmp/jazz"
|
||||
|
||||
COPY ./dist /usr/share/caddy/
|
||||
@@ -1,41 +0,0 @@
|
||||
# Jazz Book Shelf Example
|
||||
|
||||
## Installing & running the example locally
|
||||
|
||||
(this requires `pnpm` to be installed, see [https://pnpm.io/installation](https://pnpm.io/installation))
|
||||
|
||||
Start by checking out `jazz`
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Go to the `examples/book-shelf` directory.
|
||||
|
||||
```bash
|
||||
cd examples/book-shelf
|
||||
```
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Start the dev server:
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## Questions / problems / feedback
|
||||
|
||||
If you have feedback, let us know on [Discord](https://discord.gg/utDMjHYg42) or open an issue or PR to fix something that seems wrong.
|
||||
|
||||
## Configuration: sync server
|
||||
|
||||
By default, the example app uses [Jazz Global Mesh](https://jazz.tools/mesh) (`wss://sync.jazz.tools`) - so cross-device use, invites and collaboration should just work.
|
||||
|
||||
You can also run a local sync server by running `npx jazz-run sync` and adding the query param `?sync=ws://localhost:4200` to the URL of the example app (for example: `http://localhost:5173/?peer=ws://localhost:4200`), or by setting the `sync` parameter of the `<Jazz.Provider>` provider component in [./src/components/JazzAndAuth.tsx](./src/2_main.tsx).
|
||||
@@ -1,56 +0,0 @@
|
||||
job "example-bookShelf$BRANCH_SUFFIX" {
|
||||
region = "global"
|
||||
datacenters = ["*"]
|
||||
|
||||
group "static" {
|
||||
count = 4
|
||||
|
||||
network {
|
||||
port "http" {
|
||||
to = 80
|
||||
}
|
||||
}
|
||||
|
||||
constraint {
|
||||
attribute = "${node.class}"
|
||||
operator = "="
|
||||
value = "mesh"
|
||||
}
|
||||
|
||||
spread {
|
||||
attribute = "${node.datacenter}"
|
||||
weight = 100
|
||||
}
|
||||
|
||||
constraint {
|
||||
distinct_hosts = true
|
||||
}
|
||||
|
||||
task "server" {
|
||||
driver = "docker"
|
||||
|
||||
config {
|
||||
image = "$DOCKER_TAG"
|
||||
ports = ["http"]
|
||||
|
||||
auth = {
|
||||
username = "$DOCKER_USER"
|
||||
password = "$DOCKER_PASSWORD"
|
||||
}
|
||||
}
|
||||
|
||||
service {
|
||||
tags = ["public"]
|
||||
name = "example-bookShelf$BRANCH_SUFFIX"
|
||||
port = "http"
|
||||
provider = "consul"
|
||||
}
|
||||
|
||||
resources {
|
||||
cpu = 50 # MHz
|
||||
memory = 50 # MB
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
# deploy bump 4
|
||||
5
examples/book-shelf/next-env.d.ts
vendored
5
examples/book-shelf/next-env.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@@ -1,4 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -1,35 +0,0 @@
|
||||
{
|
||||
"name": "jazz-example-book-shelf",
|
||||
"version": "0.1.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"clsx": "^2.0.0",
|
||||
"jazz-browser-media-images": "workspace:0.8.6",
|
||||
"jazz-react": "workspace:0.8.6",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"next": "14.2.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.1",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-config-next": "14.2.5",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.2.1",
|
||||
"postcss": "^8.4.27",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ChangeEvent, useState } from "react";
|
||||
import { BookReview, ListOfBookReviews } from "@/schema";
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import { useRouter } from "next/navigation";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { Group, ImageDefinition } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export default function AddBookReview() {
|
||||
const { me } = useAccount();
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [review, setReview] = useState("");
|
||||
const [rating, setRating] = useState(0);
|
||||
const [dateRead, setDateRead] = useState(
|
||||
new Date().toISOString().split("T")[0]
|
||||
);
|
||||
const [coverImage, setCoverImage] = useState<ImageDefinition | undefined>();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const onDateChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const date = new Date(event.currentTarget.value)
|
||||
.toISOString()
|
||||
.split("T")[0];
|
||||
setDateRead(date);
|
||||
};
|
||||
|
||||
const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.currentTarget.files?.[0];
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "reader");
|
||||
|
||||
if (file) {
|
||||
createImage(file, { owner: group }).then(image => {
|
||||
setCoverImage(image);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!me?.profile) return;
|
||||
|
||||
const bookReview = BookReview.create(
|
||||
{
|
||||
title,
|
||||
author,
|
||||
review,
|
||||
rating,
|
||||
dateRead: new Date(dateRead),
|
||||
cover: coverImage,
|
||||
},
|
||||
{
|
||||
owner: me.profile._owner,
|
||||
}
|
||||
);
|
||||
|
||||
if (!me.profile.bookReviews) {
|
||||
me.profile.bookReviews = ListOfBookReviews.create([], {
|
||||
owner: me.profile._owner,
|
||||
});
|
||||
}
|
||||
|
||||
me.profile.bookReviews.push(bookReview);
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<Container className="grid max-w-lg gap-8 py-8">
|
||||
<h1 className="text-lg font-semibold text-black">Add book review</h1>
|
||||
<form action="" className="grid gap-4" onSubmit={onSubmit}>
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Cover
|
||||
<input type="file" onChange={onImageChange} />
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Title
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="text"
|
||||
value={title}
|
||||
required
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Author
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="text"
|
||||
value={author}
|
||||
required
|
||||
onChange={e => setAuthor(e.target.value)}
|
||||
></input>
|
||||
</label>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Date read
|
||||
<input
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
type="date"
|
||||
value={dateRead}
|
||||
required
|
||||
onChange={onDateChange}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid gap-1 text-sm text-gray-600">
|
||||
Rating
|
||||
<RatingInput value={rating} onChange={rating => setRating(rating)} />
|
||||
</div>
|
||||
|
||||
<label className="grid gap-1 text-sm text-gray-600">
|
||||
Review
|
||||
<textarea
|
||||
className="rounded border border-gray-300 px-2 py-1 shadow-sm"
|
||||
value={review}
|
||||
onChange={e => setReview(e.target.value)}
|
||||
></textarea>
|
||||
</label>
|
||||
<Button variant="primary" type="submit">
|
||||
Add
|
||||
</Button>
|
||||
</form>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import { BookReview } from "@/schema";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { BookCover } from "@/components/BookCover";
|
||||
import clsx from "clsx";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import Rating from "@/components/Rating";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
const BookReviewTitle = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "font-serif text-2xl font-bold lg:text-4xl";
|
||||
|
||||
if (readOnly) {
|
||||
return <h1 className={className}>{bookReview.title}</h1>;
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
value={bookReview.title}
|
||||
placeholder="Book title"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.title = e.target.value)}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewAuthor = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-gray-700";
|
||||
|
||||
if (readOnly) {
|
||||
return <p className={className}>by {bookReview.author}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
value={bookReview.author}
|
||||
placeholder="Author"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.author = e.target.value)}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewDateRead = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-gray-700 max-w-[10rem]";
|
||||
|
||||
if (readOnly) {
|
||||
return (
|
||||
bookReview.dateRead && (
|
||||
<p className={className}>{bookReview.dateRead.toLocaleDateString()}</p>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<input
|
||||
type="date"
|
||||
value={bookReview.dateRead?.toISOString().split("T")[0]}
|
||||
placeholder="Date read"
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => {
|
||||
const date = new Date(e.target.value);
|
||||
bookReview.dateRead = date;
|
||||
}}
|
||||
></input>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewReview = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-sm leading-relaxed text-gray-600";
|
||||
|
||||
if (readOnly) {
|
||||
if (bookReview.review) {
|
||||
return <p className={className}>{bookReview.review}</p>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<textarea
|
||||
value={bookReview.review}
|
||||
placeholder="Write your review here..."
|
||||
className={clsx(
|
||||
className,
|
||||
"w-full rounded border border-transparent px-2 py-1 hover:border-gray-300 hover:shadow-sm"
|
||||
)}
|
||||
onChange={e => (bookReview.review = e.target.value)}
|
||||
></textarea>
|
||||
);
|
||||
};
|
||||
|
||||
const BookReviewRating = ({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly: boolean;
|
||||
}) => {
|
||||
const className = "text-2xl sm:mx-0";
|
||||
|
||||
if (readOnly) {
|
||||
return <Rating className={className} rating={bookReview.rating} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<RatingInput
|
||||
className={clsx(className, "p-2")}
|
||||
onChange={rating => (bookReview.rating = rating)}
|
||||
value={bookReview.rating}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
const bookReview = useCoState(BookReview, params.slug as ID<BookReview>);
|
||||
|
||||
if (!bookReview) return <></>;
|
||||
|
||||
const readOnly = !(bookReview._owner.castAs(Group).myRole() === "admin");
|
||||
|
||||
return (
|
||||
<Container className="grid gap-12 py-8">
|
||||
<div className="flex flex-col gap-6 sm:flex-row md:gap-10">
|
||||
<div className="w-[180px]">
|
||||
<BookCover bookReview={bookReview} readOnly={readOnly} />
|
||||
</div>
|
||||
|
||||
<div className="-mx-2 grid max-w-lg flex-1 gap-3 sm:mx-0">
|
||||
<BookReviewTitle bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewAuthor bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewDateRead bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewRating bookReview={bookReview} readOnly={readOnly} />
|
||||
<BookReviewReview bookReview={bookReview} readOnly={readOnly} />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:focus {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
@apply ring-2 ring-purple-600/75 dark:ring-2 dark:ring-white/75;
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { JazzAndAuth } from "@/components/JazzAndAuth";
|
||||
import { Nav } from "@/components/Nav";
|
||||
import { Fraunces } from "next/font/google";
|
||||
import clsx from "clsx";
|
||||
|
||||
const fraunces = Fraunces({
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
variable: "--font-fraunces",
|
||||
});
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Jazz Book Shelf",
|
||||
description: "Jazz Book Shelf",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={clsx(inter.className, fraunces.variable)}>
|
||||
<JazzAndAuth>
|
||||
<header>
|
||||
<Nav />
|
||||
</header>
|
||||
<main>{children}</main>
|
||||
</JazzAndAuth>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import UserProfile from "@/components/UserProfile";
|
||||
import { JazzAccount } from "@/schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
export default function Home() {
|
||||
const { me } = useAccount();
|
||||
|
||||
return (
|
||||
<Container className="grid gap-12 py-8">
|
||||
<UserProfile id={me?.id as ID<JazzAccount>} />
|
||||
|
||||
<label className="flex flex-wrap items-center gap-3">
|
||||
Share your profile:
|
||||
<input
|
||||
type="text"
|
||||
className="w-full rounded border p-1"
|
||||
value={`${window.location.origin}/user/${me?.id}`}
|
||||
readOnly
|
||||
/>
|
||||
</label>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import UserProfile from "@/components/UserProfile";
|
||||
import { JazzAccount } from "@/schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { Container } from "@/components/Container";
|
||||
|
||||
export default function Page({ params }: { params: { slug: string } }) {
|
||||
const { slug } = params;
|
||||
|
||||
return (
|
||||
<Container className="py-8">
|
||||
<UserProfile id={slug as ID<JazzAccount>} />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import { ProgressiveImg } from "jazz-react";
|
||||
import { BookReview } from "@/schema";
|
||||
import { ChangeEvent, useRef, useState } from "react";
|
||||
import { Group, ImageDefinition } from "jazz-tools";
|
||||
import { createImage } from "jazz-browser-media-images";
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import clsx from "clsx";
|
||||
import PlusIcon from "@/components/icons/PlusIcon";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
const BookCoverContainer = ({
|
||||
children,
|
||||
className = "",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={clsx("h-[240px] lg:h-[260px]", className)}>{children}</div>
|
||||
);
|
||||
};
|
||||
|
||||
const MockCover = ({ bookReview }: { bookReview: BookReview }) => {
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center gap-3 rounded-l-sm rounded-r-md bg-gray-100 px-3 text-center shadow-lg">
|
||||
<p className="font-medium">{bookReview.title}</p>
|
||||
<p className="text-xs">{bookReview.author}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function BookCoverReadOnly({
|
||||
bookReview,
|
||||
className,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
className?: string;
|
||||
}) {
|
||||
if (bookReview.cover) {
|
||||
return (
|
||||
<BookCoverContainer className={className}>
|
||||
<ProgressiveImg image={bookReview.cover}>
|
||||
{({ src }) => (
|
||||
<img
|
||||
className="max-h-full max-w-full rounded-l-sm rounded-r-md shadow-lg"
|
||||
src={src}
|
||||
/>
|
||||
)}
|
||||
</ProgressiveImg>
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BookCoverContainer className={className}>
|
||||
<MockCover bookReview={bookReview} />
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookCoverInput({ bookReview }: { bookReview: BookReview }) {
|
||||
const { me } = useAccount();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const onImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!me?.profile) return;
|
||||
|
||||
const file = event.currentTarget.files?.[0];
|
||||
|
||||
if (file) {
|
||||
createImage(file, { owner: me.profile._owner }).then(image => {
|
||||
bookReview.cover = image;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onUploadClick = () => {
|
||||
inputRef.current?.click();
|
||||
};
|
||||
|
||||
const remove = () => {
|
||||
bookReview.cover = null;
|
||||
};
|
||||
|
||||
if (bookReview.cover) {
|
||||
return (
|
||||
<div className="group relative inline-block">
|
||||
<BookCoverReadOnly
|
||||
className="transition-opacity group-hover:opacity-40"
|
||||
bookReview={bookReview}
|
||||
/>
|
||||
<div className="absolute left-0 top-0 hidden h-full w-full items-center justify-center rounded-l-sm rounded-r-md group-hover:flex">
|
||||
<Button
|
||||
variant="tertiary"
|
||||
type="button"
|
||||
className="shadow"
|
||||
onClick={remove}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BookCoverContainer className="flex w-[180px] flex-col justify-center rounded-l-sm rounded-r-md bg-gray-100 p-3 shadow-lg">
|
||||
<button
|
||||
className="flex h-full w-full flex-col items-center justify-center gap-3 text-gray-500 transition-colors hover:text-gray-600"
|
||||
type="button"
|
||||
onClick={onUploadClick}
|
||||
>
|
||||
<PlusIcon className="h-10 w-10" />
|
||||
Upload book cover
|
||||
</button>
|
||||
<label className="sr-only">
|
||||
Cover
|
||||
<input ref={inputRef} type="file" onChange={onImageChange} />
|
||||
</label>
|
||||
</BookCoverContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookCover({
|
||||
bookReview,
|
||||
readOnly,
|
||||
}: {
|
||||
bookReview: BookReview;
|
||||
readOnly?: boolean;
|
||||
}) {
|
||||
if (readOnly) return <BookCoverReadOnly bookReview={bookReview} />;
|
||||
|
||||
return <BookCoverInput bookReview={bookReview} />;
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { BookReview } from "@/schema";
|
||||
import Rating from "@/components/Rating";
|
||||
import { Group } from "jazz-tools";
|
||||
import RatingInput from "@/components/RatingInput";
|
||||
import { BookCover } from "@/components/BookCover";
|
||||
|
||||
export function BookReviewHeader({ bookReview }: { bookReview: BookReview }) {
|
||||
const { title, author, rating, review, dateRead } = bookReview;
|
||||
|
||||
return (
|
||||
<div className="grid gap-5">
|
||||
<div>
|
||||
<h1 className="mb-1 font-serif text-2xl font-bold md:mb-3 lg:text-4xl">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-500">by {author}</p>
|
||||
</div>
|
||||
|
||||
{bookReview._owner.castAs(Group).myRole() === "admin" ? (
|
||||
<RatingInput
|
||||
onChange={rating => (bookReview.rating = rating)}
|
||||
value={rating}
|
||||
/>
|
||||
) : (
|
||||
<Rating className="mx-auto text-2xl sm:mx-0" rating={rating} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { BookReview } from "../schema";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import Link from "next/link";
|
||||
import { BookCover, BookCoverReadOnly } from "@/components/BookCover";
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
|
||||
export function BookReviewThumbnail({ id }: { id: ID<BookReview> }) {
|
||||
const bookReview = useCoState(BookReview, id);
|
||||
|
||||
if (!bookReview) return <></>;
|
||||
|
||||
return (
|
||||
<div className="inline-flex shrink-0 gap-4 rounded border p-4 sm:block sm:space-y-6 sm:border-0 sm:p-0 md:w-[200px]">
|
||||
<Link href={`/book/${bookReview.id}`} className="sm:block sm:flex-1">
|
||||
<BookCoverReadOnly bookReview={bookReview} />
|
||||
</Link>
|
||||
|
||||
<div className="flex-1">
|
||||
<Link href={`/book/${bookReview.id}`}>
|
||||
<h2 className="mb-1 text-sm font-medium">{bookReview.title}</h2>
|
||||
</Link>
|
||||
<div className="mb-2 flex flex-col gap-2 text-sm text-gray-500 sm:flex-row sm:items-center">
|
||||
<p>{bookReview.author}</p>
|
||||
<div className="flex items-center gap-0.5 text-xs font-semibold leading-none">
|
||||
<StarIcon className="-mt-px text-base text-yellow-400" />
|
||||
{bookReview.rating}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import type { ComponentProps } from "react";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface Props {
|
||||
variant?: "primary" | "secondary" | "tertiary";
|
||||
className?: string;
|
||||
size?: "sm" | "md" | "lg";
|
||||
}
|
||||
|
||||
interface AnchorProps
|
||||
extends Props,
|
||||
React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
||||
href: string;
|
||||
}
|
||||
|
||||
type ButtonProps = ComponentProps<"button"> & Props;
|
||||
|
||||
export function Button(props: AnchorProps | ButtonProps) {
|
||||
const {
|
||||
className: customClassName = "",
|
||||
variant = "primary",
|
||||
children,
|
||||
size = "md",
|
||||
} = props;
|
||||
|
||||
const variantClassNames = {
|
||||
base: "inline-flex gap-2 items-center justify-center rounded-full overflow-hidden transition-colors",
|
||||
primary:
|
||||
"bg-purple-300 font-medium text-purple-950 px-4 py-2 rounded-full hover:bg-purple-200",
|
||||
secondary:
|
||||
"rounded-full bg-slate-100 font-medium text-slate-600 hover:bg-slate-200",
|
||||
tertiary: "rounded-full bg-white text-purple-950 font-medium",
|
||||
};
|
||||
|
||||
const sizeClassNames = {
|
||||
sm: "py-1.5 px-3 text-sm",
|
||||
md: "py-2 px-5",
|
||||
lg: "py-2 md:py-2.5 px-6 md:text-lg",
|
||||
};
|
||||
|
||||
const className = clsx(
|
||||
customClassName,
|
||||
variantClassNames.base,
|
||||
variantClassNames[variant],
|
||||
sizeClassNames[size]
|
||||
);
|
||||
|
||||
if (!!(props as AnchorProps).href) {
|
||||
const anchorProps = props as AnchorProps;
|
||||
return (
|
||||
<Link href={anchorProps.href} className={className}>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
const buttonProps = props as ButtonProps;
|
||||
|
||||
return (
|
||||
<button {...buttonProps} className={className}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import clsx from "clsx";
|
||||
|
||||
export function Container({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("mx-auto max-w-4xl px-4", className)}>{children}</div>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { createJazzReactApp, useDemoAuth, DemoAuthBasicUI } from "jazz-react";
|
||||
import { JazzAccount } from "@/schema";
|
||||
|
||||
const Jazz = createJazzReactApp({
|
||||
AccountSchema: JazzAccount,
|
||||
});
|
||||
|
||||
export const { useAccount, useCoState } = Jazz;
|
||||
|
||||
export function JazzAndAuth({ children }: { children: React.ReactNode }) {
|
||||
const [auth, authState] = useDemoAuth();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
// replace `you@example.com` with your email as a temporary API key
|
||||
peer="wss://mesh.jazz.tools/?key=you@example.com"
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
{authState.state !== "signedIn" && (
|
||||
<DemoAuthBasicUI appName="Jazz Book Shelf" state={authState} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useAccount } from "@/components/JazzAndAuth";
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export function Nav() {
|
||||
const { me, logOut } = useAccount();
|
||||
|
||||
return (
|
||||
<nav className="border-b py-3">
|
||||
<Container className="flex items-center justify-between gap-12 text-sm">
|
||||
<Link href="/" className="font-serif text-lg font-semibold">
|
||||
Jazz Book Shelf
|
||||
</Link>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<p>{me?.profile?.name}</p>
|
||||
<Button variant="secondary" onClick={logOut}>
|
||||
Log out
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
|
||||
|
||||
export default function Rating({
|
||||
rating,
|
||||
className = "",
|
||||
}: {
|
||||
rating?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
const max = 5;
|
||||
const outline = max - (rating || 0);
|
||||
return (
|
||||
<div className={`inline-flex gap-0.5 text-yellow-400 ${className}`}>
|
||||
{rating ? [...Array(rating)].map((x, i) => <StarIcon key={i} />) : <></>}
|
||||
{[...Array(outline)].map((x, i) => (
|
||||
<StarOutlineIcon key={i} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import StarOutlineIcon from "@/components/icons/StarOutlineIcon";
|
||||
import StarIcon from "@/components/icons/StarIcon";
|
||||
import clsx from "clsx";
|
||||
|
||||
interface RatingInputProps {
|
||||
value?: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function RatingInput({
|
||||
value = 0,
|
||||
onChange,
|
||||
className,
|
||||
}: RatingInputProps) {
|
||||
const handleChange = (newRating: number) => {
|
||||
onChange(newRating > 5 ? 5 : newRating);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(className, "flex gap-0.5 text-2xl text-yellow-400")}>
|
||||
{[...Array(5)].map((_, i) => {
|
||||
return i < value ? (
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none"
|
||||
onClick={() => handleChange(i + 1)}
|
||||
key={i}
|
||||
>
|
||||
<StarIcon />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="focus:outline-none"
|
||||
onClick={() => handleChange(i + 1)}
|
||||
key={i}
|
||||
>
|
||||
<StarOutlineIcon />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useCoState } from "@/components/JazzAndAuth";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import { JazzAccount, JazzProfile, ListOfBookReviews } from "@/schema";
|
||||
import { BookReviewThumbnail } from "@/components/BookReviewThumbnail";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export default function UserProfile({ id }: { id: ID<JazzAccount> }) {
|
||||
const user = useCoState(JazzAccount, id);
|
||||
const profile = useCoState(JazzProfile, user?.profile?.id);
|
||||
|
||||
const bookReviews = useCoState(
|
||||
ListOfBookReviews,
|
||||
user?.profile?._refs.bookReviews?.id,
|
||||
[{}]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-serif text-lg font-medium sm:text-2xl">
|
||||
{profile?.name}'s book shelf
|
||||
</h1>
|
||||
{profile?._owner.castAs(Group).myRole() === "admin" && (
|
||||
<Button href="/add" variant="primary">
|
||||
Add book
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
{bookReviews?.map(bookReview => (
|
||||
<BookReviewThumbnail key={bookReview.id} id={bookReview.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function PlusIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
export default function StarIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function StarOutlineIcon({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
width="1em"
|
||||
height="1em"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import {
|
||||
CoMap,
|
||||
co,
|
||||
CoList,
|
||||
Account,
|
||||
Profile,
|
||||
ImageDefinition,
|
||||
Encoders,
|
||||
} from "jazz-tools";
|
||||
|
||||
export class BookReview extends CoMap {
|
||||
title = co.string;
|
||||
author = co.string;
|
||||
rating = co.number;
|
||||
dateRead? = co.encoded(Encoders.Date);
|
||||
review? = co.string;
|
||||
cover? = co.ref(ImageDefinition, { optional: true });
|
||||
}
|
||||
|
||||
export class ListOfBookReviews extends CoList.Of(co.ref(BookReview)) {}
|
||||
|
||||
/** The profile is an app-specific per-user public `CoMap`
|
||||
* where you can store top-level objects for that user */
|
||||
export class JazzProfile extends Profile {
|
||||
bookReviews = co.ref(ListOfBookReviews);
|
||||
}
|
||||
|
||||
export class JazzAccount extends Account {
|
||||
profile = co.ref(JazzProfile);
|
||||
|
||||
/** The account migration is run on account creation and on every log-in.
|
||||
* You can use it to set up the account root and any other initial CoValues you need.
|
||||
*/
|
||||
migrate(this: JazzAccount, creationProps?: { name: string }) {
|
||||
super.migrate(creationProps);
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
const colors = require("tailwindcss/colors");
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
serif: ["var(--font-fraunces)"],
|
||||
},
|
||||
colors: {
|
||||
purple: {
|
||||
...colors.purple,
|
||||
950: "#211f5a",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
export default config;
|
||||
@@ -1,49 +1,5 @@
|
||||
# jazz-example-chat
|
||||
|
||||
## 0.0.86
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react@0.8.6
|
||||
- jazz-react-auth-clerk@0.8.6
|
||||
|
||||
## 0.0.85
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-tools@0.8.5
|
||||
- cojson@0.8.5
|
||||
- jazz-react@0.8.5
|
||||
- jazz-react-auth-clerk@0.8.5
|
||||
|
||||
## 0.0.84
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- hash-slash@0.2.1
|
||||
|
||||
## 0.0.83
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- cojson@0.8.3
|
||||
- jazz-react@0.8.3
|
||||
- jazz-react-auth-clerk@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
|
||||
## 0.0.82
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a075f90]
|
||||
- jazz-tools@0.8.2
|
||||
- jazz-react@0.8.2
|
||||
- jazz-react-auth-clerk@0.8.2
|
||||
|
||||
## 0.0.81
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "jazz-example-chat-clerk",
|
||||
"private": true,
|
||||
"version": "0.0.86",
|
||||
"version": "0.0.81",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -21,11 +21,11 @@
|
||||
"@radix-ui/react-toast": "^1.1.4",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.0.0",
|
||||
"cojson": "workspace:0.8.5",
|
||||
"hash-slash": "workspace:0.2.1",
|
||||
"jazz-react": "workspace:0.8.6",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.6",
|
||||
"jazz-tools": "workspace:0.8.5",
|
||||
"cojson": "workspace:0.8.0",
|
||||
"hash-slash": "workspace:0.2.0",
|
||||
"jazz-react": "workspace:0.8.1",
|
||||
"jazz-react-auth-clerk": "workspace:0.8.1",
|
||||
"jazz-tools": "workspace:0.8.1",
|
||||
"lucide-react": "^0.274.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"react": "^18.2.0",
|
||||
@@ -49,7 +49,7 @@
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.27",
|
||||
"tailwindcss": "3.3.2",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
|
||||
@@ -7,14 +7,13 @@ import { AppContainer, TopBar } from "./ui.tsx";
|
||||
|
||||
export function App() {
|
||||
const { me, logOut } = useAccount();
|
||||
const router = useIframeHashRouter();
|
||||
|
||||
const createChat = () => {
|
||||
if (!me) return;
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], { owner: group });
|
||||
router.navigate("/#/chat/" + chat.id);
|
||||
location.hash = "/chat/" + chat.id;
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -22,7 +21,7 @@ export function App() {
|
||||
<TopBar>
|
||||
{me?.profile?.name} · <button onClick={logOut}>Log out</button>
|
||||
</TopBar>
|
||||
{router.route({
|
||||
{useIframeHashRouter().route({
|
||||
"/": () => createChat() as never,
|
||||
"/chat/:id": id => <ChatScreen chatID={id as ID<Chat>} />,
|
||||
})}
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
|
||||
@@ -1,4 +0,0 @@
|
||||
// https://docs.expo.dev/guides/using-eslint/
|
||||
module.exports = {
|
||||
extends: 'expo',
|
||||
};
|
||||
17
examples/chat-rn-clerk/.gitignore
vendored
17
examples/chat-rn-clerk/.gitignore
vendored
@@ -1,17 +0,0 @@
|
||||
node_modules/
|
||||
.expo/
|
||||
dist/
|
||||
npm-debug.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
*.orig.*
|
||||
web-build/
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
|
||||
ios
|
||||
android
|
||||
@@ -1,8 +0,0 @@
|
||||
# chat-rn-clerk
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.8.6
|
||||
- jazz-react-auth-clerk@0.8.6
|
||||
@@ -1,76 +0,0 @@
|
||||
<p align="center">
|
||||
<a href="https://clerk.com?utm_source=github&utm_medium=clerk_docs" target="_blank" rel="noopener noreferrer">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="./assets/images/light-logo.png">
|
||||
<img alt="Clerk Logo for light background" src="./assets/images/dark-logo.png" height="64">
|
||||
</picture>
|
||||
</a>
|
||||
<br />
|
||||
</p>
|
||||
<div align="center">
|
||||
<h1>
|
||||
Clerk and Expo Quickstart
|
||||
</h1>
|
||||
<a href="https://www.npmjs.com/package/@clerk/clerk-js">
|
||||
<img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-js" />
|
||||
</a>
|
||||
<a href="https://discord.com/invite/b5rXHjAg7A">
|
||||
<img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
|
||||
</a>
|
||||
<a href="https://twitter.com/clerkdev">
|
||||
<img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
|
||||
</a>
|
||||
<br />
|
||||
<br />
|
||||
<img alt="Clerk Hero Image" src="./assets/images/hero.png">
|
||||
</div>
|
||||
|
||||
## Introduction
|
||||
|
||||
Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any React or Next.js application.
|
||||
|
||||
After following the quickstart you'll have learned how to:
|
||||
|
||||
- Install `@clerk/clerk-expo`
|
||||
- Setup your environment key
|
||||
- Wrap your Expo app in `<ClerkProvider />` and supply your `tokenCache`
|
||||
- Conditionally show content based on your auth state
|
||||
- Build your sign-in and sign-up pages
|
||||
|
||||
## Running the template
|
||||
|
||||
```bash
|
||||
git clone https://github.com/clerk/clerk-expo-quickstart
|
||||
```
|
||||
|
||||
To run the example locally, you'll need to make sure you have XCode installed and configured properly, then:
|
||||
|
||||
1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com/sign-up?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-expo-quickstart).
|
||||
|
||||
2. Go to the [Clerk dashboard](https://dashboard.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-expo-quickstart) and create an application.
|
||||
|
||||
3. Set the required Clerk environment variable as shown in [the example `env` file](./.env.example).
|
||||
|
||||
4. `npm install` the required dependencies.
|
||||
|
||||
5. `npm run start` to launch the development server.
|
||||
|
||||
## Learn more
|
||||
|
||||
To learn more about Clerk and Expo, check out the following resources:
|
||||
|
||||
- [Quickstart: Get started with Expo and Clerk](https://clerk.com/docs/quickstarts/expo?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-expo-quickstart)
|
||||
|
||||
- [Clerk Documentation](https://clerk.com/docs/references/expo/overview?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=10-24-2023&utm_term=clerk-expo-quickstart)
|
||||
|
||||
- [Expo Documentation](https://docs.expo.dev/)
|
||||
|
||||
## Found an issue or want to leave feedback
|
||||
|
||||
Feel free to create a support thread on our [Discord](https://clerk.com/discord). Our support team will be happy to assist you in the `#support` channel.
|
||||
|
||||
## Connect with us
|
||||
|
||||
You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
|
||||
|
||||
If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!
|
||||
@@ -1,45 +0,0 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "jazz-chat-rn-clerk",
|
||||
"scheme": "jazz-chat-rn-clerk",
|
||||
"slug": "jazz-chat-rn-clerk",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/images/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"splash": {
|
||||
"image": "./assets/images/splash.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.jazz.chatrnclerk"
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/images/adaptive-icon.png",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"package": "com.jazz.chatrnclerk"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"expo-build-properties",
|
||||
{
|
||||
"ios": {
|
||||
"newArchEnabled": true
|
||||
},
|
||||
"android": {
|
||||
"newArchEnabled": true
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "ca3d46e5-a10a-47ec-9d77-3b841e1c62d4"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import { useAuth } from "../../src/auth-context";
|
||||
import { Redirect, Stack } from "expo-router";
|
||||
|
||||
export default function HomeLayout() {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Redirect href={"/chat"} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack
|
||||
screenOptions={{ headerShown: false, headerBackVisible: true }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from "react";
|
||||
import { SignedOut } from "@clerk/clerk-expo";
|
||||
import { Link } from "expo-router";
|
||||
import { Text, View } from "react-native";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<View className="flex-1 justify-center items-center bg-gray-100 p-6">
|
||||
<SignedOut>
|
||||
<View className="bg-white p-6 rounded-lg shadow-lg w-11/12 max-w-md">
|
||||
<Text className="text-2xl font-bold text-center text-gray-900 mb-4">
|
||||
Jazz 🤝 Clerk 🤝 Expo
|
||||
</Text>
|
||||
<Link href="/sign-in" className="mb-4">
|
||||
<Text className="text-center text-blue-600 underline text-lg">
|
||||
Sign In
|
||||
</Text>
|
||||
</Link>
|
||||
<Link href="/sign-in-oauth" className="mb-4">
|
||||
<Text className="text-center text-blue-600 underline text-lg">
|
||||
Sign In OAuth
|
||||
</Text>
|
||||
</Link>
|
||||
<Link href="/sign-up">
|
||||
<Text className="text-center text-blue-600 underline text-lg">
|
||||
Sign Up
|
||||
</Text>
|
||||
</Link>
|
||||
</View>
|
||||
</SignedOut>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { Redirect, Stack } from "expo-router";
|
||||
import { useAuth } from "../../src/auth-context";
|
||||
|
||||
export default function UnAuthenticatedLayout() {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Redirect href={"/chat"} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
headerBackVisible: true,
|
||||
headerTitle: "",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import React from "react";
|
||||
import * as WebBrowser from "expo-web-browser";
|
||||
import { Text, View, TouchableOpacity } from "react-native";
|
||||
import { Link } from "expo-router";
|
||||
import { useOAuth } from "@clerk/clerk-expo";
|
||||
import * as Linking from "expo-linking";
|
||||
|
||||
export const useWarmUpBrowser = () => {
|
||||
React.useEffect(() => {
|
||||
// Warm up the android browser to improve UX
|
||||
// https://docs.expo.dev/guides/authentication/#improving-user-experience
|
||||
void WebBrowser.warmUpAsync();
|
||||
return () => {
|
||||
void WebBrowser.coolDownAsync();
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
|
||||
WebBrowser.maybeCompleteAuthSession();
|
||||
|
||||
const SignInWithOAuth = () => {
|
||||
useWarmUpBrowser();
|
||||
|
||||
const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });
|
||||
|
||||
const onPress = React.useCallback(async () => {
|
||||
try {
|
||||
const { createdSessionId, signIn, signUp, setActive } =
|
||||
await startOAuthFlow({
|
||||
redirectUrl: Linking.createURL("/", {
|
||||
scheme: "jazz-chat-rn-clerk",
|
||||
}),
|
||||
});
|
||||
|
||||
if (createdSessionId) {
|
||||
setActive!({ session: createdSessionId });
|
||||
} else {
|
||||
// Use signIn or signUp for next steps such as MFA
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("OAuth error", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View className="flex-1 justify-center items-center bg-gray-50 p-6">
|
||||
<View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-lg items-center">
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
className="w-full bg-red-500 py-3 rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold">
|
||||
Sign in with Google
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Link href="/" className="mt-4">
|
||||
<Text className="text-blue-600 text-lg font-semibold underline mb-6">
|
||||
Back to Home
|
||||
</Text>
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
export default SignInWithOAuth;
|
||||
@@ -1,91 +0,0 @@
|
||||
import { useSignIn } from "@clerk/clerk-expo";
|
||||
import { Text, TextInput, View, TouchableOpacity } from "react-native";
|
||||
import React from "react";
|
||||
import { Link } from "expo-router";
|
||||
|
||||
export default function SignInPage() {
|
||||
const { signIn, setActive, isLoaded } = useSignIn();
|
||||
const [emailAddress, setEmailAddress] = React.useState("");
|
||||
const [password, setPassword] = React.useState("");
|
||||
const [errorMessage, setErrorMessage] = React.useState("");
|
||||
|
||||
const onSignInPress = React.useCallback(async () => {
|
||||
if (!isLoaded) {
|
||||
return;
|
||||
}
|
||||
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
const signInAttempt = await signIn.create({
|
||||
identifier: emailAddress,
|
||||
password,
|
||||
});
|
||||
|
||||
if (signInAttempt.status === "complete") {
|
||||
await setActive({ session: signInAttempt.createdSessionId });
|
||||
} else {
|
||||
console.error(JSON.stringify(signInAttempt, null, 2));
|
||||
setErrorMessage("Invalid credentials. Please try again.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error(JSON.stringify(err, null, 2));
|
||||
if (err.errors && err.errors[0]?.message) {
|
||||
setErrorMessage(err.errors[0].message);
|
||||
} else {
|
||||
setErrorMessage(
|
||||
"An unexpected error occurred. Please try again.",
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [isLoaded, emailAddress, password]);
|
||||
|
||||
return (
|
||||
<View className="flex-1 justify-center items-center bg-gray-50 p-6">
|
||||
<View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-md">
|
||||
<Text className="text-3xl font-bold text-center text-gray-800 mb-6">
|
||||
Sign In
|
||||
</Text>
|
||||
{errorMessage ? (
|
||||
<Text className="text-red-500 text-center mb-4">
|
||||
{errorMessage}
|
||||
</Text>
|
||||
) : null}
|
||||
<TextInput
|
||||
autoCapitalize="none"
|
||||
value={emailAddress}
|
||||
placeholder="Email..."
|
||||
onChangeText={(emailAddress) =>
|
||||
setEmailAddress(emailAddress)
|
||||
}
|
||||
className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TextInput
|
||||
value={password}
|
||||
placeholder="Password..."
|
||||
secureTextEntry={true}
|
||||
onChangeText={(password) => setPassword(password)}
|
||||
className="w-full h-12 mb-6 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={onSignInPress}
|
||||
className="w-full h-12 bg-blue-600 rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold">
|
||||
Sign In
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<View className="flex-row items-center justify-center mt-4">
|
||||
<Text className="text-gray-600">
|
||||
Don't have an account?
|
||||
</Text>
|
||||
<Link href="/sign-up">
|
||||
<Text className="text-blue-500 ml-2 font-semibold">
|
||||
Sign up
|
||||
</Text>
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { TextInput, View, Text, TouchableOpacity } from "react-native";
|
||||
import { useSignUp } from "@clerk/clerk-expo";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
|
||||
export default function SignUpPage() {
|
||||
const { isLoaded, signUp, setActive } = useSignUp();
|
||||
|
||||
const [emailAddress, setEmailAddress] = React.useState("");
|
||||
const [password, setPassword] = React.useState("");
|
||||
const [pendingVerification, setPendingVerification] = React.useState(false);
|
||||
const [code, setCode] = React.useState("");
|
||||
const [errorMessage, setErrorMessage] = React.useState("");
|
||||
const navigation = useNavigation();
|
||||
|
||||
const onSignUpPress = async () => {
|
||||
if (!isLoaded) return;
|
||||
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
await signUp.create({
|
||||
emailAddress,
|
||||
password,
|
||||
});
|
||||
|
||||
await signUp.prepareEmailAddressVerification({
|
||||
strategy: "email_code",
|
||||
});
|
||||
|
||||
setPendingVerification(true);
|
||||
} catch (err: any) {
|
||||
console.error(JSON.stringify(err, null, 2));
|
||||
if (err.errors && err.errors[0]?.message) {
|
||||
setErrorMessage(err.errors[0].message);
|
||||
} else {
|
||||
setErrorMessage(
|
||||
"An unexpected error occurred. Please try again.",
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPressVerify = async () => {
|
||||
if (!isLoaded) return;
|
||||
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
const completeSignUp = await signUp.attemptEmailAddressVerification(
|
||||
{
|
||||
code,
|
||||
},
|
||||
);
|
||||
|
||||
if (completeSignUp.status === "complete") {
|
||||
await setActive({ session: completeSignUp.createdSessionId });
|
||||
} else {
|
||||
console.error(JSON.stringify(completeSignUp, null, 2));
|
||||
setErrorMessage("Failed to verify. Please check your code.");
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error(JSON.stringify(err, null, 2));
|
||||
setErrorMessage("Invalid verification code. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 justify-center items-center bg-gray-50 p-6">
|
||||
<View className="bg-white w-11/12 max-w-md p-8 rounded-lg shadow-lg">
|
||||
<Text className="text-3xl font-bold text-center text-gray-800 mb-6">
|
||||
{pendingVerification ? "Verify Email" : "Sign Up"}
|
||||
</Text>
|
||||
{errorMessage ? (
|
||||
<Text className="text-red-500 text-center mb-4">
|
||||
{errorMessage}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
{!pendingVerification && (
|
||||
<>
|
||||
<TextInput
|
||||
autoCapitalize="none"
|
||||
value={emailAddress}
|
||||
placeholder="Email..."
|
||||
onChangeText={(email) => setEmailAddress(email)}
|
||||
className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TextInput
|
||||
value={password}
|
||||
placeholder="Password..."
|
||||
secureTextEntry={true}
|
||||
onChangeText={(password) => setPassword(password)}
|
||||
className="w-full h-12 mb-6 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={onSignUpPress}
|
||||
className="w-full h-12 bg-blue-600 rounded-lg flex justify-center items-center mb-4"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold">
|
||||
Sign Up
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
|
||||
{pendingVerification && (
|
||||
<>
|
||||
<TextInput
|
||||
value={code}
|
||||
placeholder="Verification Code..."
|
||||
onChangeText={(code) => setCode(code)}
|
||||
className="w-full h-12 mb-4 px-4 bg-gray-100 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={onPressVerify}
|
||||
className="w-full h-12 bg-green-600 rounded-lg flex justify-center items-center mb-4"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold">
|
||||
Verify Email
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { ScrollViewStyleReset } from "expo-router/html";
|
||||
import { type PropsWithChildren } from "react";
|
||||
|
||||
/**
|
||||
* This file is web-only and used to configure the root HTML for every web page during static rendering.
|
||||
* The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
|
||||
*/
|
||||
export default function Root({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
{/*
|
||||
Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
|
||||
However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
|
||||
*/}
|
||||
<ScrollViewStyleReset />
|
||||
|
||||
{/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
|
||||
<style
|
||||
dangerouslySetInnerHTML={{ __html: responsiveBackground }}
|
||||
/>
|
||||
{/* Add any additional <head> elements that you want globally available on web... */}
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
const responsiveBackground = `
|
||||
body {
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #000;
|
||||
}
|
||||
}`;
|
||||
@@ -1,29 +0,0 @@
|
||||
import { Link, Stack } from "expo-router";
|
||||
import { StyleSheet, View, Text } from "react-native";
|
||||
|
||||
export default function NotFoundScreen() {
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: "Oops!" }} />
|
||||
<View style={styles.container}>
|
||||
<Text>This screen doesn't exist.</Text>
|
||||
<Link href="/" style={styles.link}>
|
||||
<Text>Go to home screen!</Text>
|
||||
</Link>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
link: {
|
||||
marginTop: 15,
|
||||
paddingVertical: 15,
|
||||
},
|
||||
});
|
||||
@@ -1,43 +0,0 @@
|
||||
import { useFonts } from "expo-font";
|
||||
import { ClerkLoaded, ClerkProvider } from "@clerk/clerk-expo";
|
||||
import * as SplashScreen from "expo-splash-screen";
|
||||
import React, { useEffect } from "react";
|
||||
import { Slot } from "expo-router";
|
||||
import { tokenCache } from "../cache";
|
||||
import { JazzAndAuth } from "../src/auth-context";
|
||||
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
export default function RootLayout() {
|
||||
const [loaded] = useFonts({
|
||||
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (loaded) {
|
||||
SplashScreen.hideAsync();
|
||||
}
|
||||
}, [loaded]);
|
||||
|
||||
if (!loaded) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const publishableKey = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
|
||||
|
||||
if (!publishableKey) {
|
||||
throw new Error(
|
||||
"Missing Publishable Key. Please set EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY in your .env",
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ClerkProvider tokenCache={tokenCache} publishableKey={publishableKey}>
|
||||
<ClerkLoaded>
|
||||
<JazzAndAuth>
|
||||
<Slot />
|
||||
</JazzAndAuth>
|
||||
</ClerkLoaded>
|
||||
</ClerkProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
import React, {
|
||||
SafeAreaView,
|
||||
View,
|
||||
Text,
|
||||
Alert,
|
||||
TouchableOpacity,
|
||||
FlatList,
|
||||
KeyboardAvoidingView,
|
||||
TextInput,
|
||||
Button,
|
||||
} from "react-native";
|
||||
import { useLocalSearchParams } from "expo-router";
|
||||
import { useState, useEffect, useLayoutEffect } from "react";
|
||||
import { useAccount, useCoState } from "@/src/jazz";
|
||||
import { Chat, Message } from "@/src/schema";
|
||||
import { Group, ID } from "jazz-tools";
|
||||
import clsx from "clsx";
|
||||
import { useNavigation, useFocusEffect } from "@react-navigation/native";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
|
||||
export default function Conversation() {
|
||||
const { chatId } = useLocalSearchParams();
|
||||
const { me } = useAccount();
|
||||
const [chat, setChat] = useState<Chat>();
|
||||
const [message, setMessage] = useState("");
|
||||
const loadedChat = useCoState(Chat, chat?.id, [{}]);
|
||||
const navigation = useNavigation();
|
||||
|
||||
useEffect(() => {
|
||||
if (chat) return;
|
||||
if (chatId === "new") {
|
||||
createChat();
|
||||
} else {
|
||||
loadChat(chatId as ID<Chat>);
|
||||
}
|
||||
}, [chat]);
|
||||
|
||||
// Effect to dynamically set header options
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerTitle: "Chat",
|
||||
headerRight: () =>
|
||||
chat ? (
|
||||
<Button
|
||||
onPress={() => {
|
||||
if (chat?.id) {
|
||||
Clipboard.setStringAsync(
|
||||
`https://chat.jazz.tools/#/chat/${chat.id}`,
|
||||
);
|
||||
Alert.alert(
|
||||
"Copied to clipboard",
|
||||
`Chat ID: ${chat.id}`,
|
||||
);
|
||||
}
|
||||
}}
|
||||
title="Share"
|
||||
/>
|
||||
) : null,
|
||||
});
|
||||
}, [navigation, chat]);
|
||||
|
||||
const createChat = () => {
|
||||
const group = Group.create({ owner: me });
|
||||
group.addMember("everyone", "writer");
|
||||
const chat = Chat.create([], { owner: group });
|
||||
setChat(chat);
|
||||
};
|
||||
|
||||
const loadChat = async (chatId: ID<Chat>) => {
|
||||
try {
|
||||
const chat = await Chat.load(chatId, me, []);
|
||||
setChat(chat);
|
||||
} catch (error) {
|
||||
console.log("Error loading chat", error);
|
||||
Alert.alert("Error", `Error loading chat: ${error}`);
|
||||
}
|
||||
};
|
||||
|
||||
const sendMessage = () => {
|
||||
if (!chat) return;
|
||||
if (message.trim()) {
|
||||
chat.push(
|
||||
Message.create({ text: message }, { owner: chat._owner }),
|
||||
);
|
||||
setMessage("");
|
||||
}
|
||||
};
|
||||
|
||||
const renderMessageItem = ({ item }: { item: Message }) => {
|
||||
const isMe = item._edits.text.by?.isMe;
|
||||
return (
|
||||
<View
|
||||
className={clsx(
|
||||
`rounded-xl px-3 py-2 max-w-[75%] my-1`,
|
||||
isMe ? `bg-blue-500 self-end` : `bg-gray-200 self-start`,
|
||||
)}
|
||||
>
|
||||
{!isMe ? (
|
||||
<Text
|
||||
className={clsx(
|
||||
`text-xs text-gray-500 mb-1`,
|
||||
isMe ? "text-right" : "text-left",
|
||||
)}
|
||||
>
|
||||
{item._edits.text.by?.profile?.name}
|
||||
</Text>
|
||||
) : null}
|
||||
<View
|
||||
className={clsx(
|
||||
"flex relative items-end justify-between",
|
||||
isMe ? "flex-row" : "flex-row",
|
||||
)}
|
||||
>
|
||||
<Text
|
||||
className={clsx(
|
||||
!isMe ? "text-black" : "text-gray-200",
|
||||
`text-md max-w-[85%]`,
|
||||
)}
|
||||
>
|
||||
{item.text}
|
||||
</Text>
|
||||
<Text
|
||||
className={clsx(
|
||||
"text-[10px] text-right ml-2",
|
||||
!isMe ? "mt-2 text-gray-500" : "mt-1 text-gray-200",
|
||||
)}
|
||||
>
|
||||
{item._edits.text.madeAt.getHours()}:
|
||||
{item._edits.text.madeAt.getMinutes()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<FlatList
|
||||
contentContainerStyle={{
|
||||
flexGrow: 1,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 8,
|
||||
}}
|
||||
className="flex"
|
||||
data={loadedChat}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={renderMessageItem}
|
||||
/>
|
||||
<KeyboardAvoidingView
|
||||
keyboardVerticalOffset={110}
|
||||
behavior="padding"
|
||||
className="p-3 bg-white border-t border-gray-300"
|
||||
>
|
||||
<SafeAreaView className="flex-row items-center gap-2">
|
||||
<TextInput
|
||||
className="flex-1 rounded-full h-10 px-4 bg-gray-100 border border-gray-300 focus:border-blue-500 focus:bg-white"
|
||||
value={message}
|
||||
onChangeText={setMessage}
|
||||
placeholder="Type a message..."
|
||||
textAlignVertical="center"
|
||||
onSubmitEditing={sendMessage}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={sendMessage}
|
||||
className="bg-blue-500 rounded-full h-10 w-10 items-center justify-center"
|
||||
>
|
||||
<Text className="text-white text-xl">↑</Text>
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
</KeyboardAvoidingView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import { Stack } from "expo-router";
|
||||
|
||||
export default function ChatLayout() {
|
||||
return (
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
headerBackVisible: true,
|
||||
headerTitle: "",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import { useLayoutEffect } from "react";
|
||||
import React, {
|
||||
Button,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
Alert,
|
||||
} from "react-native";
|
||||
import { ID } from "jazz-tools";
|
||||
import { useRouter } from "expo-router";
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
|
||||
import { Chat } from "../../src/schema";
|
||||
import { useAccount } from "../../src/jazz";
|
||||
import { useUser } from "@clerk/clerk-expo";
|
||||
|
||||
export default function ChatScreen() {
|
||||
const { logOut } = useAccount();
|
||||
const router = useRouter();
|
||||
const navigation = useNavigation();
|
||||
const { user } = useUser();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
headerTitle: "Chat",
|
||||
headerRight: () => <Button onPress={logOut} title="Logout" />,
|
||||
});
|
||||
}, [navigation]);
|
||||
|
||||
const loadChat = async (chatId: ID<Chat> | "new") => {
|
||||
router.navigate(`/chat/${chatId}`);
|
||||
};
|
||||
|
||||
const joinChat = () => {
|
||||
Alert.prompt(
|
||||
"Join Chat",
|
||||
"Enter the Chat ID (example: co_zBGEHYvRfGuT2YSBraY3njGjnde)",
|
||||
[
|
||||
{
|
||||
text: "Cancel",
|
||||
style: "cancel",
|
||||
},
|
||||
{
|
||||
text: "Join",
|
||||
onPress: (chatId) => {
|
||||
if (chatId) {
|
||||
loadChat(chatId as ID<Chat>);
|
||||
} else {
|
||||
Alert.alert("Error", "Chat ID cannot be empty.");
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
"plain-text",
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-gray-50">
|
||||
<View className="flex-1 justify-center items-center px-6">
|
||||
<View className="w-full max-w-sm bg-white p-8 rounded-lg shadow-lg">
|
||||
<Text className="text-xl font-semibold text-gray-800">
|
||||
Welcome, {user?.emailAddresses[0].emailAddress}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => loadChat("new")}
|
||||
className="w-full bg-blue-600 py-4 rounded-md mb-4 mt-4"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold text-center">
|
||||
Start New Chat
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={joinChat}
|
||||
className="w-full bg-green-500 py-4 rounded-md"
|
||||
>
|
||||
<Text className="text-white text-lg font-semibold text-center">
|
||||
Join Chat
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
@@ -1,10 +0,0 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
plugins: [
|
||||
"nativewind/babel",
|
||||
"@babel/plugin-transform-class-static-block",
|
||||
],
|
||||
};
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
import { Platform } from "react-native";
|
||||
|
||||
export interface TokenCache {
|
||||
getToken: (key: string) => Promise<string | undefined | null>;
|
||||
saveToken: (key: string, token: string) => Promise<void>;
|
||||
clearToken?: (key: string) => void;
|
||||
}
|
||||
|
||||
const createTokenCache = (): TokenCache => {
|
||||
return {
|
||||
getToken: async (key: string) => {
|
||||
try {
|
||||
const item = await SecureStore.getItemAsync(key);
|
||||
if (item) {
|
||||
console.log(`${key} was used 🔐 \n`);
|
||||
} else {
|
||||
console.log("No values stored under key: " + key);
|
||||
}
|
||||
return item;
|
||||
} catch (error) {
|
||||
console.error("secure store get item error: ", error);
|
||||
await SecureStore.deleteItemAsync(key);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
saveToken: (key: string, token: string) => {
|
||||
return SecureStore.setItemAsync(key, token);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// SecureStore is not supported on the web
|
||||
// https://github.com/expo/expo/issues/7744#issuecomment-611093485
|
||||
export const tokenCache =
|
||||
Platform.OS !== "web" ? createTokenCache() : undefined;
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"cli": {
|
||||
"version": ">= 12.5.1",
|
||||
"appVersionSource": "remote"
|
||||
},
|
||||
"build": {
|
||||
"development": {
|
||||
"developmentClient": true,
|
||||
"distribution": "internal"
|
||||
},
|
||||
"ios-simulator": {
|
||||
"extends": "development",
|
||||
"ios": {
|
||||
"simulator": true
|
||||
}
|
||||
},
|
||||
"preview": {
|
||||
"distribution": "internal"
|
||||
},
|
||||
"production": {
|
||||
"autoIncrement": true
|
||||
}
|
||||
},
|
||||
"submit": {
|
||||
"production": {}
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
import "./polyfills";
|
||||
import "expo-router/entry";
|
||||
@@ -1,31 +0,0 @@
|
||||
// Learn more https://docs.expo.dev/guides/monorepos
|
||||
const { getDefaultConfig } = require("expo/metro-config");
|
||||
const { FileStore } = require("metro-cache");
|
||||
const path = require("path");
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const projectRoot = __dirname;
|
||||
const workspaceRoot = path.resolve(projectRoot, "../..");
|
||||
|
||||
const config = getDefaultConfig(projectRoot);
|
||||
|
||||
// Since we are using pnpm, we have to setup the monorepo manually for Metro
|
||||
// #1 - Watch all files in the monorepo
|
||||
config.watchFolders = [workspaceRoot];
|
||||
// #2 - Try resolving with project modules first, then workspace modules
|
||||
config.resolver.nodeModulesPaths = [
|
||||
path.resolve(projectRoot, "node_modules"),
|
||||
path.resolve(workspaceRoot, "node_modules"),
|
||||
];
|
||||
config.resolver.sourceExts = ["mjs", "js", "json", "ts", "tsx"];
|
||||
config.resolver.unstable_enablePackageExports = true;
|
||||
config.resolver.requireCycleIgnorePatterns = [/(^|\/|\\)node_modules($|\/|\\)/];
|
||||
|
||||
// Use turborepo to restore the cache when possible
|
||||
config.cacheStores = [
|
||||
new FileStore({
|
||||
root: path.join(projectRoot, "node_modules", ".cache", "metro"),
|
||||
}),
|
||||
];
|
||||
|
||||
module.exports = config;
|
||||
1
examples/chat-rn-clerk/nativewind-env.d.ts
vendored
1
examples/chat-rn-clerk/nativewind-env.d.ts
vendored
@@ -1 +0,0 @@
|
||||
/// <reference types="nativewind/types" />
|
||||
@@ -1,80 +0,0 @@
|
||||
{
|
||||
"name": "chat-rn-clerk",
|
||||
"main": "index.js",
|
||||
"version": "1.0.1",
|
||||
"scripts": {
|
||||
"build": "expo export -p ios",
|
||||
"start": "expo start",
|
||||
"android": "expo run:android",
|
||||
"ios": "expo run:ios",
|
||||
"web": "expo start --web",
|
||||
"test": "jest --watchAll",
|
||||
"lint": "expo lint"
|
||||
},
|
||||
"jest": {
|
||||
"preset": "jest-expo"
|
||||
},
|
||||
"dependencies": {
|
||||
"@azure/core-asynciterator-polyfill": "^1.0.2",
|
||||
"@bam.tech/react-native-image-resizer": "^3.0.10",
|
||||
"@clerk/clerk-expo": "^2.2.21",
|
||||
"@expo/vector-icons": "^14.0.2",
|
||||
"@react-native-community/netinfo": "^11.3.1",
|
||||
"@react-navigation/native": "^6.1.18",
|
||||
"@react-navigation/native-stack": "^6.11.0",
|
||||
"base-64": "^1.0.0",
|
||||
"buffer": "^6.0.3",
|
||||
"clsx": "^2.0.0",
|
||||
"expo": "~51.0.37",
|
||||
"expo-build-properties": "~0.12.5",
|
||||
"expo-clipboard": "~6.0.3",
|
||||
"expo-constants": "~16.0.2",
|
||||
"expo-crypto": "~13.0.2",
|
||||
"expo-dev-client": "~4.0.28",
|
||||
"expo-file-system": "^17.0.1",
|
||||
"expo-font": "~12.0.4",
|
||||
"expo-linking": "~6.3.1",
|
||||
"expo-router": "~3.5.23",
|
||||
"expo-secure-store": "~13.0.2",
|
||||
"expo-splash-screen": "~0.27.5",
|
||||
"expo-status-bar": "~1.12.1",
|
||||
"expo-system-ui": "~3.0.7",
|
||||
"expo-web-browser": "~13.0.3",
|
||||
"jazz-react-auth-clerk": "workspace:*",
|
||||
"jazz-react-native": "workspace:*",
|
||||
"jazz-react-native-media-images": "workspace:*",
|
||||
"jazz-tools": "workspace:*",
|
||||
"nativewind": "^2.0.11",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-native": "~0.74.5",
|
||||
"react-native-fetch-api": "^3.0.0",
|
||||
"react-native-gesture-handler": "~2.16.1",
|
||||
"react-native-get-random-values": "^1.11.0",
|
||||
"react-native-mmkv": "3.0.1",
|
||||
"react-native-polyfill-globals": "^3.1.0",
|
||||
"react-native-quick-base64": "^2.1.2",
|
||||
"react-native-reanimated": "~3.10.1",
|
||||
"react-native-safe-area-context": "4.10.5",
|
||||
"react-native-screens": "3.31.1",
|
||||
"react-native-url-polyfill": "^2.0.0",
|
||||
"react-native-web": "~0.19.10",
|
||||
"text-encoding": "^0.7.0",
|
||||
"web-streams-polyfill": "^3.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0",
|
||||
"@babel/plugin-transform-class-static-block": "^7.24.7",
|
||||
"@types/jest": "^29.5.3",
|
||||
"@types/react": "^18.2.19",
|
||||
"@types/react-test-renderer": "^18.0.7",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-config-expo": "^7.1.2",
|
||||
"jest": "^29.2.1",
|
||||
"jest-expo": "~51.0.3",
|
||||
"react-test-renderer": "18.2.0",
|
||||
"tailwindcss": "3.3.2",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import "react-native-polyfill-globals/auto";
|
||||
import "@azure/core-asynciterator-polyfill";
|
||||
import { ReadableStream } from "web-streams-polyfill/ponyfill/es6";
|
||||
import { polyfillGlobal } from "react-native/Libraries/Utilities/PolyfillFunctions";
|
||||
import { Buffer } from "buffer";
|
||||
|
||||
polyfillGlobal("Buffer", () => Buffer);
|
||||
polyfillGlobal("ReadableStream", () => ReadableStream);
|
||||
@@ -1,62 +0,0 @@
|
||||
import React, {
|
||||
useContext,
|
||||
createContext,
|
||||
useEffect,
|
||||
useState,
|
||||
PropsWithChildren,
|
||||
} from "react";
|
||||
import { useClerk, useUser } from "@clerk/clerk-expo";
|
||||
import { useJazzClerkAuth } from "jazz-react-auth-clerk";
|
||||
import { Jazz } from "./jazz";
|
||||
import { Text, View } from "react-native";
|
||||
|
||||
const AuthContext = createContext<{
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
}>({
|
||||
isAuthenticated: false,
|
||||
isLoading: true,
|
||||
});
|
||||
|
||||
export function useAuth() {
|
||||
return useContext(AuthContext);
|
||||
}
|
||||
|
||||
export function JazzAndAuth({ children }: PropsWithChildren) {
|
||||
const { isSignedIn, isLoaded: isClerkLoaded } = useUser();
|
||||
const clerk = useClerk();
|
||||
const [auth, state] = useJazzClerkAuth(clerk);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSignedIn && isClerkLoaded && auth) {
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
}, [isSignedIn, isClerkLoaded, auth]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{ isAuthenticated, isLoading: !isClerkLoaded || !auth }}
|
||||
>
|
||||
{state?.errors?.length > 0 &&
|
||||
state.errors.map((error) => (
|
||||
<View key={error}>
|
||||
<Text style={{ color: "red" }}>{error}</Text>
|
||||
</View>
|
||||
))}
|
||||
{auth ? (
|
||||
<Jazz.Provider
|
||||
auth={auth}
|
||||
peer="wss://mesh.jazz.tools/?key=chat-rn-clerk-example-jazz@gcmp.io"
|
||||
storage={undefined}
|
||||
>
|
||||
{children}
|
||||
</Jazz.Provider>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { createJazzRNApp } from "jazz-react-native";
|
||||
import { MMKVStorage } from "./mmkv-storage";
|
||||
|
||||
const nativeStorage = new MMKVStorage();
|
||||
|
||||
export const Jazz = createJazzRNApp({ nativeStorage });
|
||||
export const { useAccount, useCoState, useAcceptInvite } = Jazz;
|
||||
@@ -1,25 +0,0 @@
|
||||
import { MMKV } from "react-native-mmkv";
|
||||
import type { NativeStorage } from "jazz-react-native";
|
||||
|
||||
const storage = new MMKV();
|
||||
|
||||
export class MMKVStorage implements NativeStorage {
|
||||
get(key: string): Promise<string | undefined> {
|
||||
return Promise.resolve(storage.getString(key));
|
||||
}
|
||||
|
||||
set(key: string, value: string): Promise<void> {
|
||||
storage.set(key, value);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
delete(key: string): Promise<void> {
|
||||
storage.delete(key);
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
clearAll(): Promise<void> {
|
||||
storage.clearAll();
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { CoMap, CoList, co } from "jazz-tools";
|
||||
|
||||
export class Message extends CoMap {
|
||||
text = co.string;
|
||||
}
|
||||
|
||||
export class Chat extends CoList.Of(co.ref(Message)) {}
|
||||
@@ -1,12 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./app/**/*.{js,jsx,ts,tsx}",
|
||||
"./components/**/*.{js,jsx,ts,tsx}",
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"extends": "expo/tsconfig.base",
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
]
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXZpZGVudC1kYW5lLTg5LmNsZXJrLmFjY291bnRzLmRldiQ
|
||||
38
examples/chat-rn/.gitignore
vendored
38
examples/chat-rn/.gitignore
vendored
@@ -1,38 +0,0 @@
|
||||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# Expo
|
||||
.expo/
|
||||
dist/
|
||||
web-build/
|
||||
|
||||
# Native
|
||||
*.orig.*
|
||||
*.jks
|
||||
*.p8
|
||||
*.p12
|
||||
*.key
|
||||
*.mobileprovision
|
||||
|
||||
# Metro
|
||||
.metro-health-check*
|
||||
|
||||
# debug
|
||||
npm-debug.*
|
||||
yarn-debug.*
|
||||
yarn-error.*
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
|
||||
ios
|
||||
android
|
||||
@@ -1,24 +0,0 @@
|
||||
# chat-rn
|
||||
|
||||
## 1.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- jazz-react-native@0.8.6
|
||||
|
||||
## 1.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c3f4e6b]
|
||||
- Updated dependencies [d9152ed]
|
||||
- jazz-react-native@0.8.5
|
||||
- jazz-tools@0.8.5
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies
|
||||
- jazz-react-native@0.8.3
|
||||
- jazz-tools@0.8.3
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user