Add Gen 2 Remix to snippets folder (BuilderIO#4062)

Author: bwreid

.github/workflows/ci.yml

@@ -130,6 +130,7 @@ jobs:
             'nextjs-sdk-next-app',
             'react-sdk-next-14-app',
             'react-sdk-next-pages',
+            'remix',
             'svelte',
             'sveltekit',
             'solid',

packages/sdks/snippets/remix/.eslintrc.cjs

@@ -0,0 +1,86 @@
+/**
+ * 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,
+  },
+  ignorePatterns: ['!**/.server', '!**/.client'],
+
+  // Base config
+  extends: ['eslint:recommended'],
+  rules: {
+    'import/no-unresolved': ['error', { ignore: ['@builder.io/sdk-react'] }],
+  },
+  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.cjs'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

packages/sdks/snippets/remix/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env

packages/sdks/snippets/remix/README.md

@@ -0,0 +1,40 @@
+# Welcome to Remix!
+
+- 📖 [Remix docs](https://remix.run/docs)
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### 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 `npm run build`
+
+- `build/server`
+- `build/client`
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

packages/sdks/snippets/remix/app/components/CustomColumns.tsx

@@ -0,0 +1,49 @@
+import {
+  Blocks,
+  BuilderBlock,
+  RegisteredComponent,
+} from '@builder.io/sdk-react';
+
+interface CustomColumnsProps {
+  column1: BuilderBlock[];
+  column2: BuilderBlock[];
+  builderBlock: BuilderBlock;
+}
+
+const CustomColumns = (props: CustomColumnsProps) => {
+  return (
+    <>
+      <Blocks
+        blocks={props.column1}
+        path="column1"
+        parent={props.builderBlock.id}
+      />
+
+      <Blocks
+        blocks={props.column2}
+        path="column2"
+        parent={props.builderBlock.id}
+      />
+    </>
+  );
+};
+
+export const customColumnsInfo: RegisteredComponent = {
+  name: 'MyColumns',
+  component: CustomColumns,
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+  inputs: [
+    {
+      name: 'column1',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+    {
+      name: 'column2',
+      type: 'uiBlocks',
+      defaultValue: [],
+    },
+  ],
+};

packages/sdks/snippets/remix/app/components/CustomHero.tsx

@@ -0,0 +1,34 @@
+import { RegisteredComponent } from '@builder.io/sdk-react';
+import { ReactNode } from 'react';
+
+interface CustomHeroProps {
+  children: ReactNode;
+}
+
+const CustomHero = (props: CustomHeroProps) => {
+  return (
+    <>
+      <div>This is text from your component</div>
+
+      {props.children}
+    </>
+  );
+};
+
+export const customHeroInfo: RegisteredComponent = {
+  component: CustomHero,
+  name: 'CustomHero',
+  inputs: [],
+  canHaveChildren: true,
+  defaultChildren: [
+    {
+      '@type': '@builder.io/sdk:Element',
+      component: {
+        name: 'Text',
+        options: {
+          text: 'This is Builder text',
+        },
+      },
+    },
+  ],
+};

packages/sdks/snippets/remix/app/components/CustomTabs.tsx

@@ -0,0 +1,64 @@
+import {
+  Blocks,
+  BuilderBlock,
+  RegisteredComponent,
+} from '@builder.io/sdk-react';
+import { useState } from 'react';
+
+interface TabProps {
+  tabList?: { tabName: string; blocks: BuilderBlock[] }[];
+  builderBlock: BuilderBlock;
+}
+
+export const CustomTabs = ({ tabList, builderBlock }: TabProps) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (!tabList?.length) return null;
+
+  return (
+    <>
+      <div className="tab-buttons">
+        {tabList.map((tab, index) => (
+          <button
+            key={index}
+            className={`tab-button ${activeTab === index ? 'active' : ''}`}
+            onClick={() => setActiveTab(index)}
+          >
+            {tab.tabName}
+          </button>
+        ))}
+      </div>
+
+      <Blocks
+        parent={builderBlock?.id}
+        path={`tabList.${activeTab}.blocks`}
+        blocks={tabList[activeTab].blocks}
+      />
+    </>
+  );
+};
+
+export const customTabsInfo: RegisteredComponent = {
+  component: CustomTabs,
+  name: 'TabFields',
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+  },
+  inputs: [
+    {
+      name: 'tabList',
+      type: 'list',
+      subFields: [
+        {
+          name: 'tabName',
+          type: 'string',
+        },
+        {
+          name: 'blocks',
+          type: 'uiBlocks',
+          defaultValue: [],
+        },
+      ],
+    },
+  ],
+};

packages/sdks/snippets/remix/app/components/ProductFooter.tsx

@@ -0,0 +1,7 @@
+export default function FooterComponent() {
+  return (
+    <div>
+      <p>© 2024 Acme Corp. All rights reserved.</p>
+    </div>
+  );
+}

packages/sdks/snippets/remix/app/components/ProductHeader.tsx

@@ -0,0 +1,7 @@
+export default function HeaderComponent() {
+  return (
+    <div>
+      <h1>Acme Corp</h1>
+    </div>
+  );
+}

packages/sdks/snippets/remix/app/components/ProductInfo.tsx

@@ -0,0 +1,35 @@
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  category: string;
+  image: string;
+  rating: {
+    rate: number;
+    count: number;
+  };
+};
+
+export default function ProductInfoComponent({
+  product,
+}: {
+  product: Product | null;
+}) {
+  if (!product) return null;
+
+  return (
+    <div>
+      <div className="product-image">
+        <img src={product.image} alt={product.title} />
+      </div>
+      <div className="product-info">
+        <h2>{product.title}</h2>
+        <p>{product.description}</p>
+        <p>Price: {product.price} $</p>
+        <p>Rating: {product.rating.rate} / 5</p>
+        <button>Buy now</button>
+      </div>
+    </div>
+  );
+}