{"id":18459087,"url":"https://github.com/carcajadaartificial/lunchbox","last_synced_at":"2025-04-08T05:34:49.415Z","repository":{"id":60793228,"uuid":"544670930","full_name":"CarcajadaArtificial/lunchbox","owner":"CarcajadaArtificial","description":"UI Library 🍱 for Deno 🦕 Fresh 🍋","archived":false,"fork":false,"pushed_at":"2025-03-21T17:05:41.000Z","size":1203,"stargazers_count":40,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T20:36:14.038Z","etag":null,"topics":["components","css","deno","denofresh","denoland","framework","fresh","scss","shadcn-ui","ssr","typescript","ui","ui-components","uikit"],"latest_commit_sha":null,"homepage":"https://jsr.io/@lunchbox/ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CarcajadaArtificial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2022-10-03T02:37:05.000Z","updated_at":"2025-03-24T04:58:56.000Z","dependencies_parsed_at":"2023-02-18T02:16:05.327Z","dependency_job_id":"f8c4461b-8ab0-4d06-ab33-b4bf18a1adf9","html_url":"https://github.com/CarcajadaArtificial/lunchbox","commit_stats":null,"previous_names":["carcajadaartificial/ana-components"],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Flunchbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Flunchbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Flunchbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CarcajadaArtificial%2Flunchbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CarcajadaArtificial","download_url":"https://codeload.github.com/CarcajadaArtificial/lunchbox/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785919,"owners_count":20995641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["components","css","deno","denofresh","denoland","framework","fresh","scss","shadcn-ui","ssr","typescript","ui","ui-components","uikit"],"created_at":"2024-11-06T08:21:45.263Z","updated_at":"2025-04-08T05:34:49.399Z","avatar_url":"https://github.com/CarcajadaArtificial.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍱 Lunchbox\n\n[![JSR](https://jsr.io/badges/@lunchbox/ui)](https://jsr.io/@lunchbox/ui)\n[![JSR](https://jsr.io/badges/@lunchbox/ui/score)](https://jsr.io/@lunchbox/ui)\n\n`` Hello ( ´ ω ` )ノﾞ `` Welcome to 🍱 Lunchbox. So... you're into Deno 🦕 Fresh\n🍋? Damn, me too. I've found myself using nothing but Fresh for most of my web\ndev projects. But I'm not that much of a user of existing web component\nlibraries. Even though I respect these, I'm more of a _do-it-yourself_ kind of\nguy. That is why I created Lunchbox, and I couldn't help creating an opinionated\nproduct that is built to have my dream features.\n\n## Ideas behind the library\n\nAlright, so what are these features? Instead of listing what can _technically_\nbe done with this library, the way to describe it is by its core ideas.\n\n### Based on [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)\n\nShoutout to [Brad Frost](https://bradfrost.com/), thank you for this great piece\nof work. A popular concept about modularity in design systems is to consider\nthem inherently hierarchical. In this, I strongly disagree because atoms are of\nno less importance than organisms. But I do agree that they have one\nfundamentally different characteristic. Atoms are components only made by\nnature's _subatomic particles_ a.k.a. pure Tailwind Classes. Am I stretching too\nfar with the atomic analogy?\n\n- [Particles](https://jsr.io/@lunchbox/ui/doc/particles) are the fundamental\n  design tokens of your UI, represented as Tailwind styles. They help maintain\n  consistency and flexibility in your design system.\n\n- [Atoms](https://jsr.io/@lunchbox/ui/doc/atoms) are the basic building blocks\n  of your components, made up of HTML elements styled with Particles. They\n  encapsulate the simplest UI elements, ensuring a clean and modular design.\n\n- [Molecules](https://jsr.io/@lunchbox/ui/doc/molecules) are composed of Atoms\n  and sometimes Particles, serving as the standard unit of interface. They\n  strike a balance between simplicity and complexity, making them essential for\n  building cohesive UI components.\n\n### Trivial HTML good practices\n\nComponent libraries are usually ambiguous about how they handle inner logic,\ncreating the need to _find out how does it do X_. For example, some might have\nonly one component for both `\u003cinput/\u003e` and `\u003ctextarea/\u003e`, which might change\ndepending on a prop. \"Or was it something else? Wait, what was the name of the\nclass that changes when it's a TextArea?\" Having it closer to the HTML Element\nlogic makes the inner logic of the components really obvious and apparent.\n\nLet's take as an example the `\u003cInputField\u003e` molecule. When using it, you're\nexpected to follow best practices that enhance user experience (UX). This\nincludes providing a label and a contextual error message to guide the user. The\nprops for `\u003cInputField\u003e` are `label`, `error`, and `required`, which ensure that\nthe input is both informative and accessible.\n\nThe `InputField` molecule integrates a label with the input element, ensuring\nthat the input is nested within a label element for better semantics and\nusability. This design choice not only improves accessibility but also maintains\na consistent visual rhythm across the interface, adhering to good aesthetic\npractices.\n\nBy using the `\u003cInputField\u003e` component, you can create forms that are\nuser-friendly and visually appealing, while also ensuring that users receive\nimmediate feedback on their input.\n\n---\n\n## Getting started\n\nWelcome aboard! Whether you're diving into a brand new project or integrating\nLunchbox into an existing one, we've got you covered. Let’s break it down!\n\n### New Project\n\nStarting fresh? Awesome! Here’s how to get Lunchbox up and running in no time:\n\n1. **Run the Initialization Command** Kick things off by running:\n\n   ```bash\n   deno run -A jsr:@lunchbox/ui/init\n   ```\n\n2. **Imported Libraries** Your new project will come pre-loaded with some\n   fantastic libraries:\n\n   - **Fresh** + **Preact**: For building your web app.\n   - **Tailwind**: For styling like a pro.\n   - **@vyn/cn**: For class name management.\n   - **@deno/gfm**: For Markdown support.\n\n3. **Upgrade Your Components** After setting up, keep your components fresh by\n   running:\n   ```bash\n   deno run -A jsr:@lunchbox/ui/upgrade\n   ```\n   This ensures you’re always using the latest and greatest features!\n\n### Existing Project\n\nIntegrating Lunchbox into an existing project? No sweat! Here’s what you need to\ndo:\n\n1. **Add Lunchbox Package** First, include Lunchbox in your project with:\n\n   ```bash\n   deno add jsr:@lunchbox/ui\n   ```\n\n2. **Upgrade Components** Next, run the upgrade command to add the latest\n   components and static files:\n\n   ```bash\n   deno run -A jsr:@lunchbox/ui/upgrade\n   ```\n\n3. **Configure Tailwind** Import and install the `lunchboxPlugin` from\n   `@lunchbox/ui` and add it to your `tailwind.config.ts`. This step is crucial\n   for making the most out of your styling!\n\n   ```typescript:init/base/tailwind.config.ts\n   import type { Config } from \"tailwindcss\";\n   import { lunchboxPlugin } from \"@lunchbox/ui\"; // Ensure this package is installed\n   import typographyPlugin from \"npm:/@tailwindcss/typography@0.5.15\";\n\n    export default {\n      content: [\n        \"{routes,islands,components}/**/*.{ts,tsx}\", // Specify where to look for classes\n      ],\n      plugins: [lunchboxPlugin(), typographyPlugin], // Add Lunchbox and typography plugins\n    } satisfies Config;\n   ```\n\n4. **Fonts and Styles** Don’t forget to download and add the official fonts for\n   Lunchbox along with their styles. You can find these fonts in this same\n   repository in the `static` directory.\n\n5. **Configure `_app.tsx`** Finally, make sure to include the the stylesheet and\n   the `\u003cPage.Body/\u003e` atom in your `_app.tsx` route. This is where the magic\n   happens!\n\n   ```typescript:init/base/routes/_app.tsx\n    import type { PageProps } from \"fresh\";\n    import { Body } from \"lunchbox/atoms/Page.tsx\";\n\n    export default function App({ Component }: PageProps) {\n      return (\n        \u003chtml\u003e\n          \u003chead\u003e\n            {/* ... */}\n            \u003clink rel=\"stylesheet\" href=\"/styles.css\" /\u003e\n          \u003c/head\u003e\n          \u003cBody\u003e\n            \u003cComponent /\u003e\n          \u003c/Body\u003e\n        \u003c/html\u003e\n      );\n    }\n   ```\n\nAnd there you have it! You're all set to start building with Lunchbox. If you\nrun into any hiccups, just holler!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarcajadaartificial%2Flunchbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarcajadaartificial%2Flunchbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarcajadaartificial%2Flunchbox/lists"}