WIP(web-diary): npm package content (#87)

* WIP(web-diary): npm package content

ISSUES CLOSED: #81

* WIP(web-diary): bpm edited content

affects: @practice/web-diary

ISSUES CLOSED: #81

* feat(web-diary): npm package used in pist-list fragment

affects: @fragments/post-list, @practice/web-diary

ISSUES CLOSED: #81

* refactor(web-diary): new package version used

affects: @gochicus/list, @ex-ui/background, @ex-ui/button, @ex-ui/input, @ex-ui/layout, @ex-ui/text,
@ex-ui/theme, @fragments/post-list, @practice/web-diary, @ui/background, @ui/button, @ui/input,
@ui/layout, @ui/text, @ui/theme

package code in list directory

ISSUES CLOSED: #81

* style(list): lint changes

affects: @gochicus/list

ISSUES CLOSED: #81

* style(list): lint changes

affects: @gochicus/list

ISSUES CLOSED: #81

* style(list): lint changes

ISSUES CLOSED: #81

* style(list): lint changes

affects: @gochicus/list

ISSUES CLOSED: #81

* style(list): lint changes

affects: @ex-ui/background, @ex-ui/button, @ex-ui/input, @ex-ui/layout, @ex-ui/text, @ex-ui/theme,
@practice/web-diary, @ui/background, @ui/button, @ui/input, @ui/layout, @ui/text, @ui/theme

ISSUES CLOSED: #81

* refactor(list): types changed

ISSUES CLOSED: #81

* refactor(list): types changed

ISSUES CLOSED: #81

* refactor(list): types changed

ISSUES CLOSED: #81

* refactor(list): interface changed

ISSUES CLOSED: #81

* refactor(list): interface changed

affects: @fragments/post-list, @practice/web-diary

ISSUES CLOSED: #81

* refactor(list): package name changed

ISSUES CLOSED: #81

* refactor(list): interface structure changed

ISSUES CLOSED: #81

* refactor(list): interface changed

ISSUES CLOSED: #81

* refactor(list): interface change

ISSUES CLOSED: #81

* refactor(list): interface change

ISSUES CLOSED: #81

* refactor(list): interface change

ISSUES CLOSED: #81

* refactor(list): interface changed

ISSUES CLOSED: #81

* refactor(list): file name changed

affects: @practice/web-diary

ISSUES CLOSED: #81

* refactor(list): component name change

ISSUES CLOSED: #81

* refactor(list): icons moved from src

ISSUES CLOSED: #81

* refactor(list): file name change

ISSUES CLOSED: #81

* refactor(list): inteerface name change

ISSUES CLOSED: #81

* refactor(list): names to lowercase

ISSUES CLOSED: #81

* refactor(list): names to lowercase

ISSUES CLOSED: #81

* refactor(list): files names changed

ISSUES CLOSED: #81

* refactor(list): package description rewritten

ISSUES CLOSED: #81

list/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@gochicus/list",
+  "version": "0.0.14",
+  "description": "Renders items of list from array of objects, using map method",
+  "main": "dist/index.js",
+  "author": "gochicus",
+  "license": "BSD-3-Clause",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.3",
+    "@types/styled-system": "^5.1.11",
+    "styled-system": "^5.1.5",
+    "typescript": "^4.2.3",
+    "@atlantis-lab/tsconfig": "^0.1.12",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "styled-tools": "^1.7.2"
+  }
+}

list/src/button/appearance/appearance.interface.ts

@@ -0,0 +1,4 @@
+export interface AppearanceInterface {
+  backgroundColor?: string
+  borderColor?: string
+}

list/src/button/appearance/appearance.style.ts

@@ -0,0 +1,15 @@
+import { styleFn }             from 'styled-system'
+
+import { AppearanceInterface } from './appearance.interface'
+
+export const createColorStyles = (backgroundColor, borderColor): styleFn => () => ({
+  backgroundColor,
+  borderColor,
+})
+
+export const createAppearanceStyles = ({
+  backgroundColor,
+  borderColor,
+}: AppearanceInterface): styleFn => () => ({
+  ...createColorStyles(backgroundColor, borderColor)(),
+})

list/src/button/appearance/index.ts

@@ -0,0 +1 @@
+export * from './appearance.style'

list/src/button/base/base.styles.ts

