norma-library 0.4.2 → 0.4.3

package/src/components/modal/modal.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { Modal } from './modal'
+import { Button } from '../button'
+import { useState } from 'react'
+import { StyledModalBody } from './styles'
+
+export default {
+  title: 'Layout / Modal',
+  meta: {
+    key: 'modal',
+  },
+} satisfies StoryDefault
+
+export const ModalSimple: Story = () => {
+  const [open, setOpen] = useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Button variant="text" label="Open modal" onClick={handleOpen} />
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <div
+          style={{
+            background: '#FFFFFF 0% 0% no-repeat padding-box',
+            border: '1px solid #00000033',
+            opacity: 1,
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: 400,
+            height: 298,
+            borderRadius: 4,
+          }}
+        >
+          <StyledModalBody>
+            <h2>Text in a modal</h2>
+            <p id="modal-modal-description" style={{ marginTop: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </p>
+          </StyledModalBody>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+ModalSimple.storyName = 'Modal Simple'

package/src/components/modal/modal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ModalBaseProps } from './types';
+import { Modal as MuiModal } from '@mui/material';
+import { Box } from '@mui/material';
+import { ModalHeader } from './modalHeader';
+import { ModalFooter } from './modalFooter';
+import { StyledModalBody } from './styles';
+
+const style = {
+  background: '#FFFFFF 0% 0% no-repeat padding-box',
+  border: '1px solid #00000033',
+  opacity: 1,
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  borderRadius: 1,
+  boxShadow: 48,
+  p: 0,
+};
+
+export const Modal: React.FC<ModalBaseProps> = ({
+  title,
+  open = false,
+  onConfirm,
+  children,
+  onClose,
+  onCancel,
+  ...props
+}) => {
+  return (
+    <MuiModal {...props} open={open}>
+      <Box sx={style}>
+        <ModalHeader onClose={onClose} title={title} />
+        <StyledModalBody>{children}</StyledModalBody>
+        {onConfirm && <ModalFooter onCancel={onCancel} onConfirm={onConfirm} />}
+      </Box>
+    </MuiModal>
+  );
+};

package/src/components/modal/modalFooter.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '../button/button';
+import { ModalFooterProps } from './types';
+
+export const ModalFooter: React.FC<ModalFooterProps> = ({
+  onCancel,
+  onConfirm,
+}) => {
+  const StyledModalFooter = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px;
+    align-items: center;
+    height: 50px;
+    padding-top: 10px;
+    margin-top: 10px;
+    border-top: 1px solid #e9ecef;
+  `;
+  return (
+    <StyledModalFooter>
+      <Button
+        onClick={onCancel}
+        label="Cancel"
+        variant="outlined"
+        color="primary"
+        style={{ marginRight: '10px' }}
+      />
+      <Button onClick={onConfirm} label="Confirm" color="primary" />
+    </StyledModalFooter>
+  );
+};

package/src/components/modal/modalHeader.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ModalHeaderProps } from './types';
+import { IconButton } from '@mui/material';
+import { Icons } from '../icon/defaultIcon';
+import { StyledBoxIcon } from './styles';
+
+export const ModalHeader: React.FC<ModalHeaderProps> = ({ title }) => {
+  const StyledModalHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: left;
+    font: normal normal 600 16px/24px Source Sans Pro;
+    letter-spacing: 0px;
+    color: #292929;
+    opacity: 1;
+    height: 25px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: ${title ? '1px solid #e9ecef' : '0'};
+    padding: 10px;
+    }
+  `;
+  return (
+    <StyledModalHeader>
+      {title && <h3>{title}</h3>}
+      <IconButton
+        aria-label="close"
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 10,
+          padding: 2,
+          width: 16,
+          height: 16,
+          color: theme => theme.palette.grey[500],
+        }}
+      >
+        <StyledBoxIcon>
+          <Icons icon={'closeAlt'} scale={'small'} />
+        </StyledBoxIcon>
+      </IconButton>
+    </StyledModalHeader>
+  );
+};

package/src/components/modal/styles.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const StyledModalBody = styled.div`
+  padding: 16px;
+`;
+
+export const StyledBoxIcon = styled.div`
+  position: relative;
+  top: 2px;
+  padding: 0;
+  margin: 0;
+  left: 3px;
+`;

package/src/components/modal/types.ts

@@ -0,0 +1,47 @@
+import { Modal, ModalProps as MuiModalProps, SxProps } from '@mui/material';
+import { Theme } from '@emotion/react';
+
+type RenderProps<E extends HTMLElement = HTMLElement> = {
+  focusRef?: React.MutableRefObject<E | null>;
+  id?: string;
+};
+
+type MuiModalBaseProps = Pick<MuiModalProps, 'sx' | 'children' | 'onClose'>;
+
+export interface ModalBaseProps extends MuiModalBaseProps {
+  sx?: SxProps<Theme>;
+  title?: string;
+  open: boolean;
+  children: React.ReactElement;
+  onConfirm?: (
+    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
+    contextId?: string
+  ) => void;
+  onClose?: {
+    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+  }['bivarianceHack'];
+  onCancel?: (
+    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
+    contextId?: string
+  ) => void;
+}
+
+export interface ModalHeaderProps {
+  title?: string;
+  onClose?: {
+    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
+  }['bivarianceHack'];
+}
+
+export interface ModalFooterProps {
+  onCancel?: (
+    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
+    contextId?: string
+  ) => void;
+  onConfirm: (
+    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
+    contextId?: string
+  ) => void;
+}
+
+export type ModalType = keyof typeof Modal;

