norma-library 0.4.1 → 0.4.3

package/src/components/card/card-header.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { StyledCardHeader } from './styles';
+import { CardHeaderProps } from './types';
+
+export const CardHeader: React.FC<CardHeaderProps> = ({ title }) => {
+  return <StyledCardHeader>{title}</StyledCardHeader>;
+};

package/src/components/card/card.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { Card } from './card'
+
+export default {
+  title: 'Layout / Card',
+  meta: {
+    key: 'card',
+  },
+} satisfies StoryDefault
+
+export const CardSimple: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem' }}>
+    <Card>Card content children</Card>
+  </div>
+)
+
+CardSimple.storyName = 'Card'
+
+export const CardHeader: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem' }}>
+    <Card title="Card with title" sx={{ minHeight: 120, width: 480 }}>
+      Card content children
+    </Card>
+  </div>
+)
+
+CardHeader.storyName = 'Card with title'

package/src/components/card/card.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CardBaseProps } from './types';
+import { StyledCardContainer, StyledCardBody } from './styles';
+import { CardHeader } from './card-header';
+
+export const Card = ({ children, title }: CardBaseProps) => {
+  return (
+    <StyledCardContainer>
+      {title && <CardHeader title={title} />}
+      <StyledCardBody>{children}</StyledCardBody>
+    </StyledCardContainer>
+  );
+};

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card';

package/src/components/card/styles.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+const StyledCardContainer = styled.div`
+  background: var(--high-pure) 0% 0% no-repeat padding-box;
+  background: #ffffff 0% 0% no-repeat padding-box;
+  box-shadow: 0px 2px 8px #00000053;
+  border-radius: 5px;
+  opacity: 1;
+`;
+
+const StyledCardBody = styled.div`
+  padding: 16px;
+`;
+
+const StyledCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  font: normal normal 600 18px/30px Source Sans Pro;
+  letter-spacing: 0px;
+  color: #292929;
+  height: 25px;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e9ecef;
+  position: relative;
+`;
+
+export { StyledCardContainer, StyledCardBody, StyledCardHeader };

package/src/components/card/types.ts

@@ -0,0 +1,14 @@
+import { Card, CardProps as MuiCardProps } from '@mui/material';
+
+type MuiCardBaseProps = Pick<MuiCardProps, 'sx'>;
+
+export interface CardBaseProps extends MuiCardBaseProps {
+  title?: string;
+  children?: React.ReactNode;
+}
+
+export interface CardHeaderProps {
+  title: string;
+}
+
+export type CardType = keyof typeof Card;

package/src/components/checkbox/checkbox.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { Checkbox } from './checkbox'
+import { FormControlLabel } from '@mui/material'
+import { pink } from '@mui/material/colors'
+
+export default {
+  title: 'Form / Checkbox',
+  meta: {
+    key: 'checkbox',
+  },
+} satisfies StoryDefault
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
+
+export const CheckboxVariant: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <Checkbox {...label} defaultChecked />
+    <Checkbox {...label} defaultChecked />
+    <Checkbox {...label} disabled />
+    <Checkbox {...label} disabled checked />
+  </div>
+)
+
+CheckboxVariant.storyName = 'Checkbox Basic'
+
+export const CheckboxLabel: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
+    <FormControlLabel required control={<Checkbox />} label="Required" />
+    <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
+  </div>
+)
+
+CheckboxLabel.storyName = 'Checkbox Label'
+
+export const CheckboxSizes: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <Checkbox {...label} defaultChecked size="small" />
+    <Checkbox {...label} defaultChecked />
+    <Checkbox {...label} defaultChecked sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }} />
+  </div>
+)
+
+CheckboxSizes.storyName = 'Checkbox sizes'
+
+export const CheckboxColors: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <Checkbox {...label} defaultChecked />
+    <Checkbox {...label} defaultChecked color="secondary" />
+    <Checkbox {...label} defaultChecked color="success" />
+    <Checkbox {...label} defaultChecked color="default" />
+    <Checkbox
+      {...label}
+      defaultChecked
+      sx={{
+        color: pink[800],
+        '&.Mui-checked': {
+          color: pink[600],
+        },
+      }}
+    />
+  </div>
+)
+
+CheckboxColors.storyName = 'Checkbox colors'

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CheckBoxBaseProps } from './types';
+import { ThemeProvider } from '@mui/material';
+import { Checkbox as MuiCheckbox } from '@mui/material';
+import { themes } from '../../helpers/colors';
+
+export const Checkbox: React.FC<CheckBoxBaseProps> = ({ ...rest }) => {
+  return (
+    <ThemeProvider theme={themes.light}>
+      <MuiCheckbox {...rest} />
+    </ThemeProvider>
+  );
+};

package/src/components/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/src/components/checkbox/types.ts

@@ -0,0 +1,30 @@
+import { OverridableStringUnion } from '@mui/types'
+import { Checkbox, CheckboxProps as MuiCheckBoxProps, SxProps, Theme } from '@mui/material'
+import { SwitchBaseProps } from '@mui/material/internal/SwitchBase'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsSizeOverrides {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsColorOverrides {}
+
+type MuiCheckBoxBaseProps = Pick<MuiCheckBoxProps, 'sx'>
+
+export interface CheckBoxBaseProps extends MuiCheckBoxBaseProps {
+  sx?: SxProps<Theme>
+  name?: string
+  checked?: SwitchBaseProps['checked']
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default',
+    CheckboxPropsColorOverrides
+  >
+  disabled?: SwitchBaseProps['disabled']
+  id?: SwitchBaseProps['id']
+  onChange?: SwitchBaseProps['onChange']
+  required?: SwitchBaseProps['required']
+  size?: OverridableStringUnion<'small' | 'medium', CheckboxPropsSizeOverrides>
+  value?: SwitchBaseProps['value']
+  defaultChecked?: boolean
+}
+
+export type CheckboxType = keyof typeof Checkbox