@inc2734/unitone-css 0.47.2 → 0.48.0

package/src/layout-primitives/responsive-grid/README.md

@@ -1,130 +0,0 @@
-# Responsive grid
-
-Generates a simple grid.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="responsive-grid">
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</div>
-```
-
-### JSX
-
-```jsx
-import { ResponsiveGrid } from '@inc2734/unitone-css';
-
-<ResponsiveGrid>
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-  <img src="https://placehold.jp/400x300.jpg" alt="" />
-</ResponsiveGrid>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="responsive-grid -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { ResponsiveGrid } from '@inc2734/unitone-css';
-
-<ResponsiveGrid gap={1}>
-  ...
-</ResponsiveGrid>
-```
-
-### Auto repeat
-
-auto-fill / auto-fit for grid items.
-
-#### HTML
-
-```html
-<div data-unitone-layout="responsive-grid -auto-repeat:auto-fit">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { ResponsiveGrid } from '@inc2734/unitone-css';
-
-<ResponsiveGrid autoRepeat="auto-fit">
-  ...
-</ResponsiveGrid>
-```
-
-### Columns min width.
-
-Min width of each columns.
-
-#### HTML
-
-```html
-<div data-unitone-layout="responsive-grid" style="--unitone--column-min-width: 240px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { ResponsiveGrid } from '@inc2734/unitone-css';
-
-<ResponsiveGrid minWidth="240px">
-  ...
-</ResponsiveGrid>
-```
-
-### Divider
-
-Using divider.
-
-stripe / underline / bordered
-
-#### HTML
-
-```html
-<div data-unitone-layout="responsive-grid -divider:stripe">
-  <div>
-    ...
-  </div>
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { ResponsiveGrid } from '@inc2734/unitone-css';
-
-<ResponsiveGrid divider="stripe">
-  <div>
-    ...
-  </div>
-  <div>
-    ...
-  </div>
-</ResponsiveGrid>
-```
-

package/src/layout-primitives/responsive-grid/stories/index.stories.jsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { ResponsiveGrid } from '../';
-import { Stack } from '../../stack';
-
-export default {
-  title: 'Layout Primitives/ResponsiveGrid',
-  component: ResponsiveGrid,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    columnMinWidth: {
-      control: { type: 'text' },
-      description: 'Min width of each columns. Set by CSS var `--unitone--column-min-width`.',
-      table: { defaultValue: { summary: '240px' } },
-      type: { name: 'string', required: false },
-    },
-    gap: {
-      control: { type: 'inline-radio' },
-      description: 'Gap. Set by CSS var `--unitone--gap`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'var(--unitone--global--gap)' } },
-      type: { name: 'number', required: false },
-    },
-    autoRepeat: {
-      control: { type: 'inline-radio' },
-      description: 'The auto-repeat. Set by CSS var `--unitone--auto-repeat`.',
-      options: ['auto-fill', 'auto-fit'],
-      table: { defaultValue: { summary: 'auto-fill' } },
-      type: { name: 'string', required: false },
-    },
-    divider: {
-      control: { type: 'inline-radio' },
-      description: 'Divider. Set by `data-unitone-layout` attribute `-divider:x`.',
-      options: [undefined, 'stripe', 'underline', 'bordered'],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    columnMinWidth: '240px',
-    gap: 2,
-    autoRepeat: 'auto-fill',
-    divider: undefined,
-  },
-};
-
-const content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit';
-
-export const Default = (args) => {
-  return (
-    <ResponsiveGrid {...args}>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-    </ResponsiveGrid>
-  );
-};
-
-export const ExampleStripe = (args) => {
-  return (
-    <ResponsiveGrid {...args}>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-    </ResponsiveGrid>
-  );
-};
-ExampleStripe.args = {
-  divider: 'stripe',
-};
-ExampleStripe.storyName = 'Example : Stripe';
-
-export const ExampleUnderline = (args) => {
-  return (
-    <ResponsiveGrid {...args}>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-    </ResponsiveGrid>
-  );
-};
-ExampleUnderline.args = {
-  divider: 'underline',
-};
-ExampleUnderline.storyName = 'Example : Underline';
-
-export const ExampleBordered = (args) => {
-  return (
-    <ResponsiveGrid {...args}>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-      <div>
-        <Stack gap={-2}>
-          <img src="https://placehold.jp/400x300.jpg" alt="" />
-          <p>{content}</p>
-        </Stack>
-      </div>
-    </ResponsiveGrid>
-  );
-};
-ExampleBordered.args = {
-  divider: 'bordered',
-};
-ExampleBordered.storyName = 'Example : Bordered';

package/src/layout-primitives/stack/README.md

@@ -1,98 +0,0 @@
-# Stack
-
-Arranges child elements vertically at regular intervals.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="stack">
-  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
-  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Stack } from '@inc2734/unitone-css';
-
-<Stack>
-  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
-  <p>Lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
-</Stack>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="stack -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Stack } from '@inc2734/unitone-css';
-
-<Stack gap={1}>
-  ...
-</Stack>
-```
-
-### Negative gap
-
-Add a netative value gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="stack -gap:1 -negative">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Stack } from '@inc2734/unitone-css';
-
-<Stack gap={1} negative>
-  ...
-</Stack>
-```
-
-### Using divider
-
-stripe / underline / bordered
-
-#### HTML
-
-```html
-<div data-unitone-layout="stack -divider:stripe">
-  <div>
-    ...
-  </div>
-  <div>
-    ...
-  </div>
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Stack } from '@inc2734/unitone-css';
-
-<Stack gap={1} divider="stripe">
-  ...
-</Stack>
-```

package/src/layout-primitives/stack/stories/index.stories.jsx

@@ -1,193 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Stack } from '../';
-import { Decorator } from '../../decorator';
-import { Cluster } from '../../cluster';
-
-export default {
-  title: 'Layout Primitives/Stack',
-  component: Stack,
-  parameters: {
-    notes: { readme },
-  },
-  argTypes: {
-    gap: {
-      control: { type: 'inline-radio' },
-      description:
-        'Gap. Set by CSS var `--unitone--gap` or `data-unitone-layout` attribute `-gap:x`.',
-      options: [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7],
-      table: { defaultValue: { summary: 'var(--unitone--global--gap)' } },
-      type: { name: 'number', required: false },
-    },
-    negative: {
-      control: { type: 'inline-radio' },
-      description: 'Using negative gap. Set by `data-unitone-layout` attribute `-negative`.',
-      options: [false, true],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-    divider: {
-      control: { type: 'inline-radio' },
-      description: 'Divider. Set by `data-unitone-layout` attribute `-divider:x`.',
-      options: [undefined, 'stripe', 'underline', 'bordered'],
-      table: { defaultValue: { summary: false } },
-      type: { name: 'boolean', required: false },
-    },
-  },
-  args: {
-    gap: 1,
-    negative: false,
-    divider: undefined,
-  },
-};
-
-const contentEn =
-  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill';
-const contentJa =
-  'あともゴーシュ子たり何に向いていまし。夜中は次がしばらくと落ちて狸から舞台のようで来でおかげをしからちょろちょろゴーシュを合わせていです。どうかまげて子をこどもに出でしです。それりんに狸がこってボック';
-
-const Content = (props) => {
-  const content = 'ja' === props.lang ? contentJa : contentEn;
-
-  return (
-    <>
-      <p style={{ '--unitone--font-size': -2 }}>{content}</p>
-      <p style={{ '--unitone--font-size': -1 }}>{content}</p>
-      <p>{content}</p>
-      <p style={{ '--unitone--font-size': 1 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 2 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 3 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 4 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 5 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 6 }}>{content}</p>
-      <p style={{ '--unitone--font-size': 7 }}>{content}</p>
-    </>
-  );
-};
-
-export const Default = (args) => {
-  return (
-    <Stack {...args}>
-      <Content />
-    </Stack>
-  );
-};
-
-export const ExampleJa = (args) => {
-  return (
-    <Stack {...args}>
-      <Content lang="ja" />
-    </Stack>
-  );
-};
-ExampleJa.storyName = 'Example : Ja';
-
-export const ExampleCard = (args) => {
-  return (
-    <div style={{ maxWidth: '480px' }}>
-      <Decorator
-        backgroundColor={args.backgroundColor}
-        color={args.color}
-        padding="1"
-        borderRadius="4px"
-      >
-        <Stack gap={args.gap}>
-          <Decorator>
-            <Cluster>
-              <img
-                src="https://ja.gravatar.com/userimage/18715762/ad5c138cf1d8f3ce1bda5218f26b9b4e.jpeg"
-                alt=""
-                style={{ width: '48px', height: '48px' }}
-              />
-              <Stack gap="0">
-                <div>
-                  <b>Takashi Kitajima</b>
-                </div>
-                <div style={{ '--unitone--font-size': -1 }}>Takashi Kitajima</div>
-              </Stack>
-            </Cluster>
-          </Decorator>
-          <div>
-            <Stack style={{ '--unitone--font-size': -1 }}>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                irure dolor in reprehenderit in voluptate velit esse cill
-              </p>
-            </Stack>
-          </div>
-        </Stack>
-      </Decorator>
-    </div>
-  );
-};
-ExampleCard.args = {
-  color: '#f0f2f6',
-  backgroundColor: '#1e293a',
-};
-ExampleCard.storyName = 'Example : Card';
-ExampleCard.argTypes = {
-  center: { table: { disable: true } },
-};
-
-export const ExampleStripe = (args) => {
-  return (
-    <Stack {...args}>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-    </Stack>
-  );
-};
-ExampleStripe.args = {
-  divider: 'stripe',
-};
-ExampleStripe.storyName = 'Example : Stripe';
-
-export const ExampleUnderline = (args) => {
-  return (
-    <Stack {...args}>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-    </Stack>
-  );
-};
-ExampleUnderline.args = {
-  divider: 'underline',
-};
-ExampleUnderline.storyName = 'Example : Underline';
-
-export const ExampleBordered = (args) => {
-  return (
-    <Stack {...args}>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-      <div>
-        <p>{contentEn}</p>
-      </div>
-    </Stack>
-  );
-};
-ExampleBordered.args = {
-  divider: 'bordered',
-};
-ExampleBordered.storyName = 'Example : Bordered';