carbon-design-system/carbon-tutorial

An app for the Carbon Design System tutorial

Important

This tutorial has been replaced by our Carbon React Tutorial using Next.js. Head over there to learn more.

carbon-tutorial's Issues

Tutorial does not work on mac with latest node.

React tutorial does not work with latest node on mac. I raised #5395 on the carbon repo - because the link at the side of the tutorial led me there.

I have node v13.7.0 and am running a on a mac. I followed the instruction on you web site https://www.carbondesignsystem.com/tutorial/react/step-1. This is such a bad first impression of Carbon. I was hoping to pick up a recent set of dependancies that I would use as a the basis of a project, but it seems the levels of software associated with this tutorial are very backlevel. I notice Carbon has just supported node 12 in #5391.

When I enter yarn, it fails I get errors:
"% yarn

yarn install v1.22.0

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

[1/4] ⠂ fsevents

[2/4] ⠂ fsevents

[-/4] ⠂ waiting...

warning Error running install script for optional dependency: "/Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents: Command failed.

Exit code: 1

Command: node install

Arguments:

Directory: /Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents

Output:

node-pre-gyp info it worked if it ends with ok

node-pre-gyp info using [email protected]

node-pre-gyp info using [email protected] | darwin | x64

node-pre-gyp info check checked for "/Users/davidradley/carbon-tutorial/node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v79-darwin-x64/fse.node" (not found)"

I deleted yarn.lock and get
"yarn
yarn install v1.22.0
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning react-scripts > [email protected]: Way too old
warning react-scripts > react-app-polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > workbox-webpack-plugin > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > eslint > file-entry-cache > flat-cache > [email protected]: CircularJSON is in maintenance only, flatted is its successor.
warning react-scripts > jest > jest-cli > jest-config > babel-core > babel-register > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning react-scripts > jest > jest-cli > prompts > [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit https://github.com/lukeed/kleur/releases/tag/v3.0.0\ for migration path(s).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > workbox-webpack-plugin > workbox-build > joi > topo > [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning react-scripts > jest > jest-cli > jest-environment-jsdom > jsdom > [email protected]: use String.prototype.padStart()
warning react-scripts > jest > jest-cli > jest-environment-jsdom > jsdom > [email protected]: request has been deprecated, see request/request#3142
warning @commitlint/cli > babel-polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning node-sass > [email protected]: request has been deprecated, see request/request#3142
warning node-sass > node-gyp > [email protected]: request has been deprecated, see request/request#3142
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
"

Additional information
Screenshots or code
Notes
@davidradl davidradl added the type: bug 🐛 label 3 hours ago
@davidradl

Author
davidradl commented 32 minutes ago
I notice #5391 has just gone in. I assume that the tutorial will be updated in due course.

@davidradl

I am closing this issue - I will raise against the carbon tutorial repo.

Attach files by dragging & dropping, selecting or pasting them.
Remember, contributions to this repository should follow its contributing guidelines and code of conduct.
Assignees
No one assigned
Labels
type: bug 🐛
Projects
None yet
Milestone
No milestone
Linked pull requests
Successfully merging a pull request may close this issue.

None yet
Notifications
Customize
You’re receiving notifications because you authored the thread.
1 participant
@davidradl
© 2020 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About

What browser are you working in? Chrome.

Host each completed step and embed

Step 3 Query Component step instructions causing errors

Instructions in step 3 are not working:
https://www.carbondesignsystem.com/tutorial/react/step-3#query-component

When following this section in step 3, the repo page is broken.

See this PR for an example: https://github.com/carbon-design-system/carbon-tutorial/pull/2894/files#submit-review

Add tests to each tutorial branch that should pass on completion of step

Do this after all tutorial steps have been completed.

• Update branch READMEs to be consistent with master README

@include carbon--type-style("productive-heading-05"); ^ No mixin named carbon--type-style

Detailed description

Describe in detail the issue you're having.

Is this a feature request (new component, new icon), a bug, or a general issue?

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or code
• Notes

Add to website nav when we release each tutorial step

  "tutorial": {
    "title": "Tutorial",
    "sub-nav": {
      "overview": {
        "title": "Introduction"
      },
      "react-step-1": {
        "title": "1. Installing Carbon"
      },
      "react-step-2": {
        "title": "2. Building pages"
      },
      "react-step-3": {
        "title": "3. Using APIs"
      },
      "react-step-4": {
        "title": "4. Creating components"
      },
      "react-step-5": {
        "title": "5. Deploying to IBM Cloud"
      }
    }
  },

Step 3: IE11 has JS errors

git push origin requires personal token to login

The tutorial step1 step that requires pushing the step1 branch to origin fails git authentication.

I used my git account password and authentication failed. Googling led me to learning that you have to create a personal access token and use that to authenticate. Far from intuitive.

Please add a note of guidance to that step telling the student that they must go to:
User->Settings->Developer Settings->Personal Access Token and create a new token. Use that token for the login challenge that the push will cause.

Why the tutorial website is down?

Summary

Dear All,

I am trying to access the tutorial website as I am currently in the last step but it gives error 404, Please advice

https://www.carbondesignsystem.com/tutorial/react-step-5

Relevant information

Tutorial Instructions link in the readme.md is broken

Tutorial Instructions link in the readme.md is broken

Node Version Not Specified

Hi! Thanks for maintaining this repo 🙏

I'm encountering an error. I won't post the whole stack here, but this is part of it:

node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)

