diff --git a/.storybook/addons.js b/.storybook/addons.js index 24cc91e3..ab14032a 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -1,2 +1,2 @@ -import '@storybook/addon-knobs/register'; -import '@storybook/addon-storysource/register'; +import "@storybook/addon-knobs/register"; +import "@storybook/addon-storysource/register"; diff --git a/.storybook/config.js b/.storybook/config.js index 3a477540..58093fcb 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,3 +1,3 @@ -import { configure } from '@storybook/svelte'; +import { configure } from "@storybook/svelte"; -configure(require.context('../src', true, /\.stories\.js$/), module); +configure(require.context("../src", true, /\.stories\.js$/), module); diff --git a/src/internal/ui/Layout.svelte b/.storybook/preview-body.html similarity index 56% rename from src/internal/ui/Layout.svelte rename to .storybook/preview-body.html index 12b640f2..15966e2e 100644 --- a/src/internal/ui/Layout.svelte +++ b/.storybook/preview-body.html @@ -1,12 +1,8 @@ - -
- -
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 74f76ab2..a5204e1e 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1 +1,4 @@ - \ No newline at end of file + diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 1bc102a0..384c224f 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,11 +1,11 @@ -const path = require('path'); +const path = require("path"); module.exports = async ({ config }) => { config.module.rules.push({ test: [/\.stories\.js$/], - loaders: [require.resolve('@storybook/source-loader')], - include: [path.resolve(__dirname, '../src')], - enforce: 'pre' + loaders: [require.resolve("@storybook/source-loader")], + include: [path.resolve(__dirname, "../src")], + enforce: "pre", }); return config; }; diff --git a/.travis.yml b/.travis.yml index 1d6797d4..6d847239 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,5 +2,6 @@ language: node_js node_js: 10 cache: yarn script: - - yarn test + - yarn prepack - yarn build + - cd docs && yarn && yarn test diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8e0af8ac..1ed1da20 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,15 +1,13 @@ # Contributing -## Getting Started +## Prerequisites -### Prerequisites +This project uses Node.js and Yarn. -This project uses node (>=10) and yarn (>=1). +- [Node.js](https://nodejs.org/en/download/package-manager/#macos) (version >=10) +- [Yarn](https://yarnpkg.com/en/docs/install#mac-stable) -- [node](https://nodejs.org/en/download/package-manager/#macos) (version 10.x or greater) -- [yarn](https://yarnpkg.com/en/docs/install#mac-stable) (version 1.x or greater) - -### Fork and Clone +## Fork and Clone Fork the repo and clone your fork: @@ -26,7 +24,7 @@ git remote add upstream git@github.com:IBM/carbon-components-svelte.git git remote -v ``` -### Install +## Install Install the project dependencies: @@ -38,19 +36,7 @@ yarn install ## Workflow -### Repo Structure - -```js -.storybook // Storybook configuration -docs // static, exported Storybook used by GitHub Pages -src -│ -└───components // individual components -└───internal // code excluded from the component library -└───lib // shared utilities -``` - -### Developing +### Develop This project uses Storybook for UI development and "live" documentation. @@ -62,12 +48,10 @@ yarn start #### Component Format -Individual components are located in the `src/components` folder: - Each component should adopt the following structure: ```js -src/components/Component +src/Component │ └───Component.svelte // main component └───Component.Skeleton.svelte // Skeleton component (if any) @@ -76,7 +60,7 @@ src/components/Component └───index.js // export components (e.g. `Component.svelte`, `Component.Skeleton.svelte`) ``` -### Building +### Build #### Component Library @@ -89,11 +73,11 @@ The library should be compiled in two formats: #### Storybook -To build the Storybook, run `yarn build:storybook`. +To build the Storybook, run `yarn build`. -The Storybook should be outputted to the `docs` folder. +The Storybook should be outputted to the `storybook-static` folder. -## Submitting a Pull Request +## Submit a Pull Request ### Sync Your Fork diff --git a/README.md b/README.md index 8949c5b7..9cfe7bd0 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system) -## [Storybook](https://ibm.github.io/carbon-components-svelte) · [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4) +## [Storybook](https://ibm.github.io/carbon-components-svelte) ## Getting Started @@ -25,7 +25,7 @@ yarn add -D carbon-components-svelte diff --git a/docs/.cfignore b/docs/.cfignore new file mode 100644 index 00000000..e1401415 --- /dev/null +++ b/docs/.cfignore @@ -0,0 +1,3 @@ +* +!Staticfile +!public \ No newline at end of file diff --git a/docs/.gitignore b/docs/.gitignore index 6bcd4b76..6089ea11 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -1,5 +1,7 @@ .DS_Store -/__sapper__ -/**/node_modules -/public +/public/ +/node_modules/ +/src/node_modules/@sapper/ yarn-error.log +/cypress/screenshots/ +/__sapper__/ diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..51f6a9bb --- /dev/null +++ b/docs/README.md @@ -0,0 +1,26 @@ +# docs + +This application was scaffolded using the default webpack [Sapper](https://github.com/sveltejs/sapper) template. + +## Deploying to IBM Cloud + +Deploy to IBM Cloud using the Staticfile buildpack. + +### Log in + +Log in using the IBM Cloud CLI: + +```sh +ibmcloud login + +# if using Single-Sign On (SSO): +ibmcloud login --sso +``` + +### Deploy + +```sh +yarn build +ibmcloud target --cf +ibmcloud cf push +``` \ No newline at end of file diff --git a/docs/Staticfile b/docs/Staticfile new file mode 100644 index 00000000..5a88aa0c --- /dev/null +++ b/docs/Staticfile @@ -0,0 +1,3 @@ +root: public +location_include: includes/*.conf +force_https: true \ No newline at end of file diff --git a/docs/cypress.json b/docs/cypress.json new file mode 100644 index 00000000..f2f24765 --- /dev/null +++ b/docs/cypress.json @@ -0,0 +1,5 @@ +{ + "baseUrl": "http://localhost:3000", + "video": false, + "defaultCommandTimeout": 1000 +} diff --git a/docs/cypress/integration/Button.js b/docs/cypress/integration/Button.js new file mode 100644 index 00000000..9eda6102 --- /dev/null +++ b/docs/cypress/integration/Button.js @@ -0,0 +1,11 @@ +describe("Button", () => { + beforeEach(() => { + cy.examples("Button"); + }); + + it("renders correctly", () => { + cy.get("button").then(($) => { + expect($.length).to.eql(4); + }); + }); +}); diff --git a/docs/cypress/plugins/index.js b/docs/cypress/plugins/index.js new file mode 100644 index 00000000..aa9918d2 --- /dev/null +++ b/docs/cypress/plugins/index.js @@ -0,0 +1,21 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/docs/cypress/support/commands.js b/docs/cypress/support/commands.js new file mode 100644 index 00000000..5003b2cf --- /dev/null +++ b/docs/cypress/support/commands.js @@ -0,0 +1,3 @@ +Cypress.Commands.add("examples", (component) => { + cy.visit(`/examples/${component}`); +}); diff --git a/docs/cypress/support/index.js b/docs/cypress/support/index.js new file mode 100644 index 00000000..f887c29a --- /dev/null +++ b/docs/cypress/support/index.js @@ -0,0 +1 @@ +import "./commands"; diff --git a/docs/includes/header.conf b/docs/includes/header.conf new file mode 100644 index 00000000..09745592 --- /dev/null +++ b/docs/includes/header.conf @@ -0,0 +1,5 @@ +location ~* ((service-worker)\.js)$ { + add_header 'Cache-Control' 'no-store'; + expires off; + proxy_no_cache 1; +} \ No newline at end of file diff --git a/docs/manifest.yml b/docs/manifest.yml new file mode 100644 index 00000000..2adc0bb4 --- /dev/null +++ b/docs/manifest.yml @@ -0,0 +1,7 @@ +--- +applications: + - name: carbon-svelte + memory: 32M + disk_quota: 32M + buildpacks: + - https://github.com/cloudfoundry/staticfile-buildpack.git diff --git a/docs/package.json b/docs/package.json index a29e6e80..e761276e 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,30 +1,25 @@ { - "name": "sapper-webpack", - "description": "Custom Sapper webpack template", - "version": "0.0.1", "private": true, "scripts": { - "develop": "sapper dev", - "build": "sapper export" + "dev": "sapper dev", + "build": "shx rm -rf public && sapper export && shx mv __sapper__/export public", + "cy:run": "cypress run", + "cy:open": "cypress open", + "test": "run-p --race dev cy:run", + "test:tdd": "run-p --race dev cy:open" }, "dependencies": { "polka": "next", - "sirv": "^0.4.0" + "sirv": "^1.0.1" }, "devDependencies": { - "@metonym/sapper": "^0.27.12", - "autoprefixer": "^9.7.6", - "carbon-components": "^10.11.2", - "css-loader": "^3.5.3", - "mini-css-extract-plugin": "^0.9.0", - "node-sass": "^4.14.1", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "sass-loader": "^8.0.2", - "style-loader": "^1.2.1", - "svelte": "~3.20.0", + "carbon-components-svelte": "../", + "cypress": "^4.10.0", + "npm-run-all": "^4.1.5", + "sapper": "^0.27.16", + "shx": "^0.3.2", + "svelte": "^3.24.0", "svelte-loader": "^2.9.0", - "webpack": "^4.43.0", - "carbon-components-svelte": "../" + "webpack": "^4.7.0" } } diff --git a/docs/src/client.js b/docs/src/client.js index acf91ffb..d67c6351 100644 --- a/docs/src/client.js +++ b/docs/src/client.js @@ -1,4 +1,3 @@ -import "./style.scss"; import * as sapper from "@sapper/app"; sapper.start({ target: document.querySelector("#sapper") }); diff --git a/docs/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte new file mode 100644 index 00000000..a730ce28 --- /dev/null +++ b/docs/src/components/GlobalHeader.svelte @@ -0,0 +1,33 @@ + + +
+ + + + + +
diff --git a/docs/src/components/Nav.svelte b/docs/src/components/Nav.svelte deleted file mode 100644 index bbcf511c..00000000 --- a/docs/src/components/Nav.svelte +++ /dev/null @@ -1,20 +0,0 @@ - - -
- - - -
diff --git a/docs/src/routes/_error.svelte b/docs/src/routes/_error.svelte index b84c4deb..7847f23a 100644 --- a/docs/src/routes/_error.svelte +++ b/docs/src/routes/_error.svelte @@ -1,8 +1,8 @@ @@ -11,8 +11,11 @@

{status}

-

{error.message}

+
+ {error.message}. + Return home +
-{#if dev && error.stack} +{#if process.env.NODE_ENV === 'development' && error.stack}
{error.stack}
{/if} diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index 468dbeb0..a8c7cb46 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -1,17 +1,15 @@ - - -