{"id":14970983,"url":"https://github.com/berkeley-gif/cal-adapt-svelte-components","last_synced_at":"2026-03-03T20:33:07.228Z","repository":{"id":39673046,"uuid":"474091410","full_name":"berkeley-gif/cal-adapt-svelte-components","owner":"berkeley-gif","description":"Component library and playground for developing Svelte UI components for Cal-Adapt.org and related GIF projects.","archived":false,"fork":false,"pushed_at":"2023-05-26T04:10:07.000Z","size":883,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-19T18:42:53.659Z","etag":null,"topics":["cal-adapt","carbon-design-system","component-library","svelte","sveltejs"],"latest_commit_sha":null,"homepage":"https://cal-adapt-svelte-components.netlify.app/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/berkeley-gif.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2022-03-25T16:47:23.000Z","updated_at":"2024-05-14T08:19:43.000Z","dependencies_parsed_at":"2024-09-23T08:00:40.196Z","dependency_job_id":null,"html_url":"https://github.com/berkeley-gif/cal-adapt-svelte-components","commit_stats":{"total_commits":33,"total_committers":4,"mean_commits":8.25,"dds":0.5454545454545454,"last_synced_commit":"03212564ac8dc77fe94314526381601dc75e351f"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/berkeley-gif/cal-adapt-svelte-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berkeley-gif%2Fcal-adapt-svelte-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berkeley-gif%2Fcal-adapt-svelte-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berkeley-gif%2Fcal-adapt-svelte-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berkeley-gif%2Fcal-adapt-svelte-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/berkeley-gif","download_url":"https://codeload.github.com/berkeley-gif/cal-adapt-svelte-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/berkeley-gif%2Fcal-adapt-svelte-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30058293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T18:21:05.932Z","status":"ssl_error","status_checked_at":"2026-03-03T18:20:59.341Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["cal-adapt","carbon-design-system","component-library","svelte","sveltejs"],"created_at":"2024-09-24T13:44:27.731Z","updated_at":"2026-03-03T20:33:07.193Z","avatar_url":"https://github.com/berkeley-gif.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cal-Adapt Svelte Components\n\nThis repository is for developing new UI Components for [Cal-Adapt.org](https://cal-adapt.org). These components use the [Svelte](https://svelte.dev/) JavaScript framework and [IBM Carbon Design](https://www.carbondesignsystem.com/) system.\n\nThe rationale for this component repository is:\n\n1. To reduce the time for developing and iterating on UI components for Cal-Adapt.\n\n2. Develop components in isolation so that they may be compatible in other Cal-Adapt related projects.\n\n## Changelog\n\nView [Change Log](https://github.com/berkeley-gif/cal-adapt-svelte-components/blob/main/CHANGELOG.md)\n\n## The Components\n\n### Search with auto-suggest\n\nA search box component with auto-suggest. Similar to the [CDS ComboBox](https://carbon-components-svelte.onrender.com/components/ComboBox) but with some corrections to `aria` and `role` attributes for improved accessibility.\n\n- [Component code](./src/lib/Search/)\n- [Demo](./src/routes/search.svelte)\n\n#### Behavior Notes\n\nNote that the Search component **will not** filter list items on its own, it's up to you to implement filtering. One way to do this is by using an `on:input` binding and filtering the `suggestions` prop based on what the user types. For suggestions that are retrieved asyncronously, e.g. from a RESTful API, it is recommended to [debounce](https://css-tricks.com/debouncing-throttling-explained-examples/) the input event handler.\n\n#### Props\n\n| Prop name    | Type                     | Default Value                        | Description                                                   |\n| ------------ | ------------------------ | ------------------------------------ | ------------------------------------------------------------- |\n| description  | string                   | \"Search for a place name or address\" | The input's label \u0026 placeholder text.                         |\n| searchValue  | string                   | \"\"                                   | The value of the search input.                                |\n| suggestions  | Suggestion[ ]            | [ ]                                  | The array of suggestions to be shown in the listbox.          |\n| outlineColor | string                   | \"#fdd13a\"                            | The outline color to use when the input is focused.           |\n| inputRef     | HTMLInputElement \\| null | null                                 | Reference to the search input HTML node.                      |\n| inputId      | string                   | `cac-${Math.random().toString(36)}`  | Optional id for the input element.                            |\n| size         | \"sm\"\\|\"lg\"\\|\"xl\"         | \"sm\"                                 | The size of the carbon components' search bar.                |\n| listboxLabel | string                   | \"Options\"                            | The aria-label for the listbox                                |\n| debug        | boolean                  | false                                | Enables console.log'ing of reactive variables \u0026 some methods. |\n\n#### Events\n\n##### Dispatched Events\n\n- `change`: dispatched when a list item from the Search component's `suggestions` list is selected a `change` custom event is dispatched with the `selectedItem`.\n\n- `clear`: dispatched when the clear search input button is clicked.\n\n##### Forwarded Events\n\nAdditionally, the following native events may be listened for on the Search component's input element:\n\n- `input`\n- `focus`\n- `blur`\n- `keydown`\n- `keyup`\n\n### Static Map\n\nThe Static Map is intended to be used within a tool's settings panel as a\nlocator map that displays the geographic boundary selected by the user. In most tools, it is wrapped in an HTML `\u003cbutton\u003e` element that when clicked on displays a modal which allows the user to change the selected location. The Static Map is not responsible for changing the location, only for handling a click event that may be used to trigger opening a modal.\n\n- [Component code](./src/lib/StaticMap/)\n- [Demo](./src/routes/static-map.svelte)\n\n#### Props\n\n| Prop Name             | Type             | Default Value                        | Description                                                       |\n| --------------------- | ---------------- | ------------------------------------ | ----------------------------------------------------------------- |\n| width                 | number           | 250                                  | The width of the component / map in pixels.                       |\n| height                | number           | 250                                  | The height of the component / map in pixels.                      |\n| location              | Location \\| null | null                                 | The location data to display as an overlay on the map.            |\n| basemapStyle          | string           | streets-v11                          | The name of the MapBox map tiles style.                           |\n| padding               | number           | 20                                   | Padding in pixels between the overlay and map frame.              |\n| useButton             | boolean          | true                                 | Whether or not to wrap the map in an HTML button element.         |\n| titleId               | string           | `cac- ${Math.random().toString(36)}` | The id attribute of the SVG title element.                        |\n| zoom                  | number           | 20                                   | The map zoom level to use when displaying a Point geometry.       |\n| --border-color        | string           | var(--gray-90)                       | The color of the map frame / neatline.                            |\n| --stroke              | string           | var(--gray-80)                       | The stroke color of the location overlay.                         |\n| --stroke-width        | number           | 3                                    | The stroke width in pixels of the location overlay.               |\n| --marker-fill         | string           | var(--teal-40)                       | The fill color for the marker when displaying a Point geometry.   |\n| --marker-stroke       | string           | var(--gray-80)                       | The stroke color for the marker when displaying a Point geometry. |\n| --marker-stroke-width | string           | 2                                    | The stroke width for the marker when displaying a Point geometry. |\n\n#### Events\n\n##### Forwarded Events\n\n- `click`\n\n**Note:** The `click` event handler is only exposed when `useButton` is set to `true`.\n\n## Developing\n\nOnce you've installed dependencies with `npm install`, start a development server:\n\n```bash\nnpm run dev\n\n# or start the server and open the app in a new browser tab\nnpm run dev -- --open\n```\n\n## Building\n\nTo create a production version of your app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n**Note:** To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.\n\n## Packaging\n\nTo compile the components from the [`src/lib`](./src/lib/) component directory so that they may be used as a dependency within another project do:\n\n```bash\nnpm run package\n```\n\nThis will create a local `package/` directory with the compiled Svelte components, meaning all TypeScript will be converted to normal JavaScript and all Sass will be converted to normal CSS.\n\n## Publishing to NPM and Github\n\nThe components in this repository are made publicly available on NPM and Github. The steps for publishing them are as follows:\n\n```bash\nnpm version patch # updates the package version (including in git)\nnpm run package\nnpm publish --access public\ngit push origin --tags\n```\n\nThen create a release on Github with the package code by doing:\n\n```bash\ncd ./package\nnpm run pack\n```\n\nThis will create a `berkeley-gif-cal-adapt-svelte-components-\u003cx.x.x\u003e.tzg` file in the `package/` directory which may be included with the Github release.\n\n## Linking\n\nThe `package` directory of this repo may be [`npm link`](https://docs.npmjs.com/cli/v7/commands/npm-link)'d to another project for local development.\n\nFirst, from the `./package` directory of this repository (assuming you have already done `npm run package`):\n\n```bash\nnpm link\n```\n\nThen from the project directory that uses this component library:\n\n```bash\nnpm link cal-adapt-svelte-components\n```\n\nNow when the `package` directory is updated the project using it will reflect those updates. This means whenever components are updated in `src/lib` the script `npm run package` will need to be run in order to reflect updates.\n\n**Note** that if you have multiple versions of NodeJS installed that you need to make sure you're using `npm link` with the same NodeJS and NPM version.\n\n**Note** that the `caladapt-website-2021` project uses [Sapper](https://sapper.svelte.dev) (the predecessor to SvelteKit) and in order to import components from this repo you must use the component's full path.\n\nFor example:\n\n```js\nimport SomeComponent from \"cal-adapt-svelte-components/SomeComponent/SomeComponent.svelte\";\n```\n\nSapper / Webpack will not be able to resolve the bare module import and thus the following will fail:\n\n```js\nimport { SomeComponent } from \"cal-adapt-svelte-components\";\n```\n\n## Tests\n\nComponent unit tests are written in TypeScript and run via [Vitest](https://vitest.dev/), [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro) and [@testing-library/jest-dom](https://testing-library.com/docs/ecosystem-jest-dom/).\n\nTo run component unit tests do\n\n```\nnpm run test\n```\n\nTo have tests run in watch mode do:\n\n```\nnpm run test:watch\n```\n\n## Check Sass Build\n\nThe rebuild times for the project's [global Sass](./src/styles/main.scss) is a little slow with Vite. To verify that the project's global Sass compiles successfully you may do:\n\n```bash\nnpm run sass:check\n```\n\nIf all goes well no output will be shown. Any errors will be printed to the console.\n\n## Code Credits\n\n### create-svelte\n\nThis project was bootstrapped using [SvelteKit](https://kit.svelte.dev)'s [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte) project generator:\n\n```bash\nnpm create svelte@latest cal-adapt-svelte-components\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberkeley-gif%2Fcal-adapt-svelte-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fberkeley-gif%2Fcal-adapt-svelte-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fberkeley-gif%2Fcal-adapt-svelte-components/lists"}