{"id":22436947,"url":"https://github.com/savourygin/chop_logic_poc","last_synced_at":"2026-05-17T03:40:20.858Z","repository":{"id":37042353,"uuid":"443552217","full_name":"SavouryGin/chop_logic_poc","owner":"SavouryGin","description":"Pet project for developing a React interface, which will allow to construct logical proofs and calculate other logical stuff.","archived":false,"fork":false,"pushed_at":"2023-12-05T04:03:35.000Z","size":3271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T13:44:25.908Z","etag":null,"topics":["chop-logic","logic","proofs","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SavouryGin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-01T14:11:49.000Z","updated_at":"2024-06-22T08:42:15.000Z","dependencies_parsed_at":"2023-12-05T05:23:36.371Z","dependency_job_id":"2e908765-d85b-49d0-a7e3-544423f37e1a","html_url":"https://github.com/SavouryGin/chop_logic_poc","commit_stats":null,"previous_names":["savourygin/chop_logic_poc"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SavouryGin%2Fchop_logic_poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SavouryGin%2Fchop_logic_poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SavouryGin%2Fchop_logic_poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SavouryGin%2Fchop_logic_poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SavouryGin","download_url":"https://codeload.github.com/SavouryGin/chop_logic_poc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245813200,"owners_count":20676763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chop-logic","logic","proofs","react","typescript"],"created_at":"2024-12-06T00:10:17.575Z","updated_at":"2025-10-26T19:19:19.221Z","avatar_url":"https://github.com/SavouryGin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chop Logic\n\nPet project for developing a React interface, which will allow to construct logical proofs and calculate other logical stuff.\n\n## Name templates\n\n1. _Branch name_\n\n   \u003e ts-15_header-component\u003cbr\u003e\n   \u003e bug-21_incorrect-filename\n\n2. _Commit message_\n\n   \u003e ts-15: add styles for the header\u003cbr\u003e\n   \u003e bug-21: fix the file extension\n\n3. _PR title_\n\n   \u003e Ts-15: Header component\u003cbr\u003e\n   \u003e Bug-21: Incorrect filename\n\n## Scripts\n\n```sh\nnpm run dev\n```\n\nThis command will use the webpack-dev-server to create a dev server and will watch for your code changes and be recompiled every time you make a change. Open [localhost](http://localhost:9000) to view it in the browser.\n\n```sh\nnpm run build\n```\n\nThis command will build your code and generate a single bundle file and insert it into the html file generated.\n\n```sh\nnpm run lint\n```\n\nThis command will run ESLint through all the .js, .ts, and .tsx (used with React) files. Any ESLint errors that can be automatically fixed will be fixed with this command, but any other errors will be printed out in the command line.\n\n```sh\nnpm run test\n```\n\nThis command will run all test suites using the Jest framework.\n\n## Code Style\n\n#### Basic Rules\n\n- Only include one React component per file.\n- Prefer functional components over class components.\n- Always use JSX syntax.\n- Remove all `console.log()` before pushing your code into the repository.\n- No unneeded comments.\n- Methods and functions that are longer than the screen should be refactored into smaller units.\n- Commented out code should be deleted, not committed.\n- Use absolute imports, except when the imported files are located inside the component folder.\n\n```\nimport './child'            // OK\nimport '../../component'    // not OK!\n```\n\n- Import libraries first, then absolute imports, then child imports\n\n```\nimport React from 'react';\nimport Logo from 'components/logo';\nimport SidebarGroup from './group';\n```\n\n#### Naming conventions\n\n- Use `.tsx` extension for React components.\n- Use `PascalCase` in components, interfaces, or type aliases. For example, `ModalWindow`, `WriteOffAccrualsState`.\n- Use `kebab-case` for folder names. For example, `pages/propositions`.\n- Create a `index.tsx` within each folder for exporting. This will reduce repeating names on the imports.\n- Use the filename as the component name. For example, `grid-header.tsx` should have a reference name of `GridHeader` component. However, for root components of a directory, use `index.tsx` as the filename and use the directory name as the component name.\n- If a component requires multiple files (`.scss`, `.test.tsx`, etc.) locate all files within component a folder.\n- Always use `camelCase` for prop names.\n- Unit test files should use the same name as its corresponding file. For example, for `GridHeader` component create `grid-header.test.tsx` test.\n- Variable names should be `camelCase`. Variable names can contain number and special characters\n\n#### Bug avoidance\n\n- Avoid using an array index as key prop, prefer a stable ID.\n- Always define explicit defaultProps for all non-required props.\n- Use optional chaining if things can be null.\n- Create pure functions and avoid side-effects.\n- Avoid mutating state when working with arrays or objects.\n- Treat props as read-only. Do not try to modify them.\n\n#### Testing\n\n- Write unit tests for your components and functions.\n- No logic should exist within your test code.\n- Don't test more than one thing in a test.\n- Code that needs to talk to a network should be mocked. Place the mock data into `src/__mocks__` folder.\n\n#### Styles\n\n- Avoid inline CSS rules.\n- Use [SCSS](https://sass-lang.com/guide/) (not SASS) syntax.\n- Create a new `styles.scss` file for each React component and make root className unique for a project (based on business sense of the page).\n- Use [BEM](https://en.bem.info/methodology/css/) naming conventions for classNames.\n\n  \u003e className example:\n  \u003e Block - `aside-bar`\n  \u003e Element - `logo`\n  \u003e Modifier - `highlighted`\n  \u003e Result: `aside-bar__logo_highlighted`\n\n- Only one block selector can be placed inside a single `.scss` file. Element and modifier selectors must be nested within a block declaration.\n- Use the parent selector -- [\u0026](https://sass-lang.com/documentation/style-rules/parent-selector/) -- to refer to the outer selector.\n- If you need reuse part of the styles, it should be decided by reusing a component, not by copy-pasting styles.\n- Extract reusable style into [mixins](https://sass-lang.com/documentation/at-rules/mixin/).\n\n#### Code Structure\n\n- Try to create custom hooks instead of just putting a useEffect or multiple useStates directly to your component.\n- Whenever it is possible, split your component into smaller chunks. Often applicable when you are using conditional rendering or defining the columns for a data grid, etc.\n- Wrap JSX tags in parentheses when they span more than one line.\n- Do not use underscore prefix for internal methods of a React component.\n- To keep all the component files consistent, please follow the following pattern:\n\n```\n// 1. Imports - Prefer destructuring imports to minimize written code\nimport React, { PropsWithChildren, useState, useEffect } from \"react\";\n\n// 2. Types\ntype ComponentProps = {\n  someProperty: string;\n};\n\n// 3. Additional variables\nconst SOME_CONSTANT = \"something\";\n\n// 4. Component\nfunction Component({ someProperty }: PropsWithChildren\u003cComponentProps\u003e) {\n  // 4.1 Definitions\n  const [state, setState] = useState(true);\n  const { something } = useSomething();\n\n  // 4.2 Functions\n  const handleToggleState = () =\u003e {\n    setState(!state);\n  }\n\n  // 4.3 Effects\n  useEffect(() =\u003e {\n    // ...\n  }, []);\n\n  // 4.5 Additional destructuring\n  const { property } = something;\n\n  // 4.5. JSX\n  return (\n      \u003c\u003e\n        \u003cdiv\u003e\n          \u003ch2\u003eLorem ipsum\u003c/h2\u003e\n          \u003cp\u003ePellentesque arcu\u003c/p\u003e\n        \u003c/div\u003e\n\n        \u003cp\u003eLorem ipsum\u003c/p\u003e\n      \u003c/\u003e\n  );\n}\n\n// 5. Exports\nexport default Component;\n```\n\n- Prefer destructuring properties so it is clear what properties are used in the component:\n\n```\n// ❌\nconst Button = (props) =\u003e {\n  return \u003cbutton\u003e{props.text}\u003c/button\u003e;\n};\n\n// ✅\nconst Button = (props) =\u003e {\n  const { text } = props;\n\n  return \u003cbutton\u003e{text}\u003c/button\u003e;\n};\n\n// ✅\nconst Button = ({ text }) =\u003e {\n  return \u003cbutton\u003e{text}\u003c/button\u003e;\n};\n```\n\n- Omit the value of the prop when it is explicitly `true`:\n\n```\n// ❌\n\u003cForm hasPadding={true} withError={true} /\u003e\n\n// ✅\n\u003cForm hasPadding withError /\u003e\n```\n\n- Avoid curly braces for string props:\n\n```\n// ❌\n\u003cTitle variant={\"h1\"} value={\"Home page\"} /\u003e\n\n// ✅\n\u003cTitle variant=\"h1\" value=\"Home page\" /\u003e\n```\n\n- Prefer conditional rendering with ternary operator:\n\n```\nconst { role } = user;\n\n// ❌\nif (role === ADMIN) {\n  return \u003cAdminUser /\u003e;\n} else {\n  return \u003cNormalUser /\u003e;\n}\n\n// ✅\nreturn role === ADMIN ? \u003cAdminUser /\u003e : \u003cNormalUser /\u003e;\n```\n\n- Use constants or enums for string values:\n\n```\n// ❌\nif (role === 'admin') {\n  return \u003cAdminUser /\u003e;\n}\n\n// ✅\nenum Roles {\n  admin = 'admin',\n  basic = 'basic',\n}\n\nif (role === Roles.admin) {\n  return \u003cAdminUser /\u003e;\n}\n```\n\n- Prefer declarative programming style:\n\n```\n// ❌ imperative: dealing with internals of array iteration\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];\nlet sum = 0;\n\nfor (let i = 0; i \u003c arr.length; i++) {\n  sum += arr[i];\n}\n\n// ✅ declarative: we don't deal with internals of iteration\nconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];\nconst sum = arr.reduce((acc, v) =\u003e acc + v, 0);\n```\n\n- Use descriptive variable names:\n\n```\n// ❌ Avoid single letter names\nconst n = 'Max';\n// ✅\nconst name = 'Max';\n\n// ❌ Avoid abbreviations\nconst sof = 'Sunday';\n// ✅\nconst startOfWeek = 'Sunday';\n\n// ❌ Avoid meaningless names\nconst foo = false;\n// ✅\nconst appInit = false;\n```\n\n- Avoid long list of function arguments:\n\n```\n// ❌\nfunction createPerson(firstName, lastName, height, weight, gender) {\n  // ...\n}\n\n// ✅\nfunction createPerson({ firstName, lastName, height, weight, gender }) {\n  // ...\n}\n\n// ✅\nfunction createPerson(person) {\n  const { firstName, lastName, height, weight, gender } = person;\n  // ...\n}\n```\n\n- Prefer using template literals:\n\n```\n// ❌\nconst userName = user.firstName + \" \" + user.lastName;\n\n// ✅\nconst userDetails = `${user.firstName} ${user.lastName}`;\n```\n\n- Use React fragments instead of additional html elements to wrap several React elements:\n\n```\n// ❌\nconst ActionButtons = ({ text1, text2 }) =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\u003e{text1}\u003c/button\u003e\n      \u003cbutton\u003e{text2}\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n\n// ✅\nconst Button = ({ text1, text2 }) =\u003e {\n  return (\n    \u003c\u003e\n      \u003cbutton\u003e{text1}\u003c/button\u003e\n      \u003cbutton\u003e{text2}\u003c/button\u003e\n    \u003c/\u003e\n  );\n};\n```\n\n- Separate function from the JSX if it takes more than one line:\n\n```\n// ❌\n\u003cbutton\n  onClick={() =\u003e {\n    setState(!state);\n    resetForm();\n    reloadData();\n  }}\n/\u003e\n\n// ✅\n\u003cbutton onClick={() =\u003e setState(!state)} /\u003e\n\n// ✅\nconst handleButtonClick = () =\u003e {\n  setState(!state);\n  resetForm();\n  reloadData();\n}\n\n\u003cbutton onClick={handleButtonClick} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsavourygin%2Fchop_logic_poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsavourygin%2Fchop_logic_poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsavourygin%2Fchop_logic_poc/lists"}