terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

added example with IBM Carbon Components, with demonstrated customizability (#4932)

Browse source
This commit is contained in:
A K 2018-09-04 11:16:54 -04:00 committed by Tim Neutkens
parent a8a97b07c7
commit b00a140d58
8 changed files with 180 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/with-carbon-components/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
node_modules/*
.next/*

44
examples/with-carbon-components/README.md Normal file
View file

@ -0,0 +1,44 @@
# Example app with carbon-components-react
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
npx create-next-app --example with-carbon-components with-carbon-components-app
# or
yarn create next-app --example with-carbon-components with-carbon-components-app
```
### Download manually
Download the example:
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-carbon-components
cd with-carbon-components
```
Install it and run:
```bash
npm install
npm run dev
# or
yarn
yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## The idea behind the example
This example features how you use IBM's [carbon-components-react](https://github.com/IBM/carbon-components-react) [(Carbon Design System)](http://www.carbondesignsystem.com/components/overview) with Next.js.
Create your own theme with Carbon Design System's [theming tools](http://themes.carbondesignsystem.com/) and put it all together as demonstrated in `static/myCustomTheme.scss`

21
examples/with-carbon-components/next.config.js Normal file
View file

@ -0,0 +1,21 @@
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')
module.exports = withImages(withSass({
webpack (config) {
config.module.rules.push({
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
publicPath: './',
outputPath: 'static/',
name: '[name].[ext]'
}
}
})
return config
}
}))

22
examples/with-carbon-components/package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "with-carbon-components",
"version": "0.0.1",
"description": "An example of Nextjs setup with carbon-components-react from IBM",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^0.2.0",
"carbon-components": "^9.6.4",
"carbon-components-react": "^6.19.1",
"carbon-icons": "^7.0.7",
"next": "^6.1.1",
"next-images": "^0.10.6",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}

20
examples/with-carbon-components/pages/_document.js Normal file
View file

@ -0,0 +1,20 @@
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<link
rel='stylesheet'
href='/_next/static/style.css'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

14
examples/with-carbon-components/pages/index.js Normal file
View file

@ -0,0 +1,14 @@
import React, { Component, Fragment } from 'react'
import { Button } from 'carbon-components-react'
import '../static/myCustomTheme.scss'
export default class DemoApp extends Component {
render () {
return (
<Fragment>
<Button>Hello, world!</Button>
</Fragment>
)
}
}

54
examples/with-carbon-components/static/export.scss Normal file
View file

@ -0,0 +1,54 @@
$edited: true;
$brand-01: #00be00;
$brand-02: #4f8b4f;
$brand-03: #bc32f7;
$inverse-01: #ffffff;
$inverse-02: #272d33;
$ui-01: #ffffff;
$ui-02: #f6f6f6;
$ui-03: #ececec;
$ui-04: #c0bfc0;
$ui-05: #595859;
$text-01: #4d234b;
$text-02: #595859;
$text-03: #777677;
$field-01: #ffffff;
$field-02: #ffffff;
$support-01: #e62325;
$support-02: #34bc6e;
$support-03: #fed500;
$support-04: #777677;
$use-layer: false;
$input-border: 1px solid $ui-04;
$input-label-weight: 700;
$button-font-weight: 400;
$button-font-size: 1rem;
$button-border-radius: 1rem;
$button-height: 32px;
$button-padding: 0 2rem;
$button-padding-sm: 0 1rem;
$button-border-width: 1px;
$accordion-flex-direction: row-reverse;
$accordion-justify-content: space-between;
$accordion-arrow-margin: 0 .25rem 0 0;
$accordion-title-margin: 0 0 0 0;
$accordion-content-padding: 0 1.75rem 0 0;
$card-text-align: center;
$card-flex-align: center;
$checkbox-border-width: 1px;
$snippet-background-color: $ui-03;
$content-switcher-border-radius: 1.5rem;
$content-switcher-option-border: none;
$data-table-heading-transform: none;
$data-table-heading-border-bottom: 1px solid $ui-04;
$data-table-row-height: 5rem;
$modal-border-top: none;
$modal-footer-background-color: transparent;
$progress-indicator-bar-width: none;
$progress-indicator-stroke-width: 2;
$progress-indicator-line-offset: .7rem;
$radio-border-width: 1px;
$structured-list-padding: 2rem;
$structured-list-text-transform: none;
$nav-01: #1b2834;
$nav-02: #1c496d;

3
examples/with-carbon-components/static/myCustomTheme.scss Normal file
View file

@ -0,0 +1,3 @@
@import './export.scss';
@import '../node_modules/carbon-components/scss/globals/scss/styles.scss';