letalkui 0.0.6 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var U=Object.create;var m=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var K=(o,t)=>{for(var r in t)m(o,r,{get:t[r],enumerable:!0})},V=(o,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of $(t))!q.call(o,e)&&e!==r&&m(o,e,{get:()=>t[e],enumerable:!(n=_(t,e))||n.enumerable});return o};var Q=(o,t,r)=>(r=o!=null?U(W(o)):{},V(t||!o||!o.__esModule?m(r,"default",{value:o,enumerable:!0}):r,o)),X=o=>V(m({},"__esModule",{value:!0}),o);var ro={};K(ro,{Button:()=>Y,JsonEditor:()=>oo,JsonView:()=>to});module.exports=X(ro);var C=require("react/jsx-runtime"),Y=o=>{let{backgroundColor:t,label:r,size:n,primary:e}=o,i=e?"storybook-button--primary":"storybook-button--secondary";return(0,C.jsx)("button",{type:"button",className:["storybook-button",`storybook-button--${n}`,i].join(""),style:{backgroundColor:t},...o,children:r})};var J=require("react");var A=require("@mui/material"),S=require("react/jsx-runtime"),x=o=>(0,S.jsx)(A.Grid2,{container:!0,direction:"column",spacing:2,children:o.children});var f=require("@mui/material"),g=require("react/jsx-runtime"),T=o=>{let{onSave:t,loading:r}=o;return(0,g.jsx)(f.Button,{onClick:()=>{t()},color:"primary",variant:"contained",disableElevation:!0,disabled:r,endIcon:r&&(0,g.jsx)(f.CircularProgress,{size:20,color:"inherit"}),children:"Salvar"})};var y=require("@mui/material"),b=require("react/jsx-runtime"),w=o=>(0,b.jsx)(y.Grid2,{container:!0,justify:"flex-end",children:(0,b.jsx)(y.Grid2,{item:!0,children:o.children})});var E=Q(require("react-ace"),1),p=require("@mui/material"),c=require("react/jsx-runtime"),Z="json-editor",B=o=>{let{value:t,onChange:r,currentError:n,currentHelperText:e,...i}=o,s=JSON.stringify(t,null,2);return(0,c.jsxs)(p.Grid2,{children:[(0,c.jsx)(p.FormControl,{error:n,fullWidth:!0,children:(0,c.jsx)(E.default,{...i,name:Z,value:s,wrapEnabled:!0,mode:"json",theme:"textmate",onChange:r,fontSize:16,showPrintMargin:!0,showGutter:!0,highlightActiveLine:!0,editorProps:{$blockScrolling:!0},setOptions:{showLineNumbers:!0,tabSize:2}})}),e&&(0,c.jsx)(p.FormHelperText,{error:n,children:e})]})};var a={Root:x,ActionButton:T,ActionsButtons:w,Content:B};var F=require("react"),j=()=>{let[o,t]=(0,F.useState)({});return{addValidation:i=>{t(s=>({...s,...i}))},clearValidation:i=>{i in o&&t(s=>{let d={...s};return delete d[i],d})},clearAllValidations:()=>{t({})},validation:o}},N=j;var u=require("react/jsx-runtime"),v="json-editor",oo=o=>{let{value:t,onChange:r,onSave:n,helperText:e,error:i,...s}=o,{addValidation:d,clearValidation:O,validation:h}=N(),k=JSON.stringify(t,null,2),[G,I]=(0,J.useState)(k),[H,R]=(0,J.useState)(!1),z=()=>v in h&&i||!1,D=()=>v in h&&e||"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.",L=l=>{O(v),I(l),r?.(l)},M=async()=>{if(R(!0),n)try{let l=JSON.parse(G);await n(l)}catch(l){d({[v]:l})}R(!1)};return(0,u.jsxs)(a.Root,{children:[(0,u.jsx)(a.Content,{...s,value:t,onChange:L,currentError:z(),currentHelperText:D()}),(0,u.jsx)(a.ActionsButtons,{children:(0,u.jsx)(a.ActionButton,{onSave:M,loading:H})})]})};var P=require("react/jsx-runtime"),to=o=>{let{value:t,...r}=o;return(0,P.jsx)(a.Root,{children:(0,P.jsx)(a.Content,{...r,value:t})})};0&&(module.exports={Button,JsonEditor,JsonView});
2
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/components/Button/index.tsx","../src/components/JsonEditor/index.tsx","../src/componentPatterns/JsonForm/Root.tsx","../src/componentPatterns/JsonForm/ActionButton.tsx","../src/componentPatterns/JsonForm/ActionsButtons.tsx","../src/componentPatterns/JsonForm/Content.tsx","../src/componentPatterns/JsonForm/index.ts","../src/hooks/useValidation.tsx","../src/components/JsonView/index.tsx"],"sourcesContent":["export * from \"@/components/Button\"\nexport * from \"@/components/JsonEditor\"\nexport * from \"@/components/JsonView\"\n","import React from \"react\"\n\nexport interface ButtonProps {\n\tprimary?: boolean\n\tbackgroundColor?: string\n\tsize?: \"small\" | \"medium\" | \"large\"\n\tlabel: string\n\tonClick?: () => void\n}\n\nexport const Button = (props: ButtonProps) => {\n\tconst {\n\t\tbackgroundColor,\n\t\tlabel,\n\t\tsize,\n\t\tprimary\n\t} = props\n\n\tconst mode = primary ? \"storybook-button--primary\" : \"storybook-button--secondary\"\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={[\"storybook-button\", `storybook-button--${size}`, mode].join(\"\")}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}\n","import React, { useState } from \"react\"\nimport { IAceEditorProps } from \"react-ace\"\n\nimport { JsonForm } from \"@/componentPatterns/JsonForm\"\nimport {\n\tJsonValue,\n\tOverwrite\n} from \"@/componentPatterns/JsonForm/Content\"\n\nimport useValidation from \"@/hooks/useValidation\"\n\ntype JsonEditorProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n\tonChange?: (value: string) => void\n\tonSave?: (value: JsonValue) => Promise<JsonValue>\n\thelperText?: string\n\terror?: boolean\n}>\n\nconst INPUT_NAME = \"json-editor\"\n\nexport const JsonEditor: React.FC<JsonEditorProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tonSave,\n\t\thelperText,\n\t\terror,\n\t\t...rest\n\t} = props\n\n\tconst { addValidation, clearValidation, validation } = useValidation()\n\n\tconst stringifyValue = JSON.stringify(value, null, 2)\n\n\tconst [jsonData, setJsonData] = useState<string>(stringifyValue)\n\tconst [loadingSaveJson, setLoadingSaveJson] = useState<boolean>(false)\n\n\tconst currentError = (): boolean => {\n\t\tif (INPUT_NAME in validation) {\n\t\t\tif (error) return error\n\n\t\t\treturn false\n\t\t} else {\n\t\t\treturn false\n\t\t}\n\t}\n\n\tconst currentHelperText = (): string => {\n\t\tif (INPUT_NAME in validation) {\n\t\t\tif (helperText) return helperText\n\n\t\t\treturn \"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.\"\n\t\t}\n\n\t\treturn \"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.\"\n\t}\n\n\tconst handleChange = (newValue: string) => {\n\t\tclearValidation(INPUT_NAME)\n\n\t\tsetJsonData(newValue)\n\n\t\tonChange?.(newValue)\n\t}\n\n\tconst handleSave = async () => {\n\t\tsetLoadingSaveJson(true)\n\n\t\tif (onSave) {\n\t\t\ttry {\n\t\t\t\tconst parseJsonData = JSON.parse(jsonData)\n\n\t\t\t\tawait onSave(parseJsonData)\n\t\t\t} catch (error) {\n\t\t\t\taddValidation({ [INPUT_NAME]: error })\n\t\t\t}\n\t\t}\n\n\t\tsetLoadingSaveJson(false)\n\t}\n\n\treturn (\n\t\t<JsonForm.Root>\n\t\t\t<JsonForm.Content\n\t\t\t\t{...rest}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tcurrentError={currentError()}\n\t\t\t\tcurrentHelperText={currentHelperText()}\n\t\t\t/>\n\n\t\t\t<JsonForm.ActionsButtons>\n\t\t\t\t<JsonForm.ActionButton\n\t\t\t\t\tonSave={handleSave}\n\t\t\t\t\tloading={loadingSaveJson}\n\t\t\t\t/>\n\t\t\t</JsonForm.ActionsButtons>\n\t\t</JsonForm.Root>\n\t)\n}\n","import React from \"react\"\n\nimport {\n\tGrid2 as Grid\n} from \"@mui/material\"\n\ntype RootProps = {\n\tchildren: React.ReactNode\n}\n\nexport const Root: React.FC<RootProps> = (props) => {\n\treturn (\n\t\t<Grid\n\t\t\tcontainer\n\t\t\tdirection=\"column\"\n\t\t\tspacing={2}\n\t\t>\n\t\t\t{props.children}\n\t\t</Grid>\n\t)\n}\n","import React from \"react\"\n\nimport {\n\tButton,\n\tCircularProgress\n} from \"@mui/material\"\n\ntype ActionButtonProps = {\n\tonSave: () => void\n\tloading: boolean\n}\n\nexport const ActionButton: React.FC<ActionButtonProps> = (props) => {\n\tconst {\n\t\tonSave,\n\t\tloading\n\t} = props\n\n\tconst handleSave = () => {\n\t\tonSave()\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={handleSave}\n\t\t\tcolor=\"primary\"\n\t\t\tvariant=\"contained\"\n\t\t\tdisableElevation\n\t\t\tdisabled={loading}\n\t\t\tendIcon={loading && <CircularProgress size={20} color=\"inherit\" />}\n\t\t>\n\t\t\tSalvar\n\t\t</Button>\n\t)\n}\n","import React from \"react\"\nimport {\n\tGrid2 as Grid\n} from \"@mui/material\"\n\ntype ActionsButtonsProps = {\n\tchildren: React.ReactNode\n}\n\nexport const ActionsButtons: React.FC<ActionsButtonsProps> = (props) => {\n\treturn (\n\t\t<Grid\n\t\t\tcontainer\n\t\t\tjustify=\"flex-end\"\n\t\t>\n\t\t\t<Grid\n\t\t\t\titem\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</Grid>\n\t\t</Grid>\n\t)\n}\n","import React from \"react\"\nimport AceEditor, { IAceEditorProps } from \"react-ace\"\nimport {\n\tFormControl,\n\tFormHelperText,\n\tGrid2 as Grid\n} from \"@mui/material\"\n\nexport type JsonValue = Record<string | number, unknown>\n\nexport type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;\n\nexport type ContentProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n\tonChange?: (updatedJson: string) => void\n\tcurrentError?: boolean\n\tcurrentHelperText?: string\n}>\n\nconst INPUT_NAME = \"json-editor\"\n\nexport const Content: React.FC<ContentProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tcurrentError,\n\t\tcurrentHelperText,\n\t\t...rest\n\t} = props\n\n\tconst stringifyValue = JSON.stringify(value, null, 2)\n\n\treturn (\n\t\t<Grid>\n\t\t\t<FormControl\n\t\t\t\terror={currentError}\n\t\t\t\tfullWidth\n\t\t\t>\n\t\t\t\t<AceEditor\n\t\t\t\t\t{...rest}\n\t\t\t\t\tname={INPUT_NAME}\n\t\t\t\t\tvalue={stringifyValue}\n\t\t\t\t\twrapEnabled={true}\n\t\t\t\t\tmode=\"json\"\n\t\t\t\t\ttheme=\"textmate\"\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tfontSize={16}\n\t\t\t\t\tshowPrintMargin={true}\n\t\t\t\t\tshowGutter={true}\n\t\t\t\t\thighlightActiveLine={true}\n\t\t\t\t\teditorProps={{ $blockScrolling: true }}\n\t\t\t\t\tsetOptions={{\n\t\t\t\t\t\tshowLineNumbers: true,\n\t\t\t\t\t\ttabSize: 2\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FormControl>\n\t\t\t{currentHelperText && (\n\t\t\t\t<FormHelperText\n\t\t\t\t\terror={currentError}\n\t\t\t\t>\n\t\t\t\t\t{currentHelperText}\n\t\t\t\t</FormHelperText>\n\t\t\t)}\n\t\t</Grid>\n\t)\n}\n","import { Root } from \"@/componentPatterns/JsonForm/Root\"\nimport { ActionButton } from \"@/componentPatterns/JsonForm/ActionButton\"\nimport { ActionsButtons } from \"@/componentPatterns/JsonForm/ActionsButtons\"\nimport { Content } from \"@/componentPatterns/JsonForm/Content\"\n\nexport const JsonForm = {\n\tRoot,\n\tActionButton,\n\tActionsButtons,\n\tContent\n}\n","import { useState } from \"react\"\n\nexport type ValidationType = Record<string, unknown>\n\nconst useValidation = () => {\n\tconst [validation, setValidation] = useState<ValidationType>({})\n\n\tconst addValidation = (newValidation: ValidationType) => {\n\t\tsetValidation((lastValidation) => ({\n\t\t\t...lastValidation,\n\t\t\t...newValidation\n\t\t}))\n\t}\n\n\tconst clearValidation = (key: string) => {\n\t\tif (key in validation) {\n\t\t\tsetValidation((lastValidation) => {\n\t\t\t\tconst updatedData: ValidationType = { ...lastValidation }\n\n\t\t\t\tdelete updatedData[key]\n\n\t\t\t\treturn updatedData\n\t\t\t})\n\t\t}\n\t}\n\n\tconst clearAllValidations = () => {\n\t\tsetValidation({})\n\t}\n\n\treturn {\n\t\taddValidation,\n\t\tclearValidation,\n\t\tclearAllValidations,\n\t\tvalidation\n\t}\n}\n\nexport default useValidation\n","import React from \"react\"\nimport { IAceEditorProps } from \"react-ace\"\n\nimport { JsonForm } from \"@/componentPatterns/JsonForm\"\n\nimport {\n\tJsonValue,\n\tOverwrite\n} from \"@/componentPatterns/JsonForm/Content\"\n\ntype JsonViewProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n}>\n\nexport const JsonView: React.FC<JsonViewProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\t...rest\n\t} = props\n\n\treturn (\n\t\t<JsonForm.Root>\n\t\t\t<JsonForm.Content\n\t\t\t\t{...rest}\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t</JsonForm.Root>\n\t)\n}\n"],"mappings":"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","names":["index_exports","__export","Button","JsonEditor","JsonView","__toCommonJS","import_jsx_runtime","Button","props","backgroundColor","label","size","primary","mode","import_react","import_material","import_jsx_runtime","Root","props","Grid","import_material","import_jsx_runtime","ActionButton","props","onSave","loading","import_material","import_jsx_runtime","ActionsButtons","props","Grid","import_react_ace","import_material","import_jsx_runtime","INPUT_NAME","Content","props","value","onChange","currentError","currentHelperText","rest","stringifyValue","Grid","AceEditor","JsonForm","Root","ActionButton","ActionsButtons","Content","import_react","useValidation","validation","setValidation","newValidation","lastValidation","key","updatedData","useValidation_default","import_jsx_runtime","INPUT_NAME","JsonEditor","props","value","onChange","onSave","helperText","error","rest","addValidation","clearValidation","validation","useValidation_default","stringifyValue","jsonData","setJsonData","loadingSaveJson","setLoadingSaveJson","currentError","currentHelperText","handleChange","newValue","handleSave","parseJsonData","JsonForm","import_jsx_runtime","JsonView","props","value","rest","JsonForm"]}
@@ -0,0 +1,31 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+ import { IAceEditorProps } from 'react-ace';
4
+
5
+ interface ButtonProps {
6
+ primary?: boolean;
7
+ backgroundColor?: string;
8
+ size?: "small" | "medium" | "large";
9
+ label: string;
10
+ onClick?: () => void;
11
+ }
12
+ declare const Button: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
13
+
14
+ type JsonValue = Record<string | number, unknown>;
15
+ type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;
16
+
17
+ type JsonEditorProps = Overwrite<IAceEditorProps, {
18
+ value?: JsonValue | null;
19
+ onChange?: (value: string) => void;
20
+ onSave?: (value: JsonValue) => Promise<JsonValue>;
21
+ helperText?: string;
22
+ error?: boolean;
23
+ }>;
24
+ declare const JsonEditor: React.FC<JsonEditorProps>;
25
+
26
+ type JsonViewProps = Overwrite<IAceEditorProps, {
27
+ value?: JsonValue | null;
28
+ }>;
29
+ declare const JsonView: React.FC<JsonViewProps>;
30
+
31
+ export { Button, type ButtonProps, JsonEditor, JsonView };
@@ -0,0 +1,31 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import React from 'react';
3
+ import { IAceEditorProps } from 'react-ace';
4
+
5
+ interface ButtonProps {
6
+ primary?: boolean;
7
+ backgroundColor?: string;
8
+ size?: "small" | "medium" | "large";
9
+ label: string;
10
+ onClick?: () => void;
11
+ }
12
+ declare const Button: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
13
+
14
+ type JsonValue = Record<string | number, unknown>;
15
+ type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;
16
+
17
+ type JsonEditorProps = Overwrite<IAceEditorProps, {
18
+ value?: JsonValue | null;
19
+ onChange?: (value: string) => void;
20
+ onSave?: (value: JsonValue) => Promise<JsonValue>;
21
+ helperText?: string;
22
+ error?: boolean;
23
+ }>;
24
+ declare const JsonEditor: React.FC<JsonEditorProps>;
25
+
26
+ type JsonViewProps = Overwrite<IAceEditorProps, {
27
+ value?: JsonValue | null;
28
+ }>;
29
+ declare const JsonView: React.FC<JsonViewProps>;
30
+
31
+ export { Button, type ButtonProps, JsonEditor, JsonView };
package/dist/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import{jsx as O}from"react/jsx-runtime";var K=o=>{let{backgroundColor:t,label:r,size:n,primary:i}=o,e=i?"storybook-button--primary":"storybook-button--secondary";return O("button",{type:"button",className:["storybook-button",`storybook-button--${n}`,e].join(""),style:{backgroundColor:t},...o,children:r})};import{useState as V}from"react";import{Grid2 as k}from"@mui/material";import{jsx as G}from"react/jsx-runtime";var v=o=>G(k,{container:!0,direction:"column",spacing:2,children:o.children});import{Button as I,CircularProgress as H}from"@mui/material";import{jsx as g}from"react/jsx-runtime";var y=o=>{let{onSave:t,loading:r}=o;return g(I,{onClick:()=>{t()},color:"primary",variant:"contained",disableElevation:!0,disabled:r,endIcon:r&&g(H,{size:20,color:"inherit"}),children:"Salvar"})};import{Grid2 as b}from"@mui/material";import{jsx as J}from"react/jsx-runtime";var P=o=>J(b,{container:!0,justify:"flex-end",children:J(b,{item:!0,children:o.children})});import z from"react-ace";import{FormControl as D,FormHelperText as L,Grid2 as M}from"@mui/material";import{jsx as u,jsxs as _}from"react/jsx-runtime";var U="json-editor",h=o=>{let{value:t,onChange:r,currentError:n,currentHelperText:i,...e}=o,s=JSON.stringify(t,null,2);return _(M,{children:[u(D,{error:n,fullWidth:!0,children:u(z,{...e,name:U,value:s,wrapEnabled:!0,mode:"json",theme:"textmate",onChange:r,fontSize:16,showPrintMargin:!0,showGutter:!0,highlightActiveLine:!0,editorProps:{$blockScrolling:!0},setOptions:{showLineNumbers:!0,tabSize:2}})}),i&&u(L,{error:n,children:i})]})};var a={Root:v,ActionButton:y,ActionsButtons:P,Content:h};import{useState as $}from"react";var W=()=>{let[o,t]=$({});return{addValidation:e=>{t(s=>({...s,...e}))},clearValidation:e=>{e in o&&t(s=>{let c={...s};return delete c[e],c})},clearAllValidations:()=>{t({})},validation:o}},R=W;import{jsx as d,jsxs as q}from"react/jsx-runtime";var p="json-editor",Vo=o=>{let{value:t,onChange:r,onSave:n,helperText:i,error:e,...s}=o,{addValidation:c,clearValidation:A,validation:m}=R(),x=JSON.stringify(t,null,2),[S,T]=V(x),[w,f]=V(!1),E=()=>p in m&&e||!1,B=()=>p in m&&i||"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.",F=l=>{A(p),T(l),r?.(l)},N=async()=>{if(f(!0),n)try{let l=JSON.parse(S);await n(l)}catch(l){c({[p]:l})}f(!1)};return q(a.Root,{children:[d(a.Content,{...s,value:t,onChange:F,currentError:E(),currentHelperText:B()}),d(a.ActionsButtons,{children:d(a.ActionButton,{onSave:N,loading:w})})]})};import{jsx as C}from"react/jsx-runtime";var So=o=>{let{value:t,...r}=o;return C(a.Root,{children:C(a.Content,{...r,value:t})})};export{K as Button,Vo as JsonEditor,So as JsonView};
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Button/index.tsx","../src/components/JsonEditor/index.tsx","../src/componentPatterns/JsonForm/Root.tsx","../src/componentPatterns/JsonForm/ActionButton.tsx","../src/componentPatterns/JsonForm/ActionsButtons.tsx","../src/componentPatterns/JsonForm/Content.tsx","../src/componentPatterns/JsonForm/index.ts","../src/hooks/useValidation.tsx","../src/components/JsonView/index.tsx"],"sourcesContent":["import React from \"react\"\n\nexport interface ButtonProps {\n\tprimary?: boolean\n\tbackgroundColor?: string\n\tsize?: \"small\" | \"medium\" | \"large\"\n\tlabel: string\n\tonClick?: () => void\n}\n\nexport const Button = (props: ButtonProps) => {\n\tconst {\n\t\tbackgroundColor,\n\t\tlabel,\n\t\tsize,\n\t\tprimary\n\t} = props\n\n\tconst mode = primary ? \"storybook-button--primary\" : \"storybook-button--secondary\"\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclassName={[\"storybook-button\", `storybook-button--${size}`, mode].join(\"\")}\n\t\t\tstyle={{ backgroundColor }}\n\t\t\t{...props}\n\t\t>\n\t\t\t{label}\n\t\t</button>\n\t)\n}\n","import React, { useState } from \"react\"\nimport { IAceEditorProps } from \"react-ace\"\n\nimport { JsonForm } from \"@/componentPatterns/JsonForm\"\nimport {\n\tJsonValue,\n\tOverwrite\n} from \"@/componentPatterns/JsonForm/Content\"\n\nimport useValidation from \"@/hooks/useValidation\"\n\ntype JsonEditorProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n\tonChange?: (value: string) => void\n\tonSave?: (value: JsonValue) => Promise<JsonValue>\n\thelperText?: string\n\terror?: boolean\n}>\n\nconst INPUT_NAME = \"json-editor\"\n\nexport const JsonEditor: React.FC<JsonEditorProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tonSave,\n\t\thelperText,\n\t\terror,\n\t\t...rest\n\t} = props\n\n\tconst { addValidation, clearValidation, validation } = useValidation()\n\n\tconst stringifyValue = JSON.stringify(value, null, 2)\n\n\tconst [jsonData, setJsonData] = useState<string>(stringifyValue)\n\tconst [loadingSaveJson, setLoadingSaveJson] = useState<boolean>(false)\n\n\tconst currentError = (): boolean => {\n\t\tif (INPUT_NAME in validation) {\n\t\t\tif (error) return error\n\n\t\t\treturn false\n\t\t} else {\n\t\t\treturn false\n\t\t}\n\t}\n\n\tconst currentHelperText = (): string => {\n\t\tif (INPUT_NAME in validation) {\n\t\t\tif (helperText) return helperText\n\n\t\t\treturn \"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.\"\n\t\t}\n\n\t\treturn \"Ocorreu um erro inesperado. Por favor, tente novamente mais tarde.\"\n\t}\n\n\tconst handleChange = (newValue: string) => {\n\t\tclearValidation(INPUT_NAME)\n\n\t\tsetJsonData(newValue)\n\n\t\tonChange?.(newValue)\n\t}\n\n\tconst handleSave = async () => {\n\t\tsetLoadingSaveJson(true)\n\n\t\tif (onSave) {\n\t\t\ttry {\n\t\t\t\tconst parseJsonData = JSON.parse(jsonData)\n\n\t\t\t\tawait onSave(parseJsonData)\n\t\t\t} catch (error) {\n\t\t\t\taddValidation({ [INPUT_NAME]: error })\n\t\t\t}\n\t\t}\n\n\t\tsetLoadingSaveJson(false)\n\t}\n\n\treturn (\n\t\t<JsonForm.Root>\n\t\t\t<JsonForm.Content\n\t\t\t\t{...rest}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={handleChange}\n\t\t\t\tcurrentError={currentError()}\n\t\t\t\tcurrentHelperText={currentHelperText()}\n\t\t\t/>\n\n\t\t\t<JsonForm.ActionsButtons>\n\t\t\t\t<JsonForm.ActionButton\n\t\t\t\t\tonSave={handleSave}\n\t\t\t\t\tloading={loadingSaveJson}\n\t\t\t\t/>\n\t\t\t</JsonForm.ActionsButtons>\n\t\t</JsonForm.Root>\n\t)\n}\n","import React from \"react\"\n\nimport {\n\tGrid2 as Grid\n} from \"@mui/material\"\n\ntype RootProps = {\n\tchildren: React.ReactNode\n}\n\nexport const Root: React.FC<RootProps> = (props) => {\n\treturn (\n\t\t<Grid\n\t\t\tcontainer\n\t\t\tdirection=\"column\"\n\t\t\tspacing={2}\n\t\t>\n\t\t\t{props.children}\n\t\t</Grid>\n\t)\n}\n","import React from \"react\"\n\nimport {\n\tButton,\n\tCircularProgress\n} from \"@mui/material\"\n\ntype ActionButtonProps = {\n\tonSave: () => void\n\tloading: boolean\n}\n\nexport const ActionButton: React.FC<ActionButtonProps> = (props) => {\n\tconst {\n\t\tonSave,\n\t\tloading\n\t} = props\n\n\tconst handleSave = () => {\n\t\tonSave()\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={handleSave}\n\t\t\tcolor=\"primary\"\n\t\t\tvariant=\"contained\"\n\t\t\tdisableElevation\n\t\t\tdisabled={loading}\n\t\t\tendIcon={loading && <CircularProgress size={20} color=\"inherit\" />}\n\t\t>\n\t\t\tSalvar\n\t\t</Button>\n\t)\n}\n","import React from \"react\"\nimport {\n\tGrid2 as Grid\n} from \"@mui/material\"\n\ntype ActionsButtonsProps = {\n\tchildren: React.ReactNode\n}\n\nexport const ActionsButtons: React.FC<ActionsButtonsProps> = (props) => {\n\treturn (\n\t\t<Grid\n\t\t\tcontainer\n\t\t\tjustify=\"flex-end\"\n\t\t>\n\t\t\t<Grid\n\t\t\t\titem\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</Grid>\n\t\t</Grid>\n\t)\n}\n","import React from \"react\"\nimport AceEditor, { IAceEditorProps } from \"react-ace\"\nimport {\n\tFormControl,\n\tFormHelperText,\n\tGrid2 as Grid\n} from \"@mui/material\"\n\nexport type JsonValue = Record<string | number, unknown>\n\nexport type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;\n\nexport type ContentProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n\tonChange?: (updatedJson: string) => void\n\tcurrentError?: boolean\n\tcurrentHelperText?: string\n}>\n\nconst INPUT_NAME = \"json-editor\"\n\nexport const Content: React.FC<ContentProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\tonChange,\n\t\tcurrentError,\n\t\tcurrentHelperText,\n\t\t...rest\n\t} = props\n\n\tconst stringifyValue = JSON.stringify(value, null, 2)\n\n\treturn (\n\t\t<Grid>\n\t\t\t<FormControl\n\t\t\t\terror={currentError}\n\t\t\t\tfullWidth\n\t\t\t>\n\t\t\t\t<AceEditor\n\t\t\t\t\t{...rest}\n\t\t\t\t\tname={INPUT_NAME}\n\t\t\t\t\tvalue={stringifyValue}\n\t\t\t\t\twrapEnabled={true}\n\t\t\t\t\tmode=\"json\"\n\t\t\t\t\ttheme=\"textmate\"\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tfontSize={16}\n\t\t\t\t\tshowPrintMargin={true}\n\t\t\t\t\tshowGutter={true}\n\t\t\t\t\thighlightActiveLine={true}\n\t\t\t\t\teditorProps={{ $blockScrolling: true }}\n\t\t\t\t\tsetOptions={{\n\t\t\t\t\t\tshowLineNumbers: true,\n\t\t\t\t\t\ttabSize: 2\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</FormControl>\n\t\t\t{currentHelperText && (\n\t\t\t\t<FormHelperText\n\t\t\t\t\terror={currentError}\n\t\t\t\t>\n\t\t\t\t\t{currentHelperText}\n\t\t\t\t</FormHelperText>\n\t\t\t)}\n\t\t</Grid>\n\t)\n}\n","import { Root } from \"@/componentPatterns/JsonForm/Root\"\nimport { ActionButton } from \"@/componentPatterns/JsonForm/ActionButton\"\nimport { ActionsButtons } from \"@/componentPatterns/JsonForm/ActionsButtons\"\nimport { Content } from \"@/componentPatterns/JsonForm/Content\"\n\nexport const JsonForm = {\n\tRoot,\n\tActionButton,\n\tActionsButtons,\n\tContent\n}\n","import { useState } from \"react\"\n\nexport type ValidationType = Record<string, unknown>\n\nconst useValidation = () => {\n\tconst [validation, setValidation] = useState<ValidationType>({})\n\n\tconst addValidation = (newValidation: ValidationType) => {\n\t\tsetValidation((lastValidation) => ({\n\t\t\t...lastValidation,\n\t\t\t...newValidation\n\t\t}))\n\t}\n\n\tconst clearValidation = (key: string) => {\n\t\tif (key in validation) {\n\t\t\tsetValidation((lastValidation) => {\n\t\t\t\tconst updatedData: ValidationType = { ...lastValidation }\n\n\t\t\t\tdelete updatedData[key]\n\n\t\t\t\treturn updatedData\n\t\t\t})\n\t\t}\n\t}\n\n\tconst clearAllValidations = () => {\n\t\tsetValidation({})\n\t}\n\n\treturn {\n\t\taddValidation,\n\t\tclearValidation,\n\t\tclearAllValidations,\n\t\tvalidation\n\t}\n}\n\nexport default useValidation\n","import React from \"react\"\nimport { IAceEditorProps } from \"react-ace\"\n\nimport { JsonForm } from \"@/componentPatterns/JsonForm\"\n\nimport {\n\tJsonValue,\n\tOverwrite\n} from \"@/componentPatterns/JsonForm/Content\"\n\ntype JsonViewProps = Overwrite<IAceEditorProps, {\n\tvalue?: JsonValue | null\n}>\n\nexport const JsonView: React.FC<JsonViewProps> = (props) => {\n\tconst {\n\t\tvalue,\n\t\t...rest\n\t} = props\n\n\treturn (\n\t\t<JsonForm.Root>\n\t\t\t<JsonForm.Content\n\t\t\t\t{...rest}\n\t\t\t\tvalue={value}\n\t\t\t/>\n\t\t</JsonForm.Root>\n\t)\n}\n"],"mappings":"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","names":["jsx","Button","props","backgroundColor","label","size","primary","mode","useState","Grid","jsx","Root","props","Button","CircularProgress","jsx","ActionButton","props","onSave","loading","Grid","jsx","ActionsButtons","props","AceEditor","FormControl","FormHelperText","Grid","jsx","jsxs","INPUT_NAME","Content","props","value","onChange","currentError","currentHelperText","rest","stringifyValue","JsonForm","Root","ActionButton","ActionsButtons","Content","useState","useValidation","validation","setValidation","newValidation","lastValidation","key","updatedData","useValidation_default","jsx","jsxs","INPUT_NAME","JsonEditor","props","value","onChange","onSave","helperText","error","rest","addValidation","clearValidation","validation","useValidation_default","stringifyValue","jsonData","setJsonData","useState","loadingSaveJson","setLoadingSaveJson","currentError","currentHelperText","handleChange","newValue","handleSave","parseJsonData","JsonForm","jsx","JsonView","props","value","rest","JsonForm"]}
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "letalkui",
3
3
  "private": false,
