Merge pull request #344 from csandman/feat/demo

Author: csandman

.eslintignore

@@ -6,3 +6,6 @@ tmp/
 # Codemod generated files
 codemod/**/*.js
 codemod/**/*.d.ts
+
+# Demo files
+demo/**/*

.github/workflows/package-size-report.yml

@@ -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

.github/workflows/pkg-pr.yml

@@ -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'

CONTRIBUTING.md

@@ -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.

README.md

@@ -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
@@ -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) |
@@ -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
 
@@ -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/[email protected]` 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/[email protected]` 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):
@@ -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)
 
@@ -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 (
@@ -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:
 
@@ -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
@@ -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`
 
@@ -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
 
@@ -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.
 
@@ -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

demo/.gitignore

@@ -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?

demo/README.md

@@ -0,0 +1,4 @@
+# Chakra React Select Demo
+
+This is a demo application for testing out
+[`chakra-react-select`](../README.md).

demo/eslint.config.js

@@ -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;

demo/index.html

@@ -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>