@inc2734/unitone-css 0.47.3 → 0.48.0

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';

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

@@ -1,73 +0,0 @@
-# Switcher
-
-The direction of content flow switches depending on the content. If the width of the switcher block is smaller than the "threshold", it becomes one column.
-
-## Usage
-
-### HTML
-
-```html
-<div data-unitone-layout="switcher">
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #decc00">Lorem ipsum</div>
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #bfb6a8">dolor sit</div>
-  <div data-unitone-layout="decorator" style="--unitone--background-color: #edede6">amet consectetur</div>
-</div>
-```
-
-### JSX
-
-```jsx
-import { Switcher, Decorator } from '@inc2734/unitone-css';
-
-<Switcher>
-  <Decorator backgroundColor="#decc00">Lorem ipsum</Decorator>
-  <Decorator backgroundColor="#bfb6a8">dolor sit</Decorator>
-  <Decorator backgroundColor="#edede6">amet consectetur</Decorator>
-</Switcher>
-```
-
-## Props
-
-### Gap
-
-Gap.
-
-#### HTML
-
-```html
-<div data-unitone-layout="switcher -gap:1">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Switcher } from '@inc2734/unitone-css';
-
-<Switcher gap={1}>
-  ...
-</Switcher>
-```
-
-### Threshold
-
-If the box size is smaller than this value, it switches to one column.
-
-#### HTML
-
-```html
-<div data-unitone-layout="switcher" style="--unitone--thureshold: 500px">
-  ...
-</div>
-```
-
-#### JSX
-
-```jsx
-import { Switcher } from '@inc2734/unitone-css';
-
-<Switcher threshold="500px">
-  ...
-</Switcher>
-```

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import readme from '../README.md';
-
-import { Switcher } from '../';
-import { Decorator } from '../../decorator';
-
-export default {
-  title: 'Layout Primitives/Switcher',
-  component: Switcher,
-  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 },
-    },
-    threshold: {
-      control: { type: 'text' },
-      description:
-        'If the box size is smaller than this value, it switches to one column. Set by CSS var `--unitone--threshold`.',
-      table: { defaultValue: { summary: 'var(--unitone--measure)' } },
-      type: { name: 'string', required: false },
-    },
-  },
-  args: {
-    gap: 2,
-    threshold: 'var(--unitone--measure)',
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <Switcher {...args}>
-      <Decorator backgroundColor="#decc00" padding={1}>
-        Lorem ipsum
-      </Decorator>
-      <Decorator backgroundColor="#bfb6a8" padding={1}>
-        dolor sit
-      </Decorator>
-      <Decorator backgroundColor="#edede6" padding={1}>
-        amet consectetur
-      </Decorator>
-    </Switcher>
-  );
-};