Generally when I see something like this, my first step is to look to the node version, but I noticed the node version isn't specified in the repository which can lead to issues. I noticed there are two old issues about not working with latest node.

I'd recommend:

1. Adding to package.json

  "engines": {
    "node": "11.5.0"
  },

2. Adding an .nvmrc or .node-version file which specifies the node version.

3. Adding instructions to the README which recommend installing fnm with --use-on-cd so that the correct node version is quickly and automatically selected and installed if necessary.

That should solve this forever!

Happy to open a PR if someone will tell me what the correct node version is!

Thanks
-Lee

Netlify deploy failed

Hey, can somebody help with this logs?

3:00:26 PM: Build ready to start
3:00:28 PM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
3:00:28 PM: build-image tag: v3.3.5
3:00:28 PM: buildbot version: 036f37945d6de439a17a554b3ae02e2f8f0f1fb0
3:00:28 PM: Fetching cached dependencies
3:00:28 PM: Starting to download cache of 367.4MB
3:00:32 PM: Finished downloading cache in 3.30976444s
3:00:32 PM: Starting to extract cache
3:00:43 PM: Finished extracting cache in 11.457219468s
3:00:43 PM: Finished fetching cache in 14.941905633s
3:00:43 PM: Starting to prepare the repo for build
3:00:44 PM: Preparing Git Reference pull/3621/head
3:00:45 PM: Starting build script
3:00:45 PM: Installing dependencies
3:00:46 PM: Started restoring cached node version
3:00:51 PM: Finished restoring cached node version
3:00:52 PM: v10.18.1 is already installed.
3:00:53 PM: Now using node v10.18.1 (npm v6.13.4)
3:00:53 PM: Attempting ruby version 2.6.2, read from environment
3:00:54 PM: Using ruby version 2.6.2
3:00:54 PM: Using PHP version 5.6
3:00:54 PM: Started restoring cached node modules
3:00:54 PM: Finished restoring cached node modules
3:00:54 PM: Started restoring cached yarn cache
3:00:54 PM: Finished restoring cached yarn cache
3:00:55 PM: Installing NPM modules using Yarn version 1.15.2
3:00:57 PM: yarn install v1.15.2
3:00:58 PM: [1/4] Resolving packages...
3:00:58 PM: [2/4] Fetching packages...
3:01:20 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:01:20 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:01:20 PM: info [email protected]: The platform "linux" is incompatible with this module.
3:01:20 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
3:01:20 PM: [3/4] Linking dependencies...
3:01:20 PM: warning " > [email protected]" has incorrect peer dependency "[email protected]".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "carbon-icons@^7.0.7".
3:01:20 PM: warning "carbon-components-react > [email protected]" has unmet peer dependency "prop-types@>=15".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning " > [email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-utilities@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-cache@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-link@^1.2.12".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-utilities@^1.3.2".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "@types/react@^16.8.0".
3:01:20 PM: warning "react-apollo > @apollo/[email protected]" has unmet peer dependency "apollo-client@^2.6.4".
3:01:33 PM: [4/4] Building fresh packages...
3:01:34 PM: Done in 36.34s.
3:01:34 PM: NPM modules installed using Yarn
3:01:34 PM: Started restoring cached go cache
3:01:34 PM: Finished restoring cached go cache
3:01:34 PM: unset GOOS;
3:01:34 PM: unset GOARCH;
3:01:34 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
3:01:34 PM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
3:01:34 PM: go version >&2;
3:01:34 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
3:01:34 PM: go version go1.12 linux/amd64
3:01:34 PM: Installing missing commands
3:01:34 PM: Verify run directory
3:01:34 PM: Executing user command: yarn build
3:01:34 PM: yarn run v1.15.2
3:01:35 PM: $ react-scripts build
3:01:36 PM: Creating an optimized production build...
3:01:38 PM: Failed to compile.
3:01:38 PM: ./src/index.js
3:01:38 PM: Error: [BABEL] /opt/build/repo/src/index.js: Cannot find module '@babel/helper-create-regexp-features-plugin' (While processing: "/opt/build/repo/node_modules/babel-preset-react-app/index.js")
3:01:38 PM: error Command failed with exit code 1.
3:01:38 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
3:01:38 PM: Skipping functions preparation step: no functions directory set
3:01:38 PM: Caching artifacts
3:01:38 PM: Started saving node modules
3:01:38 PM: Finished saving node modules
3:01:38 PM: Started saving yarn cache
3:01:38 PM: Finished saving yarn cache
3:01:38 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:01:38 PM: Started saving pip cache
3:01:38 PM: Finished saving pip cache
3:01:38 PM: Started saving emacs cask dependencies
3:01:38 PM: Finished saving emacs cask dependencies
3:01:38 PM: Started saving maven dependencies
3:01:38 PM: Finished saving maven dependencies
3:01:38 PM: Started saving boot dependencies
3:01:38 PM: Shutting down logging, 6 messages pending

