https://github.com/catamphetamine/frontend-lib
Frontend utilities and components
https://github.com/catamphetamine/frontend-lib
Last synced: 4 months ago
JSON representation
Frontend utilities and components
- Host: GitHub
- URL: https://github.com/catamphetamine/frontend-lib
- Owner: catamphetamine
- License: mit
- Created: 2022-05-30T15:33:23.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-06T14:09:31.000Z (about 1 year ago)
- Last Synced: 2025-01-11T01:48:42.663Z (5 months ago)
- Language: JavaScript
- Size: 157 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `frontend-lib`
Frontend utilities and components.
## Install
Clone the repository:
```
git clone https://gitlab.com/catamphetamine/frontend-lib.git
```
And then simply `import` modules from it:
```js
import Button from '../../frontend-lib/components/Button.js'
```
The reason for using these components as source code instead of importing them from an npm package is because a developer might prefer to modify them.
## Use
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Button.js) — renders a generic button.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/PressedStateButton.js) — renders a "pressed state" button: a button that stays "pressed" until "depressed".
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Clickable.js) — makes any element behave as if it was a button (but not in an [ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)-compliant way): the element will start responding to click and touch events, and will call `onClick()` when clicked or tapped.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/OnLongPress.js) — adds an `onLongPress()` property to an arbitrary element, which is triggered "on long press" (supports touch and mouse devices).
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Snackbar.js) — shows slide-in/slide-out notifications.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/OkCancelDialog.js) — shows an "Ok"/"Cancel" dialog.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/TextSelectionTooltip.js) — shows a tooltip with arbitrary content (for example, buttons) on text selection.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/LinearProgress.js) — renders a linear progress bar (progress indicator).
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/PopIconButton.js) — renders an on/off button that plays a "pop" animation when it's switched "on".
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/ContentSection.js) — a generic section of content. Can be used to organize page content into sections.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Announcement.js) — renders a closeable "announcement" element.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Menu.js) — renders a list of menu items.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Form.js) — renders a `` with fields and buttons.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/DeviceInfo.js) — returns the information about the user's device: what's the width of the screen and whether it's a touch device.
* [``](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/ExternalLink.js) — just a wrapper for a `` link. Only exists to accept a `to` property instead of a `href` property.
* [`Padding.css`](https://gitlab.com/catamphetamine/frontend-lib/blob/master/components/Padding.css) — Provides a utility CSS `.Padding` class.
## GitHub Ban
On March 9th, 2020, GitHub, Inc. silently [banned](https://medium.com/@catamphetamine/how-github-blocked-me-and-all-my-libraries-c32c61f061d3) my account (erasing all my repos, issues and comments) without any notice or explanation. Because of that, all source codes had to be promptly moved to GitLab. The [GitHub repo](https://github.com/catamphetamine/frontend-lib) is now only used as a backup (you can star the repo there too), and the primary repo is now the [GitLab one](https://gitlab.com/catamphetamine/frontend-lib). Issues can be reported in any repo.
## License
[MIT](LICENSE)