docs: add service docs and about pag

README.md

@@ -1,73 +1 @@
-# Turborepo Design System starter with Changesets
-
-This is an official React design system starter powered by Turborepo. Versioning and package publishing is handled by [Changesets](https://github.com/changesets/changesets) and fully automated with GitHub Actions.
-
-## Using this example
-
-Run the following command:
-
-```sh
-npx create-turbo@latest -e with-changesets
-```
-
-## What's inside?
-
-This Turborepo includes the following:
-
-### Apps and Packages
-
-- `docs`: A placeholder documentation site powered by [Next.js](https://nextjs.org/)
-- `@davstack/core`: core React components
-- `@davstack/utils`: shared React utilities
-- `@davstack/tsconfig`: shared `tsconfig.json`s used throughout the monorepo
-- `@davstack/eslint-config`: ESLint preset
-
-Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
-
-### Utilities
-
-This Turborepo has some additional tools already setup for you:
-
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
-
-### Useful commands
-
-- `pnpm build` - Build all packages and the docs site
-- `pnpm dev` - Develop all packages and the docs site
-- `pnpm lint` - Lint all packages
-- `pnpm changeset` - Generate a changeset
-- `pnpm clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)
-
-### Changing the npm organization scope
-
-The npm organization scope for this design system starter is `@davstack`. To change this, it's a bit manual at the moment, but you'll need to do the following:
-
-- Rename folders in `packages/*` to replace `davstack` with your desired scope
-- Search and replace `davstack` with your desired scope
-- Re-run `pnpm install`
-
-## Versioning and Publishing packages
-
-Package publishing has been configured using [Changesets](https://github.com/changesets/changesets). Please review their [documentation](https://github.com/changesets/changesets#documentation) to familiarize yourself with the workflow.
-
-This example comes with automated npm releases setup in a [GitHub Action](https://github.com/changesets/action). To get this working, you will need to create an `NPM_TOKEN` and `GITHUB_TOKEN` in your repository settings. You should also install the [Changesets bot](https://github.com/apps/changeset-bot) on your GitHub repository as well.
-
-For more information about this automation, refer to the official [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md)
-
-### npm
-
-If you want to publish package to the public npm registry and make them publicly available, this is already setup.
-
-To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s
-
-```diff
-- "publishConfig": {
--  "access": "public"
-- },
-```
-
-### GitHub Package Registry
-
-See [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-a-package-using-publishconfig-in-the-packagejson-file)
+Go to [davstack.com](https://davstack.com) for documentation and examples.

apps/docs/package.json

@@ -11,6 +11,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"@davstack/service": "workspace:^",
 		"@davstack/store": "workspace:*",
 		"@next/eslint-plugin-next": "^14.1.4",
 		"next": "^13.0.6",

apps/docs/pages/_meta.json

@@ -1,9 +1,5 @@
 {
 	"index": {
-		"title": "Home",
-		"display": "hidden"
-	},
-	"about": {
 		"title": "About",
 		"type": "page"
 	},
@@ -19,15 +15,11 @@
 		"title": "UI",
 		"type": "page"
 	},
-	"temp": {
-		"title": "temp",
-		"type": "page"
-	},
+
 	"contact": {
 		"display": "hidden",
 		"title": "Contact ↗",
 		"type": "page",
-
 		"href": "https://twitter.com/shuding_",
 		"newWindow": true
 	}

apps/docs/pages/index.mdx

@@ -1,11 +1,17 @@
 # Introduction
-
-Welcome to Nextra! This is a basic docs template. You can use it as a starting point for your own project :)
 
-## What is Nextra?
+Davstack is a collection of libraries for building web applications.
 
-A **simple**, **powerful** and **flexible** site generation framework with everything you love from Next.js.
+While it is designed to be used with React, it could be used with any other libraries.
 
-## Documentation
+We are currently in early development, so the APIs are subject to change and contributions are welcome.
 
-The documentation is available at [https://nextra.site](https://nextra.site).
+## Design Principles
+
+> "Stand on the shoulders of giants."
+
+- **Embrace the ecosystem**: Davstack is built on top of popular libraries such as React, shadcn/ui, Zustand, Tailwind and TRPC. We provide utilities that enhance these libraries, without reinventing the wheel.
+
+- **TypeScript-first**: Davstack is written in TypeScript and is designed to be used with TypeScript. It provides type-safe APIs and utilities to help you build web applications.
+
+- **Minimalistic**: Davstack is aims to provide the most simple and minimalistic APIs without reducing flexibility, so you can focus on building your application instead of learning a new framework.

apps/docs/pages/service/overview.mdx

@@ -1 +1,3 @@
-testing
+import ServiceReadMe from '@davstack/service/README.md';
+
+<ServiceReadMe />

apps/docs/pages/service/trpc-usage-example.mdx

@@ -0,0 +1,5 @@
+Usage with tRPC has been tested and is fully working, but this example has not been created just yet.
+
+Please join the discord server if you need help with this and I will be happy to help you out.
+
+Contributions are welcome!

apps/docs/pages/ui/overview.mdx

@@ -1 +1,15 @@
-Content here
+# @davstack/ui
+
+WORK IN PROGRESS
+
+Plans for this package:
+
+- Extension of shadcn/ui
+- Makes react-hook-form + shadcn/ui much more easier to use, WITHOUT sacrificing flexibility
+- Comprensive library of snippets for common form components
+- Dialog manager
+- Slot components
+
+Much of the code in this package has already been written while building [Ream](https://reamapp.com), but it is currently in a private repository.
+
+I will be working on this package in the coming weeks. If you are interested in this package, please join the discord server and let me know!

apps/docs/theme.config.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import { DocsThemeConfig } from 'nextra-theme-docs';
 
 const config = {
-	logo: <span>DavStack</span>,
+	logo: <span>Davstack</span>,
 	project: {
 		link: 'https://github.com/DawidWraga/davstack',
 	},
 	chat: {
-		link: 'https://discord.com',
+		link: 'https://discord.gg/tsW7YfH5vT',
 	},
 	docsRepositoryBase: 'https://github.com/DawidWraga/davstack',
 	footer: {
-		text: 'DavStack© 2024',
+		text: 'Davstack© 2024',
 	},
 } satisfies DocsThemeConfig;
 

packages/service/README.md

@@ -0,0 +1,139 @@
+# Davstack Service
+
+Davstack Service is beautifly simple and flexible typescript library for building backend services for your applications.
+
+The fluent API is heavily inspired by the [tRPC](https://trpc.io/) procedure builder, providing an extremely intuitive and familiar DX.
+
+The key difference is that Davstack Service is a **service** builder, which provides some distinct advantages.
+
+### Why Use Davstack Service?
+
+Davstack service provides a structured service builder, decoupling your _service logic_ (eg database read/write operations), from the _transport layer_ (eg REST or tRPC APIs). This has several benefits:
+
+- **Full Reusability**: Services can be called directly from anywhere in your backend, including within other services, without the overhead of unnecessary API calls. This allows for more modular and reusable backend logic.
+
+- **Flexible & Portable**: Services are lightweight wrappers around typescript functions, so they can be integrated into any backend eg Next.js server components / actions.
+
+- **Fully Featured**: Get the best of tRPC - fully type safety, input/output parsing, middlewares - without the limitations of having to define everything in a single procedure, or build your own service layer from scratch.
+
+- **Seamless Integration with tRPC**: Davstack Service is built to complement tRPC. You can easily turn your services into tRPC procedures / routers with 0 boilerplate.
+
+### Installation
+
+```bash
+npm install zod @davstack/service
+```
+
+Visit the [DavStack Service Docs](https://davstack.com/service/overview) for more information and examples, such as this [trpc usage example](https://davstack.com/service/trpc-usage-example).
+
+### Defining a Service
+
+Define a service by specifying the input schema, output schema, and resolver function.
+
+```typescript
+import { service } from '@davstack/service';
+import { z } from 'zod';
+
+const getTasks = service()
+	.input(z.object({ projectId: z.string() }))
+	.output(z.array(z.object({ id: z.string(), title: z.string() })))
+	.query(async ({ ctx, input }) => {
+		// Complex logic to fetch tasks based on projectId
+		return tasks;
+	});
+```
+
+### Direct Service Usage
+
+Invoke your services directly with type-safe calls.
+
+```typescript
+const projectId = '123';
+const tasks = await getTasks({ projectId });
+```
+
+### Reusing Services
+
+Reuse schemas and functions across multiple services.
+
+```typescript
+const getProjectDetails = service()
+	.input(z.object({ projectId: z.string() }))
+	.output(
+		z.object({
+			id: z.string(),
+			name: z.string(),
+			tasks: getTasks.outputSchema,
+		})
+	)
+	.query(async ({ ctx, input }) => {
+		const project = await db.getProjectById(input.projectId);
+		const tasks = await getTasks({ projectId: input.projectId });
+		return { ...project, tasks };
+	});
+```
+
+### Using Middleware
+
+Middleware allows you to perform common tasks like authentication, authorization, and error handling. You can add middleware to your services using the `use` method.
+
+```ts filename="service.ts"
+export type ServiceContext = {
+	user?: { id: string; role: string };
+};
+
+export const publicService = service<ServiceContext>();
+
+const protectedService = service<Required<ServiceContext>>().use(
+	async ({ ctx, next }) => {
+		if (!ctx.user) {
+			throw new Error('Unauthorized');
+		}
+		return next();
+	}
+);
+```
+
+```ts filename="usage.ts"
+export const publicService = publicService().query(async ({ ctx }) => {
+	return 'Public data';
+});
+
+export const protectedService = protectedService().query(async ({ ctx }) => {
+	return 'Protected data';
+});
+```
+
+### tRPC Integration
+
+Seamlessly integrate with tRPC to create type-safe API endpoints.
+
+```ts
+import { initTRPC } from '@trpc/server';
+import { createTrpcRouterFromServices } from '@davstack/service';
+import * as taskServices from './services/tasks';
+import * as projectServices from './services/projects';
+
+const t = initTRPC();
+
+const appRouter = t.router({
+	tasks: createTrpcRouterFromServices(taskServices),
+	projects: createTrpcRouterFromServices(projectServices),
+});
+```
+
+NOTE: it is recommended to use the `* as yourServicesName` syntax. Otherwise, ctrl+click on the tRPC client handler will navigate you to the app router file, instead of the specific service definition.
+
+### Acknowledgements
+
+Davstack Store has been heavily inspired by [tRPC](https://trpc.io/), a fantastic library for building type-safe APIs. A big shout-out to the tRPC team for their amazing work.
+
+Nick-Lucas, a tRPC contributor, inspired the creation of Davstack Service with his [github comment](https://github.com/trpc/trpc/discussions/4839#discussioncomment-8224476). He suggested "making controllers minimal" and "to separate your business logic from the API logic", which is exactly what Davstack Service aims to do.
+
+### Contributing
+
+Contributions are welcome! Please read our [contributing guide](link-to-contributing-guide) for details on our code of conduct and the submission process.
+
+### License
+
+This project is licensed under the [MIT License](link-to-license). See the LICENSE file for details.

packages/service/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@davstack/service",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
 	"types": "./dist/index.d.ts",