Step 4: Missing a DAP violation

Running the DAP tool at the completion of the Step 4 carbon component tutorial shows 5 violations, rather than the 4 shown in the tutorial page.

There are 4 violations for the

elements, as expected, plus one for the

element (missing aria-label or aria-labelledby) that is not mentioned.

(seen in the screen shot under "Elements containing a 'region' role must be labeled with aria-label or arial-labelledby.")

UI Shell Header Nav not showing Menu Items

Navigation bar no longer showing Repositories tab in Carbon Tutorial. Works when using a previous version of carbon components (10.3.0 and 7.3.0).

Reference carbon-design-system/carbon#3546

unclear instructions and/or 'File not found error' occuring in Step1 when renaming app.css to app.scss

Hi
Regarding Step1:
The instructions are not clear on what to do with App.css in the src directory. I assumed by 'moving' it meant to rename it to app.scss but by doing so an error occurs that the file is not the same or not found. I determined that the file in the directory is called App.css and the line to import as far as the instructions say, is app.scss. There is a case sensitive issue here. Once I renamed this file in the src folder from 'App' to 'app', the error went away. Perhaps I missed something but the instructions are unclear at the very least. Additionally, perhaps my system is the cause of the issue. In any case, I have Windows 10 and working on the CMD prompt. A lot of the instructions have the $ when I copy them from the tutorial, should I be using *nix instead?
Thanks

Instructions
"
Re-compiling all of the Carbon Sass takes a while, even on fast systems. Let’s speed this up by moving our custom app Sass into a separate file, app.scss in the ‘src’ directory, and import that from App.js.
src/App.js
import "./app.scss";
"

