New structure

README.md

@@ -1,5 +1,98 @@
 [![SATUS](https://assets.darkroom.engineering/satus/header.png)](https://github.com/darkroomengineering/satus)
 
+# Satus
+
+A modern React application with advanced features including WebGL graphics, animations, and CMS integration.
+
+## Project Structure
+
+```
+├── app/                    # Next.js application pages and routes
+│   └── (pages)/           # Page components and layouts
+├── components/            # Reusable UI components
+│   ├── button/           # Button components
+│   ├── form/            # Form components
+│   ├── animation/       # Animation components
+│   └── ...              # Other UI components
+├── cms/                  # CMS integrations
+│   ├── storyblok/       # Storyblok CMS integration
+│   └── shopify/         # Shopify integration
+├── hooks/                # Custom React hooks
+│   ├── use-scroll-trigger.ts
+│   ├── use-transform.tsx
+│   └── use-device-detection.ts
+├── libs/                 # Utility libraries and functions
+│   ├── utils.ts
+│   ├── maths.ts
+│   └── store.ts
+└── webgl/               # WebGL and 3D graphics
+    ├── components/      # WebGL components
+    ├── hooks/          # WebGL-specific hooks
+    └── utils/          # WebGL utilities
+```
+
+## Features
+
+- **Modern React Development**
+  - Next.js for server-side rendering and routing
+  - TypeScript for type safety
+  - Custom hooks for reusable logic
+
+- **Rich UI Components**
+  - Extensive component library
+  - Animation and interaction capabilities
+  - Responsive and accessible design
+
+- **3D Graphics and WebGL**
+  - Three.js integration
+  - Custom WebGL shaders
+  - React Three Fiber (R3F) implementation
+
+- **CMS Integration**
+  - Storyblok for content management
+  - Shopify for e-commerce
+  - Headless CMS architecture
+
+- **Developer Experience**
+  - Hot module replacement
+  - Development tools and debugging
+  - Comprehensive documentation
+
+## Getting Started
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run the development server:
+```bash
+npm run dev
+```
+
+3. Build for production:
+```bash
+npm run build
+```
+
+## Documentation
+
+Each major directory contains its own README with specific documentation:
+
+- [Components Documentation](./components/README.md)
+- [Hooks Documentation](./hooks/README.md)
+- [WebGL Documentation](./webgl/README.md)
+- [CMS Integration Documentation](./cms/README.md)
+- [Utility Libraries Documentation](./libs/README.md)
+
+## Contributing
+
+Please read our contributing guidelines before submitting pull requests.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
 # Satūs
 
 Satūs means start, beginning, planting, to be used as a template when starting a new project.

app/(pages)/(components)/wrapper/index.tsx

@@ -5,8 +5,8 @@ import type { LenisOptions } from 'lenis'
 import { usePathname } from 'next/navigation'
 import { type ComponentProps, useEffect } from 'react'
 
-import { Canvas } from '~/libs/webgl/components/canvas'
 import type { Theme } from '~/styles/config'
+import { Canvas } from '~/webgl/components/canvas'
 import { Footer } from '../footer'
 import { Lenis } from '../lenis'
 import { Navigation } from '../navigation'

app/(pages)/hubspot/(components)/subscribe/index.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import cn from 'clsx'
-import { Messages, SubmitButton, useFormContext } from '~/libs/form'
+import { Messages, SubmitButton, useFormContext } from '~/components/form'
 
 export const Subscribe = ({ idx = 0, form }) => {
   const { errors, isActive, register } = useFormContext()

app/(pages)/hubspot/page.jsx

@@ -1,6 +1,6 @@
 import { Wrapper } from '~/app/(pages)/(components)/wrapper'
-import { Form } from '~/libs/form'
-import { getForm } from '~/libs/hubspot-forms/fetch-form'
+import { Form } from '~/components/form'
+import { getForm } from '~/components/hubspot/fetch-form'
 import { Subscribe } from './(components)/subscribe'
 
 export default async function Hubspot() {

app/(pages)/r3f/(components)/box/index.jsx

@@ -2,7 +2,7 @@
 
 import { useRect } from 'hamo'
 import dynamic from 'next/dynamic'
-import { WebGLTunnel } from '~/libs/webgl/components/tunnel'
+import { WebGLTunnel } from '~/webgl/components/tunnel'
 
 const WebGLBox = dynamic(
   () => import('./webgl').then(({ WebGLBox }) => WebGLBox),

app/(pages)/r3f/(components)/box/webgl.jsx

@@ -2,9 +2,9 @@
 
 import { useFrame } from '@react-three/fiber'
 import { useRef } from 'react'
-import { useCurrentSheet } from '~/libs/theatre'
-import { useTheatre } from '~/libs/theatre/hooks/use-theatre'
-import { useWebGLRect } from '~/libs/webgl/hooks/use-webgl-rect'
+import { useCurrentSheet } from '~/app/theatre'
+import { useTheatre } from '~/app/theatre/hooks/use-theatre'
+import { useWebGLRect } from '~/webgl/hooks/use-webgl-rect'
 
 export function WebGLBox({ theatreKey = 'box', rect }) {
   const meshRef = useRef()

app/(pages)/r3f/page.jsx

@@ -1,6 +1,6 @@
 import { Wrapper } from '~/app/(pages)/(components)/wrapper'
-import { TheatreProjectProvider } from '~/libs/theatre'
-import { Canvas } from '~/libs/webgl/components/canvas'
+import { TheatreProjectProvider } from '~/app/theatre'
+import { Canvas } from '~/webgl/components/canvas'
 import { Box } from './(components)/box'
 
 export default function Home() {

app/(pages)/shopify/(components)/customer/index.jsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Form, SubmitButton } from '~/libs/form'
-import { InputField } from '~/libs/form/fields'
+import { Form, SubmitButton } from '~/components/form'
+import { InputField } from '~/components/form/fields'
 
 // import {
 //   LoginCustomerAction,

app/(pages)/shopify/(components)/product/index.jsx

@@ -1,6 +1,6 @@
 import cn from 'clsx'
+import { getCollectionProducts } from '~/cms/shopify'
 import { Image } from '~/components/image'
-import { getCollectionProducts } from '~/libs/shopify'
 import { SizeAndBuy } from '../size-and-buy'
 import s from './product.module.css'
 

app/(pages)/shopify/(components)/show-cart/index.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import cn from 'clsx'
-import { useCartModal } from '~/libs/shopify/cart/modal'
+import { useCartModal } from '~/cms/shopify/cart/modal'
 
 export const ShowCart = ({ className }) => {
   const { openCart } = useCartModal()

app/(pages)/shopify/(components)/size-and-buy/index.jsx

@@ -2,8 +2,8 @@
 
 import cn from 'clsx'
 import { useState } from 'react'
+import { AddToCart } from '~/cms/shopify/cart/add-to-cart'
 import { Dropdown } from '~/components/dropdown'
-import { AddToCart } from '~/libs/shopify/cart/add-to-cart'
 import s from './size-and-buy.module.css'
 
 export const SizeAndBuy = ({ product }) => {

app/(pages)/shopify/account/page.jsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react'
 import { Wrapper } from '~/app/(pages)/(components)/wrapper'
-import { getCustomer } from '~/libs/shopify/customer/actions'
+import { getCustomer } from '~/cms/shopify/customer/actions'
 import { LoginForm, LogoutButton, RegisterForm } from '../(components)/customer'
 
 export default async function AccountPage() {

app/(pages)/shopify/page.jsx

@@ -1,5 +1,5 @@
 import { Wrapper } from '~/app/(pages)/(components)/wrapper'
-import { Cart } from '~/libs/shopify/cart'
+import { Cart } from '~/cms/shopify/cart'
 import { Product } from './(components)/product'
 import { ShowCart } from './(components)/show-cart'
 

app/(pages)/storyblok/(component)/tutorial/index.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { storyblokEditable } from '@storyblok/js'
-import { useStoryblokContext } from '~/libs/storyblok/context'
+import { useStoryblokContext } from '~/cms/storyblok/context'
 
 // TODO:
 // - Webhooks

app/(pages)/storyblok/[slug]/(component)/article/index.jsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { storyblokEditable } from '@storyblok/js'
-import { useStoryblokContext } from '~/libs/storyblok/context'
+import { useStoryblokContext } from '~/cms/storyblok/context'
 
 export function Article() {
   const {

app/(pages)/storyblok/[slug]/page.jsx

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation'
-import { fetchAll, fetchStoryblokStory } from '~/libs/storyblok'
-import { StoryblokContextProvider } from '~/libs/storyblok/context'
+import { fetchAll, fetchStoryblokStory } from '~/cms/storyblok'
+import { StoryblokContextProvider } from '~/cms/storyblok/context'
 import { Wrapper } from '../../(components)/wrapper'
 import { Article } from './(component)/article'
 

app/(pages)/storyblok/page.jsx

@@ -1,5 +1,5 @@
-import { fetchStoryblokStory } from '~/libs/storyblok'
-import { StoryblokContextProvider } from '~/libs/storyblok/context'
+import { fetchStoryblokStory } from '~/cms/storyblok'
+import { StoryblokContextProvider } from '~/cms/storyblok/context'
 import { Wrapper } from '../(components)/wrapper'
 import { Tutorial } from './(component)/tutorial'
 

app/debug/orchestra/page.jsx

@@ -1,8 +1,14 @@
 'use client'
 
-import { OrchestraToggle } from '~/libs/orchestra/react'
+import dynamic from 'next/dynamic'
 import s from './orchestra.module.css'
 
+const OrchestraToggle = dynamic(
+  () =>
+    import('~/app/debug/orchestra/react').then((mod) => mod.OrchestraToggle),
+  { ssr: false }
+)
+
 function OrchestraPage() {
   return (
     <div className={s.buttons}>

libs/theatre/hooks/use-studio.ts → app/theatre/hooks/use-studio.ts

@@ -1,7 +1,7 @@
 import type { ISheet } from '@theatre/core'
 import type { IStudio } from '@theatre/studio'
 import { useEffect, useState } from 'react'
-import { useOrchestra } from '~/libs/orchestra/react'
+import { useOrchestra } from '~/app/debug/orchestra/react'
 
 let studioPackage: IStudio
 

cms/README.md

@@ -0,0 +1,15 @@
+# CMS Integration
+
+This directory contains integrations with various Content Management Systems used in the project.
+
+## Structure
+
+- `storyblok/` - Integration with Storyblok CMS for managing content
+- `shopify/` - Integration with Shopify for e-commerce functionality
+
+## Usage
+
+The CMS integrations provide a bridge between our application and external content management systems, allowing for:
+- Dynamic content management through Storyblok
+- E-commerce functionality through Shopify
+- Separation of concerns between content and presentation

libs/shopify/cart/actions.js → cms/shopify/cart/actions.js

@@ -8,8 +8,8 @@ import {
   getCart,
   removeFromCart,
   updateCart,
-} from '~/libs/shopify'
-import { TAGS } from '~/libs/shopify/constants'
+} from '~/cms/shopify'
+import { TAGS } from '~/cms/shopify/constants'
 
 export async function removeItem(prevState, merchandiseId) {
   const _cookies = await cookies()

libs/shopify/cart/add-to-cart/index.js → cms/shopify/cart/add-to-cart/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import cn from 'clsx'
-import { addItem } from '~/libs/shopify/cart/actions'
+import { addItem } from '~/cms/shopify/cart/actions'
 import { useCartContext } from '../cart-context'
 import { useCartModal } from '../modal'
 import s from './add-to-cart.module.css'

libs/shopify/cart/cart-context.js → cms/shopify/cart/cart-context.js

@@ -13,7 +13,7 @@ export function useCartContext() {
 export function CartProvider({ children, cart }) {
   const [optimisticCart, updateOptimisticCart] = useOptimistic(
     cart,
-    cartReconciler,
+    cartReconciler
   )
 
   function updateCartItem(merchandiseId, updateType) {

libs/shopify/customer/actions.js → cms/shopify/customer/actions.js

@@ -1,7 +1,7 @@
 'use server'
 
 import { cookies } from 'next/headers'
-import { shopifyFetch } from '~/libs/shopify'
+import { shopifyFetch } from '~/cms/shopify'
 import {
   customerAccessTokenCreateMutation,
   customerAccessTokenDeleteMutation,

libs/shopify/index.js → cms/shopify/index.js

@@ -5,7 +5,7 @@ import {
   HIDDEN_PRODUCT_TAG,
   SHOPIFY_GRAPHQL_API_ENDPOINT,
   TAGS,
-} from '~/libs/shopify/constants'
+} from '~/cms/shopify/constants'
 import {
   addToCartMutation,
   createCartMutation,