How to use GridCellProperties method in storybook-root

Best JavaScript code snippet using storybook-root

useCreateGrid.ts

Source:useCreateGrid.ts

1import {2  Dispatch,3  SetStateAction,4  useCallback,5  useEffect,6  useMemo,7  useState,8} from 'react';9import CellCoverage from '../types/CellCoverage';10import GridCellProperties from '../types/GridCellProperties';11import { GridInterface, Position, RootCell } from '../types/GridModel';12import createCoverageMap from '../utils/createCoverageMap';13import createPositionsTable from '../utils/createPositionsTable';14import createRootCells from '../utils/createRootCells';15import sortPositions from '../utils/sortPositions';16type CellEventHandler = (cell: GridCellProperties) => void;17interface UseCreateGridResponse extends GridInterface {18  setRows: Dispatch<SetStateAction<number>>;19  setCols: Dispatch<SetStateAction<number>>;20  setAutoSymmetry: Dispatch<SetStateAction<boolean>>;21  setBlockMode: Dispatch<SetStateAction<boolean>>;22  setHoverMode: Dispatch<SetStateAction<boolean>>;23  toggleBlock: CellEventHandler;24  selectCell: CellEventHandler;25  onHover: CellEventHandler;26  table?: GridCellProperties[][];27  blockMode: boolean;28  autoSymmetry: boolean;29  showHoverMode: boolean;30}31const updateBlocks = (32  blocks: Position[],33  cell: { rowNum: number; colNum: number }34): Position[] => {35  const cellIndex = blocks.findIndex(36    ({ x, y }) => x === cell.rowNum && y === cell.colNum37  );38  if (cellIndex < 0) {39    return [...blocks, { x: cell.rowNum, y: cell.colNum }];40  }41  const newBlocks = [...blocks];42  newBlocks.splice(cellIndex, 1);43  return newBlocks;44};45const getInverseCellPosition = (46  rows: number,47  cols: number,48  cell?: { rowNum?: number; colNum?: number }49): Position | undefined =>50  cell && cell.rowNum >= 0 && cell?.colNum >= 051    ? {52        x: rows - 1 - cell.rowNum,53        y: cols - 1 - cell.colNum,54      }55    : undefined;56// TODO: Call useQuery to fetch grid. Change param to grid id instead.57const useCreateGrid = (grid?: GridInterface): UseCreateGridResponse => {58  const [rows, setRows] = useState(grid?.rows || 0);59  const [cols, setCols] = useState(grid?.cols || 0);60  const [blocks, setBlocks] = useState(grid?.blocks || []);61  const [rootCells, setRootCells] = useState(grid?.rootCells || []);62  const [rootCellTable, setRootCellTable] = useState([]);63  const [cellCoverageMap, setCellCoverageMap] = useState<CellCoverage[][]>([]);64  const [autoSymmetry, setAutoSymmetry] = useState(true);65  const [showHoverMode, setHoverMode] = useState(true);66  const [blockMode, _setBlockMode] = useState(true);67  const [hoveredCell, setHoveredCell] = useState<68    GridCellProperties | undefined69  >(undefined);70  const [selectedCell, setSelectedCell] = useState<71    GridCellProperties | undefined72  >(undefined);73  const [wordMode, setWordMode] = useState<keyof CellCoverage>('across');74  const blockTable = useMemo(75    () => createPositionsTable(blocks, rows, cols) as number[][],76    [blocks, rows, cols]77  );78  useEffect(() => {79    const newRootCells = sortPositions(createRootCells(blockTable));80    setRootCells(newRootCells);81    setRootCellTable(82      createPositionsTable(newRootCells, rows, cols, {83        returnData: true,84        skipSort: true,85      })86    );87    setCellCoverageMap(createCoverageMap(newRootCells, rows, cols, true));88  }, [blockTable, rows, cols]);89  const toggleBlock = useCallback(90    (cell: GridCellProperties) => {91      setBlocks((blocks) => {92        let newBlocks = updateBlocks(blocks, cell);93        if (autoSymmetry) {94          const inverseCell = getInverseCellPosition(rows, cols, cell);95          if (inverseCell.x !== cell.rowNum || inverseCell.y !== cell.colNum) {96            newBlocks = updateBlocks(newBlocks, {97              rowNum: inverseCell.x,98              colNum: inverseCell.y,99            });100          }101        }102        return newBlocks;103      });104    },105    [autoSymmetry, rows, cols]106  );107  const selectCell = useCallback(108    (cell: GridCellProperties) => {109      if (110        selectedCell?.rowNum === cell.rowNum &&111        selectedCell?.colNum === cell.colNum112      ) {113        setWordMode((mode) => (mode === 'across' ? 'down' : 'across'));114      }115      setSelectedCell(cell);116    },117    [selectedCell]118  );119  const setBlockMode = useCallback((isBlockMode) => {120    if (isBlockMode) {121      setSelectedCell(undefined);122    }123    _setBlockMode(isBlockMode);124  }, []);125  const onHover = useCallback((cell: GridCellProperties) => {126    setHoveredCell(cell);127  }, []);128  const table: GridCellProperties[][] = useMemo(() => {129    if (!rows || !cols) {130      return undefined;131    }132    return Array.from(new Array(rows)).map((_, rowNum) =>133      Array.from(new Array(cols)).map((_, colNum) => {134        const rootCell: RootCell | undefined =135          rootCellTable?.length && rootCellTable[rowNum][colNum];136        const rootnum = rootCell?.index;137        const isSelected =138          selectedCell &&139          selectedCell.rowNum === rowNum &&140          selectedCell.colNum === colNum;141        const coverage =142          cellCoverageMap.length && cellCoverageMap[rowNum][colNum];143        const isWordHighlighted =144          !isSelected &&145          selectedCell?.coverage &&146          coverage &&147          coverage[wordMode] === selectedCell.coverage[wordMode];148        const isRootnumHighlighted =149          (isSelected || isWordHighlighted) &&150          coverage &&151          coverage[wordMode] === rootCell?.index;152        return {153          rowNum,154          colNum,155          rootnum,156          block: !!blockTable[rowNum][colNum],157          isBlockHighlighted:158            hoveredCell &&159            ((hoveredCell.rowNum === rowNum && hoveredCell.colNum === colNum) ||160              (blockMode &&161                autoSymmetry &&162                rows - 1 - hoveredCell.rowNum === rowNum &&163                cols - 1 - hoveredCell.colNum === colNum)),164          isHighlighted: isSelected,165          coverage,166          isWordHighlighted,167          isRootnumHighlighted,168        } as GridCellProperties;169      })170    );171  }, [172    rows,173    cols,174    hoveredCell,175    autoSymmetry,176    blockTable,177    rootCellTable,178    blockMode,179    cellCoverageMap,180    selectedCell,181    wordMode,182  ]);183  return {184    rows,185    cols,186    rootCells,187    blocks,188    autoSymmetry,189    table,190    blockMode,191    showHoverMode,192    setRows,193    setCols,194    setAutoSymmetry,195    setBlockMode,196    onHover,197    toggleBlock,198    setHoverMode,199    selectCell,200  };201};...

addon-backgrounds.stories.js

Source:addon-backgrounds.stories.js

1import React from 'react';2import BaseButton from '../components/BaseButton';3export default {4  title: 'Addons/Backgrounds',5  parameters: {6    backgrounds: {7      default: 'dark',8      values: [9        { name: 'white', value: '#ffffff' },10        { name: 'light', value: '#eeeeee' },11        { name: 'gray', value: '#cccccc' },12        { name: 'dark', value: '#222222' },13        { name: 'black', value: '#000000' },14      ],15    },16  },17};18const Template = (args) => <BaseButton {...args} />;19export const Story1 = Template.bind({});20Story1.args = {21  label: 'You should be able to switch backgrounds for this story',22};23export const Story2 = Template.bind({});24Story2.args = {25  label: 'This one too!',26};27export const Overridden = Template.bind({});28Overridden.args = {29  label: 'This one should have different backgrounds',30};31Overridden.parameters = {32  backgrounds: {33    default: 'blue',34    values: [35      { name: 'pink', value: 'hotpink' },36      { name: 'blue', value: 'deepskyblue' },37    ],38  },39};40export const WithGradient = Template.bind({});41WithGradient.args = {42  label: 'This one should have a nice gradient',43};44WithGradient.parameters = {45  backgrounds: {46    default: 'gradient',47    values: [48      {49        name: 'gradient',50        value:51          'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',52      },53    ],54  },55};56export const WithImage = Template.bind({});57WithImage.args = {58  label: 'This one should have an image background',59};60WithImage.parameters = {61  backgrounds: {62    default: 'space',63    values: [64      {65        name: 'space',66        value: 'url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg)',67      },68    ],69  },70};71export const DisabledBackgrounds = Template.bind({});72DisabledBackgrounds.args = {73  label: 'This one should not use backgrounds',74};75DisabledBackgrounds.parameters = {76  backgrounds: { disable: true },77};78export const DisabledGrid = Template.bind({});79DisabledGrid.args = {80  label: 'This one should not use grid',81};82DisabledGrid.parameters = {83  backgrounds: {84    grid: { disable: true },85  },86};87export const GridCellProperties = Template.bind({});88GridCellProperties.args = {89  label: 'This one should have different grid properties',90};91GridCellProperties.parameters = {92  backgrounds: {93    grid: {94      cellSize: 10,95      cellAmount: 4,96      opacity: 0.2,97    },98  },99};100export const AlignedGridWhenFullScreen = Template.bind({});101AlignedGridWhenFullScreen.args = {102  label: 'Grid should have an offset of 0 when in fullscreen',103};104AlignedGridWhenFullScreen.parameters = {105  layout: 'fullscreen',...

Using AI Code Generation

1import { GridCellProperties } from 'storybook-root';2const gridCellProperties = new GridCellProperties();3gridCellProperties.getGridCellProperties();4import { NativeModules } from 'react-native';5const { GridCellProperties } = NativeModules;6export default GridCellProperties;7#import "GridCellProperties.h"8#import <React/RCTBridgeModule.h>9@interface RCT_EXTERN_MODULE(GridCellProperties, NSObject)10RCT_EXTERN_METHOD(getGridCellProperties)11package com.storybookroot;12import com.facebook.react.bridge.ReactApplicationContext;13import com.facebook.react.bridge.ReactContextBaseJavaModule;14import com.facebook.react.bridge.ReactMethod;15public class GridCellPropertiesModule extends ReactContextBaseJavaModule {16    public GridCellPropertiesModule(ReactApplicationContext reactContext) {17        super(reactContext);18    }19    public String getName() {20        return "GridCellProperties";21    }22    public void getGridCellProperties() {

Using AI Code Generation

1var path = require('path');2var storybookRoot = require('storybook-root');3var gridCellProperties = storybookRoot.GridCellProperties;4var gridCellProperties = new gridCellProperties();5var cellProperties = gridCellProperties.getCellProperties(1, 1);6console.log(cellProperties);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.