docs: add core and react docs, update README and changelogs

.changeset/three-schools-promise.md

@@ -0,0 +1,5 @@
+---
+"@sandwich-ui/docs": patch
+---
+
+Add core and react docs

README.md

@@ -1,6 +1,6 @@
 # sandwich-ui
 
-A tasty React UI kit
+A tasty UI kit
 
 ## Table of Contents
 
@@ -13,42 +13,26 @@ A tasty React UI kit
 
 ## About
 
-Sandwich UI is a React UI kit used for my personal projects.
+Sandwich UI is a UI kit used for my personal projects.
 
 This repository is a [monorepo](https://en.wikipedia.org/wiki/Monorepo), powered by [Turborepo](https://turborepo.org/).
 
-It is composed of three projects:
+It is composed of multiple packages:
 
-- the [Sandwich UI library](sandwich-ui)
-- the [Docs](docs)
-- the [Storybook](storybook)
+- [Core library](packages/core)
+- [React library](packages/react)
+- [React storybook](packages/react-storybook)
+- [Docs](docs)
 
 ## Getting started
 
-### Installation
-
-```sh
-# npm
-npm install @sandwich-ui/react
-
-# yarn
-yarn add @sandwich-ui/react
-
-# pnpm
-pnpm install @sandwich-ui/react
-```
+- [Core library](docs/src/content/docs/core/getting-started.mdx)
+- [React library](docs/src/content/docs/react/getting-started.mdx)
 
 ## Using
 
-```jsx
-import { Button } from "@sandwich-ui/react";
-
-function Example() {
-  return (
-    <Button>Click me</Button>
-  );
-}
-```
+- [Core library](docs/src/content/docs/core/using.mdx)
+- [React library](docs/src/content/docs/react/using.mdx)
 
 ## Contributing
 

docs/README.md

@@ -1,3 +1,3 @@
-# docs
+# @sandwich-ui/docs
 
 The Sandwich UI docs

docs/astro.config.js

@@ -14,8 +14,12 @@ export default defineConfig({
       },
       sidebar: [
         {
-          label: "Guide",
-          autogenerate: { directory: "guide" },
+          label: "@sandwich-ui/core",
+          autogenerate: { directory: "core" },
+        },
+        {
+          label: "@sandwich-ui/react",
+          autogenerate: { directory: "react" },
         },
       ],
     }),

docs/src/content/docs/core/getting-started.mdx

@@ -0,0 +1,56 @@
+---
+title: Getting started
+description: How to start with Sandwich UI core
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+## Installation
+
+### Install and setup Panda CSS
+
+See the [Panda CSS documentation](https://panda-css.com/docs/overview/getting-started#installation) for installation and setup instructions.
+
+### Install the dependency
+
+<Tabs>
+<TabItem label="npm">
+
+```bash
+npm install @sandwich-ui/core
+```
+
+</TabItem>
+<TabItem  label="yarn">
+
+```bash
+yarn add @sandwich-ui/core
+```
+
+</TabItem>
+<TabItem  label="pnpm">
+
+```bash
+pnpm install @sandwich-ui/core
+```
+
+</TabItem>
+</Tabs>
+
+### Update the `panda.config.ts`
+
+```ts
+import { defineConfig } from "@pandacss/dev";
+import sandwichUIPreset from "@sandwich-ui/core/preset";
+
+export default defineConfig({
+  preflight: true,
+  presets: ["@pandacss/dev/presets", sandwichUIPreset],
+  include: [
+    "./node_modules/@sandwich-ui/core/dist/panda.buildinfo.json",
+    "**/*.html",
+  ],
+  importMap: "@sandwich-ui/core",
+  outdir: "./node_modules/@sandwich-ui/core/dist/styled-system",
+});
+```

docs/src/content/docs/core/using.mdx

@@ -0,0 +1,34 @@
+---
+title: Using
+description: How to use Sandwich UI
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+## Using the styled system
+
+```jsx
+import { css } from "@sandwich-ui/core/css";
+
+function Example() {
+  return (
+    `<p class="${css({ fontSize: "lg" })}">Lorem ipsum</p>`
+  );
+}
+```
+
+## Using a recipe
+
+```jsx
+import { ButtonRecipe } from "@sandwich-ui/core/recipes";
+
+function Example() {
+  return (
+    `<button class="${ButtonRecipe()}">Click me</button>`
+  );
+}
+```
+
+<Aside type="caution">
+Recipes do not contain any JavaScript logic; they are simply collections of CSS classes.
+</Aside>

docs/src/content/docs/index.mdx

@@ -1,17 +1,17 @@
 ---
 title: Sandwich UI
-description: A tasty React UI kit
+description: A tasty UI kit
 template: splash
 hero:
-  tagline: A tasty React UI kit
+  tagline: A tasty UI kit
   image:
     file: ../../assets/houston.webp
   actions:
-    - text: Getting started
-      link: /guide/getting-started/
+    - text: React Getting started
+      link: /react/getting-started/
       icon: right-arrow
       variant: primary
-    - text: Storybook
+    - text: React Storybook
       link: https://sb-sandwich-ui.mrsquaare.fr/
       icon: external
 ---

docs/src/content/docs/react/getting-started.mdx

@@ -0,0 +1,57 @@
+---
+title: Getting started
+description: How to start with Sandwich UI React
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+## Installation
+
+### Install and setup Panda CSS
+
+See the [Panda CSS documentation](https://panda-css.com/docs/overview/getting-started#installation) for installation and setup instructions.
+
+### Install the dependencies
+
+<Tabs>
+<TabItem label="npm">
+
+```bash
+npm install @sandwich-ui/core @sandwich-ui/react
+```
+
+</TabItem>
+<TabItem  label="yarn">
+
+```bash
+yarn add @sandwich-ui/core @sandwich-ui/react
+```
+
+</TabItem>
+<TabItem  label="pnpm">
+
+```bash
+pnpm install @sandwich-ui/core @sandwich-ui/react
+```
+
+</TabItem>
+</Tabs>
+
+### Update the `panda.config.ts`
+
+```ts
+import { defineConfig } from "@pandacss/dev";
+import sandwichUIPreset from "@sandwich-ui/core/preset";
+
+export default defineConfig({
+  preflight: true,
+  presets: ["@pandacss/dev/presets", sandwichUIPreset],
+  include: [
+    "./node_modules/@sandwich-ui/core/dist/panda.buildinfo.json",
+    "./node_modules/@sandwich-ui/react/dist/panda.buildinfo.json",
+    "**/*.{js,jsx,ts,tsx}",
+  ],
+  importMap: "@sandwich-ui/core",
+  outdir: "./node_modules/@sandwich-ui/core/dist/styled-system",
+});
+```

docs/src/content/docs/react/using.mdx

@@ -0,0 +1,28 @@
+---
+title: Using
+description: How to use Sandwich UI React
+---
+
+## Using the styled system
+
+```jsx
+import { css } from "@sandwich-ui/core/css";
+
+function Example() {
+  return (
+    <p className={css({ fontSize: "lg" })}>Lorem ipsum</p>
+  );
+}
+```
+
+## Using a component
+
+```jsx
+import { Button } from "@sandwich-ui/react";
+
+function Example() {
+  return (
+    <Button>Click me</Button>
+  );
+}
+```

packages/core/README.md

@@ -0,0 +1,3 @@
+# @sandwich-ui/core
+
+The Sandwich UI core library