@fuf-stack/pixels 0.0.4 → 0.0.6

package/src/Card/Card.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Card from './Card';
-
-const meta: Meta<typeof Card> = {
-  title: 'pixels/Card',
-  component: Card,
-};
-
-export default meta;
-type Story = StoryObj<typeof Card>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <p className="w-96">
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation
-        esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur
-        laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit
-        esse.
-      </p>
-    ),
-  },
-};
-
-export const FooterAndHeader: Story = {
-  args: {
-    footer: 'Footer',
-    header: 'Header',
-    children: (
-      <p className="w-96">
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation
-        esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur
-        laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit
-        esse.
-      </p>
-    ),
-  },
-};
-
-export const CustomSlotStyles: Story = {
-  args: {
-    footer: 'Footer',
-    header: 'Header',
-    children: (
-      <p className="w-96">
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitatio
-      </p>
-    ),
-    className: {
-      base: 'text-blue-400',
-      body: 'text-green-400',
-      divider: 'bg-yellow-400',
-    },
-  },
-};

package/src/Card/Card.test.tsx

@@ -1,9 +0,0 @@
-import { describe } from 'vitest';
-
-import storySnapshots from 'storybook-config/story-snapshots';
-
-import * as stories from './Card.stories';
-
-describe('Story Snapshots', () => {
-  storySnapshots(stories);
-});

package/src/Card/Card.tsx

@@ -1,120 +0,0 @@
-import type { ReactNode } from 'react';
-import type { VariantProps } from 'tailwind-variants';
-
-import {
-  Card as NextCard,
-  CardBody as NextCardBody,
-  CardFooter as NextCardFooter,
-  CardHeader as NextCardHeader,
-} from '@nextui-org/card';
-import { Divider as NextDivider } from '@nextui-org/divider';
-import createDebug from 'debug';
-import { tv } from 'tailwind-variants';
-
-const debug = createDebug('component:Card');
-
-// card styling variants
-export const cardVariants = tv({
-  slots: {
-    base: 'border border-slate-300',
-    body: '',
-    divider: 'my-0 bg-slate-300',
-    footer: '',
-    header: 'text-base font-semibold',
-  },
-});
-
-type CardVariantProps = VariantProps<typeof cardVariants>;
-type CardVariantSlots = Partial<
-  Record<keyof ReturnType<typeof cardVariants>, string>
->;
-
-export interface CardProps extends CardVariantProps {
-  /** child components */
-  children?: ReactNode;
-  /** CSS class name */
-  className?: string | CardVariantSlots;
-  /** footer content */
-  footer?: ReactNode;
-  /** header content */
-  header?: ReactNode;
-  /** HTML data-testid attribute used in e2e tests */
-  testId?: string;
-}
-
-/**
- * Card component based on [NextUI Card](https://nextui.org/docs/components/card)
- */
-const Card = ({
-  children = null,
-  className = undefined,
-  testId = undefined,
-  header = undefined,
-  footer = undefined,
-}: CardProps) => {
-  debug('Card', { className, testId });
-  const {
-    base: baseSlot,
-    body: bodySlot,
-    divider: dividerSlot,
-    footer: footerSlot,
-    header: headerSlot,
-  } = cardVariants();
-
-  return (
-    <NextCard
-      data-testid={testId && `card_${testId}`}
-      className={baseSlot({
-        className: typeof className === 'object' ? className.base : className,
-      })}
-      fullWidth
-      radius="sm"
-      shadow="none"
-    >
-      {header && (
-        <>
-          <NextCardHeader
-            data-testid={testId && `card_header_${testId}`}
-            className={headerSlot({
-              className: typeof className === 'object' && className.header,
-            })}
-          >
-            {header}
-          </NextCardHeader>
-          <NextDivider
-            className={dividerSlot({
-              className: typeof className === 'object' && className.divider,
-            })}
-          />
-        </>
-      )}
-      <NextCardBody
-        data-testid={testId && `card_body_${testId}`}
-        className={bodySlot({
-          className: typeof className === 'object' && className.body,
-        })}
-      >
-        {children}
-      </NextCardBody>
-      {footer && (
-        <>
-          <NextDivider
-            className={dividerSlot({
-              className: typeof className === 'object' && className.divider,
-            })}
-          />
-          <NextCardFooter
-            data-testid={testId && `card_footer_${testId}`}
-            className={footerSlot({
-              className: typeof className === 'object' && className.footer,
-            })}
-          >
-            {footer}
-          </NextCardFooter>
-        </>
-      )}
-    </NextCard>
-  );
-};
-
-export default Card;

