@storybook/react-native-ui 8.0.0-alpha.3

package/src/constants.ts

@@ -0,0 +1,4 @@
+export const BREAKPOINT = 600;
+export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
+export const MOBILE_TRANSITION_DURATION = 300;
+export const DEFAULT_REF_ID = 'storybook_internal';

package/src/icon/BottomBarToggleIcon.tsx

@@ -0,0 +1,23 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const BottomBarToggleIcon = ({
+  color = 'currentColor',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/CloseIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const CloseIcon =
+  /* @__PURE__ */
+  ({ color = 'currentColor', width = 14, height = 14, ...props }: SvgProps) => {
+    return (
+      <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+        <Path
+          d="M9.854 4.146a.5.5 0 010 .708L7.707 7l2.147 2.146a.5.5 0 01-.708.708L7 7.707 4.854 9.854a.5.5 0 01-.708-.708L6.293 7 4.146 4.854a.5.5 0 11.708-.708L7 6.293l2.146-2.147a.5.5 0 01.708 0z"
+          fill={color}
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
+          fill={color}
+        />
+      </Svg>
+    );
+  };

package/src/icon/CollapseAllIcon.tsx

@@ -0,0 +1,17 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const CollapseAllIcon = ({
+  color = '#2E3438',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M3.354.146a.5.5 0 10-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 00-.708-.708L7 3.793 3.354.146zM6.646 9.146a.5.5 0 01.708 0l4 4a.5.5 0 01-.708.708L7 10.207l-3.646 3.647a.5.5 0 01-.708-.708l4-4z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/CollapseIcon.tsx

@@ -0,0 +1,39 @@
+import { styled } from '@storybook/react-native-theming';
+import type { FC } from 'react';
+import { transparentize } from 'polished';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+interface CollapseIconProps {
+  isExpanded: boolean;
+}
+
+export const CollapseIconWrapper = styled.View<{ isExpanded: boolean }>(
+  ({ theme, isExpanded }) => ({
+    width: 8,
+    height: 8,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: transparentize(0.4, theme.textMutedColor),
+    transform: isExpanded ? 'rotateZ(90deg)' : 'none',
+    transition: 'transform .1s ease-out',
+  })
+);
+
+export const CollapseIcon: FC<CollapseIconProps> = ({ isExpanded }) => (
+  <CollapseIconWrapper isExpanded={isExpanded}>
+    {/* <Icon icon="arrowRight" width={8} height={8} /> */}
+    <CollapseSVG />
+  </CollapseIconWrapper>
+);
+
+export function CollapseSVG(props: SvgProps) {
+  return (
+    <Svg width={8} height={8} fill="none" {...props}>
+      <Path
+        fill="#73828C"
+        d="M1.896 7.146a.5.5 0 10.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L5.043 4 1.896 7.146z"
+      />
+    </Svg>
+  );
+}

package/src/icon/ComponentIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export function ComponentIcon({ color = '#029CFD', ...props }: SvgProps) {
+  return (
+    <Svg width={12} height={12} viewBox="0 0 12 12" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5.004a2.5 2.5 0 00-2.5 2.5v7a2.5 2.5 0 002.5 2.5h7a2.5 2.5 0 002.5-2.5v-7a2.5 2.5 0 00-2.5-2.5h-7zm8.5 5.5H6.5v-4.5h3a1.5 1.5 0 011.5 1.5v3zm0 1v3a1.5 1.5 0 01-1.5 1.5h-3v-4.5H11zm-5.5 4.5v-4.5H1v3a1.5 1.5 0 001.5 1.5h3zM1 5.504h4.5v-4.5h-3a1.5 1.5 0 00-1.5 1.5v3z"
+        fill={color}
+      />
+    </Svg>
+  );
+}

package/src/icon/ExpandAllIcon.tsx

@@ -0,0 +1,17 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const ExpandAllIcon = ({
+  color = '#2E3438',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/FaceHappyIcon.tsx

@@ -0,0 +1,18 @@
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const FaceHappyIcon = ({ color, width = 14, height = 14, ...props }: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M3.968 8.75a.5.5 0 00-.866.5A4.498 4.498 0 007 11.5c1.666 0 3.12-.906 3.898-2.25a.5.5 0 10-.866-.5A3.498 3.498 0 017 10.5a3.498 3.498 0 01-3.032-1.75zM5.5 5a1 1 0 11-2 0 1 1 0 012 0zM9.5 6a1 1 0 100-2 1 1 0 000 2z"
+        fill={color}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14 7A7 7 0 110 7a7 7 0 0114 0zm-1 0A6 6 0 111 7a6 6 0 0112 0z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/GroupIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export function GroupIcon({ color = '#6F2CAC', ...props }: SvgProps) {
+  return (
+    <Svg width={15} height={15} viewBox="0 0 15 15" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.962 3.704L5.376 2.118H1.057v9.514h12.685V3.704h-6.78zM7.4 2.647L6.124 1.37a1.057 1.057 0 00-.748-.31H.53A.529.529 0 000 1.59v10.57c0 .292.237.529.529.529H14.27a.529.529 0 00.528-.529V3.175a.529.529 0 00-.528-.528H7.4z"
+        fill={color}
+      />
+    </Svg>
+  );
+}

package/src/icon/MenuIcon.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const MenuIcon = ({
+  color = 'currentColor',
+  width = 14,
+  height = 14,
+  ...props
+}: SvgProps) => {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

package/src/icon/SearchIcon.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Path, Svg, SvgProps } from 'react-native-svg';
+
+export const SearchIcon =
+  /* @__PURE__ */
+  ({ color = 'currentColor', width = 14, height = 14, ...props }: SvgProps) => {
+    return (
+      <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.544 10.206a5.5 5.5 0 11.662-.662.5.5 0 01.148.102l3 3a.5.5 0 01-.708.708l-3-3a.5.5 0 01-.102-.148zM10.5 6a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
+          fill={color}
+        />
+      </Svg>
+    );
+  };

package/src/icon/StoryIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+export function StoryIcon({ color = '#37D5D3', ...props }: SvgProps) {
+  return (
+    <Svg width={12} height={12} viewBox="0 0 12 12" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3 0h6c.237 0 .428.192.428.429V11.57c0 .224-.17.407-.389.427a.396.396 0 01-.318-.101L6 9.565l-2.721 2.332a.395.395 0 01-.325.1.429.429 0 01-.383-.426V.43C2.571.192 2.763 0 3 0zm.428 10.64l2.284-1.958.034-.028a.39.39 0 01.289-.081c.087.007.172.04.244.102L8.57 10.64V.857H3.428v9.783z"
+        fill={color}
+      />
+    </Svg>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * from './TreeNode';
+export * from './Tree';
+export * from './Button';
+export * from './IconButton';
+export * from './LayoutProvider';
+export * from './Explorer';
+export * from './Sidebar';
+export * from './types';
+export * from './Layout';