`. The default output assumes that all atoms and selectors are imported from a single path; if that's not possible, you'll need to separately import each set of atoms and/or selectors from their appropriate path.\n\n| **BEFORE** | **AFTER** |\n| :-----------------------------------------------------------: | :----------------------------------------------------------: |\n|  |  |\n\nYou're now ready to run your tests! Upon running your normal Jest test command, you should see three suites for `chromogen.test.js`:\n\n\n\n\n\n
\n\n**Initial Render** tests whether each selector returns the correct value at launch. There is one test per selector.\n\n**Selectors** tests the return value of various selectors for a given state. Each test represents the app state after a transaction has occured, generally triggered by some user interaction. For each selector that ran after that transaction, the test asserts on the selector's return value for the given state.\n\n**Setters** tests the state that results from setting a writeable selector with a given value and starting state. There is one test per set call, asserting on each atom's value in the resulting state.\n\nhere , and view the source code in the `demo-zustand-todo` folder of this repository.\n\n\n\n# The official demo app for [Chromogen](https://github.com/oslabs-beta/Chromogen).\n\n\n\n
\n\n## Selector Implementations\n - Readonly:\n 1. displayed todo list items, based on filter selection (sort & active/complete)\n 2. stats (priority count and active/complete counts)\n 3. displayed todo list empty / non-empty\n - Writeable:\n 1. \"all complete\" checkbox toggle\n 1. reset filter states\n - Promise:\n 1. quote text\n - Async / Await:\n 1. xkcd comic\n - selectorFamily (_in progress_):\n 1. search bar"
},
{
"path": "demo-todo/__tests__/initialTestTest.js",
"content": "import { renderRecoilHook, act } from 'react-recoil-hooks-testing-library';\nimport { useRecoilValue, useRecoilState } from 'recoil';\nimport {\n filteredTodoListState,\n sortedTodoListState,\n todoListSortedStats,\n todoListStatsState,\n filteredListContentState,\n allCompleteState,\n refreshFilterState,\n searchBarSelectorFam,\n\n} from '../src/store/store';\nimport {\n todoListState,\n todoListFilterState,\n todoListSortState,\n quoteNumberState,\n searchResultState,\n\n} from '../src/store/atoms';\n\n// Suppress 'Batcher' warnings from React / Recoil conflict\nconsole.error = jest.fn();\n\n// Hook to return atom/selector values and/or modifiers for react-recoil-hooks-testing-library\nconst useStoreHook = () => {\n // atoms\n const [todoListStateValue, settodoListState] = useRecoilState(todoListState);\n const [todoListFilterStateValue, settodoListFilterState] = useRecoilState(todoListFilterState);\n const [todoListSortStateValue, settodoListSortState] = useRecoilState(todoListSortState);\n const [quoteNumberStateValue, setquoteNumberState] = useRecoilState(quoteNumberState);\n const [searchResultStateValue, setsearchResultState] = useRecoilState(searchResultState);\n\n // writeable selectors\n const [allCompleteStateValue, setallCompleteState] = useRecoilState(allCompleteState);\n const [refreshFilterStateValue, setrefreshFilterState] = useRecoilState(refreshFilterState);\n\n // read-only selectors\n const filteredTodoListStateValue = useRecoilValue(filteredTodoListState);\n const sortedTodoListStateValue = useRecoilValue(sortedTodoListState);\n const todoListSortedStatsValue = useRecoilValue(todoListSortedStats);\n const todoListStatsStateValue = useRecoilValue(todoListStatsState);\n const filteredListContentStateValue = useRecoilValue(filteredListContentState);\n\n // atom families\n\n // writeable selector families\n\n // read-only selector families\n\n\n\n\n return {\n todoListStateValue,\n settodoListState,\n todoListFilterStateValue,\n settodoListFilterState,\n todoListSortStateValue,\n settodoListSortState,\n quoteNumberStateValue,\n setquoteNumberState,\n searchResultStateValue,\n setsearchResultState,\n allCompleteStateValue,\n setallCompleteState,\n refreshFilterStateValue,\n setrefreshFilterState,\n filteredTodoListStateValue,\n sortedTodoListStateValue,\n todoListSortedStatsValue,\n todoListStatsStateValue,\n filteredListContentStateValue,\n };\n};\n\ndescribe('INITIAL RENDER', () => {\n const { result } = renderRecoilHook(useStoreHook);\n\n it('filteredTodoListState should initialize correctly', () => {\n expect(result.current.filteredTodoListStateValue).toStrictEqual([]);\n });\n\n it('sortedTodoListState should initialize correctly', () => {\n expect(result.current.sortedTodoListStateValue).toStrictEqual([]);\n });\n\n it('allCompleteState should initialize correctly', () => {\n expect(result.current.allCompleteStateValue).toStrictEqual(true);\n });\n\n it('filteredListContentState should initialize correctly', () => {\n expect(result.current.filteredListContentStateValue).toStrictEqual(false);\n });\n\n it('todoListSortedStats should initialize correctly', () => {\n expect(result.current.todoListSortedStatsValue).toStrictEqual({});\n });\n\n it('todoListStatsState should initialize correctly', () => {\n expect(result.current.todoListStatsStateValue).toStrictEqual({ \"totalNum\": 0, \"totalCompletedNum\": 0, \"totalUncompletedNum\": 0, \"percentCompleted\": 0 });\n });\n\n\n});\n\ndescribe('SELECTORS', () => {\n it('todoListSortedStats should properly derive state when todoListState updates', () => {\n const { result } = renderRecoilHook(useStoreHook);\n\n act(() => {\n result.current.settodoListState([{ \"id\": 1, \"text\": \"tennis\", \"priority\": \"low\", \"isComplete\": false }]);\n\n result.current.settodoListFilterState(\"Show All\");\n\n result.current.settodoListSortState(false);\n\n result.current.setquoteNumberState(23);\n\n result.current.setsearchResultState({ \"all\": { \"searchTerm\": \"\", \"results\": [] }, \"high\": { \"searchTerm\": \"\", \"results\": [] }, \"medium\": { \"searchTerm\": \"\", \"results\": [] }, \"low\": { \"searchTerm\": \"\", \"results\": [] } });\n\n\n\n });\n expect(result.current.todoListSortedStatsValue).toStrictEqual({ \"low\": 1 });\n\n });\n\n it('todoListSortedStats should properly derive state when todoListState updates', () => {\n const { result } = renderRecoilHook(useStoreHook);\n\n act(() => {\n result.current.settodoListState([{ \"id\": 1, \"text\": \"tennis\", \"priority\": \"low\", \"isComplete\": false }, { \"id\": 2, \"text\": \"chinese chicken\", \"priority\": \"low\", \"isComplete\": false }]);\n\n result.current.settodoListFilterState(\"Show All\");\n\n result.current.settodoListSortState(false);\n\n result.current.setquoteNumberState(23);\n\n result.current.setsearchResultState({ \"all\": { \"searchTerm\": \"\", \"results\": [] }, \"high\": { \"searchTerm\": \"\", \"results\": [] }, \"medium\": { \"searchTerm\": \"\", \"results\": [] }, \"low\": { \"searchTerm\": \"\", \"results\": [] } });\n\n\n\n });\n expect(result.current.todoListSortedStatsValue).toStrictEqual({ \"low\": 2 });\n\n });\n\n});\n\ndescribe('SETTERS', () => {\n});"
},
{
"path": "demo-todo/package.json",
"content": "{\n \"name\": \"chromogen-todo\",\n \"version\": \"1.0.0\",\n \"description\": \"demo todo app for Chromogen using React + Recoil\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"webpack-dev-server --open\",\n \"test\": \"NODE_OPTIONS=--experimental-vm-modules npx jest --verbose\"\n },\n \"keywords\": [\n \"react\",\n \"recoil\",\n \"chromogen\",\n \"demo\",\n \"example\",\n \"todo\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/open-source-labs/Chromogen.git\"\n },\n \"contributors\": [\n {\n \"name\": \"Michelle Holland\",\n \"url\": \"https://github.com/michellebholland/\"\n },\n {\n \"name\": \"Jim Chen\",\n \"url\": \"https://github.com/chenchingk\"\n },\n {\n \"name\": \"Andy Wang\",\n \"url\": \"https://github.com/andywang23\"\n },\n {\n \"name\": \"Connor Rose Delisle\",\n \"url\": \"https://github.com/connorrose\"\n }\n ],\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.11.1\",\n \"@babel/plugin-transform-runtime\": \"^7.11.0\",\n \"@babel/preset-env\": \"^7.19.1\",\n \"@babel/preset-react\": \"^7.10.4\",\n \"@testing-library/react\": \"^13.1.1\",\n \"babel-loader\": \"^8.1.0\",\n \"chromogen\": \"^4.0.4\",\n \"css-loader\": \"^4.2.1\",\n \"identity-obj-proxy\": \"^3.0.0\",\n \"jest\": \"^26.4.2\",\n \"style-loader\": \"^1.2.1\",\n \"webpack\": \"^5.74.0\",\n \"webpack-cli\": \"^3.3.12\",\n \"webpack-dev-server\": \"^4.11.1\"\n },\n \"peerDependencies\": {\n \"typescript\": \"^4.0.3\"\n },\n \"dependencies\": {\n \"@babel/runtime\": \"^7.11.2\",\n \"@emotion/react\": \"^11.10.4\",\n \"@emotion/styled\": \"^11.10.4\",\n \"@mui/icons-material\": \"^5.10.6\",\n \"@mui/material\": \"^5.10.6\",\n \"babel-jest\": \"^26.3.0\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"react-recoil-hooks-testing-library\": \"^0.1.0\",\n \"react-test-renderer\": \"^18.1.0\",\n \"recoil\": \"0.7.2\",\n \"typescript\": \"^4.0.3\"\n },\n \"jest\": {\n \"moduleNameMapper\": {\n \"\\\\.(css|less)$\": \"identity-obj-proxy\"\n }\n }\n}\n"
},
{
"path": "demo-todo/src/components/App.jsx",
"content": "import React from 'react';\nimport { RecoilRoot } from 'recoil';\nimport { ChromogenObserver } from 'chromogen';\nimport TodoList from './TodoList';\nimport * as selectors from '../store/store';\nimport * as atoms from '../store/atoms';\n\nconst App = () => (\n \n \n);\n\nexport default App;\n"
},
{
"path": "demo-todo/src/components/Quotes.jsx",
"content": "import React from 'react';\nimport { useRecoilValue, useSetRecoilState } from 'recoil';\nimport { quoteTextState, xkcdState } from '../store/store';\nimport { quoteNumberState } from '../store/atoms';\n\nconst Quotes = () => {\n const setQuoteNumber = useSetRecoilState(quoteNumberState);\n const quoteText = useRecoilValue(quoteTextState);\n\n return (\n <>\n \n
{quoteText}
\n
setQuoteNumber(Math.floor(Math.random() * 1643))}>\n New Quote\n \n
\n todo.id === item.id).isComplete}\n color=\"default\"\n inputProps={{ 'aria-label': 'primary checkbox' }}\n style={{ cursor: 'default' }}\n />\n
\n ) : null;\n};\nexport default ReadOnlyTodoItem;\n"
},
{
"path": "demo-todo/src/components/SearchBar.jsx",
"content": "import React, { useState } from 'react';\nimport { useRecoilState } from 'recoil';\nimport { searchBarSelectorFam } from '../store/store';\n\nimport ReadOnlyTodoItem from './ReadOnlyTodoItem';\n\nconst SearchBar = () => {\n const [searchFilter, setSearchFilter] = useState('all');\n const [searchText, setSearchText] = useState('');\n const [searchState, setSearchState] = useRecoilState(searchBarSelectorFam(searchFilter));\n\n const onSearchTextChange = (e) => {\n setSearchText(e.target.value);\n setSearchState(e.target.value);\n };\n const onSelectChange = (e) => {\n setSearchText('');\n setSearchFilter(e.target.value);\n };\n\n return (\n \n
\n
\n All Priorities \n High Priority \n Medium Priority \n Low Priority \n \n
\n {searchState.results.map((result, idx) => (\n
\n
\n \n X\n \n
\n );\n};\nexport default TodoItem;\n"
},
{
"path": "demo-todo/src/components/TodoItemCreator.jsx",
"content": "/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useState } from 'react';\nimport RadioGroup from '@mui/material/RadioGroup';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormControl from '@mui/material/FormControl';\nimport FormLabel from '@mui/material/FormLabel';\nimport Radio from '@mui/material/Radio';\nimport { useSetRecoilState } from 'recoil';\nimport { todoListState } from '../store/atoms';\n\n// utility for creating unique Id\nlet id = 0;\nconst getId = () => {\n id += 1;\n return id;\n};\n\nconst TodoItemCreator = () => {\n const [inputValue, setInputValue] = useState('');\n const [priorityValue, setPriorityValue] = useState('low');\n const setTodoList = useSetRecoilState(todoListState);\n\n const addItem = () => {\n setTodoList((oldTodoList) => [\n ...oldTodoList,\n {\n id: getId(),\n text: inputValue,\n priority: priorityValue,\n isComplete: false,\n },\n ]);\n setInputValue('');\n setPriorityValue('low');\n };\n\n const onChange = ({ target: { value } }) => {\n setInputValue(value);\n };\n\n const handleChange = (event) => {\n setPriorityValue(event.target.value);\n };\n\n /* MUI Radio Button styles */\n const GreenRadio = (props) => \n \n \n \n \n \n\n \n Add\n \n
\n );\n};\n\nexport default TodoItemCreator;\n"
},
{
"path": "demo-todo/src/components/TodoList.jsx",
"content": "import React from 'react';\nimport { useRecoilValue } from 'recoil';\nimport { sortedTodoListState } from '../store/store';\nimport TodoItem from './TodoItem';\nimport TodoItemCreator from './TodoItemCreator';\nimport TodoListFilters from './TodoListFilters';\nimport TodoQuickCheck from './TodoQuickCheck';\nimport Quotes from './Quotes';\nimport SearchBar from './SearchBar';\nimport '../styles/styles.css';\n\nconst TodoList = () => {\n const todoList = useRecoilValue(sortedTodoListState);\n\n return (\n \n
\n Loading...}>\n \n
\n\n
\n
Totally Todos! \n\n
\n
\n
\n
\n
\n
\n \n All {totalNum || ''} \n \n \n Active {totalUncompletedNum || ''} \n \n \n Complete {totalCompletedNum || ''} \n \n \n \n\n \n {displayStats && totalNum ? (\n \n {high || 0} \n {medium || 0} \n {low || 0} \n \n ) : (\n \n \n \n \n );\n};\n\nexport default TodoListFilters;\n"
},
{
"path": "demo-todo/src/components/TodoQuickCheck.jsx",
"content": "import React from 'react';\nimport { useRecoilState, useRecoilValue } from 'recoil';\nimport Checkbox from '@mui/material/Checkbox';\nimport { allCompleteState, filteredListContentState } from '../store/store';\n\nconst TodoQuickCheck = () => {\n const [allComplete, setAllComplete] = useRecoilState(allCompleteState);\n const display = useRecoilValue(filteredListContentState);\n\n return (\n display && (\n \n setAllComplete(!allComplete)}\n />\n all\n
\n )\n );\n};\n\nexport default TodoQuickCheck;\n"
},
{
"path": "demo-todo/src/index.html",
"content": "\n\n \n Chromogen To-Do Demo \n \n \n
\n \n\n"
},
{
"path": "demo-todo/src/index.js",
"content": "/* eslint-disable react/jsx-filename-extension */\nimport React from 'react';\n//import { render } from 'react-dom';\nimport App from './components/App';\nimport { createRoot } from'react-dom/client';\n\nconst root = createRoot(document.getElementById('app'));\n\nroot.render(\n \n \n \n);\n\nexport default App;\n"
},
{
"path": "demo-zustand-todo/src/components/Quotes.jsx",
"content": "import React from 'react';\nimport shallow from 'zustand/shallow';\nimport useToDoStore from '../store/store';\nimport { useEffect } from 'react';\n\nconst selector = (state) => ({\n changeQuoteText: state.changeQuoteText,\n quoteText: state.quoteText,\n});\n\nconst Quotes = () => {\n const { changeQuoteText, quoteText } = useToDoStore(selector, shallow);\n\n const fetchMe = () => {\n let randomNum = Math.floor(Math.random() * 1643);\n\n fetch('https://type.fit/api/quotes')\n .then((response) => response.json())\n .then((data) => {\n const quote = data[randomNum];\n changeQuoteText(`\"${quote.text}\"\\n\\t- ${quote.author || 'unknown'}`);\n })\n .catch((err) => {\n console.error(err);\n return 'No quote available';\n });\n };\n\n useEffect(() => fetchMe(), []);\n\n return (\n <>\n \n \n );\n};\n\nexport default Quotes;\n"
},
{
"path": "demo-zustand-todo/src/components/ReadOnlyTodoItem.jsx",
"content": "import React from 'react';\nimport Checkbox from '@mui/material/Checkbox';\nimport '../styles/styles.css';\nimport useToDoStore from '../store/store';\n\nconst ReadOnlyTodoItem = ({ item }) => {\n const checkBoxClasses = {\n low: 'lowPriority',\n medium: 'mediumPriority',\n high: 'highPriority',\n };\n\n const todoList = useToDoStore((state) => state.todoListState);\n\n return todoList.find((todo) => todo.id === item.id) ? (\n \n todo.id === item.id).isComplete}\n color=\"default\"\n inputProps={{ 'aria-label': 'primary checkbox' }}\n style={{ cursor: 'default' }}\n />\n
\n ) : null;\n};\nexport default ReadOnlyTodoItem;\n"
},
{
"path": "demo-zustand-todo/src/components/SearchBar.jsx",
"content": "import React, { useState } from 'react';\nimport useToDoStore from '../store/store';\nimport shallow from 'zustand/shallow';\n\nimport ReadOnlyTodoItem from './ReadOnlyTodoItem';\n\nconst selector = (state) => ({\n searchResultState: state.searchResultState,\n setSearchState: state.setSearchState,\n});\n\nconst SearchBar = () => {\n const [searchFilter, setSearchFilter] = useState('all');\n const [searchText, setSearchText] = useState('');\n const { searchResultState, setSearchState } = useToDoStore(selector, shallow);\n const searchResults = searchResultState[searchFilter];\n\n const onSearchTextChange = (e) => {\n setSearchText(e.target.value);\n setSearchState(e.target.value, searchFilter);\n };\n const onSelectChange = (e) => {\n setSearchText('');\n setSearchFilter(e.target.value);\n };\n\n return (\n \n
\n
\n All Priorities \n High Priority \n Medium Priority \n Low Priority \n \n \n {searchResults.results.map((result, idx) => (\n
\n \n editItemText(e.target.value, item.id)}\n />\n toggleItemCompletion(item.id)}\n />\n deleteTodoListItem(item.id)}>\n X\n \n
\n );\n};\nexport default TodoItem;\n"
},
{
"path": "demo-zustand-todo/src/components/TodoItemCreator.jsx",
"content": "/* eslint-disable react/jsx-props-no-spreading */\nimport React, { useState } from 'react';\nimport RadioGroup from '@mui/material/RadioGroup';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport FormControl from '@mui/material/FormControl';\nimport FormLabel from '@mui/material/FormLabel';\nimport Radio from '@mui/material/Radio';\nimport useToDoStore from '../store/store';\n\nconst selector = (state) => state.addTodoListItem;\n\n// utility for creating unique Id\nlet id = 1;\nconst getId = () => {\n id += 1;\n return id;\n};\n\nconst TodoItemCreator = () => {\n const [inputValue, setInputValue] = useState('');\n const [priorityValue, setPriorityValue] = useState('low');\n const addTodoListItem = useToDoStore(selector);\n\n const addItem = () => {\n addTodoListItem({\n id: getId(),\n text: inputValue,\n priority: priorityValue,\n isComplete: false,\n });\n setInputValue('');\n setPriorityValue('low');\n };\n\n const onChange = ({ target: { value } }) => {\n setInputValue(value);\n };\n\n const handleChange = (event) => {\n setPriorityValue(event.target.value);\n };\n\n /* MUI Radio Button styles */\n const GreenRadio = (props) => \n \n \n \n \n \n\n \n Add\n \n
\n );\n};\n\nexport default TodoItemCreator;\n"
},
{
"path": "demo-zustand-todo/src/components/TodoList.jsx",
"content": "import React from 'react';\nimport TodoItem from './TodoItem';\nimport TodoItemCreator from './TodoItemCreator';\nimport TodoListFilters from './TodoListFilters';\nimport TodoQuickCheck from './TodoQuickCheck';\nimport Quotes from './Quotes';\nimport SearchBar from './SearchBar';\nimport '../styles/styles.css';\nimport shallow from 'zustand/shallow';\nimport useToDoStore from '../store/store';\n\nconst selector = (state) => ({\n todoListState: state.todoListState,\n todoListFilterState: state.todoListFilterState,\n todoListSortState: state.todoListSortState,\n});\n\nconst filterList = (list, filter) => {\n switch (filter) {\n case 'Show Completed':\n return list.filter((item) => item.isComplete);\n case 'Show Uncompleted':\n return list.filter((item) => !item.isComplete);\n default:\n return list;\n }\n};\n\nconst sortList = (list, sortingMethod) => {\n if (!sortingMethod) return list;\n const high = list.filter((item) => item.priority === 'high');\n const medium = list.filter((item) => item.priority === 'medium');\n const low = list.filter((item) => item.priority === 'low');\n return [...high, ...medium, ...low];\n};\n\nconst TodoList = () => {\n const { todoListState, todoListFilterState, todoListSortState } = useToDoStore(selector, shallow);\n const todoList = sortList(filterList(todoListState, todoListFilterState), todoListSortState);\n\n return (\n \n
\n
\n \n
\n Loading...}>\n \n
\n
\n
To-Do List \n
\n
\n
\n
\n
\n
\n
\n \n All {totalNum || ''} \n \n \n Active {totalUncompletedNum || ''} \n \n \n Complete {totalCompletedNum || ''} \n \n \n \n\n \n {displayStats && totalNum ? (\n \n {high || 0} \n {medium || 0} \n {low || 0} \n \n ) : (\n \n \n \n \n );\n};\n\nexport default TodoListFilters;\n"
},
{
"path": "demo-zustand-todo/src/components/TodoQuickCheck.jsx",
"content": "import React from 'react';\nimport Checkbox from '@mui/material/Checkbox';\nimport shallow from 'zustand/shallow';\nimport useToDoStore from '../store/store';\nimport { useEffect } from 'react';\n\nconst selector = (state) => ({\n setAllComplete: state.setAllComplete,\n checkBox: state.checkBox,\n setCheckBox: state.setCheckBox,\n});\n\nconst TodoQuickCheck = () => {\n const { setAllComplete, checkBox, setCheckBox } = useToDoStore(selector, shallow);\n\n useEffect(() => setCheckBox());\n\n return (\n \n setAllComplete()}\n />\n All\n
\n );\n};\n\nexport default TodoQuickCheck;\n"
},
{
"path": "demo-zustand-todo/src/index.html",
"content": "\n\n \n Chromogen Zustand Demo To-Do \n \n \n
\n \n\n"
},
{
"path": "demo-zustand-todo/src/index.js",
"content": "/* eslint-disable react/jsx-filename-extension */\nimport React from 'react';\nimport App from './components/App';\nimport { createRoot } from 'react-dom/client';\n\nconst root = createRoot(document.getElementById('app'));\n\nroot.render(\n
Chromogen \n
\n \n\n
A UI-driven Jest test-generation package for Recoil.js selectors and Zustand store hooks. \n\n
\n\n[](https://www.npmjs.com/package/chromogen)\n[](https://github.com/open-source-labs/Chromogen/blob/master/LICENSE)\n
\n\n
Note: These changes do have a small performance cost, so they should be reverted before deploying to production. \n\n\n \n);\n\nexport default App;\n```\n\nIf you are using pseudo-random key names, such as with _UUID_, you'll need to pass all of your store exports to the ChromogenObserver component as a `store` prop. This will allow Chromogen to use source code variable names in the output file, instead of relying on keys. When all atoms and selectors are exported from a single file, you can pass the imported module directly:\n\n```jsx\nimport * as store from './store';\n// ...\n\n\n\n\n
\n\nThe pause button on the left is the **pause recording** button. Clicking it will pause recording, so that no tests are generated during subsequent state changes. Pausing is useful for setting up a complex initial state with repetitive actions, where you don't want to test every step of the process.\n\nThe button in the middle is the **download** button. Clicking it will download a new test file that includes _all_ tests generated since the app was last launched or refreshed.\n\nThe button on the right is the **copy-to-clipboard** button. Clicking it will copy your tests, including _all_ tests generated since the app was last launched or refreshed.\n\nOnce you've recorded all the interactions you want to test, click the pause button and then the download button to generate the test file or press copy to copy to your clipboard. You can now drag-and-drop the downloaded file into your app's test directory or paste the code in your new file. **Don't forget to add the source path in your test file**\n\nYou're now ready to run your tests! After running your normal Jest test command, you should see a test suite for `chromogen.test.js`.\n\nThe current tests check whether state has changed after an interaction and checks whether the resulting state change variables have been updated as expected.\n\n setMock(!mock)} />;\n };\n\n render(\n \n ,\n );\n });\n\n // ChromogenObserver lines 25-36\n it('should relay messages to DevTool', () => {\n\n // expect(window.addEventListener('message', 'connectChromogen')).toBeTruthy()\n\n // expect(window.addEventListener('message', 'downloadFile')).toBeTruthy()\n\n // expect(window.addEventListener('message', 'toggleRecord')).toBeTruthy()\n });\n\n // ChromogenObserver lines 56-80\n // Store contains atoms and selectors\n it('should update storeMap with all items from passed in store', () => {\n \n })\n\n // ChromogenObserver lines 104-117\n it('should update atomFamilyState', () => {\n\n })\n\n // ChromogenObserver lines 142-145\n it('should ', () => {\n\n })\n\n // ChromogenObserver lines 154-155\n it('should change button color on mouse enter/leave', () => {\n \n })\n\n it('should render a download link', () => {\n // verify that download Chromogen tests link exists and is being rendered\n expect(document.getElementById('chromogen-download')).toBeTruthy();\n });\n\n it('should render two buttons by default', () => {\n // verify that generate-file and record buttons are being rendered\n expect(document.getElementById('chromogen-generate-file')).toBeTruthy();\n expect(document.getElementById('chromogen-toggle-record')).toBeTruthy();\n });\n\n xit('should create a file URL on button click', () => {\n // invoking a click on generate-file button\n document.getElementById('chromogen-generate-file').click();\n // declaring a const downloadLink referencing hidden download link\n const downloadLink = document.getElementById('chromogen-download');\n // verify that download link has a URL that is being referenced\n expect(downloadLink.getAttribute('href')).toBeTruthy();\n });\n\n it('should create transactions when state updates', () => {\n // invoking a click to check that state in mock-button is being toggled (in the state mock)\n document.getElementById('mock-button').click();\n\n // Using Promise to get around async nature of Recoil transactions\n expect(\n // verifying that resolve (mockData) has been added to ledger.transactions\n new Promise((resolve) => setTimeout(() => resolve(ledger.transactions), 100)),\n // verify that resolve property on promise object has been updated\n ).resolves.toHaveLength(1);\n });\n});\n"
},
{
"path": "package/recoil_generator/__tests__/core-utils.test.jx",
"content": "import {\n debouncedAddToTransactions,\n wrapGetter,\n wrapSetter,\n} from '../src/api/core-utils';\n\nimport { debounce } from '../src/utils/utils';\n\nxdescribe('debouncedAddToTransaction', () => {\n\n});\n\nxdescribe('wrapGetter', () => {\n\n});\n\nxdescribe('wrapSetter', () => {\n\n});"
},
{
"path": "package/recoil_generator/__tests__/output-utils.test.js",
"content": "import {\n initializeAtoms,\n assertState,\n testSelectors,\n testSetters,\n importRecoilFamily,\n atomFamilyHook,\n //writeableHook,\n readableHook,\n} from '../src/output/output-utils.ts';\n\n// testing ternary operator in initializeAtoms helper function\ndescribe('initializeAtoms', () => {\n // create mock atomUpdate object, follows AtomUpdate interface\n const atomUpdate = {\n key: 'testAtom',\n value: 2,\n previous: 1,\n updated: true,\n };\n\n it('should set correct atom value if current is true', () => {\n // create variable to hold evaluated result of invoking initializeAtoms on the mock array with a parameter of true\n const returnString = initializeAtoms([atomUpdate], true);\n // verify that returnString contains key property of a string and contains a value property on the atomUpdate object (since true was passed into 'initializeAtoms')\n expect(returnString).toEqual(\n expect.stringContaining(`result.current.set${atomUpdate.key}(${atomUpdate.value})`),\n );\n });\n\n it('should set correct atom value if current is false', () => {\n // create variable to hold evaluated result of invoking initializeAtoms on the mock array with a parameter of false\n const returnString = initializeAtoms([atomUpdate], false);\n // verify that returnString contains key property of a string and contains a value property on the atomUpdate object (since false was passed into 'initializeAtoms')\n expect(returnString).toEqual(\n expect.stringContaining(`result.current.set${atomUpdate.key}(${atomUpdate.previous})`),\n );\n });\n});\n\ndescribe('assertState', () => {\n // create mock selectors array, follows SelectorUpdate interface\n const selectorUpdates = [\n {\n key: 'testSelector1',\n value: true,\n },\n {\n key: 'testSelector2',\n value: 100,\n },\n ];\n\n it('should assert on each selector value', () => {\n // create variable to hold evaluated result of invoking assertState on mock array\n const returnString = assertState(selectorUpdates);\n // verify that output test contains a string checking that the object's key equals a stringified version of its value on the same object\n expect(returnString).toEqual(\n expect.stringContaining(\n `expect(result.current.${selectorUpdates[0].key}Value).toStrictEqual(${JSON.stringify(\n selectorUpdates[0].value,\n )});`,\n ),\n );\n\n expect(returnString).toEqual(\n expect.stringContaining(\n `expect(result.current.${selectorUpdates[1].key}Value).toStrictEqual(${JSON.stringify(\n selectorUpdates[1].value,\n )});`,\n ),\n );\n });\n});\n\ndescribe('importRecoilFamily', () => {\n const familyObj = {\n familyName: 'string',\n atomName: 'test',\n };\n it('should return a string with an object as its parameter', () => {\n expect(typeof importRecoilFamily(familyObj)).toBe('string');\n });\n});\n\ndescribe('readableHook', () => {\n const keyArray = ['one', 'two', 'chromogen'];\n it('should return a string', () => {\n expect(typeof readableHook(keyArray)).toBe('string');\n });\n});\n\n// describe('writeableHook', () => {\n// const keyArray = ['chromo', 'gen', 'chromogen'];\n// it('should return a string', () => {\n// expect(typeof writeableHook(keyArray)).toBe('string');\n// });\n// });\n\ndescribe('testSelectors', () => {\n it('should scrub special characters from key names', () => {\n // create instance of invoking testSelectors on mock array that follows the Transaction interface\n const returnString = testSelectors([\n {\n state: [\n {\n key: 'atom1',\n value: 1,\n previous: 2,\n updated: true,\n },\n ],\n updates: [\n {\n key: 'selector1',\n value: 3,\n },\n ],\n atomFamilyState: [\n {\n family: 'familyName1',\n key: 'spec!alCh@r',\n value: 4,\n updated: true,\n },\n ],\n familyUpdates: [\n {\n key: 'familyUpdate1',\n value: 5,\n params: 'params',\n },\n ],\n },\n ]);\n // verify that if key property's value is a string with special characters they will be removed\n expect(returnString).toEqual(expect.not.stringContaining('spec!alCh@r'));\n });\n});\n\n// covers branch test percentage in testSetters\ndescribe('testSetters', () => {\n // create mock array with setter object\n const setTransactionsArrayWithSetter = [\n {\n state: [\n {\n key: 'atom1',\n value: 1,\n previous: 0,\n updated: true,\n },\n ],\n setter: {\n key: 'selector1',\n value: 2,\n params: 'spec!alCh@r',\n },\n },\n ];\n // create mock array without setter object\n const setTransactionsArrayWithoutSetter = [\n {\n state: [\n {\n key: 'atom1',\n value: 1,\n previous: 0,\n updated: true,\n },\n ],\n },\n ];\n const truthyReturnString = testSetters(setTransactionsArrayWithSetter);\n const falsyReturnString = testSetters(setTransactionsArrayWithoutSetter);\n\n it('should scrub special characters from params', () => {\n // verify that if params property's value is a string with special characters, they will be removed\n expect(truthyReturnString).toEqual(expect.not.stringContaining('spec!alCh@r'));\n });\n it('should return a string if an array is passed in', () => {\n // verify that a string is returned if provided an array with out a setter object\n expect(typeof falsyReturnString).toBe('string');\n });\n});\n\n// TEST FOR ATOMFAMILYHOOK lines 70-81\n//create mock transactionArray\nxdescribe('atomFamilyHook', () => {\n const transactionArray = [\n {\n atomFamilyState: [\n {\n key: 'spec!alCh@rspec!alCh@r',\n family: 'familyName',\n value: 10,\n updated: true,\n },\n ],\n familyUpdates: [\n {\n key: 'familyUpdate1',\n value: 5,\n params: 'params',\n },\n ],\n },\n ]; // truthy\n\n const transactionArray2 = []; // falsy\n\n const truthyReturnStr = atomFamilyHook(transactionArray);\n const falsyReturnStr = atomFamilyHook(transactionArray2);\n\n it('should scrub special characters', () => {\n expect(truthyReturnStr).toEqual(expect.not.stringContaining('spec!alCh@r'));\n });\n\n it('should return empty string when transactionsArr length is falsy', () => {\n expect(falsyReturnStr).toBe('');\n });\n});\n"
},
{
"path": "package/recoil_generator/__tests__/output.test.js",
"content": "import { setFilter, output } from '../src/output/output.ts';\n\n// testing setFilter function\ndescribe('setFilter', () => {\n it('should remove setter keys from array of selector keys', () => {\n // create mock selectors array\n const selectors = ['one', 'two', 'three'];\n // create mock setters array\n const setters = ['one'];\n // store evaluated result of invoking setFilter on the mock data in an array\n const filtered = setFilter(selectors, setters);\n // verify that the info from setters caused a matching value to be removed from the selectors array ('one')\n expect(filtered).not.toContain('one');\n });\n});\n\ndescribe('output', () => {\n it('should return a string', () => {\n // create mock ledger object \n const mockLedger = {\n atoms: [],\n selectors: [],\n setters: [],\n atomFamilies: [],\n selectorFamilies: [],\n initialRender: [],\n initialRenderFamilies: [],\n transactions: [],\n setTransactions: [],\n };\n // verify that type of mockLedger is a string after output function is invoked on it\n expect(typeof output(mockLedger)).toEqual('string');\n });\n});\n"
},
{
"path": "package/recoil_generator/__tests__/utils.test.js",
"content": "import { debounce, convertFamilyTrackerKeys } from '../src/utils/utils.ts';\n\njest.useFakeTimers();\n\ndescribe('debounce', () => {\n it('should return a new function', () => {\n // declare mock function that returns a string\n const inputFunction = () => 'example';\n // declare a function that stores the evaluated result of invoking debounce on inputFunction with a wait time of 0s\n const outputFunction = debounce(inputFunction, 0);\n // verify that outputFunction is a function\n expect(typeof outputFunction).toBe('function');\n // verify that that the 'debounced function' (outputFunction) is different than the parameter function (inputFunction)\n expect(outputFunction).not.toBe(inputFunction);\n });\n\n it('should limit consecutive calls', () => {\n // increment count to 1 after 100ms\n let count = 0;\n const increment = debounce(() => {\n count += 1;\n }, 100);\n // invoke increment twice\n increment();\n increment();\n // advance timer to 101ms using a mock jest function\n jest.advanceTimersByTime(101);\n // verify that count only incremented once because it was debounced\n expect(count).toEqual(1);\n });\n});\n\n// testing convertFamilyTrackerKeys\ndescribe('convertFamilyTrackerKeys', () => {\n it('should update key names if in map', () => {\n // create mock tracker (object)\n const newTracker = convertFamilyTrackerKeys(\n // first parameter is an object with a property whose value is a string\n { keyOne: 'some value' },\n // second parameter is a new Map \n new Map([['keyOne', 'keyUpdated']]),\n );\n // verify that newTracker object includes property from Map (keyUpdated)\n expect(newTracker).toHaveProperty('keyUpdated');\n // verify that newTracker did not update key name with first parameter\n expect(newTracker).not.toHaveProperty('keyOne');\n });\n\n it('should preserve key names if not in map', () => {\n // create mock tracker (object)\n const newTracker = convertFamilyTrackerKeys(\n { keyOne: 'some value' },\n new Map([['keyTwo', 'keyNotUpdated']]),\n );\n // verify that newTracker's first parameter has been preserved\n expect(newTracker).toHaveProperty('keyOne');\n // verify that newTracker does have keyTwo in first parameter\n expect(newTracker).not.toHaveProperty('keyTwo');\n });\n});\n"
},
{
"path": "package/recoil_generator/src/api/api.ts",
"content": "/* eslint-disable */\nimport type {\n RecoilState,\n RecoilValueReadOnly,\n AtomOptions,\n ReadWriteSelectorOptions,\n ReadOnlySelectorOptions,\n SerializableParam,\n AtomFamilyOptions,\n ReadWriteSelectorFamilyOptions,\n ReadOnlySelectorFamilyOptions,\n} from 'recoil';\nimport type { SelectorConfig, SelectorFamilyConfig } from '../types';\n\nimport {\n selector as recoilSelector,\n atom as recoilAtom,\n atomFamily as recoilAtomFamily,\n selectorFamily as recoilSelectorFamily,\n} from 'recoil';\nimport { wrapGetter, wrapSetter } from './core-utils';\nimport { dummyParam } from '../utils/utils';\nimport { ledger } from '../utils/ledger';\nimport { wrapFamilyGetter, wrapFamilySetter } from './family-utils';\n/* eslint-enable */\n\n/**\n * If transactions.length is greater than 1, the selector is being created after the initial render\n * (i.e. a dynamically generated selector) and will not be tracked. Doing so would break the imports\n * and assertions within the output test file. Same logic is applied to new atoms.\n *\n * If get is undefined, native Async, or Babel-transpiled generator-based async (id'd via RegEx),\n * we don't do any injecting or tracking. Selector just gets created & returned back out.\n *\n * Otherwise, we attempt to wrap get & set methods with custom functions that log the return\n * value on each transaction to the corresponding ledger array.\n *\n * If get returns a promise on page load, we delete selector from the selectors array\n * and do not track it on subsequent calls (using \"returnedPromise\" flag, since we can't \"un-inject\").\n */\n\n/* ----- SELECTOR ----- */\nexport function selector(options: ReadWriteSelectorOptions): RecoilState;\nexport function selector(options: ReadOnlySelectorOptions): RecoilValueReadOnly;\n// Overload function signature\nexport function selector(config: ReadWriteSelectorOptions | ReadOnlySelectorOptions) {\n const { key, get } = config;\n const { transactions, selectors, setters } = ledger;\n if (\n transactions.length > 0\n || !get\n || get.constructor.name === 'AsyncFunction'\n || get.toString().match(/^\\s*return\\s*_.*\\.apply\\(this, arguments\\);$/m)\n ) {\n return recoilSelector(config);\n }\n\n // Wrap get method with tracking logic & update config\n const getter = wrapGetter(key, get);\n const newConfig: SelectorConfig = { key, get: getter };\n\n // Add setter to newConfig only if set method is defined\n if ('set' in config) {\n const setter = wrapSetter(key, config.set);\n newConfig.set = setter;\n setters.push(key);\n }\n\n // Create selector & add to ledger\n const trackedSelector = recoilSelector(newConfig);\n selectors.push(trackedSelector.key);\n return trackedSelector;\n}\n\n/* ----- ATOM ----- */\nexport function atom(config: AtomOptions): RecoilState {\n const { transactions, atoms } = ledger;\n const newAtom = recoilAtom(config);\n\n // Can't use key-only b/c atoms must be passed to getLoadable during transaction iteration\n if (transactions.length === 0) atoms.push(newAtom);\n\n return newAtom;\n}\n\n/* ----- ATOM FAMILY ----- */\nexport function atomFamily(\n config: AtomFamilyOptions,\n): (params: P) => RecoilState {\n const { atomFamilies } = ledger;\n const { key } = config;\n\n // Initialize new family in atomFamilies tracker\n atomFamilies[key] = {};\n\n return (params: P): RecoilState => {\n const strParams = JSON.stringify(params);\n // If the atom has already been created, return from cache, otherwise we'll be creating a new\n // instance of an atom every time we invoke this func (which can lead to infinite re-render loop)\n const cachedAtom = atomFamilies[key][strParams];\n if (cachedAtom !== undefined) return cachedAtom;\n\n const newAtomFamilyMember = recoilAtomFamily(config)(params);\n // Storing every atom created except for dummy atom created by ChromogenObserver's onload useEffect hook\n if (strParams !== dummyParam) atomFamilies[key][strParams] = newAtomFamilyMember;\n return newAtomFamilyMember;\n };\n}\n\n/* ----- SELECTOR FAMILY ----- */\nexport function selectorFamily(\n options: ReadWriteSelectorFamilyOptions,\n): (param: P) => RecoilState;\nexport function selectorFamily(\n options: ReadOnlySelectorFamilyOptions,\n): (param: P) => RecoilValueReadOnly;\n// Overload function signature\nexport function selectorFamily(\n config:\n | ReadWriteSelectorFamilyOptions\n | ReadOnlySelectorFamilyOptions,\n) {\n const { key, get } = config;\n const { transactions, selectorFamilies } = ledger;\n\n // Testing whether returned function from configGet is async\n if (\n !get\n || transactions.length > 0\n || get(dummyParam).constructor.name === 'AsyncFunction'\n || get(dummyParam)\n .toString()\n .match(/^\\s*return\\s*_.*\\.apply\\(this, arguments\\);$/m)\n ) {\n return recoilSelectorFamily(config);\n }\n\n const getter = wrapFamilyGetter(key, get);\n\n const newConfig: SelectorFamilyConfig = { key, get: getter };\n\n let isSettable = false;\n\n if ('set' in config) {\n isSettable = true;\n const setter = wrapFamilySetter(key, config.set);\n newConfig.set = setter;\n }\n\n // Create selector generator & add to selectorFamily for test setup\n const trackedSelectorFamily = recoilSelectorFamily(newConfig);\n selectorFamilies[key] = { trackedSelectorFamily, prevParams: new Set(), isSettable };\n return trackedSelectorFamily;\n}\n"
},
{
"path": "package/recoil_generator/src/api/core-utils.ts",
"content": "/* eslint-disable */\nimport { debounce } from '../utils/utils';\nimport { ledger } from '../utils/ledger';\nimport { recordingState } from '../utils/store';\n/* eslint-enable */\n\nconst { transactions, initialRender, selectors, setTransactions } = ledger;\n\nconst DEBOUNCE_MS = 250;\n\n// Set timeout for selector get calls\nconst debouncedAddToTransactions = debounce(\n (key, value, params) =>\n params !== undefined\n ? transactions[transactions.length - 1].familyUpdates.push({ key, value, params })\n : transactions[transactions.length - 1].updates.push({ key, value }),\n DEBOUNCE_MS,\n);\n\n// the logic for recording selectors only when they fire\n// whenever get method is fired, chromogen records\nconst wrapGetter = (key: string, get: Function) => {\n let returnedPromise: boolean = false;\n\n return (utils: any) => {\n //will return what normal recoil selector will return aka regular selector method\n const value = get(utils);\n\n //Checking whether value is async\n // Only capture selector data if currently recording (if record button has been hit)\n if (utils.get(recordingState)) {\n //making sure no transactions have been fired\n if (transactions.length === 0) {\n // Promise-validation is expensive, so we only do it once, on initial load\n if (typeof value === 'object' && value !== null && value.constructor.name === 'Promise') {\n ledger.selectors = selectors.filter((current) => current !== key);\n returnedPromise = true;\n } else {\n initialRender.push({ key, value });\n }\n } else if (!returnedPromise) {\n // Debouncing (throttling) allows TransactionObserver to push to array first\n // Length must be computed within debounce to correctly find last transaction\n // only capture meaningful function calls\n // when called, timer starts; if x amount of time passes and function isnt called again, it fires; if called, resets timer\n debouncedAddToTransactions(key, value);\n }\n }\n\n return value;\n };\n};\n\nconst wrapSetter = (key: string, set: Function) => (utils: any, newValue: any) => {\n if (utils.get(recordingState) && setTransactions.length > 0) {\n // allow TransactionObserver to push to array first\n // Length must be computed after timeout to correctly find last transaction\n // this is here b/c of async stuff with useRecoilTransactionObserver\n setTimeout(() => {\n setTransactions[setTransactions.length - 1].setter = { key, newValue };\n }, 0);\n }\n // returns what regular selector would return (?)\n return set(utils, newValue);\n};\n\nexport {debouncedAddToTransactions, wrapGetter, wrapSetter};"
},
{
"path": "package/recoil_generator/src/api/family-utils.ts",
"content": "/* eslint-disable */\nimport type { SerializableParam } from 'recoil';\n\nimport { ledger } from '../utils/ledger';\nimport { dummyParam } from '../utils/utils';\nimport { recordingState } from '../utils/store';\nimport { debouncedAddToTransactions } from './core-utils';\n/* eslint-enable */\n\nconst { transactions, selectorFamilies, initialRenderFamilies, setTransactions } = ledger;\n\nexport const wrapFamilyGetter = (key: string, configGet: Function) => {\n let returnedPromise = false;\n\n return (params: SerializableParam) => (utils: any) => {\n const { get } = utils;\n const value = configGet(params)(utils);\n // Only capture selector data if currently recording\n\n if (get(recordingState)) {\n if (transactions.length === 0) {\n // Promise-validation is expensive, so we only do it once, on initial load\n if (\n typeof value === 'object'\n && value !== null\n && Object.prototype.toString.call(value) === '[object Promise]'\n ) {\n delete selectorFamilies[key];\n returnedPromise = true;\n } else {\n initialRenderFamilies.push({ key, params, value });\n }\n } else if (!returnedPromise) {\n // Track every new params\n if (!selectorFamilies[key].prevParams.has(params)) {\n selectorFamilies[key].prevParams.add(params);\n }\n // Debouncing allows TransactionObserver to push to array first\n // Length must be computed within debounce to correctly find last transaction\n // Excluding dummy selector created by ChromogenObserver's onload useEffect hook\n if (params !== dummyParam) debouncedAddToTransactions(key, value, params);\n }\n }\n\n // Return value from original get method\n return value;\n };\n};\n\nexport const wrapFamilySetter = (key: string, set: Function) => (params: SerializableParam) => (\n utils: any,\n newValue: any,\n) => {\n if (utils.get(recordingState) && setTransactions.length > 0) {\n // allow TransactionObserver to push to array first\n // Length must be computed after timeout to correctly find last transaction\n setTimeout(() => {\n setTransactions[setTransactions.length - 1].setter = { key, params, newValue };\n }, 0);\n }\n return set(params)(utils, newValue);\n};\n"
},
{
"path": "package/recoil_generator/src/component/ChromogenObserver.tsx",
"content": "/* eslint-disable */\nimport type { Snapshot } from 'recoil';\nimport type { AtomFamilyState } from '../types';\n\nimport React, { useState, useEffect } from 'react';\nimport { useRecoilState, useRecoilTransactionObserver_UNSTABLE } from 'recoil';\nimport { dummyParam } from '../utils/utils';\nimport { recordingState } from '../utils/store';\nimport { ledger } from '../utils/ledger';\nimport { styles, generateFile, generateTests } from './component-utils';\n/* eslint-enable */\n\nexport const ChromogenObserver: React.FC<{ store?: Array | object }> = ({ store }) => {\n // Initializing as undefined over null to match React typing for AnchorHTML attributes\n const [file, setFile] = useState(undefined);\n const [storeMap, setStoreMap] = useState>(new Map());\n const [recording, setRecording] = useRecoilState(recordingState);\n const [devtool, setDevtool] = useState(false);\n const [, setEditFile] = useState(undefined);\n\n // DevTool message handling\n const receiveMessage = (message: any) => {\n switch (message.data.action) {\n case 'connectChromogen':\n setDevtool(true);\n window.postMessage({ action: 'moduleConnected' }, '*');\n break;\n case 'downloadFile':\n generateFile(setFile, storeMap);\n break;\n case 'editFile':\n const array = generateFile(setEditFile, storeMap);\n window.postMessage({ action: 'editFileReceived', data: array }, '*');\n break;\n case 'toggleRecord':\n setRecording(!recording);\n window.postMessage({ action: 'setStatus' }, '*');\n break;\n default:\n // Do nothing\n }\n };\n\n // Add/remove DevTool event listeners\n useEffect(() => {\n window.addEventListener('message', receiveMessage);\n\n return () => window.removeEventListener('message', receiveMessage);\n });\n\n // Auto-click download link when a new file is generated (via button click)\n useEffect(() => document.getElementById('chromogen-download')!.click(), [file]);\n // ! to get around strict null check in tsconfig\n\n // Update storeMap with src variable names if store prop passed\n useEffect(() => {\n if (store !== undefined) {\n const storeArr = Array.isArray(store) ? store : [store];\n const newStore: Map = new Map();\n\n storeArr.forEach((storeModule) => {\n Object.entries(storeModule).forEach(([variable, imported]: [any, any]) => {\n let key;\n /** Relevant imports will be either an object (for vanilla atoms or selectors)\n * or functions (for atom or selector families). If we are examining a family function,\n * we will need to invoke it to create an atom/selector in order to pull the\n * original family key out from the generated atom or selector's individual key.\n * */\n if (typeof imported === 'function') {\n // Extended atom fam key will follow format of `[key]__\"chromogenDummyParam\"__withFallback`\n // Extended selector fam key will follow format of `[key]__selectorFamily/\"chromogenDummyParam\"/1`\n const extendedKey = imported(dummyParam).key;\n key = extendedKey.includes('selectorFamily')\n ? extendedKey.substring(0, extendedKey.indexOf('selectorFamily') - 2)\n : extendedKey.substring(0, extendedKey.indexOf(`\"${dummyParam}\"`) - 2);\n } else {\n key = imported.key;\n }\n newStore.set(key, variable);\n });\n });\n setStoreMap(newStore);\n }\n }, []);\n\n useRecoilTransactionObserver_UNSTABLE(\n ({ previousSnapshot, snapshot }: { previousSnapshot: Snapshot; snapshot: Snapshot }): void => {\n // Map current snapshot to array of atom states\n // Can't directly check recording hook b/c TransactionObserver runs before state update\n if (snapshot.getLoadable(recordingState).contents) {\n const { transactions, setTransactions, atoms, atomFamilies } = ledger;\n\n const state = atoms.map((item) => {\n const { key } = item;\n const value = snapshot.getLoadable(item).contents;\n const previous = previousSnapshot.getLoadable(item).contents;\n const updated = value !== previous;\n return { key, value, previous, updated };\n });\n\n const atomFamilyState: AtomFamilyState[] = [];\n\n /* eslint-disable */\n // TODO: refactor out of for-in syntax b/c for-in tracks up the prototype chain x_x\n for (const family in atomFamilies) {\n const familyMembers = atomFamilies[family];\n for (const member in familyMembers) {\n const memberRecoilState = familyMembers[member];\n let { key } = memberRecoilState;\n /* Key will be auto-generated by recoil in the format of\n * [atomFamilyName] + \"__\" + [params] + \"__withFallback\".\n * Removing the \"__withFallback\" suffix to enhance readability\n */\n key = key.substring(0, key.length - 14);\n const value = snapshot.getLoadable(memberRecoilState).contents;\n const previous = previousSnapshot.getLoadable(memberRecoilState).contents;\n const updated = value !== previous;\n // Don't track dummy atom generated by onload useEffect hook\n if (!key.includes(dummyParam)) atomFamilyState.push({ family, key, value, updated });\n }\n }\n /* eslint-enable */\n\n transactions.push({ state, updates: [], atomFamilyState, familyUpdates: [] });\n setTransactions.push({ state, setter: null });\n }\n },\n );\n\n const [pauseColor, setPauseColor] = useState('#90d1f0');\n const pauseBorderStyle = {\n borderColor: `${pauseColor}`,\n };\n\n const [playColor, setPlayColor] = useState('transparent transparent transparent #90d1f0')\n const playBorderStyle = {\n borderColor: `${playColor}`,\n };\n\n return (\n <>\n {\n // Render button div only if DevTool not connected\n !devtool && (\n \n
\n
{\n setRecording(!recording);\n // if (!recording) return true;\n // return false;\n }}\n onMouseEnter={() => recording ? setPauseColor('#f6f071') : setPlayColor('transparent transparent transparent #f6f071')}\n onMouseLeave={() => recording ? setPauseColor('#90d1f0') : setPlayColor('transparent transparent transparent #90d1f0')}\n >{recording ?\n
\n :
\n } \n \n generateFile(setFile, storeMap)}\n onMouseEnter={() => document.getElementById(\"chromogen-generate-file\")!.style.color = '#f6f071'}\n onMouseLeave={() => document.getElementById(\"chromogen-generate-file\")!.style.color = '#90d1f0'}\n >{'Download'} \n \n { navigator.clipboard.writeText(generateTests(storeMap)[0]) }}\n onMouseEnter={() => document.getElementById(\"chromogen-copy-test\")!.style.color = '#f6f071'}\n onMouseLeave={() => document.getElementById(\"chromogen-copy-test\")!.style.color = '#90d1f0'}\n >{'Copy To Clipboard'} \n \n \n
\n Download Test\n \n \n );\n};\n"
},
{
"path": "package/recoil_generator/src/component/component-utils.ts",
"content": "/* eslint-disable */\nimport type { CSSProperties } from 'react';\nimport type { SerializableParam } from 'recoil';\nimport type { Ledger } from '../types';\n\nimport { ledger } from '../utils/ledger';\nimport { convertFamilyTrackerKeys } from '../utils/utils';\nimport { output } from '../output/output';\n/* eslint-enable */\n\nconst buttonStyle: CSSProperties = {\n display: 'inline-block',\n margin: '8px',\n marginLeft: '13px',\n padding: '0px',\n height: '25px',\n width: '65px',\n borderRadius: '4px',\n justifyContent: 'space-evenly',\n border: '1px',\n cursor: 'pointer',\n color: '#90d1f0',\n fontSize: '10px',\n};\n\nconst divStyle: CSSProperties = {\n display: 'flex',\n position: 'absolute',\n bottom: '100px',\n left: '100px',\n backgroundColor: '#aaa',\n borderRadius: '4px',\n margin: 0,\n padding: 0,\n zIndex: 999999,\n};\n\nconst playStyle: CSSProperties = {\n boxSizing: 'border-box',\n marginLeft: '25px',\n borderStyle: 'solid',\n borderWidth: '7px 0px 7px 14px',\n};\n\nconst pauseStyle: CSSProperties = {\n width: '14px',\n height: '14px',\n borderWidth: '0px 0px 0px 10px',\n borderStyle: 'double',\n marginLeft: '27px',\n};\n\nexport const styles = { buttonStyle, divStyle, playStyle, pauseStyle };\n\n/**\n * onclick function that generates test file & sets download URL\n *\n * Key-to-Variable name mapping is applied if storeMap has any contents\n * (meaning atom / selector nodes were passed as props)\n * Applying only at point-of-download keeps performance cost low for users who\n * don't need to pass nodes while creating a moderate performance hit for others\n * only while downloading, never while interacting with their app.\n */\nexport const generateTests = (storeMap: Map): string[] => {\n const {\n atoms,\n selectors,\n setters,\n atomFamilies,\n selectorFamilies,\n initialRender,\n initialRenderFamilies,\n transactions,\n setTransactions,\n } = ledger;\n\n const finalLedger: Ledger =\n storeMap.size > 0\n ? {\n atoms: atoms.map(({ key }) => storeMap.get(key) || key),\n selectors: selectors.map((key) => storeMap.get(key) || key),\n atomFamilies: convertFamilyTrackerKeys(atomFamilies, storeMap),\n selectorFamilies: convertFamilyTrackerKeys(selectorFamilies, storeMap),\n setters: setters.map((key) => storeMap.get(key) || key),\n initialRender: initialRender.map(({ key, value }) => {\n const newKey = storeMap.get(key) || key;\n return { key: newKey, value };\n }),\n initialRenderFamilies: initialRenderFamilies.map(({ key, value, params }) => {\n const newKey = storeMap.get(key) || key;\n return { key: newKey, value, params };\n }),\n transactions: transactions.map(({ state, updates, atomFamilyState, familyUpdates }) => {\n const newState = state.map((eachAtom) => {\n const key = storeMap.get(eachAtom.key) || eachAtom.key;\n return { ...eachAtom, key };\n });\n const newUpdates = updates.map((eachSelector) => {\n const key = storeMap.get(eachSelector.key) || eachSelector.key;\n const { value } = eachSelector;\n return { key, value };\n });\n const newAtomFamilyState = atomFamilyState.map((eachFamAtom) => {\n const family = storeMap.get(eachFamAtom.family) || eachFamAtom.family;\n const oldKey = eachFamAtom.key;\n const keySuffix = oldKey.substring(eachFamAtom.family.length);\n const key = family + keySuffix;\n return { ...eachFamAtom, family, key };\n });\n const newFamilyUpdates = familyUpdates.map((eachFamSelector) => {\n const key = storeMap.get(eachFamSelector.key) || eachFamSelector.key;\n return { ...eachFamSelector, key };\n });\n return {\n state: newState,\n updates: newUpdates,\n atomFamilyState: newAtomFamilyState,\n familyUpdates: newFamilyUpdates,\n };\n }),\n setTransactions: setTransactions.map(({ state, setter }) => {\n const newState = state.map((eachAtom) => {\n const key = storeMap.get(eachAtom.key) || eachAtom.key;\n return { ...eachAtom, key };\n });\n const newSetter = setter;\n if (newSetter) {\n const { key } = newSetter;\n newSetter.key = storeMap.get(key) || key;\n }\n return { state: newState, setter: newSetter };\n }),\n }\n : { ...ledger, atoms: atoms.map(({ key }) => key) };\n\n //return setFile(URL.createObjectURL(new Blob([output(finalLedger)])));\n return [output(finalLedger)];\n};\n\nexport const generateFile = (setFile: Function, storeMap: Map): string[] => {\n const tests = generateTests(storeMap);\n const blob = new Blob(tests);\n setFile(URL.createObjectURL(blob));\n return tests;\n};\n"
},
{
"path": "package/recoil_generator/src/output/output-utils.ts",
"content": "/* eslint-disable */\nimport type {\n SelectorUpdate,\n Transaction,\n AtomUpdate,\n SetTransaction,\n AtomFamilies,\n SelectorFamilies,\n SelectorFamilyUpdate,\n SelectorFamilyMembers,\n} from '../types';\nimport { SerializableParam } from 'recoil';\n/* eslint-enable */\n\n/* ----- HELPER FUNCTIONS ----- */\n\nexport function initializeAtoms(state: AtomUpdate[], current: boolean): string {\n return state.reduce(\n (initializers, { key, value, previous }) =>\n `${initializers}\\t\\t\\tresult.current.set${key}(${JSON.stringify(\n current ? value : previous,\n )});\\n\\n`,\n '',\n );\n}\n//chromogen only captures selectors that fire; this pulls value from latest firing\nexport function assertState(updates: SelectorUpdate[]): string {\n return updates.reduce(\n (assertions, { key, value }) =>\n `${assertions}\\t\\texpect(result.current.${key}Value).toStrictEqual(${JSON.stringify(\n value,\n )});\\n\\n`,\n '',\n );\n}\n\n/* ----- SETUP FUNCTIONS ----- */\n\nexport function importRecoilState(keyArray: string[]): string {\n return keyArray.reduce((fullStr, key) => `${fullStr}\\t${key},\\n`, '');\n}\n\nexport function importRecoilFamily(\n familyObj: AtomFamilies | SelectorFamilies,\n): string {\n return Object.keys(familyObj).reduce(\n (importStr, familyName) => `${importStr}\\t${familyName},\\n`,\n '',\n );\n}\n\nexport function writeableHook(keyArray: string[]): string {\n return keyArray.reduce(\n (fullStr, key) => `${fullStr}\\tconst [${key}Value, set${key}] = useRecoilState(${key});\\n`,\n '',\n );\n}\n\nexport function readableHook(keyArray: string[]): string {\n return keyArray.reduce(\n (fullStr, key) => `${fullStr}\\tconst ${key}Value = useRecoilValue(${key});\\n`,\n '',\n );\n}\n\nexport function atomFamilyHook(transactionArray: Transaction[]): string {\n const len = transactionArray.length;\n return len\n ? transactionArray[len - 1].atomFamilyState.reduce((str, atomState) => {\n const { family, key } = atomState;\n /* Removing all special characters from string: if the params are passed\n * in as a string, then we need to remove any special characters so they don't\n * error out variable name generation, also recoil will add escaped quotes\n * to the key name if it's a string, so will need to remove those by default\n */\n const params = key.substring(family.length + 2);\n const scrubbedParams = params.replace(/[^\\w\\s]/gi, '');\n\n const parsedParams = JSON.parse(params);\n\n return `${str}\\tconst [${`${family}__${scrubbedParams}__Value`}, ${`set${family}__${scrubbedParams}`}] = useRecoilState(${family}(${\n typeof parsedParams === 'string' ? `${params}` : `${parsedParams}`\n }));\\n`;\n }, '')\n : '';\n}\n\nexport function selectorFamilyHook(\n selectorFamilyTracker: SelectorFamilies,\n isSettable: boolean,\n): string {\n return Object.entries(selectorFamilyTracker)\n .filter((familyArr) => familyArr[1].isSettable === isSettable)\n .reduce((str: string, familyArr: [string, { prevParams: Set }]): string => {\n const [familyName, { prevParams }] = familyArr;\n // converting prevParams from set to array\n return `${str}${[...prevParams].reduce((innerStr: string, param: any) => {\n let scrubbedParams;\n if (typeof param === 'string') {\n scrubbedParams = param.replace(/[^\\w\\s]/gi, '');\n }\n\n return isSettable\n ? `${innerStr}\\tconst [${`${familyName}__${\n scrubbedParams !== undefined ? scrubbedParams : param\n }__Value`}, ${`set${familyName}__${\n scrubbedParams !== undefined ? scrubbedParams : param\n }`}] = useRecoilState(${familyName}(${\n typeof param === 'string' ? `\"${param}\"` : `${JSON.parse(param)}`\n }));\\n`\n : `${innerStr}\\tconst ${`${familyName}__${\n scrubbedParams !== undefined ? scrubbedParams : param\n }__Value`} = useRecoilValue(${familyName}(${\n typeof param === 'string' ? `\"${param}\"` : `${JSON.parse(param)}`\n }));\\n`;\n }, '')}`;\n }, '');\n}\n\nexport function returnWriteable(keyArray: string[]): string {\n return keyArray.reduce((fullStr, key) => `${fullStr}\\t\\t${key}Value,\\n\\t\\tset${key},\\n`, '');\n}\n\nexport function returnReadable(keyArray: string[]): string {\n return keyArray.reduce((fullStr, key) => `${fullStr}\\t\\t${key}Value,\\n`, '');\n}\n\nexport function returnAtomFamily(transactionArray: Transaction[]): string {\n const len = transactionArray.length;\n return len\n ? transactionArray[len - 1].atomFamilyState.reduce((value, atomState) => {\n const { family, key } = atomState;\n // key will be \"[familyname]__[params]\"\n const params = key.substring(family.length + 2);\n const scrubbedParams = params.replace(/[^\\w\\s]/gi, '');\n return `${value}\\t\\t${`${family}__${scrubbedParams}__Value`},\n \\t\\t${`set${family}__${scrubbedParams}`},\\n`;\n }, '')\n : '';\n}\n\nexport function returnSelectorFamily(\n selectorFamilyTracker: SelectorFamilies,\n isSettable: boolean,\n) {\n return Object.entries(selectorFamilyTracker)\n .filter((familyArr) => familyArr[1].isSettable === isSettable)\n .reduce(\n (str: string, familyArr: [string, SelectorFamilyMembers]): string => {\n const [familyName, { prevParams }] = familyArr;\n if (isSettable) {\n return `${str}${[...prevParams].reduce((innerStr: string, param: any) => {\n let scrubbedParams;\n if (typeof param === 'string') {\n scrubbedParams = param.replace(/[^\\w\\s]/gi, '');\n }\n\n return `${innerStr}\\t\\t${`${familyName}__${\n scrubbedParams !== undefined ? scrubbedParams : param\n }__Value`},\n ${`set${familyName}__${scrubbedParams !== undefined ? scrubbedParams : param}`},\\n`;\n }, '')}`;\n }\n return `${str}${[...prevParams].reduce((innerStr: string, param: any) => {\n let scrubbedParams;\n if (typeof param === 'string') {\n scrubbedParams = param.replace(/[^\\w\\s]/gi, '');\n }\n return `${innerStr}\\t\\t${`${familyName}__${\n scrubbedParams !== undefined ? scrubbedParams : param\n }__Value`},\\n`;\n }, '')}`;\n },\n '',\n );\n}\n\n/* ----- INITIAL RENDER ----- */\n\nexport function initializeSelectors(initialRender: SelectorUpdate[]): string {\n return initialRender.reduce(\n (fullStr, { key, value }) => `${fullStr}\\tit('${key} should initialize correctly', () => {\n\\t\\texpect(result.current.${key}Value).toStrictEqual(${JSON.stringify(value)});\n\\t});\\n\\n`,\n '',\n );\n}\n\nexport function initializeSelectorFamilies(initialRenderFamilies: SelectorFamilyUpdate[]) {\n return initialRenderFamilies.reduce((initialTests, { key, params, value }) => {\n let scrubbedParams;\n if (typeof params === 'string') {\n scrubbedParams = params.replace(/[^\\w\\s]/gi, '');\n }\n\n return `${initialTests}\\tit('${key}__${\n scrubbedParams !== undefined ? scrubbedParams : JSON.stringify(params)\n } should initialize correctly', () => {\n \\t\\texpect(result.current.${key}__${\n scrubbedParams !== undefined ? scrubbedParams : JSON.stringify(params)\n }__Value).toStrictEqual(${JSON.stringify(value)});\n \\t});\\n`;\n }, '');\n}\n\n/* ----- SELECTORS TEST ----- */\n//checking get methods\nexport function testSelectors(transactionArray: Transaction[]): string {\n return transactionArray.reduce(\n (selectorTests, { state, updates, atomFamilyState, familyUpdates }) => {\n //checking to make sure chromogen doesn't look at atoms that haven't changed state\n const allUpdatedAtoms = [\n ...state.filter(({ updated }) => updated),\n ...atomFamilyState.filter(({ updated }) => updated),\n ];\n const allUpdatedSelectors: any[] = [...updates, ...familyUpdates];\n const atomLen = allUpdatedAtoms.length;\n const selectorLen = allUpdatedSelectors.length;\n\n return atomLen !== 0 && selectorLen !== 0\n ? `${selectorTests}\\tit('${\n selectorLen > 1\n ? allUpdatedSelectors.reduce((list, selectorState, i) => {\n const { key } = selectorState;\n const isLastElement = i === selectorLen - 1;\n // if params exist, then we are looking at a selectorFamily\n if ('params' in selectorState) {\n let scrubbedParams;\n if (typeof selectorState.params === 'string') {\n scrubbedParams = selectorState.params.replace(/[^\\w\\s]/gi, '');\n }\n\n return `${list}${isLastElement ? 'and ' : ''}${key}__${\n scrubbedParams !== undefined ? scrubbedParams : selectorState.params\n }${isLastElement ? '' : ', '}`;\n }\n return `${list}${isLastElement ? 'and ' : ''}${key}${isLastElement ? '' : ', '}`;\n }, '')\n : `${\n allUpdatedSelectors[0].params !== undefined\n ? `${allUpdatedSelectors[0].key}__${\n typeof allUpdatedSelectors[0].params === 'string'\n ? allUpdatedSelectors[0].params.replace(/[^\\w\\s]/gi, '')\n : allUpdatedSelectors[0].params\n }`\n : allUpdatedSelectors[0].key\n }`\n } should properly derive state when ${\n atomLen > 1\n ? allUpdatedAtoms.reduce((list, { key }, i) => {\n const isLastElement = i === atomLen - 1;\n const scrubbedKey = key.replace(/[^\\w\\s]/gi, '');\n return `${list}${isLastElement ? 'and ' : ''}${scrubbedKey}${\n isLastElement ? ' update' : ', '\n }`;\n }, '')\n : `${allUpdatedAtoms[0].key.replace(/[^\\w\\s]/gi, '')} updates`\n }', () => {\n\\t\\tconst { result } = renderRecoilHook(useStoreHook);\n\n\\t\\tact(() => {\n ${state.reduce(\n (initializers, { key, value }) =>\n `${initializers}\\t\\t\\tresult.current.set${key}(${JSON.stringify(value)});\\n\\n`,\n '',\n )}\n ${atomFamilyState.reduce((initializers, { key, value }) => {\n const scrubbedKey = key.replace(/[^\\w\\s]/gi, '');\n return `${initializers}\\t\\t\\tresult.current.set${scrubbedKey}(${JSON.stringify(value)});\\n\\n`;\n }, '')}\n\\t\\t});\n${\n selectorLen !== 0\n ? allUpdatedSelectors.reduce((assertions, selectorState) => {\n const { key, value } = selectorState;\n\n let scrubbedParams;\n if (typeof selectorState.params === 'string') {\n scrubbedParams = selectorState.params.replace(/[^\\w\\s]/gi, '');\n }\n\n if (selectorState.params !== undefined)\n return `${assertions}\\t\\texpect(result.current.${key}__${\n scrubbedParams !== undefined ? scrubbedParams : selectorState.params\n }__Value).toStrictEqual(${JSON.stringify(value)});\\n\\n`;\n return `${assertions}\\t\\texpect(result.current.${key}Value).toStrictEqual(${JSON.stringify(\n value,\n )});\\n\\n`;\n }, '')\n : ''\n}\\t});\\n\\n`\n : selectorTests;\n },\n '',\n );\n}\n\n/* ----- SETTERS TEST ----- */\n\nexport function testSetters(setTransactionArray: SetTransaction[]): string {\n return setTransactionArray.reduce((setterTests, { state, setter }) => {\n const updatedAtoms = state.filter(({ updated }) => updated);\n\n if (setter) {\n const { params } = setter;\n\n let scrubbedParams;\n if (typeof params === 'string') {\n scrubbedParams = params.replace(/[^\\w\\s]/gi, '');\n }\n\n return params !== undefined\n ? `${setterTests}\\tit('${setter.key}__${\n scrubbedParams !== undefined ? scrubbedParams : JSON.stringify(params)\n } should properly set state', () => {\n \\t\\tconst { result } = renderRecoilHook(useStoreHook);\n \n \\t\\tact(() => {\n ${initializeAtoms(state, false)}\\t\\t});\n \n \\t\\tact(() => { \n \\t\\t\\tresult.current.set${setter.key}__${\n scrubbedParams !== undefined ? scrubbedParams : JSON.stringify(params)\n }(${JSON.stringify(setter.newValue)});\n \\t\\t});\n \n ${assertState(updatedAtoms)}\\t});\\n\\n`\n : `${setterTests}\\tit('${setter.key} should properly set state', () => {\n \\t\\tconst { result } = renderRecoilHook(useStoreHook);\n \n \\t\\tact(() => {\n ${initializeAtoms(state, false)}\\t\\t});\n \n \\t\\tact(() => { \n \\t\\t\\tresult.current.set${setter.key}(${JSON.stringify(setter.newValue)});\n \\t\\t});\n \n ${assertState(updatedAtoms)}\\t});\\n\\n`;\n }\n return setterTests;\n }, '');\n}\n"
},
{
"path": "package/recoil_generator/src/output/output.ts",
"content": "/* eslint-disable */\nimport type { Ledger } from '../types';\nimport type { SerializableParam } from 'recoil';\nimport {\n importRecoilState,\n writeableHook,\n readableHook,\n returnWriteable,\n returnReadable,\n testSelectors,\n testSetters,\n importRecoilFamily,\n atomFamilyHook,\n selectorFamilyHook,\n returnSelectorFamily,\n initializeSelectors,\n returnAtomFamily,\n} from './output-utils';\n\n/* eslint-enable */\n\n/* ----- HELPERS ----- */\nexport const setFilter = (selectors: string[], setters: string[]): string[] =>\n selectors.filter((key) => !setters.includes(key));\n\n/* ----- MAIN ----- */\nexport const output = ({\n atoms,\n selectors,\n setters,\n atomFamilies,\n selectorFamilies,\n initialRender,\n transactions,\n setTransactions,\n}: Ledger): string =>\n `import { renderRecoilHook, act } from 'react-recoil-hooks-testing-library';\nimport { useRecoilValue, useRecoilState } from 'recoil';\nimport {\n${\n importRecoilState(selectors)\n + importRecoilFamily(selectorFamilies)\n}\n} from '';\nimport { \n${\n importRecoilState(atoms)\n + importRecoilFamily(atomFamilies)\n}\n} from '';\n\n// Suppress 'Batcher' warnings from React / Recoil conflict\nconsole.error = jest.fn();\n\n// Hook to return atom/selector values and/or modifiers for react-recoil-hooks-testing-library\nconst useStoreHook = () => {\n // atoms\n${writeableHook(atoms)}\n // writeable selectors\n${writeableHook(setters)}\n // read-only selectors\n${readableHook(setFilter(selectors, setters))}\n // atom families\n${atomFamilyHook(transactions)}\n // writeable selector families\n${selectorFamilyHook(selectorFamilies, true)}\n // read-only selector families\n${selectorFamilyHook(selectorFamilies, false)}\n\n\n\n return {\n${\n returnWriteable(atoms)\n + returnWriteable(setters)\n + returnReadable(setFilter(selectors, setters))\n + returnAtomFamily(transactions)\n + returnSelectorFamily(selectorFamilies, true)\n + returnSelectorFamily(selectorFamilies, false)\n}\\t};\n};\n\ndescribe('INITIAL RENDER', () => { \n const { result } = renderRecoilHook(useStoreHook); \n \n${initializeSelectors(initialRender)}\n});\n\ndescribe('SELECTORS', () => {\n${testSelectors(transactions)}});\n\ndescribe('SETTERS', () => {\n${testSetters(setTransactions)}});`;\n"
},
{
"path": "package/recoil_generator/src/types.ts",
"content": "/* eslint-disable */\nimport type {\n RecoilState,\n RecoilValue,\n DefaultValue,\n SerializableParam,\n RecoilValueReadOnly,\n} from 'recoil';\n/* eslint-enable */\n\n// ----- INITIALIZING NON-IMPORTABLE RECOIL TYPES -----\ntype ResetRecoilState = (recoilVal: RecoilState) => void;\n\ntype GetRecoilValue = (recoilVal: RecoilValue) => T;\n\ntype SetRecoilState = (\n recoilVal: RecoilState,\n newVal: T | DefaultValue | ((prevValue: T) => T | DefaultValue),\n) => void;\n\n// ----- EXPORTING TYPES TO BE USED IN SRC/.TSX FILES -----\nexport interface SetterUpdate {\n key: string;\n newValue: any;\n params?: SerializableParam;\n}\n\nexport interface SelectorUpdate {\n key: string;\n value: any;\n}\n\nexport interface SelectorFamilyUpdate extends SelectorUpdate {\n params: SerializableParam;\n}\n\nexport interface AtomUpdate extends SelectorUpdate {\n previous: any;\n updated: boolean;\n}\n\nexport interface AtomFamilyState {\n family: string;\n key: string;\n value: any;\n updated: boolean;\n}\n\nexport interface Transaction {\n state: AtomUpdate[];\n updates: SelectorUpdate[];\n atomFamilyState: AtomFamilyState[];\n familyUpdates: SelectorFamilyUpdate[];\n}\n\nexport interface SetTransaction {\n state: AtomUpdate[];\n setter: null | SetterUpdate;\n}\n\nexport interface AtomFamilyMembers {\n [atomName: string]: RecoilState;\n}\nexport interface AtomFamilies {\n [familyName: string]: AtomFamilyMembers;\n}\n\nexport interface SelectorFamilyConfig {\n key: string;\n get: (param: P) => (opts: { get: GetRecoilValue }) => Promise | RecoilValue | T;\n set?: (\n param: P,\n ) => (\n opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },\n newValue: T | DefaultValue,\n ) => void;\n dangerouslyAllowMutability?: boolean;\n}\nexport interface SelectorFamilyMembers {\n trackedSelectorFamily: (param: P) => RecoilState | RecoilValueReadOnly;\n isSettable: boolean;\n prevParams: Set;\n}\nexport interface SelectorFamilies {\n [familyName: string]: SelectorFamilyMembers;\n}\n\n// atoms should take RecoilState[] | string[]\nexport interface Ledger {\n atoms: T[];\n selectors: string[];\n atomFamilies: AtomFamilies;\n selectorFamilies: SelectorFamilies;\n setters: string[];\n initialRender: SelectorUpdate[];\n initialRenderFamilies: SelectorFamilyUpdate[];\n transactions: Transaction[];\n setTransactions: SetTransaction[];\n}\n\nexport interface SelectorConfig {\n key: string;\n get: (opts: { get: GetRecoilValue }) => T | Promise | RecoilValue;\n set?: (\n opts: { get: GetRecoilValue; set: SetRecoilState; reset: ResetRecoilState },\n newValue: T | DefaultValue,\n ) => void;\n dangerouslyAllowMutability?: boolean;\n}\n"
},
{
"path": "package/recoil_generator/src/utils/ledger.ts",
"content": "/* eslint-disable */\nimport type { Ledger } from '../types';\nimport { RecoilState, SerializableParam } from 'recoil';\n/* eslint-enable */\n\nexport const ledger: Ledger, any, SerializableParam> = {\n atoms: [],\n selectors: [], //get\n atomFamilies: {},\n selectorFamilies: {},\n setters: [], //set\n initialRender: [],\n initialRenderFamilies: [],\n transactions: [],//get\n setTransactions: [],//set\n};\n"
},
{
"path": "package/recoil_generator/src/utils/store.ts",
"content": "/* eslint-disable */\nimport type { RecoilState } from 'recoil';\nimport { atom } from 'recoil';\n/* eslint-enable */\n\n// Recording toggle\nexport const recordingState: RecoilState = atom({\n key: 'recordingState',\n default: true,\n});\n"
},
{
"path": "package/recoil_generator/src/utils/utils.ts",
"content": "/* eslint-disable */\nimport type { SerializableParam } from 'recoil';\nimport type { AtomFamilies, SelectorFamilies } from '../types';\n/* eslint-enable */\n\n// Debouncing for selector transaction updates\nexport const debounce = (func: (...args: any[]) => any, wait: number) => {\n let timeout: any;\n\n return (...args: any[]) => {\n const timeoutCallback = () => {\n timeout = null;\n func(...args);\n };\n\n clearTimeout(timeout);\n timeout = setTimeout(timeoutCallback, wait);\n };\n};\n\n// Used in key-to-variable name mapping in generateFile\nexport function convertFamilyTrackerKeys(\n familyTracker: AtomFamilies,\n storeMap: Map,\n): AtomFamilies;\nexport function convertFamilyTrackerKeys(\n familyTracker: SelectorFamilies,\n storeMap: Map,\n): SelectorFamilies;\n\nexport function convertFamilyTrackerKeys(\n familyTracker: AtomFamilies | SelectorFamilies,\n storeMap: Map,\n) {\n const refactoredTracker: AtomFamilies | SelectorFamilies = {};\n\n Object.keys(familyTracker).forEach((key) => {\n const newKey: string = storeMap.get(key) || key;\n refactoredTracker[newKey] = familyTracker[key];\n });\n\n return refactoredTracker;\n}\n\n// Dummy param for use in various checks (most notably the key-to-variable name mapping)\nexport const dummyParam = 'chromogenDummyParam';\n"
},
{
"path": "package/tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"ES6\" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,\n \"module\": \"commonjs\" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,\n \"jsx\": \"react\" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,\n \"declaration\": true /* Generates corresponding '.d.ts' file. */,\n \"outDir\": \"./build\" /* Redirect output structure to the directory. */,\n \"rootDir\": \".\" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,\n \"removeComments\": true /* Do not emit comments to output. */,\n \"strict\": true /* Enable all strict type-checking options. */,\n \"noImplicitAny\": false /* Raise error on expressions and declarations with an implied 'any' type. */,\n \"strictNullChecks\": true /* Enable strict null checks. */,\n \"strictFunctionTypes\": true /* Enable strict checking of function types. */,\n \"strictBindCallApply\": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,\n \"strictPropertyInitialization\": true /* Enable strict checking of property initialization in classes. */,\n \"noImplicitThis\": true /* Raise error on 'this' expressions with an implied 'any' type. */,\n \"noUnusedLocals\": true /* Report errors on unused locals. */,\n \"noUnusedParameters\": true /* Report errors on unused parameters. */,\n \"noImplicitReturns\": true /* Report error when not all code paths in function return a value. */,\n \"noFallthroughCasesInSwitch\": true /* Report errors for fallthrough cases in switch statement. */,\n \"moduleResolution\": \"node\" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,\n \"baseUrl\": \"./\" /* Base directory to resolve non-absolute module names. */,\n \"esModuleInterop\": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,\n \"forceConsistentCasingInFileNames\": true /* Disallow inconsistently-cased references to the same file. */\n },\n // \"include\": [\"package/**/*\"]\n}"
},
{
"path": "package/zustand_generator/__tests__/api.test.js",
"content": "import { ledger } from '../src/utils/ledger';\nimport { chromogenZustandMiddleware } from '../src/api/api';\nimport { renderHook, act } from '@testing-library/react';\nimport create from 'zustand';\n\n// testing chromogenZustandMiddleware\ndescribe('chromogenZustandMiddleware', () => {\n // destructuring atoms from ledger interface in utils folder\n it('is a function', () => {\n expect(typeof chromogenZustandMiddleware).toBe('function');\n });\n\n it('should update ledger upon invocation', () => {\n // creating a mock store\n const useStore = create(\n chromogenZustandMiddleware((set) => ({\n count: 0,\n increment: () => {\n set((state) => ({ count: count + 1 }), false, 'increment');\n },\n })),\n );\n //rendering the useStore Hook\n const { result } = renderHook(useStore);\n\n // verifying atoms property (array) on ledger has been updated with input atom\n expect(result.current.count).toStrictEqual(0);\n expect(ledger.initialRender).toStrictEqual({ count: 0 });\n });\n});\n"
},
{
"path": "package/zustand_generator/__tests__/output-utils.test.js",
"content": "import {\n testInitialState,\n testStateChangesExpect,\n testStateChangesAct,\n generateActLine\n} from '../src/output/output-utils';\n\nconst initialRender = {\n todoListState: [],\n todoListFilterState: 'Show All',\n todoListSortState: false,\n quoteText: '',\n quoteNumber: 0,\n checkBox: false,\n}\n\ndescribe('INITIAL RENDER', () => {\n //create a variable to hold our expected output\n const expectedOutput = ''\n + `\\tit('todoListState should initialize correctly', () => {\\n\\t\\texpect(result.current.todoListState).toStrictEqual([]);\\n\\t});\\n\\n`\n + `\\tit('todoListFilterState should initialize correctly', () => {\\n\\t\\texpect(result.current.todoListFilterState).toStrictEqual(\"Show All\");\\n\\t});\\n\\n`\n + `\\tit('todoListSortState should initialize correctly', () => {\\n\\t\\texpect(result.current.todoListSortState).toStrictEqual(false);\\n\\t});\\n\\n`\n + `\\tit('quoteText should initialize correctly', () => {\\n\\t\\texpect(result.current.quoteText).toStrictEqual(\"\");\\n\\t});\\n\\n`\n + `\\tit('quoteNumber should initialize correctly', () => {\\n\\t\\texpect(result.current.quoteNumber).toStrictEqual(0);\\n\\t});\\n\\n`\n + `\\tit('checkBox should initialize correctly', () => {\\n\\t\\texpect(result.current.checkBox).toStrictEqual(false);\\n\\t});\\n\\n`\n //create a variable and assign it to the evaluated result of the calling the testInitialState on our input\n const evaluatedResult = testInitialState(initialRender);\n //expect(realOutput).toStrictEqual(expectedOutput);\n it('expectedOutput should equal evaulatedResult', () => {\n expect(evaluatedResult).toStrictEqual(expectedOutput);\n });\n\n\n\n})\n\ndescribe('TEST STATE CHANGES ACT', () => {\n\n const transaction = [\n {\n action: 'setFilter',\n arguments: ['Show Uncompleted'],\n changedValues: { 'todoListFilterState': 'Show Uncompleted' }\n }\n ];\n const testStateChangesActOutput = testStateChangesAct(transaction);\n\n const expectedOutput =\n\n `\\n\\tit('todoListFilterState should update correctly', () => {\n const { result } = renderHook(useStore);\n\n act(() => {\\n result.current.setFilter(\"Show Uncompleted\");\\n});\n\n \\nexpect(result.current.todoListFilterState).toStrictEqual(\"Show Uncompleted\"); \n });`;\n\n let expectedNoWhitespace = expectedOutput.replace(/\\s/g, '');\n\n\n it('expect output to equal expected output', () => {\n expect(testStateChangesActOutput.replace(/\\s/g, '')).toStrictEqual(expectedNoWhitespace)\n })\n})\n\n\n\ndescribe('TEST STATE CHANGES EXPECT', () => {\n //1. Create function inputs manually\n const input = [\"todoListFilterState\", \"Show Completed\"];\n //2. Manually write out expected output of function\n const expectedOutput = `\\nexpect(result.current.todoListFilterState).toStrictEqual(\"Show Completed\");`\n //3. Run function to get actual output\n //4. Compare exptected ouptut to actual output\n const testStateChanges = testStateChangesExpect(input)\n\n it('it should be true when when input is passed into testStateChanges function ', () => {\n expect(testStateChanges).toStrictEqual(expectedOutput);\n })\n})\n\n\n\n\ndescribe('GENERATE ACT LINE', () => {\n // Create a tranaction inputs manually\n const transaction = {\n action: 'setFilter',\n arguments: ['Show Completed'],\n changedValues: { todoListFilterState: \"Show Completed\" }\n };\n const action = transaction.action;\n const args = transaction.arguments;\n\n const expectedOutput = `\\tresult.current.${action}(${args?.map(arg => JSON.stringify(arg)).join(', ')});\\n`\n\n const testActGeneration = generateActLine(transaction)\n // Manually writing out expected output of function\n //const evaluateActGeneration = `\\tresult.current.${action}(${args?.map(arg => JSON.stringify(arg)).join(', ')});\\n`\n // Run func to get actual ouput\n //Compare step2 to step 3\n it('testActGeneration should generate an action line', () => {\n expect(expectedOutput).toStrictEqual(testActGeneration)\n })\n})"
},
{
"path": "package/zustand_generator/src/GlobalStyle.ts",
"content": "/* Reset CSS section */\nimport { createGlobalStyle } from 'styled-components';\n\nconst GlobalStyle = createGlobalStyle`\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n* {\n margin: 0;\n}\n\nhtml,\nbody,\n#root // for create-react-app \n{\n height: 100%;\n}\n\nimg,\npicture,\nvideo,\ncanvas,\nsvg {\n display: block;\n max-width: 100%;\n}\n\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n overflow-wrap: break-word;\n}\n\nh2 {\n font-size: 36px;\n}\n\n#root,\n#__next {\n isolation: isolate;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background-default: #222;\n --background-body: #161616;\n --background-button: #dbdbdb;\n --background-button-hover: #fafafa;\n --card-background: #323232;\n --card-border: #000;\n --input-background: #333;\n --input-border: #222;\n --input-border-hover: #222;\n --font-default: #ffffff;\n --font-secondary: #8e8e8e;\n --font-tertiary: #666;\n --font-button: #161616;\n --font-link: rgb(0, 149, 246);\n --font-error: rgba(220, 70, 70, .6);\n --background-error: rgba(220, 70, 70, .3);\n }\n}\n\n@media (prefers-color-scheme: light) {\n :root {\n --background-default: #fff;\n --background-body: #fafafa;\n --background-button: #323232;\n --background-button-hover: #161616;\n --card-background: #fff;\n --card-border: #dbdbdb;\n --input-background: #eee;\n --input-border: #dbdbdb;\n --input-border-hover: #191919c2;\n --font-default: #191919;\n --font-secondary: #8e8e8e;\n --font-tertiary: #8e8e8e;\n --font-button: #fafafa;\n --font-link: rgb(0, 149, 246);\n --font-error: rgba(220, 70, 70, .6);\n --background-error: rgba(220, 70, 70, .3);\n }\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n box-sizing: border-box;\n}\n\n#app {\n height: 100%;\n width: 100%;\n}\n`;\n\nexport default GlobalStyle;\n"
},
{
"path": "package/zustand_generator/src/api/api.ts",
"content": "import { ledger } from '../utils/ledger';\nimport { Transaction, InitialRender } from '../types';\nimport { StoreApi, StateCreator, StoreMutatorIdentifier } from 'zustand';\n\n// Referenced Zustand First Party Middleware for Type implementation\n// See here: https://github.com/pmndrs/zustand/tree/main/src/middleware\n\ntype Chromogen = <\n T extends unknown,\n Mps extends [StoreMutatorIdentifier, unknown][] = [],\n Mcs extends [StoreMutatorIdentifier, unknown][] = [],\n>(\n creatorFunction: StateCreator,\n) => StateCreator;\n\ntype ChromogenImpl = (\n creatorFunction: PopArgument>,\n) => PopArgument>;\n\ntype PopArgument unknown> = T extends (\n ...a: [...infer A, infer _]\n) => infer R\n ? (...a: A) => R\n : never;\n\ntype TakeTwo = T extends []\n ? [undefined, undefined]\n : T extends [unknown]\n ? [...a0: T, a1: undefined]\n : T extends [unknown?]\n ? [...a0: T, a1: undefined]\n : T extends [unknown, unknown]\n ? T\n : T extends [unknown, unknown?]\n ? T\n : T extends [unknown?, unknown?]\n ? T\n : T extends [infer A0, infer A1, ...unknown[]]\n ? [A0, A1]\n : T extends [infer A0, (infer A1)?, ...unknown[]]\n ? [A0, A1?]\n : T extends [(infer A0)?, (infer A1)?, ...unknown[]]\n ? [A0?, A1?]\n : never;\n\ntype StoreDevtools = S extends {\n setState: (...a: infer Sa) => infer Sr;\n}\n ? {\n setState(...a: [...a: TakeTwo, action?: A]): Sr;\n }\n : never;\n\ntype Write = Omit & U;\n\ntype WithDevtools = Write>;\n\ntype NamedSet = WithDevtools>['setState'];\n/*\nChromogen Middleware business logic. Performs 2 main functions:\n 1. Captures initial state for all store properties and writes to ledger as initialRender (For generating initial state tests)\n 2. Wraps set function to capture any subsequent state changes (along with funciton name, arguments, and before/after for changes store slices)\n*/\nconst chromogenImpl: ChromogenImpl = (creatorFunction) => (set, get, api) => {\n //get initial render and save it to ledger\n const initialStateEntries = creatorFunction(api.setState, get, api);\n const initialRender: InitialRender = filterOutFuncs(initialStateEntries);\n ledger.initialRender = initialRender;\n\n type S = ReturnType;\n (api.setState as NamedSet) = (partial, replace, action, ...args) => {\n const oldStore = filterOutFuncs(get());\n const r = set(partial, replace);\n const newStore = filterOutFuncs(get());\n const changedValues = diffStateObjects(oldStore, newStore);\n\n //create Transaction obj and write it to ledger for generating tests\n const newAction: Transaction = {\n action: typeof action === 'string' ? action : 'UnknownAction',\n changedValues,\n arguments: args,\n };\n\n ledger.transactions.push(newAction);\n return r;\n };\n return creatorFunction(api.setState, get, api);\n};\n\nexport const chromogenZustandMiddleware = chromogenImpl as unknown as Chromogen;\n\n/* Goes through the store object and returns a new object containing state without any actions*/\nconst filterOutFuncs = (store) => {\n const result = {};\n for (const [k, v] of Object.entries(store)) {\n if (typeof v !== 'function') result[k] = v;\n }\n return result;\n};\n/* Identifies the difference between initial Store and newStore containing newly invoked actions */\nconst diffStateObjects = (oldStore, newStore) => {\n const changedValues = {};\n for (const [k, v] of Object.entries(newStore)) {\n if (JSON.stringify(oldStore[k]) !== JSON.stringify(v)) changedValues[k] = v;\n }\n return changedValues;\n};\n"
},
{
"path": "package/zustand_generator/src/component/Buttons/RecordingButton.tsx",
"content": "import React, { useState } from 'react';\nimport RecordButton from './RecordingVariations/Record';\nimport StartButton from './RecordingVariations/Start';\n\nconst RecordingButton = () => {\n const [isRecording, setIsRecording] = useState(true);\n const handleClick = () => setIsRecording(!isRecording);\n\n return (\n \n {isRecording ? (\n \n
\n\n \n {isHover ? 'Stop recording' : 'Recording in progress'}\n
\n \n \n );\n};\n\nexport default Record;\n"
},
{
"path": "package/zustand_generator/src/component/Buttons/RecordingVariations/Start.tsx",
"content": "import React, { useState } from 'react';\n\nconst Start = (props): JSX.Element => {\n //hover\n const [isHover, setIsHover] = useState(false);\n const handleMouseEnter = () => {\n setIsHover(true);\n };\n const handleMouseLeave = () => {\n setIsHover(false);\n };\n\n const startButtonShape: React.CSSProperties = {\n display: 'flex',\n width: '252px',\n flexDirection: 'row',\n alignItems: 'center',\n position: 'absolute',\n justifyContent: 'center',\n height: '48px',\n // left: '1482px',\n // top: '1081px',\n borderRadius: '42px',\n padding: '14px 24px',\n columnGap: '16px',\n background: '#212121',\n border: '1px solid rgba(243, 246, 248, 0.1)',\n cursor: 'pointer',\n bottom: '20px',\n };\n\n const startButtonHover: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n position: 'absolute',\n width: '252px',\n height: '48px',\n borderRadius: '42px',\n padding: '14px 24px',\n columnGap: '16px',\n justifyContent: 'center',\n background: '#1C1C1C',\n border: '1px solid rgba(243, 246, 248, 0.1)',\n cursor: 'pointer',\n bottom: '20px',\n };\n\n const startIcon: React.CSSProperties = {\n width: '0',\n height: '0',\n borderTop: '8px solid transparent',\n borderBottom: '8px solid transparent',\n borderLeft: '16px solid rgba(243, 246, 248, 0.8)',\n flex: 'none',\n order: '0',\n flexGrow: '0',\n borderRadius: '2px',\n };\n\n const startText: React.CSSProperties = {\n fontSize: '14px',\n lineHeight: '16px',\n color: '#F3F6F8',\n opacity: '0.8',\n flex: 'none',\n order: '1',\n flexGrow: '0',\n };\n\n return (\n \n
\n Start recording
\n \n );\n};\n\nexport default Start;\n"
},
{
"path": "package/zustand_generator/src/component/Buttons/SecondaryButton.tsx",
"content": "import React, { useState } from 'react';\nimport {\n icon_arrow,\n icon_copy,\n icon_download,\n icon_retract,\n icon_expand,\n icon_check,\n} from '../Icons';\n\nconst downloadButton: React.CSSProperties = {\n font: `-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Oxygen\", \"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\", sans-serif`,\n color: 'rgba(243, 246, 248, 0.7)',\n backgroundColor: 'rgb(243, 246, 248, 0.03)',\n height: '32px',\n border: '1px solid rgba(243, 246, 248, 0.05)',\n borderRadius: '6px',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: '6px',\n gap: '4px',\n};\n\nconst downloadHover: React.CSSProperties = {\n font: `-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"Roboto\",\"Oxygen\", \"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\", sans-serif`,\n color: 'rgba(243, 246, 248, 0.7)',\n backgroundColor: 'rgb(243, 246, 248, 0.1)',\n height: '32px',\n border: '1px solid rgba(243, 246, 248, 0.05)',\n borderRadius: '6px',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n padding: '6px',\n gap: '4px',\n};\n\nconst downloadTitleContainer: React.CSSProperties = {\n display: 'flex',\n alignItems: 'center',\n gap: '6px',\n};\n\nconst downloadIconBox: React.CSSProperties = {\n height: '20px',\n width: '20px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst downloadTitleText: React.CSSProperties = {\n fontSize: '12px',\n fontWeight: 500,\n lineHeight: '16px',\n color: 'rgba(243, 246, 248, 0.7)',\n marginRight: '12px',\n};\n\nconst downloadLine: React.CSSProperties = {\n width: '1px',\n height: '20px',\n background: 'rgba(243, 246, 248, 0.05)',\n};\n\nexport const downloadArrow: React.CSSProperties = {\n width: '20px',\n height: '20px',\n};\n\ntype Icon = 'download' | 'expand' | 'retract' | 'copy' | 'arrow' | 'check';\n\ninterface Props {\n icon: Icon;\n handleClick?: any;\n value?: string;\n arrow?: boolean;\n}\n\nconst arrowIcons = (key: Icon): JSX.Element => {\n if (key == 'download') return icon_download;\n if (key == 'expand') return icon_expand;\n if (key == 'retract') return icon_retract;\n if (key == 'copy') return icon_copy;\n if (key == 'arrow') return icon_arrow;\n if (key == 'check') return icon_check;\n else return icon_arrow;\n};\n\nconst ArrowSection: React.FC = () => {\n return (\n <>\n
\n {icon_arrow}
\n \n );\n};\n\nconst SecondaryButton: React.FC = ({ value, arrow, icon, handleClick }) => {\n const [isHover, setIsHover] = useState(false);\n const handleMouseEnter = () => {\n setIsHover(true);\n };\n const handleMouseLeave = () => {\n setIsHover(false);\n };\n\n return (\n \n \n
{arrowIcons(icon)}
\n {value &&
{value}
}\n
= ({ children }): JSX.Element => {\n const [code, setCode] = React.useState('');\n const [storeMap] = React.useState>(new Map());\n const [isHidden, setIsHidden] = useState(false);\n\n const timer = setInterval(() => {\n console.log('Firing');\n setCode(String(generateTests(storeMap)));\n }, 1000);\n\n React.useEffect(() => {\n console.log(code);\n timer;\n }, [timer]);\n\n // React.useEffect(() => console.log(ledger.transactions[2].changedValues), []);\n\n return (\n \n {children}\n {isHidden ? (\n
\n );\n};\n"
},
{
"path": "package/zustand_generator/src/component/Editor.tsx",
"content": "import React, { useState } from 'react';\nimport CodeEditor from '@uiw/react-textarea-code-editor';\nimport NumberList from './Numbers';\nimport { Header } from './Header';\nimport RecordingButton from './Buttons/RecordingButton';\n\nconst editorStyle: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n overflow: 'auto',\n borderLeft: '1px solid rgba(243,246,248,.1)',\n backgroundColor: '#1C1C1C',\n width: '50vw',\n};\nconst codePanel: React.CSSProperties = {\n display: 'flex',\n // flexGrow: 1,\n overflowY: 'scroll',\n height: 'calc(100vh - 56px)',\n};\n\ninterface Props {\n code: string;\n setIsHidden: Function;\n isHidden: boolean;\n}\nconst Editorfield = ({ code, isHidden, setIsHidden }: Props): JSX.Element => {\n const [, setInnerCode] = useState(code);\n let breakLine = 0;\n\n for (let curr = 0; curr < code.length; curr++) {\n if (code[curr] == '\\n') breakLine++;\n }\n\n console.log(breakLine);\n\n return (\n \n
\n
\n setInnerCode(evn.target.value)}\n padding={15}\n style={{\n maxWidth: 1000,\n width: 'calc(100% - 60px)',\n maxHeight: '100vh',\n overflow: 'visible',\n fontSize: 12,\n backgroundColor: '#1c1c1c',\n fontFamily:\n 'ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo,monospace',\n }}\n />\n
\n
\n
\n setIsHidden(!isHidden)} />\n
\n );\n};\n\nexport default EditorTab;\n"
},
{
"path": "package/zustand_generator/src/component/Header.tsx",
"content": "import React, { useEffect, useState } from 'react';\nimport SecondaryButton from './Buttons/SecondaryButton';\nimport { generateFile, generateTests } from './component-utils';\n\nconst toolBar: React.CSSProperties = {\n display: 'flex',\n height: '56px',\n width: '100%',\n padding: '8px 16px',\n alignItems: 'center',\n gap: '8px',\n borderBottom: `1px solid rgba(243,246,248,.05)`,\n};\n\nconst toolBarLogoBox: React.CSSProperties = {\n height: '40px',\n width: '40px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst toolBarTitleContainer: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n color: '#fff',\n lineHeight: '16px',\n opacity: 0.9,\n marginLeft: '8px',\n rowGap: '4px',\n flexGrow: 1,\n};\n\nconst toolBarTitle: React.CSSProperties = {\n fontSize: '16px',\n fontWeight: 500,\n fontFamily: 'Inter !important',\n};\n\nconst toolBarDescription: React.CSSProperties = {\n fontSize: '12px',\n fontWeight: 400,\n};\n\nexport const copyButton: React.CSSProperties = {\n height: '32px',\n width: '32px',\n backgroundColor: 'rgb(243, 246, 248, 0.03)',\n border: '1px solid rgba(243, 246, 248, 0.05)',\n borderRadius: '6px',\n display: 'flex',\n alignItems: 'center',\n padding: '6px',\n};\n\nexport const minimizeButton: React.CSSProperties = {\n height: '24px',\n width: '24px',\n backgroundColor: 'white',\n marginLeft: '10px',\n padding: 0,\n cursor: 'pointer',\n};\n\nexport const minimizeIcon: React.CSSProperties = {};\n\nexport const Header = ({ isHidden, setIsHidden }) => {\n const [file, setFile] = useState(undefined);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n copyOff();\n }, [copied]);\n\n function copyOff() {\n setTimeout(() => {\n setCopied(false);\n }, 3000);\n }\n\n return (\n \n
\n
\n
\n \n \n \n \n \n \n
\n
\n
Chromogen Tests
\n
Interact with the app to generate tests
\n
\n
\n generateFile(setFile, new Map())}\n />\n \n {\n navigator.clipboard.writeText(generateTests(new Map())[0]);\n setCopied(true);\n }}\n />\n setIsHidden(!isHidden)} />\n \n \n \n \n \n \n);\n\nexport const icon_copy = (\n \n \n \n \n \n \n);\n\nexport const icon_retract = (\n \n \n \n \n \n \n);\n\nexport const icon_expand = (\n \n \n \n \n \n \n);\n\nexport const icon_arrow = (\n \n \n \n \n \n \n);\n\nexport const icon_check = (\n \n \n \n \n \n \n);\n"
},
{
"path": "package/zustand_generator/src/component/Numbers.tsx",
"content": "import React from 'react';\n\nconst listStyle: React.CSSProperties = {\n paddingBlock: '28px',\n display: 'flex',\n flexDirection: 'column',\n alignContent: 'flex-end',\n textAlign: 'end',\n background: '#1c1c1c',\n paddingInline: '16px',\n border: '1px solid #1c1c1c',\n height: 'auto',\n width: '60px',\n};\n\nconst numberStyle: React.CSSProperties = {\n fontSize: 12,\n color: '#747478',\n fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo,monospace',\n};\n\nconst unique = (val: number | string) => (\n \n {val}\n
\n);\n\nconst numerous = (num = 1000) => {\n let pointer: number = 1;\n let allNumbers: JSX.Element[] = [];\n\n while (pointer < num) {\n allNumbers = [...allNumbers, unique(pointer)];\n pointer++;\n }\n\n console.log(allNumbers);\n\n return allNumbers;\n};\n\nconst NumberList = ({ number }): JSX.Element => {numerous(number)}
;\n\nexport default NumberList;\n"
},
{
"path": "package/zustand_generator/src/component/Resizing/Resizer.tsx",
"content": "import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nconst ResizerStyle = styled.div`\n position: absolute;\n cursor: ew-resize;\n width: 2px;\n height: 100%;\n z-index: 1;\n left: -1;\n top: 0;\n &:hover {\n background: #4848be;\n }\n`;\n\ninterface ResizerProps {\n onResize: Function;\n}\n\nconst Resizer: React.FC = ({ onResize }) => {\n const [direction, setDirection] = useState('');\n const [mouseDown, setMouseDown] = useState(false);\n\n useEffect(() => {\n const handleMouseMove = (e) => {\n if (!direction) return;\n onResize(direction, e.movementX, e.movementY);\n };\n\n if (mouseDown) {\n window.addEventListener('mousemove', handleMouseMove);\n }\n\n return () => window.removeEventListener('mousemove', handleMouseMove);\n }, [mouseDown, direction, onResize]);\n\n useEffect(() => {\n const handleMouseUp = () => setMouseDown(false);\n window.addEventListener('mouseup', handleMouseUp);\n\n return () => window.removeEventListener('mouseup', handleMouseUp);\n }, []);\n\n const handleMouseDown = (direction) => {\n setDirection(direction);\n setMouseDown(true);\n };\n\n return handleMouseDown('left')}> ;\n};\n\nexport default Resizer;\n"
},
{
"path": "package/zustand_generator/src/component/component-utils.ts",
"content": "/* eslint-disable */\nimport type { CSSProperties } from 'react';\n// import type { SerializableParam } from 'recoil';\nimport type { Ledger } from '../types';\n\nimport { ledger } from '../utils/ledger';\nimport { output } from '../output/output';\n/* eslint-enable */\n\nconst buttonStyle: CSSProperties = {\n display: 'inline-block',\n margin: '8px',\n marginLeft: '13px',\n padding: '0px',\n height: '25px',\n width: '65px',\n borderRadius: '4px',\n justifyContent: 'space-evenly',\n border: '1px',\n cursor: 'pointer',\n color: '#90d1f0',\n fontSize: '10px',\n};\n\nconst divStyle: CSSProperties = {\n display: 'flex',\n position: 'relative',\n height: '100%',\n top: '0px',\n right: '0px',\n bottom: '0px',\n width: '30vw',\n backgroundColor: '#222222',\n borderRadius: '4px',\n margin: 0,\n padding: 0,\n zIndex: 999999,\n};\n\nconst playStyle: CSSProperties = {\n boxSizing: 'border-box',\n marginLeft: '25px',\n borderStyle: 'solid',\n borderWidth: '7px 0px 7px 14px',\n};\n\nconst pauseStyle: CSSProperties = {\n width: '14px',\n height: '14px',\n borderWidth: '0px 0px 0px 10px',\n borderStyle: 'double',\n marginLeft: '27px',\n};\n\nexport const styles = { buttonStyle, divStyle, playStyle, pauseStyle };\n\n/*\n generateFile generates test file & sets download URL\n The passed in setFile function updates _file_ state in Chromogen observer \n Applying only at point-of-download keeps performance cost low for users who\n don't need to pass nodes while creating a moderate performance hit for others\n only while downloading, never while interacting with their app.\n*/\nexport const generateFile = (setFile: Function, storeMap: Map): string[] => {\n const tests = generateTests(storeMap);\n const blob = new Blob(tests);\n setFile(URL.createObjectURL(blob));\n return tests;\n};\n\n/* generateTests is invoked within generateFile, returning our desired test string within an array */\nexport const generateTests = (storeMap: Map): string[] => {\n const { initialRender, transactions } = ledger;\n\n const finalLedger: Ledger =\n storeMap.size > 0\n ? {\n initialRender,\n transactions: transactions,\n }\n : { ...ledger };\n\n return [output(finalLedger)];\n};\n"
},
{
"path": "package/zustand_generator/src/component/panel.tsx",
"content": "/* eslint-disable */\nimport React, { useState, useEffect } from 'react';\nimport { useStore } from '../utils/store';\nimport { styles, generateFile, generateTests } from './component-utils';\n/* eslint-enable */\n\n/* using a zustand store to keep track of recording state */\nconst selector = (state) => ({\n recording: state.recording,\n toggleRecording: state.toggleRecording,\n});\n\nexport const Panel: React.FC = () => {\n // Initializing as undefined over null to match React typing for AnchorHTML attributes\n const [file, setFile] = useState(undefined);\n const [storeMap] = useState>(new Map());\n const { recording, toggleRecording } = useStore<{\n recording: boolean;\n toggleRecording: Function;\n }>(selector);\n\n // Auto-click download link when a new file is generated (via button click)\n useEffect(() => document.getElementById('chromogen-download')!.click(), [file]);\n // ! to get around strict null check in tsconfig\n\n const [pauseColor, setPauseColor] = useState('#90d1f0');\n const pauseBorderStyle = {\n borderColor: `${pauseColor}`,\n };\n\n const [playColor, setPlayColor] = useState('transparent transparent transparent #90d1f0');\n const playBorderStyle = {\n borderColor: `${playColor}`,\n };\n\n return (\n <>\n {\n \n
\n
Testing! \n
{\n toggleRecording();\n // if (!recording) return true;\n // return false;\n }}\n onMouseEnter={() =>\n recording\n ? setPauseColor('#f6f071')\n : setPlayColor('transparent transparent transparent #f6f071')\n }\n onMouseLeave={() =>\n recording\n ? setPauseColor('#90d1f0')\n : setPlayColor('transparent transparent transparent #90d1f0')\n }\n >\n \n {recording ? (\n
\n ) : (\n
\n )}\n \n \n generateFile(setFile, storeMap)}\n onMouseEnter={() =>\n (document.getElementById('chromogen-generate-file')!.style.color = '#f6f071')\n }\n onMouseLeave={() =>\n (document.getElementById('chromogen-generate-file')!.style.color = '#90d1f0')\n }\n >\n {'Download'} \n \n {\n navigator.clipboard.writeText(generateTests(storeMap)[0]);\n }}\n onMouseEnter={() =>\n (document.getElementById('chromogen-copy-test')!.style.color = '#f6f071')\n }\n onMouseLeave={() =>\n (document.getElementById('chromogen-copy-test')!.style.color = '#90d1f0')\n }\n >\n {'Copy To Clipboard'} \n \n \n
\n Download Test\n \n \n );\n};\n"
},
{
"path": "package/zustand_generator/src/output/output-utils.ts",
"content": "/* eslint-disable */\nimport type { Transaction, InitialRender } from '../types';\n// } from '../types';\n\nimport { dummyParam } from '../utils/utils';\n\n/* eslint-enable */\n\n/* ----- HELPER FUNCTIONS ----- */\n\nexport function importZustandStore(): string {\n return `import useStore from '';`;\n}\n\nexport function testInitialState(initialRender: InitialRender): string {\n return Object.entries(initialRender).reduce((acc, [k, v]) => {\n return (\n acc\n + `\\tit('${k} should initialize correctly', () => {\\n\\t\\texpect(result.current.${k}).toStrictEqual(${JSON.stringify(\n v,\n )});\\n\\t});\\n\\n`\n );\n }, '');\n}\n\nconst dummyTransaction = { action: dummyParam, changedValues: {} };\n\n//Takes in an array of transactions and returns a full set of tests (\"it blocks\") for all actions and corresponding state changes\nexport function testStateChangesAct(transactions: Transaction[]): string {\n //Groups transactions together based on whether the transactions impact the same slice of state\n //Each \"group\" of transactions will affect each store parameter 0 or 1 times.\n let groupedTransactions: Transaction[][] = [...transactions, dummyTransaction].reduce(\n (\n acc: {\n groups: Transaction[][];\n currentGroup: Transaction[];\n changedValues: { [nameOfChangedValue: string]: any };\n },\n cur,\n ) => {\n if (\n Object.keys(cur.changedValues).some((v) => acc.changedValues[v])\n || cur.action === dummyParam\n ) {\n acc.groups.push(acc.currentGroup);\n acc.currentGroup = [cur];\n acc.changedValues = Object.keys(cur.changedValues).reduce((acc, k) => {\n acc[k] = true;\n return acc;\n }, {});\n } else {\n acc.currentGroup.push(cur);\n Object.keys(cur.changedValues).forEach((k) => (acc.changedValues[k] = true));\n }\n return acc;\n },\n { groups: [], currentGroup: [], changedValues: {} },\n ).groups;\n\n //For each group of transactions, we generate an \"It block\"\n return groupedTransactions.reduce(\n (acc, group) => {\n const { str, actBlock } = generateItBlock(group);\n acc.str += str;\n acc.actStatements = actBlock;\n return acc;\n },\n { str: '', actStatements: '' },\n ).str;\n}\n//Takes in an entry for a slice of state and generates an expect statement asserting that the state properties have correct value in the store\nexport function testStateChangesExpect([propertyName, newValue]: [string, any]): string {\n return `\\nexpect(result.current.${propertyName}).toStrictEqual(${JSON.stringify(newValue)});`;\n}\n\n//Takes in a transaction and generates an act statement using the action name and argument(s)\nexport function generateActLine(t: Transaction): string {\n const { action } = t;\n const args = t.arguments;\n return `\\tresult.current.${action}(${args?.map((arg) => JSON.stringify(arg)).join(', ')});\\n`;\n}\n\n//Takes in an array of grouped Transactions and returns an It Block (unit test) with all act &\n// expect statements for transactions in input\nfunction generateItBlock(transactions: Transaction[]): { str: string; actBlock: string } {\n const valuesChanged: string[] = [];\n let expectBlock = '';\n\n transactions.forEach((t) =>\n Object.entries(t.changedValues).forEach(([changedValue, newValue]) => {\n valuesChanged.push(changedValue);\n expectBlock += testStateChangesExpect([changedValue, newValue]);\n }),\n );\n\n let newActBlock = transactions.map(generateActLine).join('');\n\n return {\n str: `\\n\\tit('${valuesChanged.join(' & ')} should update correctly', () => {\n const { result } = renderHook(useStore);\n \n act(() => {\\n${newActBlock}\\n});\n \n ${expectBlock} \n });`,\n actBlock: newActBlock,\n };\n}\n"
},
{
"path": "package/zustand_generator/src/output/output.ts",
"content": "/* eslint-disable */\nimport type { Ledger } from '../types';\nimport { importZustandStore, testInitialState, testStateChangesAct } from './output-utils';\n/* eslint-enable */\n\n/* ----- MAIN ----- */\n/* Output takes in initialRender and transactions from the ledger and tests them from the functions in output-utils*/\nexport const output = ({ initialRender, transactions }: Ledger): string =>\n `\nimport { renderHook, act } from '@testing-library/react';\n${importZustandStore()}\n\ndescribe('INITIAL RENDER', () => { \n const { result } = renderHook(useStore); \n \n ${testInitialState(initialRender)}\n});\n\n\ndescribe('STATE CHANGES', () => { \n const { result } = renderHook(useStore);\n \n ${testStateChangesAct(transactions)}\n});`;\n\nexport const unitOutput = (initialRender: any, action: any): string => {\n console.log('within unitOutput. init, action : ', initialRender, action);\n let retString = '';\n if (initialRender) {\n console.log('within unitOutput initialRender');\n retString += `\n import { renderHook, act } from '@testing-library/react';\n ${importZustandStore()}\n describe('INITIAL RENDER', () => {\n const { result } = renderHook(useStore);\n ${testInitialState(initialRender)}\n });\n `;\n } else if (action) {\n console.log('within unitOutput action');\n retString += `\n describe('STATE CHANGES', () => {\n const { result } = renderHook(useStore);\n ${testStateChangesAct([action])}\n });`;\n }\n return retString;\n};\n\n//NOTE: Test output is not linted/formatted in any meaningful way. The Chromogen team recommends formatting tests in line with your personal or organizational preferences;\n"
},
{
"path": "package/zustand_generator/src/types.ts",
"content": "// ----- EXPORTING TYPES TO BE USED IN SRC/.TSX FILES -----\n\ntype NotAFunction = { [k: string]: unknown } & ({ bind?: never } | { call?: never });\n\nexport type InitialRender = {\n [stateParam: string]: NotAFunction;\n};\n\nexport interface Transaction {\n action: string;\n arguments?: T;\n changedValues: {\n [nameOfChangedValue: string]: NotAFunction;\n };\n}\n\nexport interface Ledger {\n initialRender: InitialRender;\n transactions: Transaction[];\n}\n"
},
{
"path": "package/zustand_generator/src/utils/ledger.ts",
"content": "import type { Ledger } from '../types';\n\nexport const ledger: Ledger = {\n initialRender: {},\n transactions: [],\n};\n"
},
{
"path": "package/zustand_generator/src/utils/store.ts",
"content": "import create from 'zustand';\n\ninterface RecordingState {\n recording: boolean;\n toggleRecording: () => void;\n}\n\n/*\nAllows for recording to always be on during page load \nand the ability to pause recording\n*/\nexport const useStore = create((set) => ({\n recording: true,\n toggleRecording: () => {\n set((state) => ({ recording: !state.recording }), false);\n },\n}));\n"
},
{
"path": "package/zustand_generator/src/utils/utils.ts",
"content": "export const dummyParam = 'chromogenDummyParam';\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"chromogen-root\",\n \"version\": \"5.0.1\",\n \"description\": \"simple, interaction-driven test generator for Recoil and Zustand apps\",\n \"scripts\": {\n \"ci-all\": \"(npm ci); (cd ./package && npm ci); (cd ./dev-tool && npm ci); (cd ./demo-todo && npm ci);\",\n \"build\": \"echo \\\"ERROR! Nothing to build in root directory.\\n\\\"\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/oslabs-beta/Chromogen.git\"\n },\n \"contributors\": [\n {\n \"name\": \"Brach Burdick\",\n \"url\": \"https://github.com/sirbrachthepale/\"\n },\n {\n \"name\": \"Francois Denavaut\",\n \"url\": \"https://github.com/dnvt/\"\n },\n {\n \"name\": \"Maggie Kwan\",\n \"url\": \"https://github.com/maggiekwan/\"\n },\n {\n \"name\": \"Lawrence Liang\",\n \"url\": \"https://github.com/Lawliang/\"\n },\n {\n \"name\": \"Michelle Holland\",\n \"url\": \"https://github.com/michellebholland/\"\n },\n {\n \"name\": \"Jim Chen\",\n \"url\": \"https://github.com/chenchingk\"\n },\n {\n \"name\": \"Andy Wang\",\n \"url\": \"https://github.com/andywang23\"\n },\n {\n \"name\": \"Connor Rose Delisle\",\n \"url\": \"https://github.com/connorrose\"\n },\n {\n \"name\": \"Amy Yee\",\n \"url\": \"https://github.com/amyy98\"\n },\n {\n \"name\": \"Cameron Greer\",\n \"url\": \"https://github.com/cgreer011\"\n },\n {\n \"name\": \"Jinseon Shin\",\n \"url\": \"https://github.com/wlstjs\"\n },\n {\n \"name\": \"Nicholas Shay\",\n \"url\": \"https://github.com/nicholasjs\"\n },\n {\n \"name\": \"Ryan Tumel\",\n \"url\": \"https://github.com/rtumel123\"\n },\n {\n \"name\": \"Marcellies Pettiford\",\n \"url\": \"https://github.com/mp-04\"\n },\n {\n \"name\": \"Sung Kim\",\n \"url\": \"https://github.com/smk53664\"\n },\n {\n \"name\": \"Lina Lee\",\n \"url\": \"https://github.com/lina4lee\"\n },\n {\n \"name\": \"Erica Oh\",\n \"url\": \"https://github.com/ericaysoh\"\n },\n {\n \"name\": \"Dani Almaraz\",\n \"url\": \"https://github.com/dtalmaraz\"\n },\n {\n \"name\": \"Craig Boswell\",\n \"url\": \"https://github.com/crgb0s\"\n },\n {\n \"name\": \"Hussein Ahmed\",\n \"url\": \"https://github.com/Hali3030\"\n },\n {\n \"name\": \"Ian Kila\",\n \"url\": \"https://github.com/iannkila\"\n },\n {\n \"name\": \"Yuehao Wong\",\n \"url\": \"https://github.com/yuehaowong\"\n }\n ],\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/oslabs-beta/Chromogen/issues\"\n },\n \"homepage\": \"https://github.com/oslabs-beta/Chromogen#readme\",\n \"dependencies\": {\n \"@uiw/react-textarea-code-editor\": \"^2.1.1\",\n \"dependency-cruiser\": \"^12.9.0\",\n \"react\": \"^18.0.0\",\n \"react-dom\": \"^18.0.0\",\n \"recoil\": \"^0.7.2\",\n \"redux\": \"^4.0.5\",\n \"styled-components\": \"^5.3.6\",\n \"zustand\": \"^4.1.1\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.11.6\",\n \"@babel/preset-env\": \"^7.11.5\",\n \"@babel/preset-react\": \"^7.10.4\",\n \"@babel/preset-typescript\": \"^7.10.4\",\n \"@testing-library/react\": \"^13.1.1\",\n \"@types/node\": \"^14.11.2\",\n \"@types/react\": \"^18.0.6\",\n \"@types/react-dom\": \"^18.0.2\",\n \"@types/styled-components\": \"^5.1.26\",\n \"babel-jest\": \"^26.3.0\",\n \"coveralls\": \"^3.1.0\",\n \"css-loader\": \"^6.7.3\",\n \"eslint-config-airbnb-typescript\": \"^17.0.0\",\n \"jest\": \"^26.4.2\",\n \"react-test-renderer\": \"^18.0.0\",\n \"typescript\": \"^4.0.3\"\n }\n}\n"
}
] ![\"\"/](\"https://avatars.githubusercontent.com/u/60344684?s=400&u=7fa22ae1486df42eaf172c3f08941416603387c0&v=4\")
![\"\"/](\"https://avatars3.githubusercontent.com/u/64747593\")
![\"\"/](\"https://avatars1.githubusercontent.com/u/64433815\")
![\"\"/](\"https://avatars1.githubusercontent.com/u/42079810\")
![\"\"/](\"https://avatars0.githubusercontent.com/u/40308081\")
![\"\"/](\"https://avatars.githubusercontent.com/u/68040348?v=4\")
![\"\"/](\"https://avatars1.githubusercontent.com/u/68680285?s=400&u=5b89d376d4d27a77442b74dcfe1c9c4025ce6453&v=4\")
![\"\"/](\"https://i.postimg.cc/MGDTWMhQ/Ryan.jpg\")
![\"\"/](\"https://i.postimg.cc/qMPgQdsz/cam.jpg\")
![\"\"/](\"https://avatars.githubusercontent.com/u/59386257?v=4\")
![\"\"/](\"https://i.postimg.cc/nz6GjXXV/mp.jpg\")
![\"\"/](\"https://i.postimg.cc/mrRkfN64/sung.jpg\")
![\"\"/](\"https://i.postimg.cc/bJwvdYhF/lina.jpg\")
![\"\"/](\"https://i.postimg.cc/76tZzvPP/erica.jpg\")
![\"\"/](\"https://avatars.githubusercontent.com/u/94757231?v=4\")
![\"\"/](\"https://i.postimg.cc/BbpvdSJD/craig.jpg\")
![\"\"/](\"https://i.postimg.cc/xTj7Yf0C/hussein.jpg\")
![\"\"/](\"https://i.postimg.cc/rwcBD1C8/ian.jpg\")
![\"\"/](\"https://i.postimg.cc/T2JqRnwj/yuehao.jpg\")