From 22ed7d26970046a6b5c4361605c1ec3df7704a6f Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 11:44:59 -0400
Subject: [PATCH 001/186] refactor(theme/components.utils): update
`defineMergeStyles` typing
---
.../gatsby-plugin/components/components.utils.ts | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index 104225ef3fe..e9758bc5ec4 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -65,8 +65,11 @@ export {
* @param styleObjs - The following style objects to be merged
*/
export function defineMergeStyles(
- defaultTheming?: SystemStyleObject,
- ...styleObjs: SystemStyleObject[] | undefined[]
+ defaultTheming?: SystemStyleObject | unknown,
+ ...styleObjs: SystemStyleObject[] | unknown[]
) {
- return merge(defaultTheming, ...styleObjs)
+ return merge(defaultTheming, ...styleObjs) as Record<
+ string,
+ SystemStyleObject
+ >
}
From b12d75418f47bfcbc2ae0ba478a3b17e7dc3dc6a Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 11:46:42 -0400
Subject: [PATCH 002/186] feat(theme/components.utils): add object of common
form component styles
---
.../components/components.utils.ts | 50 +++++++++++++++++++
1 file changed, 50 insertions(+)
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index e9758bc5ec4..1bf4964b525 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -73,3 +73,53 @@ export function defineMergeStyles(
SystemStyleObject
>
}
+
+export const _notDisabled = "&:not([data-disabled], [disabled])"
+
+const INPUT_TRIGGER_DISABLE_COLOR = "--input-trigger-disable-color"
+
+export const commonInputTriggerStyles = {
+ commonControlProps: {
+ border: "1px",
+ outline: "2px solid",
+ outlineColor: "transparent",
+ _checked: {
+ color: "background",
+ bg: "primary",
+ borderColor: "primary",
+ },
+ _focusVisible: {
+ borderColor: "primaryHighContrast",
+ outlineColor: "primaryHover",
+ outlineOffset: "2px",
+ boxShadow: "none",
+ },
+ _disabled: {
+ bg: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
+ borderColor: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
+ opacity: 1,
+ },
+ [_notDisabled]: {
+ // Hovering over the label triggers the style for the control
+ "*:hover > &": {
+ bg: "primaryHover",
+ outlineColor: "primaryDark",
+ _dark: {
+ outlineColor: "primaryLight",
+ },
+ },
+ },
+ },
+ commonContainerProps: {
+ [INPUT_TRIGGER_DISABLE_COLOR]: "colors.disabled",
+ _disabled: {
+ cursor: "not-allowed",
+ },
+ },
+ commonLabelProps: {
+ _disabled: {
+ color: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
+ opacity: 1,
+ },
+ },
+}
From 3ccc72bc6739d5dcc25baca6eac75320dad504f2 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 11:47:31 -0400
Subject: [PATCH 003/186] refactor(.storybook): modify preview window layout
---
.storybook/preview.js | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 1133895b052..e598bff489f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -25,6 +25,9 @@ window.___navigate = (pathname) => {
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
+ backgrounds: {
+ disable: true,
+ },
controls: {
matchers: {
color: /(background|color)$/i,
@@ -34,6 +37,7 @@ export const parameters = {
chakra: {
theme,
},
+ layout: "centered",
// Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
viewport: {
viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {
From 0b228039d062332a8cfc1713ae7df25a1481c5dc Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 21:04:44 -0400
Subject: [PATCH 004/186] chore(.storybook): replace auto-generated docs and
story directory structure
---
.storybook/main.js | 11 +----------
1 file changed, 1 insertion(+), 10 deletions(-)
diff --git a/.storybook/main.js b/.storybook/main.js
index 6b0b74b0274..253384295f3 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,13 +3,7 @@ const { propNames } = require("@chakra-ui/react")
const { babelConfig } = require("./babel-storybook-config")
module.exports = {
- stories: [
- {
- directory: "../src/components",
- titlePrefix: "Components",
- files: "**/*.stories.tsx",
- },
- ],
+ stories: ["../src/components/**/*.stories.tsx"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
@@ -87,7 +81,4 @@ module.exports = {
},
},
},
- docs: {
- autodocs: true,
- },
}
From 3137204279ff06d0a11df644f1d0041be6abf0be Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 21:05:39 -0400
Subject: [PATCH 005/186] chore(theme/colors): update color value for blue 300
---
src/@chakra-ui/gatsby-plugin/foundations/colors.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
index ed0766c393d..14c4e3e2c2e 100644
--- a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
+++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts
@@ -11,7 +11,7 @@ const colors = {
},
blue: {
100: "#dedeff",
- 300: "#ababfe",
+ 300: "#8282ff",
500: "#1c1cff",
600: "#090990",
700: "#0b0b66",
From 93f7eb87242166e473b5717877572f034baf5bc5 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 21:10:43 -0400
Subject: [PATCH 006/186] feat(theme/Checkbox): update theme and add story
---
.../gatsby-plugin/components/Checkbox.ts | 82 ++++++-------------
.../components/components.utils.ts | 5 +-
src/components/Checkbox/Checkbox.stories.tsx | 45 ++++++++++
.../{Checkbox.tsx => Checkbox/index.tsx} | 0
4 files changed, 72 insertions(+), 60 deletions(-)
create mode 100644 src/components/Checkbox/Checkbox.stories.tsx
rename src/components/{Checkbox.tsx => Checkbox/index.tsx} (100%)
diff --git a/src/@chakra-ui/gatsby-plugin/components/Checkbox.ts b/src/@chakra-ui/gatsby-plugin/components/Checkbox.ts
index 0f3a87beb36..6a976640f88 100644
--- a/src/@chakra-ui/gatsby-plugin/components/Checkbox.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/Checkbox.ts
@@ -1,70 +1,40 @@
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
import { checkboxAnatomy } from "@chakra-ui/anatomy"
-import { checkboxDefaultTheme, defineMergeStyles } from "./components.utils"
+import {
+ checkboxDefaultTheme,
+ commonInputTriggerStyles,
+ defineMergeStyles,
+} from "./components.utils"
-const { baseStyle: defaultBaseStyle } = checkboxDefaultTheme
+const { sizes: defaultSizes } = checkboxDefaultTheme
const { definePartsStyle, defineMultiStyleConfig } =
createMultiStyleConfigHelpers(checkboxAnatomy.keys)
-const baseStyleControl = defineStyle((props) =>
- defineMergeStyles(defaultBaseStyle?.(props).control, {
- bg: "background",
- _checked: {
- bg: "primary400",
- _hover: {
- bg: "primary400",
- borderColor: "primary600",
- },
- borderColor: "black50",
- },
- border: "1px",
- borderColor: "black50",
- borderRadius: "3px",
- transition: "all 150ms",
- _focusVisible: {
- boxShadow: "none",
- },
- _hover: {
- boxShadow: "tableItemBoxShadow",
- border: "1px",
- borderStyle: "solid",
- borderColor: "primary600",
- transition: "transform 0.1s",
- transform: "scale(1.02)",
- },
- })
+const { commonContainerProps, commonControlProps, commonLabelProps } =
+ commonInputTriggerStyles
+
+const checkboxMdSize = defaultSizes?.md
+
+const baseStyleControl = defineMergeStyles(
+ checkboxMdSize?.control,
+ commonControlProps,
+ {
+ boxSize: "var(--checkbox-size)", // Comes from default theme
+ borderRadius: "sm",
+ }
)
-const sizes = {
- md: defineStyle({
- control: {
- h: "1.5rem",
- w: "1.5rem",
- },
- icon: {
- fontSize: "md",
- },
- }),
-}
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
-const variantAlignTop = definePartsStyle({
- control: {
- mt: "0.25rem",
- },
+const baseStyle = definePartsStyle({
+ container: baseStyleContainer,
+ control: baseStyleControl,
+ label: baseStyleLabel,
})
export const Checkbox = defineMultiStyleConfig({
- baseStyle: definePartsStyle((props) => ({
- ...defaultBaseStyle?.(props),
- control: baseStyleControl(props),
- })),
- sizes,
- variants: {
- // TODO: remove this variant
- alignTop: variantAlignTop,
- },
- defaultProps: {
- size: "md",
- },
+ baseStyle,
})
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index 1bf4964b525..c166eb961ca 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -103,10 +103,7 @@ export const commonInputTriggerStyles = {
// Hovering over the label triggers the style for the control
"*:hover > &": {
bg: "primaryHover",
- outlineColor: "primaryDark",
- _dark: {
- outlineColor: "primaryLight",
- },
+ borderColor: "primaryHighContrast",
},
},
},
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 00000000000..6769ba97cab
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from "react"
+import { CheckboxGroup, VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import CheckboxComponent from "."
+
+type CheckboxType = typeof CheckboxComponent
+
+const meta: Meta = {
+ title: "Atoms / Form / Checkbox",
+ component: CheckboxComponent,
+ parameters: {
+ controls: {
+ hideNoControlsWarning: true,
+ expanded: false,
+ },
+ },
+}
+
+export default meta
+
+type Story = StoryObj
+
+const DEFAULT_VAL = "checked"
+
+export const Checkbox: Story = {
+ render: () => (
+
+
+ defaultValue
+
+ isDisabled
+
+
+ isFocusable
+
+
+ isReadOnly
+
+
+ isRequired
+
+
+
+ ),
+}
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox/index.tsx
similarity index 100%
rename from src/components/Checkbox.tsx
rename to src/components/Checkbox/index.tsx
From 5a1a8ac691a5ed6ea2b8111bb65d1b7618e2e9ed Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 21:32:29 -0400
Subject: [PATCH 007/186] feat(theme/Radio): add radio theme and story
---
.../gatsby-plugin/components/Radio.ts | 52 +++++++++++++++++++
.../components/components.utils.ts | 4 +-
.../gatsby-plugin/components/index.ts | 2 +
src/components/BaseStories/Radio.stories.tsx | 51 ++++++++++++++++++
4 files changed, 108 insertions(+), 1 deletion(-)
create mode 100644 src/@chakra-ui/gatsby-plugin/components/Radio.ts
create mode 100644 src/components/BaseStories/Radio.stories.tsx
diff --git a/src/@chakra-ui/gatsby-plugin/components/Radio.ts b/src/@chakra-ui/gatsby-plugin/components/Radio.ts
new file mode 100644
index 00000000000..0dcfc732a86
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/components/Radio.ts
@@ -0,0 +1,52 @@
+import {
+ createMultiStyleConfigHelpers,
+ cssVar,
+ defineStyle,
+} from "@chakra-ui/react"
+import { radioAnatomy } from "@chakra-ui/anatomy"
+import {
+ commonInputTriggerStyles,
+ defineMergeStyles,
+ radioDefaultTheme,
+} from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+ createMultiStyleConfigHelpers(radioAnatomy.keys)
+
+export const $radioDisableColor = cssVar("radio-disable-color")
+
+const { commonContainerProps, commonControlProps, commonLabelProps } =
+ commonInputTriggerStyles
+
+const baseStyleContainer = defineStyle({ ...commonContainerProps })
+
+const baseStyleControl = defineMergeStyles(
+ radioDefaultTheme.baseStyle?.({} as never).control,
+ commonControlProps,
+ {
+ borderColor: "bodyLight",
+ boxSize: 4,
+ fontSize: "md",
+ "*:hover > &": {
+ outlineOffset: "-1px",
+ },
+ _checked: {
+ _before: {
+ // Force half the size, as '50%' value not reliable.
+ boxSize: 2,
+ },
+ },
+ }
+)
+
+const baseStyleLabel = defineStyle({ ...commonLabelProps })
+
+const baseStyle = definePartsStyle({
+ container: baseStyleContainer,
+ control: baseStyleControl,
+ label: baseStyleLabel,
+})
+
+export const Radio = defineMultiStyleConfig({
+ baseStyle,
+})
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index c166eb961ca..d9879d9bbd0 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -20,6 +20,7 @@ const {
List: listDefaultTheme,
Menu: menuDefaultTheme,
Modal: modalDefaultTheme,
+ Radio: radioDefaultTheme,
Select: selectDefaultTheme,
Spinner: spinnerDefaultTheme,
Switch: switchDefaultTheme,
@@ -47,6 +48,7 @@ export {
listDefaultTheme,
menuDefaultTheme,
modalDefaultTheme,
+ radioDefaultTheme,
selectDefaultTheme,
spinnerDefaultTheme,
switchDefaultTheme,
@@ -96,7 +98,7 @@ export const commonInputTriggerStyles = {
},
_disabled: {
bg: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
- borderColor: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
+ borderColor: `var(${INPUT_TRIGGER_DISABLE_COLOR}) !important`,
opacity: 1,
},
[_notDisabled]: {
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index b4d0d3d4c58..7f651b78bec 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -5,6 +5,7 @@ import { Tag } from "./Tag"
import { Modal } from "./Modal"
import { Checkbox } from "./Checkbox"
import { Tabs } from "./Tabs"
+import { Radio } from "./Radio"
import {
accordionDefaultTheme,
avatarDefaultTheme,
@@ -40,6 +41,7 @@ export default {
Link,
Menu: menuDefaultTheme,
Modal,
+ Radio,
Select: selectDefaultTheme,
Spinner: spinnerDefaultTheme,
Switch: switchDefaultTheme,
diff --git a/src/components/BaseStories/Radio.stories.tsx b/src/components/BaseStories/Radio.stories.tsx
new file mode 100644
index 00000000000..f46e22a59a2
--- /dev/null
+++ b/src/components/BaseStories/Radio.stories.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import { RadioGroup, Radio as RadioComponent, Stack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+type RadioType = typeof RadioComponent
+
+const meta: Meta = {
+ title: "Atoms / Form / Radio",
+ component: RadioComponent,
+ argTypes: {
+ groupDir: {
+ options: ["column", "row"],
+ control: { type: "radio" },
+ },
+ },
+ parameters: {
+ controls: {
+ hideNoControlsWarning: true,
+ expanded: false,
+ },
+ },
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Radio: Story = {
+ args: {
+ groupDir: "column",
+ },
+ render: ({ groupDir }) => (
+
+
+ defaultValue
+
+ isDisabled
+
+
+ isFocusable
+
+
+ isReadOnly
+
+
+ isRequired
+
+
+
+ ),
+}
From b4fab27a9eeb238cf5355bf7b0fd1e1502ac167d Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 22:08:04 -0400
Subject: [PATCH 008/186] feat(theme/switch): add Switch theme and story
---
.../gatsby-plugin/components/Switch.ts | 49 +++++++++++++++++++
.../components/components.utils.ts | 16 ++++--
.../gatsby-plugin/components/index.ts | 4 +-
src/components/BaseStories/Switch.stories.tsx | 41 ++++++++++++++++
4 files changed, 103 insertions(+), 7 deletions(-)
create mode 100644 src/@chakra-ui/gatsby-plugin/components/Switch.ts
create mode 100644 src/components/BaseStories/Switch.stories.tsx
diff --git a/src/@chakra-ui/gatsby-plugin/components/Switch.ts b/src/@chakra-ui/gatsby-plugin/components/Switch.ts
new file mode 100644
index 00000000000..7b73d6b9622
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/components/Switch.ts
@@ -0,0 +1,49 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"
+import { switchAnatomy } from "@chakra-ui/anatomy"
+import {
+ commonInputTriggerStyles,
+ defineMergeStyles,
+ switchDefaultTheme,
+} from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+ createMultiStyleConfigHelpers(switchAnatomy.keys)
+
+const { baseStyle: defaultBaseStyle, sizes: defaultSizes } = switchDefaultTheme
+
+const switchSmSize = defaultSizes?.sm
+
+const { commonControlProps, commonContainerProps, commonLabelProps } =
+ commonInputTriggerStyles
+
+const baseStyleContainer = defineMergeStyles(
+ defaultBaseStyle?.({} as never).container,
+ switchSmSize?.container,
+ commonContainerProps,
+ {}
+)
+
+const baseStyleThumb = defineMergeStyles(
+ defaultBaseStyle?.({} as never).thumb,
+ { bg: "background" }
+)
+
+const baseStyleTrack = defineMergeStyles(
+ defaultBaseStyle?.({} as never).track,
+ commonControlProps,
+ {
+ bg: "bodyLight",
+ _invalid: { borderColor: "errorOutline" },
+ _focusVisible: { bg: "gray.500", borderColor: "transparent" },
+ }
+)
+
+const baseStyle = definePartsStyle({
+ container: baseStyleContainer,
+ thumb: baseStyleThumb,
+ track: baseStyleTrack,
+})
+
+export const Switch = defineMultiStyleConfig({
+ baseStyle,
+})
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index d9879d9bbd0..16321fc9c14 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -1,4 +1,4 @@
-import { SystemStyleObject, theme } from "@chakra-ui/react"
+import { cssVar, SystemStyleObject, theme } from "@chakra-ui/react"
import { merge } from "lodash"
const {
@@ -79,10 +79,12 @@ export function defineMergeStyles(
export const _notDisabled = "&:not([data-disabled], [disabled])"
const INPUT_TRIGGER_DISABLE_COLOR = "--input-trigger-disable-color"
+const $inputTriggerDisableColor = cssVar("input-trigger-disable-color")
export const commonInputTriggerStyles = {
commonControlProps: {
border: "1px",
+ borderColor: "bodyLight",
outline: "2px solid",
outlineColor: "transparent",
_checked: {
@@ -97,9 +99,13 @@ export const commonInputTriggerStyles = {
boxShadow: "none",
},
_disabled: {
- bg: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
- borderColor: `var(${INPUT_TRIGGER_DISABLE_COLOR}) !important`,
+ bg: $inputTriggerDisableColor.reference,
+ borderColor: $inputTriggerDisableColor.reference,
opacity: 1,
+ _checked: {
+ bg: $inputTriggerDisableColor.reference,
+ borderColor: $inputTriggerDisableColor.reference,
+ },
},
[_notDisabled]: {
// Hovering over the label triggers the style for the control
@@ -110,14 +116,14 @@ export const commonInputTriggerStyles = {
},
},
commonContainerProps: {
- [INPUT_TRIGGER_DISABLE_COLOR]: "colors.disabled",
+ [$inputTriggerDisableColor.variable]: "colors.disabled",
_disabled: {
cursor: "not-allowed",
},
},
commonLabelProps: {
_disabled: {
- color: `var(${INPUT_TRIGGER_DISABLE_COLOR})`,
+ color: $inputTriggerDisableColor.reference,
opacity: 1,
},
},
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index 7f651b78bec..7be78fa6235 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -6,6 +6,7 @@ import { Modal } from "./Modal"
import { Checkbox } from "./Checkbox"
import { Tabs } from "./Tabs"
import { Radio } from "./Radio"
+import { Switch } from "./Switch"
import {
accordionDefaultTheme,
avatarDefaultTheme,
@@ -20,7 +21,6 @@ import {
menuDefaultTheme,
selectDefaultTheme,
spinnerDefaultTheme,
- switchDefaultTheme,
tableDefaultTheme,
} from "./components.utils"
@@ -44,7 +44,7 @@ export default {
Radio,
Select: selectDefaultTheme,
Spinner: spinnerDefaultTheme,
- Switch: switchDefaultTheme,
+ Switch,
Table: tableDefaultTheme,
Tabs,
Tag,
diff --git a/src/components/BaseStories/Switch.stories.tsx b/src/components/BaseStories/Switch.stories.tsx
new file mode 100644
index 00000000000..832573f3017
--- /dev/null
+++ b/src/components/BaseStories/Switch.stories.tsx
@@ -0,0 +1,41 @@
+import * as React from "react"
+import { SimpleGrid, Switch as SwitchComponent } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+type SwitchType = typeof SwitchComponent
+
+const meta: Meta = {
+ title: "Atoms / Form / Switch",
+ component: SwitchComponent,
+ parameters: {
+ controls: {
+ hideNoControlsWarning: true,
+ expanded: false,
+ },
+ },
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Switch: Story = {
+ render: () => (
+
+ isChecked:
+
+
+ isDisabled and checked:
+
+
+ isFocusable & isDisabled:
+
+
+ isReadOnly:
+
+
+ isRequired:
+
+
+ ),
+}
From 3c6a8bc9e43a11ad43e620daf2442a7682468ca8 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 30 Mar 2023 22:58:17 -0400
Subject: [PATCH 009/186] feat(theme/Input): add theme and story
---
.../gatsby-plugin/components/Input.ts | 113 ++++++++++++++++++
.../gatsby-plugin/components/index.ts | 2 +
src/components/Input/Input.stories.tsx | 50 ++++++++
src/components/Input/index.tsx | 32 +++++
4 files changed, 197 insertions(+)
create mode 100644 src/@chakra-ui/gatsby-plugin/components/Input.ts
create mode 100644 src/components/Input/Input.stories.tsx
create mode 100644 src/components/Input/index.tsx
diff --git a/src/@chakra-ui/gatsby-plugin/components/Input.ts b/src/@chakra-ui/gatsby-plugin/components/Input.ts
new file mode 100644
index 00000000000..0576a15d40c
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/components/Input.ts
@@ -0,0 +1,113 @@
+import { inputAnatomy } from "@chakra-ui/anatomy"
+import {
+ createMultiStyleConfigHelpers,
+ defineStyle,
+} from "@chakra-ui/styled-system"
+import { defineMergeStyles, inputDefaultTheme } from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+ createMultiStyleConfigHelpers(inputAnatomy.keys)
+
+const baseStyle = definePartsStyle((props) => {
+ const {
+ focusBorderColor: fc = "primary",
+ errorBorderColor: ec = "errorOutline",
+ } = props
+
+ return defineMergeStyles(
+ inputDefaultTheme.baseStyle,
+ inputDefaultTheme.variants?.outline(props),
+ {
+ field: {
+ borderColor: "body",
+ borderRadius: "base",
+ _placeholder: {
+ color: "disabled",
+ opacity: 1,
+ },
+ _focusVisible: {
+ borderColor: fc,
+ boxShadow: "none",
+ },
+ _hover: null, // override default
+ _invalid: {
+ borderColor: ec,
+ boxShadow: "none",
+ },
+ _disabled: {
+ borderColor: "disabled",
+ opacity: 1,
+ },
+ "&:not(:disabled)": {
+ _hover: {
+ borderColor: "primaryHover",
+ },
+ _active: {
+ bg: "backgroundHighlight",
+ borderColor: "primaryHighContrast",
+ },
+ },
+ },
+ element: {
+ fontSize: "xl",
+ _groupHover: {
+ color: "primaryHover",
+ },
+ _peerFocus: {
+ color: fc,
+ _peerInvalid: {
+ color: ec,
+ },
+ _peerDisabled: {
+ color: "disabled",
+ },
+ },
+ _peerDisabled: {
+ color: "disabled",
+ },
+ "[data-peer]:not(:disabled):active ~ &": {
+ color: "primaryDark",
+ _dark: {
+ color: "primaryHighContrast",
+ },
+ },
+ },
+ }
+ )
+})
+console.log(
+ "🚀 ~ file: Input.ts:78 ~ baseStyle ~ inputDefaultTheme.baseStyle,:",
+ inputDefaultTheme.baseStyle
+)
+
+const size = {
+ md: defineStyle({
+ h: 10,
+ px: 2,
+ }),
+ sm: defineStyle({
+ fontSize: "sm",
+ h: 8,
+ px: 1,
+ }),
+}
+
+const sizes = {
+ md: definePartsStyle({
+ field: size.md,
+ element: size.md,
+ }),
+ sm: definePartsStyle({
+ field: size.sm,
+ element: size.sm,
+ }),
+}
+
+export const Input = defineMultiStyleConfig({
+ baseStyle,
+ sizes,
+ defaultProps: {
+ variant: "outline",
+ size: "md",
+ },
+})
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index 7be78fa6235..3948ea89d03 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -7,6 +7,7 @@ import { Checkbox } from "./Checkbox"
import { Tabs } from "./Tabs"
import { Radio } from "./Radio"
import { Switch } from "./Switch"
+import { Input } from "./Input"
import {
accordionDefaultTheme,
avatarDefaultTheme,
@@ -38,6 +39,7 @@ export default {
Form: formDefaultTheme,
FormLabel: formLabelDefaultTheme,
Heading: headingDefaultTheme,
+ Input,
Link,
Menu: menuDefaultTheme,
Modal,
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
new file mode 100644
index 00000000000..17fbe872e9c
--- /dev/null
+++ b/src/components/Input/Input.stories.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import Input from "."
+import { MdSearch } from "react-icons/md"
+import { BsSlashSquare } from "react-icons/bs"
+
+type InputType = typeof Input
+
+const meta: Meta = {
+ title: "Atoms / Form / Input",
+ component: Input,
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Sizes: Story = {
+ render: () => (
+
+ }
+ rightElement={}
+ placeholder="Search"
+ />
+ }
+ rightElement={}
+ placeholder="Search"
+ size="sm"
+ />
+
+ ),
+}
+
+export const ElementVariations: Story = {
+ render: () => (
+
+ }
+ rightElement={}
+ placeholder="input text"
+ />
+ } placeholder="input text" />
+
+ } placeholder="input text" />
+
+ ),
+}
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
new file mode 100644
index 00000000000..b355f1ee8a8
--- /dev/null
+++ b/src/components/Input/index.tsx
@@ -0,0 +1,32 @@
+import * as React from "react"
+import {
+ Input as ChakraInput,
+ InputGroup,
+ InputLeftElement,
+ InputProps as ChakraInputProps,
+ InputRightElement,
+} from "@chakra-ui/react"
+
+interface InputProps extends ChakraInputProps {
+ /**
+ * The Element or Icon used to render `InputLeftElement`
+ */
+ leftElement?: React.ReactNode
+ /**
+ * The Element or Icon used to render `InputRightElement`
+ */
+ rightElement?: React.ReactNode
+}
+
+const Input = (props: InputProps) => {
+ const { leftElement, rightElement, size, ...rest } = props
+ return (
+
+
+ {leftElement ? : null}
+ {rightElement ? : null}
+
+ )
+}
+
+export default Input
From 150418c395b77bf110b9564c9e17e7b0894782e3 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Fri, 31 Mar 2023 00:01:22 -0400
Subject: [PATCH 010/186] feat(theme/dropdown): create component, theme, and
stories
---
package.json | 2 +
.../gatsby-plugin/components/Dropdown.ts | 118 +++++++++++++
.../gatsby-plugin/components/index.ts | 2 +
.../gatsby-plugin/semanticTokens.ts | 6 +
src/components/Dropdown/Dropdown.stories.tsx | 24 +++
src/components/Dropdown/index.tsx | 69 ++++++++
yarn.lock | 156 +++++++++++++++++-
7 files changed, 375 insertions(+), 2 deletions(-)
create mode 100644 src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
create mode 100644 src/components/Dropdown/Dropdown.stories.tsx
create mode 100644 src/components/Dropdown/index.tsx
diff --git a/package.json b/package.json
index eb0b65bc67e..bed89b0c1f8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
"@formatjs/intl-numberformat": "^6.1.4",
"@mdx-js/mdx": "^1.6.5",
"@mdx-js/react": "^1.6.5",
+ "@zag-js/react": "^0.3.12",
+ "@zag-js/select": "^0.2.1",
"algoliasearch": "^4.3.0",
"axios": "^0.21.2",
"browser-lang": "^0.1.0",
diff --git a/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts b/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
new file mode 100644
index 00000000000..841818bdc59
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
@@ -0,0 +1,118 @@
+import {
+ createMultiStyleConfigHelpers,
+ cssVar,
+ defineStyle,
+} from "@chakra-ui/react"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+ createMultiStyleConfigHelpers(["trigger", "triggerIcon", "content", "option"])
+
+const $borderBaseWidth = cssVar("border-base-width")
+
+const baseStyleTrigger = defineStyle({
+ [$borderBaseWidth.variable]: "1px",
+ borderColor: "currentColor",
+ borderStyle: "solid",
+ display: "inline-flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ gap: 4,
+ p: 2,
+ width: "full",
+ _active: {
+ bg: "primaryLowContrast",
+ boxShadow: "none",
+ },
+ _hover: {
+ boxShadow: "buttonHover",
+ color: "primary",
+ },
+ _focusVisible: {
+ outline: "3px solid",
+ outlineColor: "primaryHover",
+ },
+ _expanded: {
+ bg: "backgroundHighlight",
+ color: "primary",
+ boxShadow: "buttonHover",
+ outline: "none",
+ },
+})
+
+const baseStyleTriggerIcon = defineStyle({
+ "[data-expanded] > &": {
+ transform: "rotate(180deg)",
+ },
+})
+
+const baseStyleContent = defineStyle({
+ listStyle: "none",
+ bg: "backgroundHighlight",
+ width: "var(--reference-width)",
+ boxShadow: "buttonHover",
+ borderRadius: "base",
+ borderTopRadius: "none",
+ color: "primary",
+ m: 0,
+})
+
+const baseStyleOption = defineStyle({
+ p: 2,
+ m: 0,
+ cursor: "pointer",
+ "&[aria-selected='true'], &:hover": {
+ bg: "primaryHover",
+ color: "primaryLowContrast",
+ },
+ "&[data-focus]": {
+ outline: "3px solid",
+ outlineColor: "primaryHover",
+ outlineOffset: -3,
+ },
+})
+
+const baseStyle = definePartsStyle({
+ trigger: baseStyleTrigger,
+ triggerIcon: baseStyleTriggerIcon,
+ content: baseStyleContent,
+ option: baseStyleOption,
+})
+
+const variantOutline = definePartsStyle({
+ trigger: {
+ borderRadius: "base",
+ borderWidth: $borderBaseWidth.reference,
+ _expanded: {
+ borderBottomColor: "transparent",
+ borderBottomRadius: 0,
+ },
+ },
+ content: {
+ border: "1px",
+ borderColor: "currentColor",
+ borderTop: "0",
+ },
+})
+const variantFlushed = definePartsStyle({
+ trigger: {
+ borderTopRadius: "base",
+ borderBottomWidth: $borderBaseWidth.reference,
+ },
+ content: {
+ borderTop: "1px",
+ borderColor: "currentColor",
+ },
+})
+
+const variants = {
+ outline: variantOutline,
+ flushed: variantFlushed,
+}
+
+export const Dropdown = defineMultiStyleConfig({
+ baseStyle,
+ variants,
+ defaultProps: {
+ variant: "outline",
+ },
+})
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index 3948ea89d03..c7c23f9cf17 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -8,6 +8,7 @@ import { Tabs } from "./Tabs"
import { Radio } from "./Radio"
import { Switch } from "./Switch"
import { Input } from "./Input"
+import { Dropdown } from "./Dropdown"
import {
accordionDefaultTheme,
avatarDefaultTheme,
@@ -36,6 +37,7 @@ export default {
Code: codeDefaultTheme,
Divider: dividerDefaultTheme,
Drawer: drawerDefaultTheme,
+ Dropdown,
Form: formDefaultTheme,
FormLabel: formLabelDefaultTheme,
Heading: headingDefaultTheme,
diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
index 19aeeb602b6..94959272a6f 100644
--- a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
+++ b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
@@ -82,6 +82,12 @@ const semanticTokens = {
"linear-gradient(102.7deg, rgba(185, 185, 241, 0.2) 0%, rgba(84, 132, 234, 0.2) 51.56%, rgba(58, 142, 137, 0.2) 100%)",
},
},
+ shadows: {
+ buttonHover: {
+ _light: "4px 4px 0 var(--eth-colors-blue-100)",
+ _dark: "4px 4px 0 #352313",
+ },
+ },
}
export default semanticTokens
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 00000000000..d90f0fbc591
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import { VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import DropdownComponent from "."
+
+type DropdownType = typeof DropdownComponent
+
+const meta: Meta = {
+ title: "Atoms / Form / Dropdown",
+ component: DropdownComponent,
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Dropdown: Story = {
+ render: () => (
+
+
+
+
+ ),
+}
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
new file mode 100644
index 00000000000..ad278ac2bf3
--- /dev/null
+++ b/src/components/Dropdown/index.tsx
@@ -0,0 +1,69 @@
+import * as React from "react"
+import { useMachine, normalizeProps } from "@zag-js/react"
+import { machine, connect } from "@zag-js/select"
+import {
+ chakra,
+ Portal,
+ SystemStyleObject,
+ useMultiStyleConfig,
+ ThemingProps,
+} from "@chakra-ui/react"
+import { FaChevronDown } from "react-icons/fa"
+
+const selectData = [
+ { label: "Ethereum", value: "eth" },
+ { label: "Bitcoin", value: "bit" },
+ { label: "Dogecoin", value: "doge" },
+]
+
+interface DropdownProps extends ThemingProps<"Dropdown"> {}
+
+const Dropdown = (props: DropdownProps) => {
+ const { variant } = props
+
+ const [state, send] = useMachine(
+ machine({
+ id: React.useId(),
+ positioning: {
+ gutter: -1,
+ },
+ })
+ )
+
+ const api = connect(state, send, normalizeProps)
+
+ const styles = useMultiStyleConfig("Dropdown", { variant }) as Record<
+ "trigger" | "triggerIcon" | "content" | "option",
+ SystemStyleObject
+ >
+
+ const triggerRef = React.useRef(null)
+
+ return (
+ <>
+
+ {api.selectedOption?.label ?? "Select Crypto"}
+
+
+
+
+
+
+
+ {selectData.map(({ label, value }) => (
+
+ {label}
+
+ ))}
+
+
+
+ >
+ )
+}
+
+export default Dropdown
diff --git a/yarn.lock b/yarn.lock
index 1730121b732..3ae07ad64e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2408,6 +2408,18 @@
resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
+"@floating-ui/core@^1.2.4":
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54"
+ integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==
+
+"@floating-ui/dom@1.2.5":
+ version "1.2.5"
+ resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9"
+ integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==
+ dependencies:
+ "@floating-ui/core" "^1.2.4"
+
"@formatjs/ecma402-abstract@1.11.4":
version "1.11.4"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
@@ -5517,6 +5529,47 @@
dependencies:
tslib "^2.4.0"
+"@zag-js/anatomy@0.1.4":
+ version "0.1.4"
+ resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.1.4.tgz#61c5434eaa4e2a8fd2e09ac6fc22b83a74e46052"
+ integrity sha512-Xc5QmQwY0W3VdkukYVaoujuCmgf0Y2ZbXhIBi0CJ0d8wWRwjkphhJu8l9kDyX4ElpyzvExYbrpTuQoI4BspaVQ==
+
+"@zag-js/core@0.2.12":
+ version "0.2.12"
+ resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.2.12.tgz#22f4217bc583f12bc3e071c54ad43b7f42eea74a"
+ integrity sha512-XAcB9BorwetDljwLQeFHrTeBpw7jQUSKNj1zfy+TU/ZmQ9JVaKSDLO0JdKAy05lJIT7jKpjOkGB3g5tt+mT79w==
+ dependencies:
+ "@zag-js/store" "0.2.8"
+ klona "2.0.6"
+
+"@zag-js/dismissable@0.2.6":
+ version "0.2.6"
+ resolved "https://registry.yarnpkg.com/@zag-js/dismissable/-/dismissable-0.2.6.tgz#eedac5fbd1511a356396053807000281044d35cd"
+ integrity sha512-ra72EJySeKRuVaUj/m/OiMFq32dAkVY8dD387EhhSZejN0GLUQlKfZG4/3Mq6j4mm71N1Nig0epGZ6o1LSxDIA==
+ dependencies:
+ "@zag-js/dom-event" "0.0.1"
+ "@zag-js/dom-query" "0.1.4"
+ "@zag-js/interact-outside" "0.2.6"
+ "@zag-js/utils" "0.3.4"
+
+"@zag-js/dom-event@0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.0.1.tgz#a6864a582a3e318349577e2ab2aca5d0aef495cb"
+ integrity sha512-oRDWn/31JUwTc9nIUG/Ingug6FNBkhXUnd2dh3vEcqfk+NVHPZ9Lgx5tauiEDyiRKeWr9PS5GJpBQVNc2YDo3Q==
+ dependencies:
+ "@zag-js/text-selection" "0.0.1"
+ "@zag-js/types" "0.3.4"
+
+"@zag-js/dom-query@0.1.4":
+ version "0.1.4"
+ resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.1.4.tgz#942602800d81f2d38264ce1e879831329e51a6a1"
+ integrity sha512-s2q18k3z3ABAkySc6xK1NLPVIdgZGTLSZxok7yzpCYoywEeCnFvP6K63Q4ONElk74XgO7Eq8KMzIj702LDS+Mg==
+
+"@zag-js/element-rect@0.3.0":
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/@zag-js/element-rect/-/element-rect-0.3.0.tgz#af8c6680bb34b6f6dba06b1ac7919b01d09f5d95"
+ integrity sha512-P3bdcfE5Bk3Bm7qhs8lPDykgWNYJeMgyqa+3Z93QPCH9cXsg76O0OrhkK3kWruHzT/f+sVXDDZ1yEUxxgLCRFg==
+
"@zag-js/element-size@0.3.2":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.3.2.tgz#ebb76af2a024230482406db41344598d1a9f54f4"
@@ -5527,6 +5580,100 @@
resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.2.2.tgz#56233480ca1275d3218fb2e10696a33d1a6b9e64"
integrity sha512-0j2gZq8HiZ51z4zNnSkF1iSkqlwRDvdH+son3wHdoz+7IUdMN/5Exd4TxMJ+gq2Of1DiXReYLL9qqh2PdQ4wgA==
+"@zag-js/form-utils@0.2.5":
+ version "0.2.5"
+ resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.2.5.tgz#0f8e6cfa36560735a1f7e9d2dca651db8be43310"
+ integrity sha512-aqdj+M4lvczDITrfkZqQxGkfHbFn084ONRkDylaPNx8xQKoRbsy+crDga10QDOUkgSMtVOB8XZ+VyJHQAzRErQ==
+ dependencies:
+ "@zag-js/mutation-observer" "0.0.1"
+
+"@zag-js/interact-outside@0.2.6":
+ version "0.2.6"
+ resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.2.6.tgz#9c6add221e15760e3c607bf3ab1e2b14b7ba77b5"
+ integrity sha512-4Q3ij2aDYwcGkJmlyxIq+lq3J9gF2hjMJGAIYFC6AOfN/SCivkPFlq3zabCZUSZrzPYwggMVL6GdUI+bTAE4Iw==
+ dependencies:
+ "@zag-js/dom-event" "0.0.1"
+ "@zag-js/dom-query" "0.1.4"
+ "@zag-js/tabbable" "0.1.1"
+ "@zag-js/utils" "0.3.4"
+
+"@zag-js/mutation-observer@0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.0.1.tgz#55fb919b9c2cf07fb9255caea5ae698b82d8df18"
+ integrity sha512-HasPzt6LyVWsu1jwx3lFNKuV3nlaJQ918rU1wUnhqMD8ZVSKvNBxCoz0NswiKZWTR/6eNwFwvHrewJiWKXivrw==
+
+"@zag-js/popper@0.2.7":
+ version "0.2.7"
+ resolved "https://registry.yarnpkg.com/@zag-js/popper/-/popper-0.2.7.tgz#0e9d741edb3c10e140fbe9ef252f78f2ccda5580"
+ integrity sha512-ruWgwZXYt+hEhMamjuQ1J/UdQsRazB0t4eajatgb9ei9YPtFDxEmXf3UegeWkhMTMfZdTTZEozmtrzcflzAmKQ==
+ dependencies:
+ "@floating-ui/dom" "1.2.5"
+ "@zag-js/dom-query" "0.1.4"
+ "@zag-js/element-rect" "0.3.0"
+ "@zag-js/utils" "0.3.4"
+
+"@zag-js/react@^0.3.12":
+ version "0.3.12"
+ resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.3.12.tgz#641cdee856ad27ca7291de722ac6121c0783d78c"
+ integrity sha512-IkGcZMCoU1ahJMlZ5Y0r1rrftmw9DUFW213qifveYr7Y1FX0vKfeMq5rbhI5+hrwcnJfgUSsFs3lQ8fwxVT+RA==
+ dependencies:
+ "@zag-js/core" "0.2.12"
+ "@zag-js/store" "0.2.8"
+ "@zag-js/types" "0.3.4"
+ proxy-compare "2.5.0"
+
+"@zag-js/select@^0.2.1":
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/select/-/select-0.2.1.tgz#b88ca85fc7847aa9df9c50ce173fc9a2462096ae"
+ integrity sha512-JmxCbkFdyfScrywJnuVm6XFHMEfXuP7Pcn2mI3UpUu7lYEkckDw+K3KHHbB6cNEmeHNiAFGAK5jul27/XxUetg==
+ dependencies:
+ "@zag-js/anatomy" "0.1.4"
+ "@zag-js/core" "0.2.12"
+ "@zag-js/dismissable" "0.2.6"
+ "@zag-js/dom-event" "0.0.1"
+ "@zag-js/dom-query" "0.1.4"
+ "@zag-js/form-utils" "0.2.5"
+ "@zag-js/mutation-observer" "0.0.1"
+ "@zag-js/popper" "0.2.7"
+ "@zag-js/tabbable" "0.1.1"
+ "@zag-js/types" "0.3.4"
+ "@zag-js/utils" "0.3.4"
+ "@zag-js/visually-hidden" "0.0.1"
+
+"@zag-js/store@0.2.8":
+ version "0.2.8"
+ resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.2.8.tgz#b7b477c56e688043ed3f1c7a8ebb12cb6e994639"
+ integrity sha512-QgBnbYjb5jvcTt0+JCoPJ9YKM9vP1/RR78mkT6fWCIM0N8hnZu4MzQPVKxiopxZ8XIrDbUjFWlJLzL83uiYv2g==
+ dependencies:
+ proxy-compare "2.5.0"
+
+"@zag-js/tabbable@0.1.1":
+ version "0.1.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/tabbable/-/tabbable-0.1.1.tgz#5cfeb336c72e408b54a22e05471867ded7698e65"
+ integrity sha512-wvGE8pLZW1U1u15Gdk8NXLFmPhBePhBVcuG/eJ/bb3FpCh+oX2hJAANxlDCJrGN4ticGyTwJNYG1XOYaf6ZEGA==
+
+"@zag-js/text-selection@0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.0.1.tgz#7eeeb32a23d4936d3a4f1c1f5d5bbc03cbf462cb"
+ integrity sha512-l8Im0FkMw63BPXocHRbtFgMIz3SkVpc4HI/S/wV0FqKgWMzOZzd/avHljCNfoXyhjhKauwR5xPivAwsOcye8CA==
+
+"@zag-js/types@0.3.4":
+ version "0.3.4"
+ resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.3.4.tgz#9443590d80d4bad8861fcee1e0b1939611964c5c"
+ integrity sha512-KkZOMNqFZA0TaVF70O6WIRJPWTcDyRQjhXLDkLVfo99gwJdsC1bMZWfjrCiR8g1CfzvCyGNSWzdArIgzTJVEMA==
+ dependencies:
+ csstype "3.1.1"
+
+"@zag-js/utils@0.3.4":
+ version "0.3.4"
+ resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.3.4.tgz#3efc22fbddf97a5190ba444c6a74e52f4c6bbcfe"
+ integrity sha512-Wz6OsvGsteCmu8uGot5H/xj0QpUzXlmAlDw+d2Lnqz1Y3uWcq36r6EPWfH15HXJXdEDuCameAmdOruZ0s/SVjA==
+
+"@zag-js/visually-hidden@0.0.1":
+ version "0.0.1"
+ resolved "https://registry.yarnpkg.com/@zag-js/visually-hidden/-/visually-hidden-0.0.1.tgz#7ac8c463ff16c7011e67036f2a007fd25d8024b8"
+ integrity sha512-wEhubtraCJOPFh3aPcidQWXF7a9O1TG1I48blpGt3XEI9brwpp7Gjjvus5uGkH00s+WziEudy1dv2B0HOTexNA==
+
abortcontroller-polyfill@^1.1.9:
version "1.7.5"
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
@@ -7905,7 +8052,7 @@ csso@^4.2.0:
dependencies:
css-tree "^1.1.2"
-csstype@^3.0.11, csstype@^3.0.2:
+csstype@3.1.1, csstype@^3.0.11, csstype@^3.0.2:
version "3.1.1"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
@@ -12633,7 +12780,7 @@ kleur@^3.0.3:
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-klona@^2.0.4:
+klona@2.0.6, klona@^2.0.4:
version "2.0.6"
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
@@ -15351,6 +15498,11 @@ proxy-addr@~2.0.7:
forwarded "0.2.0"
ipaddr.js "1.9.1"
+proxy-compare@2.5.0:
+ version "2.5.0"
+ resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.0.tgz#0387c5e4d283ba9b1c0353bb20def4449b06bbd2"
+ integrity sha512-f1us0OsVAJ3tdIMXGQx2lmseYS4YXe4W+sKF5g5ww/jV+5ogMadPt+sIZ+88Ga9kvMJsrRNWzCrKPpr6pMWYbA==
+
proxy-from-env@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
From 724d61796bda4cf0d27a029e18cb8e5ad65a8dfa Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 16:47:27 -0400
Subject: [PATCH 011/186] chore(theme/Input): remove console log
---
src/@chakra-ui/gatsby-plugin/components/Input.ts | 4 ----
1 file changed, 4 deletions(-)
diff --git a/src/@chakra-ui/gatsby-plugin/components/Input.ts b/src/@chakra-ui/gatsby-plugin/components/Input.ts
index 0576a15d40c..816b5892325 100644
--- a/src/@chakra-ui/gatsby-plugin/components/Input.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/Input.ts
@@ -75,10 +75,6 @@ const baseStyle = definePartsStyle((props) => {
}
)
})
-console.log(
- "🚀 ~ file: Input.ts:78 ~ baseStyle ~ inputDefaultTheme.baseStyle,:",
- inputDefaultTheme.baseStyle
-)
const size = {
md: defineStyle({
From f0fb32e9ce4f87a1cfb5e9166692bd34d6c01cf8 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 18:57:04 -0400
Subject: [PATCH 012/186] refactor(Input): restructure component returns
---
src/components/Input/index.tsx | 26 +++++++++++++++++---------
1 file changed, 17 insertions(+), 9 deletions(-)
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index b355f1ee8a8..562fc96713f 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
import {
Input as ChakraInput,
InputGroup,
+ InputGroupProps,
InputLeftElement,
InputProps as ChakraInputProps,
InputRightElement,
@@ -16,17 +17,24 @@ interface InputProps extends ChakraInputProps {
* The Element or Icon used to render `InputRightElement`
*/
rightElement?: React.ReactNode
+ inputGroupProps?: InputGroupProps
}
-const Input = (props: InputProps) => {
- const { leftElement, rightElement, size, ...rest } = props
- return (
-
-
- {leftElement ? : null}
- {rightElement ? : null}
-
- )
+function Input(props: InputProps) {
+ if ("leftElement" in props || "rightElement" in props) {
+ const { size, inputGroupProps, leftElement, rightElement, ...rest } = props
+ return (
+
+
+ {leftElement ? : null}
+ {rightElement ? : null}
+
+ )
+ }
+
+ const { size, ...rest } = props
+
+ return
}
export default Input
From 0c954de2a44200b13f3526b66df30f33eb4fbc41 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 19:06:37 -0400
Subject: [PATCH 013/186] refactor: update Input component implementations
---
src/components/MeetupList.tsx | 8 +-----
.../Staking/WithdrawalCredentials.tsx | 5 ++--
src/pages/languages.tsx | 27 ++++++++++---------
3 files changed, 18 insertions(+), 22 deletions(-)
diff --git a/src/components/MeetupList.tsx b/src/components/MeetupList.tsx
index f7e201ea4ba..0eacb2e7623 100644
--- a/src/components/MeetupList.tsx
+++ b/src/components/MeetupList.tsx
@@ -4,7 +4,6 @@ import { sortBy } from "lodash"
import {
Box,
Flex,
- Input,
LinkBox,
LinkOverlay,
Text,
@@ -19,6 +18,7 @@ import Translation from "./Translation"
// Data
import meetups from "../data/community-meetups.json"
+import Input from "./Input"
export interface Meetup {
title: string
@@ -64,13 +64,7 @@ const MeetupList: React.FC = () => {
mr="auto"
ml="auto"
mb={6}
- border="1px solid"
- borderColor="searchBorder"
- color="text"
- bg="searchBackground"
p={2}
- borderRadius="base"
- w="100%"
_focus={{ outline: "auto 1px" }}
_placeholder={{ color: "text200" }}
/>
diff --git a/src/components/Staking/WithdrawalCredentials.tsx b/src/components/Staking/WithdrawalCredentials.tsx
index cd0608bc938..e9323f3e78c 100644
--- a/src/components/Staking/WithdrawalCredentials.tsx
+++ b/src/components/Staking/WithdrawalCredentials.tsx
@@ -1,6 +1,6 @@
// Import libraries
import React, { FC, useState, useMemo, ChangeEvent } from "react"
-import { Button, Flex, Input, Text } from "@chakra-ui/react"
+import { Button, Flex, Text } from "@chakra-ui/react"
import { useTranslation } from "gatsby-plugin-react-i18next"
// Components
import CopyToClipboard from "../CopyToClipboard"
@@ -8,6 +8,7 @@ import Emoji from "../Emoji"
import Translation from "../Translation"
// Utilites
import { trackCustomEvent } from "../../utils/matomo"
+import Input from "../Input"
interface Validator {
validatorIndex: number
@@ -139,13 +140,11 @@ const WithdrawalCredentials: FC = () => {
{
:
{translationsCompleted.map((lang) => (
From 4328aa8e98c83f18dfb06218ffe7bf69bc4d9c14 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 19:10:35 -0400
Subject: [PATCH 014/186] refactor: update Checkbox component implementation
---
src/components/MatomoOptOut.tsx | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/components/MatomoOptOut.tsx b/src/components/MatomoOptOut.tsx
index 585867833d7..7130a263c99 100644
--- a/src/components/MatomoOptOut.tsx
+++ b/src/components/MatomoOptOut.tsx
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react"
import { MATOMO_LS_KEY } from "../utils/matomo"
-import { Checkbox, Flex, Text } from "@chakra-ui/react"
+import { Flex, Text } from "@chakra-ui/react"
+import Checkbox from "./Checkbox"
export interface IProps {}
@@ -53,12 +54,10 @@ const MatomoOptOut: React.FC = () => {
"Loading preferences..."
) : (
{isOptedOut
? "You are opted out. Check this box to opt-in."
From 007092e332cdfc1220dba555afc1c6c88e140c96 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 19:16:39 -0400
Subject: [PATCH 015/186] style(theme/Switch): remove track border
---
src/@chakra-ui/gatsby-plugin/components/Switch.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/@chakra-ui/gatsby-plugin/components/Switch.ts b/src/@chakra-ui/gatsby-plugin/components/Switch.ts
index 7b73d6b9622..f8560ff2538 100644
--- a/src/@chakra-ui/gatsby-plugin/components/Switch.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/Switch.ts
@@ -19,8 +19,7 @@ const { commonControlProps, commonContainerProps, commonLabelProps } =
const baseStyleContainer = defineMergeStyles(
defaultBaseStyle?.({} as never).container,
switchSmSize?.container,
- commonContainerProps,
- {}
+ commonContainerProps
)
const baseStyleThumb = defineMergeStyles(
@@ -33,6 +32,7 @@ const baseStyleTrack = defineMergeStyles(
commonControlProps,
{
bg: "bodyLight",
+ border: "none",
_invalid: { borderColor: "errorOutline" },
_focusVisible: { bg: "gray.500", borderColor: "transparent" },
}
From d9d6154fdc464fa1ee2e4f73db9c5d113eb38a98 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Sun, 2 Apr 2023 19:16:58 -0400
Subject: [PATCH 016/186] refactor: update Switch component implimentation
---
src/components/TableOfContents/index.tsx | 18 ------------------
1 file changed, 18 deletions(-)
diff --git a/src/components/TableOfContents/index.tsx b/src/components/TableOfContents/index.tsx
index db74dae4162..4d267c4e564 100644
--- a/src/components/TableOfContents/index.tsx
+++ b/src/components/TableOfContents/index.tsx
@@ -118,24 +118,6 @@ const TableOfContents: React.FC = ({
handleZenModeChange()}
/>
From 907fc9662d98b828fad1f487ef8a52765aebfef8 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Wed, 12 Apr 2023 23:12:56 -0400
Subject: [PATCH 017/186] revert(theme): remove Dropdown component and theme
---
.../gatsby-plugin/components/Dropdown.ts | 118 ------------------
.../gatsby-plugin/components/index.ts | 2 -
src/components/Dropdown/Dropdown.stories.tsx | 24 ----
src/components/Dropdown/index.tsx | 69 ----------
4 files changed, 213 deletions(-)
delete mode 100644 src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
delete mode 100644 src/components/Dropdown/Dropdown.stories.tsx
delete mode 100644 src/components/Dropdown/index.tsx
diff --git a/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts b/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
deleted file mode 100644
index 841818bdc59..00000000000
--- a/src/@chakra-ui/gatsby-plugin/components/Dropdown.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
- createMultiStyleConfigHelpers,
- cssVar,
- defineStyle,
-} from "@chakra-ui/react"
-
-const { defineMultiStyleConfig, definePartsStyle } =
- createMultiStyleConfigHelpers(["trigger", "triggerIcon", "content", "option"])
-
-const $borderBaseWidth = cssVar("border-base-width")
-
-const baseStyleTrigger = defineStyle({
- [$borderBaseWidth.variable]: "1px",
- borderColor: "currentColor",
- borderStyle: "solid",
- display: "inline-flex",
- alignItems: "center",
- justifyContent: "space-between",
- gap: 4,
- p: 2,
- width: "full",
- _active: {
- bg: "primaryLowContrast",
- boxShadow: "none",
- },
- _hover: {
- boxShadow: "buttonHover",
- color: "primary",
- },
- _focusVisible: {
- outline: "3px solid",
- outlineColor: "primaryHover",
- },
- _expanded: {
- bg: "backgroundHighlight",
- color: "primary",
- boxShadow: "buttonHover",
- outline: "none",
- },
-})
-
-const baseStyleTriggerIcon = defineStyle({
- "[data-expanded] > &": {
- transform: "rotate(180deg)",
- },
-})
-
-const baseStyleContent = defineStyle({
- listStyle: "none",
- bg: "backgroundHighlight",
- width: "var(--reference-width)",
- boxShadow: "buttonHover",
- borderRadius: "base",
- borderTopRadius: "none",
- color: "primary",
- m: 0,
-})
-
-const baseStyleOption = defineStyle({
- p: 2,
- m: 0,
- cursor: "pointer",
- "&[aria-selected='true'], &:hover": {
- bg: "primaryHover",
- color: "primaryLowContrast",
- },
- "&[data-focus]": {
- outline: "3px solid",
- outlineColor: "primaryHover",
- outlineOffset: -3,
- },
-})
-
-const baseStyle = definePartsStyle({
- trigger: baseStyleTrigger,
- triggerIcon: baseStyleTriggerIcon,
- content: baseStyleContent,
- option: baseStyleOption,
-})
-
-const variantOutline = definePartsStyle({
- trigger: {
- borderRadius: "base",
- borderWidth: $borderBaseWidth.reference,
- _expanded: {
- borderBottomColor: "transparent",
- borderBottomRadius: 0,
- },
- },
- content: {
- border: "1px",
- borderColor: "currentColor",
- borderTop: "0",
- },
-})
-const variantFlushed = definePartsStyle({
- trigger: {
- borderTopRadius: "base",
- borderBottomWidth: $borderBaseWidth.reference,
- },
- content: {
- borderTop: "1px",
- borderColor: "currentColor",
- },
-})
-
-const variants = {
- outline: variantOutline,
- flushed: variantFlushed,
-}
-
-export const Dropdown = defineMultiStyleConfig({
- baseStyle,
- variants,
- defaultProps: {
- variant: "outline",
- },
-})
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index c7c23f9cf17..3948ea89d03 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -8,7 +8,6 @@ import { Tabs } from "./Tabs"
import { Radio } from "./Radio"
import { Switch } from "./Switch"
import { Input } from "./Input"
-import { Dropdown } from "./Dropdown"
import {
accordionDefaultTheme,
avatarDefaultTheme,
@@ -37,7 +36,6 @@ export default {
Code: codeDefaultTheme,
Divider: dividerDefaultTheme,
Drawer: drawerDefaultTheme,
- Dropdown,
Form: formDefaultTheme,
FormLabel: formLabelDefaultTheme,
Heading: headingDefaultTheme,
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
deleted file mode 100644
index d90f0fbc591..00000000000
--- a/src/components/Dropdown/Dropdown.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react"
-import { VStack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
-import DropdownComponent from "."
-
-type DropdownType = typeof DropdownComponent
-
-const meta: Meta = {
- title: "Atoms / Form / Dropdown",
- component: DropdownComponent,
-}
-
-export default meta
-
-type Story = StoryObj
-
-export const Dropdown: Story = {
- render: () => (
-
-
-
-
- ),
-}
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
deleted file mode 100644
index ad278ac2bf3..00000000000
--- a/src/components/Dropdown/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import * as React from "react"
-import { useMachine, normalizeProps } from "@zag-js/react"
-import { machine, connect } from "@zag-js/select"
-import {
- chakra,
- Portal,
- SystemStyleObject,
- useMultiStyleConfig,
- ThemingProps,
-} from "@chakra-ui/react"
-import { FaChevronDown } from "react-icons/fa"
-
-const selectData = [
- { label: "Ethereum", value: "eth" },
- { label: "Bitcoin", value: "bit" },
- { label: "Dogecoin", value: "doge" },
-]
-
-interface DropdownProps extends ThemingProps<"Dropdown"> {}
-
-const Dropdown = (props: DropdownProps) => {
- const { variant } = props
-
- const [state, send] = useMachine(
- machine({
- id: React.useId(),
- positioning: {
- gutter: -1,
- },
- })
- )
-
- const api = connect(state, send, normalizeProps)
-
- const styles = useMultiStyleConfig("Dropdown", { variant }) as Record<
- "trigger" | "triggerIcon" | "content" | "option",
- SystemStyleObject
- >
-
- const triggerRef = React.useRef(null)
-
- return (
- <>
-
- {api.selectedOption?.label ?? "Select Crypto"}
-
-
-
-
-
-
-
- {selectData.map(({ label, value }) => (
-
- {label}
-
- ))}
-
-
-
- >
- )
-}
-
-export default Dropdown
From 6c56945d07eb8994d915d16e88934a5142a57edb Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Wed, 12 Apr 2023 23:13:19 -0400
Subject: [PATCH 018/186] feat(theme/Select): add custom styling and story
---
.../gatsby-plugin/components/Select.ts | 66 +++++++++++++++++++
.../gatsby-plugin/components/index.ts | 4 +-
src/components/BaseStories/Select.stories.tsx | 44 +++++++++++++
3 files changed, 112 insertions(+), 2 deletions(-)
create mode 100644 src/@chakra-ui/gatsby-plugin/components/Select.ts
create mode 100644 src/components/BaseStories/Select.stories.tsx
diff --git a/src/@chakra-ui/gatsby-plugin/components/Select.ts b/src/@chakra-ui/gatsby-plugin/components/Select.ts
new file mode 100644
index 00000000000..81204d3614d
--- /dev/null
+++ b/src/@chakra-ui/gatsby-plugin/components/Select.ts
@@ -0,0 +1,66 @@
+import { selectAnatomy } from "@chakra-ui/anatomy"
+import {
+ createMultiStyleConfigHelpers,
+ cssVar,
+ defineStyle,
+} from "@chakra-ui/react"
+import { defineMergeStyles, selectDefaultTheme } from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+ createMultiStyleConfigHelpers(selectAnatomy.keys)
+
+const $borderBaseWidth = cssVar("border-base-width")
+
+const baseStyleField = defineMergeStyles(selectDefaultTheme.baseStyle?.field, {
+ [$borderBaseWidth.variable]: "1px",
+ borderColor: "currentColor",
+ cursor: "pointer",
+ py: 2,
+ ps: 2,
+ pe: 8,
+ _active: {
+ bg: "primaryLowContrast",
+ boxShadow: "none",
+ },
+ _hover: {
+ boxShadow: "buttonHover",
+ color: "primary",
+ },
+ _focusVisible: {
+ outline: "3px solid",
+ outlineColor: "primaryHover",
+ outlineOffset: "-1px",
+ },
+})
+
+const baseStyle = definePartsStyle({
+ field: baseStyleField,
+ icon: selectDefaultTheme.baseStyle?.icon,
+})
+
+const variantOutline = definePartsStyle({
+ field: {
+ borderRadius: "base",
+ borderWidth: $borderBaseWidth.reference,
+ },
+})
+
+const variantFlushed = definePartsStyle({
+ field: {
+ borderTopRadius: "base",
+ borderBottomWidth: $borderBaseWidth.reference,
+ },
+})
+
+const variants = {
+ outline: variantOutline,
+ flushed: variantFlushed,
+}
+
+export const Select = defineMultiStyleConfig({
+ baseStyle,
+ variants,
+ defaultProps: {
+ variant: "outline",
+ },
+})
diff --git a/src/@chakra-ui/gatsby-plugin/components/index.ts b/src/@chakra-ui/gatsby-plugin/components/index.ts
index 3948ea89d03..ce67e91cde2 100644
--- a/src/@chakra-ui/gatsby-plugin/components/index.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/index.ts
@@ -6,6 +6,7 @@ import { Modal } from "./Modal"
import { Checkbox } from "./Checkbox"
import { Tabs } from "./Tabs"
import { Radio } from "./Radio"
+import { Select } from "./Select"
import { Switch } from "./Switch"
import { Input } from "./Input"
import {
@@ -20,7 +21,6 @@ import {
formLabelDefaultTheme,
headingDefaultTheme,
menuDefaultTheme,
- selectDefaultTheme,
spinnerDefaultTheme,
tableDefaultTheme,
} from "./components.utils"
@@ -44,7 +44,7 @@ export default {
Menu: menuDefaultTheme,
Modal,
Radio,
- Select: selectDefaultTheme,
+ Select,
Spinner: spinnerDefaultTheme,
Switch,
Table: tableDefaultTheme,
diff --git a/src/components/BaseStories/Select.stories.tsx b/src/components/BaseStories/Select.stories.tsx
new file mode 100644
index 00000000000..10c48132a51
--- /dev/null
+++ b/src/components/BaseStories/Select.stories.tsx
@@ -0,0 +1,44 @@
+import * as React from "react"
+import { Select as SelectComponent, VStack } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+
+const selectData = [
+ { label: "Ethereum", value: "eth" },
+ { label: "Bitcoin", value: "bit" },
+ { label: "Dogecoin", value: "doge" },
+]
+
+type SelectType = typeof SelectComponent
+
+const meta: Meta = {
+ title: "Atoms / Form / Select",
+ component: SelectComponent,
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Select: Story = {
+ args: {
+ minW: "223px",
+ },
+ render: (args) => (
+
+
+ {selectData.map(({ label, value }) => (
+
+ ))}
+
+
+ {selectData.map(({ label, value }) => (
+
+ ))}
+
+
+ ),
+}
From 2dbc09e7329a0278a0f1b51fcbc30cb560c4dd71 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Wed, 12 Apr 2023 23:36:10 -0400
Subject: [PATCH 019/186] revert(deps): remove zag deps
---
package.json | 2 -
yarn.lock | 156 +--------------------------------------------------
2 files changed, 2 insertions(+), 156 deletions(-)
diff --git a/package.json b/package.json
index bed89b0c1f8..eb0b65bc67e 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,6 @@
"@formatjs/intl-numberformat": "^6.1.4",
"@mdx-js/mdx": "^1.6.5",
"@mdx-js/react": "^1.6.5",
- "@zag-js/react": "^0.3.12",
- "@zag-js/select": "^0.2.1",
"algoliasearch": "^4.3.0",
"axios": "^0.21.2",
"browser-lang": "^0.1.0",
diff --git a/yarn.lock b/yarn.lock
index 3ae07ad64e7..1730121b732 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2408,18 +2408,6 @@
resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
-"@floating-ui/core@^1.2.4":
- version "1.2.5"
- resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54"
- integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==
-
-"@floating-ui/dom@1.2.5":
- version "1.2.5"
- resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9"
- integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==
- dependencies:
- "@floating-ui/core" "^1.2.4"
-
"@formatjs/ecma402-abstract@1.11.4":
version "1.11.4"
resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
@@ -5529,47 +5517,6 @@
dependencies:
tslib "^2.4.0"
-"@zag-js/anatomy@0.1.4":
- version "0.1.4"
- resolved "https://registry.yarnpkg.com/@zag-js/anatomy/-/anatomy-0.1.4.tgz#61c5434eaa4e2a8fd2e09ac6fc22b83a74e46052"
- integrity sha512-Xc5QmQwY0W3VdkukYVaoujuCmgf0Y2ZbXhIBi0CJ0d8wWRwjkphhJu8l9kDyX4ElpyzvExYbrpTuQoI4BspaVQ==
-
-"@zag-js/core@0.2.12":
- version "0.2.12"
- resolved "https://registry.yarnpkg.com/@zag-js/core/-/core-0.2.12.tgz#22f4217bc583f12bc3e071c54ad43b7f42eea74a"
- integrity sha512-XAcB9BorwetDljwLQeFHrTeBpw7jQUSKNj1zfy+TU/ZmQ9JVaKSDLO0JdKAy05lJIT7jKpjOkGB3g5tt+mT79w==
- dependencies:
- "@zag-js/store" "0.2.8"
- klona "2.0.6"
-
-"@zag-js/dismissable@0.2.6":
- version "0.2.6"
- resolved "https://registry.yarnpkg.com/@zag-js/dismissable/-/dismissable-0.2.6.tgz#eedac5fbd1511a356396053807000281044d35cd"
- integrity sha512-ra72EJySeKRuVaUj/m/OiMFq32dAkVY8dD387EhhSZejN0GLUQlKfZG4/3Mq6j4mm71N1Nig0epGZ6o1LSxDIA==
- dependencies:
- "@zag-js/dom-event" "0.0.1"
- "@zag-js/dom-query" "0.1.4"
- "@zag-js/interact-outside" "0.2.6"
- "@zag-js/utils" "0.3.4"
-
-"@zag-js/dom-event@0.0.1":
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/@zag-js/dom-event/-/dom-event-0.0.1.tgz#a6864a582a3e318349577e2ab2aca5d0aef495cb"
- integrity sha512-oRDWn/31JUwTc9nIUG/Ingug6FNBkhXUnd2dh3vEcqfk+NVHPZ9Lgx5tauiEDyiRKeWr9PS5GJpBQVNc2YDo3Q==
- dependencies:
- "@zag-js/text-selection" "0.0.1"
- "@zag-js/types" "0.3.4"
-
-"@zag-js/dom-query@0.1.4":
- version "0.1.4"
- resolved "https://registry.yarnpkg.com/@zag-js/dom-query/-/dom-query-0.1.4.tgz#942602800d81f2d38264ce1e879831329e51a6a1"
- integrity sha512-s2q18k3z3ABAkySc6xK1NLPVIdgZGTLSZxok7yzpCYoywEeCnFvP6K63Q4ONElk74XgO7Eq8KMzIj702LDS+Mg==
-
-"@zag-js/element-rect@0.3.0":
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/@zag-js/element-rect/-/element-rect-0.3.0.tgz#af8c6680bb34b6f6dba06b1ac7919b01d09f5d95"
- integrity sha512-P3bdcfE5Bk3Bm7qhs8lPDykgWNYJeMgyqa+3Z93QPCH9cXsg76O0OrhkK3kWruHzT/f+sVXDDZ1yEUxxgLCRFg==
-
"@zag-js/element-size@0.3.2":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@zag-js/element-size/-/element-size-0.3.2.tgz#ebb76af2a024230482406db41344598d1a9f54f4"
@@ -5580,100 +5527,6 @@
resolved "https://registry.yarnpkg.com/@zag-js/focus-visible/-/focus-visible-0.2.2.tgz#56233480ca1275d3218fb2e10696a33d1a6b9e64"
integrity sha512-0j2gZq8HiZ51z4zNnSkF1iSkqlwRDvdH+son3wHdoz+7IUdMN/5Exd4TxMJ+gq2Of1DiXReYLL9qqh2PdQ4wgA==
-"@zag-js/form-utils@0.2.5":
- version "0.2.5"
- resolved "https://registry.yarnpkg.com/@zag-js/form-utils/-/form-utils-0.2.5.tgz#0f8e6cfa36560735a1f7e9d2dca651db8be43310"
- integrity sha512-aqdj+M4lvczDITrfkZqQxGkfHbFn084ONRkDylaPNx8xQKoRbsy+crDga10QDOUkgSMtVOB8XZ+VyJHQAzRErQ==
- dependencies:
- "@zag-js/mutation-observer" "0.0.1"
-
-"@zag-js/interact-outside@0.2.6":
- version "0.2.6"
- resolved "https://registry.yarnpkg.com/@zag-js/interact-outside/-/interact-outside-0.2.6.tgz#9c6add221e15760e3c607bf3ab1e2b14b7ba77b5"
- integrity sha512-4Q3ij2aDYwcGkJmlyxIq+lq3J9gF2hjMJGAIYFC6AOfN/SCivkPFlq3zabCZUSZrzPYwggMVL6GdUI+bTAE4Iw==
- dependencies:
- "@zag-js/dom-event" "0.0.1"
- "@zag-js/dom-query" "0.1.4"
- "@zag-js/tabbable" "0.1.1"
- "@zag-js/utils" "0.3.4"
-
-"@zag-js/mutation-observer@0.0.1":
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/@zag-js/mutation-observer/-/mutation-observer-0.0.1.tgz#55fb919b9c2cf07fb9255caea5ae698b82d8df18"
- integrity sha512-HasPzt6LyVWsu1jwx3lFNKuV3nlaJQ918rU1wUnhqMD8ZVSKvNBxCoz0NswiKZWTR/6eNwFwvHrewJiWKXivrw==
-
-"@zag-js/popper@0.2.7":
- version "0.2.7"
- resolved "https://registry.yarnpkg.com/@zag-js/popper/-/popper-0.2.7.tgz#0e9d741edb3c10e140fbe9ef252f78f2ccda5580"
- integrity sha512-ruWgwZXYt+hEhMamjuQ1J/UdQsRazB0t4eajatgb9ei9YPtFDxEmXf3UegeWkhMTMfZdTTZEozmtrzcflzAmKQ==
- dependencies:
- "@floating-ui/dom" "1.2.5"
- "@zag-js/dom-query" "0.1.4"
- "@zag-js/element-rect" "0.3.0"
- "@zag-js/utils" "0.3.4"
-
-"@zag-js/react@^0.3.12":
- version "0.3.12"
- resolved "https://registry.yarnpkg.com/@zag-js/react/-/react-0.3.12.tgz#641cdee856ad27ca7291de722ac6121c0783d78c"
- integrity sha512-IkGcZMCoU1ahJMlZ5Y0r1rrftmw9DUFW213qifveYr7Y1FX0vKfeMq5rbhI5+hrwcnJfgUSsFs3lQ8fwxVT+RA==
- dependencies:
- "@zag-js/core" "0.2.12"
- "@zag-js/store" "0.2.8"
- "@zag-js/types" "0.3.4"
- proxy-compare "2.5.0"
-
-"@zag-js/select@^0.2.1":
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/@zag-js/select/-/select-0.2.1.tgz#b88ca85fc7847aa9df9c50ce173fc9a2462096ae"
- integrity sha512-JmxCbkFdyfScrywJnuVm6XFHMEfXuP7Pcn2mI3UpUu7lYEkckDw+K3KHHbB6cNEmeHNiAFGAK5jul27/XxUetg==
- dependencies:
- "@zag-js/anatomy" "0.1.4"
- "@zag-js/core" "0.2.12"
- "@zag-js/dismissable" "0.2.6"
- "@zag-js/dom-event" "0.0.1"
- "@zag-js/dom-query" "0.1.4"
- "@zag-js/form-utils" "0.2.5"
- "@zag-js/mutation-observer" "0.0.1"
- "@zag-js/popper" "0.2.7"
- "@zag-js/tabbable" "0.1.1"
- "@zag-js/types" "0.3.4"
- "@zag-js/utils" "0.3.4"
- "@zag-js/visually-hidden" "0.0.1"
-
-"@zag-js/store@0.2.8":
- version "0.2.8"
- resolved "https://registry.yarnpkg.com/@zag-js/store/-/store-0.2.8.tgz#b7b477c56e688043ed3f1c7a8ebb12cb6e994639"
- integrity sha512-QgBnbYjb5jvcTt0+JCoPJ9YKM9vP1/RR78mkT6fWCIM0N8hnZu4MzQPVKxiopxZ8XIrDbUjFWlJLzL83uiYv2g==
- dependencies:
- proxy-compare "2.5.0"
-
-"@zag-js/tabbable@0.1.1":
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/@zag-js/tabbable/-/tabbable-0.1.1.tgz#5cfeb336c72e408b54a22e05471867ded7698e65"
- integrity sha512-wvGE8pLZW1U1u15Gdk8NXLFmPhBePhBVcuG/eJ/bb3FpCh+oX2hJAANxlDCJrGN4ticGyTwJNYG1XOYaf6ZEGA==
-
-"@zag-js/text-selection@0.0.1":
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/@zag-js/text-selection/-/text-selection-0.0.1.tgz#7eeeb32a23d4936d3a4f1c1f5d5bbc03cbf462cb"
- integrity sha512-l8Im0FkMw63BPXocHRbtFgMIz3SkVpc4HI/S/wV0FqKgWMzOZzd/avHljCNfoXyhjhKauwR5xPivAwsOcye8CA==
-
-"@zag-js/types@0.3.4":
- version "0.3.4"
- resolved "https://registry.yarnpkg.com/@zag-js/types/-/types-0.3.4.tgz#9443590d80d4bad8861fcee1e0b1939611964c5c"
- integrity sha512-KkZOMNqFZA0TaVF70O6WIRJPWTcDyRQjhXLDkLVfo99gwJdsC1bMZWfjrCiR8g1CfzvCyGNSWzdArIgzTJVEMA==
- dependencies:
- csstype "3.1.1"
-
-"@zag-js/utils@0.3.4":
- version "0.3.4"
- resolved "https://registry.yarnpkg.com/@zag-js/utils/-/utils-0.3.4.tgz#3efc22fbddf97a5190ba444c6a74e52f4c6bbcfe"
- integrity sha512-Wz6OsvGsteCmu8uGot5H/xj0QpUzXlmAlDw+d2Lnqz1Y3uWcq36r6EPWfH15HXJXdEDuCameAmdOruZ0s/SVjA==
-
-"@zag-js/visually-hidden@0.0.1":
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/@zag-js/visually-hidden/-/visually-hidden-0.0.1.tgz#7ac8c463ff16c7011e67036f2a007fd25d8024b8"
- integrity sha512-wEhubtraCJOPFh3aPcidQWXF7a9O1TG1I48blpGt3XEI9brwpp7Gjjvus5uGkH00s+WziEudy1dv2B0HOTexNA==
-
abortcontroller-polyfill@^1.1.9:
version "1.7.5"
resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
@@ -8052,7 +7905,7 @@ csso@^4.2.0:
dependencies:
css-tree "^1.1.2"
-csstype@3.1.1, csstype@^3.0.11, csstype@^3.0.2:
+csstype@^3.0.11, csstype@^3.0.2:
version "3.1.1"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
@@ -12780,7 +12633,7 @@ kleur@^3.0.3:
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
-klona@2.0.6, klona@^2.0.4:
+klona@^2.0.4:
version "2.0.6"
resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
@@ -15498,11 +15351,6 @@ proxy-addr@~2.0.7:
forwarded "0.2.0"
ipaddr.js "1.9.1"
-proxy-compare@2.5.0:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.0.tgz#0387c5e4d283ba9b1c0353bb20def4449b06bbd2"
- integrity sha512-f1us0OsVAJ3tdIMXGQx2lmseYS4YXe4W+sKF5g5ww/jV+5ogMadPt+sIZ+88Ga9kvMJsrRNWzCrKPpr6pMWYbA==
-
proxy-from-env@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
From d28849a5920911f18f324e7dcd5b1bc34a870eda Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 13 Apr 2023 14:35:51 -0400
Subject: [PATCH 020/186] chore(theme/component.utils): remove unused variable
---
src/@chakra-ui/gatsby-plugin/components/components.utils.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
index 16321fc9c14..39c3e101e9a 100644
--- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts
@@ -78,7 +78,6 @@ export function defineMergeStyles(
export const _notDisabled = "&:not([data-disabled], [disabled])"
-const INPUT_TRIGGER_DISABLE_COLOR = "--input-trigger-disable-color"
const $inputTriggerDisableColor = cssVar("input-trigger-disable-color")
export const commonInputTriggerStyles = {
From 2ffc5c65b44b36e17faf0eaf4d8157137bcb68cd Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 20 Apr 2023 21:13:12 -0400
Subject: [PATCH 021/186] style(theme/Select): define hover color for icon
---
src/@chakra-ui/gatsby-plugin/components/Select.ts | 14 ++++++++------
1 file changed, 8 insertions(+), 6 deletions(-)
diff --git a/src/@chakra-ui/gatsby-plugin/components/Select.ts b/src/@chakra-ui/gatsby-plugin/components/Select.ts
index 81204d3614d..6d960a657f0 100644
--- a/src/@chakra-ui/gatsby-plugin/components/Select.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/Select.ts
@@ -1,9 +1,5 @@
import { selectAnatomy } from "@chakra-ui/anatomy"
-import {
- createMultiStyleConfigHelpers,
- cssVar,
- defineStyle,
-} from "@chakra-ui/react"
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react"
import { defineMergeStyles, selectDefaultTheme } from "./components.utils"
const { defineMultiStyleConfig, definePartsStyle } =
@@ -33,9 +29,15 @@ const baseStyleField = defineMergeStyles(selectDefaultTheme.baseStyle?.field, {
},
})
+const baseStyleIcon = defineMergeStyles(selectDefaultTheme.baseStyle?.icon, {
+ _peerHover: {
+ color: "primary",
+ },
+})
+
const baseStyle = definePartsStyle({
field: baseStyleField,
- icon: selectDefaultTheme.baseStyle?.icon,
+ icon: baseStyleIcon,
})
const variantOutline = definePartsStyle({
From 6051e08f6c9cb2b890f661d731880d1fa013e829 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 20 Apr 2023 21:37:28 -0400
Subject: [PATCH 022/186] feat(components/Select): build custom select
component
---
.../Select.stories.tsx | 23 ++----
src/components/Select/index.tsx | 81 +++++++++++++++++++
2 files changed, 89 insertions(+), 15 deletions(-)
rename src/components/{BaseStories => Select}/Select.stories.tsx (52%)
create mode 100644 src/components/Select/index.tsx
diff --git a/src/components/BaseStories/Select.stories.tsx b/src/components/Select/Select.stories.tsx
similarity index 52%
rename from src/components/BaseStories/Select.stories.tsx
rename to src/components/Select/Select.stories.tsx
index 10c48132a51..e749b95b8db 100644
--- a/src/components/BaseStories/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -1,6 +1,7 @@
import * as React from "react"
-import { Select as SelectComponent, VStack } from "@chakra-ui/react"
+import { VStack } from "@chakra-ui/react"
import { Meta, StoryObj } from "@storybook/react"
+import SelectComponent from "./"
const selectData = [
{ label: "Ethereum", value: "eth" },
@@ -22,23 +23,15 @@ type Story = StoryObj
export const Select: Story = {
args: {
minW: "223px",
+ options: selectData,
+ onChange(selectedOption) {
+ console.log(selectedOption)
+ },
},
render: (args) => (
-
- {selectData.map(({ label, value }) => (
-
- ))}
-
-
- {selectData.map(({ label, value }) => (
-
- ))}
-
+
+
),
}
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
new file mode 100644
index 00000000000..fc9b7306c7b
--- /dev/null
+++ b/src/components/Select/index.tsx
@@ -0,0 +1,81 @@
+import * as React from "react"
+import {
+ Select as ChakraSelect,
+ SelectProps as ChakraSelectProps,
+ ThemingProps,
+} from "@chakra-ui/react"
+
+interface SelectProps
+ extends Omit,
+ Pick, "variant"> {
+ defaultValue?: { label: string; value: string; [x: string]: any }
+ onChange(selectedOption: any | ""): void
+ placeholder?: string
+ options: Record[]
+}
+
+const Select = (props: SelectProps) => {
+ const { options, defaultValue, placeholder, onChange, ...rest } = props
+
+ const [selectedOption, setSelectedOption] = React.useState(
+ defaultValue?.value
+ )
+
+ const flatObject = options
+ .map((option) => {
+ if (Object.hasOwn(option, "options")) {
+ return option.options
+ }
+
+ return option
+ })
+ .flat()
+
+ const handleOnChange: React.ChangeEventHandler = (e) => {
+ const selectedValue = e.target.value
+ const isPlaceholder = selectedValue === ""
+
+ setSelectedOption(selectedValue)
+
+ const selectedOptionData = flatObject.find(
+ (option) => option.value === selectedValue
+ )
+
+ if (!selectedOptionData && !isPlaceholder) return
+
+ onChange(selectedOptionData ?? "")
+ }
+
+ return (
+
+ {options.map((option, idx) => {
+ return Object.hasOwn(option, "options") ? (
+
+ ) : (
+
+ )
+ })}
+
+ )
+}
+
+export default Select
From e7688d3fa422a585a3059fa08333386850f27175 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 20 Apr 2023 21:37:49 -0400
Subject: [PATCH 023/186] refactor: apply custom Select component
---
src/components/EthExchanges.tsx | 13 +-
src/components/FindWallet/WalletTable.tsx | 216 ++++--------------
src/components/Layer2/Layer2Onboard.tsx | 62 ++---
.../Staking/StakingLaunchpadWidget.tsx | 14 +-
4 files changed, 75 insertions(+), 230 deletions(-)
diff --git a/src/components/EthExchanges.tsx b/src/components/EthExchanges.tsx
index e7c257f8385..ef8a6fbcfa5 100644
--- a/src/components/EthExchanges.tsx
+++ b/src/components/EthExchanges.tsx
@@ -8,7 +8,7 @@ import CardList from "./CardList"
import Link from "./Link"
import Emoji from "./OldEmoji"
import Translation from "./Translation"
-import { StyledSelect as Select } from "./SharedStyledComponents"
+import Select from "./Select"
import { getLocaleTimestamp } from "../utils/time"
import { trackCustomEvent } from "../utils/matomo"
@@ -98,10 +98,6 @@ const Disclaimer = styled.p`
margin-bottom: 0;
`
-const StyledSelect = styled(Select)`
- max-width: 640px;
-`
-
const NoResults = ({ children }) => (
@@ -714,13 +710,12 @@ const EthExchanges = () => {
-
{!hasSelectedCountry && (
diff --git a/src/components/FindWallet/WalletTable.tsx b/src/components/FindWallet/WalletTable.tsx
index 574d57b05f5..ce1548acc76 100644
--- a/src/components/FindWallet/WalletTable.tsx
+++ b/src/components/FindWallet/WalletTable.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from "gatsby-plugin-react-i18next"
import ButtonLink from "../ButtonLink"
import Icon from "../Icon"
import Link from "../Link"
-import { StyledSelect as Select } from "../SharedStyledComponents"
+import Select from "../Select"
import Tooltip from "../Tooltip"
import Translation from "../Translation"
@@ -144,101 +144,6 @@ const Wallet = styled(Grid)`
}
`
-// https://react-select.com/styles#using-classnames
-// Pass menuIsOpen to component to debug
-const StyledSelect = styled(Select)`
- .react-select__control {
- border: 1px solid ${(props) => props.theme.colors.text};
- cursor: pointer;
- font-size: 0.9rem;
- padding-right: 0.3rem;
- transition: 0.5s all;
- svg {
- fill: ${(props) => props.theme.colors.text};
- transition: 0.5s all;
- }
-
- .react-select__value-container {
- .react-select__single-value {
- color: ${(props) => props.theme.colors.text};
- }
- }
-
- .react-select__indicators {
- .react-select__indicator-separator {
- background: none;
- }
- .react-select__indicator {
- color: ${(props) => props.theme.colors.text};
- padding: 0;
- }
- }
-
- &:hover {
- background: ${(props) => props.theme.colors.primary};
- cursor: pointer;
- border-color: ${(props) => props.theme.colors.primary};
- color: ${(props) => props.theme.colors.background};
- transition: 0.5s all;
- svg {
- fill: ${(props) => props.theme.colors.background};
- transition: 0.5s all;
- }
-
- .react-select__value-container {
- .react-select__single-value {
- color: ${(props) => props.theme.colors.background};
- }
- }
-
- .react-select__indicators {
- .react-select__indicator-separator {
- background: none;
- }
- .react-select__indicator {
- color: ${(props) => props.theme.colors.text};
- }
- }
- }
- }
-
- .react-select__control--is-focused {
- border: 1px solid ${(props) => props.theme.colors.primary};
- background: ${(props) => props.theme.colors.primary};
- svg {
- fill: ${(props) => props.theme.colors.background};
- transition: 0.5s all;
- }
-
- .react-select__value-container {
- .react-select__single-value {
- color: ${(props) => props.theme.colors.background};
- }
- }
-
- .react-select__indicators {
- background: ${(props) => props.theme.colors.primary};
- .react-select__value-container {
- .react-select__single-value {
- color: ${(props) => props.theme.colors.background};
- }
- }
-
- .react-select__indicators {
- .react-select__indicator {
- color: ${(props) => props.theme.colors.background};
- }
- }
- }
- }
-
- @media (max-width: ${(props) => props.theme.breakpoints.s}) {
- .react-select__control {
- padding: 0;
- }
- }
-`
-
const FlexInfo = styled.div`
display: flex;
gap: 1rem;
@@ -613,15 +518,6 @@ const WalletTable = ({ data, filters, walletData }) => {
return { ...wallet, moreInfo: false, key: wallet.image_name }
})
)
- const [firstFeatureSelect, setFirstFeatureSelect] = useState(
- featureDropdownItems[14]
- )
- const [secondFeatureSelect, setSecondFeatureSelect] = useState(
- featureDropdownItems[1]
- )
- const [thirdFeatureSelect, setThirdFeatureSelect] = useState(
- featureDropdownItems[9]
- )
const updateMoreInfo = (key) => {
const temp = [...walletCardData]
@@ -714,16 +610,6 @@ const WalletTable = ({ data, filters, walletData }) => {
)
})
- const filteredFeatureDropdownItems = [...featureDropdownItems].filter(
- (item) => {
- return (
- item.label !== firstFeatureSelect.label &&
- item.label !== secondFeatureSelect.label &&
- item.label !== thirdFeatureSelect.label
- )
- }
- )
-
/**
*
* @param selectedOption selected dropdown option
@@ -756,6 +642,38 @@ const WalletTable = ({ data, filters, walletData }) => {
})
}
+ const [firstFeatureSelect, setFirstFeatureSelect] = useState(
+ featureDropdownItems[14]
+ )
+ const [secondFeatureSelect, setSecondFeatureSelect] = useState(
+ featureDropdownItems[1]
+ )
+ const [thirdFeatureSelect, setThirdFeatureSelect] = useState(
+ featureDropdownItems[9]
+ )
+
+ const featureSelectGroup: {
+ featureSelect: DropdownOption
+ setFn: React.Dispatch>
+ col: ColumnClassName
+ }[] = [
+ {
+ featureSelect: firstFeatureSelect,
+ setFn: setFirstFeatureSelect,
+ col: firstCol,
+ },
+ {
+ featureSelect: secondFeatureSelect,
+ setFn: setSecondFeatureSelect,
+ col: secondCol,
+ },
+ {
+ featureSelect: thirdFeatureSelect,
+ setFn: setThirdFeatureSelect,
+ col: thirdCol,
+ },
+ ]
+
const WalletMoreInfo = ({ wallet, filters, idx }) => {
const walletHasFilter = (filterKey) => {
return wallet[filterKey] === true
@@ -959,57 +877,23 @@ const WalletTable = ({ data, filters, walletData }) => {
)}
-
- {
- updateDropdown(selectedOption, setFirstFeatureSelect, firstCol)
- }}
- defaultValue={firstFeatureSelect}
- isSearchable={false}
- />
- |
-
- {
- updateDropdown(selectedOption, setSecondFeatureSelect, secondCol)
- }}
- defaultValue={secondFeatureSelect}
- isSearchable={false}
- />
- |
-
- {
- updateDropdown(selectedOption, setThirdFeatureSelect, thirdCol)
- }}
- defaultValue={thirdFeatureSelect}
- isSearchable={false}
- />
- |
+ {featureSelectGroup.map(({ featureSelect, setFn, col }) => (
+
+ |
+ ))}
{filteredWallets.map((wallet, idx) => {
const deviceLabels: Array = []
diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx
index 8d661853b54..6aec70933a8 100644
--- a/src/components/Layer2/Layer2Onboard.tsx
+++ b/src/components/Layer2/Layer2Onboard.tsx
@@ -3,13 +3,12 @@ import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
import React, { useState } from "react"
import styled from "@emotion/styled"
import { useTranslation } from "gatsby-plugin-react-i18next"
-import { Stack, Text } from "@chakra-ui/react"
// Components
import ButtonLink from "../ButtonLink"
import Link from "../Link"
import Translation from "../Translation"
-import { StyledSelect as Select } from "../SharedStyledComponents"
+import Select from "../Select"
// Data
import {
@@ -57,18 +56,6 @@ const TwoColumnContent = styled.div`
}
`
-// https://react-select.com/styles#using-classnames
-// Pass menuIsOpen to component to debug
-const StyledSelect = styled(Select)`
- max-width: none;
-
- @media (max-width: ${(props) => props.theme.breakpoints.s}) {
- .react-select__control {
- padding: 14px 0;
- }
- }
-`
-
const SelectedContainer = styled.div`
background: rgba(255, 255, 255, 0.02);
margin-top: 0.5rem;
@@ -247,18 +234,6 @@ const Layer2Onboard: React.FC = ({
}
)
- const formatGroupLabel = (data) => {
- return data.label ? (
-
-
- {data.label}
-
-
- ) : (
- <>>
- )
- }
-
const selectExchangeOnboard = (option: ExchangeOption | CexOnboardOption) => {
if (Object.hasOwn(option, "cex")) {
trackCustomEvent({
@@ -306,20 +281,19 @@ const Layer2Onboard: React.FC = ({
- {
+ placeholder={t("layer-2-onboard-wallet-input-placeholder")}
+ onChange={(selectedOption) => {
+ if (selectedOption === "") return setSelectedL2(undefined)
trackCustomEvent({
eventCategory: `Selected layer 2 to bridge to`,
eventAction: `Clicked`,
- eventName: `${selectedOption.l2.name} bridge selected`,
- eventValue: `${selectedOption.l2.name}`,
+ eventName: `${selectedOption?.l2.name} bridge selected`,
+ eventValue: `${selectedOption?.l2.name}`,
})
- setSelectedL2(selectedOption.l2)
+ setSelectedL2(selectedOption?.l2)
}}
- placeholder={t("layer-2-onboard-wallet-input-placeholder")}
/>
{selectedL2 && (
@@ -352,24 +326,24 @@ const Layer2Onboard: React.FC = ({
- {
+ onChange={(selectedOption) => {
+ if (selectedOption === "") {
+ setSelectedCexOnboard(undefined)
+ setSelectedExchange(undefined)
+ return
+ }
selectExchangeOnboard(selectedOption)
}}
placeholder={t("layer-2-onboard-exchange-input-placeholder")}
- formatGroupLabel={formatGroupLabel}
/>
diff --git a/src/components/Staking/StakingLaunchpadWidget.tsx b/src/components/Staking/StakingLaunchpadWidget.tsx
index f2cc479a80e..224618b29de 100644
--- a/src/components/Staking/StakingLaunchpadWidget.tsx
+++ b/src/components/Staking/StakingLaunchpadWidget.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
import styled from "@emotion/styled"
import { useTranslation } from "gatsby-plugin-react-i18next"
-import { StyledSelect as Select } from "../SharedStyledComponents"
+import Select from "../Select"
import ButtonLink from "../ButtonLink"
import Emoji from "../OldEmoji"
import Translation from "../Translation"
@@ -27,13 +27,6 @@ const SelectContainer = styled.div`
margin: 1rem 0;
`
-const StyledSelect = styled(Select)`
- max-width: 50%;
- @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
- max-width: 100%;
- }
-`
-
const ButtonContainer = styled.div`
display: flex;
flex-wrap: wrap;
@@ -83,12 +76,11 @@ const StakingLaunchpadWidget: React.FC = () => {
-
From 2cb2b8571780108498d67db82ad7c96302d5b156 Mon Sep 17 00:00:00 2001
From: tylerapfledderer
Date: Thu, 20 Apr 2023 21:54:28 -0400
Subject: [PATCH 024/186] refactor: apply type assertions to the onChange
payloads for the custom Select component
---
src/components/FindWallet/WalletTable.tsx | 2 +-
src/components/Layer2/Layer2Onboard.tsx | 6 ++++--
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/components/FindWallet/WalletTable.tsx b/src/components/FindWallet/WalletTable.tsx
index ce1548acc76..2835414448a 100644
--- a/src/components/FindWallet/WalletTable.tsx
+++ b/src/components/FindWallet/WalletTable.tsx
@@ -887,7 +887,7 @@ const WalletTable = ({ data, filters, walletData }) => {
options: [...featureDropdownItems],
},
]}
- onChange={(selectedOption) => {
+ onChange={(selectedOption: DropdownOption) => {
updateDropdown(selectedOption, setFn, col)
}}
defaultValue={featureSelect}
diff --git a/src/components/Layer2/Layer2Onboard.tsx b/src/components/Layer2/Layer2Onboard.tsx
index 6aec70933a8..ef43badd3ad 100644
--- a/src/components/Layer2/Layer2Onboard.tsx
+++ b/src/components/Layer2/Layer2Onboard.tsx
@@ -284,7 +284,7 @@ const Layer2Onboard: React.FC = ({