widenarrow-ui 0.1.7 → 0.1.9

package/README.md

@@ -1,3 +1,71 @@
 # WIDENARROW UI
 
-https://betterprogramming.pub/how-to-publish-a-react-component-library-c89a07566770
+Welcome to WideNarrowUI, a component library for use in InfoDesk's products.
+
+## Installation
+
+```
+npm install widenarrow-ui
+```
+
+## Setup in your project
+
+Import the `baseline.scss` at the top of you stylesheets to 
+a) properly normalize and reset css and 
+b) apply the WNUI baseline to your project, making sure every component is rendered as intended
+c) and get the required fonts.
+ 
+```
+@import "widenarrow-ui/styles/baseline.scss"
+```
+
+## Start building!
+
+Import the component(s) you wish to use!
+
+```
+import { Box, Grid, Heading, Paragraph } from 'widenarrow-ui';
+
+(...)
+
+return (
+    <Grid container>
+        <Grid xs={12} md={4}>
+            <Box displayFlex>
+                <Heading type="h1">WideNarrow UI is great!</Heading>
+                <Paragraph>And just look at how easy it is to use.</Paragraph>
+            </Box>
+        <Grid>
+    </Grid>
+)
+```
+
+## Development
+
+### Storybook 
+Components are documented, viewed and developed in [Storybook](https://storybook.js.org/)
+Running storybook for development
+```
+npm run start
+```
+
+### Build
+The project is built and bundled using [rollup.js](https://rollupjs.org/)
+Building the project
+```
+npm run build
+```
+
+### Publish to npm
+Make sure the version in `package.json` is bumped.
+Publishing should always be made from `master` branch.
+
+```
+npm login
+```
+You need login information for npm (contact a collaborator).
+Type in these credentials now.
+
+```
+npm publish
+```

package/lib/components/Box/Box.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MarginInterface, PaddingInterface, FlexStylingInterface } from '../../types/styling';
+import { MarginInterface, PaddingInterface, FlexStylingInterface } from 'src/types/styling';
 interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface {
     children: React.ReactNode;
     className?: string;

package/lib/components/Box/Box.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Box from './Box';
+import Box from 'src/components/Box';
 declare const meta: Meta<typeof Box>;
 export default meta;
 type Story = StoryObj<typeof Box>;

package/lib/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode, MouseEvent } from 'react';
-import { ButtonTypes } from '../../constants';
+import { ButtonTypes } from 'src/constants';
 interface Props {
     text?: string;
     onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;

package/lib/components/Button/Button.stories.d.ts

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
+import Button from 'src/components/Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;
 export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const WithIcon: Story;
+export declare const LoadingState: Story;
+export declare const Disabled: Story;

package/lib/components/Checkbox/Checkbox.d.ts

@@ -2,8 +2,8 @@ import { FC, ChangeEvent, MouseEvent } from 'react';
 interface Props {
     name: string;
     label: string;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onChangeFake: (event: MouseEvent<HTMLDivElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChangeFake?: (event: MouseEvent<HTMLDivElement>) => void;
     className?: string;
     ariaLabel?: string;
     helperText?: string;

package/lib/components/Checkbox/Checkbox.stories.d.ts

@@ -1,7 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
+import Checkbox from 'src/components/Checkbox';
 declare const meta: Meta<typeof Checkbox>;
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const Unchecked: Story;
+export declare const WithLabelAndHelperText: Story;
+export declare const Disabled: Story;
+export declare const Blocked: Story;

package/lib/components/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { MarginInterface, PaddingInterface, FlexStylingInterface } from '../../types/styling';
+import { MarginInterface, PaddingInterface, FlexStylingInterface } from 'src/types/styling';
 interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface {
     /**
      * Number of columns on viewports < 576px

package/lib/components/Grid/Grid.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import Grid from './Grid';
+import Grid from 'src/components/Grid';
 declare const meta: Meta<typeof Grid>;
 export default meta;
 type Story = StoryObj<typeof Grid>;

package/lib/components/Icon/Icon.stories.d.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Icon from './Icon';
+import Icon from 'src/components/Icon';
 declare const meta: Meta<typeof Icon>;
 export default meta;
 type Story = StoryObj<typeof Icon>;
+export declare const Default: Story;
 export declare const Primary: Story;
-export declare const Secondary: Story;

package/lib/components/Icon/Iconography.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Iconography: () => JSX.Element;
+export default Iconography;

package/lib/components/SolidSpinner/SolidSpinner.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { SpinnerTypes } from '../../constants';
+import { SpinnerTypes } from 'src/constants';
 interface Props {
     color?: SpinnerTypes.BLUE | SpinnerTypes.WHITE;
     size?: SpinnerTypes.SMALL | SpinnerTypes.MEDIUM | SpinnerTypes.LARGE;

package/lib/components/SolidSpinner/SolidSpinner.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import SolidSpinner from './SolidSpinner';
+import SolidSpinner from 'src/components/SolidSpinner';
 declare const meta: Meta<typeof SolidSpinner>;
 export default meta;
 type Story = StoryObj<typeof SolidSpinner>;

package/lib/components/Typography/Heading.stories.d.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Heading } from './Typography';
+import { Heading } from 'src/components/Typography/Typography';
 declare const meta: Meta<typeof Heading>;
 export default meta;
 type Story = StoryObj<typeof Heading>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
+export declare const H1: Story;
+export declare const H2: Story;

package/lib/components/Typography/Label.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './Typography';
+declare const meta: Meta<typeof Label>;
+export default meta;
+type Story = StoryObj<typeof Label>;
+export declare const Default: Story;

package/lib/components/Typography/Paragraph.stories.d.ts

@@ -3,4 +3,4 @@ import { Paragraph } from './Typography';
 declare const meta: Meta<typeof Paragraph>;
 export default meta;
 type Story = StoryObj<typeof Paragraph>;
-export declare const Primary: Story;
+export declare const Default: Story;

package/lib/components/Typography/Span.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Span } from './Typography';
+declare const meta: Meta<typeof Span>;
+export default meta;
+type Story = StoryObj<typeof Span>;
+export declare const Default: Story;

package/lib/components/Typography/Typography.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { MarginInterface, PaddingInterface } from '../../types/styling';
+import { MarginInterface, PaddingInterface } from 'src/types/styling';
 interface BaseProps extends MarginInterface, PaddingInterface {
     className?: string;
     textAlign?: string;
@@ -17,16 +17,16 @@ interface BaseProps extends MarginInterface, PaddingInterface {
     withWordBreak?: boolean;
     disabled?: boolean;
 }
+/**
+|--------------------------------------------------
+| @component <Heading />
+|--------------------------------------------------
+ */
 interface HeadingProps extends BaseProps {
     children: ReactNode;
     type: string;
     style?: Record<string, unknown>;
 }
-/**
-|--------------------------------------------------
-| @component <Heading />
-|--------------------------------------------------
-*/
 export declare const Heading: FC<HeadingProps>;
 /**
  |--------------------------------------------------

package/lib/constants.d.ts

@@ -3,7 +3,6 @@ export declare enum IconTypes {
     ADD_CHART = "iconAddChart",
     ADD_FILLED = "iconAddFilled",
     ADD_FOLDER = "iconAddFolder",
-    ADD_OUTLINED = "iconAddOutlined",
     ADD_PAGE_BREAK = "iconAddPageBreak",
     ADD_POST = "iconAddPost",
     ADD_SECTION_ABOVE = "iconAddSectionAbove",
@@ -120,7 +119,6 @@ export declare enum IconTypes {
     PAUSE = "iconPause",
     PAUSE_CIRCLE = "iconPauseCircle",
     PDF = "iconPdf",
-    PENCIL = "iconPencil",
     PHONE = "iconPhone",
     PHOTO = "iconPhoto",
     PHOTOS = "iconPhotos",
@@ -134,7 +132,6 @@ export declare enum IconTypes {
     PRESENT = "iconPresent",
     PREVIEW = "iconPreview",
     PREVIEW_OFF = "iconPreviewOff",
-    PROFILE = "iconProfile",
     PURCHASE_INBOX = "iconPurchaseInbox",
     RECURRING = "iconRecurring",
     RENEW = "iconRenew",

package/lib/index.d.ts

@@ -1,257 +1,7 @@
-import React, { FC, MouseEvent, ReactNode, ChangeEvent } from 'react';
-
-declare enum SpinnerTypes {
-    BLUE = "colorBlue",
-    LIGHT_BLUE = "colorLightBlue",
-    WHITE = "colorWhite",
-    GREY = "colorGrey",
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large"
-}
-declare enum ButtonTypes {
-    CURRENT_COLOR = "currentColor",
-    PRIMARY = "colorPrimary",
-    SECONDARY = "colorSecondary",
-    TERTIARY = "colorTertiary",
-    DARK = "colorDark",
-    WHITE = "colorWhite",
-    SMALL = "buttonSmall",
-    MEDIUM = "buttonMedium",
-    LARGE = "buttonLarge",
-    EXTRA_LARGE = "buttonExtraLarge"
-}
-
-interface Props$5 {
-    text?: string;
-    onClickCallback?: (e: MouseEvent<HTMLButtonElement>) => void;
-    color?: ButtonTypes.PRIMARY | ButtonTypes.SECONDARY | ButtonTypes.TERTIARY | ButtonTypes.WHITE;
-    size?: ButtonTypes.SMALL | ButtonTypes.MEDIUM | ButtonTypes.LARGE | ButtonTypes.EXTRA_LARGE;
-    disabled?: boolean;
-    className?: string;
-    style?: Record<string, string>;
-    withoutTextOnSmall?: boolean;
-    withSpaceBetween?: boolean;
-    withSeparatorRight?: boolean;
-    withSeparatorLeft?: boolean;
-    withCounterbar?: boolean;
-    withIconLeft?: boolean;
-    inverted?: boolean;
-    truncateText?: boolean;
-    rotateIcon?: boolean;
-    icon?: string;
-    id?: string | number;
-    loading?: boolean;
-    autoFocus?: boolean;
-    counterbarPercent?: number;
-    children?: ReactNode;
-    ariaLabel?: string;
-    tabIndex?: number;
-}
-declare const Button: FC<Props$5>;
-
-interface Props$4 {
-    icon: string | null;
-    fixedIconColor?: boolean;
-    rotateIcon?: boolean;
-    rotateIconByDeg?: number;
-    color?: string;
-    size?: string;
-    disabled?: boolean;
-    active?: boolean;
-    className?: string;
-}
-declare const Icon: FC<Props$4>;
-
-interface Props$3 {
-    name: string;
-    label: string;
-    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onChangeFake: (event: MouseEvent<HTMLDivElement>) => void;
-    className?: string;
-    ariaLabel?: string;
-    helperText?: string;
-    checked: boolean;
-    blocked?: boolean;
-    indeterminate?: boolean;
-    withSeparator?: boolean;
-    wordWrap?: boolean;
-    disabled?: boolean;
-    isFake?: boolean;
-}
-declare const Checkbox: FC<Props$3>;
-
-interface Props$2 {
-    color?: SpinnerTypes.BLUE | SpinnerTypes.WHITE;
-    size?: SpinnerTypes.SMALL | SpinnerTypes.MEDIUM | SpinnerTypes.LARGE;
-    disabled?: boolean;
-    className?: string;
-    label?: string;
-    labelClassName?: string;
-    absoluteCenter?: boolean;
-}
-declare const SolidSpinner: FC<Props$2>;
-
-type baseSizes = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
-type baseSizesExtended = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '025' | '05' | '15' | '25' | 'auto';
-interface MarginInterface {
-    margin?: baseSizes;
-    marginX?: baseSizes;
-    marginY?: baseSizes;
-    marginTop?: baseSizesExtended;
-    marginBottom?: baseSizesExtended;
-    marginRight?: baseSizesExtended;
-    marginLeft?: baseSizesExtended;
-}
-interface PaddingInterface {
-    padding?: baseSizes;
-    paddingX?: baseSizes;
-    paddingY?: baseSizes;
-    paddingTop?: baseSizesExtended;
-    paddingBottom?: baseSizesExtended;
-    paddingRight?: baseSizesExtended;
-    paddingLeft?: baseSizesExtended;
-}
-interface FlexStylingInterface {
-    alignItems?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
-    alignSelf?: 'center' | 'flexStart' | 'flexEnd';
-    displayFlex?: boolean;
-    displayFlexCenter?: boolean;
-    displayFlexCenterSpaceBetween?: boolean;
-    flexDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
-    flexGrow?: '0' | '1' | 'auto';
-    flexWrap?: 'wrap' | 'noWrap' | 'wrapReverse';
-    justifyContent?: 'center' | 'flexStart' | 'flexEnd' | 'spaceAround' | 'spaceBetween';
-}
-
-interface Props$1 extends MarginInterface, PaddingInterface, FlexStylingInterface {
-    children: React.ReactNode;
-    className?: string;
-    position?: string;
-    border?: string;
-    borderTop?: string;
-    borderBottom?: string;
-    borderRight?: string;
-    backgroundColor?: string;
-    showOnBreakpoint?: string;
-    borderLeft?: string;
-    withBorderRadius?: boolean;
-    width?: string;
-    minWidth?: string;
-    /**
-     * Max width in percentage e.g 50 = 50%
-     */
-    maxWidth?: string;
-    withSeparatorRight?: boolean;
-    withSeparatorLeft?: boolean;
-    style?: Record<string, unknown>;
-    onClickCallback?: () => void;
-}
-declare const Box: React.ForwardRefExoticComponent<Props$1 & React.RefAttributes<HTMLDivElement>>;
-
-interface Props extends MarginInterface, PaddingInterface, FlexStylingInterface {
-    /**
-     * Number of columns on viewports < 576px
-     */
-    xs?: number;
-    /**
-     * Number of columns on viewports < 768px
-     */
-    sm?: number;
-    /**
-     * Number of columns on viewports < 1024px
-     */
-    md?: number;
-    /**
-     * Number of columns on viewports < 1200px
-     */
-    lg?: number;
-    /**
-     * Number of columns on viewports < 1646px
-     */
-    xl?: number;
-    /**
-     * Number of columns on viewports < 2000px
-     */
-    xxl?: number;
-    /**
-     * Optionally provide the number of columns in the grid.
-     * @default 12
-     */
-    /**
-     * If the component is a grid container
-     */
-    container?: boolean;
-    /**
-     * Optionally provide the spacing as a multiple of $half-base-size (4px) for each grid item.
-     * Takes either a single string for x and y,
-     * or an array for [y, x],
-     * or an object for different breakpoints, i.e { xs: '4', md: ['4', '6'], lg: '8' }
-     * @default '4'
-     */
-    spacing?: string | Array<string> | Record<never, string | string[]>;
-    columns?: number;
-    className?: string;
-    children?: ReactNode;
-}
-declare const Grid: FC<Props>;
-
-interface BaseProps extends MarginInterface, PaddingInterface {
-    className?: string;
-    textAlign?: string;
-    fontWeight?: string;
-    fontSize?: string;
-    fontStyle?: string;
-    color?: string;
-    withSeparator?: boolean;
-    meta?: boolean;
-    error?: boolean;
-    withBorderBottom?: boolean;
-    withEllipsis?: boolean;
-    withAnimation?: boolean;
-    withNoWordBreak?: boolean;
-    withWordBreak?: boolean;
-    disabled?: boolean;
-}
-interface HeadingProps extends BaseProps {
-    children: ReactNode;
-    type: string;
-    style?: Record<string, unknown>;
-}
-/**
-|--------------------------------------------------
-| @component <Heading />
-|--------------------------------------------------
-*/
-declare const Heading: FC<HeadingProps>;
-/**
- |--------------------------------------------------
- | @component <Label />
- |--------------------------------------------------
- */
-interface LabelProps extends BaseProps {
-    children: ReactNode | string;
-    htmlFor?: string;
-    style?: Record<string, unknown>;
-}
-declare const Label: FC<LabelProps>;
-/**
-|--------------------------------------------------
-| @component <Paragraph />
-|--------------------------------------------------
-*/
-interface ParagraphProps extends BaseProps {
-    children: ReactNode;
-}
-declare const Paragraph: FC<ParagraphProps>;
-/**
-|--------------------------------------------------
-| @component <Span />
-|--------------------------------------------------
-*/
-interface SpanProps extends BaseProps {
-    children: ReactNode;
-}
-declare const Span: FC<SpanProps>;
-
-export { Box, Button, Checkbox, Grid, Heading, Icon, Label, Paragraph, SolidSpinner, Span };
+export { default as Button } from 'src/components/Button/Button';
+export { default as Icon } from 'src/components/Icon/Icon';
+export { default as Checkbox } from 'src/components/Checkbox/Checkbox';
+export { default as SolidSpinner } from 'src/components/SolidSpinner/SolidSpinner';
+export { default as Box } from 'src/components/Box/Box';
+export { default as Grid } from 'src/components/Grid/Grid';
+export { Heading, Label, Paragraph, Span } from 'src/components/Typography/Typography';