@@ -0,0 +1,12 @@
+import { styleFn } from 'styled-system'
+
+export const createBaseStyles = (): styleFn => () => ({
+  cursor: 'pointer',
+  display: 'flex',
+  border: '1px solid transparent',
+  justifyContent: 'center',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  outline: 'none',
+  wordBreak: 'auto',
+})

list/src/button/base/index.ts

@@ -0,0 +1 @@
+export * from './base.styles'

list/src/button/button.component.tsx

@@ -0,0 +1,7 @@
+import styled                                  from '@emotion/styled'
+import { layout }                              from 'styled-system'
+
+import { ButtonProps }                         from './button.interface'
+import { baseStyles, colorStyles, sizeStyles } from './button.styles'
+
+export const Button = styled.div<ButtonProps>(baseStyles, sizeStyles, colorStyles, layout)

list/src/button/button.interface.ts

@@ -0,0 +1,9 @@
+import { ButtonHTMLAttributes } from 'react'
+
+export interface ButtonProps extends ButtonHTMLAttributes<any> {
+  backgroundColor?: string
+  borderColor?: string
+  height?: 'small' | 'normal'
+  size?: 'small' | 'normal'
+  width?: string | number
+}

list/src/button/button.styles.ts

@@ -0,0 +1,42 @@
+import { prop, switchProp }       from 'styled-tools'
+
+import { createAppearanceStyles } from './appearance'
+import { createBaseStyles }       from './base'
+import { createShapeStyles }      from './shape'
+
+export const baseStyles = createBaseStyles()
+
+export const whiteColorStyles = ({ theme }) =>
+  createAppearanceStyles({
+    backgroundColor: theme.colors.white,
+    borderColor: theme.colors.purple,
+  })
+export const purpleColorStyles = ({ theme }) =>
+  createAppearanceStyles({
+    backgroundColor: theme.colors.purple,
+    borderColor: theme.colors.grey,
+  })
+export const redColorStyles = ({ theme }) =>
+  createAppearanceStyles({
+    backgroundColor: theme.colors.lightRed,
+    borderColor: theme.colors.grey,
+  })
+export const greyColorStyles = ({ theme }) =>
+  createAppearanceStyles({
+    backgroundColor: theme.colors.lightGrey,
+  })
+
+export const normalHeightStyles = createShapeStyles({ height: '40px' })
+export const smallHeightStyles = createShapeStyles({ height: '30px' })
+
+export const sizeStyles = switchProp(prop('height', 'normal'), () => ({
+  small: smallHeightStyles,
+  normal: normalHeightStyles,
+}))
+
+export const colorStyles = switchProp(prop('color', 'purple'), () => ({
+  purple: purpleColorStyles,
+  white: whiteColorStyles,
+  red: redColorStyles,
+  grey: greyColorStyles,
+}))

list/src/button/index.ts

@@ -0,0 +1 @@
+export * from './button.component'

list/src/button/shape/index.ts

@@ -0,0 +1 @@
+export * from './shape.styles'

list/src/button/shape/shape.interface.ts

@@ -0,0 +1,7 @@
+export interface ShapeInterface {
+  height?: string | number
+  borderStyle?: string
+  borderRadius?: string | number
+  borderWeight?: string | number
+  borderWidth?: string | number
+}

list/src/button/shape/shape.styles.ts

@@ -0,0 +1,29 @@
+import { styleFn }        from 'styled-system'
+
+import { ShapeInterface } from './shape.interface'
+
+export const createBaseShape = (height: number | string): styleFn => () => ({
+  height,
+})
+
+export const createBorderStyles = (
+  borderStyle: string,
+  borderRadius: string | number,
+  borderWeight: string | number,
+  borderWidth: string | number,
+): styleFn => () => ({
+  borderStyle,
+  borderRadius,
+  borderWeight,
+  borderWidth,
+})
+export const createShapeStyles = ({
+  height,
+  borderStyle,
+  borderRadius,
+  borderWeight,
+  borderWidth,
+}: ShapeInterface): styleFn => () => ({
+  ...createBaseShape(height)(),
+  ...createBorderStyles(borderStyle, borderRadius, borderWeight, borderWidth)(),
+})

list/src/condition/condition.component.tsx

@@ -0,0 +1,3 @@
+export const Condition = ({ match, children }) => {
+  return match && children
+}

list/src/condition/index.ts

@@ -0,0 +1 @@
+export * from './condition.component'

