{"id":15504754,"url":"https://github.com/alanbsmith/component-library-starter","last_synced_at":"2025-04-23T01:08:38.596Z","repository":{"id":78447953,"uuid":"108331027","full_name":"alanbsmith/component-library-starter","owner":"alanbsmith","description":"a small starter for building a component library with styled-components","archived":false,"fork":false,"pushed_at":"2018-01-30T04:07:05.000Z","size":558,"stargazers_count":79,"open_issues_count":1,"forks_count":16,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-23T01:08:33.304Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://alanbsmith.github.io/component-library-starter/","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-25T22:03:13.000Z","updated_at":"2024-03-12T19:03:34.000Z","dependencies_parsed_at":"2023-04-22T21:15:44.774Z","dependency_job_id":null,"html_url":"https://github.com/alanbsmith/component-library-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fcomponent-library-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fcomponent-library-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fcomponent-library-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alanbsmith%2Fcomponent-library-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alanbsmith","download_url":"https://codeload.github.com/alanbsmith/component-library-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250349056,"owners_count":21415914,"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:51.426Z","updated_at":"2025-04-23T01:08:38.583Z","avatar_url":"https://github.com/alanbsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Component Library Starter\n_a small starter for building a component library with [styled-components](https://github.com/styled-components/styled-components) 💅_\n\n## Overview\nThis 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 [styled-components-modifiers](https://github.com/Decisiv/styled-components-modifiers) 💅. This\n starter is designed to help you create your own components and easily publish them to npm.\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. I've added an initial\n `.eslintrc` file for some basic configuration. Feel free to edit or replace it as needed. The\n intent is to help give you a guide for syntax as you build your application. However, if the\n linters are too distracting and / or confusing, feel free to ignore them._\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## Publishing\nIf you already have an account with npm, you can simply run:\n```\n$ npm login\n$ npm publish\n```\n\nIf you don't have an account with npm:\n\n_**NOTE:** Your email address is public_\n```\n$ npm set init.author.name \"Your Name\"\n$ npm set init.author.email \"you@example.com\"\n$ npm set init.author.url \"http://yourblog.com\"\n$ npm adduser\n$ npm publish\n```\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/component-library-starter/blob/master/.github/CONTRIBUTING.md).\n\n## License\n[MIT](https://github.com/alanbsmith/component-library-starter/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fcomponent-library-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falanbsmith%2Fcomponent-library-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falanbsmith%2Fcomponent-library-starter/lists"}