@kalink-ui/seedly 0.1.2 → 0.2.0

package/src/components/cover/cover.stories.tsx

@@ -1,45 +0,0 @@
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Cover } from './cover';
-import { coverRecipe } from './cover.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Layout/Cover',
-  component: Cover,
-  tags: ['autodocs'],
-  argTypes: {
-    ...argTypesFromRecipe(coverRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-
-    minSize: {
-      table: {
-        category: 'Recipe props',
-      },
-    },
-  },
-  args: {
-    minSize: '30vh',
-
-    children: (
-      <>
-        <div>Cover element one</div>
-        <div data-cover-center>Cover element two</div>
-        <div>Cover element three</div>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Cover>;
-
-export default meta;
-
-type Story = StoryObj<typeof Cover>;
-
-export const Default: Story = {};

package/src/components/frame/frame.stories.tsx

@@ -1,39 +0,0 @@
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Frame } from './frame';
-import { frameRecipe } from './frame.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Layout/Frame',
-  component: Frame,
-  tags: ['autodocs'],
-  argTypes: {
-    ...argTypesFromRecipe(frameRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-
-    ratio: {
-      table: {
-        category: 'Recipe props',
-      },
-    },
-  },
-  args: {
-    ratio: '16:9',
-
-    children: <div>Frame element</div>,
-  },
-} satisfies Meta<typeof Frame>;
-
-export default meta;
-
-type Story = StoryObj<typeof Frame>;
-
-export const Default: Story = {};

package/src/components/grid/grid.stories.tsx

@@ -1,50 +0,0 @@
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Grid } from './grid';
-import { gridRecipe } from './grid.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Layout/Grid',
-  component: Grid,
-  tags: ['autodocs'],
-  argTypes: {
-    ...argTypesFromRecipe(gridRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-
-    minSize: {
-      table: {
-        category: 'Recipe props',
-      },
-    },
-  },
-  args: {
-    minSize: '250px',
-
-    children: (
-      <>
-        <div>Grid cell one</div>
-        <div>Grid cell two</div>
-        <div>Grid cell three</div>
-        <div>Grid cell four</div>
-        <div>Grid cell five</div>
-        <div>Grid cell six</div>
-        <div>Grid cell seven</div>
-        <div>Grid cell eight</div>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-
-type Story = StoryObj<typeof Grid>;
-
-export const Default: Story = {};

package/src/components/layout.mdx

@@ -1,206 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Layout/Layout Components" />
-
-# Layout Components
-
-This section provides implementations of various layout components inspired by [Every Layout](https://every-layout.dev/). These components are designed to create responsive, adaptable, and minimal CSS layouts, solving common design problems with composable and flexible solutions.
-
-## The Box
-
-The Box layout provides a simple way to add padding and a border to its content, useful for creating visually distinct sections. It's a fundamental building block for creating consistent spacing and visual separation in your designs.
-
-Use cases:
-
-- Creating card-like components
-- Highlighting important content
-- Separating sections in a form
-
-[Box documentation page](?path=/docs/layout-box--docs)
-
-```jsx
-import { Box } from '@kalink-studio/ui/layout';
-
-<Box padding="md" variant="plain">
-  <p>This is a box.</p>
-</Box>;
-```
-
-## The Stack
-
-The Stack layout arranges its children vertically with a consistent gap between them. It's perfect for creating a vertical flow of elements, eliminating the need for manual margin management between elements.
-
-Use cases:
-
-- Organizing form fields
-- Creating a vertical list of articles or comments
-- Structuring content in a sidebar
-
-[Stack documentation page](?path=/docs/layout-stack--docs)
-
-```jsx
-import { Stack } from '@kalink-studio/ui/layout';
-
-<Stack spacing="md" recursive>
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>
-    <div>Nested item 2.1</div>
-    <div>Nested item 2.2</div>
-  </div>
-  <div>Item 3</div>
-</Stack>;
-```
-
-## The Center
-
-The Center layout is designed to center its content both horizontally and optionally vertically. It's particularly useful for creating visually balanced layouts and focusing attention on specific content.
-
-Use cases:
-
-- Creating hero sections
-- Creating a centered column of content
-- Designing error pages or "empty state" screens
-
-[Center documentation page](?path=/docs/layout-center--docs)
-
-```jsx
-import { Center } from '@kalink-studio/ui/layout';
-
-<Center gutters="md" intrinsic>
-  <p>This content is centered.</p>
-</Center>;
-```
-
-## The Cluster
-
-The Cluster layout arranges elements in a flexible row that wraps to accommodate available space. It's ideal for layouts that need to manage many small items while maintaining consistent spacing and alignment.
-
-Use cases:
-
-- Displaying tags or categories
-- Creating a flexible navigation menu
-- Showing a group of action buttons
-
-[Cluster documentation page](?path=/docs/layout-cluster--docs)
-
-```jsx
-import { Cluster } from '@kalink-studio/ui/layout';
-
-<Cluster spacing="md" justify="center">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-  <div>Item 4</div>
-</Cluster>;
-```
-
-## The Sidebar
-
-The Sidebar layout divides content into a main section and a sidebar, which can be positioned on either side and resized according to the layout requirements. It's crucial for creating responsive layouts that adapt to different screen sizes.
-
-Use cases:
-
-- Creating a layout with a navigation sidebar
-- Displaying additional information alongside main content
-- Building dashboard layouts
-
-[Sidebar documentation page](?path=/docs/layout-sidebar--docs)
-
-```jsx
-import { Sidebar } from '@kalink-studio/ui/layout';
-
-<Sidebar sideWidth="250px" contentMinWidth="300px" spacing="md" side="left">
-  <div>Sidebar content</div>
-  <div>Main content</div>
-</Sidebar>;
-```
-
-## The Switcher
-
-The Switcher layout allows elements to switch between a horizontal and vertical arrangement based on the available space. It's ideal for responsive design scenarios where content needs to adapt to different screen sizes seamlessly.
-
-Use cases:
-
-- Creating responsive navigation menus
-- Designing flexible card layouts
-- Building adaptable form layouts
-
-[Switcher documentation page](?path=/docs/layout-switcher--docs)
-
-```jsx
-import { Switcher } from '@kalink-studio/ui/layout';
-
-<Switcher threshold="300px" spacing="md">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</Switcher>;
-```
-
-## The Cover
-
-The Cover layout helps create a vertically centered layout with a header, main content, and footer, ensuring that the main content stays centered. It's particularly useful for creating full-page layouts or sections that need to utilize the full viewport height.
-
-Use cases:
-
-- Designing landing pages
-- Creating login or signup screens
-- Building "coming soon" pages
-
-[Cover documentation page](?path=/docs/layout-cover--docs)
-
-```jsx
-import { Cover } from '@kalink-studio/ui/layout';
-
-<Cover minSize="60vh" spacing="md" noPad>
-  <header>Header</header>
-  <main>Main content</main>
-  <footer>Footer</footer>
-</Cover>;
-```
-
-## The Grid
-
-The Grid layout provides a responsive grid system that adapts the number of columns based on available space, with defined gaps between columns and rows. It's perfect for creating complex, responsive layouts without the need for media queries.
-
-Use cases:
-
-- Displaying a gallery of images
-- Creating a responsive product listing
-- Organizing dashboard widgets
-
-[Grid documentation page](?path=/docs/layout-grid--docs)
-
-```jsx
-import { Grid } from '@kalink-studio/ui/layout';
-
-<Grid minSize="200px" spacing="md">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-  <div>Item 4</div>
-</Grid>;
-```
-
-## The Frame
-
-The Frame layout is used to maintain aspect ratios of embedded content, such as videos or iframes, ensuring that content scales appropriately while preserving its aspect ratio. It's crucial for responsive design and preventing layout shifts.
-
-Use cases:
-
-- Embedding responsive videos
-- Displaying images with consistent aspect ratios
-- Creating responsive data visualizations
-
-[Frame documentation page](?path=/docs/layout-frame--docs)
-
-```jsx
-import { Frame } from '@kalink-studio/ui/layout';
-
-<Frame ratio="16:9">
-  <img src="...">
-</Frame>;
-```
-
-Each of these components is designed to solve specific layout challenges while promoting responsive and adaptable designs. By combining these layout primitives, you can create complex, flexible layouts that work across various screen sizes and devices, all while minimizing the amount of custom CSS required.

package/src/components/sidebar/sidebar.stories.tsx

@@ -1,60 +0,0 @@
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Sidebar } from './sidebar';
-import { sidebarRecipe } from './sidebar.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Layout/Sidebar',
-  component: Sidebar,
-  tags: ['autodocs'],
-  args: {
-    children: (
-      <>
-        <div>Sidebar</div>
-        <div>Main content</div>
-      </>
-    ),
-  },
-  argTypes: {
-    ...argTypesFromRecipe(sidebarRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-
-    sideWidth: {
-      table: {
-        category: 'Recipe props',
-      },
-      control: { type: 'range', min: 1, max: 100, step: 1 },
-    },
-
-    contentMinWidth: {
-      table: {
-        category: 'Recipe props',
-      },
-      control: { type: 'range', min: 1, max: 100, step: 1 },
-    },
-  },
-
-  render: ({ sideWidth, contentMinWidth, ...args }) => (
-    <Sidebar
-      {...{
-        ...(sideWidth && { sideWidth: `${sideWidth}%` }),
-        ...(contentMinWidth && { contentMinWidth: `${contentMinWidth}%` }),
-      }}
-      {...args}
-    />
-  ),
-} satisfies Meta<typeof Sidebar>;
-
-export default meta;
-
-type Story = StoryObj<typeof Sidebar>;
-
-export const Default: Story = {};

package/src/components/stack/stack.stories.tsx

@@ -1,72 +0,0 @@
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Stack } from './stack';
-import { stackRecipe } from './stack.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Layout/Stack',
-  component: Stack,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    children: (
-      <>
-        <div>Stack element one</div>
-        <div>Stack element two</div>
-        <div>Stack element three</div>
-      </>
-    ),
-  },
-  argTypes: {
-    ...argTypesFromRecipe(stackRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-  },
-} satisfies Meta<typeof Stack>;
-
-export default meta;
-
-type Story = StoryObj<typeof Stack>;
-
-export const Default: Story = {};
-
-export const Nested: Story = {
-  args: {
-    recursive: true,
-    spacing: 4,
-    children: (
-      <>
-        <div>Stack element one</div>
-        <div>
-          <div>Stack element two</div>
-          <div>Stack element three</div>
-        </div>
-        <div>Stack element four</div>
-      </>
-    ),
-  },
-};
-
-export const AsList: Story = {
-  args: {
-    spacing: 4,
-    use: 'ol',
-    children: (
-      <>
-        <li>Stack element one</li>
-        <li>Stack element two</li>
-        <li>Stack element three</li>
-        <li>Stack element four</li>
-      </>
-    ),
-  },
-};

package/src/components/switcher/switcher.stories.tsx

@@ -1,66 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-
-import { argTypesFromRecipe, CommonArgs, commonArgs } from '@/utils/arg-types';
-
-import { Switcher } from './switcher';
-import { switcherRecipe } from './switcher.css';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-type StoryArgs = ComponentPropsWithoutRef<typeof Switcher> & {
-  childCount: number;
-};
-
-const meta = {
-  title: 'Layout/Switcher',
-  component: Switcher,
-  tags: ['autodocs'],
-  argTypes: {
-    ...argTypesFromRecipe(switcherRecipe),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-
-    threshold: {
-      table: {
-        category: 'Recipe props',
-      },
-    },
-
-    limit: {
-      table: {
-        category: 'Recipe props',
-      },
-    },
-
-    childCount: {
-      control: { type: 'range', min: 1, max: 10, step: 1 },
-      table: {
-        category: 'Story args',
-      },
-    },
-  },
-
-  args: {
-    childCount: 4,
-  },
-  render: ({ childCount, ...args }) => {
-    return (
-      <Switcher {...args}>
-        {new Array(childCount).fill('').map((_, index) => (
-          <div key={index}>{`Block ${index + 1}`}</div>
-        ))}
-      </Switcher>
-    );
-  },
-} satisfies Meta<StoryArgs>;
-
-export default meta;
-
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {};

package/src/styles/seed/seed.stories.tsx

@@ -1,52 +0,0 @@
-import { sprinkles, sprinklesProps } from '@/storybook/theme/sprinkles.css';
-import {
-  CommonArgs,
-  commonArgs,
-  argTypesFromSprinkles,
-} from '@/utils/arg-types';
-
-import { plantSeed } from './seed';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-const Sprout = plantSeed({ sprinkles });
-
-const meta = {
-  title: 'Styles/Sprout',
-  component: Sprout,
-  tags: ['autodocs'],
-  args: {
-    children: 'Box content',
-  },
-  argTypes: {
-    ...argTypesFromSprinkles({ props: sprinklesProps }),
-
-    ...commonArgs([
-      CommonArgs.COMPOSABLE,
-      CommonArgs.POLYMORPHIC,
-      CommonArgs.STYLABLE,
-      CommonArgs.REFERABLE,
-    ]),
-  },
-} satisfies Meta<typeof Sprout>;
-
-export default meta;
-
-type Story = StoryObj<typeof Sprout>;
-
-export const Default: Story = {};
-
-export const WithSprinklesProps: Story = {
-  args: {
-    padding: 'medium',
-    backgroundColor: 'blue',
-    color: 'white',
-    textAlign: 'center',
-  },
-};
-
-export const UseElement: Story = {
-  args: {
-    use: 'h1',
-  },
-};

package/src/styles/styles.mdx

@@ -1,98 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Styles/Styles Documentation" />
-
-# Styles Documentation
-
-This document provides an overview of two important files in our styling system: `contract.css.ts` and `seed.tsx`.
-
-## contract.css.ts
-
-The `contract.css.ts` file defines the type contract for our design system's typography. It establishes a consistent structure for different text styles across various sizes.
-
-### Structure
-
-The type contract is organized into the following categories:
-
-- `display`
-- `headline`
-- `title`
-- `label`
-- `body`
-
-Each category has three size variants:
-
-- `large`
-- `medium`
-- `small`
-
-### Usage
-
-This contract ensures that all typography in the application follows a consistent structure. It can be used to create theme variations and maintain a coherent typographic scale across the entire design system.
-
-Example of the structure:
-
-```typescript
-type: {
-  display: {
-    large: typeContract,
-    medium: typeContract,
-    small: typeContract,
-  },
-  // ... other categories
-}
-```
-
-## seed.tsx
-
-The `seed.tsx` file provides a foundation for creating flexible, polymorphic components with built-in support for design system styles.
-
-### Key Features
-
-1. **Polymorphic Components**: Allows components to change their root HTML element.
-2. **Sprinkles Integration**: Incorporates the Sprinkles CSS-in-JS solution for applying atomic styles.
-3. **Type Safety**: Ensures type safety for props and element types.
-
-### Main Functions
-
-#### `plantSeed`
-
-This function creates a base component (Seed) that can be used to build other components in the design system.
-
-Parameters:
-
-- `sprinkles`: A Sprinkles function for applying atomic styles.
-- `defaultClassName`: An optional default class name for the component.
-
-Usage:
-
-```jsx
-import { plantSeed } from './seed';
-import { sprinkles } from './your-sprinkles-file';
-
-const Sprout = plantSeed({ sprinkles });
-
-// Use Sprout as a base for other components
-const Box = (props) => <Sprout {...props} />;
-```
-
-### Types
-
-#### `SeedProps`
-
-This type combines polymorphic component props with Sprinkles props:
-
-```typescript
-type SeedProps<
-  TUse extends ElementType,
-  TSprinklesFn extends SprinklesFnBase,
-> = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
-```
-
-### Benefits
-
-- **Consistency**: Ensures all components built with `plantSeed` have consistent prop interfaces.
-- **Flexibility**: Allows easy creation of new components with full access to design system styles.
-- **Performance**: Leverages Sprinkles for efficient CSS generation and application.
-
-By using `contract.css.ts` and `seed.tsx` together, you can create a robust, type-safe, and flexible foundation for your design system components.