project-todo on request Mathilda

.autorestic.yml

@@ -0,0 +1,11 @@
+
+locations:
+  home:
+    from: /path/to/your/home
+    to:
+      - backup1
+
+backends:
+  backup1:
+    type: local
+    path: /path/to/your/backup/repo

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presents" ["@babel/present-env"]
+}

.gitignore

@@ -1,25 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
+facebook-tutorial/
 node_modules
-dist
-dist-ssr
-*.local
-package-lock.json
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

.idx/$PROFILE

@@ -0,0 +1,6 @@
+echo "function yarn { corepack yarn `$args }" >> $PROFILE
+echo "function yarnpkg { corepack yarnpkg `$args }" >> $PROFILE
+echo "function pnpm { corepack pnpm `$args }" >> $PROFILE
+echo "function pnpx { corepack pnpx `$args }" >> $PROFILE
+echo "function npm { corepack npm `$args }" >> $PROFILE
+echo "function npx { corepack npx `$args }" >> $PROFILE

.idx/.babelrc.json

@@ -0,0 +1,5 @@
+{
+    "presets": [...],
+    "plugins": [...]
+  }
+{ "extends": "../../.babelrc" }

.idx/.browserslistrc

@@ -0,0 +1,2 @@
+> 0.25%
+not dead

.idx/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+package-lock.json
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

.idx/App.css

@@ -0,0 +1,52 @@
+@import "tailwindcss";
+/* Removed invalid JavaScript code */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
+#root {
+  min-width: 320px;
+  max-width: 1600px;
+}
+/* Removed invalid selector */
+
+  body {
+    margin: 0;
+    font-family: "Montserrat";
+  }
+
+  h1, section, footer {
+    padding: 2rem;
+  }
+
+  .light {
+    background: red;
+    color: rgb(0, 24, 164);
+  }
+
+  .dark {
+    background: rgb(0, 24, 164);
+    color: aquamarine;
+  }
+
+  button {
+    padding: 18px;
+    border-radius: 30px;
+    border: 0;
+    background: black;
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: "Montserrat";
+  }
+
+  select {
+    border: none;
+    border-radius: 4px;
+    color: rgb(0, 24, 164);
+    font-size: 16px;
+    font-weight: 600;
+    height: 40px;
+    font-family: 'Montserrat';
+    padding: 0 20px;
+      cursor: pointer;
+    }
+/* Removed invalid JSX code */
+

.idx/App.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import { styled } from '@mui/material/styles';
+
+const CustomizedSlider = styled(Slider)`
+  color: #20b2aa;
+
+  :hover {
+    color: #2e8b57;
+  }
+`;
+
+export default function StyledComponents() {
+  return <CustomizedSlider defaultValue={30} />;
+}

.idx/App.jsx

@@ -0,0 +1,13 @@
+// Removed unused import
+// import { useCountTodo } from './todo.jsx';
+// import { useTodo } from './todo.jsx/useTodo';
+// Removed unused import
+// Removed unused import
+import "./App.css";
+export const App = () => {
+  return (
+    <h1>Todo App</h1>
+  )
+}
+// Removed unused import
+export default App

.idx/CssModulesSlider.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import * as React from 'react';
+import { StyledEngineProvider } from '@mui/material/styles';
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+const cache = createCache({
+  key: 'css',
+  prepend: true,
+});
+
+export default function CssModulesPriority() {
+  return (
+    <CacheProvider value={cache}>
+      {/* Your component tree. Now you can override Material UI's styles. */}
+    </CacheProvider>
+  );
+}
+
+export default function GlobalCssPriority() {
+  return (
+    <StyledEngineProvider injectFirst>
+      {/* Your component tree. Now you can override Material UI's styles. */}
+    </StyledEngineProvider>
+  );
+}
+// webpack, Parcel or else will inject the CSS into the page
+import styles from './CssModulesSlider.module.css';
+
+export default function CssModulesSlider() {
+  return (
+    <div>
+      <Slider defaultValue={30} />
+      <Slider defaultValue={30} className={styles.slider} />
+    </div>
+  );
+}

.idx/CssModulesSlider.module.css

