{"id":34834587,"url":"https://github.com/cerchie/component-library-repo","last_synced_at":"2026-05-23T00:05:36.463Z","repository":{"id":234314860,"uuid":"708167232","full_name":"Cerchie/component-library-repo","owner":"Cerchie","description":"exercise with css components","archived":false,"fork":false,"pushed_at":"2023-10-21T18:16:23.000Z","size":869,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T02:08:33.862Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cerchie.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}},"created_at":"2023-10-21T18:12:38.000Z","updated_at":"2024-06-30T15:53:26.000Z","dependencies_parsed_at":"2024-04-18T21:00:58.394Z","dependency_job_id":"2e767b85-1bfd-4b8f-9f51-e7b395b44c39","html_url":"https://github.com/Cerchie/component-library-repo","commit_stats":null,"previous_names":["cerchie/component-library-repo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Cerchie/component-library-repo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fcomponent-library-repo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fcomponent-library-repo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fcomponent-library-repo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fcomponent-library-repo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cerchie","download_url":"https://codeload.github.com/Cerchie/component-library-repo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cerchie%2Fcomponent-library-repo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28032293,"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","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2025-12-25T16:00:06.780Z","updated_at":"2025-12-25T16:00:11.279Z","avatar_url":"https://github.com/Cerchie.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Component Library Workshop\n\nIn this workshop, we'll build 3 components from scratch:\n\n1. ProgressBar\n2. Select\n3. IconInput\n\nMost of the pertinent information will be stored in the Figma document (https://www.figma.com/file/u0wCdLXheiN9f2FmAuPsE9/Mini-Component-Library), but this README will contain some additional information to help you on your mission!\n\nTwo fully-formed components have already been included, to be used as-needed in your work:\n\n- `Icon`, an icon component that uses `react-feather` to render various icons\n- `VisuallyHidden`, a component that allows us to make text available to screen-reader users, but not to sighted users.\n\nAdditionally, all of the colors you'll need are indexed in `constants.js`.\n\nAll components in this project use [the `Roboto` font](https://fonts.google.com/specimen/Roboto). This font is already included in the Storybook environment, and is already applied to all elements. It comes in two weights:\n\n- 400 (default)\n- 700 (bold)\n\n## Running Storybook\n\nThis project uses Storybook, a component development tool.\n\nFirst, install dependencies with `npm install`.\n\nOnce dependencies are installed, you can start storybook by running:\n\n```\nnpm run start\n```\n\nOnce running, you can visit storybook at http://localhost:6006.\n\n## Troubleshooting\n\nYou may get an error when running the `start` script that looks like this:\n\n```\nError: error:0308010C:digital envelope routines::unsupported\n    at new Hash (node:internal/crypto/hash:67:19)\n    at Object.createHash (node:crypto:130:10)\n```\n\nYou can fix this issue either by downgrading to Node 16, or by updating the `package.json` file as follows:\n\n```diff\n  \"scripts\": {\n-   \"start\": \"start-storybook -p 6006 -s public\",\n+   \"start\": \"NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -s public\",\n  },\n```\n\nFor more info, check out the [Troubleshooting Guide](https://courses.joshwcomeau.com/troubleshooting) on the course platform.\n\n## The Components\n\n### ProgressBar\n\nThe figma document mentions that this component should be \"accessible\". You can learn how to build a semantically-valid, accessible progress-bar component by reading this doc: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role\n\nThis component uses a **box shadow**. We haven't seen this property yet! For now, you can achieve this effect by copying the following CSS declaration into your component:\n\n```css\nbox-shadow: inset 0px 2px 4px ${COLORS.transparentGray35};\n```\n\nWe'll learn much more about the `box-shadow` property in future modules =)\n\n### Select\n\nThe Select component will need a down-arrow icon! You can use the `chevron-down` ID with the `Icon` component.\n\nWe want to use a native `\u003cselect\u003e` tag in this component, so a bit of precursory HTML has been provided.\n\nThis component also includes a function, `getDisplayedValue`. This component uses some React APIs to work out the text that should be displayed. The value isn't currently used, but you can make use of it if needed, depending on your implementation.\n\n\u003e **NOTE:** Hiding the built-in chevron\n\u003e\n\u003e The `\u003cselect\u003e` tag has a built-in chevron (downward-pointing\n\u003e character), but it's inconsistent between browsers. We want to\n\u003e use the provided “chevron-down” icon. But how do we replace the\n\u003e default built-in one??\n\u003e\n\u003e This is something we haven't learned how to do, and so you'll need\n\u003e to do some googling + experimentation. I want you to get a bit\n\u003e of practice trying to tackle “unconventional” challenges like this!\n\u003e\n\u003e If you get stuck and/or would like a hint, you'll find one on\n\u003e the solution page:\n\u003e https://courses.joshwcomeau.com/css-for-js/03-components/19-workshop-select#select\n\n### IconInput\n\nThis component also uses the `Icon` component — the specific ID will be provided as a prop.\n\nThis component requires bold text. You can achieve this look by using `font-weight: 700`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerchie%2Fcomponent-library-repo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcerchie%2Fcomponent-library-repo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcerchie%2Fcomponent-library-repo/lists"}