docs: provide Component template

src/examples/Example/ExampleComponent.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'vitest'
+
+import { ExampleComponent } from './ExampleComponent'
+
+describe.skip('Run', () => {
+  test('renders the Run view', () => {
+    render(<ExampleComponent foo={'foo'} />)
+    expect(screen.getByText(/foo/i)).toBeDefined()
+  })
+})

src/examples/Example/ExampleComponent.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import { NestedComponent } from './internal/components'
+import { doSomething, getClassName } from './internal/ExampleComponent.helpers'
+import { Foo } from './internal/ExampleComponent.types'
+
+interface IProps {
+  className?: string
+  foo: Foo
+}
+
+const LOCAL_CONSTANT = 'limited to the scope of this file'
+
+export const ExampleComponent: FC<IProps> = ({ className, foo }) => {
+  doSomething(foo)
+  return (
+    <div className={getClassName(className)}>
+      <NestedComponent />
+      <p>{LOCAL_CONSTANT}</p>
+    </div>
+  )
+}

src/examples/Example/index.ts

@@ -0,0 +1 @@
+export { ExampleComponent } from './ExampleComponent'

src/examples/Example/internal/ExampleComponent.helpers.ts

@@ -0,0 +1,19 @@
+import s from './example-component.module.scss'
+import { Foo } from './ExampleComponent.types'
+
+export const REUSED_CONSTANT = 'reused accross ExampleComponent module'
+
+export const getClassName = (className: string | undefined): string => {
+  const classNames = [s['example'], 'f']
+
+  if (className) {
+    classNames.push(className)
+  }
+
+  return classNames.join(' ')
+}
+
+export function doSomething(foo: Foo): void {
+  foo
+  REUSED_CONSTANT
+}

src/examples/Example/internal/ExampleComponent.types.ts

@@ -0,0 +1 @@
+export type Foo = string

src/examples/Example/internal/NestedComponent/NestedComponent.tsx

@@ -0,0 +1,3 @@
+export const NestedComponent = () => {
+  return <div>This is a nested component</div>
+}

src/examples/Example/internal/NestedComponent/index.ts

@@ -0,0 +1 @@
+export { NestedComponent } from './NestedComponent'

src/examples/Example/internal/components.ts

@@ -0,0 +1 @@
+export { NestedComponent } from './NestedComponent'

src/examples/Example/internal/example-component.module.scss

@@ -0,0 +1,3 @@
+.example {
+  display: block;
+}