4
- "version": "0.0.6",
4
+ "version": "0.0.8",
5
5
  "type": "module",
6
- "scripts": {
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "scripts": {
7
10
  "lint": "eslint .",
8
11
  "dev": "storybook dev -p 6006",
9
12
  "build": "tsup",
package/.editorconfig DELETED
@@ -1,11 +0,0 @@
1
- root = true
2
-
3
- [*]
4
- indent_style = tab
5
- indent_size = 4
6
- # LF (Line Feed) and CRLF (Carriage Return + Line Feed) are different line-ending conventions used to mark the end of a line in text files:
7
- # More information in this post: https://medium.com/@feldy7k/understanding-line-break-types-cr-lf-and-crlf-278069b8da29
8
- end_of_line = lf
9
- charset = utf-8
10
- trim_trailing_whitespace = true
11
- insert_final_newline = true
@@ -1,33 +0,0 @@
1
- on:
2
- push:
3
- branches:
4
- - master
5
-
6
- pull_request:
7
-
8
- workflow_dispatch:
9
-
10
- name: Check
11
-
12
- jobs:
13
- check:
14
- name: Check
15
- runs-on: ubuntu-latest
16
-
17
- steps:
18
- - name: Checkout
19
- uses: actions/checkout@v2
20
-
21
- - name: Setup NodeJS
22
- uses: actions/setup-node@v1
23
- with:
24
- node-version: "18.20.3"
25
-
26
- - name: Install All Dependencies
27
- run: npm i -f
28
-
29
- - name: Build
30
- env:
31
- CI: true
32
- NODE_OPTIONS: --max-old-space-size=4096
33
- run: npm run build
@@ -1,25 +0,0 @@
1
- on: pull_request
2
-
3
- name: Lint
4
-
5
- jobs:
6
- check:
7
- name: Lint
8
- runs-on: ubuntu-latest
9
- container:
10
- image: node:18.20.3
11
-
12
- steps:
13
- - name: Checkout
14
- uses: actions/checkout@v2
15
-
16
- - name: Setup NodeJS
17
- uses: actions/setup-node@v2
18
- with:
19
- node-version: "18.20.3"
20
-
21
- - name: Install packages
22
- run: npm ci
23
-
24
- - name: Check Lint
25
- run: npx eslint 'src/**'
@@ -1,27 +0,0 @@
1
- name: Release
2
-
3
- on:
4
- push:
5
- branches:
6
- - master
7
-
8
- jobs:
9
- release:
10
- runs-on: ubuntu-latest
11
- steps:
12
- - name: Checkout
13
- uses: actions/checkout@v3
14
-
15
- - name: Setup Node.js
16
- uses: actions/setup-node@v3
17
- with:
18
- node-version: "18.20.3"
19
- registry-url: 'https://registry.npmjs.org'
20
-
21
- - name: Install dependencies
22
- run: npm i -f
23
-
24
- - name: Release
25
- run: npm publish
26
- env:
27
- NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
package/.nvmrc DELETED
@@ -1 +0,0 @@
1
- 14.18.1
@@ -1,13 +0,0 @@
1
- import type { StorybookConfig } from "@storybook/react-vite";
2
-
3
- const config: StorybookConfig = {
4
- stories: ["../src/**/*.mdx", "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5
- addons: [
6
- "@storybook/addon-essentials"
7
- ],
8
- framework: {
9
- name: "@storybook/react-vite",
10
- options: {},
11
- },
12
- };
13
- export default config;
@@ -1,14 +0,0 @@
1
- import type { Preview } from "@storybook/react";
2
-
3
- const preview: Preview = {
4
- parameters: {
5
- controls: {
6
- matchers: {
7
- color: /(background|color)$/i,
8
- date: /Date$/i,
9
- },
10
- },
11
- },
12
- };
13
-
14
- export default preview;
package/eslint.config.js DELETED
@@ -1,68 +0,0 @@
1
- import js from "@eslint/js"
2
- import globals from "globals"
3
- import reactHooks from "eslint-plugin-react-hooks"
4
- import reactRefresh from "eslint-plugin-react-refresh"
5
- import react from "eslint-plugin-react"
6
- import typescriptEslint from "@typescript-eslint/eslint-plugin"
7
- import jsxA11Y from "eslint-plugin-jsx-a11y"
8
- import _import from "eslint-plugin-import"
9
- import tsParser from "@typescript-eslint/parser"
10
-
11
- export default [
12
- {
13
- ignores: ["dist", ".storybook", "vite.config.ts", "tsup.config.ts"],
14
- },
15
- js.configs.recommended,
16
- {
17
- files: ["**/*.{ts,tsx}"],
18
- languageOptions: {
19
- ecmaVersion: 2020,
20
- sourceType: "module",
21
- globals: {
22
- ...globals.browser,
23
- ...globals.node,
24
- ...globals.jest,
25
- },
26
- parser: tsParser,
27
- parserOptions: {
28
- project: "./tsconfig.eslint.json",
29
- ecmaFeatures: {
30
- jsx: true,
31
- },
32
- },
33
- },
34
- plugins: {
35
- "react-hooks": reactHooks,
36
- "react-refresh": reactRefresh,
37
- react,
38
- "@typescript-eslint": typescriptEslint,
39
- "jsx-a11y": jsxA11Y,
40
- import: _import,
41
- },
42
- rules: {
43
- ...reactHooks.configs.recommended.rules,
44
- "react-refresh/only-export-components": [
45
- "warn",
46
- { allowConstantExport: true },
47
- ],
48
- ...typescriptEslint.configs.recommended.rules,
49
- ...react.configs.recommended.rules,
50
- "@typescript-eslint/no-unused-vars": "error",
51
- indent: ["error", "tab"],
52
- quotes: ["error", "double"],
53
- semi: ["error", "never"],
54
- "object-curly-spacing": ["error", "always"],
55
- "comma-dangle": ["error", "never"]
56
- },
57
- settings: {
58
- "import/resolver": {
59
- typescript: {
60
- project: ["./tsconfig.json"],
61
- },
62
- },
63
- react: {
64
- version: "detect",
65
- },
66
- },
67
- },
68
- ]
package/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Vite + React + TS</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
- <script type="module" src="/src/main.tsx"></script>
12
- </body>
13
- </html>
@@ -1,35 +0,0 @@
1
- import React from "react"
2
-
3
- import {
4
- Button,
5
- CircularProgress
6
- } from "@mui/material"
7
-
8
- type ActionButtonProps = {
9
- onSave: () => void
10
- loading: boolean
11
- }
12
-
13
- export const ActionButton: React.FC<ActionButtonProps> = (props) => {
14
- const {
15
- onSave,
16
- loading
17
- } = props
18
-
19
- const handleSave = () => {
20
- onSave()
21
- }
22
-
23
- return (
24
- <Button
25
- onClick={handleSave}
26
- color="primary"
27
- variant="contained"
28
- disableElevation
29
- disabled={loading}
30
- endIcon={loading && <CircularProgress size={20} color="inherit" />}
31
- >
32
- Salvar
33
- </Button>
34
- )
35
- }
@@ -1,23 +0,0 @@
1
- import React from "react"
2
- import {
3
- Grid2 as Grid
4
- } from "@mui/material"
5
-
6
- type ActionsButtonsProps = {
7
- children: React.ReactNode
8
- }
9
-
10
- export const ActionsButtons: React.FC<ActionsButtonsProps> = (props) => {
11
- return (
12
- <Grid
13
- container
14
- justify="flex-end"
15
- >
16
- <Grid
17
- item
18
- >
19
- {props.children}
20
- </Grid>
21
- </Grid>
22
- )
23
- }
@@ -1,67 +0,0 @@
1
- import React from "react"
2
- import AceEditor, { IAceEditorProps } from "react-ace"
3
- import {
4
- FormControl,
5
- FormHelperText,
6
- Grid2 as Grid
7
- } from "@mui/material"
8
-
9
- export type JsonValue = Record<string | number, unknown>
10
-
11
- export type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;
12
-
13
- export type ContentProps = Overwrite<IAceEditorProps, {
14
- value?: JsonValue | null
15
- onChange?: (updatedJson: string) => void
16
- currentError?: boolean
17
- currentHelperText?: string
18
- }>
19
-
20
- const INPUT_NAME = "json-editor"
21
-
22
- export const Content: React.FC<ContentProps> = (props) => {
23
- const {
24
- value,
25
- onChange,
26
- currentError,
27
- currentHelperText,
28
- ...rest
29
- } = props
30
-
31
- const stringifyValue = JSON.stringify(value, null, 2)
32
-
33
- return (
34
- <Grid>
35
- <FormControl
36
- error={currentError}
37
- fullWidth
38
- >
39
- <AceEditor
40
- {...rest}
41
- name={INPUT_NAME}
42
- value={stringifyValue}
43
- wrapEnabled={true}
44
- mode="json"
45
- theme="textmate"
46
- onChange={onChange}
47
- fontSize={16}
48
- showPrintMargin={true}
49
- showGutter={true}
50
- highlightActiveLine={true}
51
- editorProps={{ $blockScrolling: true }}
52
- setOptions={{
53
- showLineNumbers: true,
54
- tabSize: 2
55
- }}
56
- />
57
- </FormControl>
58
- {currentHelperText && (
59
- <FormHelperText
60
- error={currentError}
61
- >
62
- {currentHelperText}
63
- </FormHelperText>
64
- )}
65
- </Grid>
66
- )
67
- }
@@ -1,21 +0,0 @@
1
- import React from "react"
2
-
3
- import {
4
- Grid2 as Grid
5
- } from "@mui/material"
6
-
7
- type RootProps = {
8
- children: React.ReactNode
9
- }
10
-
11
- export const Root: React.FC<RootProps> = (props) => {
12
- return (
13
- <Grid
14
- container
15
- direction="column"
16
- spacing={2}
17
- >
18
- {props.children}
19
- </Grid>
20
- )
21
- }
@@ -1,11 +0,0 @@
1
- import { Root } from "@/componentPatterns/JsonForm/Root"
2
- import { ActionButton } from "@/componentPatterns/JsonForm/ActionButton"
3
- import { ActionsButtons } from "@/componentPatterns/JsonForm/ActionsButtons"
4
- import { Content } from "@/componentPatterns/JsonForm/Content"
5
-
6
- export const JsonForm = {
7
- Root,
8
- ActionButton,
9
- ActionsButtons,
10
- Content
11
- }
@@ -1,53 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react"
2
- import { fn } from "@storybook/test"
3
-
4
- import { Button } from "@/components/Button"
5
-
6
- const meta: Meta<typeof Button> = {
7
- title: "Example/Button",
8
- component: Button,
9
- parameters: {
10
- layout: "centered"
11
- },
12
- tags: ["autodocs"],
13
- argTypes: {
14
- backgroundColor: {
15
- control: "color"
16
- }
17
- },
18
- args: {
19
- onClick: fn()
20
- }
21
- }
22
-
23
- export default meta
24
-
25
- type Story = StoryObj<typeof meta>
26
-
27
- export const Primary: Story = {
28
- args: {
29
- primary: true,
30
- label: "Button",
31
- size: "large"
32
- }
33
- }
34
-
35
- export const Secondary: Story = {
36
- args: {
37
- label: "Button"
38
- }
39
- }
40
-
41
- export const Large: Story = {
42
- args: {
43
- size: "large",
44
- label: "Button"
45
- }
46
- }
47
-
48
- export const Small: Story = {
49
- args: {
50
- size: "small",
51
- label: "Button"
52
- }
53
- }
@@ -1,30 +0,0 @@
1
- import React from "react"
2
-
3
- export interface ButtonProps {
4
- primary?: boolean
5
- backgroundColor?: string
6
- size?: "small" | "medium" | "large"
7
- label: string
8
- onClick?: () => void
9
- }
10
-
11
- export const Button = (props: ButtonProps) => {
12
- const {
13
- backgroundColor,
14
- label,
15
- size,
16
- primary
17
- } = props
18
-
19
- const mode = primary ? "storybook-button--primary" : "storybook-button--secondary"
20
- return (
21
- <button
22
- type="button"
23
- className={["storybook-button", `storybook-button--${size}`, mode].join("")}
24
- style={{ backgroundColor }}
25
- {...props}
26
- >
27
- {label}
28
- </button>
29
- )
30
- }
@@ -1,47 +0,0 @@
1
- import {
2
- Meta,
3
- StoryObj
4
- } from "@storybook/react"
5
-
6
- import { JsonEditor } from "@/components/JsonEditor"
7
-
8
- const meta: Meta<typeof JsonEditor> = {
9
- title: "Example/JsonEditor",
10
- component: JsonEditor,
11
- parameters: {
12
- layout: "centered"
13
- },
14
- tags: ["autodocs"],
15
- argTypes: {
16
- value: {
17
- type: "string"
18
- }
19
- }
20
- }
21
-
22
- export default meta
23
-
24
- type Story = StoryObj<typeof meta>
25
-
26
- export const Primary: Story = {
27
- args: {
28
- value: {
29
- "id": 1,
30
- "nome": "dsadsa",
31
- "ativo": true,
32
- "dataCriacao": "2025-02-07T12:00:00.000Z",
33
-
34
- "itens": [{
35
- "id": 101,
36
- "descricao": "Item 1",
37
- "quantidade": 10,
38
- "preco": 19.99
39
- }, {
40
- "id": 102,
41
- "descricao": "Item 2",
42
- "quantidade": 5,
43
- "preco": 49.99
44
- }]
45
- }
46
- }
47
- }
@@ -1,93 +0,0 @@
1
- import React, { useState } from "react"
2
- import { IAceEditorProps } from "react-ace"
3
-
4
- import { JsonForm } from "@/componentPatterns/JsonForm"
5
- import {
6
- JsonValue,
7
- Overwrite
8
- } from "@/componentPatterns/JsonForm/Content"
9
-
10
- import useValidation from "@/hooks/useValidation"
11
-
12
- type JsonEditorProps = Overwrite<IAceEditorProps, {
13
- value?: JsonValue | null
14
- onChange?: (value: string) => void
15
- onSave?: (value: JsonValue) => Promise<JsonValue>
16
- helperText?: string
17
- error?: boolean
18
- }>
19
-
20
- const INPUT_NAME = "json-editor"
21
-
22
- export const JsonEditor: React.FC<JsonEditorProps> = (props) => {
23
- const {
24
- value,
25
- onChange,
26
- onSave,
27
- helperText,
28
- error,
29
- ...rest
30
- } = props
31
-
32
- const { addValidation, clearValidation, validation } = useValidation()
33
-
34
- const stringifyValue = JSON.stringify(value, null, 2)
35
-
36
- const [jsonData, setJsonData] = useState<string>(stringifyValue)
37
- const [loadingSaveJson, setLoadingSaveJson] = useState<boolean>(false)
38
-
39
- const currentError: boolean = Boolean(validation[INPUT_NAME]) ?? error
40
-
41
- const currentHelperText = (): string => {
42
- if (INPUT_NAME in validation) {
43
- if (helperText) return helperText
44
-
45
- return "Ocorreu um erro inesperado. Por favor, tente novamente mais tarde."
46
- }
47
-
48
- return "Ocorreu um erro inesperado. Por favor, tente novamente mais tarde."
49
- }
50
-
51
- const handleChange = (newValue: string) => {
52
- clearValidation(INPUT_NAME)
53
-
54
- setJsonData(newValue)
55
-
56
- onChange?.(newValue)
57
- }
58
-
59
- const handleSave = async () => {
60
- setLoadingSaveJson(true)
61
-
62
- if (onSave) {
63
- try {
64
- const parseJsonData = JSON.parse(jsonData)
65
-
66
- await onSave(parseJsonData)
67
- } catch (error) {
68
- addValidation({ [INPUT_NAME]: error })
69
- }
70
- }
71
-
72
- setLoadingSaveJson(false)
73
- }
74
-
75
- return (
76
- <JsonForm.Root>
77
- <JsonForm.Content
78
- {...rest}
79
- value={value}
80
- onChange={handleChange}
81
- currentError={currentError}
82
- currentHelperText={currentHelperText()}
83
- />
84
-
85
- <JsonForm.ActionsButtons>
86
- <JsonForm.ActionButton
87
- onSave={handleSave}
88
- loading={loadingSaveJson}
89
- />
90
- </JsonForm.ActionsButtons>
91
- </JsonForm.Root>
92
- )
93
- }
@@ -1,42 +0,0 @@
1
- import type {
2
- Meta,
3
- StoryObj
4
- } from "@storybook/react"
5
-
6
- import { JsonView } from "@/components/JsonView"
7
-
8
- const meta: Meta<typeof JsonView> = {
9
- title: "Example/JsonView",
10
- component: JsonView,
11
- parameters: {
12
- layout: "centered"
13
- },
14
- tags: ["autodocs"]
15
- }
16
-
17
- export default meta
18
-
19
- type Story = StoryObj<typeof meta>
20
-
21
- export const Primary: Story = {
22
- args: {
23
- value: {
24
- "id": 1,
25
- "nome": "dsadsa",
26
- "ativo": true,
27
- "dataCriacao": "2025-02-07T12:00:00.000Z",
28
-
29
- "itens": [{
30
- "id": 101,
31
- "descricao": "Item 1",
32
- "quantidade": 10,
33
- "preco": 19.99
34
- }, {
35
- "id": 102,
36
- "descricao": "Item 2",
37
- "quantidade": 5,
38
- "preco": 49.99
39
- }]
40
- }
41
- }
42
- }
@@ -1,29 +0,0 @@
1
- import React from "react"
2
- import { IAceEditorProps } from "react-ace"
3
-
4
- import { JsonForm } from "@/componentPatterns/JsonForm"
5
-
6
- import {
7
- JsonValue,
8
- Overwrite
9
- } from "@/componentPatterns/JsonForm/Content"
10
-
11
- type JsonViewProps = Overwrite<IAceEditorProps, {
12
- value?: JsonValue | null
13
- }>
14
-
15
- export const JsonView: React.FC<JsonViewProps> = (props) => {
16
- const {
17
- value,
18
- ...rest
19
- } = props
20
-
21
- return (
22
- <JsonForm.Root>
23
- <JsonForm.Content
24
- {...rest}
25
- value={value}
26
- />
27
- </JsonForm.Root>
28
- )
29
- }
@@ -1,39 +0,0 @@
1
- import { useState } from "react"
2
-
3
- export type ValidationType = Record<string, unknown>
4
-
5
- const useValidation = () => {
6
- const [validation, setValidation] = useState<ValidationType>({})
7
-
8
- const addValidation = (newValidation: ValidationType) => {
9
- setValidation((lastValidation) => ({
10
- ...lastValidation,
11
- ...newValidation
12
- }))
13
- }
14
-
15
- const clearValidation = (key: string) => {
16
- if (key in validation) {
17
- setValidation((lastValidation) => {
18
- const updatedData: ValidationType = { ...lastValidation }
19
-
20
- delete updatedData[key]
21
-
22
- return updatedData
23
- })
24
- }
25
- }
26
-
27
- const clearAllValidations = () => {
28
- setValidation({})
29
- }
30
-
31
- return {
32
- addValidation,
33
- clearValidation,
34
- clearAllValidations,
35
- validation
36
- }
37
- }
38
-
39
- export default useValidation
package/src/index.ts DELETED
@@ -1,3 +0,0 @@
1
- export * from "@/components/Button"
2
- export * from "@/components/JsonEditor"
3
- export * from "@/components/JsonView"
package/tsconfig.app.json DELETED
@@ -1,31 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
- "target": "ES2020",
5
- "useDefineForClassFields": true,
6
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
7
- "module": "ESNext",
8
- "skipLibCheck": true,
9
-
10
- /* Bundler mode */
11
- "moduleResolution": "bundler",
12
- "allowImportingTsExtensions": true,
13
- "isolatedModules": true,
14
- "moduleDetection": "force",
15
- "noEmit": true,
16
- "jsx": "react-jsx",
17
-
18
- /* Linting */
19
- "strict": true,
20
- "noUnusedLocals": true,
21
- "noUnusedParameters": true,
22
- "noFallthroughCasesInSwitch": true,
23
- "noUncheckedSideEffectImports": true,
24
- "baseUrl": ".",
25
- "paths": {
26
- "@/*": ["src/*"]
27
- },
28
- "allowSyntheticDefaultImports": true
29
- },
30
- "include": ["src"]
31
- }
@@ -1,18 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "jsx": "react-jsx",
4
- "target": "ES2022",
5
- "esModuleInterop": true,
6
- "moduleResolution": "node",
7
- "strict": true,
8
- "module": "ESNext",
9
- "sourceMap": true,
10
- "declaration": true,
11
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
12
- "baseUrl": ".",
13
- "paths": {
14
- "@/*": ["src/*"]
15
- }
16
- },
17
- "include": ["src"]
18
- }
@@ -1,4 +0,0 @@
1
- {
2
- "extends": "./tsconfig.json",
3
- "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.stories.ts"]
4
- }
package/tsconfig.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "files": [],
3
- "references": [
4
- { "path": "./tsconfig.app.json" },
5
- { "path": "./tsconfig.node.json" }
6
- ]
7
- }
@@ -1,24 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4
- "target": "ES2022",
5
- "lib": ["ES2023"],
6
- "module": "ESNext",
7
- "skipLibCheck": true,
8
-
9
- /* Bundler mode */
10
- "moduleResolution": "bundler",
11
- "allowImportingTsExtensions": true,
12
- "isolatedModules": true,
13
- "moduleDetection": "force",
14
- "noEmit": true,
15
-
16
- /* Linting */
17
- "strict": true,
18
- "noUnusedLocals": true,
19
- "noUnusedParameters": true,
20
- "noFallthroughCasesInSwitch": true,
21
- "noUncheckedSideEffectImports": true
22
- },
23
- "include": ["vite.config.ts"]
24
- }
package/tsup.config.ts DELETED
@@ -1,12 +0,0 @@
1
- import { defineConfig } from "tsup"
2
-
3
- export default defineConfig({
4
- minify: true,
5
- entry: ["src/index.ts"],
6
- sourcemap: true,
7
- outDir: "dist",
8
- clean: true,
9
- format: ["cjs", "esm"],
10
- dts: true,
11
- tsconfig: "tsconfig.build.json"
12
- })
package/vite.config.ts DELETED
@@ -1,13 +0,0 @@
1
- import { defineConfig } from 'vite'
2
- import react from '@vitejs/plugin-react-swc'
3
- import path from 'node:path'
4
-
5
- // https://vite.dev/config/
6
- export default defineConfig({
7
- plugins: [react()],
8
- resolve: {
9
- alias: {
10
- "@": path.resolve(__dirname, "./src")
11
- }
12
- }
13
- })