Write Overview page

We need an "Overview" page in carbon-website that introduces who the tutorial is for (developers), what's getting built, how it's getting built (React), prerequisites, and an overview of each tutorial step.

This can wait until tutorial steps 1 - 5 are put together. I'd be nice to have this include a gif of the completed tutorial, or even a link to a deployed tutorial app.

Accessibility issues

• Multiple navigation landmarks must have unique labels specified with aria-label
• Use headings instead of bold elements

No mention of having to change the link to specific region when logging into IBM Cloud

Step 1 give mention to the Link component's to property

The step explains how we need to use the element prop with the UI shell, but not that we also need to change the href to the to prop. It's in the code snippet, but could get overlooked.

SkipToContent property href does not work with HashRouter

@nxn-4-wdf commented on Fri Aug 09 2019

Environment

Operating system

Any.

Browser

Any.

Detailed description

What version of the Carbon Design System are you using?
10.4

As instructed in the Carbon tutorial, app uses a UI-Shell with header navigation and react-router-dom Link components, which lead to different pages sorted by a HashRouter. In order to enable navigation to internal page anchors, page also uses HashLink components from react-router-hash-link.

What did you expect to happen?

With keyboard navigation, pressing on the Enter-key when on the SkipToContent should remain on the same page and scroll to the HTML element with id="main-content".

What happened instead?

Application tries to navigate to /#/main-content which renders the default Router page, instead of staying on the same page.

Steps to reproduce the issue

Example application on CodeSandBox: https://37eph.csb.app/

From there, using keyboard navigation ("Tab" and "Shift-Tab"):

1. Select header navigation Page two and press the Enter-key
2. With Shift-Tab combination, get back to display SkipToContent element. Partial screenshot:
   
3. Press the Enter-key: page is changed (NOT expected), and as a side-effect, scroll amount is wrong (page heading is masked by the header bar)
   

Please create a reduced test case in CodeSandbox

Code is here : https://codesandbox.io/s/skiptocontent-37eph

Additional information

• Screenshots or code: see above

---

@dakahn commented on Mon Sep 30 2019

Hello friend! I think this issue should be filed against the Carbon Tutorial repository.

React-Step-1: Import button from carbon-components-react not work

Detailed description

In the React Step 1, there is import Button step:

Next we’ll import a Button from Carbon to test that our dependencies are working properly. At the top of App.js, import the Button by adding the following:
import { Button } from 'carbon-components-react';

But when I run to this code, it always throws exception, I am on Mac using Node v8.17.0.

Describe in detail the issue you're having.

Failed to compile
./node_modules/carbon-components-react/es/components/Icon/Icon.js
Module not found: Can't resolve 'carbon-icons' in '$HOME/Documents/CMDP/sourcecode/carbon-tutorial/node_modules/carbon-components-react/es/components/Icon'

Is this a feature request (new component, new icon), a bug, or a general issue?
a bug

Is this issue related to a specific component?

Carbon-Icon

What did you expect to happen? What happened instead? What would you like to see changed?

When I am using the below code, it works for me and error disappeard. I would like to know if this code should be updated into the Carbon tutorial guide.

import Button from 'carbon-components-react/lib/components/Button/Button';

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

"dependencies": {
    "@carbon/icons-react": "^10.9.1",
    "carbon-components": "^10.10.1",
    "carbon-components-react": "^7.10.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.1.2",
    "react-scripts": "2.1.8"
  },
  "devDependencies": {
    "@commitlint/cli": "^7.5.2",
    "@commitlint/config-conventional": "^7.5.0",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.5",
    "node-sass": "^4.13.1",
    "prettier": "^1.17.0"
  },

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one

import a Button from Carbon using code:

src/App.js

import { Button } from 'carbon-components-react';

2. Step two

In the App component return, you can now replace:
src/App.js

<div>
  Hello Carbon! Well, not quite yet. This is the starting point for the Carbon tutorial.
