feat(flex): add flex component

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;

packages/flex/.storybook/preview.ts

@@ -0,0 +1,5 @@
+import type { Preview } from '@storybook/react';
+
+export default {
+  tags: ['autodocs'],
+} satisfies Preview;

packages/flex/package.json

@@ -0,0 +1,67 @@
+{
+  "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-1_sds"
+  },
+  "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": {
+    "@sipe-team/card": "workspace:^"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.2.0",
+    "@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"
+        }
+      }
+    }
+  },
+  "sideEffects": false
+}

packages/flex/src/Flex.stories.tsx

@@ -0,0 +1,134 @@
+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',
+      ],
+      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',
+    css: { width: '100%' },
+    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 Align: Story = {
+  args: {
+    align: 'center',
+    gap: '1rem',
+    css: { width: '100%' },
+    children: [
+      <Card
+        key="1"
+        style={{ padding: '0px', height: '12px', width: '100%' }}
+      />,
+      <Card
+        key="2"
+        style={{ padding: '0px', height: '18px', width: '100%' }}
+      />,
+      <Card
+        key="3"
+        style={{ padding: '0px', height: '24px', width: '100%' }}
+      />,
+    ],
+  },
+};
+
+export const Justify: Story = {
+  render: () => (
+    <Flex direction="column" gap="1rem">
+      <Flex justify="flex-start" gap="1rem">
+        <Card style={{ minWidth: '150px' }} />
+        <Card style={{ minWidth: '150px' }}>flex-start</Card>
+        <Card style={{ minWidth: '150px' }} />
+      </Flex>
+      <Flex justify="center" gap="1rem">
+        <Card style={{ width: '150px' }} />
+        <Card style={{ width: '150px' }}>center</Card>
+        <Card style={{ width: '150px' }} />
+      </Flex>
+      <Flex justify="flex-end" gap="1rem">
+        <Card style={{ width: '150px' }} />
+        <Card style={{ width: '150px' }}>flex-end</Card>
+        <Card style={{ width: '150px' }} />
+      </Flex>
+      <Flex justify="space-between" gap="1rem">
+        <Card style={{ width: '150px' }} />
+        <Card style={{ width: '150px' }}>space-between</Card>
+        <Card style={{ width: '150px' }} />
+      </Flex>
+    </Flex>
+  ),
+};
+
+export const Wrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: '1rem',
+    css: { maxWidth: '400px' },
+    children: [
+      <Card key="1" style={{ width: '150px' }} />,
+      <Card key="2" style={{ width: '150px' }} />,
+      <Card key="3" style={{ width: '150px' }} />,
+    ],
+  },
+};