initialize the project

.eslintrc.cjs

@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended", "plugin:storybook/recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.github/workflows/sanity-checks.yml

@@ -0,0 +1,33 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Sanity Checks Workflow
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '21.0.0'
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Lint Codebase
+        run: yarn lint
+
+      - name: Test::unit
+        run: yarn test
+
+      - name: Build
+        run: yarn build

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+.env.local
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+21.0.0

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../app/**/*.mdx",
+    "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import '../app/tailwind.css';
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -0,0 +1,70 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+yarn run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+yarn run build
+```
+
+Then run the app in production mode:
+
+```sh
+yarn start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+## Lint
+
+Lint your code with:
+
+```sh
+yarn run lint
+```
+
+## Test
+
+Run your tests with:
+
+```sh
+yarn run test
+```
+
+## Storybook
+
+Run your storybook with:
+
+```sh
+yarn run storybook
+```
+
+## Hygen: Create a new UI Component
+
+Scaffold a new UI component (component, stories and test) with:
+
+```sh
+yarn run component:new
+```
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`

_templates/component/with-prompt/component.ejs.t

@@ -0,0 +1,22 @@
+---
+to: app/components/ui/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.tsx
+---
+
+import clsx from 'clsx';
+
+type <%= h.changeCase.pascal(name) %>Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const <%= h.changeCase.pascal(name) %> = ({
+  className,
+  children,
+}: <%= h.changeCase.pascal(name) %>Props) => {
+
+  return (
+    <div className={clsx('flex flex-col', className)} data-testid="<%= h.changeCase.paramCase(name) %>">
+      {children}
+    </div>
+  );
+};

_templates/component/with-prompt/index.ejs.t

@@ -0,0 +1,4 @@
+---
+to: app/components/ui/<%= h.changeCase.pascal(name) %>/index.ts
+---
+export { <%= h.changeCase.pascal(name) %> } from './<%= h.changeCase.pascal(name) %>.tsx';

_templates/component/with-prompt/prompt.cjs

@@ -0,0 +1,10 @@
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+module.exports = [
+  {
+    type: 'input',
+    name: 'name',
+    message: "What's your component name ?"
+  }
+]

_templates/component/with-prompt/story.ejs.t

@@ -0,0 +1,30 @@
+---
+to: app/components/ui/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.stories.tsx
+---
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { <%= h.changeCase.pascal(name) %> } from './<%= h.changeCase.pascal(name) %>';
+
+const meta = {
+  title: 'UI/<%= h.changeCase.pascal(name) %>',
+  component: <%= h.changeCase.pascal(name) %>,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<typeof <%= h.changeCase.pascal(name) %>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default <%= h.changeCase.pascal(name) %>',
+  },
+};

_templates/component/with-prompt/test.ejs.t

@@ -0,0 +1,14 @@
+---
+to: app/components/ui/<%= h.changeCase.pascal(name) %>/<%= h.changeCase.pascal(name) %>.spec.tsx
+---
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { <%= h.changeCase.pascal(name) %> } from './<%= h.changeCase.pascal(name) %>';
+
+describe('<%= h.changeCase.pascal(name) %>', () => {
+  it('renders children', () => {
+    render(<<%= h.changeCase.pascal(name) %>>Hello world</<%= h.changeCase.pascal(name) %>>);
+    expect(screen.getByTestId('<%= h.changeCase.param(name) %>')).toBeInTheDocument();
+    expect(screen.getByTestId('<%= h.changeCase.param(name) %>')).toHaveTextContent('Hello world');
+  });
+});

_templates/generator/help/index.ejs.t

@@ -0,0 +1,5 @@
+---
+message: |
+  hygen {bold generator new} --name [NAME] --action [ACTION]
+  hygen {bold generator with-prompt} --name [NAME] --action [ACTION]
+---

_templates/generator/new/hello.ejs.t

@@ -0,0 +1,18 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
+---
+---
+to: app/hello.js
+---
+const hello = ```
+Hello!
+This is your first hygen template.
+
+Learn what it can do here:
+
+https://github.com/jondot/hygen
+```
+
+console.log(hello)
+
+

_templates/generator/with-prompt/hello.ejs.t

@@ -0,0 +1,18 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/hello.ejs.t
+---
+---
+to: app/hello.js
+---
+const hello = ```
+Hello!
+This is your first prompt based hygen template.
+
+Learn what it can do here:
+
+https://github.com/jondot/hygen
+```
+
+console.log(hello)
+
+

_templates/generator/with-prompt/prompt.ejs.t

@@ -0,0 +1,14 @@
+---
+to: _templates/<%= name %>/<%= action || 'new' %>/prompt.js
+---
+
+// see types of prompts:
+// https://github.com/enquirer/enquirer/tree/master/examples
+//
+module.exports = [
+  {
+    type: 'input',
+    name: 'message',
+    message: "What's your message?"
+  }
+]

_templates/init/repo/new-repo.ejs.t

@@ -0,0 +1,4 @@
+---
+setup: <%= name %>
+force: true # this is because mostly, people init into existing folders is safe
+---