Skip to content

Commit

Permalink
Merge pull request #344 from csandman/feat/demo
Browse files Browse the repository at this point in the history
  • Loading branch information
csandman authored Oct 23, 2024
2 parents e40333b + e896665 commit 7f4b743
Show file tree
Hide file tree
Showing 25 changed files with 7,072 additions and 113 deletions.
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,6 @@ tmp/
# Codemod generated files
codemod/**/*.js
codemod/**/*.d.ts

# Demo files
demo/**/*
1 change: 1 addition & 0 deletions .github/workflows/package-size-report.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ jobs:
uses: actions/setup-node@v4
with:
node-version: 20
cache: "npm"

- name: Package size report
uses: pkg-size/action@v1
Expand Down
29 changes: 29 additions & 0 deletions .github/workflows/pkg-pr.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
name: Publish Pull Requests

on:
push:
branches: [main]
pull_request:
branches: [main]

jobs:
build:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v4

- run: corepack enable
- uses: actions/setup-node@v4
with:
node-version: 20
cache: "npm"

- name: Install dependencies
run: npm install

- name: Build
run: npm run build

- run: npx pkg-pr-new publish --compact --template './demo'
22 changes: 22 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Contributing

Thanks for your interest in `chakra-react-select`! All forms of contribution are
welcome, from issue reports to PRs and documentation / write-ups.

Before you open a PR:

- In development, run `npm run install:all` to setup the dependencies for the
core package and the demo.
- Run `npm run dev` to build (and watch) the package source, as well as run the
demo project which can be viewed at http://localhost:5152.
- Please ensure all the examples work correctly after your change.
- Also run `npm run lint` to ensure that the change meets the projects code
style setup.
- Make sure there's an issue open for any work you take on and intend to submit
as a pull request - it helps core members review your concept and direction
early and is a good way to discuss what you're planning to do.
- If you open an issue and are interested in working on a fix, please let us
know. We'll help you get started, rather than inadvertently doubling up on
your hard work.
- All new features and changes need documentation. If you don't have time to
write any, leave a note in your PR.
89 changes: 54 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@

# chakra-react-select v5

