[hackathon-2024]: Add Component Selector to storybook

packages/react-components/react-components/stories/ComponentSelector/BehaviorSelection.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ToggleButton, makeStyles } from '@fluentui/react-components';
+
+import behaviorOptions from './selection-logic/BehaviorOptions.json';
+
+const useStyles = makeStyles({
+  heading: { margin: '30px 0 10px 0' },
+  behaviors: { display: 'flex', gap: '10px' },
+});
+
+const getDefaultBehaviors = () => {
+  const behaviors = {};
+  behaviorOptions.forEach(category => {
+    category.behaviors.forEach(behavior => {
+      behaviors[behavior.id] = false;
+    });
+  });
+  return behaviors;
+};
+
+export const BehaviorSelection = ({ updateBehaviorDecision }) => {
+  const classes = useStyles();
+  const [behaviors, setBehaviors] = React.useState<Record<string, boolean>>(getDefaultBehaviors());
+
+  return (
+    <>
+      {behaviorOptions.map(category => (
+        <React.Fragment key={category.id}>
+          <h2 className={classes.heading}>{category.title}</h2>
+          <div className={classes.behaviors}>
+            {category.behaviors.map(behavior => (
+              <ToggleButton
+                key={behavior.id}
+                checked={behaviors[behavior.id]}
+                shape="circular"
+                onClick={() => {
+                  const newValue = !behaviors[behavior.id];
+                  const newBehaviors = { ...behaviors };
+                  newBehaviors[behavior.id] = newValue;
+                  setBehaviors(newBehaviors);
+                  updateBehaviorDecision(behavior.id, newValue);
+                }}
+              >
+                {behavior.name}
+              </ToggleButton>
+            ))}
+          </div>
+        </React.Fragment>
+      ))}
+    </>
+  );
+};

