update: package and readme

.babelrc.json

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

.storybook/main.js

@@ -1,12 +1,23 @@
 module.exports = {
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-postcss',
   ],
+
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
   },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 };

README.md

@@ -40,7 +40,9 @@ export default funtion App() {
 - [Alert](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-alert--default)
 - [Alert Dialog](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-alert-dialog--default)
 - [Badge](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-badge--default)
+- [Breadcrumb](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-breadcrumb--default)
 - [Button](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-button--default)
+- [Typography](https://yogesh7401.github.io/jenika-ui-react/?path=/story/components-typography--default)
 
 ## Contribute
 

generate_component/templates.tsx

@@ -10,7 +10,7 @@ export const ${name}: FC<${name}Props> = (props) => {
 
 // component.stories.jsx
 exports.story = (name) => `import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { ${name} } from '../src/components/${name}/${name}';
 import '../src/components/tailwind.css';
 import { ${name}Props } from '../src/components/types';
@@ -25,7 +25,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<${name}Props> = (args) => (
+const Template: StoryFn<${name}Props> = (args) => (
   <>
     <${name} {...args} />
   </>

package.json

@@ -20,8 +20,8 @@
     "lint": "tsdx lint --fix",
     "size": "size-limit",
     "generate": "node ./generate_component/index.js $1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy-storybook": "gh-pages -d storybook-static",
     "pretty": "prettier --write ."
   },
@@ -61,13 +61,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@size-limit/preset-small-lib": "^8.1.0",
-    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-essentials": "^7.6.6",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/addons": "^6.5.12",
-    "@storybook/react": "^6.5.12",
-    "@tailwindcss/postcss7-compat": "^2.2.17",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addons": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-webpack5": "^7.6.6",
+    "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "autoprefixer": "^9",
@@ -82,6 +86,7 @@
     "react-is": "^18.2.0",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.1.0",
+    "storybook": "^7.6.6",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",

src/components/Badge/Badge.tsx

@@ -36,7 +36,7 @@ export const Badge: FC<BadgeProps> = (props) => {
       ) : (
         ''
       )}
-      <p>{text}</p>
+      <p className="jui-inline-block jui-align-bottom">{text}</p>
     </p>
   );
 };

stories/Accordion.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Accordion } from '../src/components/Accordion/Accordion';
 import '../src/components/tailwind.css';
 import { AccordionProps } from '../src/components/types';
@@ -15,7 +15,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<AccordionProps> = (args) => <Accordion {...args} />;
+const Template: StoryFn<AccordionProps> = (args) => <Accordion {...args} />;
 
 export const Default = Template.bind({});
 export const Collapse = Template.bind({});

stories/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Alert } from '../src/components/Alert/Alert';
 import '../src/components/tailwind.css';
 import { AlertProps } from '../src/components/types';
@@ -15,7 +15,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<AlertProps> = (args) => <Alert {...args} />;
+const Template: StoryFn<AlertProps> = (args) => <Alert {...args} />;
 
 export const Default = Template.bind({});
 export const CustomIcon = Template.bind({});

stories/AlertDialog.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { AlertDialog } from '../src/components/AlertDialog/AlertDialog';
 import '../src/components/tailwind.css';
 import { AlertDialogProps } from '../src/components/types';
@@ -16,7 +16,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<AlertDialogProps> = (args) => (
+const Template: StoryFn<AlertDialogProps> = (args) => (
   <AlertDialog className="min-h-screen" {...args} />
 );
 

stories/Badge.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Badge } from '../src/components/Badge/Badge';
 import '../src/components/tailwind.css';
 import { BadgeProps } from '../src/components/types';
@@ -15,7 +15,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<BadgeProps> = (args) => (
+const Template: StoryFn<BadgeProps> = (args) => (
   <>
     <Badge {...args} />
   </>

stories/Breadcrumb.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Breadcrumb } from '../src/components/Breadcrumb/Breadcrumb';
 import '../src/components/tailwind.css';
 import { BreadcrumbProps } from '../src/components/types';
@@ -15,7 +15,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<BreadcrumbProps> = (args) => (
+const Template: StoryFn<BreadcrumbProps> = (args) => (
   <>
     <Breadcrumb {...args} />
   </>

stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Button } from '../src/components/Button/Button';
 import '../src/components/tailwind.css';
 import { ButtonProps } from '../src/components/types';
@@ -15,7 +15,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<ButtonProps> = (args) => (
+const Template: StoryFn<ButtonProps> = (args) => (
   <>
     <Button {...args} />
   </>

stories/Typography.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import { Text } from '../src/components/Typography/Typography';
 import '../src/components/tailwind.css';
 import { TypographyProps } from '../src/components/types';
@@ -14,13 +14,13 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<TypographyProps> = (args) => (
+const Template: StoryFn<TypographyProps> = (args) => (
   <>
     <Text {...args} />
   </>
 );
 
-const HeadingTemplate: Story<TypographyProps> = (args) => (
+const HeadingTemplate: StoryFn<TypographyProps> = (args) => (
   <div className="jui-space-y-3">
     <Text variant="h1" type="primary" children="Heading 1" {...args} />
     <Text variant="h2" type="secondary" children="Heading 2" {...args} />
@@ -31,7 +31,7 @@ const HeadingTemplate: Story<TypographyProps> = (args) => (
   </div>
 );
 
-const TextAlignTemplate: Story<TypographyProps> = (args) => (
+const TextAlignTemplate: StoryFn<TypographyProps> = (args) => (
   <div className="jui-space-y-3">
     <Text variant="p" align="left" children="Left Align" {...args} />
     <Text variant="p" align="center" children="Center Align" {...args} />
@@ -40,7 +40,7 @@ const TextAlignTemplate: Story<TypographyProps> = (args) => (
   </div>
 );
 
-const DecorationTemplate: Story<TypographyProps> = (args) => (
+const DecorationTemplate: StoryFn<TypographyProps> = (args) => (
   <div className="jui-space-y-3">
     <Text
       variant="p"