Merge pull request #2 from julio-salas03/jcs/add-storybook

Add storybook

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 
 # build
-dist
+dist
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -1,30 +1,23 @@
 {
   "name": "split-text-react",
   "version": "0.0.0",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "build": "tsup",
-    "test": "jest",
-    "prettier:check": "prettier --check ./*",
-    "prettier:format": "prettier --write ./*"
-  },
+  "author": "Julio Salas",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/julio-salas03/split-text-react.git"
   },
-  "author": "Julio Salas",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/julio-salas03/split-text-react/issues"
-  },
-  "homepage": "https://github.com/julio-salas03/split-text-react#readme",
-  "description": "",
-  "peerDependencies": {
-    "react": ">=16"
-  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.8.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@swc/core": "^1.7.22",
     "@swc/jest": "^0.2.36",
     "@testing-library/dom": "^10.4.0",
@@ -33,13 +26,34 @@
     "@types/node": "^22.5.0",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@types/react-resizable": "^3.0.8",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-resizable": "^3.0.5",
     "resize-observer-polyfill": "^1.5.1",
+    "storybook": "^8.2.9",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4"
-  }
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "bugs": {
+    "url": "https://github.com/julio-salas03/split-text-react/issues"
+  },
+  "description": "",
+  "homepage": "https://github.com/julio-salas03/split-text-react#readme",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "test": "jest",
+    "prettier:check": "prettier --check ./*",
+    "prettier:format": "prettier --write ./*",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "types": "./dist/index.d.ts"
 }

stories/SplitText.stories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SplitText, SplitTextProps } from './../src/index';
+import { Resizable } from 'react-resizable/';
+import 'react-resizable/css/styles.css';
+
+const meta: Meta<typeof SplitText> = {
+  component: SplitText,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SplitText>;
+
+const Component = ({ children, ...rest }: SplitTextProps) => {
+  const [size, setSize] = React.useState({ width: 300, height: 400 });
+  return (
+    <>
+      <Resizable
+        height={size.height}
+        width={size.width}
+        onResize={(_, { size }) => setSize(size)}
+      >
+        <div
+          className="box"
+          style={{
+            width: size.width + 'px',
+            height: size.height + 'px',
+            border: 'solid red 4px',
+            padding: '10px',
+          }}
+        >
+          <SplitText {...rest}>{children}</SplitText>
+        </div>
+      </Resizable>
+    </>
+  );
+};
+
+export const Primary: Story = {
+  args: {
+    children:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac urna hendrerit, aliquet quam eget, faucibus lectus.',
+  },
+  render: props => <Component {...props} />,
+};

tests/index.test.tsx

@@ -16,14 +16,14 @@ describe('SplitText', () => {
     expect(() =>
       render(
         <SplitText>
-          <div>foo</div>
+          <div>Lorem ipsum</div>
         </SplitText>
       )
     ).toThrow();
   });
 
   it('should support computed text', () => {
-    expect(() => render(<SplitText>foo {5}</SplitText>)).not.toThrow();
+    expect(() => render(<SplitText>Lorem {'ipsum'}</SplitText>)).not.toThrow();
   });
 
   it('should forward the ref to the component', () => {
@@ -37,7 +37,7 @@ describe('SplitText', () => {
         expect(ref.current).toBeInstanceOf(HTMLElement);
       };
 
-      return <SplitText ref={ref}>Hello World</SplitText>;
+      return <SplitText ref={ref}>Lorem ipsum</SplitText>;
     };
 
     render(<Component />);