</div>

with:

<Button>Button</Button>

3. Step three
   issue occurs

Additional information

• Screenshots or code
• Notes
  Previously it was using

import Button from 'carbon-components-react/lib/components/Button/Button';

needs to be updated to how we previously imported Button as

import { Button } from 'carbon-components-react';

see
#44

Step 0: better hello world

The starting point of step 1 branch just says "Hello world". I like how it has the failing tests. Maybe we can keep around the create-react-app spinning logo so they start the tutorial, check out step 1, see create-react-app that is familiar to them. See failing test. Then trim out create-react-app files when doing step 1.

Step 1: only include Carbon imports in index.scss

Any app-specific Sass should live in a separate file App.scss or something because it takes a long time to build our entire Sass source.

I think we should be able to update instruction in carbon-website, and then PR the change into react-step-2 branch?

tutorial-header.scss not found

following step-1 tutorial I got this error:

./src/app.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/app.scss)
@import './components/TutorialHeader/tutorial-header.scss';
^
      File to import not found or unreadable: ./components/TutorialHeader/tutorial-header.scss.
      in /Users/chechu/RHOS/carbon-tutorial/src/app.scss (line 2, column 1)

I don't see anywhere this file is created in the tutorial

Step 1 has inconsistent Button imports

The code snippet in https://www.carbondesignsystem.com/tutorial/react-step-1 that says

import Button from 'carbon-components-react/lib/components/Button/Button';

needs to be updated to how we previously imported Button as

import { Button } from 'carbon-components-react';

Generate screenshots for steps 1 - 5

After steps 1 - 5 are put together, go through the tutorial one final time and generate consistent screenshots to include in the carbon-website pages. At minimum, include an end-of-step screenshot in each page.

We can do this last in case we need to shift around content among steps during tutorial construction.

Update README on master branch

Explain how to use this repo using Carbon website tutorial.

Step2: Undefined variable: "$spacing-05".

I've followed your tutorial and my code seems to be fine.
However when I compile I run into this error:

Undefined variable: "$spacing-05".

/src/app.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/app.scss)
padding-top: $spacing-05;
^
Undefined variable: "$spacing-05".

I guess this should be a context variable available within the framework.
Please check the attached screenshot for more details. Thanks.

dependency to deprecated version of fsevents

Detailed description

There seems to be a deprecated dependency to the fsevents module. Although the server starts a lot of errors appear while installing.
Am I missing something?

warning Error running install script for optional dependency: "./node_modules/fsevents: Command failed.
Exit code: 1
Command: node install
Arguments:
Directory: ./node_modules/fsevents
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp WARN Using request for node-pre-gyp https download
node-pre-gyp info check checked for "./node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" (not found)
node-pre-gyp http GET https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp http 404 https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Tried to download(404): https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp http 404 status code downloading tarball https://fsevents-binaries.s3-us-west-2.amazonaws.com/v1.2.7/fse-v1.2.7-node-v72-darwin-x64.tar.gz
node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v72 ABI, unknown) (falling back to source compile with node-gyp)
node-pre-gyp WARN Hit error Connection closed while downloading tarball file
[...]
Failed to execute './.nvm/versions/node/v12.16.3/bin/node ./node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=./node_modules/react-scripts/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=./no✨

Steps to reproduce the issue

$ git clone [fork of this repository]
$ cd carbon-tutorial
$ git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git
$ git fetch upstream
$ git checkout -b react-step-1 upstream/react-step-1
$ yarn

Additional information

macOS v10.15.4
nvm 0.35.3
node v12.16.3
npm 6.14.4

Step 1: add PR instructions

The last step needs some generic instructions on how to submit a PR to carbon-tutorial to acknowledge completion of that step. How it needs to be a passing CI build. How to use ci-check command. Maybe also how to update snapshots for their PR to get CI check to pass.

These PRs will never get merged, but it's a good concept to teach. It's how dev essentials labs will verify completion. Maybe in the future we could give out swag to completion of tutorial steps.

