docs: migrate unapproved stories

.storybook/main.js

@@ -7,6 +7,7 @@ module.exports = {
     '../pages/**/*.stories.mdx',
     '../packages/**/src/*.stories.mdx',
     '../pages/**/*.stories.@(js|jsx|ts|tsx)',
-    '../packages/**/src/*.stories.@(js|jsx|ts|tsx)'
+    '../packages/**/src/*.stories.@(js|jsx|ts|tsx)',
+    '../packages/**/src/**/*.stories.@(js|jsx|ts|tsx)'
   ]
 };

packages/banner/package.json

@@ -29,6 +29,7 @@
     "react-dom": ">=16.2.0 <18"
   },
   "devDependencies": {
+    "@storybook/react": "6.3.7",
     "@tablecheck/tablekit-enzyme": "^1.0.0",
     "@tablecheck/tablekit-free-icon-config": "^1.0.0"
   },

packages/banner/src/Banner.stories.tsx

@@ -0,0 +1,131 @@
+import { Story, Meta } from '@storybook/react';
+import '@tablecheck/tablekit-free-icon-config';
+import { Button } from '@tablecheck/tablekit-button';
+import { Size } from '@tablecheck/tablekit-theme';
+import { useState } from 'react';
+
+import { Appearance, BannerProps } from './types';
+
+import { Banner } from './index';
+
+export default {
+  title: 'Components/Banner',
+  component: Banner,
+  argTypes: {
+    appearance: {
+      control: { type: 'select' },
+      options: [
+        Appearance.Primary,
+        Appearance.Success,
+        Appearance.Danger,
+        Appearance.Warning
+      ]
+    },
+    customIcon: {
+      control: false
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['data-testid']
+    }
+  }
+} as Meta;
+
+const Template: Story<BannerProps> = (args) => <Banner {...args} />;
+
+export const Small = Template.bind({});
+Small.args = {
+  size: Size.Small,
+  message: 'Lorem ipsum dolor'
+};
+
+export const Regular = Template.bind({});
+Regular.args = {
+  size: Size.Regular,
+  message: 'Lorem ipsum dolor'
+};
+
+export const Regular2 = Template.bind({});
+Regular2.args = {
+  size: Size.Regular2,
+  message: 'Lorem ipsum dolor'
+};
+Regular2.storyName = 'Regular2';
+
+export const Large = Template.bind({});
+Large.args = {
+  size: Size.Large,
+  message: 'Lorem ipsum dolor'
+};
+
+export const XLarge = Template.bind({});
+XLarge.args = {
+  size: Size.XLarge,
+  message: 'Lorem ipsum dolor'
+};
+XLarge.storyName = 'XLarge';
+
+export const XXLarge = Template.bind({});
+XXLarge.args = {
+  size: Size.XXLarge,
+  message: 'Lorem ipsum dolor'
+};
+XXLarge.storyName = 'XXLarge';
+
+export const Primary = Template.bind({});
+Primary.args = {
+  appearance: Appearance.Primary,
+  message: 'Lorem ipsum dolor'
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  appearance: Appearance.Success,
+  message: 'Lorem ipsum dolor'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  appearance: Appearance.Danger,
+  message: 'Lorem ipsum dolor'
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  appearance: Appearance.Warning,
+  message: 'Lorem ipsum dolor'
+};
+
+export const ShotMessage = Template.bind({});
+ShotMessage.args = {
+  message: 'Lorem ipsum dolor'
+};
+
+export const LongMessage = Template.bind({});
+LongMessage.args = {
+  message:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consectetur augue eget sem viverra, nec vehicula risus aliquam. Nulla a ornare elit. Quisque varius vestibulum nisi quis elementum. Sed in condimentum nisl, at egestas purus. Ut odio magna, sodales sed justo at, mollis dapibus nibh. Phasellus vitae convallis justo. Suspendisse blandit mauris purus, nec dictum dui lobortis ac. Etiam posuere lectus lorem, quis efficitur quam faucibus vitae. Curabitur tincidunt ut purus non tristique.'
+};
+
+const DismissedTemplate: Story<BannerProps> = (args) => {
+  const [isShowBanner, setIsShowBanner] = useState(true);
+  const toggleBaner = () => {
+    setIsShowBanner((previousValue) => !previousValue);
+  };
+  return (
+    <>
+      {isShowBanner ? (
+        <Banner {...args} onClose={toggleBaner} />
+      ) : (
+        <Button onClick={toggleBaner}>Show Banner</Button>
+      )}
+    </>
+  );
+};
+
+export const Dismissed = DismissedTemplate.bind({});
+Dismissed.args = {
+  isDismissible: true,
+  message: 'Lorem ipsum dolor'
+};

packages/button-group/package.json

@@ -31,6 +31,8 @@
     "react-dom": ">=16.2.0 <18"
   },
   "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@storybook/react": "6.3.7",
     "@tablecheck/tablekit-enzyme": "^1.0.0"
   },
   "publishConfig": {

packages/button-group/src/ButtonGroup.stories.tsx

@@ -0,0 +1,48 @@
+import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
+import { Story, Meta } from '@storybook/react';
+import { Icon } from '@tablecheck/tablekit-icon';
+import { useState } from 'react';
+
+import { ButtonGroup, ButtonGroupPropsType } from './index';
+
+export default {
+  title: 'Components/Button Group',
+  component: ButtonGroup,
+  parameters: {
+    controls: {
+      exclude: ['data-testid']
+    }
+  }
+} as Meta;
+
+const items: any[] = [
+  { label: 'First content', value: 1 },
+  { label: 'Second content content content', value: 2 },
+  { label: 'Third content', value: 3 },
+  { label: 'content', value: 5 },
+  { label: 'ad content', value: 32 },
+  { label: 'asd content', value: 31 },
+  { label: 'asd content', value: 33, iconBefore: <Icon icon={faCircle} /> },
+  { label: 'sad content', value: 34 },
+  { label: 'Third', value: 4 }
+];
+
+const Template: Story<ButtonGroupPropsType> = (args) => {
+  const [values, setValues] = useState<any>([]);
+  return (
+    <ButtonGroup
+      {...args}
+      values={values}
+      onChange={(newValues) => {
+        setValues(newValues);
+      }}
+    />
+  );
+};
+
+export const Regular = Template.bind({});
+Regular.args = {
+  isValueRequired: true,
+  isMulti: true,
+  items
+};

packages/button/package.json

@@ -30,7 +30,10 @@
     "react-dom": ">=16.2.0 <18"
   },
   "devDependencies": {
-    "@tablecheck/tablekit-enzyme": "^1.0.0"
+    "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@storybook/react": "6.3.7",
+    "@tablecheck/tablekit-enzyme": "^1.0.0",
+    "storybook-dark-mode": "1.0.8"
   },
   "publishConfig": {
     "access": "public"