feat: Export components used both in Plural app and Console (#523)

Author: maciaszczykm

src/components/InfoPanel.tsx

@@ -0,0 +1,72 @@
+import { Layer } from 'grommet'
+import { Div, Flex, Span } from 'honorable'
+
+import { Card, CloseIcon, IconFrame } from '../index'
+
+export default function InfoPanel({
+  title,
+  onClose = () => {},
+  width = 420,
+  marginTop = '0',
+  contentHeight = 300,
+  contentPadding = 0,
+  contentGap = 0,
+  children,
+}: {
+  title: string
+  onClose?: () => void
+  width?: number | string
+  marginTop?: string
+  contentHeight?: number | string
+  contentPadding?: number | string
+  contentGap?: number | string
+  children?: JSX.Element | JSX.Element[] | string
+}) {
+  return (
+    <Layer
+      plain
+      onClickOutside={onClose}
+      position="top-right"
+      margin={{ top: marginTop }}
+    >
+      <Card
+        fillLevel={2}
+        width={width}
+        overflow="hidden"
+        margin="large"
+      >
+        <Div
+          padding="medium"
+          borderBottom="1px solid border-fill-two"
+        >
+          <Flex
+            align="center"
+            justify="space-between"
+          >
+            <Span
+              fontSize={18}
+              fontWeight={500}
+              lineHeight="24px"
+            >
+              {title}
+            </Span>
+            <IconFrame
+              clickable
+              icon={<CloseIcon />}
+              onClick={() => onClose()}
+            />
+          </Flex>
+        </Div>
+        <Flex
+          direction="column"
+          overflowY="auto"
+          gap={contentGap}
+          padding={contentPadding}
+          height={contentHeight}
+        >
+          {children}
+        </Flex>
+      </Card>
+    </Layer>
+  )
+}

src/components/Prop.tsx

@@ -0,0 +1,27 @@
+import { Div, type DivProps } from 'honorable'
+import styled from 'styled-components'
+
+const PropSC = styled.div(({ theme }) => ({
+  margin: theme.spacing.medium,
+
+  '.prop-title': {
+    ...theme.partials.text.caption,
+    color: theme.colors['text-xlight'],
+    marginBottom: theme.spacing.xxsmall,
+  },
+}))
+
+export default function Prop({
+  children,
+  title,
+  ...props
+}: {
+  title: string
+} & DivProps) {
+  return (
+    <PropSC>
+      <div className="prop-title">{title}</div>
+      <Div {...props}>{children}</Div>
+    </PropSC>
+  )
+}

src/components/PropWide.tsx

@@ -0,0 +1,36 @@
+import { Flex, type FlexProps } from 'honorable'
+import styled from 'styled-components'
+
+import { Divider } from '../index'
+
+const PropWideSC = styled.div(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  gap: theme.spacing.small,
+  marginVertical: theme.spacing.small,
+
+  '.prop-title': {
+    ...theme.partials.text.overline,
+    color: theme.colors['text-xlight'],
+    display: 'flex',
+  },
+}))
+
+export default function PropWide({
+  children,
+  title,
+  ...props
+}: {
+  title: string
+} & FlexProps) {
+  return (
+    <PropWideSC>
+      <div className="prop-title">{title}</div>
+      <Divider
+        backgroundColor="border-fill-three"
+        flexGrow={1}
+      />
+      <Flex {...props}>{children}</Flex>
+    </PropWideSC>
+  )
+}

src/components/PropsContainer.tsx

@@ -0,0 +1,28 @@
+import { Div, type DivProps } from 'honorable'
+import styled from 'styled-components'
+
+const PropsContainerSC = styled(Div)(({ theme }) => ({
+  border: theme.borders.default,
+  borderRadius: theme.borderRadiuses.medium,
+
+  '.container-title': {
+    ...theme.partials.text.overline,
+    color: theme.colors['text-xlight'],
+    margin: theme.spacing.medium,
+  },
+}))
+
+export default function PropsContainer({
+  children,
+  title,
+  ...props
+}: {
+  title: string
+} & DivProps) {
+  return (
+    <PropsContainerSC {...props}>
+      {title && <div className="container-title">{title}</div>}
+      {children}
+    </PropsContainerSC>
+  )
+}

src/components/UserDetails.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+import { AppIcon } from '../index'
+
+const UserDetailsSC = styled.div(({ theme }) => ({
+  alignItems: 'center',
+  display: 'flex',
+  gap: theme.spacing.xsmall,
+  whiteSpace: 'nowrap',
+
+  '.name': {
+    ...theme.partials.text.body2,
+  },
+
+  '.email': {
+    ...theme.partials.text.caption,
+    color: theme.colors['text-xlight'],
+    display: 'flex',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))
+
+export default function UserDetails({
+  name,
+  email,
+  avatar,
+}: {
+  name?: string | null
+  email?: string | null
+  avatar?: string | null
+}) {
+  return (
+    <UserDetailsSC>
+      <AppIcon
+        name={name || ''}
+        url={avatar || undefined}
+        size="xxsmall"
+      />
+      <div>
+        <div className="name">{name}</div>
+        {email && <div className="email">{email}</div>}
+      </div>
+    </UserDetailsSC>
+  )
+}

src/index.ts

@@ -32,6 +32,11 @@ export type { PageCardProps } from './components/PageCard'
 export { default as PageCard } from './components/PageCard'
 export { default as PageTitle } from './components/PageTitle'
 export { default as ProgressBar } from './components/ProgressBar'
+export { default as Prop } from './components/Prop'
+export { default as PropWide } from './components/PropWide'
+export { default as PropsContainer } from './components/PropsContainer'
+export { default as InfoPanel } from './components/InfoPanel'
+export { default as UserDetails } from './components/UserDetails'
 export { default as Radio } from './components/Radio'
 export { default as RadioGroup } from './components/RadioGroup'
 export { default as AppIcon } from './components/AppIcon'

src/stories/Prop.stories.tsx

@@ -0,0 +1,13 @@
+import { Prop } from '../index'
+
+export default {
+  title: 'Prop',
+  component: Prop,
+}
+
+function Template() {
+  return <Prop title="Name">Test</Prop>
+}
+
+export const Default = Template.bind({})
+Default.args = {}

src/stories/PropWide.stories.tsx

@@ -0,0 +1,13 @@
+import { PropWide } from '../index'
+
+export default {
+  title: 'Prop Wide',
+  component: PropWide,
+}
+
+function Template() {
+  return <PropWide title="Name">Test</PropWide>
+}
+
+export const Default = Template.bind({})
+Default.args = {}

src/stories/PropsContainer.stories.tsx

@@ -0,0 +1,27 @@
+import { Prop, PropsContainer, UserDetails } from '../index'
+
+export default {
+  title: 'Props Container',
+  component: PropsContainer,
+}
+
+function Template() {
+  return (
+    <PropsContainer
+      title="Metadata"
+      width={200}
+    >
+      <Prop title="Name">Test</Prop>
+      <Prop title="Date">10 minutes ago</Prop>
+      <Prop title="Owner">
+        <UserDetails
+          name="Test"
+          email="[email protected]"
+        />
+      </Prop>
+    </PropsContainer>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {}

src/stories/UserDetails.stories.tsx

@@ -0,0 +1,18 @@
+import { UserDetails } from '../index'
+
+export default {
+  title: 'User Details',
+  component: UserDetails,
+}
+
+function Template() {
+  return (
+    <UserDetails
+      name="Test"
+      email="[email protected]"
+    />
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {}