@uni-design-system/uni-core 1.0.0 → 1.1.0

package/src/components/button/button.component.tsx

@@ -1,18 +0,0 @@
-import React, { ReactNode } from 'react';
-import useTheme from '../../core/theme/theme.hook';
-
-export interface ButtonProps {
-  children: ReactNode,
-  disabled?: boolean
-}
-
-export function Button({ children, disabled = false }: ButtonProps): JSX.Element {
-
-  const theme = useTheme();
-
-  return (
-    <button disabled={disabled}>
-      {children} {theme.name}
-    </button>
-  )
-}

package/src/components/button/button.stories.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Button, ButtonProps } from './button.component';
-
-export default {
-  title: 'Buttons',
-  component: Button,
-  // decorators: [withThemes(null, [LightTheme, DarkTheme], {providerFn})],
-  argTypes: {
-    children: { control: { type: 'text' } },
-    disabled: { control: { type: 'boolean' } }
-  }
-};
-
-export const BasicButton = (args: ButtonProps) => <Button {...args} />;
-BasicButton.args = {
-  disabled: false,
-  children: 'Sample'
-}
-
-BasicButton.story = {
-  name: 'Button',
-};

package/src/components/card/card.component.tsx

@@ -1,14 +0,0 @@
-import React, { ReactNode } from 'react';
-
-export interface CardProps {
-  children: ReactNode;
-}
-
-export default function Card({ children }: CardProps) {
-
-  return (
-    <div>
-      {children}
-    </div>
-  )
-}

package/src/core/backgrounds/background.model.ts

@@ -1,10 +0,0 @@
-import { IGradient } from '../gradients/gradient.model';
-import { IColor } from '../color/color.model';
-import { backgrounds } from './background.types';
-
-export interface IBackground {
-  type: backgrounds;
-  color: IColor;
-  gradient: IGradient;
-  image: string;
-}

package/src/core/backgrounds/background.types.ts

@@ -1,2 +0,0 @@
-
-export type BackgroundType = 'solid' | 'gradient' | 'transparent' | 'image' | 'movie';

package/src/core/color/color.helper.ts

@@ -1,16 +0,0 @@
-import { IColor } from './color.model';
-import { colorCategories, colorRoles, roleHues } from './color.types';
-
-export function hslColor(c: IColor): string {
-  return `hsl(${c.hue}, ${c.saturation}, ${c.lightness}, ${c.alpha})`;
-}
-
-export function roleColor(r: colorRoles): string {
-
-  const hue = roleHues[r].default;
-  const role: colorRoles = r;
-  const alpha = 1;
-  const category: colorCategories = 'jewel';
-
-  return hslColor({ role, category, hue, alpha });
-}

package/src/core/color/color.model.ts

@@ -1,42 +0,0 @@
-import {
-  colorCategories,
-  colorRoles,
-  colorSchemes,
-  colorStyles
-} from './color.types';
-
-// hsl(hue, saturation, lightness)
-
-export interface IColor {
-
-  /* Meta */
-  scheme?: colorSchemes;
-  style?: colorStyles;
-  role?: colorRoles;
-  category?: colorCategories;
-
-  /* Gradients */
-  GradientPosition?: IGradientPosition;
-
-  /* Ranges */
-  saturationRange?: IRange;
-  brightnessRangeMap?: IRange;
-
-  /* HSL */
-  hue: number | undefined;
-  saturation?: number;
-  lightness?: number;
-
-  /* Transparency */
-  alpha: number;
-}
-
-export interface IGradientPosition {
-  value: string;
-}
-
-export interface IRange {
-  low: number;
-  high: number;
-  default?: number;
-}

package/src/core/color/color.types.ts

@@ -1,76 +0,0 @@
-// https://designerup.co/blog/ui-design-choosing-color-palettes/
-// https://designerup.co/blog/practical-guide-to-perfect-ui-color-palettes/
-
-import { IRange } from './color.model';
-
-export type colorStyles = 'solid' | 'transparent' | 'gradient';
-
-export type colorSchemes = 'monochromatic'
-  | 'analogous'
-  | 'complimentary'
-  | 'splitComplimentary'
-  | 'triadic'
-  ;
-
-
-export type colorCategories = 'jewel'
-  | 'pastel'
-  | 'earth'
-  | 'neutral'
-  | 'florescent'
-  | 'shades'
-  ;
-
-export const saturationRanges: Record<colorCategories, IRange> = {
-  jewel: { low: 73, high: 83 },
-  pastel: { low: 14, high: 21 },
-  earth: { low: 36, high: 41 },
-  neutral: { low: 1, high: 10 },
-  florescent: { low: 63, high: 100 },
-  shades: { low: 0, high: 0 },
-};
-
-export const lightnessRanges: Record<colorCategories, IRange> = {
-  jewel: { low: 56, high: 76 },
-  pastel: { low: 89, high: 96 },
-  earth: { low: 36, high: 77 },
-  neutral: { low: 70, high: 99 },
-  florescent: { low: 82, high: 100 },
-  shades: { low: 0, high: 100 }
-};
-
-
-// Red - used to indicate error, danger, wrong.
-// Green - used to indicate success saved or correct.
-// Yellow - used for temporary alert, caution, warnings.
-// Blue  - used for information.
-
-export type utilColorRoles = 'warn'
-  | 'alert'
-  | 'success'
-  | 'info'
-;
-
-export type colorRoles = 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'inverse'
-  | 'ghost'
-  ;
-
-export const roleHues: Record<colorRoles, IRange> = {
-  primary: { low: 73, high: 83, default: 0 },
-  secondary: { low: 14, high: 21, default: 0 },
-  tertiary: { low: 36, high: 41, default: 0 },
-  inverse: { low: 63, high: 100, default: 0 },
-  ghost: { low: 0, high: 0, default: 0 },
-}
-
-export const utilHues: Record<utilColorRoles, IRange> = {
-  warn: { low: 320, high: 20, default: 0 }, // red
-  alert: { low: 40, high: 70, default: 60 }, // yellow
-  success: { low: 90, high: 150, default: 120 }, // green
-  info: { low: 200, high: 260, default: 240 }, // blue
-}
-
-export type ColorToken = 'primary';

package/src/core/container/container.component.tsx

@@ -1,14 +0,0 @@
-import React, { ReactNode } from 'react';
-
-export interface ContainerProps {
-  children: ReactNode;
-}
-
-export default function Container({ children }: ContainerProps) {
-
-  return (
-    <div>
-      {children}
-    </div>
-  )
-}

package/src/core/container/container.model.ts

@@ -1,50 +0,0 @@
-import { BackgroundType } from '../backgrounds/background.types';
-import { BorderWidth } from '../border/border.types';
-import { ColorToken } from '../color/color.types';
-import { Apply, HorizontalAlign, RadiusApply, Size } from '../core.types';
-import { ShadowStyle } from '../shadow/shadow.types';
-
-export interface ContainerProps {
-  maxWidth?: number;
-  align?: HorizontalAlign;
-
-  backgroundType?: BackgroundType;
-  shadowStyle?: ShadowStyle;
-
-  backgroundColor?: ColorToken;
-  textColor?: ColorToken;
-
-  blur?: {
-    amount?: number;
-  };
-
-  border?: {
-    apply?: Apply;
-    applyAsSeparator?: boolean;
-    color?: ColorToken;
-    thickness?: BorderWidth;
-  };
-
-  radius?: {
-    size?: Size;
-    apply?: RadiusApply;
-  };
-
-  gradient?: {
-    degree?: number;
-    colors?: string[];
-  };
-
-  imageConfig?: {
-    src?: string;
-  };
-
-  margin?: {
-    horizontal?: Record<Size, number>;
-    bottom?: Record<Size, number>;
-    top?: Record<Size, number>;
-  };
-
-  Spacings?: Record<Size, number>;
-  TopSpacings?: Record<Size, number>;
-}

package/src/core/core.types.ts

@@ -1,63 +0,0 @@
-export type Role =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'ghost'
-  | 'error'
-  | 'warn'
-  | 'link'
-  ;
-
-export type SupportRole =
-  | 'info'
-  | 'warn'
-  | 'success'
-  | 'error'
-  ;
-
-export type Size =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  ;
-
-export type HorizontalBinary =
-  | 'left'
-  | 'right'
-  ;
-
-export type HorizontalAlign = HorizontalBinary
-  | 'center'
-  ;
-
-export type VerticalBinary =
-  | 'top'
-  | 'bottom'
-  ;
-
-export type VerticalAlign = VerticalBinary
-  | 'middle'
-  ;
-
-export type Apply =
-  | HorizontalBinary
-  | VerticalBinary
-  | 'vertical'
-  | 'horizontal'
-  | 'all'
-  ;
-
-export type RadiusApply =
-  | 'left'
-  | 'right'
-  | 'top'
-  | 'bottom'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'all'
-  | 'none'
-  ;

package/src/core/gradients/gradiennt.helper.ts

@@ -1,7 +0,0 @@
-import { IGradient } from './gradient.model';
-
-
-
-export function gradient(config: IGradient): string {
-  return ``;
-}

package/src/core/gradients/gradient.model.ts

@@ -1,7 +0,0 @@
-import { IColor } from '../color/color.model';
-
-export interface IGradient {
-  defaultColor: IColor;
-  degee: number,
-  colors: Record<string, IColor>
-}

package/src/core/iconography/icon.model.ts

@@ -1,8 +0,0 @@
-import { IColor } from '../color/color.model';
-import { IMasking } from '../masking/masking.model';
-
-export interface Icon {
-  background: IColor;
-  foreground: IColor;
-  mask: IMasking;
-}

package/src/core/iconography/icon.types.ts

@@ -1,68 +0,0 @@
-export type color = 'white' | 'black' | 'red' | 'blue' | 'green';
-
-export type style = 'solid' | 'outline' | 'gradient';
-
-export type display = 'logo'
-  | 'alert'
-  | 'warn'
-  | 'disabled'
-  | 'trash'
-  | 'user'
-  | 'back'
-  | 'next'
-  | 'unlock'
-  | 'view'
-  | 'hide'
-;
-
-export type actionable = 'add'
-  | 'create'
-  | 'copy'
-  | 'edit'
-  | 'disable'
-  | 'save'
-  | 'pin'
-  | 'fav'
-  | 'tag'
-  | 'update'
-  | 'archive'
-  | 'delete'
-  | 'lock'
-  | 'unlock'
-  | 'view'
-  | 'hide'
-;
-
-export type behavior = 'open'
-  | 'expand'
-  | 'collapse'
-;
-
-export type messaging = 'alert'
-  | 'info'
-  | 'success'
-  | 'warn'
-  | 'warning'
-;
-
-
-export type usage = 'logo'
-  | 'alert'
-  | 'chat'
-  | 'down'
-  | 'favorite'
-  | 'info'
-  | 'location'
-  | 'lock'
-  | 'message'
-  | 'profile'
-  | 'question'
-  | 'remove'
-  | 'schedule'
-  | 'search'
-  | 'send'
-  | 'settings'
-  | 'share'
-  | 'unlock'
-  | 'up'
-;

package/src/core/layout/layout.types.ts

@@ -1,5 +0,0 @@
-import { Size } from '../core.types';
-
-export type elements = 'margin' | 'border' | 'padding';
-
-export const spacings: Record<Size, number> = { xs: 5, sm: 8, md: 13, lg: 21, xl: 34 };

package/src/core/masking/masking.model.ts

@@ -1,7 +0,0 @@
-import { IColor } from '../color/color.model';
-import { MaskingShape } from './masking.types';
-
-export interface IMasking {
-  background: IColor;
-  shape: MaskingShape;
-}

package/src/core/shadow/shadow.types.ts

@@ -1,9 +0,0 @@
-export type ShadowStyle =
-  | 'Flat'
-  | 'Raised'
-  | 'Focussed'
-  | 'Pressed'
-  | 'Modal'
-  | 'Navigation'
-  | 'Drawer'
-  ;

package/src/core/theme/theme.context.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { ThemeProps } from './theme.model';
-
-const ThemeContext = React.createContext<ThemeProps>({});
-
-if (process.env.NODE_ENV !== 'production') {
-  ThemeContext.displayName = 'ThemeContext';
-}
-
-export default ThemeContext;

package/src/core/theme/theme.hook.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import ThemeContext from './theme.context';
-import { ThemeModel} from './theme.model';
-import { LightTheme } from './themes/light.theme';
-
-export default function useTheme(): ThemeModel {
-
-  const themeProps = React.useContext(ThemeContext);
-
-  const theme = themeProps && themeProps.themes && themeProps.themeId && themeProps.themes[themeProps.themeId];
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useDebugValue(theme);
-  }
-
-  return theme || LightTheme;
-}

package/src/core/theme/theme.model.ts

@@ -1,12 +0,0 @@
-
-export interface ThemeProps {
-  themeId?: string;
-  themes?: Record<string, ThemeModel>;
-  setTheme?: any;
-}
-
-export interface ThemeModel {
-  name: string;
-  id: string;
-  colors: Record<string, string>;
-}

package/src/core/theme/theme.provider.tsx

@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { DefaultThemeId } from './theme.records'
-import { ThemeModel } from './theme.model';
-import ThemeContext from './theme.context';
-
-const STORAGE_KEY = 'THEME_ID';
-
-interface ThemeProviderProps {
-  themeId: string;
-  themes: Record<string, ThemeModel>;
-  children?: React.ReactChild;
-}
-
-export const ThemeProvider = ({ children, themeId, themes }: ThemeProviderProps) => {
-
-  const [_themeId, setThemeId] = useState<string>(themeId);
-
-  useEffect(() => {
-    (async () => {
-      const id = localStorage.getItem(STORAGE_KEY);
-      if (id) {
-        setThemeId(id);
-      } else {
-        setThemeId(DefaultThemeId);
-      }
-    })();
-  }, []);
-
-  return (
-    <ThemeContext.Provider value={{themeId, themes}}>
-      {_themeId ? children : null}
-    </ThemeContext.Provider>
-  );
-};
-
-/*export function withTheme(Component: ({children, theme, themes }: (any & ThemeProps)) => JSX.Element) {
-
-  return (props: JSX.IntrinsicAttributes) => {
-    const { themeId, setThemeId } = useContext(ThemeContext);
-
-    const getTheme = (themeId: string) => themes[themeId];
-    const setTheme = (themeId: string) => {
-      localStorage.setItem(STORAGE_KEY, themeId);
-      setThemeId(themeId);
-    };
-
-    return (
-      <Component
-        {...props}
-        themes={Themes}
-        theme={getTheme(themeId)}
-        setTheme={setTheme}
-      />
-    );
-  };
-}*/

package/src/core/theme/theme.records.ts

@@ -1,11 +0,0 @@
-import { ThemeModel } from './theme.model';
-import { DarkTheme } from './themes/dark.theme';
-import { LightTheme } from './themes/light.theme';
-
-export const BuiltInThemes: Record<string, ThemeModel> = {
-  LightTheme,
-  DarkTheme
-}
-
-// First Theme is default.
-export const DefaultThemeId = Object.keys(BuiltInThemes)[0];

package/src/core/theme/theme.types.ts

@@ -1,2 +0,0 @@
-
-export type themes = 'uni' | 'carbon' | 'material' | 'bootstrap';

package/src/core/theme/themes/dark.theme.ts

@@ -1,9 +0,0 @@
-import { ThemeModel } from '../theme.model';
-
-export const DarkTheme: ThemeModel = {
-  id: 'DarkTheme',
-  name: 'Dark Theme',
-  colors: {
-
-  }
-}

package/src/core/theme/themes/light.theme.ts

@@ -1,13 +0,0 @@
-import { ThemeModel } from '../theme.model';
-
-export const LightTheme: ThemeModel = {
-  id: 'LightTheme',
-  name: 'Light Theme',
-  colors: {
-    primary: '#35A7FF',
-    secondary: '#38618C',
-    error: '#FFE74C',
-    warn: '#FF5964',
-    background: '#FFFFFF'
-  }
-}

package/src/core/typography/typography.types.ts

@@ -1,10 +0,0 @@
-
-export type classes = 'sanserif' | 'serif' | 'slab' | 'script' | 'display' | 'monospace';
-
-export type families = 'Open-Sans' | 'Times-New-Roman' | 'Noto-Serif-Display';
-
-export type styles = 'thin' | 'light' | 'regular' | 'medium' | 'bold' | 'semi-bold' | 'black';
-
-export type placement = 'overline' | 'title' | 'underline' | 'body' | 'label' | 'note' | 'footer';
-
-export type alignment = 'left' | 'right' | 'center';

package/src/stories/Button.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-// @ts-ignore
-import { withThemes } from '@react-theming/storybook-addon';
-
-import { Button } from './Button';
-import { BuiltInThemes, DefaultThemeId } from '../core/theme/theme.records';
-import { ThemeProvider } from '../core/theme/theme.provider';
-import { ThemeProps } from '../core/theme/theme.model';
-
-// create decorator
-const themingDecorator = withThemes(ThemeProvider, [DefaultThemeId]);
-
-const providerFn = ({theme, children}: any & ThemeProps) => {
-  return <ThemeProvider themeId={theme.id} themes={BuiltInThemes}>{children}</ThemeProvider>;
-};
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};