{"id":18254270,"url":"https://github.com/brikcss/component","last_synced_at":"2025-04-08T21:47:27.721Z","repository":{"id":143745456,"uuid":"110300925","full_name":"brikcss/component","owner":"brikcss","description":"A scaffolding / starter repo for new brikcss components.","archived":false,"fork":false,"pushed_at":"2018-11-08T20:42:44.000Z","size":226,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-14T17:16:19.083Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brikcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-10T23:07:01.000Z","updated_at":"2017-11-11T23:28:03.000Z","dependencies_parsed_at":"2023-05-26T18:45:47.371Z","dependency_job_id":null,"html_url":"https://github.com/brikcss/component","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934808,"owners_count":21020724,"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-11-05T10:11:20.371Z","updated_at":"2025-04-08T21:47:27.696Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brikcss Component\n\n\u003e A scaffolding / starter repo for new [brikcss](https://github.com/brikcss/) components. Follow these steps to set up a new component.\n\n[![npm (scoped)](https://img.shields.io/npm/v/@brikcss/component.svg?style=flat-square)](https://www.npmjs.com/package/@brikcss/component\n) [![npm (scoped)](https://img.shields.io/npm/dm/@brikcss/component.svg?style=flat-square)](https://www.npmjs.com/package/@brikcss/component\n) [![Travis branch](https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master)](https://github.com/brikcss/component/tree/master\n) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/\n) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release\n) [![npm](https://img.shields.io/npm/l/express.svg?style=flat-square)](https://choosealicense.com/licenses/mit/)\n\n\u003c!-- MarkdownTOC --\u003e\n\n1. [Creating a new component](#creating-a-new-component)\n\t1. [Configure the component](#configure-the-component)\n\t1. [Build the component](#build-the-component)\n\t1. [Set up the new component repo](#set-up-the-new-component-repo)\n\t1. [Set up the automated release](#set-up-the-automated-release)\n\n\u003c!-- /MarkdownTOC --\u003e\n\n\u003ca name=\"creating-a-new-component\"\u003e\u003c/a\u003e\n## Creating a new component\n\n- [ ] Clone [this repo](https://github.com/brikcss/component).\n- [ ] [Configure the component](#configure-the-component).\n- [ ] Install NPM packages with `npm install`.\n- [ ] [Build the component](#build-the-component) for your first commit / publish.\n- [ ] [Set up the new component repo](#set-up-the-new-component-repo).\n- [ ] _(optional)__ To publish your first release at `v0.0.1` (as opposed to `v1.0.0`, which is what the automated release does by default):\n\t- [ ] Update the `version` field in `package.json` to `0.0.1` (or the version you wish to start at).\n\t- [ ] Publish your first release manually:\n\t\t```bash\n\t\tnpm publish --tag=dev --access=public\n\t\t```\n\t- [ ] Update `version` in `package.json` back to `0.0.0-development`.\n\t- [ ] Delete all git tags (which come from the upstream / scaffold component repo).\n\t\t```bash\n\t\tgit tag | xargs git tag -d\n\t\t```\n\t- [ ] Create a git tag for `0.0.1` (or whatever version you started at) and push it (this is so semantic-release is able to recognize where you're at):\n\t\t```bash\n\t\t# Create the tag.\n\t\tgit tag v\u003cversion\u003e \u003ccommit hash\u003e\n\t\t# Push it to remote origin.\n\t\tgit push --tags origin master\n\t\t```\n- [ ] [Set up the automated release](#set-up-the-automated-release).\n\n\u003ca name=\"configure-the-component\"\u003e\u003c/a\u003e\n### Configure the component\n\n- [ ] `brikcss.config.js`: This sets up JS and SASS bundle compiling. See the example `brikcss.config.js` for details.\n- [ ] `.browsersync.js`:\n\t- [ ] `files` property to watch build files.\n\t- [ ] `server` property to set the correct `baseDir` and `index` values.\n\t- [ ] Any other browsersync settings as desired.\n- [ ] `.gitignore`.\n- [ ] `.travis.yml` (scripts fields).\n- [ ] `package.json`:\n\t- [ ] All fields with \"component\" to the new component name.\n\t- [ ] `description`.\n\t- [ ] `keywords`.\n\t- [ ] `main` and `module` with the correct entry files.\n\t- [ ] `files` with all files necessary for a release.\n\t- [ ] `scripts`:\n\t\t- [ ] `prod:clean` paths (and possibly add `mkdirp` to recreate `dist` dirs?).\n\t\t- [ ] `js:watch` and `js:lint` paths.\n\t\t- [ ] `sass:watch` and `sass:lint` paths.\n\t\t- [ ] If the component will have `dist` files, or if there are any tasks you want the release process to run prior to publishing, add the following NPM script to `package.json`:\n\t\t\t```js\n\t\t\t{\n\t\t\t\t// `prepublisOnly` runs right before `semantic-release` runs `npm publish`.\n\t\t\t\t\"prepublishOnly\": \"npm run prod\"\n\t\t\t}\n\t\t\t```\n\t\t- [ ] If you have `src` files that you wish to also place in `dist`:\n\t\t\t- [ ] Add the following NPM script:\n\t\t\t\t```js\n\t\t\t\t{\n\t\t\t\t\t\"sass:dist\": \"ln -sf ../src/sass/ ./dist/sass\",\n\t\t\t\t}\n\t\t\t\t```\n\t\t\t- [ ] Make sure to add this task to the `prod` task.\n\t- [ ] `devDependencies`.\n- [ ] `README.md`:\n\t- [ ] Update shields to show data for the new component.\n\t- [ ] Update the rest of `README.md` as desired.\n- [ ] `webpack.config.js` to ensure it compiles the correct JS files / bundles.\n- [ ] `sass.config.js`: This configures SASS \"bundles\", similar to how webpack process JS bundles. Example:\n\t```js\n\t// Each bundle tells the SASS build task:\n\t// \t1) All files (files) belonging to a SASS entry file (entry). Defaults the entry file.\n\t// \t2) Where to save the compiled file (output).\n\t// \t3) Which environments (envs) to compile for (i.e., minification?). Defaults to ['dev', 'prod'].\n\tmodule.exports = {\n\t\tdist: {\n\t\t\tentry: 'src/sass/_flipper-init.scss',\n\t\t\toutput: 'dist/css/flipper-vanilla.css',\n\t\t\tfiles: ['src/sass/*.scss'],\n\t\t\tenvs: ['dev', 'prod']\n\t\t},\n\t\texamples: {\n\t\t\tentry: 'examples/example.scss',\n\t\t\toutput: 'examples/flipper-sass.css',\n\t\t\tfiles: ['src/sass/*.scss', 'examples/example.scss'],\n\t\t\tenvs: ['dev']\n\t\t}\n\t};\n\t```\n\n\u003ca name=\"build-the-component\"\u003e\u003c/a\u003e\n### Build the component\n\nThe directory structure should be as follows:\n\n- `src`: Original source code.\n- `dist`: Files for distribution (if any).\n- `examples`: Code or test examples.\n- `docs`: Documentation.\n- `tests`: UI and unit tests.\n- `lib`: Helper scripts (i.e., NPM scripts or git hooks).\n\n\u003ca name=\"set-up-the-new-component-repo\"\u003e\u003c/a\u003e\n### Set up the new component repo\n\n- [ ] Create a new repo in GitHub for the new component.\n- [ ] Configure remote tracking as follows:\n\t```bash\n\t# IMPORTANT: Set new master branch as upstream (not remote).\n\t# Otherwise commits will go to the component scaffold repo.\n\t# Setting as upstream also allows you to stay in sync with component scaffold repo.\n\tgit remote rename origin upstream\n\n\t# Create a new local master branch based on upstream/master.\n\tgit branch -m master master-upstream # Rename local upstream/master first.\n\tgit checkout -b master master-upstream # Create new local master.\n\tgit branch -d master-upstream # Delete local master-upstream.\n\n\t# Add the new GitHub repo as the remote origin.\n\tgit remote add origin \u003cgithub repo url\u003e\n\n\t# Run this the first time you push changes.\n\t# This will set up origin/master to track local master and push.\n\tgit push -u origin master\n\t```\n- [ ] When you run `git remote -v`, the `origin` should track the new GitHub repo and the `upstream` should track this component scaffold repo.\n- [ ] In the future, to stay in sync with this component `upstream` repo:\n\t```bash\n\tgit merge upstream/master\n\t```\n\n\u003ca name=\"set-up-the-automated-release\"\u003e\u003c/a\u003e\n### Set up the automated release\n\n- [ ] Set up [`semantic-release`](https://github.com/semantic-release/semantic-release) by running `semantic-release-cli setup`. _**Important**: Make sure to not overwrite the `.travis.yml` file we already have._\n- [ ] After it is published, create a `dev` channel / dist-tag:\n\t```bash\n\tnpm dist-tag add @brikcss/\u003ccomponent\u003e@\u003cversion\u003e dev -d\n\t```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Fcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fcomponent/lists"}