IBM Cloud instructions contain deprecated API names and are US-only

(From a Slack conversation in carbon-tutorial channel)

Step 5 of the Carbon tutorial tells people to log into IBM cloud using api.ng.bluemix.net. There are a couple of problems with this:

1. This is a deprecated name, and should be api.us-south.cf.cloud.ibm.com (see https://cloud.ibm.com/docs/overview?topic=overview-whatsnew&origin_team=T02M79KSB#new-cloud-foundry-api-endpoints).
2. If people log into the 'US South' region (as above), they'll only see spaces for the 'US South' region - and in fact will be told they have no organisations if they have no spaces in the 'US South' region. The number 1 source of difficulty with troubleshooting Carbon Tutorial issues in my FED branch - which isn't US-based - has been getting this working. It would be helpful to add some documentation to say either that the users should log into whatever region their spaces are in OR that they need to create a space in the 'US South' region. If they don't do either of those they will get a lot of confusing errors.

Netlify deploy preview fails even though the app is working fine on my Mac

Detailed description

Netlify deploy preview fails even though the app is working fine on my Mac.

On the last step on this page .. "Pull Request (PR)"

• https://www.carbondesignsystem.com/tutorial/react-step-1

Netlify output

https://app.netlify.com/sites/carbon-tutorial/deploys/5cedba9fbdee760008325e37

Tried these two combinations ...

• node 12.3.1 and yarn 1.16.0
• node 10.15.3 and yarn 1.16.0

3:13:49 PM: Waiting to build. Currently running 3 concurrent builds on your account
3:13:49 PM: Build ready to start
3:13:51 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
3:13:51 PM: build-image tag: v3.3.2
3:13:51 PM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
3:13:52 PM: Fetching cached dependencies
3:13:52 PM: Starting to download cache of 182.9MB
3:13:53 PM: Finished downloading cache in 781.675465ms
3:13:53 PM: Starting to extract cache
3:13:58 PM: Finished extracting cache in 5.488962011s
3:13:58 PM: Finished fetching cache in 6.37826738s
3:13:58 PM: Starting to prepare the repo for build
3:13:58 PM: Preparing Git Reference pull/103/head
3:14:00 PM: Starting build script
3:14:00 PM: Installing dependencies
3:14:01 PM: Started restoring cached node version
3:14:03 PM: Finished restoring cached node version
3:14:04 PM: v10.15.3 is already installed.
3:14:05 PM: Now using node v10.15.3 (npm v6.4.1)
3:14:05 PM: Attempting ruby version 2.6.2, read from environment
3:14:07 PM: Using ruby version 2.6.2
3:14:07 PM: Using PHP version 5.6
3:14:07 PM: Started restoring cached node modules
3:14:07 PM: Finished restoring cached node modules
3:14:07 PM: Started restoring cached yarn cache
3:14:07 PM: Finished restoring cached yarn cache
3:14:08 PM: Installing NPM modules using Yarn version 1.15.2
3:14:08 PM: yarn install v1.15.2
3:14:08 PM: [1/4] Resolving packages...
3:14:09 PM: [2/4] Fetching packages...
3:14:28 PM: error [email protected]: The platform "linux" is incompatible with this module.
3:14:29 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
3:14:28 PM: error Found incompatible module
3:14:28 PM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
3:14:29 PM: Error during Yarn install
3:14:29 PM: Shutting down logging, 3 messages pending

Step 5: CSS optimisation breaks the grid

Step 5: CSS optimisation breaks the grid

Detailed description

Describe in detail the issue you're having.

After the CSS optimisation the footer grid is broken.

Is this a feature request (new component, new icon), a bug, or a general issue?

no

Is this issue related to a specific component?

yes, Carbon grid.

What did you expect to happen? What happened instead? What would you like to see changed?

Grid should use the 16 columns.

What browser are you working in?

Chrome 75.0.3770.100 (Official Build) (64-bit)

What version of the Carbon Design System are you using?

10.3.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

no

Steps to reproduce the issue

1. Work through tutorial step 5

Additional information

See pull request:
#1447 (comment)
With the feature the footer looks good again:

Repo settings (specifically .editorconfig end_of_line) cause CRLF/LF fights on Windows

carbon-tutorial settings cause clashes between tools which want to use CRLF and LF line-endings on Windows

• When I clone the repo with Windows, by default I get CRLF line endings.
• When I run yarn ci-check, I get warnings/errors because prettier uses the explicit end_of_line = LF setting from .editorconfig to assert that all the files should have LF line endings.
• When I run yarn format, all of the source files - including ones I haven't touched, such as .github/** all get edited by prettier, forcing the line endings to LF. (And just to clarify, it's not just listing all the filenames; it really is changing all the files created during git clone, which all then appear as changed files and candidates for adding to a commit.)

