feat(flex): add flex component (#82)

* feat(flex): add Flex component - Introduced a new Flex component for the Sipe Design System - Created accompanying Storybook stories for visual testing and documentation - Added unit tests using Vitest to ensure component functionality * feat(flex): integrate Flex component into side package - Exported Flex component in src/index.ts for accessibility within the side package * feat(flex): update Flex component with styling enhancements - Added '@radix-ui/react-slot' and 'clsx' as dependencies in package.json. - Updated Flex component to use 'style' prop instead of 'css' for styling. - Enhanced Flex component stories to include new 'space-evenly' justification option. - Improved unit tests to reflect changes in props and styling. - Refactored Flex component to support polymorphic rendering with 'asChild' prop. * feat(flex): extend interface to support div attributes - Updated FlexProps to extend ComponentProps<'div'>, allowing for additional div attributes. - Refactored imports in Flex.tsx for improved readability. * refactor(flex): update package configuration and clean up code - Changed repository URL in package.json to reflect new project structure. - Simplified tsup configuration by importing default settings. - Modified Flex.module.css to remove unnecessary variable for display property. - Cleaned up FlexProps interface in Flex.tsx by removing unused props. - Moved unused global.d.ts file to package root path * Create ninety-icons-invite.md * chore: update lockfile --------- Co-authored-by: y09n <[email protected]>
sipe-team · Jan 8, 2025 · 81249b6 · 81249b6
1 parent 70107b2
commit 81249b6
Show file tree

Hide file tree

Showing 17 changed files with 691 additions and 3 deletions.
diff --git a/.changeset/ninety-icons-invite.md b/.changeset/ninety-icons-invite.md
@@ -0,0 +1,6 @@
+---
+"@sipe-team/flex": minor
+"@sipe-team/side": minor
+---
+
+feat(flex): add flex component
diff --git a/packages/flex/.storybook/main.ts b/packages/flex/.storybook/main.ts
@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+} satisfies StorybookConfig;
diff --git a/packages/flex/.storybook/preview.ts b/packages/flex/.storybook/preview.ts
@@ -0,0 +1,5 @@
+import type { Preview } from '@storybook/react';
+
+export default {
+  tags: ['autodocs'],
+} satisfies Preview;
diff --git a/packages/flex/global.d.ts b/packages/flex/global.d.ts
@@ -0,0 +1 @@
+declare module '*.module.css';
diff --git a/packages/flex/package.json b/packages/flex/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "@sipe-team/flex",
+  "description": "Flex for Sipe Design System",
+  "version": "0.0.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sipe-team/3-2_side"
+  },
+  "type": "module",
+  "exports": "./src/index.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "dev:storybook": "storybook dev -p 6006",
+    "lint:biome": "pnpm exec biome lint",
+    "lint:eslint": "pnpm exec eslint --flag unstable_ts_config",
+    "test": "vitest",
+    "typecheck": "tsc",
+    "prepack": "pnpm run build"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.2.0",
+    "@sipe-team/card": "workspace:^",
+    "@storybook/addon-essentials": "catalog:",
+    "@storybook/addon-interactions": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/blocks": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@storybook/test": "catalog:",
+    "@testing-library/jest-dom": "catalog:",
+    "@testing-library/react": "catalog:",
+    "@types/react": "^18.3.12",
+    "happy-dom": "catalog:",
+    "react": "^18.3.1",
+    "storybook": "catalog:",
+    "tsup": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "react": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://npm.pkg.github.com",
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "./styles.css": "./dist/styles.css"
+    }
+  },
+  "sideEffects": false
+}
diff --git a/packages/flex/src/Flex.module.css b/packages/flex/src/Flex.module.css
@@ -0,0 +1,11 @@
+.flex {
+  display: var(--flex-display);
+  flex-direction: var(--flex-direction);
+  align-items: var(--flex-align);
+  justify-content: var(--flex-justify);
+  flex-wrap: var(--flex-wrap);
+  gap: var(--flex-gap);
+  flex-basis: var(--flex-basis);
+  flex-grow: var(--flex-grow);
+  flex-shrink: var(--flex-shrink);
+}
diff --git a/packages/flex/src/Flex.stories.tsx b/packages/flex/src/Flex.stories.tsx
@@ -0,0 +1,172 @@
+import { Card } from '@sipe-team/card';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Flex } from './Flex';
+
+const meta = {
+  title: 'Flex',
+  component: Flex,
+  tags: ['autodocs'],
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['row', 'column', 'row-reverse', 'column-reverse'],
+      description: 'Flex direction',
+    },
+    align: {
+      control: 'select',
+      options: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+      description: 'Align items',
+    },
+    justify: {
+      control: 'select',
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+      description: 'Justify content',
+    },
+    wrap: {
+      control: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+      description: 'Flex wrap',
+    },
+    gap: {
+      control: 'text',
+      description: 'Gap between items',
+    },
+    inline: {
+      control: 'boolean',
+      description: 'Display as inline-flex',
+    },
+  },
+} satisfies Meta<typeof Flex>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    gap: '1rem',
+    children: [
+      <Card key="1" style={{ height: '20px', width: '100%' }} />,
+      <Card key="2" style={{ height: '20px', width: '100%' }} />,
+      <Card key="3" style={{ height: '20px', width: '100%' }} />,
+    ],
+  },
+};
+
+export const Direction: Story = {
+  args: {
+    direction: 'column',
+    gap: '1rem',
+    style: { width: '100%' },
+    children: [
+      <Card
+        key="1"
+        style={{
+          padding: '0px',
+          height: '60px',
+          width: '100%',
+        }}
+      >
+        1
+      </Card>,
+      <Card
+        key="2"
+        style={{
+          padding: '0px',
+          height: '60px',
+          width: '100%',
+        }}
+      >
+        2
+      </Card>,
+      <Card
+        key="3"
+        style={{
+          padding: '0px',
+          height: '60px',
+          width: '100%',
+        }}
+      >
+        3
+      </Card>,
+    ],
+  },
+};
+
+export const Align: Story = {
+  args: {
+    align: 'center',
+    gap: '1rem',
+    style: { width: '100%' },
+    children: [
+      <Card
+        key="1"
+        style={{ padding: '0px', height: '36px', width: '100%' }}
+      />,
+      <Card
+        key="2"
+        style={{ padding: '0px', height: '48px', width: '100%' }}
+      />,
+      <Card
+        key="3"
+        style={{ padding: '0px', height: '60px', width: '100%' }}
+      />,
+    ],
+  },
+};
+
+export const Justify: Story = {
+  render: () => (
+    <Flex direction="column" gap="2rem">
+      <Flex justify="flex-start" gap="1rem">
+        <Card style={{ minWidth: '150px', height: '30px' }} />
+        <Card style={{ minWidth: '150px', height: '30px' }}>flex-start</Card>
+        <Card style={{ minWidth: '150px', height: '30px' }} />
+      </Flex>
+      <Flex justify="center" gap="1rem">
+        <Card style={{ width: '150px', height: '30px' }} />
+        <Card style={{ width: '150px', height: '30px' }}>center</Card>
+        <Card style={{ width: '150px', height: '30px' }} />
+      </Flex>
+      <Flex justify="flex-end" gap="1rem">
+        <Card style={{ width: '150px', height: '30px' }} />
+        <Card style={{ width: '150px', height: '30px' }}>flex-end</Card>
+        <Card style={{ width: '150px', height: '30px' }} />
+      </Flex>
+      <Flex justify="space-between" gap="1rem">
+        <Card style={{ width: '150px', height: '30px' }} />
+        <Card style={{ width: '150px', height: '30px' }}>space-between</Card>
+        <Card style={{ width: '150px', height: '30px' }} />
+      </Flex>
+      <Flex justify="space-around" gap="1rem">
+        <Card style={{ width: '150px', height: '30px' }} />
+        <Card style={{ width: '150px', height: '30px' }}>space-around</Card>
+        <Card style={{ width: '150px', height: '30px' }} />
+      </Flex>
+      <Flex justify="space-evenly" gap="1rem">
+        <Card style={{ width: '150px', height: '30px' }} />
+        <Card style={{ width: '150px', height: '30px' }}>space-evenly</Card>
+        <Card style={{ width: '150px', height: '30px' }} />
+      </Flex>
+    </Flex>
+  ),
+};
+
+export const Wrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: '1rem',
+    style: { maxWidth: '400px' },
+    children: [
+      <Card key="1" style={{ width: '150px' }} />,
+      <Card key="2" style={{ width: '150px' }} />,
+      <Card key="3" style={{ width: '150px' }} />,
+    ],
+  },
+};