diff --git a/README.md b/README.md index 65e3097..efc395e 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,37 @@ -# Lambda Curry Medusa Forms +
+ +![Lambda Curry Logo](https://lambdacurry.dev/favicon.ico) + +# Welcome to Medusa Forms by Lambda Curry! + +**Digital products made easy** + +*Controlled form components for Medusa Admin and Medusa UI applications* + +[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://lambda-curry.github.io/medusa-forms/?path=/docs/0-1-hello-world-start-here--docs) +[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/) +[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/) + +--- + +*Built with expertise by [Lambda Curry](https://lambdacurry.dev) - your trusted Medusa development partners* + +
+ +## 🚀 About This Library A controlled form components library for Medusa Admin and Medusa UI applications. Checkout our [Storybook Documentation](https://lambda-curry.github.io/medusa-forms/?path=/docs/0-1-hello-world-start-here--docs) to see the components in action and get started. -## Features +## ✨ Features - **Controlled Components**: All form components are controlled and work seamlessly with react-hook-form - **Medusa UI Integration**: Built specifically for Medusa Admin and Medusa UI design system - **TypeScript Support**: Full TypeScript support with proper type definitions - **Storybook Documentation**: Comprehensive documentation and examples -## Components +## 📦 Components - `ControlledInput` - Text input with validation - `ControlledTextArea` - Multi-line text input @@ -20,7 +40,7 @@ Checkout our [Storybook Documentation](https://lambda-curry.github.io/medusa-for - `ControlledDatePicker` - Date selection - `ControlledCurrencyInput` - Currency input with formatting -## Getting Started +## 🏁 Getting Started Step 1: Install dependencies @@ -31,10 +51,10 @@ yarn install Step 2: Start Storybook ```bash -yarn storybook +yarn dev ``` -## Development +## 🔧 Development ### PR Previews @@ -83,3 +103,15 @@ The PR preview is deployed to the `gh-pages` branch in a directory structure lik /pr-preview/pr-[PR_NUMBER]/ ``` +--- + +
+ +**Need help with your Medusa project?** + +Lambda Curry specializes in Medusa development and can help you build amazing e-commerce experiences. + +[Contact Lambda Curry](https://lambdacurry.dev/#contact-us) | [View Our Work](https://lambdacurry.dev) + +
+ diff --git a/apps/docs/.storybook/manager.ts b/apps/docs/.storybook/manager.ts new file mode 100644 index 0000000..7809d60 --- /dev/null +++ b/apps/docs/.storybook/manager.ts @@ -0,0 +1,7 @@ +import { addons } from '@storybook/manager-api'; +import theme from './theme'; + +addons.setConfig({ + theme, +}); + diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts index ab220a8..bde35e5 100644 --- a/apps/docs/.storybook/preview.ts +++ b/apps/docs/.storybook/preview.ts @@ -1,5 +1,6 @@ import type { Preview } from '@storybook/react-vite'; import '../src/main.css'; +import theme from './theme'; const preview: Preview = { parameters: { @@ -9,6 +10,9 @@ const preview: Preview = { date: /Date$/i, }, }, + docs: { + theme, + }, options: { storySort: { method: 'alphabetical', @@ -18,3 +22,4 @@ const preview: Preview = { }; export default preview; + diff --git a/apps/docs/.storybook/theme.ts b/apps/docs/.storybook/theme.ts new file mode 100644 index 0000000..db2d714 --- /dev/null +++ b/apps/docs/.storybook/theme.ts @@ -0,0 +1,37 @@ +import { create } from '@storybook/theming/create'; + +export default create({ + base: 'light', + + // Brand + brandTitle: 'Medusa Forms by Lambda Curry', + brandUrl: 'https://lambdacurry.dev', + brandImage: 'https://lambdacurry.dev/favicon.ico', + brandTarget: '_blank', + + // Colors + colorPrimary: '#6366f1', // Lambda Curry brand color + colorSecondary: '#6366f1', + + // UI + appBg: '#ffffff', + appContentBg: '#ffffff', + appBorderColor: '#e2e8f0', + appBorderRadius: 8, + + // Text colors + textColor: '#1f2937', + textInverseColor: '#ffffff', + + // Toolbar default and active colors + barTextColor: '#6b7280', + barSelectedColor: '#6366f1', + barBg: '#f8fafc', + + // Form colors + inputBg: '#ffffff', + inputBorder: '#d1d5db', + inputTextColor: '#1f2937', + inputBorderRadius: 6, +}); + diff --git a/apps/docs/src/0.1 Hello World (start here).mdx b/apps/docs/src/0.1 Hello World (start here).mdx index 5e4090c..ca7aa0d 100644 --- a/apps/docs/src/0.1 Hello World (start here).mdx +++ b/apps/docs/src/0.1 Hello World (start here).mdx @@ -1,4 +1,11 @@ -# Welcome to Medusa Forms! 🎯 +
+ Lambda Curry Logo + + # Welcome to Medusa Forms by Lambda Curry! + +
Digital products made easy
+
Built with expertise by Lambda Curry - your trusted Medusa development partners
+
**Controlled form components designed specifically for Medusa Admin and Medusa UI** @@ -137,4 +144,15 @@ Check out our **Form Integration Examples** story to see complete working forms --- +
+
Need help with your Medusa project?
+
Lambda Curry specializes in Medusa development and can help you build amazing e-commerce experiences.
+
+ Contact Lambda Curry + {' | '} + View Our Work +
+
+ **Ready to build better forms?** Start exploring the components in the sidebar! 👈 + diff --git a/apps/docs/src/0.2 Writing Tests.mdx b/apps/docs/src/0.2 Writing Tests.mdx deleted file mode 100644 index c1cea90..0000000 --- a/apps/docs/src/0.2 Writing Tests.mdx +++ /dev/null @@ -1,85 +0,0 @@ -# Writing Tests with Storybook Test Runner - -Storybook Test Runner is a powerful tool that allows you to write and execute tests directly within your Storybook stories. This approach provides a seamless integration between your component documentation and testing, ensuring that your components behave as expected in various scenarios. Below, we'll explore how to write tests using the Storybook Test Runner, using the `TextField` component as a guide. - -## Writing Tests - -### Define Your Component and Story - -Create a Storybook story for your component. For example, the `TextField` component: - -```typescript -import type { Meta, StoryObj } from '@storybook/react'; -import { TextField } from './TextField'; - -const meta: Meta = { - component: TextField, - args: { - label: 'Username', - placeholder: 'Enter your username', - }, -}; - -export default meta; - -type Story = StoryObj; - -export const Tests: Story = {}; -``` - -### Write Test Scenarios - -Define test scenarios as functions that interact with the component using `@storybook/test` and `@testing-library/dom`. These functions simulate user interactions and assert expected outcomes. - -Example: - -```typescript -import { expect } from '@storybook/jest'; -import { userEvent } from '@storybook/testing-library'; -import type { StoryContext } from '@storybook/react'; - -const testValidSubmission = async ({ canvas }: StoryContext) => { - const input = canvas.getByLabelText('Username'); - await userEvent.type(input, 'validuser'); - await userEvent.tab(); - expect(input).toHaveValue('validuser'); - expect(canvas.queryByText('Username is required')).not.toBeInTheDocument(); -}; - -const testInvalidSubmission = async ({ canvas }: StoryContext) => { - const input = canvas.getByLabelText('Username'); - await userEvent.type(input, 'a'); - await userEvent.tab(); - expect(canvas.getByText('Username must be at least 3 characters')).toBeInTheDocument(); -}; -``` - -### Integrate Tests into Stories - -Use the `play` function in your Storybook story to execute the test scenarios. This function runs after the story renders, allowing you to interact with the component and verify its behavior. - -Example: - -```typescript -export const Tests: Story = { - play: async (storyContext) => { - await testValidSubmission(storyContext); - await testInvalidSubmission(storyContext); - }, -}; -``` - -## Testing Philosophy - -1. **Component Behavior**: Focus on testing the behavior of your component in isolation. Ensure that it handles user interactions, displays the correct UI, and manages state as expected. - -2. **User-Centric Scenarios**: Write tests that mimic real user interactions. This includes filling out forms, clicking buttons, and verifying that the UI responds correctly. - -3. **Edge Cases and Validation**: Test edge cases and validation logic to ensure your component handles invalid input gracefully and provides meaningful feedback to users. - -4. **Integration with Backend**: If your component interacts with a backend (e.g., form submission), simulate these interactions and verify that the component handles responses correctly. - -5. **Maintainability**: Write clear and concise tests that are easy to understand and maintain. Use descriptive function names and comments to explain the purpose of each test. - -By following these guidelines, you can leverage Storybook Test Runner to create comprehensive and reliable tests for your components, ensuring they meet both functional and user experience requirements. -