Skip to content

Commit fe372c4

Browse files
enZaneenZane
authored
✨ feat: Add react router starter (#148)
* ✨ feat: Add react router starter * 🔨 feat: Add react router script * 🔧 feat: Add react router workspace * 🔧 feat: Add starter setup * 🔨 feat: setup gqltada * 💄 feat: Add components * ✨ feat: Setup starter * 📝 feat: Update readme * 🙈 feat: Update gitignore * ✨ feat: Setup node
1 parent 87b2321 commit fe372c4

File tree

115 files changed

+21860
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

115 files changed

+21860
-0
lines changed

‎.vscode/drupal-decoupled.code-workspace‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616
"name": "next - starter",
1717
"path": "../starters/next"
1818
},
19+
{
20+
"name": "react-router - starter",
21+
"path": "../starters/react-router"
22+
},
1923
{
2024
"name": "remix - starter",
2125
"path": "../starters/remix"

‎scripts/copy-components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const STARTERS = {
77
STORYBOOK: "starters/storybook/app",
88
REMIX: "starters/remix/app",
99
NEXT: "starters/next",
10+
REACT_ROUTER: "starters/react-router",
1011
} as const;
1112

1213
const NEXT_CLIENT_COMPONENTS = ["Header"];

‎starters/react-router/.env.example‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# use your site url and comment adding # to the orther
2+
# ddev
3+
DRUPAL_AUTH_URI=http://drupal-decoupled.ddev.site
4+
# lando
5+
# DRUPAL_AUTH_URI=http://drupal-decoupled.lndo.site
6+
7+
# You can use the previously generated `DRUPAL_CLIENT_ID` and `DRUPAL_CLIENT_SECRET` values shown on the CLI or as a warning message.
8+
# You can reuse the previously generated Consumers at the site by visiting `admin/config/services/consumer` to edit the consumers labeled as `Viewer` & `Previewer` and assigning them a new secret value.
9+
# For this demo use the one with the scope Previewer
10+
DRUPAL_CLIENT_ID=
11+
DRUPAL_CLIENT_SECRET=
12+
13+
# use your site url and comment adding # to the orther
14+
# ddev
15+
DRUPAL_GRAPHQL_URI=http://drupal-decoupled.ddev.site/graphql
16+
# lando
17+
# DRUPAL_GRAPHQL_URI=http://drupal-decoupled.lndo.site/graphql
18+
19+
# use preview or production
20+
ENVIRONMENT=preview
21+
PORT=8080

‎starters/react-router/.eslintrc.cjs‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* This is intended to be a basic starting point for linting in your app.
3+
* It relies on recommended configs out of the box for simplicity, but you can
4+
* and should modify this configuration to best suit your team's needs.
5+
*/
6+
7+
/** @type {import('eslint').Linter.Config} */
8+
module.exports = {
9+
root: true,
10+
parserOptions: {
11+
ecmaVersion: 'latest',
12+
sourceType: 'module',
13+
ecmaFeatures: {
14+
jsx: true,
15+
},
16+
},
17+
env: {
18+
browser: true,
19+
commonjs: true,
20+
es6: true,
21+
},
22+
23+
// Base config
24+
extends: ['eslint:recommended', 'plugin:storybook/recommended'],
25+
26+
overrides: [
27+
// React
28+
{
29+
files: ['**/*.{js,jsx,ts,tsx}'],
30+
plugins: ['react', 'jsx-a11y'],
31+
extends: [
32+
'plugin:react/recommended',
33+
'plugin:react/jsx-runtime',
34+
'plugin:react-hooks/recommended',
35+
'plugin:jsx-a11y/recommended',
36+
],
37+
settings: {
38+
react: {
39+
version: 'detect',
40+
},
41+
formComponents: ['Form'],
42+
linkComponents: [
43+
{ name: 'Link', linkAttribute: 'to' },
44+
{ name: 'NavLink', linkAttribute: 'to' },
45+
],
46+
'import/resolver': {
47+
typescript: {},
48+
},
49+
},
50+
},
51+
52+
// Typescript
53+
{
54+
files: ['**/*.{ts,tsx}'],
55+
plugins: ['@typescript-eslint', 'import'],
56+
parser: '@typescript-eslint/parser',
57+
settings: {
58+
'import/internal-regex': '^~/',
59+
'import/resolver': {
60+
node: {
61+
extensions: ['.ts', '.tsx'],
62+
},
63+
typescript: {
64+
alwaysTryTypes: true,
65+
},
66+
},
67+
},
68+
extends: [
69+
'plugin:@typescript-eslint/recommended',
70+
'plugin:import/recommended',
71+
'plugin:import/typescript',
72+
],
73+
},
74+
75+
// Node
76+
{
77+
files: ['.eslintrc.cjs'],
78+
env: {
79+
node: true,
80+
},
81+
},
82+
],
83+
}

‎starters/react-router/.gitignore‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.DS_Store
2+
/node_modules/
3+
*.tsbuildinfo
4+
5+
# React Router
6+
/.react-router/
7+
/build/
8+
9+
# yalc
10+
.yalc
11+
12+
.env
13+
14+
app/graphql/fragments/generated
15+
*storybook.log
16+
storybook-static

‎starters/react-router/.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
app/graphql/generated/*
2+
app/components/ui/**/*.mdx

‎starters/react-router/.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"typescript.enablePromptUseWorkspaceTsdk": true
4+
}

