{"id":15020155,"url":"https://github.com/padraigfl/packard-belle","last_synced_at":"2025-04-09T14:09:19.895Z","repository":{"id":34481164,"uuid":"144895719","full_name":"padraigfl/packard-belle","owner":"padraigfl","description":"Windows 98 React Component Library","archived":false,"fork":false,"pushed_at":"2024-02-02T00:15:51.000Z","size":6743,"stargazers_count":186,"open_issues_count":4,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-02T12:08:58.681Z","etag":null,"topics":["desktop","osjs","reimplementation","remark","web-desktop","windows95","windows98"],"latest_commit_sha":null,"homepage":"https://packard-belle.netlify.app","language":"JavaScript","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/padraigfl.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-08-15T19:37:51.000Z","updated_at":"2025-03-15T15:50:41.000Z","dependencies_parsed_at":"2024-09-24T21:16:12.223Z","dependency_job_id":null,"html_url":"https://github.com/padraigfl/packard-belle","commit_stats":{"total_commits":125,"total_committers":3,"mean_commits":"41.666666666666664","dds":"0.33599999999999997","last_synced_commit":"c8b2479ae4b095f97d6db2ef4c022606dcdb124a"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/padraigfl%2Fpackard-belle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/padraigfl%2Fpackard-belle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/padraigfl%2Fpackard-belle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/padraigfl%2Fpackard-belle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/padraigfl","download_url":"https://codeload.github.com/padraigfl/packard-belle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054196,"owners_count":21039952,"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":["desktop","osjs","reimplementation","remark","web-desktop","windows95","windows98"],"created_at":"2024-09-24T19:54:39.251Z","updated_at":"2025-04-09T14:09:19.863Z","avatar_url":"https://github.com/padraigfl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Packard Belle: A nostalgic component UI\n\n[![Coverage Status](https://coveralls.io/repos/github/padraigfl/packard-belle/badge.svg?branch=master)](https://coveralls.io/github/padraigfl/packard-belle?branch=master) [![Build Status](https://travis-ci.org/padraigfl/packard-belle.svg?branch=master)](https://travis-ci.org/padraigfl/packard-belle) [![Maintainability](https://api.codeclimate.com/v1/badges/57fda55403f052a1579b/maintainability)](https://codeclimate.com/github/padraigfl/packard-belle/maintainability)\n\nThe primary object of this project is to further my knowledge of various browsers and see how far I can push CSS.\n\nComponents previewable at http://packard-belle.herokuapp.com/\n\nDemo site previewable https://packard-belle.netlify.com\n\nDemo site source https://github.com/padraigfl/packard-belle-desktop\n\n## Goals\n\n### 1. To create a CSS framework that mimics my first home computer\n\nA CSS framework primarily because this is mainly a CSS and browser learning experiment. On top of that I suspect the component behaviour can swap out styles to effectively work as skins with minimal additional changes for a fairly wide range of desktop UIs\n\n### 2. To create a component library which mimics standard desktop behaviours\n\nFollowing on from 1, the goals of this step are to initially mimic the behaviours of my first computer as close as possible. Where CSS either doesn't work, or provides an unsatisfactory solution (e.g. cursor triggered dropdown menus), the goal is to use the most globally acceptable javascript as I can find to trigger the required changes.\nFor certain components (e.g. select boxes), I'm using quick solutions for now, ain't nobody got the time for that stuff.\n\nCode quality needs improvement currently as the hacking out a working model is largely done.\n\n### 3. Build a website utilising the components\n\nTo be done, I hope to do this in the next few weeks and expand and refine the necessary components as needed.\n\n## Scripts\n\n1. `npm run build` For building storybook\n2. `npm run build:css` For exporting CSS framework (needs work)\n3. `npm run build:module` For building ES and CJS outputs\n\n## Indexing\n\nThanks to @cryiography for the script to autogenerate these\n\n\u003c!--- INJECTION:START --\u003e\n\n| Name | Docs | Dir | Source |\n| ------------------- | ------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------- |\n| Button | N/A | [source dir](src/components/Button) | [/Button.js](src/components/Button/Button.js) |\n| ButtonForm | N/A | [source dir](src/components/ButtonForm) | [/ButtonForm.js](src/components/ButtonForm/ButtonForm.js) |\n| ButtonIconLarge | N/A | [source dir](src/components/ButtonIconLarge) | [/ButtonIconLarge.js](src/components/ButtonIconLarge/ButtonIconLarge.js) |\n| ButtonIconSmall | N/A | [source dir](src/components/ButtonIconSmall) | [/ButtonIconSmall.js](src/components/ButtonIconSmall/ButtonIconSmall.js) |\n| ButtonNav | N/A | [source dir](src/components/ButtonNav) | [/ButtonNav.js](src/components/ButtonNav/ButtonNav.js) |\n| ButtonProgram | N/A | [source dir](src/components/ButtonProgram) | [/ButtonProgram.js](src/components/ButtonProgram/ButtonProgram.js) |\n| ButtonStart | N/A | [source dir](src/components/ButtonStart) | [/ButtonStart.js](src/components/ButtonStart/ButtonStart.js) |\n| DetailsSection | N/A | [source dir](src/components/DetailsSection) | [/DetailsSection.js](src/components/DetailsSection/DetailsSection.js) |\n| ExplorerView | N/A | [source dir](src/components/ExplorerView) | [/ExplorerView.js](src/components/ExplorerView/ExplorerView.js) |\n| FormCheckbox | N/A | [source dir](src/components/FormCheckbox) | [/index.js](src/components/FormCheckbox/index.js) |\n| FormFakeSelect | N/A | [source dir](src/components/FormFakeSelect) | [/index.js](src/components/FormFakeSelect/index.js) |\n| FormInputText | N/A | [source dir](src/components/FormInputText) | [/index.js](src/components/FormInputText/index.js) |\n| FormRadio | N/A | [source dir](src/components/FormRadio) | [/index.js](src/components/FormRadio/index.js) |\n| FormSelect | [DOCS](src/components/FormSelectDISABLED/README.md) | [source dir](src/components/FormSelectDISABLED) | [/index.js](src/components/FormSelectDISABLED/index.js) |\n| FormSelectBox | N/A | [source dir](src/components/FormSelectBox) | [/index.js](src/components/FormSelectBox/index.js) |\n| FormSelectBoxSimple | N/A | [source dir](src/components/FormSelectBoxSimple) | [/index.js](src/components/FormSelectBoxSimple/index.js) |\n| FormToggle | N/A | [source dir](src/components/FormToggle) | [/index.js](src/components/FormToggle/index.js) |\n| Frame | N/A | [source dir](src/components/Frame) | [/Frame.js](src/components/Frame/Frame.js) |\n| Icon | N/A | [source dir](src/components/Icon) | [/Icon.js](src/components/Icon/Icon.js) |\n| IconExplorerIcon | N/A | [source dir](src/components/IconExplorerIcon) | [/IconExplorerIcon.js](src/components/IconExplorerIcon/IconExplorerIcon.js) |\n| IconListIcon | N/A | [source dir](src/components/IconListIcon) | [/IconListIcon.js](src/components/IconListIcon/IconListIcon.js) |\n| MenuBar | N/A | [source dir](src/components/MenuBar) | [/MenuBar.js](src/components/MenuBar/MenuBar.js) |\n| ResizableIconsList | N/A | [source dir](src/components/ResizableIconsList) | [/ResizableIconsList.js](src/components/ResizableIconsList/ResizableIconsList.js) |\n| StandardMenu | N/A | [source dir](src/components/StandardMenu) | [/StandardMenu.js](src/components/StandardMenu/StandardMenu.js) |\n| StandardMenuHOC | N/A | [source dir](src/components/StandardMenuHOC) | [/StandardMenuHOC.js](src/components/StandardMenuHOC/StandardMenuHOC.js) |\n| StartMenu | N/A | [source dir](src/components/StartMenu) | [/StartMenu.js](src/components/StartMenu/StartMenu.js) |\n| TaskBar | N/A | [source dir](src/components/TaskBar) | [/TaskBar.js](src/components/TaskBar/TaskBar.js) |\n| Window | N/A | [source dir](src/components/Window) | [/Window.js](src/components/Window/Window.js) |\n| WindowAlert | N/A | [source dir](src/components/WindowAlert) | [/WindowAlert.js](src/components/WindowAlert/WindowAlert.js) |\n| WindowExplorer | N/A | [source dir](src/components/WindowExplorer) | [/WindowExplorer.js](src/components/WindowExplorer/WindowExplorer.js) |\n| WindowProgram | N/A | [source dir](src/components/WindowProgram) | [/WindowProgram.js](src/components/WindowProgram/WindowProgram.js) |\n\n\u003c!--- INJECTION:END --\u003e\n\n## Credits\n\nBuild tools largely created with help of https://hackernoon.com/making-of-a-component-library-for-react-e6421ea4e6c7\n\nFont created using http://www.pentacom.jp/pentacom/bitfontmaker2/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpadraigfl%2Fpackard-belle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpadraigfl%2Fpackard-belle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpadraigfl%2Fpackard-belle/lists"}