package/src/components/progress-bar/index.ts

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

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { ProgressBar } from './progress-bar'
+import { Fragment } from 'react'
+
+export default {
+  title: 'Data / ProgressBar',
+  meta: {
+    key: 'button',
+  },
+} satisfies StoryDefault
+
+export const ProgressBarVariant: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem' }}>
+    <div style={{ position: 'relative', width: '100%' }}>
+      <ProgressBar value={10} usage={23} total={100} />
+    </div>
+  </div>
+)
+
+ProgressBarVariant.storyName = 'Progressbar Simple'
+
+export const ProgressBarTitle: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem' }}>
+    <div style={{ position: 'relative', width: '100%' }}>
+      <ProgressBar value={10} label="Progress" usage={23} total={100} />
+    </div>
+  </div>
+)
+
+ProgressBarTitle.storyName = 'Progressbar Title'
+
+export const ProgressBarColors: Story = () => (
+  <Fragment>
+    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar value={60} usage={23} total={100} color="inherit" label="Progress Inherit" />
+      </div>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar
+          value={60}
+          usage={23}
+          total={100}
+          color="secondary"
+          label="Progress secondary"
+        />
+      </div>
+    </div>
+    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar value={60} usage={23} total={100} color="error" label="Progress error" />
+      </div>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar value={60} usage={23} total={100} color="info" label="Progress info" />
+      </div>
+    </div>
+    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar value={60} usage={23} total={100} color="success" label="Progress success" />
+      </div>
+      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
+        <ProgressBar value={60} usage={23} total={100} color="warning" label="Progress warning" />
+      </div>
+    </div>
+  </Fragment>
+)
+
+ProgressBarColors.storyName = 'Progressbar Colors'

package/src/components/progress-bar/progress-bar.tsx

@@ -0,0 +1,38 @@
+import { ThemeProvider } from '@emotion/react';
+import { themes } from '../../helpers/colors';
+import React from 'react';
+import { ProgressBarBaseProps } from './types';
+import { StyledProgressBarLabel, StyledProgressBar } from './styles';
+
+export const ProgressBar: React.FC<ProgressBarBaseProps & {
+  usage?: number;
+  total?: number;
+  colorCustom?: string;
+}> = ({
+  value = 0,
+  label,
+  variant = 'determinate',
+  usage,
+  total,
+  ...props
+}) => {
+  const percentage = usage && total ? (usage / total) * 100 : 0;
+  return (
+    <ThemeProvider theme={themes.light}>
+      {label && (
+        <StyledProgressBarLabel>
+          {label}
+          <span style={{ right: 0 }}>
+            {total} ({percentage.toFixed(2)}%)
+          </span>
+        </StyledProgressBarLabel>
+      )}
+      <StyledProgressBar
+        value={value}
+        variant={variant}
+        sx={{ height: 10 }}
+        {...props}
+      />
+    </ThemeProvider>
+  );
+};

package/src/components/progress-bar/styles.tsx