list/src/icons/heartIcon.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const HeartIcon = ({ color = 'red' }) => {
+  return (
+    <svg version='1.1' width='17px' height='17px' viewBox='0 0 391.837 391.837' fill={color}>
+      <g>
+        <path
+          d='M285.257,35.528c58.743,0.286,106.294,47.836,106.58,106.58
+		c0,107.624-195.918,214.204-195.918,214.204S0,248.165,0,142.108c0-58.862,47.717-106.58,106.58-106.58l0,0
+		c36.032-0.281,69.718,17.842,89.339,48.065C215.674,53.517,249.273,35.441,285.257,35.528z'
+        />
+      </g>
+    </svg>
+  )
+}

list/src/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './heartIcon.component'
+export * from './trashIcon.component'
+export * from './starIcon.component'

list/src/icons/starIcon.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const StarIcon = ({ color = 'yellow' }) => {
+  return (
+    <svg width='20px' height='20px' viewBox='0 0 53.867 53.867' fill={color}>
+      <polygon
+        points='26.934,1.318 35.256,18.182 53.867,20.887 40.4,34.013 43.579,52.549 26.934,43.798
+	10.288,52.549 13.467,34.013 0,20.887 18.611,18.182'
+      />
+    </svg>
+  )
+}

list/src/icons/trashIcon.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export const TrashIcon = ({ color = 'red' }) => {
+  return (
+    <svg
+      height='17px'
+      viewBox='-47 0 512 512'
+      width='17px'
+      xmlns='http://www.w3.org/2000/svg'
+      fill={color}
+    >
+      <path d='m416.875 114.441406-11.304688-33.886718c-4.304687-12.90625-16.339843-21.578126-29.941406-21.578126h-95.011718v-30.933593c0-15.460938-12.570313-28.042969-28.027344-28.042969h-87.007813c-15.453125 0-28.027343 12.582031-28.027343 28.042969v30.933593h-95.007813c-13.605469 0-25.640625 8.671876-29.945313 21.578126l-11.304687 33.886718c-2.574219 7.714844-1.2695312 16.257813 3.484375 22.855469 4.753906 6.597656 12.445312 10.539063 20.578125 10.539063h11.816406l26.007813 321.605468c1.933594 23.863282 22.183594 42.558594 46.109375 42.558594h204.863281c23.921875 0 44.175781-18.695312 46.105469-42.5625l26.007812-321.601562h6.542969c8.132812 0 15.824219-3.941407 20.578125-10.535157 4.753906-6.597656 6.058594-15.144531 3.484375-22.859375zm-249.320312-84.441406h83.0625v28.976562h-83.0625zm162.804687 437.019531c-.679687 8.402344-7.796875 14.980469-16.203125 14.980469h-204.863281c-8.40625 0-15.523438-6.578125-16.203125-14.980469l-25.816406-319.183593h288.898437zm-298.566406-349.183593 9.269531-27.789063c.210938-.640625.808594-1.070313 1.484375-1.070313h333.082031c.675782 0 1.269532.429688 1.484375 1.070313l9.269531 27.789063zm0 0' />
+      <path d='m282.515625 465.957031c.265625.015625.527344.019531.792969.019531 7.925781 0 14.550781-6.210937 14.964844-14.21875l14.085937-270.398437c.429687-8.273437-5.929687-15.332031-14.199219-15.761719-8.292968-.441406-15.328125 5.925782-15.761718 14.199219l-14.082032 270.398437c-.429687 8.273438 5.925782 15.332032 14.199219 15.761719zm0 0' />
+      <path d='m120.566406 451.792969c.4375 7.996093 7.054688 14.183593 14.964844 14.183593.273438 0 .554688-.007812.832031-.023437 8.269531-.449219 14.609375-7.519531 14.160157-15.792969l-14.753907-270.398437c-.449219-8.273438-7.519531-14.613281-15.792969-14.160157-8.269531.449219-14.609374 7.519532-14.160156 15.792969zm0 0' />
+      <path d='m209.253906 465.976562c8.285156 0 15-6.714843 15-15v-270.398437c0-8.285156-6.714844-15-15-15s-15 6.714844-15 15v270.398437c0 8.285157 6.714844 15 15 15zm0 0' />
+    </svg>
+  )
+}

list/src/index.ts

@@ -0,0 +1 @@
+export { List } from './list.component'

