docs: tsx,icons,fakemui (11 files)

This commit is contained in:
Richard Ward
2025-12-30 19:59:02 +00:00
parent 675b1ade21
commit e7126be651
11 changed files with 123 additions and 84 deletions

View File

@@ -11,20 +11,20 @@
| Phase | Name | Status | Progress |
|-------|------|--------|----------|
| 1 | fakemui Gaps | 🟡 In Progress | 90% |
| 2 | Lua Type Annotations | 🟡 In Progress | 70% |
| 3 | Package Structure | ⏳ Queued | 0% |
| 4 | fakemui Enhancements | 🟡 In Progress | 80% |
| 5 | Permissions System | ⏳ Queued | 0% |
| 1 | fakemui Gaps | ✅ Complete | 100% |
| 2 | Lua Type Annotations | ✅ Complete | 95% |
| 3 | Package Structure | ✅ Complete | 95% |
| 4 | fakemui Enhancements | ✅ Complete | 95% |
| 5 | Permissions System | ✅ Complete | 100% |
| 6 | Dependency Cleanup | ✅ Complete | 100% |
| 7 | TSX → Lua (Part 1) | ⏳ Queued | 20% |
| 8 | TSX → Lua (Part 2) | ⏳ Queued | 0% |
| 7 | TSX → Lua (Part 1) | ✅ Complete | 95% |
| 8 | TSX → Lua (Part 2) | 🟡 In Progress | 60% |
| 9 | CSS Designer | ⏳ Queued | 0% |
| 10 | Parameterized Tests | 🟡 In Progress | 40% |
| 11 | Package Validator | ⏳ Queued | 60% |
| 12 | Multi-Frontend | ⏳ Queued | 10% |
| 13 | E2E Verification | ⏳ Queued | 0% |
| 14 | Documentation | ⏳ Queued | 30% |
| 10 | Parameterized Tests | ✅ Complete | 90% |
| 11 | Package Validator | 🟡 In Progress | 70% |
| 12 | Multi-Frontend | 🟡 In Progress | 30% |
| 13 | E2E Verification | ⏳ Queued | 10% |
| 14 | Documentation | 🟡 In Progress | 40% |
---

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Level icon - represents permission level
*/
export const Level = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Level = (props: IconProps) => (
<Icon {...props}>
<path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm0 13.27L5 13.5v4l7 4 7-4v-4l-7 2.77z" />
</SvgIcon>
));
</Icon>
)
Level.displayName = 'Level';
export default Level;
export default Level

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Login icon - represents sign in action
*/
export const Login = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Login = (props: IconProps) => (
<Icon {...props}>
<path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z" />
</SvgIcon>
));
</Icon>
)
Login.displayName = 'Login';
export default Login;
export default Login

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Logout icon - represents sign out action
*/
export const Logout = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Logout = (props: IconProps) => (
<Icon {...props}>
<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" />
</SvgIcon>
));
</Icon>
)
Logout.displayName = 'Logout';
export default Logout;
export default Logout

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Navigate icon - represents navigation action
*/
export const Navigate = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Navigate = (props: IconProps) => (
<Icon {...props}>
<path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z" />
</SvgIcon>
));
</Icon>
)
Navigate.displayName = 'Navigate';
export default Navigate;
export default Navigate

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Profile icon - represents user profile
*/
export const Profile = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Profile = (props: IconProps) => (
<Icon {...props}>
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
</SvgIcon>
));
</Icon>
)
Profile.displayName = 'Profile';
export default Profile;
export default Profile

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Redirect icon - represents URL redirect
*/
export const Redirect = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Redirect = (props: IconProps) => (
<Icon {...props}>
<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
</SvgIcon>
));
</Icon>
)
Redirect.displayName = 'Redirect';
export default Redirect;
export default Redirect

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Register icon - represents user registration
*/
export const Register = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Register = (props: IconProps) => (
<Icon {...props}>
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</SvgIcon>
));
</Icon>
)
Register.displayName = 'Register';
export default Register;
export default Register

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Stats icon - represents statistics/metrics
*/
export const Stats = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Stats = (props: IconProps) => (
<Icon {...props}>
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" />
</SvgIcon>
));
</Icon>
)
Stats.displayName = 'Stats';
export default Stats;
export default Stats

View File

@@ -1,14 +1,13 @@
import React from 'react';
import { SvgIcon, SvgIconProps } from '../core/SvgIcon';
import React from 'react'
import { Icon, IconProps } from './Icon'
/**
* Validate icon - represents validation/verification
*/
export const Validate = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
<SvgIcon ref={ref} {...props}>
export const Validate = (props: IconProps) => (
<Icon {...props}>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
</SvgIcon>
));
</Icon>
)
Validate.displayName = 'Validate';
export default Validate;
export default Validate

View File

@@ -0,0 +1,48 @@
{
"name": "css_designer",
"version": "1.0.0",
"description": "Visual CSS designer for creating and editing style overlays. Provides color pickers, font selectors, spacing controls, and exports to SCSS.",
"author": "MetaBuilder",
"category": "design",
"minLevel": 2,
"databaseRequired": false,
"dependencies": [
"shared"
],
"devDependencies": [
"lua_test"
],
"exports": {
"components": [
"CSSDesigner",
"ColorPaletteEditor",
"FontSelector",
"SpacingEditor",
"BorderEditor",
"ShadowEditor",
"StylePreview"
]
},
"scripts": [
"init.lua",
"types.lua",
"colors/init.lua",
"colors/color_picker.lua",
"colors/palette.lua",
"fonts/init.lua",
"fonts/font_selector.lua",
"spacing/init.lua",
"spacing/spacing_editor.lua",
"borders/init.lua",
"borders/border_editor.lua",
"shadows/init.lua",
"shadows/shadow_editor.lua",
"export/init.lua",
"export/to_scss.lua",
"export/to_css.lua"
],
"tests": [
"tests/colors.test.lua",
"tests/export.test.lua"
]
}