letalkui 0.0.2 → 0.0.4

package/.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+# 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:
+# More information in this post: https://medium.com/@feldy7k/understanding-line-break-types-cr-lf-and-crlf-278069b8da29
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.github/workflows/check.yml

@@ -0,0 +1,33 @@
+on:
+    push:
+        branches:
+            - master
+
+    pull_request:
+
+    workflow_dispatch:
+
+name: Check
+
+jobs:
+    check:
+        name: Check
+        runs-on: ubuntu-latest
+
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v2
+
+            -   name: Setup NodeJS
+                uses: actions/setup-node@v1
+                with:
+                    node-version: "18.20.3"
+
+            -   name: Install All Dependencies
+                run: npm i -f
+
+            -   name: Build
+                env:
+                    CI: true
+                    NODE_OPTIONS: --max-old-space-size=4096
+                run: npm run build

package/.github/workflows/lint.yaml

@@ -0,0 +1,25 @@
+on: pull_request
+
+name: Lint
+
+jobs:
+    check:
+        name: Lint
+        runs-on: ubuntu-latest
+        container:
+            image: node:18.20.3
+
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v2
+
+            -   name: Setup NodeJS
+                uses: actions/setup-node@v2
+                with:
+                    node-version: "18.20.3"
+
+            -   name: Install packages
+                run: npm ci
+
+            -   name: Check Lint
+                run: npx eslint 'src/**'

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

@@ -1,27 +1,36 @@
 name: Release
 
 on:
-  push:
-    branches:
-      - master
+    push:
+        branches:
+            - master
 
 jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+    release:
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v3
+                with:
+                    fetch-depth: 0
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.20.3"
-          registry-url: 'https://registry.npmjs.org'
+            -   name: Setup Node.js
+                uses: actions/setup-node@v3
+                with:
+                    node-version: "18.20.3"
+                    registry-url: 'https://registry.npmjs.org'
 
-      - name: Install dependencies
-        run: npm i -f
+            -   name: Install dependencies
+                run: npm i -f
 
-      - name: Release
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+            -   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:
+                    NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.nvmrc

@@ -0,0 +1 @@
+14.18.1

package/eslint.config.js

@@ -1,28 +1,68 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import react from "eslint-plugin-react"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import jsxA11Y from "eslint-plugin-jsx-a11y"
+import _import from "eslint-plugin-import"
+import tsParser from "@typescript-eslint/parser"
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+export default [
+    {
+        ignores: ["dist", ".storybook", "vite.config.ts", "tsup.config.ts"],
     },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+    js.configs.recommended,
+    {
+        files: ["**/*.{ts,tsx}"],
+        languageOptions: {
+            ecmaVersion: 2020,
+            sourceType: "module",
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.jest,
+            },
+            parser: tsParser,
+            parserOptions: {
+                project: "./tsconfig.eslint.json",
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+        },
+        plugins: {
+            "react-hooks": reactHooks,
+            "react-refresh": reactRefresh,
+            react,
+            "@typescript-eslint": typescriptEslint,
+            "jsx-a11y": jsxA11Y,
+            import: _import,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            "react-refresh/only-export-components": [
+                "warn",
+                { allowConstantExport: true },
+            ],
+            ...typescriptEslint.configs.recommended.rules,
+            ...react.configs.recommended.rules,
+            "@typescript-eslint/no-unused-vars": "error",
+            indent: ["error", "tab"],
+            quotes: ["error", "double"],
+            semi: ["error", "never"],
+			"object-curly-spacing": ["error", "always"],
+			"comma-dangle": ["error", "never"]
+        },
+        settings: {
+            "import/resolver": {
+                typescript: {
+                    project: ["./tsconfig.json"],
+                },
+            },
+            react: {
+                version: "detect",
+            },
+        },
     },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+]

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "letalkui",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
+  "type": "module",
   "scripts": {
     "lint": "eslint .",
     "dev": "storybook dev -p 6006",
@@ -9,10 +10,16 @@
     "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": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
@@ -22,8 +29,13 @@
     "@types/node": "18.19",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.17.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "eslint-plugin-storybook": "^0.11.2",

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

@@ -1,53 +1,53 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from '.';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+import type { Meta, StoryObj } from "@storybook/react"
+import { fn } from "@storybook/test"
+
+import { Button } from "@/components/Button"
+
+const meta: Meta<typeof Button> = {
+	title: "Example/Button",
+	component: Button,
+	parameters: {
+		layout: "centered"
+	},
+	tags: ["autodocs"],
+	argTypes: {
+		backgroundColor: {
+			control: "color"
+		}
+	},
+	args: {
+		onClick: fn()
+	}
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
 export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
+	args: {
+		primary: true,
+		label: "Button",
+		size: "large"
+	}
+}
 
 export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
+	args: {
+		label: "Button"
+	}
+}
 
 export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
+	args: {
+		size: "large",
+		label: "Button"
+	}
+}
 
 export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
+	args: {
+		size: "small",
+		label: "Button"
+	}
+}

package/src/components/Button/index.tsx

@@ -1,35 +1,30 @@
-import React from 'react';
+import React from "react"
 
 export interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** What background color to use */
-  backgroundColor?: string;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
+	primary?: boolean
+	backgroundColor?: string
+	size?: "small" | "medium" | "large"
+	label: string
+	onClick?: () => void
 }
 
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
+export const Button = (props: ButtonProps) => {
+	const {
+		backgroundColor,
+		label,
+		size,
+		primary
+	} = props
+
+	const mode = primary ? "storybook-button--primary" : "storybook-button--secondary"
+	return (
+		<button
+			type="button"
+			className={["storybook-button", `storybook-button--${size}`, mode].join("")}
+			style={{ backgroundColor }}
+			{...props}
+		>
+			{label}
+		</button>
+	)
+}

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,84 @@
+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 = validation[INPUT_NAME] ?? error
+	const currentHelperText: string = validation[INPUT_NAME] ?? helperText
+
+	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 @@
-export * from "./components/Button"
+export * from "@/components/Button"

package/tsconfig.app.json

@@ -24,7 +24,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "allowSyntheticDefaultImports": true
   },
   "include": ["src"]
 }

package/tsconfig.build.json

@@ -3,8 +3,9 @@
         "jsx": "react-jsx",
         "target": "ES2022",
         "esModuleInterop": true,
-        "strict": true,
-        "module": "NodeNext",
+		"moduleResolution": "node",
+		"strict": true,
+        "module": "ESNext",
         "sourceMap": true,
         "declaration": true,
         "lib": ["ES2022", "DOM", "DOM.Iterable"],
@@ -14,4 +15,4 @@
         }
     },
     "include": ["src"]
-}
+}

package/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.stories.ts"]
+}