Using custom provider breaks sanity codegen #55
Comments
|
Hi @JamesGriz will have a look at this in the upcoming weeks |
|
Hi @JamesGriz! It seems to me based on the 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
The text was updated successfully, but these errors were encountered: