@croquiscom/pds 0.0.1

package/dist/input/Input.d.ts

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes } from 'react';
+import { CSSValueWithLength } from '../styles/buildCSSWithLength';
+export declare type InputAlignment = 'left' | 'center' | 'right';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    alignment?: InputAlignment;
+    error?: boolean;
+    width?: CSSValueWithLength;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/input/Input.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputProps } from './Input';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Error: any;
+export declare const Disabled: any;
+export declare const EnteredDisabled: any;
+export declare const RightAlignment: any;

package/dist/input/InputAddon.d.ts

@@ -0,0 +1,10 @@
+import React, { AllHTMLAttributes } from 'react';
+export interface InputProps extends AllHTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    error?: boolean;
+    /**
+     * @default left
+     */
+    position: 'left' | 'right';
+}
+export declare const InputAddon: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/input/NumericInput.d.ts

@@ -0,0 +1,20 @@
+import React, { ChangeEvent, InputHTMLAttributes } from 'react';
+import { CSSValueWithLength } from '../styles/buildCSSWithLength';
+import { InputAlignment } from './Input';
+export interface NumericInputBaseType {
+    value?: number | string | null;
+    defaultValue?: number | string;
+    alignment?: InputAlignment;
+    error?: boolean;
+    prefix?: string;
+    suffix?: string;
+    /**
+     * @default true
+     */
+    allowNegative?: boolean;
+    decimalScale?: number;
+    width?: CSSValueWithLength;
+    onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare type NumericInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'width'> & NumericInputBaseType;
+export declare const NumericInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "onChange"> & NumericInputBaseType & React.RefAttributes<HTMLInputElement>>;

package/dist/input/NumericInput.stories.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NumericInputProps } from './NumericInput';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "width" | "onChange"> & import("./NumericInput").NumericInputBaseType & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Addon: any;
+export declare const Error: any;
+export declare const Disabled: any;
+export declare const WhetherNegativeNumbersAreAllowed: any;
+export declare const DecimalScale: any;
+export declare const EnteredDisabled: any;
+export declare const RightAlignment: any;
+export declare const SetValueWithName: {
+    (args: NumericInputProps): JSX.Element;
+    args: {
+        prefix: string;
+        suffix: string;
+        placeholder: string;
+    };
+};

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './NumericInput';

package/dist/input/styles.d.ts

@@ -0,0 +1,16 @@
+export declare const input_base_css: import("@emotion/utils").SerializedStyles;
+export declare const input_default_style: {
+    backgroundColor: string;
+    border: string;
+    color: string;
+};
+export declare const input_error_style: {
+    border: string;
+    '&:focus': {
+        border: string;
+    };
+};
+export declare const input_disabled_style: {
+    backgroundColor: string;
+    color: string;
+};

package/dist/radio/Radio.d.ts

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface RadioProps extends Exclude<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * @default false
+     */
+    fill?: boolean;
+    className?: string;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/radio/Radio.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Radio").RadioProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Checked: any;
+export declare const Disabled: any;
+export declare const CheckedDisabled: any;

package/dist/radio/RadioGroup.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+declare type AlignType = 'horizontal' | 'vertical';
+interface RadioItem<RadioValue> {
+    label: React.ReactNode;
+    value: RadioValue;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<RadioValue> {
+    className?: string;
+    defaultValue?: RadioValue;
+    value?: RadioValue;
+    name?: string;
+    items: RadioItem<RadioValue>[];
+    spacing?: number;
+    disabled?: boolean;
+    align?: AlignType;
+    onChange?: (value: RadioValue) => void;
+}
+export interface RadioGroupInstance<RadioValue> {
+    value?: RadioValue;
+    focus: () => void;
+}
+export declare const RadioGroup: <RadioValue>(props: RadioGroupProps<RadioValue> & {
+    ref?: React.Ref<RadioGroupInstance<RadioValue>>;
+}) => React.ReactElement;
+export {};

package/dist/radio/RadioGroup.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: <RadioValue>(props: import("./RadioGroup").RadioGroupProps<RadioValue> & {
+        ref?: React.Ref<import("./RadioGroup").RadioGroupInstance<RadioValue>>;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Spacing: any;
+export declare const Disabled: any;
+export declare const VerticalAlign: any;
+export declare const Controlled: () => JSX.Element;

package/dist/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+export * from './RadioGroup';

package/dist/stack/HStack.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StackProps } from './types';
+declare type VerticalAlignment = 'stretch' | 'top' | 'bottom' | 'center';
+export interface HStackProps extends StackProps {
+    alignment?: VerticalAlignment;
+}
+export declare const HStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & HStackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/stack/HStack.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType<any>;
+    } & import("./HStack").HStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Spacing: any;

package/dist/stack/VStack.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { StackProps } from './types';
+declare type HorizontalAlignment = 'stretch' | 'leading' | 'trailing' | 'center';
+export interface VStackProps extends StackProps {
+    alignment?: HorizontalAlignment;
+}
+export declare const VStack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & VStackProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/stack/VStack.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType<any>;
+    } & import("./VStack").VStackProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Spacing: any;

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HStack';
+export * from './VStack';

package/dist/stack/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SizeProps, SpaceProps } from '../styles';
+import { CSSValueWithLength } from '../styles/buildCSSWithLength';
+export declare type StackAlignment = 'stretch' | 'flex-start' | 'center' | 'flex-end';
+export interface StackProps extends SizeProps, SpaceProps {
+    className?: string;
+    children?: React.ReactNode;
+    spacing?: CSSValueWithLength;
+}

package/dist/stories/Box.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Box: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+} & {
+    background?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/stories/Colors.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function convertSnakeCaseToCapitalizedWords(name: string): string;
+export declare const Colors: React.FC<{}>;

package/dist/stories/Icon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Icons: React.FC<{}>;

package/dist/stories/SemanticColors.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SemanticColors: React.FC<{}>;

package/dist/stories/Typography.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Typography: React.FC<{}>;

package/dist/styles/buildCSSWithLength.d.ts

@@ -0,0 +1,2 @@
+export declare type CSSValueWithLength = number | string;
+export declare function buildCSSWithLength(property: string, value?: CSSValueWithLength): string;

package/dist/styles/common.d.ts

@@ -0,0 +1,2 @@
+export declare const hidden: import("@emotion/utils").SerializedStyles;
+export declare const absolute_center: import("@emotion/utils").SerializedStyles;

package/dist/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './common';
+export * from './size';
+export * from './space';

package/dist/styles/size.d.ts

@@ -0,0 +1,6 @@
+import { CSSValueWithLength } from './buildCSSWithLength';
+export interface SizeProps {
+    width?: CSSValueWithLength;
+    height?: CSSValueWithLength;
+}
+export declare function size({ width, height }: SizeProps): import("@emotion/utils").SerializedStyles;

package/dist/styles/space.d.ts

@@ -0,0 +1,14 @@
+import { CSSValueWithLength } from './buildCSSWithLength';
+export interface SpaceProps {
+    m?: CSSValueWithLength;
+    mt?: CSSValueWithLength;
+    ml?: CSSValueWithLength;
+    mr?: CSSValueWithLength;
+    mb?: CSSValueWithLength;
+    p?: CSSValueWithLength;
+    pt?: CSSValueWithLength;
+    pl?: CSSValueWithLength;
+    pr?: CSSValueWithLength;
+    pb?: CSSValueWithLength;
+}
+export declare function space({ m, mt, ml, mr, mb, p, pt, pl, pr, pb }: SpaceProps): import("@emotion/utils").SerializedStyles;

package/dist/text/BaseText.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import React from 'react';
+import { Typography } from '../foundation';
+declare type Alignment = 'center' | 'leading' | 'trailing';
+declare type TextElement = keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'li'>;
+export interface BaseTextProps extends React.Attributes {
+    alignment?: Alignment;
+    /**
+     * @default span
+     */
+    as?: TextElement;
+    color?: string;
+    /**
+     * @default Body_13_Regular
+     */
+    variant?: Typography;
+}
+export declare const BaseText: React.FC<BaseTextProps & JSX.IntrinsicElements[BaseTextProps['as']]>;
+export {};

package/dist/text/BaseText.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseTextProps } from './BaseText';
+declare const _default: {
+    title: string;
+    component: React.FC<BaseTextProps & (React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> | React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement> | React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>)>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Alignment: any;
+export declare const Variant: any;

package/dist/text/index.d.ts

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

package/dist/textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import React, { TextareaHTMLAttributes } from 'react';
+import { SizeProps } from '../styles';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, SizeProps {
+    error?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea/Textarea.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextareaProps } from './Textarea';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+};
+export default _default;
+export declare const Base: any;
+export declare const Error: any;
+export declare const Disabled: any;
+export declare const EnteredDisabled: any;

package/dist/textarea/index.d.ts

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

package/dist/toggle-switch/ToggleSwitch.d.ts

