feat: add create-react-app template to build apps with IBM Carbon (#1…

…3002)

* feat: add create-react-app template to build apps with IBM Carbon

* docs(cra): update readme and package.json fields

* chore(yarn): output of yarn install and yarn format

* chore(cra): exclude cra-template from the global eslint config

* fix(cra): exclude cra-template from stylelint linting

* fix(cra-template): exclude cra template from monorepo testing

* Update packages/cra-template/template/src/content/HomePage/Homepage.test.js

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

* Update packages/cra-template/template/src/content/HomePage/Homepage.test.js

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

* Update packages/cra-template/template/src/index.js

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

* Update packages/cra-template/template/src/content/RepoPage/RepoPage.js

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

* Update packages/cra-template/template/src/content/RepoPage/RepoPage.js

Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>

---------

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.eslintignore

@@ -9,6 +9,7 @@ umd
 
 node_modules
 packages/*/examples/*
+packages/cra-template
 
 # Components
 packages/components/demo/*.css

.stylelintignore

@@ -4,6 +4,7 @@
 **/vendor/**
 **/_inlined/**
 **/coverage/**
+**/cra-template/**
 
 # Generated SCSS directories and files
 **/packages/colors/**/*.scss

jest.config.js

@@ -17,6 +17,7 @@ module.exports = {
     '!**/*.stories.js',
     '!**/*-test.e2e.js',
   ],
+  modulePathIgnorePatterns: ['/cra-template/'],
   moduleNameMapper: {
     // This is a temporary workaround from moving to Jest v28. In this update,
     // certain dependencies are only providing ESM through exports and so we use

packages/cra-template/README.md

@@ -0,0 +1,38 @@
+# @carbon/cra-template
+
+This is the official Carbon Design System template for
+[Create React App](https://github.com/facebook/create-react-app).
+
+## Usage
+
+To use this template, add `--template @carbon` when creating a new app.
+
+For example:
+
+```
+npx create-react-app my-app --template @carbon
+
+# or
+
+yarn create react-app my-app --template @carbon
+```
+
+For more information, please refer to:
+
+- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to
+  create a new app.
+- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped
+  with Create React App.
+
+## Prerequisites
+
+A GitHub personal access token (PAT) is required for the example `/repopage` to
+be able to fetch repository data.
+
+1. [Create a personal access token in GitHub](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+2. Create an `.env` file in the root directory
+3. Add the token to the `.env` file
+
+```
+REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=xxx
+```

packages/cra-template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "cra-template",
+  "version": "0.0.0",
+  "description": "The Carbon Design System template for Create React App",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=16"
+  },
+  "keywords": [
+    "react",
+    "create-react-app",
+    "template",
+    "ibm",
+    "carbon",
+    "carbon-design-system",
+    "components",
+    "react"
+  ],
+  "main": "template.json",
+  "files": [
+    "template",
+    "template.json"
+  ]
+}

packages/cra-template/template.json

@@ -0,0 +1,38 @@
+{
+  "package": {
+    "dependencies": {
+      "@apollo/client": "^3.7.4",
+      "@carbon/react": "^1.20.0",
+      "@testing-library/jest-dom": "^5.16.5",
+      "@testing-library/react": "^12.0.0",
+      "@testing-library/user-event": "^12.0.0",
+      "react": "17.0.1",
+      "react-dom": "17.0.1",
+      "react-router-dom": "^6.6.2",
+      "react-scripts": "5.0.0",
+      "sass": "^1.57.1",
+      "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+      "extends": ["react-app", "react-app/jest"]
+    },
+    "browserslist": {
+      "production": [
+        ">0.2%",
+        "not dead",
+        "not op_mini all"
+      ],
+      "development": [
+        "last 1 chrome version",
+        "last 1 firefox version",
+        "last 1 safari version"
+      ]
+    }
+  }
+}

packages/cra-template/template/gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/cra-template/template/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

packages/cra-template/template/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

packages/cra-template/template/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

packages/cra-template/template/src/App.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import './App.scss';
+import { Content, Theme } from '@carbon/react';
+import AppHeader from './components/Header';
+import HomePage from './content/HomePage/HomePage';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+import RepoPage from './content/RepoPage';
+
+function App() {
+  const [appTheme, modifyAppTheme] = useState('white');
+  const sendDataToParent = (value) => {
+    modifyAppTheme(value);
+  };
+
+  return (
+    <Theme theme={appTheme}>
+      <AppHeader sendDataToParent={sendDataToParent} />
+      <Content>
+        <Router>
+          <Routes>
+            <Route path={'/'} element={<HomePage />} />
+            <Route path={'/repopage'} element={<RepoPage />} />
+          </Routes>
+        </Router>
+      </Content>
+    </Theme>
+  );
+}
+
+export default App;

packages/cra-template/template/src/App.scss

@@ -0,0 +1,3 @@
+@use './components/Header/header';
+@use 'content/HomePage/homepage';
+@use 'content/RepoPage/repo-page';

packages/cra-template/template/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  //const linkElement = screen.getByText(/learn react/i);
+  expect(true).toBe(true);
+});