The problem here is that we have one tool (git) that's wanting to use CRLF, and another explicit configuration (prettier, via .editorconfig) that wants to use LF.

I suspect this hasn't been spotted previously because most people are probably using Macs, where the default line-ending from a git clone is LF.

The result is that there's a battle between git and prettier.

The good news is that there are a few trivially-simple ways to resolve it:

1. remove the explicit LF setting from .editorconfig; prettier will then check that each file is self-consistent, and git will do whatever it needs (typically involving converting CRLF files to LF files at commit time). The explicit entry doesn't need to be there: on a Mac, files will be created as LF and checked-in by git as LF by default; on Windows files will be created as CRLF and checked in by git as LF.
2. add explicit .gitattributes entries to make the git behaviour match that of the .editorconfig settings; this is a bit fiddly, and a bit surprising for Windows users as some editors don't like pure-LF files.
3. tell every Windows user that they need to mess about with git's core.autocrlf to force the git clone to create LF-based files; this is the least friendly option.
4. do nothing, and tell every Windows user that they'll get weird behaviour, and that git will try to make them check in a bunch of files that haven't really changed; actually, this is probably the least friendly option.

Issue with babel-preset-react-app on netlify deploy hook

Detailed description

Issue with babel-preset-react-app on netlify deploy hook, build fails with exit code 1

Steps to reproduce the issue

1. Finish step 5
2. Push code and create merge request
3. Netlify deploy hook fails with error, mentioning gensync in babel-preset-react-app

Additional information

• Adding a newer version of babel-preset-react-app using yarn add babel-preset-react-app -D fixes the issue

Unable to push local code using ssh

getting bellow error
$ git push origin react-step-1
ERROR: Permission to carbon-design-system/carbon-tutorial.git denied to nabaraj.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

using ssh key

Unable to push origin react-step-1

I faced below error while trying to push local code

remote: Permission to carbon-design-system/carbon-tutorial.git denied to moashraf100.
fatal: unable to access 'https://github.com/carbon-design-system/carbon-tutorial.git/': The requested URL returned error: 403

Add Sketch file to each step

After all steps have been built.

Carbon tutorial: yarn installs old version of nodejs (6.17.1) ?

Hello colleagues,
i followed the steps of your tutorial. Trying to run yarn serve it fails due to out of date version of nodejs though I had a more less current version installed:

[andreas@oc3207008144 carbon-tutorial-vue]$ which node
~/nodejs/CURRENT/bin/node
[andreas@oc3207008144 carbon-tutorial-vue]$ node --version
v12.10.0

[andreas@oc3207008144 carbon-tutorial-vue]$ rpm -e nodejs-6.17.1-1.el7.x86_64
error: Failed dependencies:
nodejs = 1:6.17.1-1.el7 is needed by (installed) npm-1:3.10.10-1.6.17.1.1.el7.x86_64
nodejs is needed by (installed) yarn-1.21.1-1.noarch
Any idea what i can do to tell yarn to accept the existing version?
Thx in advance,
Andreas

Param to cf login on Step 5 is wrong ?

Summary

On the command example on the Step5.
$ cf login -a https://api.ng.bluemix.net -sso
Should be --sso instead of -sso

Relevant information

