Merge pull request #63 from magicspon/dev

Dev

.vscode/settings.json

@@ -8,8 +8,6 @@
     "activityBarBadge.foreground": "#15202b",
     "commandCenter.border": "#e7e7e799",
     "sash.hoverBorder": "#4776ff",
-    "statusBar.background": "#1450ff",
-    "statusBar.foreground": "#e7e7e7",
     "statusBarItem.hoverBackground": "#4776ff",
     "statusBarItem.remoteBackground": "#1450ff",
     "statusBarItem.remoteForeground": "#e7e7e7",

_templates/new/component/component.ejs.t

@@ -2,15 +2,53 @@
 to:  <%= path %>/<%= h.changeCase.pascalCase(name)  %>/<%= h.changeCase.pascalCase(name)  %>.tsx
 ---
 import * as React from 'react'
+<% if(variants){ -%>
+import { cva, type VariantProps } from 'class-variance-authority'
 
-export interface T<%= h.changeCase.pascalCase(name) %>Props {}
+const variants = cva('', {
+  variants: {
+    variant: {
+      default: '',
+      secondary: '',
+    },
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    variant: 'default',
+  },
+})
 
-export function <%= h.changeCase.pascalCase(name) %>(props: T<%= h.changeCase.pascalCase(name) %>Props) {
+export type <%= h.changeCase.pascalCase(name)  %>Variants = VariantProps<typeof variants>
+<% } -%>
+
+type TElementProps = React.ComponentProps<'div'>
+
+<% if(variants){ -%>
+export type T<%= h.changeCase.pascalCase(name) %>Props = TElementProps & <%= h.changeCase.pascalCase(name)  %>Variants & {
+  //
+}
+<% } else { -%>
+export type T<%= h.changeCase.pascalCase(name) %>Props = TElementProps & {
+  //
+}
+<% } -%>
+
+<% if(forwardRef){ -%>
+export const <%= h.changeCase.pascalCase(name) %> = React.forwardRef<React.ElementRef<'div'>, T<%= h.changeCase.pascalCase(name) %>Props>(
+	function <%= h.changeCase.pascalCase(name) %>(<%= variants ? '{className, variant, ...props}' : 'props' %>, ref) {
+		console.info(`<<%= h.changeCase.pascalCase(name) %> />`, props)
+		return <div data-testid="<%= h.changeCase.pascalCase(name) %>" ref={ref} <%= variants ? 'className={variants({className, variant})}' : '' %> {...props} />
+	},
+)
+<% } else { -%>
+export function <%= h.changeCase.pascalCase(name) %>(<%= variants ? '{className, variant, ...props}' : 'props' %>: T<%= h.changeCase.pascalCase(name) %>Props) {
 	console.info(`<<%= h.changeCase.pascalCase(name) %> />`, props)
   return (
-    <div>Hello</div>
+    <div data-testid="<%= h.changeCase.pascalCase(name) %>" <%= variants ? 'className={variants({className, variant})}' : '' %>  {...props} />
   )
 }
+<% } -%>
+
 
 
 

_templates/new/component/prompt.js

@@ -24,38 +24,56 @@ module.exports = {
     })
 
     let dir = ''
-    const isUi = package === 'ui' || package === 'builder'
-
+    let storybook
+    let variants
+    const isUi = package === 'ui'
     if (isUi) {
       const result = await prompter.prompt({
         type: 'select',
         name: 'uiDir',
         message: 'Package',
-        choices: getDirectories(`${directory}/${package}/src`),
+        choices: ['componenets', 'primitives'],
+      })
+      dir = `/src/${result.uiDir}`
+      result = await prompter.prompt({
+        type: 'confirm',
+        name: 'storybook',
+        message: 'Do you want to include a story:',
+      })
+
+      storybook = result.storybook
+
+      result = await prompter.prompt({
+        type: 'confirm',
+        name: 'variants',
+        message: 'Do you want to use a variants:',
       })
-      dir = `/${result.uiDir}`
+
+      variants = result.variants
     }
 
