{"id":15504570,"url":"https://github.com/alanbsmith/koine-ui-utils","last_synced_at":"2025-03-28T18:43:32.863Z","repository":{"id":78448035,"uuid":"111581512","full_name":"alanbsmith/koine-ui-utils","owner":"alanbsmith","description":"common utils and theming for the koine component library","archived":false,"fork":false,"pushed_at":"2017-12-02T22:07:07.000Z","size":60,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-19T18:31:29.026Z","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":"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-11-21T17:39:12.000Z","updated_at":"2017-12-01T08:59:39.000Z","dependencies_parsed_at":"2023-04-22T17:45:54.339Z","dependency_job_id":null,"html_url":"https://github.com/alanbsmith/koine-ui-utils","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"00a3bdd5e8e617a58d52c6c1824cc859d49bc0f3"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine-ui-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine-ui-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine-ui-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fkoine-ui-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanbsmith","download_url":"https://codeload.github.com/alanbsmith/koine-ui-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246083007,"owners_count":20720893,"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":[],"created_at":"2024-10-02T09:19:00.812Z","updated_at":"2025-03-28T18:43:32.832Z","avatar_url":"https://github.com/alanbsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Koine UI Utils\n_a library of common utils for [Koine](https://github.com/alanbsmith/koine)_\n\n## Installation\nThis package is available on npm as koine-ui-utils, and you can find it [here](https://www.npmjs.com/package/koine-ui-utils).\n\nTo install the latest stable version with yarn:\n\n```sh\n$ yarn add koine-ui-utils\n```\n\nor with npm:\n\n```sh\n$ npm install koine-ui-utils --save\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## Overview\nThere are three main exports\nfrom this lib:\n* `buildGlobalStyles()` - a function for building a global style string for styled-components `injectGlobal` function\n* `padScale()` - a function for scaling dimensions based on the theme's `basePad` dimensions\n* `theme` - an object containing all the attributes for our UI theme\n\n### buildGlobalStyles()\nBelow is an example use of this function:\n\n```javascript\nimport { injectGlobal } from 'styled-components';\nimport { buildGlobalStyles, theme }  from 'koine-ui-utils';\n\ninjectGlobal([buildGlobalStyles(theme)]);\n```\n\n### padScale()\nBelow is an example use of this function:\n\n```javascript\nimport { padScale } from 'koine-ui-utils';\nimport { rem } from 'polished';\n\n// `padScale` returns a raw number\n// given `theme.dimensions.basePad` is `8`, a scale of 3 would return `24`\n// wrapping this in `rem()` keeps the units consistent\n// this example would return `padding: 2rem 3rem;`\nconst WideButton = styled.button`\n  padding: ${rem(padScale(2))} ${rem(padScale(3))};\n`;\n```\n\n### theme\nThe theme object look like this:\n\n```javascript\n{\n  animations: {\n    // css keyframes\n    bounce\n    slidedown\n  },\n  colors:\n    base: {\n      // graytones\n      chrome000: STRING,\n      chrome050: STRING,\n      chrome100: STRING,\n      chrome200: STRING,\n      chrome300: STRING,\n      chrome400: STRING,\n      chrome500: STRING,\n      chrome600: STRING,\n      chrome700: STRING,\n      chrome800: STRING,\n      chrome900: STRING,\n\n      // ui colors\n      background: STRING,\n      link: STRING,\n      linkHover: STRING,\n      linkVisited: STRING,\n      overlay: STRING,\n      shadow: STRING,\n      shadowLight: STRING,\n      text: STRING,\n      textLight: STRING,\n    },\n    brand: {\n      primary: STRING,\n      secondary: STRING,\n      tertiary: STRING,\n      blue: STRING,\n       purple: STRING,\n      pink: STRING,\n      orange: STRING,\n      green: STRING,\n      yellow: STRING,\n    },\n    status: {\n      danger: STRING,\n      default: STRING,\n      info: STRING,\n      success: STRING,\n      warning: STRING,\n    },\n  },\n  dimensions: {\n    baseFontSize: NUMBER,\n    basePad: NUMBER,\n  },\n  fonts: {\n    primary: STRING,\n    primaryFallback: STRING,\n  },\n  fontWeights: {\n    light: NUMBER,\n    normal: NUMBER,\n    semiBold: NUMBER,\n    bold: NUMBER,\n  },\n}\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\nTo run the linter once:\n```sh\n$ yarn lint\n```\n\nTo run the watch task:\n```sh\n$ yarn lint:watch\n```\n\n### Testing\nTo run the tests once:\n```sh\n$ yarn test\n```\n\nTo run the watch script (for only relevant test files)\n```sh\n$ yarn test:watch\n```\n\nTo run the watch script (for all test files)\n```sh\n$ yarn test:watchAll\n```\n\nTo view the coverage report:\n```sh\n$ yarn 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```sh\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```sh\n$ npm run build\n```\n\nRun the watch script:\n```sh\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-ui-utils/blob/master/.github/CONTRIBUTING.md).\n\n## License\n[MIT](https://github.com/alanbsmith/koine-ui-utils/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fkoine-ui-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanbsmith%2Fkoine-ui-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fkoine-ui-utils/lists"}