kyotodevIndie

import { ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs))
}

kyotodevIndie

import { useEffect, useState } from "react";
import { getColorsTokens } from "./Services/getColorsTokens";

function App() {
  const [colors, setColors] = useState([]);
  
  const figmaApiUrl = 'https://api.figma.com/v1/files'
  const figmaFileId = 'LxT5nKEUgzhGZAXt8d9nvc'
  const figmaPersonalToken = import.meta.env.VITE_FIGMA_SECRET_ID
  

kyotodevIndie

const excludeValues = [
  'Title',
  'Description'
]

export const getColorsTokens = (colors) => {
  const colorsTokens = [];

  colors.children.map((colorItem) => {
    if (!excludeValues.includes(colorItem.name)) {

kyotodevIndie

import { useEffect } from "react";

function App() {
  const figmaApiUrl = 'https://api.figma.com/v1/files'
  const figmaFileId = 'LxT5nKEUgzhGZAXt8d9nvc'
  const figmaPersonalToken = import.meta.env.VITE_FIGMA_SECRET_ID
  useEffect(() => {
    const getFigmaData = async () => {
      const res = await fetch(
        `${figmaApiUrl}/${figmaFileId}`,

kyotodevIndie

{
  "name":"Horizon",
  "cursorColor":"#E95678",
  "selectionBackground":"#FDF0ED",
  "background":"#1C1E26",
  "foreground":"#D5D8DA",
  "black":"#16161C",
  "white":"#CCCCCC",
  "blue":"#26BBD9",
  "cyan":"#59E3E3",

kyotodevIndie

const randomColor = () => '#'+(Math.random()*0xFFFFFF<<0).toString(16);

kyotodevIndie

import { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

class ReactDraftWysiwyg extends Component {
	state = {

kyotodevIndie

//Utilizado para quando se tem algo especifico que é muito grande(como uma lib de terceiros) e não é preciso carregar no projeto todo
//só usar em casos estremos!!!

import React from 'react';
const Contato = React.lazy(() => import('./Contato'));

const App = () => {
  const [ativar, setAtivar] = React.useState(false);

  return (

kyotodevIndie

  const [produtos, setProdutos] = React.useState(null);

  React.useEffect(() => {
    fetch("https://ranekapi.origamid.dev/json/api/produto")
      .then((r) => r.json())
      .then((json) => setProdutos(json));
  }, []);

kyotodevIndie

  const [produto, setProduto] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const { id } = useParams();

React.useEffect(() => {
    async function fetchProduto(url) {
      try {
        setLoading(true);
        const response = await fetch(url);