Merge pull request #155 from karishmashuklaa/dev

chore: release v1.0.15

.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.gitignore

@@ -14,6 +14,7 @@
 .env.test.local
 .env.production.local
 .idea/
+migration-storybook.log
 
 npm-debug.log*
 yarn-debug.log*

.storybook/main.js

@@ -1,10 +1,11 @@
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-docs", "@storybook/addon-essentials"],
-  core: {
-    builder: "@storybook/builder-webpack5"
-  },
   docs: {
-    docsPage: "automatic"
+    autodocs: true
+  },
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
   }
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chic-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "🎨 Lightweight opinionated UI Component Library for React",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -41,7 +41,7 @@
   },
   "scripts": {
     "build": "tsc --build \"./tsconfig.json\"",
-    "build:storybook": "build-storybook -s public",
+    "build:storybook": "storybook build -s public",
     "lint": "eslint --ignore-path .gitignore --ext .ts,.tsx .",
     "prettier": "prettier \"**/*.+(js|json|ts|tsx)\"",
     "format": "npm run prettier -- --write",
@@ -50,10 +50,10 @@
     "clean": "rm -rf ./lib",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "storybook dev -p 6006 -s public",
     "prebuild": "npm run compile-icons",
     "prepublish": "npm run build",
-    "build-storybook": "build-storybook -s public",
+    "build-storybook": "storybook build -s public",
     "compile-icons": "npx @svgr/cli -d src/icons src/icons --typescript"
   },
   "eslintConfig": {
@@ -89,14 +89,16 @@
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/node-logger": "^6.5.15",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.15",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@storybook/addon-actions": "^7.0.18",
+    "@storybook/addon-docs": "^7.0.18",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/node-logger": "^7.0.18",
+    "@storybook/preset-create-react-app": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/react-webpack5": "^7.0.18",
     "@svgr/cli": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
@@ -120,6 +122,7 @@
     "react-refresh": "^0.14.0",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^17.0.2",
+    "storybook": "^7.0.18",
     "typescript": "^4.4.2",
     "web-vitals": "^1.1.2",
     "webpack": "^5.75.0"

src/components/accordion/accordion.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 import Accordion, { AccordionProps } from './accordion';
 
@@ -7,7 +7,7 @@ export default {
   component: Accordion
 };
 
-const Template: Story<AccordionProps> = (args) => <Accordion {...args} />;
+const Template: StoryFn<AccordionProps> = (args) => <Accordion {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/alert/alert.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react';
 import { theme } from '../../tokens/themes';
 import Alert, { AlertProps } from '.';
 
@@ -16,7 +16,7 @@ function useAlert(initial: boolean): [boolean, () => void] {
 
   return [show, onClick];
 }
-export const Playground: Story<Arguments> = () => {
+export const Playground: StoryFn<Arguments> = () => {
   const [show, onClick] = useAlert(true);
   return (
     <Alert

src/components/avatar/avatar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react';
 import styled from 'styled-components';
 import Avatar from '.';
 import Badge from '../badge';

src/components/backdrop/backdrop.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import Backdrop, { BackdropProps } from '.';
 
 export default {
   title: 'Components/Backdrop',
   component: Backdrop
 } as Meta;
 
-const Template: Story<BackdropProps> = (args) => <Backdrop {...args} />;
+const Template: StoryFn<BackdropProps> = (args) => <Backdrop {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {};

src/components/badge/badge.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import styled from 'styled-components';
 import { theme } from '../../tokens/themes';
 
@@ -16,7 +16,7 @@ const Box = styled.div`
   border-radius: 4px;
 `;
 
-export const Default: Story<Arguments> = ({ offsetX, offsetY, ...args }) => {
+export const Default: StoryFn<Arguments> = ({ offsetX, offsetY, ...args }) => {
   const offset: BadgeProps['offset'] = [offsetX, offsetY];
 
   return (

src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import Breadcrumb, { BreadcrumbProps } from '.';
 import { theme } from '../../tokens/themes';
 
@@ -21,7 +21,7 @@ const options = {
     { to: 'https://twitter.com', label: 'Twitter' }
   ]
 };
-const Template: Story<BreadcrumbProps> = (args) => (
+const Template: StoryFn<BreadcrumbProps> = (args) => (
   <Breadcrumb {...args}>
     {options.items.map(({ to, label }) => {
       return (

src/components/button/button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react';
 import React from 'react';
 import styled from 'styled-components';
 import Button from '.';

src/components/card/card.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import Card, { StyledCardProps } from '.';
 import CardGroup from '../cardgroup';
 
@@ -7,7 +7,7 @@ export default {
   component: Card
 } as Meta;
 
-const Template: Story<StyledCardProps> = (args) => <Card {...args} />;
+const Template: StoryFn<StyledCardProps> = (args) => <Card {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/circularProgressBar/circularProgressBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { theme } from '../../tokens/themes';
 
 import CircularProgressBar, { CircularProgressBarProps } from './circularProgressBar';
@@ -15,7 +15,7 @@ export default {
   }
 } as Meta;
 
-const Template: Story<CircularProgressBarProps> = (args) => <CircularProgressBar {...args} />;
+const Template: StoryFn<CircularProgressBarProps> = (args) => <CircularProgressBar {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/drawer/drawer.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { Meta, StoryFn } from '@storybook/react';
 import Drawer, { DrawerProps } from '.';
 import { useArgs } from '@storybook/client-api';
 
-const Template: Story<DrawerProps> = ({ ...args }) => {
+const Template: StoryFn<DrawerProps> = ({ ...args }) => {
   const [{ open }, updateArgs] = useArgs();
   const handleClose = () => updateArgs({ open: !open });
   return (

src/components/image/image.stories.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import Image, { ImageProps } from '.';
 
 export default {
   title: 'Components/Image',
   component: Image
 } as Meta;
 
-const Template: Story<ImageProps> = (args) => <Image {...args} />;
+const Template: StoryFn<ImageProps> = (args) => <Image {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/link/link.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 
 import Link, { LinkProps } from '.';
 import { theme } from '../../tokens/themes';
@@ -15,7 +15,7 @@ export default {
   }
 } as Meta;
 
-const Template: Story<LinkProps> = (args) => <Link {...args} />;
+const Template: StoryFn<LinkProps> = (args) => <Link {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/pagination/pagination.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react';
 import { theme } from '../../tokens/themes';
 import Pagination, { PaginationProps } from './pagination';
 export default {
@@ -18,7 +18,7 @@ export default {
   }
 } as Meta;
 
-const Template: Story<PaginationProps> = (args) => <Pagination {...args} />;
+const Template: StoryFn<PaginationProps> = (args) => <Pagination {...args} />;
 
 export const Default = Template.bind({});
 

src/components/progressBar/progressBar.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import { theme } from '../../tokens/themes';
 
 import ProgressBar, { ProgressBarProps } from '.';
@@ -16,7 +16,7 @@ export default {
   }
 } as Meta;
 
-const Template: Story<ProgressBarProps> = (args) => <ProgressBar {...args} />;
+const Template: StoryFn<ProgressBarProps> = (args) => <ProgressBar {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/select/select.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
 import Select, { SelectProps } from '.';
 
@@ -7,7 +7,7 @@ export default {
   component: Select
 } as Meta;
 
-const Template: Story<SelectProps<string[]>> = (args) => {
+const Template: StoryFn<SelectProps<string[]>> = (args) => {
   const [value, setValue] = useState('');
   const data = ['India', 'Mexico', 'Australia', 'Germany'];
 

src/components/skeleton/skeleton.stories.tsx

@@ -1,12 +1,12 @@
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import Skeleton, { SkeletonProps } from '.';
 
 export default {
   title: 'Components/Skeleton',
   component: Skeleton
 } as Meta;
 
-const Template: Story<SkeletonProps> = (args) => <Skeleton {...args} />;
+const Template: StoryFn<SkeletonProps> = (args) => <Skeleton {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/steps/steps.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
 import Steps, { StepsProps } from '.';
 import { theme } from '../../tokens/themes';
@@ -22,7 +22,7 @@ export default {
 
 const { Step } = Steps;
 
-const Template: Story<StepsProps> = ({ ...args }) => {
+const Template: StoryFn<StepsProps> = ({ ...args }) => {
   return (
     <Steps {...args}>
       <Step title="Step One" subTitle="Step one details" />

src/components/switch/switch.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react';
 import Switch from './switch';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';

src/components/tag/tag.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0';
+import { StoryFn, Meta } from '@storybook/react';
 import { theme } from '../../tokens/themes';
 import Tag, { TagProps } from '.';
 import Button from '../button';
@@ -7,7 +7,7 @@ type Arguments = TagProps & {
   content: string;
 };
 
-export const Playground: Story<Arguments> = ({ content, ...args }) => (
+export const Playground: StoryFn<Arguments> = ({ content, ...args }) => (
   <Tag {...args}>{content}</Tag>
 );
 

src/components/text-input/text-input.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Story, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react';
 import TextInput, { TextInputProps } from '.';
 import SearchIcon from '../../icons/Search';
 
@@ -8,7 +8,7 @@ export default {
   component: TextInput
 } as Meta;
 
-const Template: Story<TextInputProps> = (args) => <TextInput {...args} />;
+const Template: StoryFn<TextInputProps> = (args) => <TextInput {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/tooltip/tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react/types-6-0';
+import { Meta } from '@storybook/react';
 import React from 'react';
 import Tooltip from '.';