Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nikodermus/w-task

Last synced: about 14 hours ago
JSON representation

Host: GitHub
URL: https://github.com/nikodermus/w-task
Owner: Nikodermus
License: mit
Created: 2022-06-30T08:31:52.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-07-08T08:58:25.000Z (over 2 years ago)
Last Synced: 2024-11-06T19:08:28.005Z (about 2 months ago)
Language: TypeScript
Size: 327 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # Opening Hours

> by **Nicolas M. Pardo**

Vite template with React, TypeScript, and Styled Components. See it [live](https://w-task.netlify.app/)

---

## 🚶🏽‍♂️ Getting Started

This project requires Node v14+ and Yarn.

```bash

git clone https://github.com/Nikodermus/w-task

cd w-task

yarn

```

---

## 🏃🏽‍♂️ Run the project

You can run `yarn dev`, or `yarn serve` (for a production version) and open [localhost:3000](http://localhost:3000) to view it in the browser.

---

## 🧪 Testing

This project uses `jest` as test runner and `react-testing-library` to mount React components and do component testing.

```bash

yarn test:unit:ci

```

---

## 📚 Notes

- You can modify [ScheduleWrapper.tsx](src/components/Schedule/ScheduleWrapper.tsx), inside `pseudoFetch({})` to change the behavior of the information load to:

  - Make it forcefully fail `{fail: boolean}`. (By default it fails 1 out 10 times the info is lodaded).

  - Set a delay in milliseconds to delay the loading of the information. `{time: number}` (By default it loads after ~1 second).

  - Change the information displayed in the schedule. `{data: Schedule}`. (By default it displays the following information inside [response.mock.json](src/__mocks__/response.mock.json), you can change it there as well).

- This project uses a set of utilities to create a [CSS Variables Design System](https://gorillalogic.com/blog/building-design-systems-with-css-variables/), using as source [styled.constant.ts](src/constants/styled.constant.ts), use your browser to see all the generated variables.

---

## 👩🏽‍💼 License & Attribution

- [Original template](https://github.com/fabien-ml/react-ts-vite-template) by **Fabien MARIE-LOUISE**.

- [Styled Component System](https://github.com/Nikodermus/gatsby-styled-components-sanity) by **Nicolas M. Pardo**

MIT License