@kalink-ui/seedly 0.1.0

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

@@ -0,0 +1,60 @@
+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/sidebar/sidebar.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+import {
+  contentMinWidthVar,
+  sidebarRecipe,
+  SidebarVariants,
+  sideWidthVar,
+} from './sidebar.css';
+
+type SidebarProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The size of the side element
+     */
+    sideWidth?: string;
+
+    /**
+     * The narrowest the content (main) element can be before wrapping.
+     * Should be a percentage.
+     */
+    contentMinWidth?: string;
+
+    /**
+     * The side of the sidebar
+     */
+    side?: SidebarVariants['side'];
+
+    /**
+     * The spacing between the sidebar and main content elements
+     */
+    spacing?: SidebarVariants['spacing'];
+
+    /**
+     * Whether the sidebar should stretch to fill the available space
+     */
+    noStretch?: SidebarVariants['noStretch'];
+  };
+
+/**
+ * A custom element for placing two elements side-by-side. If space permits,
+ * the sided element has a set width, and the companion takes up the rest
+ * of the available horizontal space. If not, the elements are collapsed into
+ * a single column, each taking up 100% of the horizontal space.
+ *
+ * https://every-layout.dev/layouts/sidebar/
+ */
+export const Sidebar = <TUse extends ElementType>({
+  side = 'left',
+  sideWidth,
+  contentMinWidth,
+  spacing,
+  noStretch,
+  className,
+  ...props
+}: SidebarProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(
+        sidebarRecipe({ side, sideWidth: !!sideWidth, spacing, noStretch }),
+        className,
+      )}
+      style={assignInlineVars({
+        ...(sideWidth && { [sideWidthVar]: sideWidth }),
+        ...(contentMinWidth && { [contentMinWidthVar]: contentMinWidth }),
+      })}
+      {...rest}
+    />
+  );
+};

package/src/components/stack/index.ts

@@ -0,0 +1,2 @@
+export { Stack } from './stack';
+export { stackRecipe, type StackVariants } from './stack.css';

package/src/components/stack/stack.css.ts

@@ -0,0 +1,36 @@
+import { createVar, globalStyle } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '@/styles/system-contract.css';
+import { mapContractVars } from '@/utils/map-contract-vars';
+
+const spacing = createVar();
+
+export const stackRecipe = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+  },
+
+  variants: {
+    recursive: {
+      true: {},
+    },
+
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      vars: {
+        [spacing]: sys.spacing[key],
+      },
+    })),
+  },
+});
+
+globalStyle(
+  `${stackRecipe.classNames.base} > * + *, ${stackRecipe.classNames.variants.recursive.true} * + *`,
+  {
+    marginBlockStart: spacing,
+  },
+);
+
+export type StackVariants = NonNullable<RecipeVariants<typeof stackRecipe>>;

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

@@ -0,0 +1,72 @@
+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/stack/stack.tsx

@@ -0,0 +1,44 @@
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+import { stackRecipe, StackVariants } from './stack.css';
+
+type StackProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> & {
+  /**
+   * Whether the stack spacing should be applied recursively
+   */
+  recursive?: StackVariants['recursive'];
+
+  /**
+   * The spacing between items
+   */
+  spacing?: StackVariants['spacing'];
+};
+
+/**
+ * A custom element for injecting white space (margin) between flow
+ * (block) elements along a vertical axis.
+ *
+ * `splitAfter` is not available in this implementation since it only
+ * works in a web component context where the css selector is
+ * dynamically generated.
+ *
+ * https://every-layout.dev/layouts/stack
+ */
+export const Stack = <TUse extends ElementType = 'div'>({
+  recursive,
+  spacing,
+  className,
+  ...props
+}: StackProps<TUse>) => {
+  const { use: Comp = 'div', ...rest } = props;
+
+  return (
+    <Comp
+      className={clsx(stackRecipe({ recursive, spacing }), className)}
+      {...rest}
+    />
+  );
+};

package/src/components/switcher/index.ts

@@ -0,0 +1,2 @@
+export { Switcher } from './switcher';
+export { switcherRecipe, type SwitcherVariants } from './switcher.css';

package/src/components/switcher/switcher.css.ts

