Clean up general Storybook structure and docs pages

.env.development

@@ -0,0 +1,2 @@
+STORYBOOK_HIDE_CANVAS_TAB=false
+STORYBOOK_HIDE_DOCS_TAB=false

.env.production

@@ -0,0 +1,2 @@
+STORYBOOK_HIDE_CANVAS_TAB=true
+STORYBOOK_HIDE_DOCS_TAB=true

.eslintrc

@@ -5,13 +5,6 @@
   "env": {
     "browser": true
   },
-  "globals": {
-    "__DEV__": false,
-    "__PROD__": false,
-    "__DEBUG__": false,
-    "__BASENAME__": false,
-    "__VERSION__": false
-  },
   "rules": {
     "prefer-const": [
       "error",

.storybook/preview.js

@@ -3,6 +3,16 @@ import { withDesign } from 'storybook-addon-designs';
 import { COLOR } from '../src/constants';
 
 import theme from './theme';
+import {
+  ABOUT_AHOY,
+  CHANGELOG,
+  COMPOSITIONS,
+  FOUNDATION,
+  LOW_LEVEL_BLOCKS,
+  MARKETING,
+  MID_LEVEL_BLOCKS,
+  PLAYGROUND,
+} from './utils';
 
 addParameters({
   backgrounds: {
@@ -21,8 +31,18 @@ addParameters({
 
 addParameters({
   options: {
-    showRoots: true,
-    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
+    storySort: {
+      order: [
+        ABOUT_AHOY,
+        CHANGELOG,
+        FOUNDATION,
+        LOW_LEVEL_BLOCKS,
+        MID_LEVEL_BLOCKS,
+        COMPOSITIONS,
+        MARKETING,
+        PLAYGROUND,
+      ],
+    },
   },
 });
 
@@ -34,6 +54,14 @@ addParameters({
 
 addParameters({
   viewMode: 'docs',
+  previewTabs: {
+    canvas: {
+      hidden: process.env.STORYBOOK_HIDE_CANVAS_TAB === 'true',
+    },
+    'storybook/docs/panel': {
+      hidden: process.env.STORYBOOK_HIDE_DOCS_TAB === 'true',
+    },
+  },
 });
 
 // addon-designs

.storybook/stories/about.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/addon-docs';
+import { ABOUT_AHOY } from '../utils';
+
+<Meta title={ABOUT_AHOY} parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+
+# Ahoy
+
+A React implementation of Ahoy, Teamleader’s design system.
+
+[Principles](https://teamleader.design)
+
+[Figma Library](https://www.figma.com/community/file/817528775203111349/Ahoy-Desktop-Components)
+
+[GitHub](https://github.com/teamleadercrm/ui)
+
+# Getting started
+
+## Installation
+
+To install the latest version of Ahoy in your project, run the following command when using yarn:
+
+```
+yarn add @teamleader/ui
+```
+
+or if you're using npm:
+
+```
+npm install @teamleader/ui
+```
+
+## PostCSS
+
+This library internally uses PostCSS and also requires end users to install and configure PostCSS in their project. Check the [PostCSS documentation](https://postcss.org/) for more information.

.storybook/stories/changelog.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta, Description } from '@storybook/addon-docs';
+
+import changelog from '../../CHANGELOG.md';
+
+<Meta title="Changelog" />
+
+<Description markdown={changelog} />

.storybook/stories/colors.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta, ColorPalette, ColorItem, Story } from '@storybook/addon-docs/blocks';
+import { Box, COLOR, Heading2, Island, StatusLabel, TextBody } from '../../src';
+
+<Meta title="Foundation / Colors" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+
+# Colors
+
+For more information about the color palette, see the [principles page](https://ahoy.teamleader.design/3547946e7/p/015bf2-color/b/66edd6).