packages/react-components/react-components/stories/ComponentSelector/MatchingComponents.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Divider, Link, Text, makeStyles } from '@fluentui/react-components';
+
+import { getComponentStoryUrl } from './utils';
+
+export const MatchingComponents = ({ components }) => {
+  return (
+    <>
+      <div role="group" aria-labelledby="matching-heading">
+        {components.map((component, index) => {
+          return (
+            <div key={`component-${index}}`}>
+              <Text weight="semibold">
+                Component name:{' '}
+                <Link target="_blank" inline href={getComponentStoryUrl(component)}>
+                  {component.component}{' '}
+                </Link>
+              </Text>
+              <br />
+              <Text weight="semibold">Example:</Text> {component.story ? component.story : 'Default'}
+              {component.note && (
+                <div>
+                  <Text weight="semibold">Note:</Text> <Text>{component.note}</Text>
+                </div>
+              )}
+              <Divider appearance="strong" />
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};

packages/react-components/react-components/stories/ComponentSelector/Question.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  Checkbox,
+  Divider,
+  Field,
+  Label,
+  Link,
+  Radio,
+  RadioGroup,
+  Select,
+  Text,
+  ToggleButton,
+  Image,
+  makeStyles,
+  tokens,
+  useId,
+} from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  secondLevel: { 'margin-left': '30px' },
+  thirdLevel: { 'margin-left': '60px' },
+  forthLevel: { 'margin-left': '90px' },
+  foundMessage: { 'margin-bottom': '10px' },
+  heading: { margin: '30px 0 10px 0' },
+  root: {
+    // Stack the label above the field with a gap
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '2px',
+    maxWidth: '1600px',
+  },
+  tagsList: {
+    listStyleType: 'none',
+    marginBottom: tokens.spacingVerticalXXS,
+    marginTop: 0,
+    paddingLeft: 0,
+    display: 'flex',
+    gridGap: tokens.spacingHorizontalXXS,
+  },
+  tooltip: { maxWidth: '500px important!', backgroundColor: 'red' },
+  componentWrapper: {
+    margin: '10px',
+    padding: '10px',
+    border: '1px solid #ccc',
+    borderRadius: '5px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+  },
+  questionsWrapper: {
+    padding: '20px',
+    margin: '20px 0',
+    backgroundColor: 'white',
+    borderRadius: '16px',
+    border: '1px solid var(--colorNeutralStroke1, #e1dfdd)',
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+  },
+  questionsLabel: {
+    color: '#ff00ff',
+    fontWeight: tokens.fontWeightBold,
+    marginRight: '8px',
+  },
+  questionsText: {
+    fontWeight: tokens.fontWeightBold,
+    fontSize: tokens.fontSizeBase400,
+  },
+  questionContainer: {
+    display: 'flex',
+  },
+  questionRightSide: {
+    borderLeft: '1px solid #ff00ff',
+    padding: '0 10px',
+  },
+  radioItem: {
+    display: 'flex',
+  },
+  behaviors: { display: 'flex', gap: '10px' },
+});
+
+export const Question = ({ question, number, updateDecisionForQuestion }) => {
+  const classes = useStyles();
+  const [value, setValue] = React.useState('none');
+
+  React.useEffect(() => {
+    console.log(`UseEffect: Question${number}: Value: ${value}`);
+  }, [number, value]);
+
+  return (
+    <div className={classes.questionsWrapper}>
+      <Field className={classes.questionsField}>
+        <RadioGroup
+          key={question.id}
+          value={value}
+          onChange={(_, data) => {
+            setValue(previousValue => {
+              updateDecisionForQuestion(data.value, previousValue);
+              return data.value;
+            });
+          }}
+          aria-labelledby={`${question.id}-heading`}
+        >
+          <div className={classes.questionContainer}>
+            <div className={classes.questionLeftSide}>
+              <span className={classes.questionsLabel}>{`Q${number}`}</span>
+            </div>
+            <div className={classes.questionRightSide}>
+              <span className={classes.questionsText} id={`${question.id}-heading`}>
+                {question.question}
+              </span>
+              {question.answers.map(anser => (
+                <Radio key={anser.value} value={anser.value} label={anser.text} className={classes.radioItem} />
+              ))}
+              <Radio value={'none'} label="Not applicable" className={classes.radioItem} />
+            </div>
+          </div>
+        </RadioGroup>
+      </Field>
+    </div>
+  );
+};

packages/react-components/react-components/stories/ComponentSelector/SelectionCard.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import {
+  Button,
+  Caption1,
+  Card,
+  CardHeader,
+  CardPreview,
+  CardProps,
+  Checkbox,
+  Text,
+  makeStyles,
+  tokens,
+} from '@fluentui/react-components';
+import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+import { stat } from 'fs';
+
+import * as componentsImagesImported from './components-images/index';
+
+const useStyles = makeStyles({
+  main: {
+    gap: '16px',
+    display: 'flex',
+    flexWrap: 'wrap',
+    margin: '5px 10px 10px 5px',
+  },
+
+  card: {
+    width: '250px',
+    maxWidth: '100%',
+    height: 'fit-content',
+  },
+
+  caption: {
+    color: tokens.colorNeutralForeground3,
+  },
+
+  cardImage: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: '1px solid var(--colorNeutralStroke1, #e1dfdd)',
+    filter: 'grayscale(100%) brightness(95%)',
+    opacity: 0.5,
+
+    '&:hover': {
+      filter: 'grayscale(0%) brightness(100%)',
+      opacity: 1,
+    },
+  },
+  cardImageSelected: {
+    borderRadius: tokens.borderRadiusXLarge,
+    border: '1px solid var(--colorNeutralStroke1, #e1dfdd)',
+    filter: 'grayscale(0%) brightness(100%)',
+    opacity: 1,
+  },
+
+  grayBackground: {
+    padding: '0 15px 15px',
+  },
+});
+
+export const SelectionCard = props => {
+  const styles = useStyles();
+  const { name, displayName, selected, updateComponentSelection } = props;
+  const [hovered, setHovered] = React.useState(false);
+
+  const onSelectionChange = React.useCallback(
+    (_, data) => {
+      updateComponentSelection(name, data.checked || data.selected);
+    },
+    [updateComponentSelection, name],
+  );
+
+  const componentImage = React.useMemo(() => {
+    let src;
+    const importName = `${name}Img`;
+    if (componentsImagesImported[importName]) {
+      const result = {
+        src: componentsImagesImported[importName],
+        alt: `Preview for ${props.displayName}`,
+      };
+      return result;
+    } else {
+      return undefined;
+    }
+  }, [name, displayName]);
+
+  return (
+    <div className={styles.main}>
+      <Card
+        className={styles.card}
+        floatingAction={<Checkbox aria-label={displayName} onChange={onSelectionChange} checked={selected} />}
+        selected={selected}
+        onSelectionChange={onSelectionChange}
+        // onMouseOver={() => setHovered(true)}
+        // onMouseOut={() => setHovered(false)}
+        {...props}
+      >
+        <CardHeader description={<Caption1 className={styles.caption}>{displayName}</Caption1>} />
+        <CardPreview className={styles.grayBackground}>
+          {componentImage && (
+            <img
+              className={selected || hovered ? styles.cardImageSelected : styles.cardImage}
+              src={componentImage.src}
+              alt={componentImage.alt}
+            />
+          )}
+        </CardPreview>
+      </Card>
+    </div>
+  );
+};