{"id":15504722,"url":"https://github.com/alanbsmith/koine","last_synced_at":"2026-01-20T04:01:55.482Z","repository":{"id":78448030,"uuid":"107029138","full_name":"alanbsmith/koine","owner":"alanbsmith","description":"a common UI component library","archived":false,"fork":false,"pushed_at":"2018-02-02T23:19:18.000Z","size":864,"stargazers_count":4,"open_issues_count":15,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T19:39:59.467Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://alanbsmith.github.io/koine/","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/alanbsmith.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","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":"2017-10-15T16:30:51.000Z","updated_at":"2021-11-15T09:48:30.000Z","dependencies_parsed_at":"2023-04-22T17:45:39.570Z","dependency_job_id":null,"html_url":"https://github.com/alanbsmith/koine","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/alanbsmith/koine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanbsmith","download_url":"https://codeload.github.com/alanbsmith/koine/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28595318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T02:08:49.799Z","status":"ssl_error","status_checked_at":"2026-01-20T02:08:44.148Z","response_time":117,"last_error":"SSL_read: 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":[],"created_at":"2024-10-02T09:19:44.565Z","updated_at":"2026-01-20T04:01:55.475Z","avatar_url":"https://github.com/alanbsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Koine\n_a common ui component library_\n\n## Overview\nKoine is my personal component library, while it's small, it's designed to be extensible and\n reusable across multiple application. This component lib is set up to use\n [styled-components](https://github.com/styled-components/styled-components),\n [polished](https://github.com/styled-components/polished), and\n [styled-components-modifiers](https://github.com/Decisiv/styled-components-modifiers) 💅.\n\n## Installation\nThis package is available on npm as `koine`, and you can find it\n [here](https://www.npmjs.com/package/koine).\n\nTo install the latest stable version with `yarn`:\n\n```sh\n$ yarn add koine\n```\n\n...or with `npm`:\n\n```sh\n$ npm install koine\n```\n\n## Up \u0026 Running\nTo install dependencies with Yarn, run:\n```sh\n$ yarn\n```\n\nor to install with npm, run:\n\n```sh\n$ npm install\n```\n\n## File Structure\nThis component library borrows its structure from [BEM](http://getbem.com/introduction/) and is set\n up to use Blocks, Elements, and Modifiers. Below is a description of each.\n\n### Blocks\nBlocks are the highest level of abstraction in the Blocks, Elements, Modifiers concept.\n They are responsible for providing the context for Elements, handling UI logic, and rendering the\n Elements within the Block. They are not connected to application state, nor do they handle any\n business logic.\n\n### Elements\nElements are the smallest, indivisible parts of UI. They are responsible for actually rendering the\n UI. They do not handle application logic or UI logic, but they do handle their own modifiers which\n modify the element’s style. Elements generally exist within the context of a Block (as their own\n file in the Block’s directory) allowing the reuse of that set of Elements, but they are not\n exclusively bound to blocks. An example of a stand-alone Element would be an A, Link, H3, or P.\n These common elements live in `lib/elements`.\n\n### Modifiers\nThis library utilizes\n [`styled-components-modifiers`](https://github.com/Decisiv/styled-components-modifiers) to build\n modifiers. Modifiers are small functions that allow us to alter the properties of an Element.\n They primarily live in the Element's file and are solely responsible for modifying styles.\n Some modifiers are common to multiple Elements. An example would be `fontWeights`.\n These common modifiers live in `lib/modifiers`\n\n### An Example Structure\n```\n├ lib/\n├── blocks/\n|   ├── Card\n|   |   ├── Body.js     // \u003c- Element\n|   |   ├── Footer.js   // \u003c- Element\n|   |   ├── Header.js   // \u003c- Element\n|   |   └── index.js    // \u003c- Block\n|   └── index.js        // \u003c- export for all Blocks\n├── elements/\n|   ├── A\n|   |   ├── __tests__\n|   |   |   ├── __snapshots__\n|   |   |   |   └── index.js.snap   // \u003c- Snapshot Test\n|   |   |   └── index.js            // \u003c- Test\n|   |   └── index.js                // \u003c- Element\n|   ├── Link\n|   |   └── index.js                // \u003c- Element\n|   ├── H3\n|   |   └── index.js                // \u003c- Element\n|   ├── P\n|   |   └── index.js                // \u003c- Element\n|   └── etc.\n|   └── index.js                    // \u003c- export for all Blocks\n├── modifiers/\n|   ├── fontWeights\n|   └── etc.\n└── index.js                        // \u003c- main export for the library\n```\n\n## Local Development\n\n### Module Development Workflow\nHelpful information on development workflow in this library lives\n [here](https://gist.github.com/alanbsmith/6c581e5042b8e5e558b0b4454192eb69).\n\n### Linting\n_**NOTE:** The linter will run against everything in the `lib` directory._\n\n### JavaScript Linting\n_This assumes you have eslint and eslint-watch installed. If you don't, run the following:_\n```\n$ npm i -g eslint eslint-watch\n```\nor if you need permissions:\n```\n$ sudo npm i -g eslint eslint-watch\n```\n\nTo run the linter once:\n```\n$ yarn lint:js\n```\n\nTo run the watch task:\n```\n$ yarn lint:js:watch\n```\n\n#### Style Linting\nI've also added a style linter for Sass / SCSS.\n\nTo run the style linter:\n```\n$ yarn lint:style\n```\n\n#### Linting JavaScript \u0026 Styles\nTo run both linters:\n```\n$ yarn lint\n```\n\n### Testing\nAn initial test suite has been setup with two tests (one passing and one intentionally failing).\n We're using Jest Snapshots for our initial test setup, though Enzym and Expect are also available.\n The basic test setup lives in `./__tests__`. The main configuration for Jest lives at the bottom\n of `package.json`.  I've also added a few handy scripts, which I've listed below. Jest also gives\n us a test coverage tool for free, so I've added that too. The setup is at the bottom of\n `package.json`. Everything is set to 90% coverage, but your welcome to update that to whatever\n you'd like.\n\nTo run the tests once:\n```\n$ npm test\n```\n\nTo run the watch script (for only relevant test files)\n```\n$ npm run test:watch\n```\n\nTo run the watch script (for all test files)\n```\n$ npm run test:watchAll\n```\n\nTo view the coverage report:\n```\n$ npm run test:coverage:report\n```\n\n### Review\nIf you'd like to run the linters and tests at once (this is a nice check before pushing to\nGithub or deploys), you can run:\n\n```\n$ npm run review\n```\n\n### Build\n_**NOTE:** When you run `build`, Babel will create a `build` directory. This is what your users\nwill interact with when they use your library. Nothing in `lib` gets shipped with your\npublished module._\n\nRun once:\n```\n$ npm run build\n```\n\nRun the watch script:\n```\n$ npm run build:watch\n```\n\n_**NOTE:** the build script runs in the `prepublish` script just before you publish to npm._\n\n## Contributing\nI am thankful for any contributions made by the community. By contributing you agree to abide by\nthe Code of Conduct in the [Contributing Guidelines](https://github.com/alanbsmith/koine/blob/master/.github/CONTRIBUTING.md).\n\n## License\n[MIT](https://github.com/alanbsmith/koine/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fkoine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanbsmith%2Fkoine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fkoine/lists"}