Merge branch 'main' into framer-plugin

apps/example-cra-dev/CHANGELOG.md

@@ -1,5 +1,19 @@
 # example-cra-dev
 
+## 0.1.22
+
+### Patch Changes
+
+- Updated dependencies
+  - @shadergradient/react@2.0.8
+
+## 0.1.21
+
+### Patch Changes
+
+- Updated dependencies
+  - @shadergradient/react@2.0.7
+
 ## 0.1.20
 
 ### Patch Changes

apps/example-cra-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-cra-dev",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "private": true,
   "dependencies": {
     "@react-three/drei": "^9.112.0",

apps/example-cra/package.json

@@ -17,7 +17,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "@shadergradient/react": "^2.0.6",
+    "@shadergradient/react": "^2.0.8",
     "three": "^0.169.0",
     "three-stdlib": "^2.30.1",
     "typescript": "^4.9.5",

apps/example-nextjs-approuter/package.json

@@ -17,7 +17,7 @@
     "three": "^0.169.0",
     "three-stdlib": "^2.30.1",
     "tunnel-rat": "^0.1.2",
-    "@shadergradient/react": "^2.0.6"
+    "@shadergradient/react": "^2.0.8"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.4.13",

apps/example-nextjs-dev/CHANGELOG.md

@@ -1,5 +1,19 @@
 # example-nextjs-dev
 
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies
+  - @shadergradient/react@2.0.8
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies
+  - @shadergradient/react@2.0.7
+
 ## 0.1.14
 
 ### Patch Changes

apps/example-nextjs-dev/app/stateless-test/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { ShaderGradientCanvas } from '@shadergradient/react'
+import {
+  useQueryState,
+  ShaderGradientStateless,
+} from '@shadergradient/react/stateless'
+
+export default function Page() {
+  const [, setColor1] = useQueryState('color1')
+
+  return (
+    <div className='flex'>
+      <div className='flex-1 h-screen'>
+        <ShaderGradientCanvas>
+          {/* When control is 'query', the gradient props follows url query params */}
+          <ShaderGradientStateless control='query' />
+        </ShaderGradientCanvas>
+      </div>
+
+      <button
+        onClick={() => setColor1('#0D77E0')}
+        className='fixed bottom-5 right-5 z-20'
+      >
+        Change Color
+      </button>
+    </div>
+  )
+}

apps/example-nextjs-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-nextjs-dev",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3004",

apps/example-nextjs/package.json

@@ -17,7 +17,7 @@
     "next-pwa": "^5.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@shadergradient/react": "^2.0.6",
+    "@shadergradient/react": "^2.0.8",
     "three": "^0.169.0",
     "three-stdlib": "^2.30.1"
   },

packages/shadergradient-v2/CHANGELOG.md

@@ -1,5 +1,17 @@
 # shadergradient
 
+## 2.0.8
+
+### Patch Changes
+
+- @shadergradient/react/stateless
+
+## 2.0.7
+
+### Patch Changes
+
+- pointerEvents prop
+
 ## 2.0.6
 
 ### Patch Changes

packages/shadergradient-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shadergradient/react",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -10,6 +10,16 @@
   "files": [
     "dist/**"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./stateless": {
+      "import": "./dist/ShaderGradientStateless/index.mjs",
+      "types": "./dist/ShaderGradientStateless/index.d.mts"
+    }
+  },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --config tsup.config.ts --watch",

packages/shadergradient-v2/src/ShaderGradientCanvas.tsx

