feat: Stepper and Select improvements (#526)

.eslintrc.cjs

@@ -17,5 +17,8 @@ module.exports = {
       { fixStyle: 'inline-type-imports' },
     ],
     'import-newlines/enforce': 'off',
+    // Allow css prop for styled-components
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
+  ignorePatterns: ['/coverage/**/*'],
 }

package.json

@@ -45,11 +45,10 @@
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.32.2",
-    "grommet-icons": "4.10.0",
+    "grommet": "2.33.2",
     "highlight.js": "11.8.0",
     "honorable-recipe-mapper": "0.2.0",
-    "immer": "10.0.2",
+    "immer": "10.0.3",
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "prop-types": "15.8.1",
@@ -74,7 +73,7 @@
     "@babel/preset-react": "7.22.5",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@pluralsh/eslint-config-typescript": "2.5.84",
+    "@pluralsh/eslint-config-typescript": "2.5.112",
     "@storybook/addon-actions": "7.4.0",
     "@storybook/addon-docs": "7.4.0",
     "@storybook/addon-essentials": "7.4.0",
@@ -95,14 +94,14 @@
     "@vitest/ui": "0.34.3",
     "babel-loader": "9.1.3",
     "conventional-changelog-conventionalcommits": "6.1.0",
-    "eslint": "8.48.0",
+    "eslint": "8.51.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-import-newlines": "1.3.4",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-storybook": "0.6.15",
     "firebase-tools": "11.30.0",
     "fuse.js": "6.6.2",
     "honorable": "1.0.0-beta.17",
@@ -118,7 +117,7 @@
     "react-dom": "18.2.0",
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.1",
-    "storybook": "7.4.0",
+    "storybook": "7.5.1",
     "styled-components": "5.3.11",
     "typescript": "5.2.2",
     "vite": "4.4.9",
@@ -136,7 +135,6 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "grommet/grommet-icons": "4.8.0",
     "@storybook/mdx2-csf": "0.1.0-next.8"
   },
   "lint-staged": {

scripts/makeIcon.js

@@ -3,7 +3,7 @@ const path = require('path')
 
 const { ESLint } = require('eslint')
 
-const makeFile = svg => `import createIcon from './createIcon'
+const makeFile = (svg) => `import createIcon from './createIcon'
 
 export default createIcon(({ size, color, ...props }) => (
   ${svg}))
@@ -21,15 +21,15 @@ async function main() {
     lines.shift()
     const name = lines.shift()
 
-    console.log(`${name}Icon`)
+    console.info(`${name}Icon`)
 
     const svg = lines.join('\n')
     const fileContent = makeFile(svg)
 
     const results = await eslint.lintText(fileContent)
 
     if (!results[0].output) {
-      console.log(results[0])
+      console.info(results[0])
 
       throw new Error('No output')
     }
@@ -41,12 +41,15 @@ async function main() {
       .replace(/stroke="#C4CAD4"/g, 'stroke={color}')
       .replace(/fill="#C4CAD4"/g, 'fill={color}')
 
-    const outputPath = path.resolve(__dirname, `../src/components/icons/${name}Icon.jsx`)
+    const outputPath = path.resolve(
+      __dirname,
+      `../src/components/icons/${name}Icon.jsx`
+    )
 
     fs.writeFileSync(outputPath, result, 'utf8')
   }
 
-  console.log('Done!')
+  console.info('Done!')
 }
 
 main()

src/ThemeDecorator.tsx

@@ -1,4 +1,3 @@
-import { Grommet } from 'grommet'
 import { type ComponentType, useEffect } from 'react'
 import {
   CssBaseline,
@@ -29,17 +28,15 @@ function ThemeDecorator(Story: ComponentType, context: any) {
   const styledTheme = colorMode === 'light' ? styledThemeLight : styledThemeDark
 
   return (
-    <Grommet plain>
-      <HonorableThemeProvider theme={honorableTheme}>
-        <StyledThemeProvider theme={styledTheme}>
-          <CssBaseline />
-          <StyledCss />
-          <Div padding="xlarge">
-            <Story />
-          </Div>
-        </StyledThemeProvider>
-      </HonorableThemeProvider>
-    </Grommet>
+    <HonorableThemeProvider theme={honorableTheme}>
+      <StyledThemeProvider theme={styledTheme}>
+        <CssBaseline />
+        <StyledCss />
+        <Div padding="xlarge">
+          <Story />
+        </Div>
+      </StyledThemeProvider>
+    </HonorableThemeProvider>
   )
 }
 

src/components/Accordion.tsx

@@ -28,8 +28,6 @@ function AccordionTriggerUnstyled({
   unstyled: _unstyled,
   ...props
 }: { isOpen?: boolean; unstyled?: boolean } & ComponentProps<'div'>) {
-  console.log('props', props)
-
   return (
     <div {...props}>
       <div className="label">{children}</div>

src/components/IconFrame.tsx

@@ -177,6 +177,7 @@ const IconFrame = forwardRef<HTMLDivElement, IconFrameProps>(
           forwardedAs: (props as any).as || ButtonBase,
           tabIndex: 0,
           role: 'button',
+          type: 'button',
         })}
         {...props}
       >

src/components/InfoPanel.tsx

@@ -1,3 +1,5 @@
+// TODO: Replace grommet Layer with semi-compatible replacement ./Layer.tsx
+// Not sure if we need to support `plain` prop
 import { Layer } from 'grommet'
 import { Div, Flex, Span } from 'honorable'
 

src/components/Select.tsx

@@ -87,6 +87,7 @@ function Trigger({ buttonElt, isOpen, ...props }: TriggerProps) {
   return cloneElement(buttonElt, {
     ref,
     ...buttonProps,
+    ...(buttonElt?.props?.type ? { type: buttonElt.props.type } : {}),
     isOpen,
     style: {
       appearance: 'unset',