@@ -0,0 +1,93 @@
+import { createVar, globalStyle } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
+
+import { sys } from '@/styles/system-contract.css';
+import { mapContractVars } from '@/utils/map-contract-vars';
+
+export const thresholdVar = createVar();
+export const limitVar = createVar();
+
+export const switcherRecipe = recipe({
+  base: {
+    display: 'flex',
+    flexWrap: 'wrap',
+
+    vars: {
+      [thresholdVar]: sys.layout.measure,
+    },
+  },
+
+  variants: {
+    /**
+     * The space (margin) between the child elements
+     */
+    spacing: mapContractVars(sys.spacing, (key) => ({
+      gap: sys.spacing[key],
+    })),
+
+    /**
+     * The maximum number of elements allowed to appear in the horizontal configuration
+     */
+    limit: {
+      2: {},
+      3: {},
+      4: {},
+      5: {},
+      6: {},
+    },
+  },
+});
+
+globalStyle(`${switcherRecipe.classNames.base} > *`, {
+  flexBasis: `calc((${thresholdVar} - 100%) * 999)`,
+  flexGrow: 1,
+});
+
+globalStyle(
+  `${switcherRecipe.classNames.variants.limit[2]} > :nth-last-child(n+3), ${
+    switcherRecipe.classNames.variants.limit[2]
+  } > :nth-last-child(n+3) ~ *`,
+  {
+    flexBasis: '100%',
+  },
+);
+
+globalStyle(
+  `${switcherRecipe.classNames.variants.limit[3]} > :nth-last-child(n+4), ${
+    switcherRecipe.classNames.variants.limit[3]
+  } > :nth-last-child(n+4) ~ *`,
+  {
+    flexBasis: '100%',
+  },
+);
+
+globalStyle(
+  `${switcherRecipe.classNames.variants.limit[4]} > :nth-last-child(n+5), ${
+    switcherRecipe.classNames.variants.limit[4]
+  } > :nth-last-child(n+5) ~ *`,
+  {
+    flexBasis: '100%',
+  },
+);
+
+globalStyle(
+  `${switcherRecipe.classNames.variants.limit[5]} > :nth-last-child(n+6), ${
+    switcherRecipe.classNames.variants.limit[5]
+  } > :nth-last-child(n+6) ~ *`,
+  {
+    flexBasis: '100%',
+  },
+);
+
+globalStyle(
+  `${switcherRecipe.classNames.variants.limit[6]} > :nth-last-child(n+7), ${
+    switcherRecipe.classNames.variants.limit[6]
+  } > :nth-last-child(n+7) ~ *`,
+  {
+    flexBasis: '100%',
+  },
+);
+
+export type SwitcherVariants = NonNullable<
+  RecipeVariants<typeof switcherRecipe>
+>;

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

@@ -0,0 +1,66 @@
+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/components/switcher/switcher.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { clsx } from 'clsx';
+import { ElementType } from 'react';
+
+import { PolymorphicComponentProps } from '@/types/utils.types';
+
+import { switcherRecipe, SwitcherVariants, thresholdVar } from './switcher.css';
+
+type SwitcherProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> & {
+    /**
+     * The gap between items
+     */
+    spacing?: SwitcherVariants['spacing'];
+
+    /**
+     * The threshold at which to switch between horizontal and vertical layouts
+     */
+    threshold?: string;
+
+    /**
+     * The maximum number of elements allowed to appear in the horizontal configuration
+     */
+    limit?: SwitcherVariants['limit'];
+  };
+
+/**
+ * Switch directly between horizontal and vertical layouts
+ * at a given (container width-based) breakpoint or 'threshold'
+ *
+ * https://every-layout.dev/layouts/switcher
+ */
+export const Switcher = <TUse extends ElementType>({
+  spacing,
+  threshold,
+  limit,
+  className,
+  ...props
+}: SwitcherProps<TUse>) => {
+  const { use: Comp = 'div' } = props;
+
+  return (
+    <Comp
+      className={clsx(switcherRecipe({ spacing, limit }), className)}
+      style={assignInlineVars({
+        ...(threshold && { [thresholdVar]: threshold }),
+      })}
+      {...props}
+    />
+  );
+};

package/src/styles/index.ts

@@ -0,0 +1,2 @@
+export { sys } from './system-contract.css';
+export { plantSeed } from './seed';

package/src/styles/seed/index.ts

@@ -0,0 +1 @@
+export { plantSeed } from './seed';

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

@@ -0,0 +1,52 @@
+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/seed/seed.tsx

@@ -0,0 +1,53 @@
+import { clsx } from 'clsx';
+
+import type { PolymorphicComponentProps } from '@/types/utils.types';
+import {
+  extractSprinklesProps,
+  type GetSprinkles,
+  type SprinklesFnBase,
+} from '@/utils/extract-sprinkles-props';
+
+import type { ElementType } from 'react';
+
+/**
+ * When you use `SeedProps` in other components and want to define a default
+ * value for that prop in your component (e.g. `const { use = 'span' } = props;`)
+ * you will need to cast the `use` prop as `YourComponentProps<TUse>['use]` otherwise
+ * it will be considered as `TUse | span` and you will get a type error.
+ *
+ * You can see an example of this in `frontend/components/text/text.tsx`.
+ */
+export type SeedProps<
+  TUse extends ElementType,
+  TSprinklesFn extends SprinklesFnBase,
+> = PolymorphicComponentProps<TUse> & GetSprinkles<TSprinklesFn>;
+
+export interface CreateSeedParams<SprinklesFn> {
+  sprinkles: SprinklesFn;
+  defaultClassName?: string;
+}
+
+export function plantSeed<SprinklesFn extends SprinklesFnBase>({
+  sprinkles,
+  defaultClassName,
+}: CreateSeedParams<SprinklesFn>) {
+  const Seed = <TUse extends ElementType = 'div'>(
+    props: SeedProps<TUse, SprinklesFn>,
+  ) => {
+    const { use: Comp = 'div', className, ...rest } = props;
+
+    const [sprinklesProps, componentProps] = extractSprinklesProps(
+      rest,
+      sprinkles,
+    );
+
+    return (
+      <Comp
+        className={clsx(sprinkles(sprinklesProps), defaultClassName, className)}
+        {...componentProps}
+      />
+    );
+  };
+
+  return Seed;
+}