Improvement/storybook architecture

.storybook/preview.js

@@ -47,23 +47,10 @@ export const parameters = {
       order: [
         'Introduction',
         'Style',
-        ['Color', 'Icons'],
+        'Guidelines',
+        'Templates',
         'Components',
-        [
-          'Navigation',
-          'Button',
-          'Chips',
-          'Checkbox',
-          'Toggle',
-          'Dropdown',
-          'Input',
-          'Selector',
-          'Chart',
-          'Progress & loading',
-          'Table',
-          'Notification',
-        ],
-        'Guideline',
+
       ],
     },
   },

stories/areachart.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AreaChart } from '../src/lib/components/areachart/AreaChart.component';
 import { area_charts } from './data/areachart';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 const xAxis_area_chart = {
   field: 'time',
   type: 'temporal',
@@ -104,7 +104,7 @@ const area2 = {
 const areas = [area, area2];
 const id_area_chart = 'vis_area_chart';
 export default {
-  title: 'Components/Chart/AreaChart',
+  title: 'Components/Data Display/Charts/Area Chart',
   component: AreaChart,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
 };

stories/banner.stories.tsx

@@ -5,7 +5,7 @@ import { Wrapper } from './common';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Notification/Banner',
+  title: 'Components/Feedback/Banner',
   component: Banner,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {

stories/barchart.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BarChart } from '../src/lib/components/barchart/BarChart.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 import {
   verticalStackedData,
   horizontalStackedData,
@@ -9,7 +9,6 @@ import {
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
 
 import { Component } from '@storybook/blocks';
-import { minHeight } from 'styled-system';
 
 const width = 800;
 // the size control the size of each small item of the bar
@@ -112,7 +111,7 @@ const horizontalBarChartArgs = {
 };
 
 export default {
-  title: 'Components/Chart/BarChart',
+  title: 'Components/Data Display/Charts/BarChart',
   component: BarChart,
   decorators: [
     (story: Component) => (

stories/box.stories.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Box } from '../src/lib/components/box/Box';
 
 const info = {
-  title: 'Components/Box',
+  title: 'Components/Styling/Box',
   component: Box,
   decorators: [(story) => <HighlightBorder>{story()}</HighlightBorder>],
 };

stories/breadcrumb.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Breadcrumb } from '../src/lib/components/breadcrumb/Breadcrumb.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
   title: 'Components/Navigation/Breadcrumb',
   component: Breadcrumb,

stories/buttonv2.stories.tsx

@@ -6,14 +6,19 @@ import {
 } from '../src/lib/components/buttonv2/Buttonv2.component';
 import { Wrapper } from './common';
 import { CopyButton } from '../src/lib/next';
-import { Icon } from '../src/lib';
+
 import { tooltipArgTypes, iconArgType } from './controls';
+import { Form, Icon, Input, Stack } from '../src/lib';
 
 export default {
-  title: 'Components/v2/Button',
+  title: 'Components/Button',
   component: Button,
   decorators: [
-    (story) => <Wrapper className="storybook-button">{story()}</Wrapper>,
+    (story) => (
+      <Wrapper className="storybook-button" style={{ height: 'auto' }}>
+        {story()}
+      </Wrapper>
+    ),
   ],
   args: {
     onClick: action('Button clicked'),
@@ -83,10 +88,49 @@ export const DefaultButtons = {
   },
 };
 
+export const Primary = {
+  args: {
+    variant: 'primary',
+    label: 'Primary',
+  },
+};
+
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+    label: 'Secondary',
+  },
+};
+
+export const Tertiary = {
+  args: {
+    variant: 'outline',
+    label: 'Tertiary',
+  },
+};
+
+export const SimpleForm = {
+  render: ({ ...args }) => {
+    return (
+      <Form
+        layout={{ kind: 'page', title: 'Simple Form' }}
+        rightActions={
+          <Stack gap={'r16'}>
+            <Button variant="outline" label="Cancel" />
+            <Button variant="primary" label="Save" />
+          </Stack>
+        }
+      >
+        <Input name="name" label="Name" value="" onChange={() => {}} />
+      </Form>
+    );
+  },
+};
+
 export const ButtonsWithIcon = {
   ...DefaultButtons,
   args: {
-    icon: <i className="fas fa-arrow-right"></i>,
+    icon: <Icon name="Sync"></Icon>,
   },
 };
 

stories/card.stories.tsx

@@ -15,7 +15,7 @@ import { action } from '@storybook/addon-actions';
 const colors = Object.keys(brand).filter((color) => !/RGB/.test(color));
 
 export default {
-  title: 'Components/Card',
+  title: 'Components/Data Display/Card',
   component: Card,
   decorators: [
     (story) => (

stories/checkbox.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { action } from '@storybook/addon-actions';
 import { Checkbox } from '../src/lib/components/checkbox/Checkbox.component';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
-  title: 'Components/Checkbox',
+  title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   decorators: [
     (story) => (

stories/chips.stories.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../src/lib/components/icon/Icon.component';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Chips',
+  title: 'Components/Deprecated/Chips',
   component: Chips,
   decorators: [
     (story) => (

stories/circularprogressbar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CircularProgressBar } from '../src/lib/components/circularprogressbar/CircularProgressBar.component';
-import { Wrapper, Title, Text } from './common';
+import { Wrapper, Text } from './common';
 export default {
   title: 'Components/Progress & loading/CircularProgressBar',
   component: CircularProgressBar,

stories/cloudprogressbar.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CloudProgressBar } from '../src/lib/components/cloudprogressbar/CloudProgressBar.component';
 import { Wrapper, Title, SubTitle } from './common';
 export default {
-  title: 'Components/Progress & loading/CloudProgressBar',
+  title: 'Components/Deprecated/CloudProgressBar',
   component: CloudProgressBar,
   decorators: [
     (story) => (

stories/collapsiblepanel.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Title, Wrapper } from './common';
+import { Wrapper } from './common';
 import { CollapsiblePanel } from '../src/lib/components/collapsiblepanel/CollapsiblePanel.component';
 const items = [<i className="fas fa-carrot" />, 'banana', 'apple', 'grape'];
 export default {
-  title: 'Components/Navigation/CollapsiblePanel',
+  title: 'Components/Deprecated/Navigation/CollapsiblePanel',
   component: CollapsiblePanel,
   decorators: [
     (story) => (

stories/common.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { getThemePropSelector } from '../src/lib/utils';
 const StyledWrapper = styled.div`
   padding: 30px;
-  min-height: 30vh;
+  height: 30vh;
   background-color: ${getThemePropSelector('backgroundLevel1')};
   color: ${getThemePropSelector('textPrimary')};
 `;

stories/dropdown.stories.tsx

@@ -28,7 +28,7 @@ const items = [
 ];
 
 export default {
-  title: 'Components/Dropdown',
+  title: 'Components/Navigation/Dropdown',
   component: Dropdown,
   decorators: [
     (story) => (

stories/dropzone.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dropzone } from '../src/lib/components/dropzone/Dropzone';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 export default {
-  title: 'Components/Dropzone',
+  title: 'Components/Inputs/Dropzone',
   component: Dropzone,
   decorators: [
     (story) => <Wrapper style={{ minHeight: '10vh' }}>{story()}</Wrapper>,

stories/emptystate.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
 import { Wrapper } from './common';
 export default {
-  title: 'Components/EmptyState',
+  title: 'Components/Data Display/EmptyState',
   component: EmptyState,
   decorators: [(story) => <Wrapper>{story()}</Wrapper>],
   args: {

stories/errorpage401.stories.tsx

@@ -3,7 +3,7 @@ import { ErrorPage401 } from '../src/lib/components/error-pages/ErrorPage401.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/401',
+  title: 'Components/Navigation/Error Pages/401',
   component: ErrorPage401,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,

stories/errorpage404.stories.tsx

@@ -3,7 +3,7 @@ import { ErrorPage404 } from '../src/lib/components/error-pages/ErrorPage404.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/404',
+  title: 'Components/Navigation/Error Pages/404',
   component: ErrorPage404,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,

stories/errorpage500.stories.tsx

@@ -3,7 +3,7 @@ import { ErrorPage500 } from '../src/lib/components/error-pages/ErrorPage500.com
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/500',
+  title: 'Components/Navigation/Error Pages/500',
   component: ErrorPage500,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,

stories/errorpageauth.stories.tsx

@@ -3,7 +3,7 @@ import { ErrorPageAuth } from '../src/lib/components/error-pages/ErrorPageAuth.c
 import { Wrapper } from './common';
 import { localeArgtype } from './controls';
 export default {
-  title: 'Components/Navigation/ErrorPages/Auth',
+  title: 'Components/Navigation/Error Pages/Auth',
   component: ErrorPageAuth,
   decorators: [
     (story) => <Wrapper style={{ height: '100vh' }}>{story()}</Wrapper>,

stories/form.stories.tsx

@@ -16,7 +16,7 @@ import { Select } from '../src/lib/components/selectv2/Selectv2.component';
 import { iconOptions } from './controls';
 
 export default {
-  title: 'Components/Form',
+  title: 'Templates/Form',
   component: Form,
   args: {
     kind: 'page',

stories/globalhealthbar.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
-import { Wrapper, Title } from './common';
+import { Wrapper } from './common';
 const alerts = [
   {
     id: '1',
@@ -104,7 +104,7 @@ const startNotFirstDay = '2021-02-23T23:00:00Z';
 const endNotFirstDay = '2021-03-01T23:00:00Z';
 
 export default {
-  title: 'Components/Chart/GlobalHealthBar',
+  title: 'Components/Data Display/Charts/GlobalHealthBar',
   component: GlobalHealthBar,
   decorators: [
     (story) => (