christopherafbjur
commented
1 year ago Hi @JamesGriz will have a look at this in the upcoming weeks
Closed JamesGriz closed 1 year ago
christopherafbjur
commented
1 year ago Hi @JamesGriz will have a look at this in the upcoming weeks
christopherafbjur
commented
1 year ago Hi @JamesGriz! It seems to me based on the npx sanity-codegen script you ran that you're using the v2 version of the sanity-codegen and that you're using a sanity v3 studio based on the usage of defineField.
I tried installing/running sanity-codegen based on the instructions here (alpha version) which supports v3 projects and it generated the types for me correctly in my v3 sanity studio project.
This was my test setup:
./package.json
{
"name": "sanity-project",
"private": true,
"version": "1.0.0",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
},
"keywords": [
"sanity"
],
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@sanity/vision": "^3.14.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"sanity": "^3.14.5",
"sanity-plugin-icon-picker": "^3.2.2",
"styled-components": "^5.3.9"
},
"devDependencies": {
"@sanity/eslint-config-studio": "^3.0.0",
"@types/react": "^18.0.25",
"@types/styled-components": "^5.1.26",
"eslint": "^8.6.0",
"sanity-codegen": "^1.0.0-alpha.45",
"typescript": "^4.9.5"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}./schemas/index.tsx
import React from 'react'
import {defineField} from 'sanity'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
import {
faSquareFacebook,
faInstagram,
faLinkedin,
faTwitter,
} from '@fortawesome/free-brands-svg-icons'
const icons = {
squareFacebook: faSquareFacebook,
instagram: faInstagram,
linkedin: faLinkedin,
twitter: faTwitter,
}
export const schemaTypes = [
{
title: 'Icons',
name: 'icons',
type: 'document',
fields: [
defineField({
title: 'Icon',
name: 'icon',
type: 'iconPicker',
options: {
configurations: [
{
title: 'FA Solid Icons',
provider: 'fa-pro',
icons: () =>
Object.entries(icons).map(([name, Component]) => {
return {
name,
component: () => (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '25px',
height: '25px',
}}
>
<FontAwesomeIcon icon={Component} />
</div>
),
tags: [name],
}
}),
},
],
},
}),
],
},
]As specified I then installed sanity-codegen npm i --save-dev sanity-codegen@alpha
and generated the types using npx sanity-codegen codegen.
I installed this plugin in my project and added some custom configuration to get my Icons to work, the field looks like so:
With the icons object being setup like so:
This worked fantastically well as it allowed me limit the icon options in the CMS to the same icons that my user facing ui Icon component was setup to use and I didn't have to worry about updating them in more then one place.
I also have the sanity-codegen plugin installed to generate typescript types based on my schema and the only issue I have had with this approach, is now when I try run
npx sanity-codegenI get the following errors:I tried installing:
matchmedia-polyfilland importing it in the file, which did work for the codegen but then had a bunch of other issues with the project, and either way this doesnt seem like a good solution.
If anyone has any insight that would be much appreciated