{"id":24763192,"url":"https://github.com/suwi-lanji/view-layer-type-defs","last_synced_at":"2026-04-17T12:33:05.383Z","repository":{"id":283983365,"uuid":"923582644","full_name":"suwi-lanji/view-layer-type-defs","owner":"suwi-lanji","description":null,"archived":false,"fork":false,"pushed_at":"2025-01-29T08:17:21.000Z","size":5285,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T05:02:44.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suwi-lanji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-28T14:07:07.000Z","updated_at":"2025-01-29T08:17:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"d687c24b-a219-4862-bc34-6b76157e2346","html_url":"https://github.com/suwi-lanji/view-layer-type-defs","commit_stats":null,"previous_names":["suwi-lanji/view-layer-type-defs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/suwi-lanji/view-layer-type-defs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwi-lanji%2Fview-layer-type-defs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwi-lanji%2Fview-layer-type-defs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwi-lanji%2Fview-layer-type-defs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwi-lanji%2Fview-layer-type-defs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suwi-lanji","download_url":"https://codeload.github.com/suwi-lanji/view-layer-type-defs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suwi-lanji%2Fview-layer-type-defs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31929697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-17T10:35:34.458Z","status":"ssl_error","status_checked_at":"2026-04-17T10:35:09.472Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["json-schema","typescript","typescript-definitions"],"created_at":"2025-01-28T20:21:05.533Z","updated_at":"2026-04-17T12:33:05.377Z","avatar_url":"https://github.com/suwi-lanji.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# View Layer Type Definitions (`view-layer-type-defs`)\n\n## Overview\n`view-layer-type-defs` is a utility tool that generates TypeScript type definitions, column definitions, filter fields, and actions for **MerriamTables** based on a JSON configuration schema. MerriamTables is a table component library built on top of **shadcn tables** and **TanStack Table**.\n\nThis tool automates the process of creating type-safe definitions for tables, ensuring consistency and reducing manual errors.\n\n---\n\n## Features\n- **Type Definitions**: Generates TypeScript interfaces from JSON schemas.\n- **Column Definitions**: Creates column definitions for MerriamTables.\n- **Filter Fields**: Generates filter field configurations for table filtering.\n- **Actions**: Produces action configurations for table row actions.\n- **Automation**: Processes multiple JSON schema files and outputs `.ts` files.\n- **Index File**: Generates an `index.ts` file to export all generated modules.\n\n---\n\n## Installation\nTo use `view-layer-type-defs`, clone the repository and install the dependencies:\n\n```bash\ngit clone https://github.com/suwi-lanji/view-layer-type-defs.git\ncd view-layer-type-defs\nnpm install\n```\n\n---\n\n## Usage\n\n### 1. Prepare JSON Schema Files\nCreate JSON schema files in the `schemas` directory (or any directory specified in `SCHEMA_DIR`). Each file should define the structure of a table, including properties, filter fields, and actions.\n\n#### Example Schema (`user.json`)\n```json\n{\n    \"name\": \"User\",\n    \"properties\": {\n        \"name\": {\n            \"type\": \"string\",\n            \"show_on_table\": true,\n            \"table_header\": \"Name\",\n            \"table_type\": \"string\",\n            \"show_on_mobile\": true,\n            \"is_filter_field\": true,\n            \"filter_field_type\": \"text\"\n        },\n        \"role\": {\n            \"type\": \"string\",\n            \"show_on_table\": true,\n            \"table_header\": \"Role\",\n            \"table_type\": \"badge\",\n            \"show_on_mobile\": true,\n            \"format_fn\": \"colorMap\",\n            \"format_options\": {\n                \"Admin\": \"bg-green-500\",\n                \"Moderator\": \"bg-orange-500\"\n            },\n            \"is_filter_field\": true,\n            \"filter_field_type\": \"select\",\n            \"filter_options\": [\"Admin\", \"Moderator\"]\n        }\n    },\n    \"actions\": {\n        \"view\": {\n            \"label\": \"View\",\n            \"function\": \"modal_view_entry\"\n        },\n        \"edit\": {\n            \"label\": \"Edit\",\n            \"function\": \"modal_edit_entry\"\n        }\n    }\n}\n```\n\n### 2. Run the Script\nRun the script to generate TypeScript files:\n\n```bash\nnpm start\n```\n\nThis will:\n1. Read all JSON schema files from the `schemas` directory.\n2. Generate corresponding `.ts` files in the `output` directory.\n3. Create an `index.ts` file to export all generated modules.\n\n---\n\n### 3. Generated Output\nFor the `user.json` schema, the following files will be generated:\n\n#### `output/user.ts`\n```typescript\nexport interface User {\n    name: string;\n    role: string;\n}\n\nexport const UserColumnDef = [\n    {header: \"Name\", accessorKey: \"name\", type: \"string\", showOnMobile: true},\n    {header: \"Role\", accessorKey: \"role\", type: \"badge\", showOnMobile: true, formatFn: colorMap, formatOptions: {\"Admin\":\"bg-green-500\",\"Moderator\":\"bg-orange-500\"}},\n];\n\nexport const UserFilterFields: FilterField\u003cUser\u003e[] = [\n    {key: \"name\", label: \"name\", type: \"text\"},\n    {key: \"role\", label: \"role\", type: \"select\", options: [\"Admin\",\"Moderator\"]},\n];\n\nexport const UserActions = [\n    {label: \"View\", function: \"modal_view_entry\"},\n    {label: \"Edit\", function: \"modal_edit_entry\"},\n];\n```\n\n#### `output/index.ts`\n```typescript\nexport * from './user';\n```\n\n---\n\n## Configuration\nYou can configure the script using environment variables which can be placed in a .env file:\n\n| Variable               | Description                          | Default Value       |\n|------------------------|--------------------------------------|---------------------|\n| `SCHEMA_DIR`           | Directory containing JSON schemas    | `./schemas`         |\n| `OUTPUT_DIR`           | Directory to save generated `.ts` files | `./output`       |\n| `OUTPUT_INDEX_FILEPATH`| Path to the `index.ts` file          | `./output/index.ts` |\n\nExample:\n```bash\nSCHEMA_DIR=./my-schemas OUTPUT_DIR=./my-output npm start\n```\n\n---\n\n## Integration with MerriamTables\nThe generated files can be directly used in **MerriamTables** to define table structures, filters, and actions. For example:\n\n```typescript\n\"use client\";\n\nimport React from \"react\";\nimport { DynamicDatatable } from \"../../components/dynamic-datatable\";\nimport { ColumnDef, FilterField, Action } from \"../../types/datatable\";\nimport { Star, ShoppingCart } from \"lucide-react\";\nimport \"../../index.css\";\ninterface Product {\n  id: number;\n  name: string;\n  category: string;\n  price: number;\n  stock: number;\n  rating: number;\n  image: string;\n}\n\nconst products: Product[] = [\n  {\n    id: 1,\n    name: \"Laptop\",\n    category: \"Electronics\",\n    price: 999.99,\n    stock: 50,\n    rating: 4.5,\n    image: \"/placeholder.svg?height=40\u0026width=40\",\n  },\n  {\n    id: 2,\n    name: \"Smartphone\",\n    category: \"Electronics\",\n    price: 699.99,\n    stock: 100,\n    rating: 4.2,\n    image: \"/placeholder.svg?height=40\u0026width=40\",\n  },\n  {\n    id: 3,\n    name: \"Headphones\",\n    category: \"Audio\",\n    price: 149.99,\n    stock: 200,\n    rating: 4.7,\n    image: \"/placeholder.svg?height=40\u0026width=40\",\n  },\n  {\n    id: 4,\n    name: \"Coffee Maker\",\n    category: \"Appliances\",\n    price: 79.99,\n    stock: 30,\n    rating: 4.0,\n    image: \"/placeholder.svg?height=40\u0026width=40\",\n  },\n  {\n    id: 5,\n    name: \"Fitness Tracker\",\n    category: \"Wearables\",\n    price: 129.99,\n    stock: 75,\n    rating: 4.3,\n    image: \"/placeholder.svg?height=40\u0026width=40\",\n  },\n];\n\nconst columns: ColumnDef\u003cProduct\u003e[] = [\n  { header: \"Image\", accessorKey: \"image\", type: \"image\", showOnMobile: true },\n  { header: \"Name\", accessorKey: \"name\", type: \"text\", showOnMobile: true },\n  {\n    header: \"Category\",\n    accessorKey: \"category\",\n    type: \"badge\",\n    showOnMobile: true,\n  },\n  { header: \"Price\", accessorKey: \"price\", type: \"money\", showOnMobile: true },\n  {\n    header: \"Stock\",\n    accessorKey: \"stock\",\n    type: \"number\",\n    showOnMobile: false,\n  },\n  {\n    header: \"Rating\",\n    accessorKey: \"rating\",\n    type: \"icon\",\n    formatFn: (value: number) =\u003e (\n      \u003cdiv className=\"flex items-center\"\u003e\n        \u003cStar className=\"w-5 h-5 text-yellow-400 mr-1\" /\u003e\n        {value.toFixed(1)}\n      \u003c/div\u003e\n    ),\n    showOnMobile: true,\n  },\n  {\n    header: \"Actions\",\n    accessorKey: \"actions\",\n    type: \"actions\",\n    showOnMobile: true,\n  },\n];\n\nconst filterFields: FilterField\u003cProduct\u003e[] = [\n  { key: \"name\", label: \"Name\", type: \"text\" },\n  {\n    key: \"category\",\n    label: \"Category\",\n    type: \"select\",\n    options: [\"Electronics\", \"Audio\", \"Appliances\", \"Wearables\"],\n  },\n  { key: \"price\", label: \"Max Price\", type: \"number\" },\n];\n\nconst actions: Action\u003cProduct\u003e[] = [\n  {\n    label: \"View\",\n    onClick: (product) =\u003e {\n      console.log(\"Viewing product:\", product);\n      alert(`Viewing ${product.name}`);\n    },\n  },\n  {\n    label: \"Edit\",\n    onClick: (product) =\u003e {\n      console.log(\"Editing product:\", product);\n      alert(`Editing ${product.name}`);\n    },\n  },\n];\n\nexport default function Example() {\n  return (\n    \u003cdiv className=\"container mx-auto py-10\"\u003e\n      \u003cDynamicDatatable\u003cProduct\u003e\n        data={products}\n        columns={columns}\n        filterFields={filterFields}\n        actions={actions}\n        title=\"Product Catalog\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## Development\n\n### Scripts\n- `npm start`: Runs the script to generate type definitions.\n- `npm test`: Runs tests (if any).\n\n### Dependencies\n- `fs`: Node.js file system module.\n- `path`: Node.js path module.\n\n---\n\n## Contributing\nContributions are welcome! Please follow these steps:\n1. Fork the repository.\n2. Create a new branch for your feature or bugfix.\n3. Submit a pull request.\n\n---\n\n## License\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n## Acknowledgments\n- **MerriamTables**: [GitHub Repository](https://github.com/suwi-lanji/merriamtables)\n- **shadcn tables**: [Documentation](https://ui.shadcn.com/docs/components/table)\n- **TanStack Table**: [Documentation](https://tanstack.com/table/v8)\n\n---\n\n## Contact\nFor questions or feedback, please open an issue on the [GitHub repository](https://github.com/suwi-lanji/view-layer-type-defs).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuwi-lanji%2Fview-layer-type-defs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuwi-lanji%2Fview-layer-type-defs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuwi-lanji%2Fview-layer-type-defs/lists"}