package/src/Card/__snapshots__/Card.test.tsx.snap

@@ -1,94 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Story Snapshots > CustomSlotStyles 1`] = `
-<div>
-  <div
-    class="flex flex-col relative overflow-hidden height-auto box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300 text-blue-400"
-    tabindex="-1"
-  >
-    <div
-      class="flex p-3 z-10 w-full justify-start items-center shrink-0 overflow-inherit color-inherit subpixel-antialiased rounded-t-small text-base font-semibold"
-    >
-      Header
-    </div>
-    <hr
-      class="shrink-0 border-none w-full h-divider my-0 bg-yellow-400"
-      role="separator"
-    />
-    <div
-      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased text-green-400"
-    >
-      <p
-        class="w-96"
-      >
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitatio
-      </p>
-    </div>
-    <hr
-      class="shrink-0 border-none w-full h-divider my-0 bg-yellow-400"
-      role="separator"
-    />
-    <div
-      class="p-3 h-auto flex w-full items-center overflow-hidden color-inherit subpixel-antialiased rounded-b-small"
-    >
-      Footer
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Story Snapshots > Default 1`] = `
-<div>
-  <div
-    class="flex flex-col relative overflow-hidden height-auto text-foreground box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300"
-    tabindex="-1"
-  >
-    <div
-      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased"
-    >
-      <p
-        class="w-96"
-      >
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit esse.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Story Snapshots > FooterAndHeader 1`] = `
-<div>
-  <div
-    class="flex flex-col relative overflow-hidden height-auto text-foreground box-border bg-content1 outline-none data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 shadow-none rounded-small w-full transition-transform-background motion-reduce:transition-none border border-slate-300"
-    tabindex="-1"
-  >
-    <div
-      class="flex p-3 z-10 w-full justify-start items-center shrink-0 overflow-inherit color-inherit subpixel-antialiased rounded-t-small text-base font-semibold"
-    >
-      Header
-    </div>
-    <hr
-      class="shrink-0 border-none w-full h-divider my-0 bg-slate-300"
-      role="separator"
-    />
-    <div
-      class="relative flex w-full p-3 flex-auto flex-col place-content-inherit align-items-inherit h-auto break-words text-left overflow-y-auto subpixel-antialiased"
-    >
-      <p
-        class="w-96"
-      >
-        Lorem commodo nulla adipisicing cillum Lorem sunt laboris exercitation esse. Exercitation ut cillum cupidatat deserunt occaecat pariatur laborum ut reprehenderit veniam. Culpa fugiat aliqua consectetur sit esse.
-      </p>
-    </div>
-    <hr
-      class="shrink-0 border-none w-full h-divider my-0 bg-slate-300"
-      role="separator"
-    />
-    <div
-      class="p-3 h-auto flex w-full items-center overflow-hidden color-inherit subpixel-antialiased rounded-b-small"
-    >
-      Footer
-    </div>
-  </div>
-</div>
-`;

package/src/Card/index.ts

@@ -1,3 +0,0 @@
-import Card from './Card';
-
-export default Card;

package/tailwind.config.js

@@ -1,7 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
-const sharedConfig = require('tailwind-config/tailwind.config');
-
-module.exports = {
-  presets: [sharedConfig],
-};

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ESNext"]
-  },
-  "include": ["src", "globals.d.ts"]
-}

package/tsup.config.ts

@@ -1,15 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  clean: true,
-  dts: true,
-  entry: [
-    'src',
-    '!src/**/__snapshots__/**',
-    '!src/**/*.stories.*',
-    '!src/**/*.test.*',
-  ],
-  format: ['cjs', 'esm'],
-  sourcemap: true,
-});

package/vitest.config.ts

@@ -1,9 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-
-import { defineProject } from 'vitest/config';
-
-export default defineProject({
-  test: {
-    environment: 'jsdom',
-  },
-});