feat: introduce garden theming (#3)

zendeskgarden · Jan 13, 2021 · 93052da · 93052da
1 parent 57d68d6
commit 93052da
Show file tree

Hide file tree

Showing 22 changed files with 913 additions and 24 deletions.
diff --git a/.storybook/gardenIcons.js b/.storybook/gardenIcons.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+/* eslint-disable require-unicode-regexp */
+
+const webpack = require('webpack');
+
+module.exports.iconPlugins = [
+  new webpack.NormalModuleReplacementPlugin(
+    /bold\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/bold-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /italic\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/italic-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /underline\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/underline-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /code\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/markup-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /horizontalline\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/horizontal-rule-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /link\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/link-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /unlink\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/link-remove-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /pencil\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/pencil-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /dropdown-arrow\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /numberedlist\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/list-number-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /bulletedlist\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/list-bullet-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /quote\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/quote-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /indent\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/indent-increase-stroke.svg')
+  ),
+  new webpack.NormalModuleReplacementPlugin(
+    /outdent\.svg/,
+    require.resolve('@zendeskgarden/svg-icons/src/16/indent-decrease-stroke.svg')
+  )
+];
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -9,6 +9,7 @@
 
 const { styles } = require('@ckeditor/ckeditor5-dev-utils');
 const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
+const { iconPlugins } = require('./gardenIcons');
 
 function isCssRule(rule) {
   return rule.test.toString().indexOf('css') > -1;
@@ -24,7 +25,7 @@ module.exports = {
   webpackFinal: config => {
     config.module.rules.forEach(rule => {
       if (isCssRule(rule)) {
-        rule.exclude = /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/;
+        rule.exclude = [/ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/, /theme\/[\w-/]+\.css$/];
       } else if (isSvgRule(rule)) {
         rule.exclude = [/ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/, /@zendeskgarden\/svg-icons/];
       }
@@ -39,7 +40,7 @@ module.exports = {
         use: ['raw-loader']
       },
       {
-        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
+        test: [/ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/, /theme\/[\w-/]+\.css$/],
         use: [
           {
             loader: 'style-loader'
@@ -61,7 +62,8 @@ module.exports = {
       new CKEditorWebpackPlugin({
         language: 'en',
         buildAllTranslationsToSeparateFiles: true
-      })
+      }),
+      ...iconPlugins
     );
 
     return config;

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://zendeskgarden.github.io/css-components/bedrock/index.css" rel="stylesheet" disabled />
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -11,5 +11,33 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   docs: {
     theme: previewTheme
+  },
+  backgrounds: { disable: true }
+};
+
+const withBedrock = (story, context) => {
+  if (context.globals.bedrock === 'enabled') {
+    document.querySelector('link[href$="bedrock/index.css"]').removeAttribute('disabled');
+  } else {
+    document.querySelector('link[href$="bedrock/index.css"]').setAttribute('disabled', true);
+  }
+
+  return story();
+};
+
+export const decorators = [withBedrock];
+
+export const globalTypes = {
+  bedrock: {
+    name: 'bedrock',
+    description: 'CSS Bedrock',
+    defaultValue: 'enabled',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'disabled', title: 'Bedrock disabled' },
+        { value: 'enabled', title: 'Bedrock enabled' }
+      ]
+    }
   }
 };
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "@zendeskgarden/stylelint-config"
+}
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "build:storybook": "build-storybook -s .storybook/public",
     "format": "prettier-package-json --write && yarn format:all --write",
     "format:all": "prettier --loglevel warn '**/*.{js,ts,json,md}' '.storybook/**/*.{js,ts,json,md}' '!CHANGELOG.md' '!dist/**'",
-    "lint": "yarn lint:js && yarn lint:md",
+    "lint": "yarn lint:js && yarn lint:css && yarn lint:md",
+    "lint:css": "stylelint 'src/**/*.css'",
     "lint:js": "eslint src/ .storybook/ --ext js,ts --max-warnings 0",
     "lint:md": "markdownlint README.md src/**/*.md",
     "start": "start-storybook -s .storybook/public -p 6006",
@@ -23,20 +24,30 @@
   "devDependencies": {
     "@babel/core": "7.12.10",
     "@ckeditor/ckeditor5-basic-styles": "24.0.0",
+    "@ckeditor/ckeditor5-block-quote": "24.0.0",
+    "@ckeditor/ckeditor5-code-block": "24.0.0",
     "@ckeditor/ckeditor5-dev-utils": "23.6.1",
     "@ckeditor/ckeditor5-dev-webpack-plugin": "23.6.1",
     "@ckeditor/ckeditor5-editor-classic": "24.0.0",
     "@ckeditor/ckeditor5-essentials": "24.0.0",
+    "@ckeditor/ckeditor5-heading": "24.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "24.0.0",
+    "@ckeditor/ckeditor5-indent": "24.0.0",
+    "@ckeditor/ckeditor5-link": "24.0.0",
+    "@ckeditor/ckeditor5-list": "24.0.0",
     "@ckeditor/ckeditor5-paragraph": "24.0.0",
     "@ckeditor/ckeditor5-react": "3.0.0",
     "@ckeditor/ckeditor5-theme-lark": "24.0.0",
+    "@ckeditor/ckeditor5-widget": "24.0.0",
     "@storybook/addon-actions": "6.1.10",
     "@storybook/addon-essentials": "6.1.10",
     "@storybook/addon-links": "6.1.10",
     "@storybook/react": "6.1.10",
     "@zendeskgarden/eslint-config": "17.1.0",
     "@zendeskgarden/react-theming": "8.28.1",
     "@zendeskgarden/scripts": "0.1.11",
+    "@zendeskgarden/stylelint-config": "15.0.0",
+    "@zendeskgarden/svg-icons": "6.27.0",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",
     "envalid": "6.0.2",
@@ -56,7 +67,9 @@
     "react-dom": "16.14.0",
     "react-is": "17.0.1",
     "standard-version": "9.0.0",
-    "styled-components": "5.2.1"
+    "styled-components": "5.2.1",
+    "stylelint": "13.8.0",
+    "stylelint-order": "4.1.0"
   },
   "keywords": [
     "ckeditor",

diff --git a/src/stories/GardenEditor.stories.js b/src/stories/GardenEditor.stories.js
@@ -5,34 +5,127 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 
 /**
  * CKEditor content
  */
+import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
+import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
 import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Heading from '@ckeditor/ckeditor5-heading/src/heading';
+import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import List from '@ckeditor/ckeditor5-list/src/list';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import { add } from '@ckeditor/ckeditor5-utils/src/translation-service';
+import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
+
+// import GardenEditor from '../gardeneditor';
+import './theme/styles.css';
+import { INITIAL_DATA } from './initialData';
+
+const EDITOR_LOCAL_STORAGE_KEY = 'ckeditor5-demo-1';
 
 export default {
   title: 'Examples'
 };
 
+/**
+ * Add custom tooltip values
+ */
+add('en', {
+  'Bulleted List': `Bulleted list (${getEnvKeystrokeText('CTRL+SHIFT+8')})`,
+  'Numbered List': `Numbered list (${getEnvKeystrokeText('CTRL+SHIFT+7')})`,
+  'Decrease indent': `Decrease indent (${getEnvKeystrokeText('CTRL+[')})`,
+  'Increase indent': `Increase indent (${getEnvKeystrokeText('CTRL+]')})`,
+  'Block quote': `Blockquote (${getEnvKeystrokeText('CTRL+SHIFT+9')})`,
+  Code: `Code (${getEnvKeystrokeText('CTRL+SHIFT+5')})`,
+  'Horizontal line': `Horizontal rule (${getEnvKeystrokeText('CTRL+SHIFT+L')})`
+});
+
 export const Default = () => {
+  const [storedValue] = useState(() => {
+    const storedData = window.localStorage.getItem(EDITOR_LOCAL_STORAGE_KEY);
+
+    return storedData || INITIAL_DATA;
+  });
+
+  const onValueChange = useCallback(value => {
+    window.localStorage.setItem(EDITOR_LOCAL_STORAGE_KEY, value);
+  }, []);
+
   return (
     <CKEditor
       editor={ClassicEditor}
+      data={storedValue}
       config={{
-        plugins: [Essentials, Paragraph, Bold, Italic, Underline],
-        toolbar: ['bold', 'italic', 'underline']
+        plugins: [
+          Essentials,
+          Bold,
+          Italic,
+          Paragraph,
+          Underline,
+          Code,
+          HorizontalLine,
+          Link,
+          Indent,
+          IndentBlock,
+          List,
+          BlockQuote,
+          Heading,
+          CodeBlock,
+          Widget
+        ],
+        toolbar: [
+          'heading',
+          'bold',
+          'italic',
+          'underline',
+          '|',
+          'bulletedList',
+          'numberedList',
+          'outdent',
+          'indent',
+          '|',
+          'blockquote',
+          'code',
+          'codeBlock',
+          'link',
+          'horizontalLine'
+        ],
+        codeBlock: {
+          languages: [{ language: 'plaintext', label: 'Plain text' }]
+        }
+      }}
+      onReady={editor => {
+        /**
+         * Apply custom keyboard shortcuts
+         */
+        editor.keystrokes.set('CTRL+SHIFT+8', 'bulletedList');
+        editor.keystrokes.set('CTRL+SHIFT+7', 'numberedList');
+        editor.keystrokes.set(['ctrl', 219], 'outdent'); // CTRL+[
+        editor.keystrokes.set(['ctrl', 221], 'indent'); // CTRL+]
+        editor.keystrokes.set('CTRL+SHIFT+9', 'blockQuote');
+        editor.keystrokes.set('CTRL+SHIFT+5', 'code');
+        editor.keystrokes.set('CTRL+SHIFT+L', 'horizontalLine');
       }}
       onChange={(event, editor) => {
-        action('onChange')(editor.getData());
+        const editorData = editor.getData();
+
+        action('onChange')(editorData);
+
+        onValueChange(editorData);
       }}
     />
   );

diff --git a/src/stories/initialData.js b/src/stories/initialData.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+export const INITIAL_DATA = `<h2>CKEditor</h2><hr><h3>Basic styles</h3><p>Text can have <strong>bold</strong>, <i>italic</i>, and <u>underline</u> content. <code>Inline code</code> is also available. <a href="https://www.google.com">Links work as well.</a></p><ul><li>Lists</li><li>Are<ol><li>Nestable</li><li>And can change</li><li>Types</li></ol></li></ul><h3>Block elements</h3><blockquote><p>Block quotes can have inline content</p><p><strong>- Author name</strong></p></blockquote><pre><code class="language-plaintext">Preformatted code can go here</code></pre>`;
diff --git a/src/stories/theme/_balloon-panel.css b/src/stories/theme/_balloon-panel.css
@@ -0,0 +1,3 @@
+.ck.ck-balloon-panel {
+  box-shadow: var(--ck-drop-shadow);
+}
diff --git a/src/stories/theme/_blockquote.css b/src/stories/theme/_blockquote.css
@@ -0,0 +1,23 @@
+.ck-content blockquote {
+  border-left: 2px solid #c2c8cc; /* GREY-400 */
+  padding: 0 0 0 calc(var(--ck-spacing-unit) * 4);
+  overflow: hidden;
+  font-style: inherit;
+  margin-block-start: 16px;
+  margin-block-end: 16px;
+}
+
+.ck-content[dir='rtl'] blockquote {
+  border-right: 2px solid #c2c8cc; /* GREY-400 */
+  border-left: 0;
+  padding: 0 calc(var(--ck-spacing-unit) * 4) 0 0;
+}
+
+.ck-content blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+.ck-content pre {
+  margin-block-start: 16px;
+  margin-block-end: 16px;
+}
diff --git a/src/stories/theme/_button.css b/src/stories/theme/_button.css
@@ -0,0 +1,8 @@
+/* stylelint-disable-next-line selector-max-specificity */
+.ck.ck-button:not(.ck-disabled):hover .ck-button__icon {
+  color: #49545c; /* GREY-700 */
+}
+
+.ck.ck-button:not(.ck-disabled) {
+  cursor: pointer;
+}
diff --git a/src/stories/theme/_code.css b/src/stories/theme/_code.css
@@ -0,0 +1,14 @@
+.ck-content code {
+  border-radius: 2px;
+  background-color: #e9ebed; /* GREY-200 */
+  padding: 1.5px;
+  color: #49545c;/* GREY-700 */
+  /* stylelint-disable-next-line max-line-length */
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: calc(1em - 1px);
+  direction: ltr;
+}
+
+.ck.ck-editor__editable .ck-code_selected {
+  background-color: #e9ebed; /* GREY-200 */
+}