bp

Author: bubulux

.vscode/react.code-snippets

@@ -5,12 +5,12 @@
     "body": [
       "import { makeStyles } from \"@lib-theme\";",
       "",
-      "const use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes = makeStyles({",
+      "const useClasses = makeStyles({",
       "  root: {",
       "  },",
       "});",
       "",
-      "export default use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes;",
+      "export default useClasses;",
     ],
   },
   "React Functional Component": {
@@ -19,14 +19,14 @@
     "body": [
       "import type { JSX } from \"react\";",
       "",
-      "import use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes from \"./styles\";",
+      "import useClasses from \"./styles\";",
       "",
       "type TProps = {",
       "  $1",
       "};",
       "",
       "export default function ${TM_DIRECTORY/.*\\/(.*?)$/$1/}({}: TProps): JSX.Element {",
-      "  const classes = use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes();",
+      "  const classes = useClasses();",
       "  return <div className={classes.root}>${TM_DIRECTORY/.*\\/(.*?)$/$1/}</div>;",
       "}",
     ],
@@ -37,6 +37,8 @@
       "//import { render, screen } from '@tests-unit-browser';",
       "import '@testing-library/jest-dom';",
       "",
+      "import ${TM_DIRECTORY/.*\\/(.*)$/$1/} from \"./func\";",
+      "",
       "describe('${TM_DIRECTORY/.*\\/(.*)$/$1/}', () => {",
       "  it('should render', () => {",
       "     expect(true).toBe(true);",
@@ -46,20 +48,31 @@
     "description": "Creates a test file for a React component",
   },
 
+  "React component module fwd": {
+    "prefix": "remod",
+    "body": [
+      "import ${TM_DIRECTORY/.*\\/(.*)$/$1/} from \"./func\";",
+      "",
+      "export default ${TM_DIRECTORY/.*\\/(.*)$/$1/};",
+    ],
+    "description": "Creates a module forwarder for a React component",
+  },
+
   "React Storybook": {
     "prefix": "rebook",
     "body": [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "import ${TM_DIRECTORY/.*\\/(.*)$/$1/} from \"./func\";",
       "",
       "const meta: Meta = {",
       "  title: \"\",",
-      "  component: \"\",",
+      "  component: ${TM_DIRECTORY/.*\\/(.*)$/$1/},",
       "  args: {},",
       "};",
       "",
       "export default meta;",
       "",
-      "type Story = StoryObj<{}>;",
+      "type Story = StoryObj<typeof ${TM_DIRECTORY/.*\\/(.*)$/$1/}>;",
       "",
       "export const Index: Story = {};",
       "",

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "typescript.preferences.importModuleSpecifier": "relative",
 
   "eslint.workingDirectories": [
     "apps/frontend",

apps/frontend/ui/src/navigation/partials/OptionTrace/func.tsx

@@ -0,0 +1,10 @@
+import type { JSX } from "react";
+
+import useOptionTraceClasses from "./styles";
+
+type TProps = {};
+
+export default function OptionTrace({}: TProps): JSX.Element {
+  const classes = useOptionTraceClasses();
+  return <div className={classes.root}>OptionTrace</div>;
+}

apps/frontend/ui/src/navigation/partials/OptionTrace/index.ts

@@ -0,0 +1,3 @@
+import OptionTrace from "./func";
+
+export default OptionTrace;

apps/frontend/ui/src/navigation/partials/OptionTrace/stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import OptionTrace from "./func";
+
+const meta: Meta = {
+  title: "app/ui/navigation/partials/OptionTrace",
+  component: OptionTrace,
+  args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OptionTrace>;
+
+export const Index: Story = {};

apps/frontend/ui/src/navigation/partials/OptionTrace/styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from "@lib-theme";
+
+const useClasses = makeStyles({
+  root: {},
+});
+
+export default useClasses;

apps/frontend/ui/src/navigation/partials/OptionTrace/tests.tsx

@@ -0,0 +1,10 @@
+//import { render, screen } from '@tests-unit-browser';
+import "@testing-library/jest-dom";
+
+import OptionTrace from "./func";
+
+describe("OptionTrace", () => {
+  it("should render", () => {
+    expect(true).toBe(true);
+  });
+});