@@ -0,0 +1,27 @@
+import {
+  LinearProgress as MuiProgressBar,
+  linearProgressClasses,
+} from '@mui/material';
+import styled from 'styled-components';
+import { StyledProgressBarProps } from './types';
+
+export const StyledProgressBar = styled(MuiProgressBar)<StyledProgressBarProps>`
+  width: 100%;
+  height: 5px;
+  border-radius: 10px;
+  position: relative;
+
+  &.${linearProgressClasses.determinate} {
+    background-color: #e0e0e0;
+  }
+`;
+
+export const StyledProgressBarLabel = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: left;
+  font: normal normal normal 16px/20px Source Sans Pro;
+`;

package/src/components/progress-bar/types.ts

@@ -0,0 +1,35 @@
+import { SxProps, LinearProgressProps } from '@mui/material';
+import { Theme } from '@emotion/react';
+import { OverridableStringUnion } from '@mui/types';
+import { ProgressBar } from './progress-bar';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LinearProgressPropsColorOverrides {}
+
+type MuiProgressBarBaseProps = Pick<LinearProgressProps, 'sx'>;
+
+export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
+  sx?: SxProps<Theme>;
+  usage?: number;
+  value?: number;
+  total?: number;
+  label?: string;
+  colorCustom?: string;
+  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+  color?: OverridableStringUnion<
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'inherit',
+    LinearProgressPropsColorOverrides
+  >;
+}
+
+export type StyledProgressBarProps = {
+  colorCustom?: string;
+};
+
+export type ProgressBarType = keyof typeof ProgressBar;

package/src/components/radio/index.ts

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

package/src/components/radio/radio.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { StoryDefault, Story } from '@ladle/react'
+import { Radiobox } from './radio'
+import { FormControl, FormControlLabel, FormLabel, RadioGroup } from '@mui/material'
+import { pink } from '@mui/material/colors'
+import { ChangeEvent, useState } from 'react'
+
+export default {
+  title: 'Form / Radiobox',
+  meta: {
+    key: 'radiobox',
+  },
+} satisfies StoryDefault
+
+export const RadioboxBasic: Story = () => {
+  const [selectedValue, setSelectedValue] = useState('b')
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedValue(event.target.value)
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+      <Radiobox
+        checked={selectedValue === 'a'}
+        onChange={handleChange}
+        value="a"
+        name="radio-buttons"
+        inputProps={{ 'aria-label': 'A' }}
+      />
+      <Radiobox
+        checked={selectedValue === 'b'}
+        onChange={handleChange}
+        value="b"
+        name="radio-buttons"
+        inputProps={{ 'aria-label': 'B' }}
+      />
+    </div>
+  )
+}
+
+RadioboxBasic.storyName = 'Radiobox Basic'
+
+export const RadioboxGroup: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <FormControl>
+      <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
+      <RadioGroup
+        aria-labelledby="demo-radio-buttons-group-label"
+        defaultValue="female"
+        name="radio-buttons-group"
+      >
+        <FormControlLabel value="female" control={<Radiobox />} label="Female" />
+        <FormControlLabel value="male" control={<Radiobox />} label="Male" />
+        <FormControlLabel value="other" control={<Radiobox />} label="Other" />
+      </RadioGroup>
+    </FormControl>
+  </div>
+)
+RadioboxGroup.storyName = 'Radiobox Group'
+
+export const RadioboxDirection: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <FormControl>
+      <FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
+      <RadioGroup
+        row
+        aria-labelledby="demo-row-radio-buttons-group-label"
+        name="row-radio-buttons-group"
+      >
+        <FormControlLabel value="female" control={<Radiobox />} label="Female" />
+        <FormControlLabel value="male" control={<Radiobox />} label="Male" />
+        <FormControlLabel value="other" control={<Radiobox />} label="Other" />
+        <FormControlLabel value="disabled" disabled control={<Radiobox />} label="other" />
+      </RadioGroup>
+    </FormControl>
+  </div>
+)
+RadioboxDirection.storyName = 'Radiobox Direction'
+
+export const RadioboxSize: Story = () => {
+  const [selectedValue, setSelectedValue] = useState('a')
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelectedValue(event.target.value)
+  }
+
+  const controlProps = (item: string) => ({
+    checked: selectedValue === item,
+    onChange: handleChange,
+    value: item,
+    name: 'size-radio-button-demo',
+    inputProps: { 'aria-label': item },
+  })
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+      <Radiobox {...controlProps('a')} size="small" />
+      <Radiobox {...controlProps('b')} />
+      <Radiobox
+        {...controlProps('c')}
+        sx={{
+          '& .MuiSvgIcon-root': {
+            fontSize: 28,
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+RadioboxSize.storyName = 'Radiobox Size'
+
+export const RadioboxColors: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
+    <FormControl>
+      <FormLabel id="demo-row-radio-buttons-group-label">Colors</FormLabel>
+      <RadioGroup
+        row
+        aria-labelledby="demo-row-radio-buttons-group-label"
+        name="row-radio-buttons-group"
+      >
+        <FormControlLabel value="Primary" control={<Radiobox />} label="Primary" />
+        <FormControlLabel
+          value="secondary"
+          control={<Radiobox color="secondary" />}
+          label="Secondary"
+        />
+        <FormControlLabel value="success" control={<Radiobox color="success" />} label="Success" />
+        <FormControlLabel value="default" control={<Radiobox color="default" />} label="Default" />
+        <FormControlLabel
+          value="pink"
+          label="Pink"
+          control={
+            <Radiobox
+              sx={{
+                color: pink[800],
+                '&.Mui-checked': {
+                  color: pink[600],
+                },
+              }}
+            />
+          }
+        />
+      </RadioGroup>
+    </FormControl>
+  </div>
+)
+
+RadioboxColors.storyName = 'Radiobox Colors'

package/src/components/radio/radio.tsx

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

package/src/components/radio/types.ts

@@ -0,0 +1,27 @@
+import React from 'react'
+import { OverridableStringUnion } from '@mui/types'
+
+import {
+  Radio,
+  ButtonBaseProps as MuiButtonBaseProps,
+  RadioPropsColorOverrides,
+  RadioPropsSizeOverrides,
+} from '@mui/material'
+
+type MuiRadioBaseProps = Pick<MuiButtonBaseProps, 'sx'>
+
+export interface RadioBaseProps extends MuiRadioBaseProps {
+  name?: string
+  disabled?: boolean
+  required?: boolean
+  tabIndex?: number
+  value?: unknown
+  size?: OverridableStringUnion<'small' | 'medium', RadioPropsSizeOverrides>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default',
+    RadioPropsColorOverrides
+  >
+}
+
+export type RadioType = keyof typeof Radio

package/src/components/tag/index.ts

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