feat(SearchBar): Migrate SearchBar from Products v1 / Security to Pro…

…ducts v2 (carbon-design-system#4202)

* feat(searchbar): implement new component searchbar

* feat(searchbar): add searchbar in storybook nav

* feat(searchBar): implement basic functionalities and styles

* feat(searchbox): implement scopes multiselect

* chor(searchbar): remove unwanted imports from style

* feat(searchbar): change labelText prop required to false and disable unwanted controles

* feat(searchbar): migrate different stories

* chore(searchbar): remove unwanted comments

* test(searchBar): implement tests for default and initial value

* test(searchBar): implement tests for scopes view

* fix(searchbar): fix issue in onsubmit function

* test(searchbar): create tests for scope dropdown

* docs(searchbar): include examples in the storybook docs

* docs(searchbar): create example

* docs(searchbar): update .gitignore file

* docs(searchBar): Update the Example.jsx

* chore(searchbar): correct style format

* chore(searchbox): display and position property order change

* test(searchbar): change fireEvent with userEvent

.gitignore

@@ -58,3 +58,7 @@ package-lock.json
 .yarn/install-state.gz
 
 .history
+
+# Examples
+/examples/carbon-for-ibm-products/*/node_modules
+/examples/carbon-for-ibm-products/*/.yarn

.vscode/diff/vulsCount.txt

@@ -0,0 +1 @@
+0

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "WhiteSource Advise.Diff.BaseBranch": "main"
+}

examples/carbon-for-ibm-products/SearchBar/README.md

@@ -0,0 +1,61 @@
+# Carbon for IBM Products `SearchBar` example
+
+This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`.
+
+## Adding an example
+
+If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following:
+
+1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent`
+2. Edit `gallery.config.json` which has the following form.
+
+```json
+{
+  "label": "Name of example in gallery",
+  "package-config": {
+    "flags": {
+      "component": {
+        "MyComponent": true
+      },
+      "feature": {
+        "MyFeature": true
+      }
+      "prefix": "alt-prefix",
+    },
+    "templates-variation": "templates-react-16"
+  }
+}
+```
+
+NOTE: All fields are optional, although most specify a label.
+
+The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled.
+
+The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only.
+
+3. Edit the `src/Example` folder to show your component.
+4. Run the example and replace `thumbnail.png` with a picture of your example.
+
+NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder.
+
+## Updating examples
+
+Skip step 1 for `Adding an example` otherwise the same.
+
+## Adding / Updating a template or variant
+
+The simplest way to update a template is as follows.
+
+1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder.
+2. Update it as necessary.
+3. Test that it works.
+4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this.
+5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. SearchBar, 2024, import './config'
+. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`.
+6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`.
+
+### If a variant
+
+To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add.
+
+Variants are selected by folder name in the `gallery.config.json` file.

examples/carbon-for-ibm-products/SearchBar/gallery.config.json

@@ -0,0 +1,12 @@
+{
+  "label": "Search-Bar",
+  "package-config": {
+    "flags": {
+      "component": {
+        "SearchBar": true
+      }
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

examples/carbon-for-ibm-products/SearchBar/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

examples/carbon-for-ibm-products/SearchBar/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "SearchBar-component-example",
+  "description": "An example showing use of the SearchBar component from the @carbon/ibm-products component library.",
+  "keywords": [
+    "carbon",
+    "ibm",
+    "ibm-products",
+    "component",
+    "searchbar",
+    "search",
+    "bar"
+  ],
+  "license": "Apache-2.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/ibm-products": "^2.11.2",
+    "@carbon/react": "^1.40.0",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.5.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  }
+}

examples/carbon-for-ibm-products/SearchBar/src/App.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ThemeProvider } from './ThemeSelector/ThemeContext';
+import { ThemeDropdown } from './ThemeSelector/ThemeDropdown';
+import './config';
+import Example from './Example/Example';
+
+function App() {
+  return (
+    <div>
+      <ThemeProvider>
+        <Example />
+        <ThemeDropdown />
+      </ThemeProvider>
+    </div>
+  );
+}
+
+export default App;

examples/carbon-for-ibm-products/SearchBar/src/Example/Example.jsx