@@ -8,17 +8,19 @@ export function ShaderGradientCanvas({
   style = {},
   pixelDensity = 1,
   fov = 45,
+  pointerEvents,
 }: {
   children: React.ReactNode
   style?: React.CSSProperties
   pixelDensity?: number
   fov?: number
+  pointerEvents?: 'none' | 'auto'
 }): JSX.Element {
   useShaderChunkFix()
 
   return (
     <Canvas
-      style={style}
+      style={{ ...style, pointerEvents }}
       resize={{ offsetSize: true }}
       {...canvasProps(pixelDensity, fov)}
     >

packages/shadergradient-v2/src/ShaderGradientStateless/ShaderGradientStateless.tsx

@@ -0,0 +1,11 @@
+import { GradientT } from '@/types'
+import { ShaderGradient } from '../ShaderGradient/ShaderGradient'
+import { useSearchParamToStore } from './store/useSearchParamToStore'
+import { useControlValues } from './useControlValues'
+
+export function ShaderGradientStateless(passedProps: GradientT): JSX.Element {
+  useSearchParamToStore() // init gradient state with url query
+  const props = useControlValues(passedProps.control, passedProps) // make props using url query, control and passed props
+
+  return <ShaderGradient {...props} />
+}

packages/shadergradient-v2/src/ShaderGradientStateless/index.ts

@@ -0,0 +1,2 @@
+export * from './store/useQueryState'
+export * from './ShaderGradientStateless'

packages/shadergradient-v2/src/ShaderGradientStateless/store/index.ts

@@ -0,0 +1,5 @@
+export * from './store'
+export * from './useQueryState'
+
+export * from './presetURLs'
+export * from './usePresetToStore'

packages/shadergradient-v2/src/ShaderGradientStateless/store/presetURLs.ts

@@ -0,0 +1,30 @@
+import { presets } from '@/presets'
+
+export const initialActivePreset = 0
+
+export const PRESETS = convertPresets(presets)
+
+// export const DEFAUlT_PRESET = '?pixelDensity=1&fov=45'
+export const DEFAUlT_PRESET = PRESETS[0].url
+
+function convertPresets(presets: Record<string, any>) {
+  const PRESETS = Object.entries(presets).map(([key, value]) => {
+    const { title, color, props } = value
+
+    const urlParams = new URLSearchParams(
+      Object.entries(props).reduce((acc, [propKey, propValue]) => {
+        acc[propKey] =
+          typeof propValue === 'boolean' ? String(propValue) : String(propValue)
+        return acc
+      }, {} as Record<string, string>)
+    ).toString()
+
+    return {
+      title,
+      color,
+      url: `?${urlParams}`,
+    }
+  })
+
+  return PRESETS
+}

packages/shadergradient-v2/src/ShaderGradientStateless/store/store.ts

@@ -0,0 +1,77 @@
+import * as qs from 'query-string'
+import { create } from 'zustand'
+import { combine } from 'zustand/middleware'
+import { DEFAUlT_PRESET, initialActivePreset } from './presetURLs'
+
+// without embedMode
+// it renders without the dom & other gradient controls at first, and add it after the first updateGradientState() excuted.
+
+const defaultState = { ...parseState() }
+export const useQueryStore = create((set) => defaultState)
+
+export const updateGradientState = (querystate: object | string) => {
+  const isString = typeof querystate === 'string'
+
+  let state = querystate
+  if (isString) state = parseState(querystate)
+
+  useQueryStore.setState(state, isString) // replace true if it's a string
+}
+
+// defaultGradient could be replaced by window.location.search
+function parseState(search = DEFAUlT_PRESET) {
+  return qs.parse(search, {
+    parseNumbers: true,
+    parseBooleans: true,
+    arrayFormat: 'index',
+  })
+}
+
+export const useDomStore = create(() => {
+  return { dom: null }
+})
+
+// store for UI updates
+export const useCursorStore = create((set) => ({
+  hoverState: 0,
+  hover: 'default',
+  updateHoverState: (payload) => set({ hoverState: payload }),
+}))
+export const useUIStore = create(
+  combine(
+    { activePreset: initialActivePreset, mode: 'full', loadingPercentage: 0 },
+    (set) => ({
+      setActivePreset: (by: number) => set((state) => ({ activePreset: by })),
+      setMode: (data: any) => set((state) => ({ ...state, mode: data })),
+      setLoadingPercentage: (data: any) =>
+        set((state) => ({ ...state, loadingPercentage: data })),
+    })
+  )
+)
+
+// store for Figma Plugin
+const useFigmaStore = create((set) => ({
+  figma: { selection: 0, user: null },
+  setFigma: (payload) =>
+    set((prev) => ({ figma: { ...prev.figma, ...payload } })),
+}))
+export function useFigma() {
+  const figma = useFigmaStore((state: any) => state.figma)
+  const setFigma = useFigmaStore((state: any) => state.setFigma)
+  return [figma, setFigma]
+}
+
+export const useBillingIntervalStore = create((set) => ({
+  billingInterval: 'year',
+  setBillingInterval: (payload) =>
+    set((state) => ({ billingInterval: payload })),
+}))
+export function useBillingInterval() {
+  const billingInterval = useBillingIntervalStore(
+    (state: any) => state.billingInterval
+  )
+  const setBillingInterval = useBillingIntervalStore(
+    (state: any) => state.setBillingInterval
+  )
+  return [billingInterval, setBillingInterval]
+}

packages/shadergradient-v2/src/ShaderGradientStateless/store/usePresetToStore.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { PRESETS } from './presetURLs'
+import { useUIStore, updateGradientState } from './store'
+
+let pageLoaded = false
+export function usePresetToStore() {
+  // ----------------------------- Preset to Custom Material ---------------------------------
+  const activePreset = useUIStore((state: any) => state.activePreset)
+  useEffect(() => {
+    let gradientURL
+
+    // CASE 1. use search params at the first load.
+    if (
+      !pageLoaded &&
+      window.location.search?.includes('pixelDensity') // checking just window.location.search existing is not valid for the Framer Preview search (?target=preview-web)
+    )
+      gradientURL = window.location.search
+    // CASE 2. When activePreset changes by UI buttons
+    else gradientURL = PRESETS[activePreset].url
+
+    updateGradientState(gradientURL)
+
+    pageLoaded = true
+  }, [activePreset])
+}