powell-react 0.0.7 → 0.0.9

package/.storybook/main.ts

@@ -0,0 +1,28 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+
+  'framework': {
+    'name': '@storybook/react-vite',
+    'options': {},
+  },
+  'docs': {},
+  'typescript': {
+    'reactDocgen': 'react-docgen-typescript'
+  },
+  'core': {
+    'disableTelemetry': true
+  },
+};
+
+export default config;

package/.storybook/preview.scss

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  padding: 0 !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  height: 100vh;
+  overflow: auto;
+}
+
+#storybook-root {
+  height: 100%;
+  padding: 1rem;
+}

package/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import type { Preview } from "@storybook/react";
+import { PowellProvider } from "@powell/api";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <PowellProvider>
+        <Story />
+      </PowellProvider>
+    ),
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  tags: ["autodocs", "autodocs"]
+};
+
+export default preview;

package/README.md

@@ -1,321 +0,0 @@
-# My React Library
-
-This is a React component library built with TypeScript, Rollup, and Storybook.
-
-## Step-by-Step Guide
-
-### Step 1: Initialize Your Project
-
-Create a new project directory and initialize it with NPM:
-
-```bash
-mkdir my-react-library
-cd my-react-library
-npm init -y
-```
-
-### Step 2: Install Dependencies
-
-Install the necessary development dependencies:
-
-```bash
-npm install -D typescript react react-dom
-npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts rollup-plugin-postcss
-npm install -D tslib postcss
-npm install -D @storybook/react-webpack5 @storybook/addon-essentials
-npm install -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
-npm install -D @types/react
-```
-
-### Step 3: Set Up TypeScript
-
-Initialize TypeScript configuration:
-
-```bash
-npx tsc --init
-```
-
-Edit the tsconfig.json file to match the following configuration:
-
-```json
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "jsx": "react-jsx",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowJs": false,
-    "maxNodeModuleJsDepth": 1,
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "sourceMap": true,
-    "outDir": "dist",
-    "declarationDir": "types",
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "allowUnreachableCode": false,
-    "skipLibCheck": true
-  }
-}
-```
-
-### Step 4: Create Your Components
-
-Create the following directory structure and files:
-
-```css
-src
-└── components
-    ├── Button
-    │   ├── Button.tsx
-    │   └── index.ts
-    └── Input
-        ├── Input.tsx
-        └── index.ts
-└── index.ts
-```
-
-Example Button Component (src/components/Button/Button.tsx):
-
-```tsx
-import React from "react";
-
-interface ButtonProps {
-  label: string;
-}
-
-const Button: React.FC<ButtonProps> = ({ label }) => {
-  return <button>{label}</button>;
-};
-
-export default Button;
-```
-
-Button Component Index (src/components/Button/index.ts):
-
-```tsx
-import Button from "./Button";
-export default Button;
-```
-
-Example Input Component (src/components/Input/Input.tsx):
-
-```tsx
-import React from "react";
-
-interface InputProps {
-  placeholder: string;
-}
-
-const Input: React.FC<InputProps> = ({ placeholder }) => {
-  return <input placeholder={placeholder} />;
-};
-
-export default Input;
-```
-
-Input Component Index (src/components/Input/index.ts):
-
-```tsx
-import Input from "./Input";
-export default Input;
-```
-
-Main Index File (src/index.ts):
-
-```tsx
-export { default as Button } from "./components/Button";
-export { default as Input } from "./components/Input";
-```
-
-### Step 5: Set Up Rollup
-
-Create a Rollup configuration file rollup.config.mjs:
-
-```javascript
-import commonjs from "@rollup/plugin-commonjs";
-import resolve from "@rollup/plugin-node-resolve";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
-import postcss from "rollup-plugin-postcss";
-import packageJson from "./package.json" assert { type: "json" };
-
-export default [
-  {
-    preserveModules: true,
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: "./tsconfig.json",
-        exclude: ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.ts"],
-      }),
-      postcss({ extensions: [".css"], inject: true, extract: false }),
-    ],
-  },
-  {
-    input: "dist/esm/types/index.d.ts",
-    output: [{ file: "dist/index.d.ts", format: "esm" }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-];
-```
-
-### Step 6: Set Up Storybook
-
-Initialize Storybook:
-
-```bash
-npx sb init
-```
-
-Create a .storybook directory and add main.ts:
-
-```javascript
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
-  },
-};
-
-export default config;
-```
-
-### Step 7: Configure package.json
-
-Update package.json with the necessary fields:
-
-```json
-{
-  "name": "my-react-library",
-  "version": "0.0.1",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
-  "files": ["dist"],
-  "scripts": {
-    "dev": "rollup -c --watch",
-    "build": "rollup -c",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "babel": {
-    "sourceType": "unambiguous",
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "chrome": 100,
-            "safari": 15,
-            "firefox": 91
-          }
-        }
-      ],
-      [
-        "@babel/preset-react",
-        {
-          "runtime": "automatic"
-        }
-      ],
-      "@babel/preset-typescript"
-    ]
-  },
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@types/react": "^18.3.3",
-    "postcss": "^8.4.38",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.1.5",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
-  }
-}
-```
-
-### Step 8: Build Your Package
-
-To build your package, run:
-
-```bash
-npm run build
-```
-
-### Step 9: Run Storybook
-
-To start Storybook, run:
-
-```bash
-npm run storybook
-```
-
-### Step 10: Publish to NPM
-
-First, log in to your NPM account:
-
-```bash
-npm login
-```
-
-Publish your package:
-
-```bash
-npm publish
-```
-
-If your package is scoped and you want to make it public, use:
-
-```bash
-npm publish --access public
-```
-
-Congratulations!🎉 You've successfully created and published a React component library with TypeScript, Rollup, and Storybook.