‎starters/react-router/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Drupal Decoupled: Remix
2+
3+
## Getting Started
4+
5+
Visit the docs to see how to use this [React Router](https://drupal-decoupled.octahedroid.com/docs/getting-started/quickstart/remix) starter.
6+
7+
## Supporting organizations
8+
9+
Development sponsored by [Octahedroid](https://octahedroid.com/)

‎starters/react-router/app/app.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import 'tailwindcss' source('.');
2+
3+
@theme {
4+
--font-sans:
5+
'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
6+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
7+
}
8+
9+
html,
10+
body {
11+
@apply bg-white dark:bg-gray-950;
12+
13+
@media (prefers-color-scheme: dark) {
14+
color-scheme: dark;
15+
}
16+
}

‎starters/react-router/app/components/blocks/Article/Article.stories.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
import { Article } from '~/components/blocks'
3+
4+
const meta: Meta<typeof Article> = {
5+
title: 'Blocks/Article',
6+
component: Article,
7+
parameters: {
8+
layout: 'fullscreen',
9+
},
10+
tags: ['autodocs'],
11+
argTypes: {
12+
title: { control: 'text' },
13+
summary: { control: 'text' },
14+
content: { control: 'text' },
15+
image: { control: 'object' },
16+
tags: { control: 'object' },
17+
publishDate: { control: 'date' },
18+
author: { control: 'object' },
19+
},
20+
args: {
21+
title: 'How designers estimate the impact of UX?',
22+
summary: 'Designers wear many hats, the first one being a moderator.',
23+
content: `
24+
<p>Designers aren't purely focused on aesthetics — their role encompasses broader business aspects and technology, while carefully evaluating those by estimating the return on investment for each solution.</p>
25+
<p>In short, designers ensure that the end value of the specific solution, or product as a whole, brings gains to the client's business as expected and a significant return against the initial investment.</p>
26+
<h3>Core Areas of Focus</h3>
27+
<p>At intive, our designers maintain this awareness by developing across three core areas:</p>
28+
<ul>
29+
<li>Business</li>
30+
<li>Technology</li>
31+
<li>User-centric design practices</li>
32+
</ul>
33+
<p>For each vertical, they keep ROI in mind, taking care to estimate and realize the impact of UX on the client's budget, goals, and wider technical framework.</p>
34+
`,
35+
image: {
36+
src: '/placeholders/drupal-decoupled/landscape-large.png',
37+
alt: 'A cartoon character on a beach with an ice cream',
38+
},
39+
tags: ['UX', 'Design', 'Business'],
40+
publishDate: 1667260800,
41+
author: {
42+
avatar: {
43+
src: '/placeholders/doc-tahedroid/avatar.png',
44+
name: 'Doc Tahedroid',
45+
},
46+
name: 'Doc Tahedroid',
47+
},
48+
},
49+
}
50+
51+
export default meta
52+
type Story = StoryObj<typeof Article>
53+
54+
export const Default: Story = {}
55+
56+
export const WithoutSummary: Story = {
57+
args: {
58+
summary: undefined,
59+
},
60+
}
61+
62+
export const WithoutTags: Story = {
63+
args: {
64+
tags: undefined,
65+
},
66+
}
67+
68+
export const LongTitle: Story = {
69+
args: {
70+
title:
71+
'This is a very long title that should wrap to multiple lines in the article component',
72+
},
73+
}
74+
75+
export const ShortContent: Story = {
76+
args: {
77+
content: '<p>This is a short article content.</p>',
78+
},
79+
}
80+
81+
export const DifferentDate: Story = {
82+
args: {
83+
publishDate: 1684108800,
84+
},
85+
}

0 commit comments

Comments
 (0)