This component is a wrapper for the popular react component
[React Select](https://react-select.com/home) made using the UI library
[Chakra UI](https://v2.chakra-ui.com/).

> [!IMPORTANT]
>
> This version of `chakra-react-select` is updated for
> [Chakra UI v2](https://v2.chakra-ui.com/getting-started/migration) which works
> exclusively with React v18. `chakra-react-select` v3, which is compatible with
Expand All @@ -31,10 +37,6 @@
[![](https://img.shields.io/badge/Code_Style-prettier-c596c7.svg?logo=prettier "Code Style: Prettier")](https://github.com/prettier/prettier)
[![](https://badgen.net/github/license/csandman/chakra-react-select "MIT License")](LICENSE.md)

This component is a wrapper for the popular react component
[react-select](https://react-select.com/home) made using the UI library
[Chakra UI](https://v2.chakra-ui.com/).

| Light Mode | Dark Mode |
| :-------------------------------------------------: | :-----------------------------------------------: |
| ![Light Mode Demo](./.github/images/demo-light.png) | ![Dark Mode Demo](./.github/images/demo-dark.png) |
Expand All @@ -43,11 +45,13 @@ Check out the demo here:

[![SB-TS]](https://stackblitz.com/edit/vitejs-vite-lzaqwr?file=src%2Fapp.tsx)

**NOTE:** Before leaving an issue on this project, remember that this is just a
_wrapper_ for `react-select`, not a standalone package. A large percentage of
the questions people have end up being about how `react-select` itself works, so
please read through their documentation to familiarize yourself with it!
https://react-select.com/home
> [!NOTE]
>
> Before leaving an issue on this project, remember that this is just a
> _wrapper_ for `react-select`, not a standalone package. A large percentage of
> the questions people have end up being about how `react-select` itself works,
> so please read through their documentation to familiarize yourself with it!
> https://react-select.com/home
## Contents

Expand Down Expand Up @@ -94,11 +98,13 @@ npm i @chakra-ui/react @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@
yarn add @chakra-ui/react @emotion/react@^11.8.1 @emotion/styled@^11 framer-motion@^6
```

**NOTE:** As of
[`v3.3.3`](https://github.com/csandman/chakra-react-select/releases/tag/v3.3.3),
your project will need to have a minimum of `@emotion/react@11.8.1` installed to
avoid having multiple copies of `@emotion/react` installed. For more info, see
[PR #115](https://github.com/csandman/chakra-react-select/pull/115).
> [!NOTE]
>
> As of
> [`v3.3.3`](https://github.com/csandman/chakra-react-select/releases/tag/v3.3.3),
> your project will need to have a minimum of `@emotion/react@11.8.1` installed
> to avoid having multiple copies of `@emotion/react` installed. For more info,
> see [PR #115](https://github.com/csandman/chakra-react-select/pull/115).
After Chakra UI is set up,
[install this package from NPM](https://www.npmjs.com/package/chakra-react-select):
Expand Down Expand Up @@ -172,6 +178,8 @@ return (

#### `tagColorScheme`

> [!NOTE]
>
> Renamed from `colorScheme` in
> [`v5.0.0`](https://github.com/csandman/chakra-react-select/releases/tag/v5.0.0)
Expand Down Expand Up @@ -346,16 +354,19 @@ highlight color, you can pass the `selectedOptionColorScheme` prop to change it.
This prop will accept any named color from your theme's color palette, and it
will use the `500` value in light mode or the `300` value in dark mode.

> **NOTE:** This prop can only be used for named colors from your theme, not
> arbitrary hex/rgb colors. If you would like to use a specific color for the
> background that's not a part of your theme, use the
> [`chakraStyles`](#chakrastyles) prop to customize it (see
> [!NOTE]
>
> This prop can only be used for named colors from your theme, not arbitrary
> hex/rgb colors. If you would like to use a specific color for the background
> that's not a part of your theme, use the [`chakraStyles`](#chakrastyles) prop
> to customize it (see
> [#99](https://github.com/csandman/chakra-react-select/discussions/99) for an
> example).
>
> Prior to `v4.6.0` this prop was named `selectedOptionColor`, and it was
> renamed to prevent confusion about its purpose. `selectedOptionColor` is still
> available but will be removed in the next major version.
> Prior to
> [`v4.6.0`](https://github.com/csandman/chakra-react-select/releases/tag/v4.6.0)
> this prop was named `selectedOptionColor`, and it was renamed to prevent
> confusion about its purpose.
```tsx
return (
Expand Down Expand Up @@ -420,9 +431,10 @@ elements.

#### `useBasicStyles` (removed)

This prop was removed in `v5.0.0`, as these styles are now the default styles
applied to the component. If you'd like to keep the legacy styles, here are some
examples (for each
This prop was removed in
[`v5.0.0`](https://github.com/csandman/chakra-react-select/releases/tag/v5.0.0),
as these styles are now the default styles applied to the component. If you'd
like to keep the legacy styles, here are some examples (for each
[`variant`](#variant--options-outline--filled--flushed--unstyled--default-outline))
of how you could accomplish that with the [`chakraStyles`](#chakrastyles) prop:

Expand Down Expand Up @@ -683,8 +695,10 @@ or are themselves those components. As this package pulls directly from your
Chakra theme, any changes you make to those components' themes will propagate to
the components in this package.

> **NOTE:** Some of the theme styles are manually overridden when this package
> implements them. This is necessary for implementing styles for
> [!NOTE]
>
> Some of the theme styles are manually overridden when this package implements
> them. This is necessary for implementing styles for
> [`size`](#size--options-responsivevaluesm--md--lg--default-md) variants in
> components that do not natively have them in Chakra's default theme. This
> mostly concerns components that make up the `Menu`, but there are a few other
Expand Down Expand Up @@ -714,9 +728,11 @@ Here is a list of all components that will be affected by changes to your theme:
In addition to specific component styles, any changes you make to your global
color scheme will also be reflected in these custom components.

> **NOTE:** Only make changes to your global component themes if you want them
> to appear in all instances of that component. Otherwise, just change the
> individual components' styles using the `chakraStyles` prop.
> [!NOTE]
>
> Only make changes to your global component themes if you want them to appear
> in all instances of that component. Otherwise, just change the individual
> components' styles using the `chakraStyles` prop.
### `className`

Expand Down Expand Up @@ -1101,9 +1117,10 @@ const GooglePlacesAutocomplete = () => {
export default GooglePlacesAutocomplete;
```

> **NOTE:** An API key would be needed to create a CodeSandbox example for this
> so you will have to implement it in your own project if you'd like to test it
> out.
> [!NOTE]
>
> An API key would be needed to create a CodeSandbox example for this so you
> will have to implement it in your own project if you'd like to test it out.
## Usage with React Form Libraries

Expand Down Expand Up @@ -1133,7 +1150,9 @@ component or [`useController`](https://react-hook-form.com/api/usecontroller)
hook in order to keep the value(s) tracked in `react-hook-form`'s state. Here
are some examples using each:

> **NOTE:** These examples still need to be updated to the newest version of
> [!NOTE]
>
> These examples still need to be updated to the newest version of
> `chakra-react-select` at some point, but they should still give you a good
> idea of how to implement what you want.
Expand Down Expand Up @@ -1238,8 +1257,8 @@ issue using one of these templates:
### StackBlitz

Recently, CodeSandbox severely limited their free tier, so this project has
started to move away from it. Here are a couple StackBlitz templates you can use
as an alternative.
started to move away from it. Here are a couple
[StackBlitz](https://stackblitz.com/) templates you can use as an alternative.

- Vanilla JS Starter:
https://stackblitz.com/edit/vitejs-vite-fatlrb?file=src%2Fapp.jsx
Expand Down
24 changes: 24 additions & 0 deletions demo/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
4 changes: 4 additions & 0 deletions demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Chakra React Select Demo

This is a demo application for testing out
[`chakra-react-select`](../README.md).
38 changes: 38 additions & 0 deletions demo/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import js from "@eslint/js";
import prettier from "eslint-config-prettier";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import globals from "globals";
import tseslint from "typescript-eslint";

const eslintConfig = tseslint.config(
{ ignores: ["dist"] },
{
settings: { react: { version: "18.3" } },
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
react,
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
},
rules: {
...react.configs.recommended.rules,
...react.configs["jsx-runtime"].rules,
...reactHooks.configs.recommended.rules,
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"react/no-unescaped-entities": "off",
},
},
prettier
);

export default eslintConfig;
12 changes: 12 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chakra React Select Demo</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Loading

0 comments on commit 7f4b743

Please sign in to comment.