packages/cra-template/template/src/components/Header/Header.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  Header,
+  HeaderName,
+  HeaderNavigation,
+  HeaderMenuItem,
+  HeaderGlobalBar,
+  RadioButtonGroup,
+  RadioButton,
+} from '@carbon/react';
+
+const AppHeader = (props) => {
+  return (
+    <Header aria-label="IBM Platform Name">
+      <div>
+        <HeaderName href="#" prefix="IBM">
+          [Platform]
+        </HeaderName>
+      </div>
+
+      <HeaderNavigation aria-label="IBM [Platform]">
+        <HeaderMenuItem href="/">Home</HeaderMenuItem>
+        <HeaderMenuItem href="/repopage">RepoPage</HeaderMenuItem>
+      </HeaderNavigation>
+      <HeaderGlobalBar>
+        <div className={'bx--cloud-header-list'}>
+          <RadioButtonGroup
+            name={'theme-selection'}
+            legendText={'Choose a theme'}
+            defaultSelected={'radio-1'}
+            data-testid={'theme-selection'}
+            onChange={(value) => {
+              // eslint-disable-next-line react/prop-types
+              props.sendDataToParent(value);
+            }}>
+            <RadioButton labelText={'White'} value={'white'} id={'radio-1'} />
+            <RadioButton labelText={'g10'} value={'g10'} id={'radio-2'} />
+            <RadioButton labelText={'g80'} value={'g90'} id={'radio-3'} />
+            <RadioButton labelText={'g100'} value={'g100'} id={'radio-4'} />
+          </RadioButtonGroup>
+        </div>
+      </HeaderGlobalBar>
+    </Header>
+  );
+};
+
+export default AppHeader;

packages/cra-template/template/src/components/Header/Header.test.js

@@ -0,0 +1,56 @@
+import { render, fireEvent, screen, cleanup } from '@testing-library/react';
+import AppHeader from './Header';
+//import renderer from 'react-test-renderer';
+afterEach(cleanup);
+
+let sendDataToParent = jest.fn().mockReturnValue('white');
+
+describe('Header', () => {
+  it('Check theme section - White', () => {
+    const sendDataToParent = jest.fn().mockReturnValue('White');
+    const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } =
+      render(<AppHeader sendDataToParent={sendDataToParent} />);
+    const radioButton = getByLabelText('White');
+    expect(radioButton).toBeInTheDocument();
+    expect(radioButton.checked).toEqual(false);
+    fireEvent.click(radioButton);
+    expect(sendDataToParent()).toEqual('White');
+    expect(radioButton.checked).toEqual(true);
+  });
+
+  it('Check theme section - g10', () => {
+    const sendDataToParent = jest.fn().mockReturnValue('g10');
+    const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } =
+      render(<AppHeader sendDataToParent={sendDataToParent} />);
+    const radioButton = getByLabelText('g10');
+    expect(radioButton).toBeInTheDocument();
+    expect(radioButton.checked).toEqual(false);
+    fireEvent.click(radioButton);
+    expect(sendDataToParent()).toEqual('g10');
+    expect(radioButton.checked).toEqual(true);
+  });
+
+  it('Check theme section - g80', () => {
+    const sendDataToParent = jest.fn().mockReturnValue('g80');
+    const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } =
+      render(<AppHeader sendDataToParent={sendDataToParent} />);
+    const radioButton = getByLabelText('g80');
+    expect(radioButton).toBeInTheDocument();
+    expect(radioButton.checked).toEqual(false);
+    fireEvent.click(radioButton);
+    expect(sendDataToParent()).toEqual('g80');
+    expect(radioButton.checked).toEqual(true);
+  });
+
+  it('Check theme section - g100', () => {
+    const sendDataToParent = jest.fn().mockReturnValue('g100');
+    const { getByTestId, queryByTestId, getByLabelText, queryByLabelText } =
+      render(<AppHeader sendDataToParent={sendDataToParent} />);
+    const radioButton = getByLabelText('g100');
+    expect(radioButton).toBeInTheDocument();
+    expect(radioButton.checked).toEqual(false);
+    fireEvent.click(radioButton);
+    expect(sendDataToParent()).toEqual('g100');
+    expect(radioButton.checked).toEqual(true);
+  });
+});

packages/cra-template/template/src/components/Header/_header.scss

@@ -0,0 +1,12 @@
+@use '@carbon/react/scss/colors';
+
+// overriding header tooltip bg color
+// because the navigation is dark themed while the content is white
+// which means the dark theme tooltip bg blends into the white content bg
+.cds--header__global .cds--popover-content {
+  background-color: colors.$gray-20;
+}
+
+.cds--header__global .cds--popover-caret {
+  background-color: colors.$gray-20;
+}

packages/cra-template/template/src/components/Header/index.js

@@ -0,0 +1,2 @@
+import AppHeader from './Header';
+export default AppHeader;