├── .babelrc ├── .czrc ├── .github ├── FUNDING.yml └── workflows │ └── ci.yml ├── .gitignore ├── .prettierrc.json ├── .releaserc ├── .storybook ├── main.js └── preview.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── banner.png ├── example ├── .gitignore ├── index.html ├── package.json ├── src │ ├── App.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock ├── package.json ├── showcase ├── List.tsx ├── PlaceCard.css ├── PlaceCard.tsx ├── place.ts ├── places.ts ├── readme.md └── style.css ├── src ├── Haze.tsx ├── index.ts ├── style.css.ts ├── types.ts └── useEdge.ts ├── stories └── Haze.stories.tsx ├── test └── Haze.test.tsx ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["@vanilla-extract/babel-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /.czrc: -------------------------------------------------------------------------------- 1 | { 2 | "path": "cz-conventional-changelog" 3 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: alvarlagerlof 2 | custom: https://www.buymeacoffee.com/alvar 3 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | braches: 5 | - main 6 | - beta 7 | - next 8 | jobs: 9 | test: 10 | name: Build, lint, and test on Node ${{ matrix.node }} 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node: [14, 16] 16 | 17 | steps: 18 | - name: Checkout repo 19 | uses: actions/checkout@v2 20 | 21 | - name: Use Node ${{ matrix.node }} 22 | uses: actions/setup-node@v2 23 | with: 24 | node-version: ${{ matrix.node }} 25 | 26 | - name: Install deps and build (with cache) 27 | uses: bahmutov/npm-install@v1 28 | 29 | # - name: Lint 30 | # run: yarn lint 31 | # Removed until https://github.com/formium/tsdx/issues/1056 is fixed 32 | 33 | # - name: Test 34 | # run: yarn test --ci --coverage --maxWorkers=2 35 | 36 | publish: 37 | name: "Publish Module to NPM" 38 | needs: test 39 | runs-on: ubuntu-latest 40 | 41 | steps: 42 | - name: Checkout repo 43 | uses: actions/checkout@v2 44 | 45 | - name: Setup Node 46 | uses: actions/setup-node@v2 47 | with: 48 | node-version: 14 49 | registry-url: https://registry.npmjs.org/ 50 | 51 | - name: Install deps and build (with cache) 52 | uses: bahmutov/npm-install@v1 53 | 54 | - name: Release 55 | run: npx semantic-release@17 56 | env: 57 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 58 | GH_TOKEN: ${{secrets.GH_TOKEN}} 59 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "semi": true, 4 | "singleQuote": false, 5 | "trailingComma": "es5" 6 | } 7 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | { 2 | "branches": ["main", "next", "beta"] 3 | } -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'], 3 | addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 4 | // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration 5 | typescript: { 6 | check: true, // type-check stories during Storybook build 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters 2 | import '../showcase/style.css'; 3 | 4 | export const parameters = { 5 | // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args 6 | actions: { argTypesRegex: '^on.*' }, 7 | }; 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Reporting Issues 4 | 5 | If you have found what you think is a bug, please [file an issue](https://github.com/alvarlagerlof/react-haze/issues/new). 6 | 7 | ## Suggesting new features 8 | 9 | If you are here to suggest a feature, first create an issue if it does not already exist. From there, we will discuss use-cases for the feature and then finally discuss how it could be implemented. 10 | 11 | ## Development 12 | 13 | If you have been assigned to fix an issue or develop a new feature, please follow these steps to get started: 14 | 15 | - Fork this repository 16 | - Install dependencies by running `yarn` 17 | - Link `react-haze` locally by running `yarn link` 18 | - Auto-build files as you edit by running `yarn start` 19 | - Implement your changes and tests to files in the `src/` directory and corresponding test files 20 | - Make sure that your code is formatted by Prettier 21 | - To run examples, follow their individual directions. Usually this is just `yarn && yarn start`. 22 | - To run examples using your local build, link to the local `react-haze` by running `yarn link react-haze` from the example's directory 23 | - Git stage your required changes and commit (see below commit guidelines) 24 | - Submit PR for review 25 | 26 | ## Commit message conventions 27 | 28 | `react-haze` is using [Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines). 29 | 30 | We have very precise rules over how our git commit messages can be formatted. This leads to **more readable messages** that are easy to follow when looking through the **project history**. 31 | 32 | ### Commit Message Format 33 | 34 | Each commit message consists of a **header**, a **body** and a **footer**. The header has a special 35 | format that includes a **type**, a **scope** and a **subject**: 36 | 37 | ``` 38 | (): 39 | 40 | 41 | 42 |