practice/web-diary/ui/list/src/Item.tsx → list/src/item.component.tsx

@@ -1,10 +1,10 @@
 import React, { useState }                from 'react'
 
-import { Button }                         from '@ui/button'
-import { Condition }                      from '@ui/condition'
-import { HeartIcon, StarIcon, TrashIcon } from '@ui/icons'
-import { Box, Column, Layout, Row }       from '@ui/layout'
-import { Text }                           from '@ui/text'
+import { Button }                         from './button'
+import { Condition }                      from './condition'
+import { HeartIcon, StarIcon, TrashIcon } from './icons'
+import { Box, Column, Layout, Row }       from './layout'
+import { Text }                           from './text'
 
 export const Item = ({
   deleteItem,

list/src/layout/box.component.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled'
+import {
+  border,
+  color,
+  display,
+  flexbox,
+  layout,
+  position,
+  shadow,
+  size,
+  space,
+  system,
+} from 'styled-system'
+
+export const Box = styled.div(
+  system({ overflow: true, hyphens: true }),
+  layout,
+  space,
+  color,
+  flexbox,
+  shadow,
+  position,
+  border,
+  display,
+  size,
+)
+
+Box.defaultProps = {
+  display: 'flex',
+  boxSizing: 'border-box',
+}

list/src/layout/column.component.tsx

@@ -0,0 +1,10 @@
+import styled                                            from '@emotion/styled'
+import { color, flexbox, layout, position, size, space } from 'styled-system'
+
+export const Column = styled.div(layout, space, flexbox, position, color, size)
+
+Column.defaultProps = {
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+}

list/src/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './layout.component'
+export * from './box.component'
+export * from './row.component'
+export * from './column.component'

list/src/layout/layout.component.tsx

@@ -0,0 +1,8 @@
+import styled                                            from '@emotion/styled'
+import { color, flexbox, layout, position, size, space } from 'styled-system'
+
+export const Layout = styled.div(layout, space, flexbox, position, color, size)
+
+Layout.defaultProps = {
+  display: 'flex',
+}

list/src/layout/row.component.tsx

@@ -0,0 +1,11 @@
+import styled                                            from '@emotion/styled'
+import { color, flexbox, layout, position, size, space } from 'styled-system'
+
+export const Row = styled.div(layout, space, flexbox, position, color, size)
+
+Row.defaultProps = {
+  display: 'flex',
+  flexDirection: 'row',
+  width: '100%',
+  boxSizing: 'border-box',
+}

practice/web-diary/ui/list/src/List.tsx → list/src/list.component.tsx

@@ -1,10 +1,17 @@
 import React                from 'react'
+import { FC }               from 'react'
 
-import { Column }           from '@ui/layout'
+import { Item as ListItem } from './item.component'
+import { Column }           from './layout'
+import { ListProps }        from './list.interface'
 
-import { Item as ListItem } from './Item'
-
-export const List = ({ items, deleteItem, importantItem, likeItem, setPostData }) => {
+export const List: FC<ListProps> = ({
+  items,
+  deleteItem,
+  importantItem,
+  likeItem,
+  setPostData,
+}) => {
   return (
     <Column width='100%' justifyContent='center'>
       {items.map(item => (

list/src/list.interface.ts

@@ -0,0 +1,16 @@
+export interface PostDataObject {
+  post?: string | number
+  important?: boolean
+  like?: boolean
+  id: number
+}
+
+export type Callback = (id: number, postData?: PostDataObject, status?: boolean) => PostDataObject[]
+
+export interface ListProps {
+  items: PostDataObject[]
+  deleteItem: Callback
+  importantItem: Callback
+  likeItem: Callback
+  setPostData: () => PostDataObject[]
+}

list/src/text/index.ts

@@ -0,0 +1,2 @@
+export * from './text.component'
+export * from './space.component'

list/src/text/space.component.tsx

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const Space = ({ count = 1 }) => <span>{'\u00A0'.repeat(count)}</span>

list/src/text/text.component.tsx

@@ -0,0 +1,9 @@
+import styled                       from '@emotion/styled'
+import { color, space, typography } from 'styled-system'
+
+export const Text = styled.span<any>(color, typography, space)
+
+Text.defaultProps = {
+  fontSize: 'small',
+  textAlign: 'center',
+}

list/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@atlantis-lab/tsconfig/tsconfig.base.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
+}