├── .gitignore ├── LICENSE ├── README.md ├── example ├── .env.example ├── .gitignore ├── README.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── [filekey] │ │ ├── [id].tsx │ │ └── index.tsx │ ├── _app.tsx │ ├── api │ │ └── [filekey] │ │ │ ├── [id].ts │ │ │ └── index.ts │ └── index.tsx ├── public │ ├── favicon.ico │ └── vercel.svg ├── samples │ ├── 05qyc2aNJBK4J1fTcWBe7w │ │ └── 1:2.json │ ├── readme.md │ └── vXAxldxvDUBWW8EVZIGmgC │ │ └── 1:2.json ├── styles │ ├── Home.module.css │ └── globals.css └── tsconfig.json ├── package.json ├── packages ├── figma-view-react │ ├── .prettierrc │ ├── lib │ │ ├── figma-view.tsx │ │ ├── index.ts │ │ └── nodes │ │ │ ├── ellipse.tsx │ │ │ ├── frame.tsx │ │ │ ├── group.tsx │ │ │ ├── index.ts │ │ │ ├── instance.tsx │ │ │ ├── line.tsx │ │ │ ├── polygon.tsx │ │ │ ├── rectangle.tsx │ │ │ ├── star.tsx │ │ │ ├── text.tsx │ │ │ ├── types.ts │ │ │ └── vector.tsx │ ├── package.json │ └── tsconfig.json └── readme.md └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | # mac 107 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Grida 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # figma-view 2 | React figma renderer component 3 | 4 | ``` 5 | yarn add figma-view 6 | ``` 7 | 8 | ## Backends 9 | **html-backend** 10 | 11 | draws figma document using standard html elements 12 | 13 | **canvas-backend** 14 | 15 | draws figma document on html5 canvas 16 | 17 | **iframe-backend** 18 | 19 | A simlpe figma embeding wrapper 20 | 21 | 22 | ## Usage 23 | 24 | 25 | Basic usage 26 | ```tsx 27 | import React from "react" 28 | import FigmaView from "figma-view" 29 | 30 | // with url 31 | export default funtion (){ 32 | return Loading..} cached/> 33 | } 34 | 35 | // with data json 36 | export default funtion (){ 37 | return Loading..} fromapi/> 38 | } 39 | ``` 40 | 41 | Data from plugin api 42 | ```tsx 43 | Loading..} fromplugin/> 44 | ``` 45 | 46 | Data from rest api 47 | ```tsx 48 | Loading..} fromapi/> 49 | // or.. by default the from api is set to true. 50 | Loading..}/> 51 | ``` 52 | 53 | 54 | Using Nodes 55 | ```tsx 56 | import { Frame, Text, Autolayout } from "figma-view" 57 | 58 | export function FigmaDesignMock(){ 59 | return ( 60 | 61 | 62 | 63 | This is a view made with figma-view 64 | 65 | 66 | 67 | ) 68 | } 69 | ``` 70 | 71 | 72 | ## Authentication 73 | ```tsx 74 | import FigmaView, { FigmaAuthenticationProvider } from "figma-view" 75 | 76 | const _figma_personal_access_token = process.env.FIGMA_PERSONAL_ACCESSTOKEN; 77 | 78 | export default function (){ 79 | return ( 80 | 81 | 82 | 83 | ); 84 | } 85 | 86 | // or with access token (not personal access token) 87 | // issue of access token is not done by this package. you can use `@design-sdk/figma-oauth` for that. 88 | 89 | export default function (){ 90 | return ( 91 | 92 | 93 | 94 | ); 95 | } 96 | 97 | ``` 98 | 99 | 100 | ### Custom document provider (Proxy server) 101 | You can host up your own proxy server for your needs with [figma-file-proxy-server](https://github.com/gridaco/figma-file-proxy-server) 102 | 103 | 104 | ### References 105 | - [design-sdk](https://github.com/gridaco/design-sdk) 106 | 107 | 108 | -------------------------------------------------------------------------------- /example/.env.example: -------------------------------------------------------------------------------- 1 | FIGMA_PERSONAL_ACCESS_TOKEN=your-figma-personal-access-token -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /example/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /example/next.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {import('next').NextConfig} 3 | */ 4 | const nextconfig = { 5 | transpilePackages: ["figma-view"], 6 | }; 7 | 8 | module.exports = nextconfig; 9 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev -p 7777", 7 | "build": "next build", 8 | "start": "next start -p 7777" 9 | }, 10 | "dependencies": { 11 | "@design-sdk/figma": "^0.0.43", 12 | "axios": "^1.3.3", 13 | "figma-view": "*", 14 | "glob": "^8.1.0", 15 | "next": "^13.1.6", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0" 18 | }, 19 | "devDependencies": { 20 | "@types/glob": "^8.0.1", 21 | "@types/node": "^18.6.1", 22 | "@types/react": "^18.0.28", 23 | "typescript": "^4.9.5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /example/pages/[filekey]/[id].tsx: -------------------------------------------------------------------------------- 1 | import React, { useMemo } from "react"; 2 | import Head from "next/head"; 3 | import type { GetServerSidePropsContext } from "next"; 4 | import Axios from "axios"; 5 | import { mapper } from "@design-sdk/figma-remote"; 6 | import FigmaView from "figma-view/lib"; 7 | 8 | export default function NodePage({ 9 | data, 10 | filekey, 11 | }: { 12 | filekey: string; 13 | data: any; 14 | }) { 15 | const node = useMemo(() => { 16 | return mapper.mapFigmaRemoteToFigma(data); 17 | }, []); 18 | 19 | return ( 20 | <> 21 | 22 | {`${data.name} (${data.type})`} 23 | 24 |
35 | <> 36 | 42 | 43 |
44 | 45 | ); 46 | } 47 | 48 | export async function getServerSideProps(context: GetServerSidePropsContext) { 49 | const filekey = context.params?.filekey as string; 50 | const id = context.params?.id as string; 51 | const client = Axios.create({ 52 | baseURL: "http://localhost:7777/api", 53 | }); 54 | const { data } = await client.get(`/${filekey}/${id}`); 55 | 56 | return { 57 | props: { 58 | filekey, 59 | data: data, 60 | }, 61 | }; 62 | } 63 | -------------------------------------------------------------------------------- /example/pages/[filekey]/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Head from "next/head"; 3 | import type { GetServerSidePropsContext } from "next"; 4 | import Axios from "axios"; 5 | import Link from "next/link"; 6 | 7 | export default function FileIndexPage({ 8 | filekey, 9 | nodes, 10 | }: { 11 | filekey: string; 12 | nodes: { 13 | [id: string]: any; 14 | }; 15 | }) { 16 | return ( 17 | <> 18 | 19 | File Index 20 | 21 |
22 |

File Index

23 |
    24 | {Object.keys(nodes).map((id) => { 25 | const { name, type } = nodes[id]; 26 | return ( 27 |
  • 28 | 29 |

    30 | {name} ({type} / {id}) 31 |

    32 | 33 |
    • 34 | ); 35 | })} 36 |
37 |
38 | 39 | ); 40 | } 41 | 42 | export async function getServerSideProps(context: GetServerSidePropsContext) { 43 | const filekey = context.params?.filekey as string; 44 | const client = Axios.create({ 45 | baseURL: "http://localhost:7777/api", 46 | }); 47 | const { data } = await client.get(`/${filekey}`); 48 | return { 49 | props: { 50 | filekey, 51 | nodes: data.nodes, 52 | }, 53 | }; 54 | } 55 | -------------------------------------------------------------------------------- /example/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import "../styles/globals.css"; 2 | import type { AppProps } from "next/app"; 3 | 4 | function App({ Component, pageProps }: AppProps) { 5 | return ; 6 | } 7 | export default App; 8 | -------------------------------------------------------------------------------- /example/pages/api/[filekey]/[id].ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from "next"; 3 | import path from "path"; 4 | import fs from "fs"; 5 | 6 | export default async (req: NextApiRequest, res: NextApiResponse) => { 7 | const { filekey, id } = req.query; 8 | 9 | // check if file exists with designated filekey 10 | const filePath = path.join(process.cwd(), "samples", filekey as string); 11 | const nodefile = path.join(filePath, `${id}.json`); 12 | const fileContents = await fs.readFileSync(nodefile); 13 | 14 | const data = JSON.parse(fileContents.toString()); 15 | 16 | res.status(200).json(data); 17 | }; 18 | -------------------------------------------------------------------------------- /example/pages/api/[filekey]/index.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from "next"; 3 | import path from "path"; 4 | import fs from "fs"; 5 | import { sync as glob } from "glob"; 6 | 7 | export default async (req: NextApiRequest, res: NextApiResponse) => { 8 | const { filekey } = req.query; 9 | 10 | // check if file exists with designated filekey 11 | const filePath = path.join(process.cwd(), "samples", filekey as string); 12 | 13 | // read the directory, get the files with .json 14 | const files = glob(`${filePath}/*.json`); 15 | 16 | // read the files (meta only) 17 | const data: { 18 | filekey: string; 19 | nodes: { [key: string]: any }; 20 | } = { 21 | filekey: filekey as string, 22 | nodes: {}, 23 | }; 24 | 25 | for (const file in files) { 26 | const id = path.basename(files[file], ".json"); 27 | const nodefile = path.join(filePath, `${id}.json`); 28 | const fileContents = await fs.readFileSync(nodefile); 29 | const f = JSON.parse(fileContents.toString()); 30 | const { name, type, size } = f; 31 | data.nodes[id] = { 32 | id, 33 | name, 34 | type, 35 | size, 36 | }; 37 | } 38 | 39 | res.status(200).json(data); 40 | }; 41 | -------------------------------------------------------------------------------- /example/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Head from "next/head"; 2 | import Image from "next/image"; 3 | import styles from "../styles/Home.module.css"; 4 | 5 | export default function Home() { 6 | return ( 7 | 63 | ); 64 | } 65 | -------------------------------------------------------------------------------- /example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gridaco/figma-view/3eae415c60082a6b643e8436a2fe7925b0638110/example/public/favicon.ico -------------------------------------------------------------------------------- /example/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /example/samples/05qyc2aNJBK4J1fTcWBe7w/1:2.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1:2", 3 | "name": "Frame 1", 4 | "type": "FRAME", 5 | "scrollBehavior": "SCROLLS", 6 | "blendMode": "PASS_THROUGH", 7 | "children": [ 8 | { 9 | "id": "1:3", 10 | "name": "Rectangle 1", 11 | "type": "RECTANGLE", 12 | "scrollBehavior": "SCROLLS", 13 | "blendMode": "PASS_THROUGH", 14 | "absoluteBoundingBox": { 15 | "x": -317, 16 | "y": -131, 17 | "width": 158, 18 | "height": 126 19 | }, 20 | "absoluteRenderBounds": { 21 | "x": -317, 22 | "y": -131, 23 | "width": 158, 24 | "height": 126 25 | }, 26 | "constraints": { 27 | "vertical": "TOP", 28 | "horizontal": "LEFT" 29 | }, 30 | "relativeTransform": [ 31 | [1, 0, 47], 32 | [0, 1, 148] 33 | ], 34 | "size": { 35 | "x": 158, 36 | "y": 126 37 | }, 38 | "fills": [ 39 | { 40 | "blendMode": "NORMAL", 41 | "type": "SOLID", 42 | "color": { 43 | "r": 0.8509804010391235, 44 | "g": 0.8509804010391235, 45 | "b": 0.8509804010391235, 46 | "a": 1 47 | } 48 | } 49 | ], 50 | "fillGeometry": [ 51 | { 52 | "path": "M0 0L158 0L158 126L0 126L0 0Z", 53 | "windingRule": "NONZERO" 54 | } 55 | ], 56 | "strokes": [], 57 | "strokeWeight": 1, 58 | "strokeAlign": "INSIDE", 59 | "strokeGeometry": [], 60 | "effects": [] 61 | }, 62 | { 63 | "id": "1:5", 64 | "name": "cdcd ddee", 65 | "type": "TEXT", 66 | "scrollBehavior": "SCROLLS", 67 | "blendMode": "PASS_THROUGH", 68 | "absoluteBoundingBox": { 69 | "x": -317, 70 | "y": 64, 71 | "width": 29, 72 | "height": 45 73 | }, 74 | "absoluteRenderBounds": { 75 | "x": -316.3863525390625, 76 | "y": 67.2727279663086, 77 | "width": 27.6519775390625, 78 | "height": 38.86363220214844 79 | }, 80 | "constraints": { 81 | "vertical": "TOP", 82 | "horizontal": "LEFT" 83 | }, 84 | "relativeTransform": [ 85 | [1, 0, 47], 86 | [0, 1, 343] 87 | ], 88 | "size": { 89 | "x": 29, 90 | "y": 45 91 | }, 92 | "fills": [ 93 | { 94 | "blendMode": "NORMAL", 95 | "type": "SOLID", 96 | "color": { 97 | "r": 0, 98 | "g": 0, 99 | "b": 0, 100 | "a": 1 101 | } 102 | } 103 | ], 104 | "strokes": [], 105 | "strokeWeight": 1, 106 | "strokeAlign": "OUTSIDE", 107 | "strokeGeometry": [], 108 | "effects": [], 109 | "characters": "cdcd\n\nddee", 110 | "style": { 111 | "fontFamily": "Inter", 112 | "fontPostScriptName": null, 113 | "fontWeight": 400, 114 | "textAutoResize": "WIDTH_AND_HEIGHT", 115 | "fontSize": 12, 116 | "textAlignHorizontal": "LEFT", 117 | "textAlignVertical": "TOP", 118 | "letterSpacing": 0, 119 | "lineHeightPx": 14.522727012634277, 120 | "lineHeightPercent": 100, 121 | "lineHeightUnit": "INTRINSIC_%" 122 | }, 123 | "layoutVersion": 3, 124 | "characterStyleOverrides": [], 125 | "styleOverrideTable": {}, 126 | "lineTypes": ["NONE", "NONE", "NONE"], 127 | "lineIndentations": [0, 0, 0] 128 | }, 129 | { 130 | "id": "1:4", 131 | "name": "ababa aaaaa", 132 | "type": "TEXT", 133 | "scrollBehavior": "SCROLLS", 134 | "blendMode": "PASS_THROUGH", 135 | "absoluteBoundingBox": { 136 | "x": -293, 137 | "y": -215, 138 | "width": 62, 139 | "height": 30 140 | }, 141 | "absoluteRenderBounds": { 142 | "x": -296.1665344238281, 143 | "y": -211.72727966308594, 144 | "width": 68.77767944335938, 145 | "height": 31.727279663085938 146 | }, 147 | "constraints": { 148 | "vertical": "TOP", 149 | "horizontal": "LEFT" 150 | }, 151 | "relativeTransform": [ 152 | [1, 0, 71], 153 | [0, 1, 64] 154 | ], 155 | "size": { 156 | "x": 62, 157 | "y": 30 158 | }, 159 | "fills": [ 160 | { 161 | "blendMode": "NORMAL", 162 | "type": "SOLID", 163 | "color": { 164 | "r": 0, 165 | "g": 0, 166 | "b": 0, 167 | "a": 1 168 | } 169 | } 170 | ], 171 | "strokes": [], 172 | "strokeWeight": 1, 173 | "strokeAlign": "OUTSIDE", 174 | "strokeGeometry": [], 175 | "exportSettings": [ 176 | { 177 | "suffix": "", 178 | "format": "PNG", 179 | "constraint": { 180 | "type": "SCALE", 181 | "value": 1 182 | } 183 | } 184 | ], 185 | "effects": [ 186 | { 187 | "type": "DROP_SHADOW", 188 | "visible": true, 189 | "color": { 190 | "r": 0, 191 | "g": 0, 192 | "b": 0, 193 | "a": 0.25 194 | }, 195 | "blendMode": "NORMAL", 196 | "offset": { 197 | "x": 0, 198 | "y": 4 199 | }, 200 | "radius": 4, 201 | "showShadowBehindNode": false 202 | } 203 | ], 204 | "characters": "ababa\naaaaaaaaaaa", 205 | "style": { 206 | "fontFamily": "Inter", 207 | "fontPostScriptName": "Inter-Thin", 208 | "fontWeight": 100, 209 | "textCase": "UPPER", 210 | "textAutoResize": "TRUNCATE", 211 | "textDecoration": "UNDERLINE", 212 | "fontSize": 12, 213 | "textAlignHorizontal": "RIGHT", 214 | "textAlignVertical": "TOP", 215 | "letterSpacing": 6, 216 | "lineHeightPx": 14.522727012634277, 217 | "lineHeightPercent": 100, 218 | "lineHeightUnit": "INTRINSIC_%" 219 | }, 220 | "layoutVersion": 3, 221 | "characterStyleOverrides": [], 222 | "styleOverrideTable": {}, 223 | "lineTypes": ["NONE", "NONE"], 224 | "lineIndentations": [0, 0] 225 | } 226 | ], 227 | "absoluteBoundingBox": { 228 | "x": -364, 229 | "y": -279, 230 | "width": 252, 231 | "height": 452 232 | }, 233 | "absoluteRenderBounds": { 234 | "x": -364, 235 | "y": -279, 236 | "width": 252, 237 | "height": 452 238 | }, 239 | "constraints": { 240 | "vertical": "TOP", 241 | "horizontal": "LEFT" 242 | }, 243 | "relativeTransform": [ 244 | [1, 0, -364], 245 | [0, 1, -279] 246 | ], 247 | "size": { 248 | "x": 252, 249 | "y": 452 250 | }, 251 | "clipsContent": true, 252 | "background": [ 253 | { 254 | "blendMode": "NORMAL", 255 | "type": "SOLID", 256 | "color": { 257 | "r": 1, 258 | "g": 1, 259 | "b": 1, 260 | "a": 1 261 | } 262 | } 263 | ], 264 | "fills": [ 265 | { 266 | "blendMode": "NORMAL", 267 | "type": "SOLID", 268 | "color": { 269 | "r": 1, 270 | "g": 1, 271 | "b": 1, 272 | "a": 1 273 | } 274 | } 275 | ], 276 | "strokes": [], 277 | "strokeWeight": 1, 278 | "strokeAlign": "INSIDE", 279 | "backgroundColor": { 280 | "r": 1, 281 | "g": 1, 282 | "b": 1, 283 | "a": 1 284 | }, 285 | "exportSettings": [ 286 | { 287 | "suffix": "", 288 | "format": "PNG", 289 | "constraint": { 290 | "type": "SCALE", 291 | "value": 1 292 | } 293 | } 294 | ], 295 | "effects": [] 296 | } 297 | -------------------------------------------------------------------------------- /example/samples/readme.md: -------------------------------------------------------------------------------- 1 | # Sample figma file json archives for rapid development 2 | 3 | To add a new sample set, 4 | 5 | ```txt 6 | - [filekey] 7 | - [id].json 8 | - [id].json 9 | - [id].json 10 | ``` 11 | 12 | Use figma file [sampler script](https://github.com/gridaco/design-sdk/tree/main/sampler) from [@design-sdk](https://github.com/gridaco/design-sdk) 13 | -------------------------------------------------------------------------------- /example/samples/vXAxldxvDUBWW8EVZIGmgC/1:2.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1:2", 3 | "name": "Frame 1", 4 | "type": "FRAME", 5 | "scrollBehavior": "SCROLLS", 6 | "blendMode": "PASS_THROUGH", 7 | "children": [ 8 | { 9 | "id": "4:7", 10 | "name": "Frame 2", 11 | "type": "FRAME", 12 | "scrollBehavior": "SCROLLS", 13 | "blendMode": "PASS_THROUGH", 14 | "children": [ 15 | { 16 | "id": "1:6", 17 | "name": "aksdjflafjlsda", 18 | "type": "TEXT", 19 | "scrollBehavior": "SCROLLS", 20 | "blendMode": "PASS_THROUGH", 21 | "absoluteBoundingBox": { 22 | "x": -267, 23 | "y": 90, 24 | "width": 75, 25 | "height": 15 26 | }, 27 | "absoluteRenderBounds": { 28 | "x": -266.3863525390625, 29 | "y": 92.86363220214844, 30 | "width": 72.76809692382812, 31 | "height": 11.590911865234375 32 | }, 33 | "constraints": { 34 | "vertical": "TOP", 35 | "horizontal": "LEFT" 36 | }, 37 | "relativeTransform": [ 38 | [ 39 | 1, 40 | 0, 41 | 0 42 | ], 43 | [ 44 | 0, 45 | 1, 46 | 0 47 | ] 48 | ], 49 | "size": { 50 | "x": 75, 51 | "y": 15 52 | }, 53 | "layoutAlign": "INHERIT", 54 | "layoutGrow": 0, 55 | "fills": [ 56 | { 57 | "blendMode": "NORMAL", 58 | "type": "SOLID", 59 | "color": { 60 | "r": 0, 61 | "g": 0, 62 | "b": 0, 63 | "a": 1 64 | } 65 | } 66 | ], 67 | "strokes": [], 68 | "strokeWeight": 1, 69 | "strokeAlign": "OUTSIDE", 70 | "strokeGeometry": [], 71 | "effects": [], 72 | "characters": "aksdjflafjlsda", 73 | "style": { 74 | "fontFamily": "Inter", 75 | "fontPostScriptName": null, 76 | "fontWeight": 400, 77 | "textAutoResize": "HEIGHT", 78 | "fontSize": 12, 79 | "textAlignHorizontal": "LEFT", 80 | "textAlignVertical": "TOP", 81 | "letterSpacing": 0, 82 | "lineHeightPx": 14.522727012634277, 83 | "lineHeightPercent": 100, 84 | "lineHeightUnit": "INTRINSIC_%" 85 | }, 86 | "layoutVersion": 3, 87 | "characterStyleOverrides": [], 88 | "styleOverrideTable": {}, 89 | "lineTypes": [ 90 | "NONE" 91 | ], 92 | "lineIndentations": [ 93 | 0 94 | ] 95 | }, 96 | { 97 | "id": "1:3", 98 | "name": "Text", 99 | "type": "TEXT", 100 | "scrollBehavior": "SCROLLS", 101 | "blendMode": "PASS_THROUGH", 102 | "absoluteBoundingBox": { 103 | "x": -267, 104 | "y": 116, 105 | "width": 75, 106 | "height": 15 107 | }, 108 | "absoluteRenderBounds": { 109 | "x": -266.4204406738281, 110 | "y": 119.2727279663086, 111 | "width": 23.345870971679688, 112 | "height": 8.863639831542969 113 | }, 114 | "constraints": { 115 | "vertical": "TOP", 116 | "horizontal": "LEFT" 117 | }, 118 | "relativeTransform": [ 119 | [ 120 | 1, 121 | 0, 122 | 0 123 | ], 124 | [ 125 | 0, 126 | 1, 127 | 26 128 | ] 129 | ], 130 | "size": { 131 | "x": 75, 132 | "y": 15 133 | }, 134 | "layoutAlign": "STRETCH", 135 | "layoutGrow": 0, 136 | "fills": [ 137 | { 138 | "blendMode": "NORMAL", 139 | "type": "SOLID", 140 | "color": { 141 | "r": 0, 142 | "g": 0, 143 | "b": 0, 144 | "a": 1 145 | } 146 | } 147 | ], 148 | "strokes": [], 149 | "strokeWeight": 1, 150 | "strokeAlign": "OUTSIDE", 151 | "strokeGeometry": [], 152 | "effects": [], 153 | "characters": "Text", 154 | "style": { 155 | "fontFamily": "Inter", 156 | "fontPostScriptName": null, 157 | "fontWeight": 400, 158 | "textAutoResize": "HEIGHT", 159 | "fontSize": 12, 160 | "textAlignHorizontal": "LEFT", 161 | "textAlignVertical": "TOP", 162 | "letterSpacing": 0, 163 | "lineHeightPx": 14.522727012634277, 164 | "lineHeightPercent": 100, 165 | "lineHeightUnit": "INTRINSIC_%" 166 | }, 167 | "layoutVersion": 3, 168 | "characterStyleOverrides": [], 169 | "styleOverrideTable": {}, 170 | "lineTypes": [ 171 | "NONE" 172 | ], 173 | "lineIndentations": [ 174 | 0 175 | ] 176 | } 177 | ], 178 | "absoluteBoundingBox": { 179 | "x": -267, 180 | "y": 90, 181 | "width": 75, 182 | "height": 41 183 | }, 184 | "absoluteRenderBounds": { 185 | "x": -267, 186 | "y": 90, 187 | "width": 75, 188 | "height": 41 189 | }, 190 | "constraints": { 191 | "vertical": "TOP", 192 | "horizontal": "LEFT" 193 | }, 194 | "relativeTransform": [ 195 | [ 196 | 1, 197 | 0, 198 | 56 199 | ], 200 | [ 201 | 0, 202 | 1, 203 | 387 204 | ] 205 | ], 206 | "size": { 207 | "x": 75, 208 | "y": 41 209 | }, 210 | "clipsContent": false, 211 | "background": [], 212 | "fills": [], 213 | "strokes": [], 214 | "strokeWeight": 1, 215 | "strokeAlign": "INSIDE", 216 | "backgroundColor": { 217 | "r": 0, 218 | "g": 0, 219 | "b": 0, 220 | "a": 0 221 | }, 222 | "layoutMode": "VERTICAL", 223 | "itemSpacing": 11, 224 | "effects": [] 225 | }, 226 | { 227 | "id": "1:5", 228 | "name": "Rectangle 1", 229 | "type": "RECTANGLE", 230 | "scrollBehavior": "SCROLLS", 231 | "blendMode": "PASS_THROUGH", 232 | "absoluteBoundingBox": { 233 | "x": -307, 234 | "y": -157, 235 | "width": 252, 236 | "height": 148 237 | }, 238 | "absoluteRenderBounds": { 239 | "x": -307, 240 | "y": -157, 241 | "width": 252, 242 | "height": 148 243 | }, 244 | "constraints": { 245 | "vertical": "TOP", 246 | "horizontal": "LEFT" 247 | }, 248 | "relativeTransform": [ 249 | [ 250 | 1, 251 | 0, 252 | 16 253 | ], 254 | [ 255 | 0, 256 | 1, 257 | 140 258 | ] 259 | ], 260 | "size": { 261 | "x": 252, 262 | "y": 148 263 | }, 264 | "fills": [ 265 | { 266 | "blendMode": "NORMAL", 267 | "type": "IMAGE", 268 | "scaleMode": "FILL", 269 | "imageRef": "efe98099a0aa97c1aa64e286bc82e633cc9aed22" 270 | } 271 | ], 272 | "fillGeometry": [ 273 | { 274 | "path": "M0 0L252 0L252 148L0 148L0 0Z", 275 | "windingRule": "NONZERO" 276 | } 277 | ], 278 | "strokes": [], 279 | "strokeWeight": 1, 280 | "strokeAlign": "INSIDE", 281 | "strokeGeometry": [], 282 | "effects": [] 283 | } 284 | ], 285 | "absoluteBoundingBox": { 286 | "x": -323, 287 | "y": -297, 288 | "width": 307, 289 | "height": 515 290 | }, 291 | "absoluteRenderBounds": { 292 | "x": -323, 293 | "y": -297, 294 | "width": 307, 295 | "height": 515 296 | }, 297 | "constraints": { 298 | "vertical": "TOP", 299 | "horizontal": "LEFT" 300 | }, 301 | "relativeTransform": [ 302 | [ 303 | 1, 304 | 0, 305 | -323 306 | ], 307 | [ 308 | 0, 309 | 1, 310 | -297 311 | ] 312 | ], 313 | "size": { 314 | "x": 307, 315 | "y": 515 316 | }, 317 | "clipsContent": true, 318 | "background": [ 319 | { 320 | "blendMode": "NORMAL", 321 | "type": "SOLID", 322 | "color": { 323 | "r": 1, 324 | "g": 1, 325 | "b": 1, 326 | "a": 1 327 | } 328 | } 329 | ], 330 | "fills": [ 331 | { 332 | "blendMode": "NORMAL", 333 | "type": "SOLID", 334 | "color": { 335 | "r": 1, 336 | "g": 1, 337 | "b": 1, 338 | "a": 1 339 | } 340 | } 341 | ], 342 | "strokes": [], 343 | "strokeWeight": 1, 344 | "strokeAlign": "INSIDE", 345 | "backgroundColor": { 346 | "r": 1, 347 | "g": 1, 348 | "b": 1, 349 | "a": 1 350 | }, 351 | "effects": [] 352 | } -------------------------------------------------------------------------------- /example/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | } 10 | 11 | .main { 12 | padding: 5rem 0; 13 | flex: 1; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .footer { 21 | width: 100%; 22 | height: 100px; 23 | border-top: 1px solid #eaeaea; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | } 28 | 29 | .footer a { 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | flex-grow: 1; 34 | } 35 | 36 | .title a { 37 | color: #0070f3; 38 | text-decoration: none; 39 | } 40 | 41 | .title a:hover, 42 | .title a:focus, 43 | .title a:active { 44 | text-decoration: underline; 45 | } 46 | 47 | .title { 48 | margin: 0; 49 | line-height: 1.15; 50 | font-size: 4rem; 51 | } 52 | 53 | .title, 54 | .description { 55 | text-align: center; 56 | } 57 | 58 | .description { 59 | line-height: 1.5; 60 | font-size: 1.5rem; 61 | } 62 | 63 | .code { 64 | background: #fafafa; 65 | border-radius: 5px; 66 | padding: 0.75rem; 67 | font-size: 1.1rem; 68 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 69 | Bitstream Vera Sans Mono, Courier New, monospace; 70 | } 71 | 72 | .grid { 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | flex-wrap: wrap; 77 | max-width: 800px; 78 | margin-top: 3rem; 79 | } 80 | 81 | .card { 82 | margin: 1rem; 83 | padding: 1.5rem; 84 | text-align: left; 85 | color: inherit; 86 | text-decoration: none; 87 | border: 1px solid #eaeaea; 88 | border-radius: 10px; 89 | transition: color 0.15s ease, border-color 0.15s ease; 90 | width: 45%; 91 | } 92 | 93 | .card:hover, 94 | .card:focus, 95 | .card:active { 96 | color: #0070f3; 97 | border-color: #0070f3; 98 | } 99 | 100 | .card h2 { 101 | margin: 0 0 1rem 0; 102 | font-size: 1.5rem; 103 | } 104 | 105 | .card p { 106 | margin: 0; 107 | font-size: 1.25rem; 108 | line-height: 1.5; 109 | } 110 | 111 | .logo { 112 | height: 1em; 113 | margin-left: 0.5rem; 114 | } 115 | 116 | @media (max-width: 600px) { 117 | .grid { 118 | width: 100%; 119 | flex-direction: column; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /example/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": false, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "workspace", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "yarn workspace example dev" 7 | }, 8 | "workspaces": [ 9 | "example", 10 | "packages/*" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /packages/figma-view-react/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "singleQuote": false 5 | } 6 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/figma-view.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { SceneNode } from "@design-sdk/figma-types"; 3 | import { 4 | FigmaEllipseNode, 5 | FigmaFrameNode, 6 | FigmaGroupNode, 7 | FigmaLineNode, 8 | FigmaPolygonNode, 9 | FigmaRectangleNode, 10 | FigmaStarNode, 11 | FigmaTextNode, 12 | FigmaVectorNode, 13 | FigmaInstanceNode, 14 | } from "./nodes"; 15 | 16 | export function FigmaView({ 17 | data: node, 18 | style = {}, 19 | }: { 20 | data: SceneNode; 21 | style?: React.CSSProperties; 22 | }) { 23 | const passprops = { 24 | style: style, 25 | }; 26 | 27 | switch (node.type) { 28 | case "BOOLEAN_OPERATION": 29 | return <>; 30 | case "COMPONENT": 31 | return <>; 32 | case "COMPONENT_SET": 33 | return <>; 34 | case "CONNECTOR": 35 | return <>; 36 | case "FRAME": 37 | return ; 38 | case "GROUP": 39 | return ; 40 | case "ELLIPSE": 41 | return ; 42 | case "INSTANCE": 43 | return ; 44 | case "LINE": 45 | return ; 46 | case "POLYGON": 47 | return ; 48 | case "RECTANGLE": 49 | return ; 50 | case "SHAPE_WITH_TEXT": 51 | return <>; 52 | case "SLICE": 53 | return <>; 54 | case "STAMP": 55 | return <>; 56 | case "STAR": 57 | return ; 58 | case "STICKY": 59 | return <>; 60 | case "TEXT": 61 | return ; 62 | case "VECTOR": 63 | return ; 64 | } 65 | } 66 | 67 | function nodePreference(type: SceneNode["type"]) { 68 | switch (type) { 69 | case "BOOLEAN_OPERATION": 70 | case "COMPONENT": 71 | case "COMPONENT_SET": 72 | case "CONNECTOR": 73 | case "FRAME": 74 | case "GROUP": 75 | case "ELLIPSE": 76 | case "INSTANCE": 77 | case "LINE": 78 | case "POLYGON": 79 | case "RECTANGLE": 80 | case "SHAPE_WITH_TEXT": 81 | case "SLICE": 82 | case "STAMP": 83 | case "STAR": 84 | case "STICKY": 85 | case "TEXT": 86 | case "VECTOR": 87 | return; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/index.ts: -------------------------------------------------------------------------------- 1 | import { FigmaView } from "./figma-view"; 2 | export default FigmaView; 3 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/ellipse.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, EllipseNode } from "./types"; 3 | 4 | export function FigmaEllipseNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | return ( 7 | <> 8 | {type} : {name} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/frame.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FigmaView } from "../figma-view"; 3 | import type { NodeViewProps, FrameNode } from "./types"; 4 | 5 | export function FigmaFrameNode({ data, style = {} }: NodeViewProps) { 6 | const { children, fills, x, y, width, height, parent } = data; 7 | const { color } = fills?.[0] ?? {}; 8 | const { r, g, b, a } = color ?? {}; 9 | 10 | return ( 11 | <> 12 |
25 | {children.map((child: any) => ( 26 | 27 | ))} 28 |
29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/group.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, GroupNode } from "./types"; 3 | 4 | export function FigmaGroupNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | return ( 7 | <> 8 | {type} : {name} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/index.ts: -------------------------------------------------------------------------------- 1 | export { FigmaEllipseNode } from "./ellipse"; 2 | export { FigmaFrameNode } from "./frame"; 3 | export { FigmaGroupNode } from "./group"; 4 | export { FigmaInstanceNode } from "./instance"; 5 | export { FigmaLineNode } from "./line"; 6 | export { FigmaPolygonNode } from "./polygon"; 7 | export { FigmaRectangleNode } from "./rectangle"; 8 | export { FigmaStarNode } from "./star"; 9 | export { FigmaTextNode } from "./text"; 10 | export { FigmaVectorNode } from "./vector"; 11 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/instance.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, InstanceNode } from "./types"; 3 | 4 | export function FigmaInstanceNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | 7 | return ( 8 | <> 9 | {type} : {name} 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/line.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, LineNode } from "./types"; 3 | 4 | export function FigmaLineNode({ data }: NodeViewProps) { 5 | return <>; 6 | } 7 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/polygon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, PolygonNode } from "./types"; 3 | 4 | export function FigmaPolygonNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | return ( 7 | <> 8 | {type} : {name} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/rectangle.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, RectangleNode } from "./types"; 3 | 4 | export function FigmaRectangleNode({ 5 | data, 6 | style, 7 | }: NodeViewProps) { 8 | const { x, y, width, height, fills } = data; 9 | const color = fills?.[0]?.color ?? { r: 0, g: 0, b: 0, a: 0 }; 10 | return ( 11 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/star.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, StarNode } from "./types"; 3 | 4 | export function FigmaStarNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | return ( 7 | <> 8 | {type} : {name} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/text.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, TextNode } from "./types"; 3 | 4 | type TextAlignHorizontalType = "left" | "right" | "center" | "justify"; 5 | type TextAlignVerticalType = "top" | "bottom" | "center"; 6 | type SmallCapsType = "normal" | "small-caps" | "all-small-caps"; 7 | 8 | export function FigmaTextNode({ data, style = {} }: NodeViewProps) { 9 | console.log(data); 10 | const { 11 | x, 12 | y, 13 | width, 14 | height, 15 | characters, 16 | fills, 17 | textCase, 18 | fontName, 19 | fontSize, 20 | fontWeight, 21 | textDecoration, 22 | textAlignHorizontal, 23 | textAlignVertical, 24 | textAutoResize, 25 | letterSpacing, 26 | lineHeight, 27 | }: { 28 | x: number; 29 | y: number; 30 | width: number; 31 | height: number; 32 | characters: string; 33 | fills: any; 34 | textCase: any; 35 | fontName: any; 36 | fontSize: any; 37 | fontWeight?: number; 38 | textDecoration: any; 39 | textAlignHorizontal: string; 40 | textAlignVertical: string; 41 | textAutoResize: string; 42 | letterSpacing: any; 43 | lineHeight: any; 44 | } = data; 45 | // color 46 | const color = fills?.[0]?.color ?? { r: 0, g: 0, b: 0, a: 0 }; 47 | 48 | // text fit option 49 | const size = fitHandler(width, height, textAutoResize); 50 | 51 | // text case 52 | const { text, smallCaps }: { text: string; smallCaps: SmallCapsType } = 53 | textCaseHandler(textCase, characters); 54 | 55 | // text align 56 | const { 57 | _textAlignHorizontal, 58 | _textAlignVertical, 59 | }: { 60 | _textAlignHorizontal: TextAlignHorizontalType; 61 | _textAlignVertical: TextAlignVerticalType; 62 | } = textAlignHandler(textAlignHorizontal, textAlignVertical); 63 | 64 | // text decoration 65 | const _textDecoration = textDecorationHandler(textDecoration); 66 | 67 | return ( 68 |
92 | {text} 93 |
94 | ); 95 | } 96 | 97 | function fitHandler(width: number, height: number, textAutoResize: string) { 98 | let size = {}; 99 | switch (textAutoResize) { 100 | case "WIDTH_AND_HEIGHT": 101 | size = { 102 | minWidth: width, 103 | minHeight: height, 104 | }; 105 | break; 106 | case "HEIGHT": 107 | size = { 108 | width: width, 109 | minHeight: height, 110 | }; 111 | break; 112 | case "TRUNCATE": 113 | size = { 114 | width: width, 115 | height: height, 116 | overflow: "hidden", 117 | textOverflow: "ellipsis", 118 | }; 119 | break; 120 | case "NONE": 121 | size = { 122 | width: width, 123 | height: height, 124 | }; 125 | break; 126 | default: 127 | size = { 128 | minWidth: width, 129 | minHeight: height, 130 | }; 131 | } 132 | return size; 133 | } 134 | 135 | function textCaseHandler(textCase: any, characters: string) { 136 | let text = characters; 137 | let smallCaps: SmallCapsType = "normal"; 138 | 139 | switch (textCase) { 140 | case "UPPER": 141 | text = characters.toUpperCase(); 142 | break; 143 | case "LOWER": 144 | text = characters.toLowerCase(); 145 | break; 146 | case "TITLE": 147 | text = characters 148 | .split(" ") 149 | .map((word) => word[0].toUpperCase() + word.slice(1)) 150 | .join(" "); 151 | break; 152 | case "SMALL_CAPS": 153 | text = characters.toUpperCase(); 154 | smallCaps = "small-caps"; 155 | break; 156 | case "SMALL_CAPS_FORCED": 157 | text = characters.toUpperCase(); 158 | smallCaps = "all-small-caps"; 159 | break; 160 | default: 161 | text = characters; 162 | } 163 | 164 | return { text, smallCaps }; 165 | } 166 | 167 | function textAlignHandler( 168 | textAlignHorizontal: string, 169 | textAlignVertical: string 170 | ) { 171 | let _textAlignHorizontal: TextAlignHorizontalType = "left"; 172 | let _textAlignVertical: TextAlignVerticalType = "top"; 173 | switch (textAlignHorizontal) { 174 | case "LEFT": 175 | _textAlignHorizontal = "left"; 176 | break; 177 | case "RIGHT": 178 | _textAlignHorizontal = "right"; 179 | break; 180 | case "CENTER": 181 | _textAlignHorizontal = "center"; 182 | break; 183 | case "JUSTIFIED": 184 | _textAlignHorizontal = "justify"; 185 | break; 186 | default: 187 | _textAlignHorizontal = "left"; 188 | } 189 | 190 | switch (textAlignVertical) { 191 | case "TOP": 192 | _textAlignVertical = "top"; 193 | break; 194 | case "BOTTOM": 195 | _textAlignVertical = "bottom"; 196 | break; 197 | case "CENTER": 198 | _textAlignVertical = "center"; 199 | break; 200 | default: 201 | _textAlignVertical = "top"; 202 | } 203 | 204 | return { 205 | _textAlignHorizontal, 206 | _textAlignVertical, 207 | }; 208 | } 209 | 210 | function textDecorationHandler(textDecoration: string) { 211 | let _textDecoration = "none"; 212 | switch (textDecoration) { 213 | case "UNDERLINE": 214 | _textDecoration = "underline"; 215 | break; 216 | case "STRIKETHROUGH": 217 | _textDecoration = "line-through"; 218 | break; 219 | default: 220 | _textDecoration = "none"; 221 | } 222 | 223 | return _textDecoration; 224 | } 225 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/types.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | SceneNode, 3 | RectangleNode, 4 | EllipseNode, 5 | TextNode, 6 | FrameNode, 7 | GroupNode, 8 | LineNode, 9 | StarNode, 10 | InstanceNode, 11 | VectorNode, 12 | PolygonNode, 13 | } from "@design-sdk/figma-types"; 14 | 15 | interface NodeViewProps { 16 | data: T; 17 | style?: React.CSSProperties; 18 | } 19 | 20 | export type { 21 | NodeViewProps, 22 | SceneNode, 23 | RectangleNode, 24 | EllipseNode, 25 | TextNode, 26 | FrameNode, 27 | GroupNode, 28 | LineNode, 29 | StarNode, 30 | InstanceNode, 31 | PolygonNode, 32 | VectorNode, 33 | }; 34 | -------------------------------------------------------------------------------- /packages/figma-view-react/lib/nodes/vector.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { NodeViewProps, VectorNode } from "./types"; 3 | 4 | export function FigmaVectorNode({ data }: NodeViewProps) { 5 | const { type, name } = data; 6 | return ( 7 | <> 8 | {type} : {name} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/figma-view-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "figma-view", 3 | "description": "React figma renderer component", 4 | "author": "Universe (@softmarshmallow) ", 5 | "homepage": "https://github.com/gridaco/figma-view", 6 | "repository": "https://github.com/gridaco/figma-view", 7 | "keywords": [ 8 | "figma" 9 | ], 10 | "files": [ 11 | "dist/index.js", 12 | "dist/index.d.ts", 13 | "dist/**/*.js", 14 | "dist/**/*.d.ts", 15 | "LICENSE", 16 | "README.md" 17 | ], 18 | "version": "0.0.0", 19 | "publishConfig": { 20 | "access": "public" 21 | }, 22 | "dependencies": {}, 23 | "peerDependencies": { 24 | "react": "*" 25 | }, 26 | "devDependencies": { 27 | "@design-sdk/figma-remote-types": "^0.0.43", 28 | "@design-sdk/figma-types": "^0.0.43", 29 | "react": "^18.2.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/figma-view-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react-jsx", 4 | "esModuleInterop": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/readme.md: -------------------------------------------------------------------------------- 1 | # Packages 2 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@base-sdk/core@0.1.0": 6 | version "0.1.0" 7 | resolved "https://registry.yarnpkg.com/@base-sdk/core/-/core-0.1.0.tgz#865eb7373b77d367dd57dc7660452a889d6bb139" 8 | integrity sha512-JDSgW8OXIj9bpkCZiSZZ4vlDaN+8bZplvCgpkS5yFKbvYlxAFRsAF6AKTxfLu0bGZIxnwt7ZIgDLoPyz4rPtjg== 9 | dependencies: 10 | "@reflect-ui/core" "0.0.2-rc.7" 11 | axios "^0.21.0" 12 | 13 | "@base-sdk/hosting@^0.1.2": 14 | version "0.1.2" 15 | resolved "https://registry.yarnpkg.com/@base-sdk/hosting/-/hosting-0.1.2.tgz#24c627a309cc2d25e024b38eea00142f3a46585f" 16 | integrity sha512-PsXv5RGRd4kjLIcqT+b6h4r0ktEdFJ3YuANOGWSr7RdePmT1ZT2WrXzSAK/74N91AJOkaX1ci8j56ZPG0spuxg== 17 | dependencies: 18 | "@base-sdk/core" "0.1.0" 19 | form-data "^3.0.0" 20 | 21 | "@design-sdk/asset-repository@^0.0.43": 22 | version "0.0.43" 23 | resolved "https://registry.yarnpkg.com/@design-sdk/asset-repository/-/asset-repository-0.0.43.tgz#7afc704da2b642474980a51be884215a2631780e" 24 | integrity sha512-m8cj+1rZbCo2aB3Br1B326XsNmkfV9/A8gDU++uFMlBv7iG3mZ6HYeRnWFhxAXPg8SJl4JzYFARsaWuE83vLxQ== 25 | dependencies: 26 | "@base-sdk/hosting" "^0.1.2" 27 | 28 | "@design-sdk/core-flags-dashdash@^0.0.43": 29 | version "0.0.43" 30 | resolved "https://registry.yarnpkg.com/@design-sdk/core-flags-dashdash/-/core-flags-dashdash-0.0.43.tgz#5e501ae2aca86a8f4336d3fc47de07770d666531" 31 | integrity sha512-eCQc6jggl3NTmM5QphW0yhHldsFNlZXYzH3Vg2SO6Qlv6EN71pjZqBrRRbQJPzLOgk/ITICq7bSor+lR2rSQlg== 32 | 33 | "@design-sdk/figma-core@^0.0.43": 34 | version "0.0.43" 35 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-core/-/figma-core-0.0.43.tgz#0d19d014daf398ed39046bfd4e7f3d2b78842943" 36 | integrity sha512-7WQ29f4hUOxu4Mu8ZyqbBI5F4DsRJbIjGIcZAUmn7O9/SRR00upTYrl2hdlEnKdE0ImHTYqfISgxjkoYEQgZaQ== 37 | 38 | "@design-sdk/figma-node-conversion@^0.0.43": 39 | version "0.0.43" 40 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-node-conversion/-/figma-node-conversion-0.0.43.tgz#fc4ad3e40d5e035cd0e0c278b13b73b4f5d5a1a0" 41 | integrity sha512-RX1aC1yUKNpQ0m3am88fJ33jnm2CxzgyEgsclLN1ycF863zA265u0Radw25vDEpJjaxaBh0uLiMWo6vwjl9YeQ== 42 | dependencies: 43 | "@design-sdk/figma-node" "^0.0.43" 44 | "@design-sdk/figma-types" "^0.0.43" 45 | "@design-sdk/figma-utils" "^0.0.43" 46 | "@design-sdk/flags" "^0.0.43" 47 | "@reflect-ui/cg" "^0.0.5" 48 | "@reflect-ui/core" "^0.0.5" 49 | "@reflect-ui/font-utils" "^0.0.5" 50 | 51 | "@design-sdk/figma-node@^0.0.43": 52 | version "0.0.43" 53 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-node/-/figma-node-0.0.43.tgz#5d468ae73e2b07a787d4e6447cdde7efb4f2ea43" 54 | integrity sha512-Wo3jNL4S8NjqbwZZG4eXe2ut/HVM/vPGaEFoEa8MIJyTslwS+sobiU4TW2qDUYNVZW/L7fxYdHO+sBDQOx0TWw== 55 | dependencies: 56 | "@design-sdk/figma-core" "^0.0.43" 57 | "@design-sdk/figma-utils" "^0.0.43" 58 | "@reflect-ui/font-utils" "^0.0.1" 59 | 60 | "@design-sdk/figma-remote-api@^0.0.43": 61 | version "0.0.43" 62 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote-api/-/figma-remote-api-0.0.43.tgz#abae76d11669dea9e74dc175b72dcaded232beca" 63 | integrity sha512-P23tmxi749yFl/YQnpepi1PWramXiYDQW4dJ+vWKS7bOdTI/BKCsypdI2oK5nL046QS0M11DgMWDh9BddhuDXw== 64 | 65 | "@design-sdk/figma-remote-types@^0.0.43": 66 | version "0.0.43" 67 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote-types/-/figma-remote-types-0.0.43.tgz#14542e81c31fa438ddaebea098a9b238861100f0" 68 | integrity sha512-DexaBc4MSdfhlyFX8UlhpkPeIJpOI3TXDROKzxQUE9Ibvwm3Kuw/ITG87rzCs4EOOmPBb+gMB2hf8pDpmHZWJA== 69 | 70 | "@design-sdk/figma-remote@^0.0.43": 71 | version "0.0.43" 72 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote/-/figma-remote-0.0.43.tgz#9ff81b3ae185c8bf05ef7003bf6df42742a01dc7" 73 | integrity sha512-1kSr38k34XHBtLZksiqDDv3OK+jaB/+Lgy/N8QF87RklFlvj7F+lZuN9Nw0JbAJ/uRojED5YpG5gh9wpw6jdFQ== 74 | dependencies: 75 | "@design-sdk/asset-repository" "^0.0.43" 76 | "@design-sdk/figma-node" "^0.0.43" 77 | "@design-sdk/figma-node-conversion" "^0.0.43" 78 | "@design-sdk/figma-remote-api" "^0.0.43" 79 | "@design-sdk/figma-utils" "^0.0.43" 80 | 81 | "@design-sdk/figma-types@^0.0.43": 82 | version "0.0.43" 83 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-types/-/figma-types-0.0.43.tgz#4b5d80d9a88bbbd2c97f8a96305c4805bc9661d6" 84 | integrity sha512-v/NBwevEE6suNLtsx0FLxfgv/T1e9ivHxWXd+AEkq9KsgvWc/ods+D5T8rq79kAoRzZN4i1dSV3DYsviltY2rw== 85 | 86 | "@design-sdk/figma-url@^0.0.43": 87 | version "0.0.43" 88 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-url/-/figma-url-0.0.43.tgz#c87e63cfcf5103bc849b48857ac1ee58a603a21f" 89 | integrity sha512-9bH9GZ7jdLcd1RK0UKybNGoPQQ0Uvk5JI165r1Ur61hbnusHdsn3MhY/VcJUKeLeT4t7Zr7eEVKL2fyYTankdA== 90 | 91 | "@design-sdk/figma-utils@^0.0.43": 92 | version "0.0.43" 93 | resolved "https://registry.yarnpkg.com/@design-sdk/figma-utils/-/figma-utils-0.0.43.tgz#c847e12a74b96b6f431ab9979e791e8980d2e8da" 94 | integrity sha512-A+Wu7nGFo1zfhXqVlQ5naAJmZYWh+9GlY0RQ3Cd9fU5Qn/TkKoFHucwOx7Yzw0GvUHNWWIxyLsox6Rkp2T87kQ== 95 | 96 | "@design-sdk/figma@^0.0.43": 97 | version "0.0.43" 98 | resolved "https://registry.yarnpkg.com/@design-sdk/figma/-/figma-0.0.43.tgz#16be409659edff6857de4bdae4abf4abeb8dd901" 99 | integrity sha512-byV+JbHH/a7sshkhZuBJHlGZ+PRDr2ktpzTNMdI6rJUbARSHbwddZwHOFHx9Ny6v6sni7yM2NIjOuZeEHJxO8w== 100 | dependencies: 101 | "@design-sdk/asset-repository" "^0.0.43" 102 | "@design-sdk/figma-node" "^0.0.43" 103 | "@design-sdk/figma-node-conversion" "^0.0.43" 104 | "@design-sdk/figma-remote" "^0.0.43" 105 | "@design-sdk/figma-types" "^0.0.43" 106 | "@design-sdk/figma-url" "^0.0.43" 107 | "@reflect-ui/uiutils" "0.1.2-1" 108 | 109 | "@design-sdk/flags@^0.0.43": 110 | version "0.0.43" 111 | resolved "https://registry.yarnpkg.com/@design-sdk/flags/-/flags-0.0.43.tgz#0333fe84d0753745ed71ceb9feaab95f77b5fadc" 112 | integrity sha512-/ZNzHvy6/2Xa98AbyV6HZ6OaAUzxYh2pyGpN90RbWPC2q6IGinwC5bLZ/vIUf9p8FMUS5kBUch/ZEiGEbgdNKg== 113 | dependencies: 114 | "@design-sdk/core-flags-dashdash" "^0.0.43" 115 | 116 | "@next/env@13.1.6": 117 | version "13.1.6" 118 | resolved "https://registry.yarnpkg.com/@next/env/-/env-13.1.6.tgz#c4925609f16142ded1a5cb833359ab17359b7a93" 119 | integrity sha512-s+W9Fdqh5MFk6ECrbnVmmAOwxKQuhGMT7xXHrkYIBMBcTiOqNWhv5KbJIboKR5STXxNXl32hllnvKaffzFaWQg== 120 | 121 | "@next/swc-android-arm-eabi@13.1.6": 122 | version "13.1.6" 123 | resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz#d766dfc10e27814d947b20f052067c239913dbcc" 124 | integrity sha512-F3/6Z8LH/pGlPzR1AcjPFxx35mPqjE5xZcf+IL+KgbW9tMkp7CYi1y7qKrEWU7W4AumxX/8OINnDQWLiwLasLQ== 125 | 126 | "@next/swc-android-arm64@13.1.6": 127 | version "13.1.6" 128 | resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-13.1.6.tgz#f37a98d5f18927d8c9970d750d516ac779465176" 129 | integrity sha512-cMwQjnB8vrYkWyK/H0Rf2c2pKIH4RGjpKUDvbjVAit6SbwPDpmaijLio0LWFV3/tOnY6kvzbL62lndVA0mkYpw== 130 | 131 | "@next/swc-darwin-arm64@13.1.6": 132 | version "13.1.6" 133 | resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.1.6.tgz#ec1b90fd9bf809d8b81004c5182e254dced4ad96" 134 | integrity sha512-KKRQH4DDE4kONXCvFMNBZGDb499Hs+xcFAwvj+rfSUssIDrZOlyfJNy55rH5t2Qxed1e4K80KEJgsxKQN1/fyw== 135 | 136 | "@next/swc-darwin-x64@13.1.6": 137 | version "13.1.6" 138 | resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.1.6.tgz#e869ac75d16995eee733a7d1550322d9051c1eb4" 139 | integrity sha512-/uOky5PaZDoaU99ohjtNcDTJ6ks/gZ5ykTQDvNZDjIoCxFe3+t06bxsTPY6tAO6uEAw5f6vVFX5H5KLwhrkZCA== 140 | 141 | "@next/swc-freebsd-x64@13.1.6": 142 | version "13.1.6" 143 | resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.1.6.tgz#84a7b2e423a2904afc2edca21c2f1ba6b53fa4c1" 144 | integrity sha512-qaEALZeV7to6weSXk3Br80wtFQ7cFTpos/q+m9XVRFggu+8Ib895XhMWdJBzew6aaOcMvYR6KQ6JmHA2/eMzWw== 145 | 146 | "@next/swc-linux-arm-gnueabihf@13.1.6": 147 | version "13.1.6" 148 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.1.6.tgz#980eed1f655ff8a72187d8a6ef9e73ac39d20d23" 149 | integrity sha512-OybkbC58A1wJ+JrJSOjGDvZzrVEQA4sprJejGqMwiZyLqhr9Eo8FXF0y6HL+m1CPCpPhXEHz/2xKoYsl16kNqw== 150 | 151 | "@next/swc-linux-arm64-gnu@13.1.6": 152 | version "13.1.6" 153 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.1.6.tgz#87a71db21cded3f7c63d1d19079845c59813c53d" 154 | integrity sha512-yCH+yDr7/4FDuWv6+GiYrPI9kcTAO3y48UmaIbrKy8ZJpi7RehJe3vIBRUmLrLaNDH3rY1rwoHi471NvR5J5NQ== 155 | 156 | "@next/swc-linux-arm64-musl@13.1.6": 157 | version "13.1.6" 158 | resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.1.6.tgz#c5aac8619331b9fd030603bbe2b36052011e11de" 159 | integrity sha512-ECagB8LGX25P9Mrmlc7Q/TQBb9rGScxHbv/kLqqIWs2fIXy6Y/EiBBiM72NTwuXUFCNrWR4sjUPSooVBJJ3ESQ== 160 | 161 | "@next/swc-linux-x64-gnu@13.1.6": 162 | version "13.1.6" 163 | resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.1.6.tgz#9513d36d540bbfea575576746736054c31aacdea" 164 | integrity sha512-GT5w2mruk90V/I5g6ScuueE7fqj/d8Bui2qxdw6lFxmuTgMeol5rnzAv4uAoVQgClOUO/MULilzlODg9Ib3Y4Q== 165 | 166 | "@next/swc-linux-x64-musl@13.1.6": 167 | version "13.1.6" 168 | resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.1.6.tgz#d61fc6884899f5957251f4ce3f522e34a2c479b7" 169 | integrity sha512-keFD6KvwOPzmat4TCnlnuxJCQepPN+8j3Nw876FtULxo8005Y9Ghcl7ACcR8GoiKoddAq8gxNBrpjoxjQRHeAQ== 170 | 171 | "@next/swc-win32-arm64-msvc@13.1.6": 172 | version "13.1.6" 173 | resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.1.6.tgz#fac2077a8ae9768e31444c9ae90807e64117cda7" 174 | integrity sha512-OwertslIiGQluFvHyRDzBCIB07qJjqabAmINlXUYt7/sY7Q7QPE8xVi5beBxX/rxTGPIbtyIe3faBE6Z2KywhQ== 175 | 176 | "@next/swc-win32-ia32-msvc@13.1.6": 177 | version "13.1.6" 178 | resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.1.6.tgz#498bc11c91b4c482a625bf4b978f98ae91111e46" 179 | integrity sha512-g8zowiuP8FxUR9zslPmlju7qYbs2XBtTLVSxVikPtUDQedhcls39uKYLvOOd1JZg0ehyhopobRoH1q+MHlIN/w== 180 | 181 | "@next/swc-win32-x64-msvc@13.1.6": 182 | version "13.1.6" 183 | resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.1.6.tgz#17ed919c723426b7d0ce1cd73d40ce3dcd342089" 184 | integrity sha512-Ls2OL9hi3YlJKGNdKv8k3X/lLgc3VmLG3a/DeTkAd+lAituJp8ZHmRmm9f9SL84fT3CotlzcgbdaCDfFwFA6bA== 185 | 186 | "@reflect-ui/cg@^0.0.5": 187 | version "0.0.5" 188 | resolved "https://registry.yarnpkg.com/@reflect-ui/cg/-/cg-0.0.5.tgz#772fc3161926527e21453101c4e13af5debec98d" 189 | integrity sha512-rqqaumLDgk9dGtPgkYy9h5PLlNv8ZVEz/+ktOcJpJE6v9fAQOSH1Wh5WAehpiZTQtKe944GzrFMsb/g8pTabWg== 190 | 191 | "@reflect-ui/core@0.0.2-rc.7": 192 | version "0.0.2-rc.7" 193 | resolved "https://registry.yarnpkg.com/@reflect-ui/core/-/core-0.0.2-rc.7.tgz#9d531f5a0b9caab31e7563020044b753700e2bbc" 194 | integrity sha512-EqF4SRU57bfa5DOPET1rv5lROFyMVHLv1xTEIlN6N2gDpXt71QceImWfQp3z3Khqnb4R/p9OhNK6DXGUpozWKw== 195 | 196 | "@reflect-ui/core@^0.0.5": 197 | version "0.0.5" 198 | resolved "https://registry.yarnpkg.com/@reflect-ui/core/-/core-0.0.5.tgz#f50ae00e64300c4b698ab5c5374c6ac3bb5de873" 199 | integrity sha512-lA6AYHCF8aSyOvGXbJZcmlB5ccxCaznhxvD8Hg1UjVdhcbLhMWDbzoYqbrkqh+R4im3KnYw5n6pWSSdoWioYhA== 200 | dependencies: 201 | "@reflect-ui/uiutils" "^0.1.2-1" 202 | 203 | "@reflect-ui/font-utils@^0.0.1": 204 | version "0.0.1" 205 | resolved "https://registry.yarnpkg.com/@reflect-ui/font-utils/-/font-utils-0.0.1.tgz#fc22d21d90dc896dec96fcacaf8d584a30fb0642" 206 | integrity sha512-WglAO5z4E4upRx7kG3sn2uxG6jf0Ce3rc0WWZfYY9eyHrkm29dPc80JwHzxEAwbCjTr4iayF+ggNgbcGLAE2Tw== 207 | 208 | "@reflect-ui/font-utils@^0.0.5": 209 | version "0.0.5" 210 | resolved "https://registry.yarnpkg.com/@reflect-ui/font-utils/-/font-utils-0.0.5.tgz#288bb2d41e0cb5d2f054b2104ff842d35f0bb223" 211 | integrity sha512-juO3SlP/J7xzpxz09kS0remIvcSIR0MrcnSflKV74WQBmR2XSeKVh6JjQrJ+5bmt+jTUlvpovKHyaWLX2luHPA== 212 | 213 | "@reflect-ui/uiutils@0.1.2-1": 214 | version "0.1.2-1" 215 | resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2-1.tgz#b88d08223eb19ab5e6dd5ecf4a03075a41bb89c1" 216 | integrity sha512-fv3mITNqM6U7DEpOr5B6c9lmmkj22r3114aR8Tvp2izMIndLbFJBzLnYEVA07bHiglic1POWCePwYVhB+bAF1Q== 217 | 218 | "@reflect-ui/uiutils@^0.1.2-1": 219 | version "0.1.2-2" 220 | resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2-2.tgz#56b80dd920be63d424cbb0478223e50acb95a50d" 221 | integrity sha512-PGmoG2zP34P8+JeXawY4kogmaGeP0kaWnHsOxxbl+p2v1TeD8ORR9VW9boNn0knldJb9+63W6v5lpB1N4icwnA== 222 | 223 | "@swc/helpers@0.4.14": 224 | version "0.4.14" 225 | resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" 226 | integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== 227 | dependencies: 228 | tslib "^2.4.0" 229 | 230 | "@types/glob@^8.0.1": 231 | version "8.0.1" 232 | resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.0.1.tgz#6e3041640148b7764adf21ce5c7138ad454725b0" 233 | integrity sha512-8bVUjXZvJacUFkJXHdyZ9iH1Eaj5V7I8c4NdH5sQJsdXkqT4CA5Dhb4yb4VE/3asyx4L9ayZr1NIhTsWHczmMw== 234 | dependencies: 235 | "@types/minimatch" "^5.1.2" 236 | "@types/node" "*" 237 | 238 | "@types/minimatch@^5.1.2": 239 | version "5.1.2" 240 | resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca" 241 | integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA== 242 | 243 | "@types/node@*", "@types/node@^18.6.1": 244 | version "18.13.0" 245 | resolved "https://registry.yarnpkg.com/@types/node/-/node-18.13.0.tgz#0400d1e6ce87e9d3032c19eb6c58205b0d3f7850" 246 | integrity sha512-gC3TazRzGoOnoKAhUx+Q0t8S9Tzs74z7m0ipwGpSqQrleP14hKxP4/JUeEQcD3W1/aIpnWl8pHowI7WokuZpXg== 247 | 248 | "@types/prop-types@*": 249 | version "15.7.5" 250 | resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" 251 | integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== 252 | 253 | "@types/react@^18.0.28": 254 | version "18.0.28" 255 | resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.28.tgz#accaeb8b86f4908057ad629a26635fe641480065" 256 | integrity sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew== 257 | dependencies: 258 | "@types/prop-types" "*" 259 | "@types/scheduler" "*" 260 | csstype "^3.0.2" 261 | 262 | "@types/scheduler@*": 263 | version "0.16.2" 264 | resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" 265 | integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== 266 | 267 | asynckit@^0.4.0: 268 | version "0.4.0" 269 | resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" 270 | integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== 271 | 272 | axios@^0.21.0: 273 | version "0.21.4" 274 | resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575" 275 | integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg== 276 | dependencies: 277 | follow-redirects "^1.14.0" 278 | 279 | axios@^1.3.3: 280 | version "1.3.3" 281 | resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.3.tgz#e7011384ba839b885007c9c9fae1ff23dceb295b" 282 | integrity sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA== 283 | dependencies: 284 | follow-redirects "^1.15.0" 285 | form-data "^4.0.0" 286 | proxy-from-env "^1.1.0" 287 | 288 | balanced-match@^1.0.0: 289 | version "1.0.2" 290 | resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" 291 | integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== 292 | 293 | brace-expansion@^2.0.1: 294 | version "2.0.1" 295 | resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae" 296 | integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA== 297 | dependencies: 298 | balanced-match "^1.0.0" 299 | 300 | caniuse-lite@^1.0.30001406: 301 | version "1.0.30001452" 302 | resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001452.tgz#dff7b8bb834b3a91808f0a9ff0453abb1fbba02a" 303 | integrity sha512-Lkp0vFjMkBB3GTpLR8zk4NwW5EdRdnitwYJHDOOKIU85x4ckYCPQ+9WlVvSVClHxVReefkUMtWZH2l9KGlD51w== 304 | 305 | client-only@0.0.1: 306 | version "0.0.1" 307 | resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" 308 | integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== 309 | 310 | combined-stream@^1.0.8: 311 | version "1.0.8" 312 | resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" 313 | integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== 314 | dependencies: 315 | delayed-stream "~1.0.0" 316 | 317 | csstype@^3.0.2: 318 | version "3.1.1" 319 | resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" 320 | integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== 321 | 322 | delayed-stream@~1.0.0: 323 | version "1.0.0" 324 | resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" 325 | integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== 326 | 327 | follow-redirects@^1.14.0, follow-redirects@^1.15.0: 328 | version "1.15.2" 329 | resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" 330 | integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== 331 | 332 | form-data@^3.0.0: 333 | version "3.0.1" 334 | resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f" 335 | integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg== 336 | dependencies: 337 | asynckit "^0.4.0" 338 | combined-stream "^1.0.8" 339 | mime-types "^2.1.12" 340 | 341 | form-data@^4.0.0: 342 | version "4.0.0" 343 | resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" 344 | integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== 345 | dependencies: 346 | asynckit "^0.4.0" 347 | combined-stream "^1.0.8" 348 | mime-types "^2.1.12" 349 | 350 | fs.realpath@^1.0.0: 351 | version "1.0.0" 352 | resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" 353 | integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== 354 | 355 | glob@^8.1.0: 356 | version "8.1.0" 357 | resolved "https://registry.yarnpkg.com/glob/-/glob-8.1.0.tgz#d388f656593ef708ee3e34640fdfb99a9fd1c33e" 358 | integrity sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ== 359 | dependencies: 360 | fs.realpath "^1.0.0" 361 | inflight "^1.0.4" 362 | inherits "2" 363 | minimatch "^5.0.1" 364 | once "^1.3.0" 365 | 366 | inflight@^1.0.4: 367 | version "1.0.6" 368 | resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" 369 | integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA== 370 | dependencies: 371 | once "^1.3.0" 372 | wrappy "1" 373 | 374 | inherits@2: 375 | version "2.0.4" 376 | resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c" 377 | integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== 378 | 379 | "js-tokens@^3.0.0 || ^4.0.0": 380 | version "4.0.0" 381 | resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" 382 | integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== 383 | 384 | loose-envify@^1.1.0: 385 | version "1.4.0" 386 | resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" 387 | integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== 388 | dependencies: 389 | js-tokens "^3.0.0 || ^4.0.0" 390 | 391 | mime-db@1.52.0: 392 | version "1.52.0" 393 | resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" 394 | integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== 395 | 396 | mime-types@^2.1.12: 397 | version "2.1.35" 398 | resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" 399 | integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== 400 | dependencies: 401 | mime-db "1.52.0" 402 | 403 | minimatch@^5.0.1: 404 | version "5.1.6" 405 | resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96" 406 | integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g== 407 | dependencies: 408 | brace-expansion "^2.0.1" 409 | 410 | nanoid@^3.3.4: 411 | version "3.3.4" 412 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" 413 | integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== 414 | 415 | next@^13.1.6: 416 | version "13.1.6" 417 | resolved "https://registry.yarnpkg.com/next/-/next-13.1.6.tgz#054babe20b601f21f682f197063c9b0b32f1a27c" 418 | integrity sha512-hHlbhKPj9pW+Cymvfzc15lvhaOZ54l+8sXDXJWm3OBNBzgrVj6hwGPmqqsXg40xO1Leq+kXpllzRPuncpC0Phw== 419 | dependencies: 420 | "@next/env" "13.1.6" 421 | "@swc/helpers" "0.4.14" 422 | caniuse-lite "^1.0.30001406" 423 | postcss "8.4.14" 424 | styled-jsx "5.1.1" 425 | optionalDependencies: 426 | "@next/swc-android-arm-eabi" "13.1.6" 427 | "@next/swc-android-arm64" "13.1.6" 428 | "@next/swc-darwin-arm64" "13.1.6" 429 | "@next/swc-darwin-x64" "13.1.6" 430 | "@next/swc-freebsd-x64" "13.1.6" 431 | "@next/swc-linux-arm-gnueabihf" "13.1.6" 432 | "@next/swc-linux-arm64-gnu" "13.1.6" 433 | "@next/swc-linux-arm64-musl" "13.1.6" 434 | "@next/swc-linux-x64-gnu" "13.1.6" 435 | "@next/swc-linux-x64-musl" "13.1.6" 436 | "@next/swc-win32-arm64-msvc" "13.1.6" 437 | "@next/swc-win32-ia32-msvc" "13.1.6" 438 | "@next/swc-win32-x64-msvc" "13.1.6" 439 | 440 | once@^1.3.0: 441 | version "1.4.0" 442 | resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" 443 | integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w== 444 | dependencies: 445 | wrappy "1" 446 | 447 | picocolors@^1.0.0: 448 | version "1.0.0" 449 | resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" 450 | integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== 451 | 452 | postcss@8.4.14: 453 | version "8.4.14" 454 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" 455 | integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig== 456 | dependencies: 457 | nanoid "^3.3.4" 458 | picocolors "^1.0.0" 459 | source-map-js "^1.0.2" 460 | 461 | proxy-from-env@^1.1.0: 462 | version "1.1.0" 463 | resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" 464 | integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== 465 | 466 | react-dom@^18.2.0: 467 | version "18.2.0" 468 | resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" 469 | integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== 470 | dependencies: 471 | loose-envify "^1.1.0" 472 | scheduler "^0.23.0" 473 | 474 | react@^18.2.0: 475 | version "18.2.0" 476 | resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" 477 | integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== 478 | dependencies: 479 | loose-envify "^1.1.0" 480 | 481 | scheduler@^0.23.0: 482 | version "0.23.0" 483 | resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" 484 | integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== 485 | dependencies: 486 | loose-envify "^1.1.0" 487 | 488 | source-map-js@^1.0.2: 489 | version "1.0.2" 490 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" 491 | integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== 492 | 493 | styled-jsx@5.1.1: 494 | version "5.1.1" 495 | resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f" 496 | integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw== 497 | dependencies: 498 | client-only "0.0.1" 499 | 500 | tslib@^2.4.0: 501 | version "2.5.0" 502 | resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" 503 | integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== 504 | 505 | typescript@^4.9.5: 506 | version "4.9.5" 507 | resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" 508 | integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== 509 | 510 | wrappy@1: 511 | version "1.0.2" 512 | resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" 513 | integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ== 514 | --------------------------------------------------------------------------------