@@ -0,0 +1,22 @@
+import React, { ButtonHTMLAttributes } from 'react';
+export declare type ToggleSwitchSize = 'small' | 'large';
+export interface ToggleSwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     *  @default true
+     */
+    isOn?: boolean;
+    /**
+     *  @default small
+     */
+    size?: ToggleSwitchSize;
+    /**
+     *  @default ON
+     */
+    onText?: string;
+    /**
+     *  @default OFF
+     */
+    offText?: string;
+}
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+export default ToggleSwitch;

package/dist/toggle-switch/ToggleSwitch.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToggleSwitchProps } from './ToggleSwitch';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export default _default;
+export declare const Base: any;

package/dist/toggle-switch/index.d.ts

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

package/dist/toggle-switch/styles.d.ts

@@ -0,0 +1,4 @@
+import { ToggleSwitchSize } from './ToggleSwitch';
+export declare const toggle_switch_base_css: import("@emotion/utils").SerializedStyles;
+export declare const getStylesByActive: (isOn: boolean) => import("@emotion/utils").SerializedStyles;
+export declare const getStyleByProps: (size: ToggleSwitchSize, isOn: boolean) => import("@emotion/utils").SerializedStyles;

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@croquiscom/pds",
+  "version": "0.0.1",
+  "description": "Design system for Zigzag's Partner Center",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "repository": "https://github.com/croquiscom/pds",
+  "author": "@croquiscom/frontend",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "build-rollup": "rollup -c",
+    "build-types": "tsc",
+    "build": "npm run build-rollup && npm run build-types",
+    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
+    "changeset": "changeset",
+    "svgr": "svgr -- assets/icons",
+    "release": "yarn build && changeset publish"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "react": "^16.13.1 || ^17 || ^18",
+    "react-dom": "^16.13.1 || ^17 || ^18"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@changesets/cli": "^2.16.0",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-url": "^6.0.0",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@svgr/cli": "^6.1.2",
+    "@svgr/rollup": "^6.1.2",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "chromatic": "^6.5.3",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
+    "prettier": "^2.3.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-number-format": "^4.6.4",
+    "rollup": "^2.52.7",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.30.0",
+    "storybook-dark-mode": "^1.1.0",
+    "typescript": "^4.3.5"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "lodash-es": "^4.17.21",
+    "polished": "^4.2.2"
+  }
+}

package/svgo.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeViewBox: false,
+        },
+      },
+    },
+    'removeXMLNS',
+    'prefixIds',
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: 'version',
+      },
+    },
+    'sortAttrs',
+  ],
+};

package/tools/svgr-component-template.js

@@ -0,0 +1,39 @@
+const getAttributeValue = (jsx, name) => {
+  return jsx.find((e) => e.name.name === name);
+};
+
+function svgrComponentTemplate(variables, { tpl }) {
+  const { exports, jsx, componentName } = variables;
+  const matched_size = componentName.match(/\d{2,3}$/);
+
+  const widthAttr = getAttributeValue(jsx.openingElement.attributes, 'width');
+  const heightAttr = getAttributeValue(jsx.openingElement.attributes, 'height');
+
+  const width = widthAttr.value.expression.value;
+  const height = heightAttr.value.expression.value;
+  const aspectRatio = width / height;
+
+  const heightExpr = aspectRatio === 1
+    ? tpl(`size`)
+    : tpl(`size && Math.floor(size / ${aspectRatio}) || ${height}`);
+
+  heightAttr.value.expression = heightExpr.expression;
+
+  return tpl`
+  import React from 'react';
+  import { IconProps } from '.'
+
+  const ${componentName} = ({
+    size = ${matched_size ? matched_size[0] : '16'},
+    color= '#363644',
+    secondaryColor= '#D5D5DC',
+    ...props
+  }: IconProps): JSX.Element => {
+    return ${jsx};
+  }
+
+  ${exports}
+  `;
+}
+
+module.exports = svgrComponentTemplate;

package/tools/svgr-index-template.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+const prepend_code = `
+  export interface IconProps extends React.SVGProps<SVGSVGElement> {
+    size?: number;
+    color?: string;
+    secondaryColor?: string;
+  }
+`;
+
+function svgrIndexTemplate(filePaths) {
+  const exportEntries = filePaths.map((filePath) => {
+    const basename = path.basename(filePath, path.extname(filePath));
+    const exportName = `Icon${basename}`;
+    return `export { default as ${exportName} } from './${basename}'`;
+  });
+  return [prepend_code, ...exportEntries].join('\n');
+}
+
+module.exports = svgrIndexTemplate;