@@ -0,0 +1,8 @@
+.slider {
+    color: #20b2aa;
+  }
+
+  .slider:hover {
+    color: #2e8b57;
+  }
+

.idx/CssModulesSliderCustumPseudoClasses.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import styles from './MyList.module.css';
+
+export default function MyList() {
+  return (
+    <List>
+      <ListItem className={styles.myListItem} selected>
+        <ListItemText primary="Selected item" />
+      </ListItem>
+      <ListItem className={styles.myListItem}>
+        <ListItemText primary="Regular item" />
+      </ListItem>
+    </List>
+  );
+}

.idx/CssModulesSliderDeep1.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+// webpack, Parcel or else will inject the CSS into the page
+import styles from './CssModulesSliderDeep1.module.css';
+
+export default function CssModulesSliderDeep1() {
+  return (
+    <div>
+      <Slider defaultValue={30} />
+      <Slider defaultValue={30} className={styles.slider} />
+    </div>
+  );
+}

.idx/CssModulesSliderDeep1.module.css

@@ -0,0 +1,11 @@
+.slider {
+    color: #20b2aa;
+  }
+
+  .slider:hover {
+    color: #2e8b57;
+  }
+
+  .slider :global(.MuiSlider-thumb) {
+    border-radius: 1px;
+  }

.idx/CssModulesSliderDeep2.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+// webpack, Parcel or else will inject the CSS into the page
+import styles from './CssModulesSliderDeep2.module.css';
+
+export default function CssModulesSliderDeep2() {
+  return (
+    <div>
+      <Slider defaultValue={30} />
+      <Slider
+        defaultValue={30}
+        className={styles.slider}
+        slotProps={{ thumb: { className: styles.thumb } }}
+      />
+    </div>
+  );
+}

.idx/CssModulesSliderDeep2.module.css

@@ -0,0 +1,11 @@
+.slider {
+    color: #20b2aa;
+  }
+
+  .slider:hover {
+    color: #2e8b57;
+  }
+
+  .slider .thumb {
+    border-radius: 1px;
+  }

.idx/Emotioncss.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/react-in-jsx-scope -- Unaware of jsxImportSource */
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import Slider from '@mui/material/Slider';
+import Box from '@mui/material/Box';
+
+export default function EmotionCSS() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <Slider defaultValue={30} />
+      <Slider
+        defaultValue={30}
+        css={css`
+          color: #20b2aa;
+
+          :hover {
+            color: #2e8b57;
+          }
+        `}
+      />
+    </Box>
+  );
+}

.idx/GlobalCssSlider.css

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+const cache = createCache({
+  key: 'css',
+  prepend: true,
+});
+
+export default function GlobalCssPriority() {
+  return (
+    <CacheProvider value={cache}>
+      {/* Your component tree. Now you can override Material UI's styles. */}
+    </CacheProvider>
+  );
+}
+import * as React from 'react';
+import { StyledEngineProvider } from '@mui/material/styles';
+
+export default function GlobalCssPriority() {
+  return (
+    <StyledEngineProvider injectFirst>
+      {/* Your component tree. Now you can override Material UI's styles. */}
+    </StyledEngineProvider>
+  );
+}
+import * as React from 'react';
+import Slider from '@mui/material/Slider';
+import './GlobalCssSlider.css';
+
+export default function GlobalCssSlider() {
+  return <Slider defaultValue={30} />;
+}
+.MuiSlider-root {
+    color: #20b2aa;
+  }
+
+  .MuiSlider-root:hover {
+    color: #2e8b57;
+  }

.idx/GlobalCssSliderDeep.css

@@ -0,0 +1,11 @@
+MuiSlider-root {
+    color: #20b2aa;
+  }
+
+  .MuiSlider-root:hover {
+    color: #2e8b57;
+  }
+
+  .MuiSlider-root .MuiSlider-thumb {
+    border-radius: 1px;
+  }

.idx/GlobalCssSliderDeep.js

@@ -0,0 +1,11 @@
+MuiSlider-root {
+    color: #20b2aa;
+  }
+
+  .MuiSlider-root:hover {
+    color: #2e8b57;
+  }
+
+  .MuiSlider-root .MuiSlider-thumb {
+    border-radius: 1px;
+  }