letalkui 0.0.3 → 0.0.5

package/.github/workflows/npm-publish.yml

@@ -11,6 +11,8 @@ jobs:
         steps:
             -   name: Checkout
                 uses: actions/checkout@v3
+                with:
+                    fetch-depth: 0
 
             -   name: Setup Node.js
                 uses: actions/setup-node@v3
@@ -21,6 +23,13 @@ jobs:
             -   name: Install dependencies
                 run: npm i -f
 
+            -   name: Bump version
+                run: |
+                    git config --global user.name "github-actions[bot]"
+                    git config --global user.email "github-actions[bot]@users.noreply.github.com"
+                    npm version patch -m "chore(release): %s"
+                    git push origin master --follow-tags
+
             -   name: Release
                 run: npm publish
                 env:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "letalkui",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "lint": "eslint .",
@@ -10,7 +10,11 @@
     "build:storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.3",
     "react": "^18.3.1",
+    "react-ace": "^10.1.0",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {

package/src/componentPatterns/JsonForm/ActionButton.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+import {
+	Button,
+	CircularProgress
+} from "@mui/material"
+
+type ActionButtonProps = {
+	onSave: () => void
+	loading: boolean
+}
+
+export const ActionButton: React.FC<ActionButtonProps> = (props) => {
+	const {
+		onSave,
+		loading
+	} = props
+
+	const handleSave = () => {
+		onSave()
+	}
+
+	return (
+		<Button
+			onClick={handleSave}
+			color="primary"
+			variant="contained"
+			disableElevation
+			disabled={loading}
+			endIcon={loading && <CircularProgress size={20} color="inherit" />}
+		>
+			Salvar
+		</Button>
+	)
+}

package/src/componentPatterns/JsonForm/ActionsButtons.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import {
+	Grid2 as Grid
+} from "@mui/material"
+
+type ActionsButtonsProps = {
+	children: React.ReactNode
+}
+
+export const ActionsButtons: React.FC<ActionsButtonsProps> = (props) => {
+	return (
+		<Grid
+			container
+			justify="flex-end"
+		>
+			<Grid
+				item
+			>
+				{props.children}
+			</Grid>
+		</Grid>
+	)
+}

package/src/componentPatterns/JsonForm/Content.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import AceEditor, { IAceEditorProps } from "react-ace"
+import {
+	FormControl,
+	FormHelperText,
+	Grid2 as Grid
+} from "@mui/material"
+
+export type JsonValue = Record<string | number, unknown>
+
+export type Overwrite<T, NewT> = Omit<T, keyof NewT> & NewT;
+
+export type ContentProps = Overwrite<IAceEditorProps, {
+	value?: JsonValue | null
+	onChange?: (updatedJson: string) => void
+	currentError?: boolean
+	currentHelperText?: string
+}>
+
+const INPUT_NAME = "json-editor"
+
+export const Content: React.FC<ContentProps> = (props) => {
+	const {
+		value,
+		onChange,
+		currentError,
+		currentHelperText,
+		...rest
+	} = props
+
+	const stringifyValue = JSON.stringify(value, null, 2)
+
+	return (
+		<Grid>
+			<FormControl
+				error={currentError}
+				fullWidth
+			>
+				<AceEditor
+					{...rest}
+					name={INPUT_NAME}
+					value={stringifyValue}
+					wrapEnabled={true}
+					mode="json"
+					theme="textmate"
+					onChange={onChange}
+					fontSize={16}
+					showPrintMargin={true}
+					showGutter={true}
+					highlightActiveLine={true}
+					editorProps={{ $blockScrolling: true }}
+					setOptions={{
+						showLineNumbers: true,
+						tabSize: 2
+					}}
+				/>
+			</FormControl>
+			{currentHelperText && (
+				<FormHelperText
+					error={currentError}
+				>
+					{currentHelperText}
+				</FormHelperText>
+			)}
+		</Grid>
+	)
+}

package/src/componentPatterns/JsonForm/Root.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+import {
+	Grid2 as Grid
+} from "@mui/material"
+
+type RootProps = {
+	children: React.ReactNode
+}
+
+export const Root: React.FC<RootProps> = (props) => {
+	return (
+		<Grid
+			container
+			direction="column"
+			spacing={2}
+		>
+			{props.children}
+		</Grid>
+	)
+}

package/src/componentPatterns/JsonForm/index.ts

@@ -0,0 +1,11 @@
+import { Root } from "@/componentPatterns/JsonForm/Root"
+import { ActionButton } from "@/componentPatterns/JsonForm/ActionButton"
+import { ActionsButtons } from "@/componentPatterns/JsonForm/ActionsButtons"
+import { Content } from "@/componentPatterns/JsonForm/Content"
+
+export const JsonForm = {
+	Root,
+	ActionButton,
+	ActionsButtons,
+	Content
+}

package/src/components/Button/Button.stories.ts

@@ -3,7 +3,7 @@ import { fn } from "@storybook/test"
 
 import { Button } from "@/components/Button"
 
-const meta = {
+const meta: Meta<typeof Button> = {
 	title: "Example/Button",
 	component: Button,
 	parameters: {
@@ -18,7 +18,7 @@ const meta = {
 	args: {
 		onClick: fn()
 	}
-} satisfies Meta<typeof Button>
+}
 
 export default meta
 
@@ -27,7 +27,8 @@ type Story = StoryObj<typeof meta>
 export const Primary: Story = {
 	args: {
 		primary: true,
-		label: "Button"
+		label: "Button",
+		size: "large"
 	}
 }
 

package/src/components/JsonEditor/JsonEditor.stories.ts

@@ -0,0 +1,47 @@
+import {
+	Meta,
+	StoryObj
+} from "@storybook/react"
+
+import { JsonEditor } from "@/components/JsonEditor"
+
+const meta: Meta<typeof JsonEditor> = {
+	title: "Example/JsonEditor",
+	component: JsonEditor,
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		value: {
+			type: "string"
+		}
+	}
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+	args: {
+		value: {
+			"id": 1,
+			"nome": "dsadsa",
+			"ativo": true,
+			"dataCriacao": "2025-02-07T12:00:00.000Z",
+
+			"itens": [{
+				"id": 101,
+				"descricao": "Item 1",
+				"quantidade": 10,
+				"preco": 19.99
+			}, {
+				"id": 102,
+				"descricao": "Item 2",
+				"quantidade": 5,
+				"preco": 49.99
+			}]
+		}
+	}
+}

package/src/components/JsonEditor/index.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from "react"
+import { IAceEditorProps } from "react-ace"
+
+import { JsonForm } from "@/componentPatterns/JsonForm"
+import {
+	JsonValue,
+	Overwrite
+} from "@/componentPatterns/JsonForm/Content"
+
+import useValidation from "@/hooks/useValidation"
+
+type JsonEditorProps = Overwrite<IAceEditorProps, {
+	value?: JsonValue | null
+	onChange?: (value: string) => void
+	onSave?: (value: JsonValue) => Promise<JsonValue>
+	helperText?: string
+	error?: boolean
+}>
+
+const INPUT_NAME = "json-editor"
+
+export const JsonEditor: React.FC<JsonEditorProps> = (props) => {
+	const {
+		value,
+		onChange,
+		onSave,
+		helperText,
+		error,
+		...rest
+	} = props
+
+	const { addValidation, clearValidation, validation } = useValidation()
+
+	const stringifyValue = JSON.stringify(value, null, 2)
+
+	const [jsonData, setJsonData] = useState<string>(stringifyValue)
+	const [loadingSaveJson, setLoadingSaveJson] = useState<boolean>(false)
+
+	const currentError: boolean = Boolean(validation[INPUT_NAME]) ?? error
+
+	const currentHelperText = (): string => {
+		if (INPUT_NAME in validation) {
+			if (helperText) return helperText
+
+			return "Ocorreu um erro inesperado. Por favor, tente novamente mais tarde."
+		}
+
+		return "Ocorreu um erro inesperado. Por favor, tente novamente mais tarde."
+	}
+
+	const handleChange = (newValue: string) => {
+		clearValidation(INPUT_NAME)
+
+		setJsonData(newValue)
+
+		onChange?.(newValue)
+	}
+
+	const handleSave = async () => {
+		setLoadingSaveJson(true)
+
+		if (onSave) {
+			try {
+				const parseJsonData = JSON.parse(jsonData)
+
+				await onSave(parseJsonData)
+			} catch (error) {
+				addValidation({ [INPUT_NAME]: error })
+			}
+		}
+
+		setLoadingSaveJson(false)
+	}
+
+	return (
+		<JsonForm.Root>
+			<JsonForm.Content
+				{...rest}
+				value={value}
+				onChange={handleChange}
+				currentError={currentError}
+				currentHelperText={currentHelperText()}
+			/>
+
+			<JsonForm.ActionsButtons>
+				<JsonForm.ActionButton
+					onSave={handleSave}
+					loading={loadingSaveJson}
+				/>
+			</JsonForm.ActionsButtons>
+		</JsonForm.Root>
+	)
+}

package/src/components/JsonView/JsonView.stories.ts

@@ -0,0 +1,42 @@
+import type {
+	Meta,
+	StoryObj
+} from "@storybook/react"
+
+import { JsonView } from "@/components/JsonView"
+
+const meta: Meta<typeof JsonView> = {
+	title: "Example/JsonView",
+	component: JsonView,
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"]
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+	args: {
+		value: {
+			"id": 1,
+			"nome": "dsadsa",
+			"ativo": true,
+			"dataCriacao": "2025-02-07T12:00:00.000Z",
+
+			"itens": [{
+				"id": 101,
+				"descricao": "Item 1",
+				"quantidade": 10,
+				"preco": 19.99
+			}, {
+				"id": 102,
+				"descricao": "Item 2",
+				"quantidade": 5,
+				"preco": 49.99
+			}]
+		}
+	}
+}

package/src/components/JsonView/index.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { IAceEditorProps } from "react-ace"
+
+import { JsonForm } from "@/componentPatterns/JsonForm"
+
+import {
+	JsonValue,
+	Overwrite
+} from "@/componentPatterns/JsonForm/Content"
+
+type JsonViewProps = Overwrite<IAceEditorProps, {
+	value?: JsonValue | null
+}>
+
+export const JsonView: React.FC<JsonViewProps> = (props) => {
+	const {
+		value,
+		...rest
+	} = props
+
+	return (
+		<JsonForm.Root>
+			<JsonForm.Content
+				{...rest}
+				value={value}
+			/>
+		</JsonForm.Root>
+	)
+}

package/src/hooks/useValidation.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react"
+
+export type ValidationType = Record<string, unknown>
+
+const useValidation = () => {
+	const [validation, setValidation] = useState<ValidationType>({})
+
+	const addValidation = (newValidation: ValidationType) => {
+		setValidation((lastValidation) => ({
+			...lastValidation,
+			...newValidation
+		}))
+	}
+
+	const clearValidation = (key: string) => {
+		if (key in validation) {
+			setValidation((lastValidation) => {
+				const updatedData: ValidationType = { ...lastValidation }
+
+				delete updatedData[key]
+
+				return updatedData
+			})
+		}
+	}
+
+	const clearAllValidations = () => {
+		setValidation({})
+	}
+
+	return {
+		addValidation,
+		clearValidation,
+		clearAllValidations,
+		validation
+	}
+}
+
+export default useValidation

package/src/index.ts

@@ -1 +1,3 @@
 export * from "@/components/Button"
+export * from "@/components/JsonEditor"
+export * from "@/components/JsonView"