@@ -0,0 +1,27 @@
+// cspell:words grafana
+
+import React, { useState } from 'react';
+
+// ----------------------------------------------------
+// This is an example showing use of the
+// SearchBar component
+// from the @carbon/ibm-products component library.
+// ----------------------------------------------------
+
+import { SearchBar } from '@carbon/ibm-products';
+
+import './_example.scss';
+
+export const Example = () => {
+  const defaultProps = {
+    clearButtonLabelText: 'Clear',
+    placeHolderText: 'Search...',
+    submitLabel: 'Search',
+    onChange: (newVal) => console.log('onChange: ', newVal),
+    onSubmit: (newVal) => console.log('onSubmit: ', newVal),
+  };
+
+  return <SearchBar {...defaultProps} />;
+};
+
+export default Example;

examples/carbon-for-ibm-products/SearchBar/src/Example/_example.scss

@@ -0,0 +1,3 @@
+@use '@carbon/react/scss/spacing' as *;
+
+/* example SCSS */

examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeContext.jsx

@@ -0,0 +1,54 @@
+import React, { createContext, useReducer } from 'react';
+
+export const themeData = [
+  {
+    text: 'White',
+    value: 'carbon-theme--white',
+  },
+  {
+    text: 'Gray 10',
+    value: 'carbon-theme--g10',
+  },
+  {
+    text: 'Gray 90',
+    value: 'carbon-theme--g90',
+  },
+  {
+    text: 'Gray 100',
+    value: 'carbon-theme--g100',
+  },
+];
+
+export const ThemeContext = createContext();
+
+const initialState = {
+  currentTheme: themeData[0],
+};
+
+const themeReducer = (state, action) => {
+  switch (action.type.value) {
+    case 'carbon-theme--white':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g10':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g90':
+      return { currentTheme: action.type };
+    case 'carbon-theme--g100':
+      return { currentTheme: action.type };
+    default:
+      return state;
+  }
+};
+
+export function ThemeProvider(props) {
+  const [state, dispatch] = useReducer(themeReducer, initialState);
+
+  return (
+    <ThemeContext.Provider value={{ state, dispatch }}>
+      {
+        // eslint-disable-next-line react/prop-types
+        props.children
+      }
+    </ThemeContext.Provider>
+  );
+}

examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeDropdown.jsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import { Dropdown } from '@carbon/react';
+import { ThemeContext, themeData } from './ThemeContext';
+
+import './_theme-dropdown.scss';
+
+export const ThemeDropdown = () => {
+  const theme = useContext(ThemeContext);
+
+  const setTheme = (selectedItem) => {
+    const bodyElement = document.body;
+    bodyElement.className = selectedItem.value;
+    theme.dispatch({ type: selectedItem });
+  };
+
+  return (
+    <div className="carbon-theme-dropdown">
+      <Dropdown
+        direction="top"
+        ariaLabel="Theme dropdown"
+        id="theme-dropdown"
+        items={themeData}
+        itemToString={(item) => (item ? item.text : '')}
+        onChange={(event) => setTheme(event.selectedItem)}
+        selectedItem={theme.state.currentTheme}
+        label="Select a Carbon theme"
+        titleText="Select a Carbon theme"
+      />
+    </div>
+  );
+};

examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss

@@ -0,0 +1,31 @@
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/config';
+
+.carbon-theme--white {
+  @include theme(themes.$white, true);
+}
+
+.carbon-theme--g10 {
+  @include theme(themes.$g10, true);
+}
+
+.carbon-theme--g90 {
+  @include theme(themes.$g90, true);
+}
+
+.carbon-theme--g100 {
+  @include theme(themes.$g100, true);
+}
+
+.carbon-theme-dropdown {
+  position: fixed;
+  bottom: 1rem; // stylelint-disable-line carbon/layout-token-use
+  left: 1rem; // stylelint-disable-line carbon/layout-token-use
+  min-width: 11.5rem;
+}
+
+.carbon-theme-dropdown .#{config.$prefix}--label {
+  @include type.type-style('label-01');
+}

examples/carbon-for-ibm-products/SearchBar/src/config.js

@@ -0,0 +1,3 @@
+import { pkg } from '@carbon/ibm-products';
+
+pkg.component.SearchBar = true;

examples/carbon-for-ibm-products/SearchBar/src/index.scss

@@ -0,0 +1,4 @@
+@use '@carbon/react' with (
+  $font-path: '@ibm/plex'
+);
+@use '@carbon/ibm-products/css/index';

examples/carbon-for-ibm-products/SearchBar/src/main.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom';
+import App from './App.jsx';
+import './index.scss';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

examples/carbon-for-ibm-products/SearchBar/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});