-    const { tests } = await prompter.prompt({
+    const { forwardRef } = await prompter.prompt({
       type: 'confirm',
-      name: 'tests',
-      message: 'Do you want to include tests:',
+      name: 'forwardRef',
+      message: 'Forward ref?',
     })
 
-    const { storybook } = await prompter.prompt({
+    const { tests } = await prompter.prompt({
       type: 'confirm',
-      name: 'storybook',
-      message: 'Do you want to include a story:',
+      name: 'tests',
+      message: 'Do you want to include tests:',
     })
 
-    const basePath = `${directory}/${package}/app`
-    const path = isUi ? `${basePath}${dir}` : `${basePath}/components`
+    const basePath = `${directory}/${package}`
+    const path = isUi ? `${basePath}${dir}` : `${basePath}/app/components`
 
     return {
       path,
       tests,
       storybook,
       name,
+      forwardRef,
+      variants,
     }
   },
 }

_templates/new/component/story.ejs.t

@@ -1,21 +1,31 @@
 ---
 to: "<%= storybook ? `${path}/${h.changeCase.pascalCase(name)}/${h.changeCase.pascalCase(name)}.stories.tsx` : null %>"
 ---
-import * as React from 'react'
-import { Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 import { <%= h.changeCase.pascalCase(name) %> } from '.'
 
-export default {
+const meta = {
+	title: 'Example/<%= h.changeCase.pascalCase(name) %>',
 	component: <%= h.changeCase.pascalCase(name) %>,
-	title: 'core/<%= h.changeCase.pascalCase(name) %>',
-} as Meta<typeof <%= h.changeCase.pascalCase(name) %>>
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	tags: ['autodocs'],
+	// More on argTypes: https://storybook.js.org/docs/api/argtypes
+	argTypes: {},
+	// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+	args: {},
+} satisfies Meta<typeof <%= h.changeCase.pascalCase(name) %>>
 
-type Args = React.ComponentProps<typeof <%= h.changeCase.pascalCase(name) %>>
+export default meta
+type Story = StoryObj<typeof meta>
 
-export const Baic = {
-  render: (args: Args) => {
-    return <<%= h.changeCase.pascalCase(name) %> {...args} />
-  },
-
-  args: {} satisfies Args,
-}
+export const Primary: Story = {
+	args: {
+		<% if(variants){ -%>
+		variant: "default"
+		<% } -%>
+	},
+}

_templates/new/component/test.ejs.t

@@ -2,15 +2,14 @@
 to: "<%= tests ? `${path}/${h.changeCase.pascalCase(name)}/${h.changeCase.pascalCase(name)}.spec.tsx` : null %>"
 ---
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { composeStories } from '@storybook/testing-react';
-import * as stories from '../<%= h.changeCase.pascalCase(name) %>.stories';
+import { expect, it, describe } from 'vitest'
+import { render } from '@testing-library/react'
+import { <%= h.changeCase.pascalCase(name) %> } from './<%= h.changeCase.pascalCase(name) %>'
 
-const { Primary } = composeStories(stories);
 
-describe('<%= h.changeCase.pascalCase(name) %>', () => {
-  it('renders', () => {
-    render(<Primary />);
-    expect(screen.getByText('hello world')).toBeInTheDocument();
-  });
-});
+describe('<%= h.changeCase.pascalCase(name) %> ', async () => {
+  it('should render', async () => {
+    const { getByTestId } = render(<<%= h.changeCase.pascalCase(name) %> />)
+    expect(getByTestId('<%= h.changeCase.pascalCase(name) %>')).toBeDefined()
+  })
+})

_templates/new/fn/fn.ejs.t

@@ -0,0 +1,14 @@
+---
+to:  <%= path %>/<%= name  %>.ts
+---
+
+type T<%= name  %>Args = {
+	// 
+}
+
+export function <%= name  %>(args: T<%= name  %>Args) {
+
+}
+
+
+

_templates/new/fn/prompt.js

@@ -0,0 +1,43 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { getDirectories } = require('../../utils')
+
+module.exports = {
+  prompt: async ({ prompter }) => {
+    const { name } = await prompter.prompt({
+      type: 'input',
+      name: 'name',
+      message: 'Enter the function name:',
+    })
+
+    const { directory } = await prompter.prompt({
+      type: 'select',
+      name: 'directory',
+      message: 'Directory:',
+      choices: ['apps', 'packages'],
+    })
+
+    const { package } = await prompter.prompt({
+      type: 'select',
+      name: 'package',
+      message: 'Package',
+      choices: getDirectories(directory),
+    })
+
+    const { tests } = await prompter.prompt({
+      type: 'confirm',
+      name: 'tests',
+      message: 'Do you want to include tests:',
+    })
+
+    const basePath = `${directory}/${package}`
+    console.log({ directory, basePath })
+    const path =
+      directory === 'apps' ? `${basePath}/app/utils` : `${basePath}/src/utils`
+
+    return {
+      path,
+      tests,
+      name,
+    }
+  },
+}

_templates/new/fn/test.ejs.t

@@ -0,0 +1,13 @@
+---
+to: "<%= tests ? `${path}/${name}.spec.tsx` : null %>"
+---
+import { expect, it, describe, vi } from 'vitest'
+import * as Fn from './<%= name %>'
+
+describe('<%= name %>', async () => {
+  it('should be invoked', async () => {
+    const getLegsSpy = vi.spyOn(Fn, '<%= name %>')
+    Fn.<%= name %>({})
+    expect(getLegsSpy).toHaveBeenCalled()
+  })
+})

_templates/new/hook/hook.ejs.t

@@ -3,9 +3,13 @@ to: <%= path %>/hooks/use<%= h.changeCase.pascalCase(name)  %>/use<%= h.changeCa
 ---
 import * as React from 'react'
 
-export type T<%= h.changeCase.pascalCase(name) %>Args =  {}
+export type T<%= h.changeCase.pascalCase(name) %>Args = {
+  //
+}
 
 export function use<%= h.changeCase.pascalCase(name) %>(args: T<%= h.changeCase.pascalCase(name) %>Args)  %> {
-  // 
+  return {
+    //
+  }
 }
 

_templates/new/hook/prompt.js

@@ -32,10 +32,11 @@ module.exports = {
       message: 'Do you want to include tests:',
     })
 
-    const basePath = `${directory}/${package}/src`
+    const basePath = `${directory}/${package}`
+    const path = package === 'web' ? `${basePath}/app` : `${basePath}/src`
 
     return {
-      path: basePath,
+      path,
       tests,
       name,
     }

_templates/new/hook/test.ejs.t

@@ -1,21 +1,14 @@
 ---
 to: "<%= tests ? `${path}/hooks/use${h.changeCase.pascalCase(name)}/use${h.changeCase.pascalCase(name)}.spec.tsx` : null %>"
 ---
-import { renderHook, act } from '@testing-library/react-hooks'
-import { use<%= h.changeCase.pascalCase(name) %>, T<%= h.changeCase.pascalCase(name) %>Props } from '..';
+import { expect, it, describe } from 'vitest'
+import { renderHook } from '@testing-library/react-hooks'
+import { use<%= h.changeCase.pascalCase(name) %> } from '.';
 
-const defaultProps: T<%= h.changeCase.pascalCase(name) %>Props = {
-  initialIndex: 0
-};
-
-describe('<%= h.changeCase.pascalCase(name) %>', () => {
+describe('use<%= h.changeCase.pascalCase(name) %>', () => {
   it('renders', () => {
-		const { result } = renderHook(() => use<%= h.changeCase.pascalCase(name) %>(defaultProps))
-
-		act(() => {
-			result.current.increment()
-		})
+		const { result } = renderHook(() => use<%= h.changeCase.pascalCase(name) %>({}))
 
-		expect(result.current.count).toBe(1)
+		expect(result).toBeDefined()
   });
 });

apps/cms/package.json

@@ -12,41 +12,41 @@
   "dependencies": {
     "@focus-reactive/sanity-plugin-inline-svg-input": "^1.0.1",
     "@mobily/ts-belt": "^3.13.1",
-    "@portabletext/react": "^3.0.11",
-    "@q42/sanity-plugin-page-tree": "^1.1.1",
-    "@sanity/client": "^6.15.5",
+    "@portabletext/react": "^3.0.18",
+    "@q42/sanity-plugin-page-tree": "^1.2.2",
+    "@sanity/client": "^6.18.2",
     "@sanity/color-input": "^3.1.1",
     "@sanity/dashboard": "^3.1.6",
-    "@sanity/icons": "^2.11.2",
+    "@sanity/icons": "^2.11.8",
     "@sanity/image-url": "^1.0.2",
     "@sanity/orderable-document-list": "^1.2.1",
-    "@sanity/ui": "^2.0.10",
+    "@sanity/ui": "^2.1.11",
     "@sanity/vision": "3.34.0",
     "get-youtube-id": "^1.0.1",
-    "groqd": "^0.15.10",
+    "groqd": "^0.15.11",
     "groqd-playground": "^0.0.18",
-    "marked": "^12.0.1",
-    "nanoid": "^5.0.6",
-    "next-sanity": "^8.4.1",
+    "marked": "^12.0.2",
+    "nanoid": "^5.0.7",
+    "next-sanity": "^8.5.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-is": "^18.2.0",
-    "sanity": "^3.34.0",
+    "react-is": "^18.3.1",
+    "sanity": "^3.42.1",
     "sanity-plugin-asset-source-unsplash": "^2.0.1",
-    "sanity-plugin-iframe-pane": "^3.1.3",
+    "sanity-plugin-iframe-pane": "^3.1.6",
     "sanity-plugin-media": "^2.2.5",
-    "sanity-plugin-webhooks": "^1.0.0",
+    "sanity-plugin-webhooks": "^1.1.0",
     "sanity-plugin-workflow": "^1.0.4",
-    "styled-components": "^6.1.8",
+    "styled-components": "^6.1.11",
     "utils": "3.0.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@sanity/eslint-config-studio": "^3.0.0",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "eslint-config-custom": "3.0.0",
     "tsconfig": "3.0.0",
-    "typescript": "^5.4.2"
+    "typescript": "^5.4.5"
   }
 }