According to the cf docs, there is only --sso
doc: https://cli.cloudfoundry.org/en-US/cf/login.html
This will not impact users to do the login (Only IBMers trying to use the internal SSO)

Step 1: explain what is happening with ci-check

#94 (comment)

`ci check` is failing on Windows

Changing ' to \" seems to make the command work on Windows. E.g.:

    "format": "prettier --write \"**/*.{js,md,scss}\"",
    "format:diff": "prettier --list-different \"**/*.{js,md,scss}\"",

Yarn fails with latest NodeJS

Detailed description

Most likely related to a dependency on the sharp package. On the latest NodeJS, Yarn fails after doing a fresh clone and branch creation as described here -> https://www.carbondesignsystem.com/tutorial/react-step-1

Steps to reproduce the issue

Step 1

Install the latest node and npm

Step 2

as described here -> https://www.carbondesignsystem.com/tutorial/react-step-1

$ git clone [fork of this repository]
$ cd carbon-tutorial
$ git remote add upstream [email protected]:carbon-design-system/carbon-tutorial.git
$ git fetch upstream
$ git checkout -b react-step-1 upstream/react-step-1
$ yarn

Additional information

This appears to be the same issue as seen here for Gatsby gatsbyjs/gatsby#13780

The quick fix is to add a specific sharp version for Yarn in package.json as follows

{
  "resolutions": {
    "sharp": "0.22.1"
  }
}

Resolution

This is probably just a question of waiting for, and updating to, the fixed dependencies.

Step 2: builds are failing for deployment

Detailed description

Describe in detail the issue you're having.

Is this a feature request (new component, new icon), a bug, or a general issue?

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Screenshots or code
• Notes

Step 4 and 5 of tutorial code on GitHub throws an error when being run

Step 4 and 5 of tutorial code on GitHub throws an error when being run

Steps to reproduce the issue

1. Checkout step 4/5 of tutorial code.
2. Set .env.local with PAT
3. Run 'yarn start'

-> Project throws error: "TypeError: Cannot read property 'organization' of undefined"

yarn ci-check magically loses yarn test between master and react-step-1 branch

Detailed description

I was following the React tutorial for Carbon Components and ran into an issue where running the CI check step described on the tutorial website was failing and I couldn't find any differences between the react-step-1 branch of this repo and my code for the files that I was supposed to change.

I checked out the react-step-1 branch, ran yarn ci-check and it ran fine.

I kept digging deeper and I found that the react-step-1 branch does not seem to run any tests while my code does. And sure enough the react-step-1 branch has one undocumented difference to the master branch which explains why things fail for me and work on the react-step-1 branch.

The following commit removes the call to yarn test from the yarn ci-check and voila if you don't run tests you are not getting test failures:
c687aa0

I suggest including above commit / change also in the master branch to avoid having people run into the same trap as me.

Steps to reproduce the issue

1. Checkout master
2. Follow tutorial
3. Run yarn ci-check as part of the tutorial and notice the test failures

TypeError: Cannot read property 'organization' of undefined

Hi, I am completing step3 and when adding element I get the 'organization' error. I have created the personal access token with all privileges to rule out permission issue, but it still gives the error. I've tried to put the variable in .env and also created a new file .env.local but still get the error.

Step 3 feedback

• Rework step 2 RepoPage to better support step 3
• Intro headings before anchor links
• h5s for code snippet file paths
• Use MyComponent instead of <MyComponent /> syntax for React components
• Use functional components instead of class components
• Navigation landmarks
• Headings instead of bold elements

Automate PR reviews

Need a way to add testing of some sort and automate the PR review process for the tutorial.

Can't raise pull request for step 1

All,

I followed this link - https://www.carbondesignsystem.com/tutorial/react-step-1/ to setup and commit the files and try to create the pull request but I failed number of times. Only last step I'm failing.

Some time I'm facing permission denied problem

ERROR: Permission to carbon-design-system/carbon-tutorial.git denied to smanikandan-btech.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Thanks in advance.